Initial work for new help text implementation.

src/components/fields/DocLabel.jsx

@@ -10,13 +10,36 @@ export default class DocLabel extends React.Component {
     doc: PropTypes.string.isRequired,
   }
 
+  constructor (props) {
+    super(props);
+    this.state = {
+      open: false,
+    }
+  }
+
+  onToggleDoc = (open) => {
+    this.setState({
+      open,
+    }, () => {
+      if (this.props.onToggleDoc) {
+        this.props.onToggleDoc(this.state.open);
+      }
+    });
+  }
+
   render() {
     return <label className="maputnik-doc-wrapper">
       <div className="maputnik-doc-target">
-        <span>{this.props.label}</span>
+        <span>
-        <div className="maputnik-doc-popup">
+          {this.props.label}
-          {this.props.doc}
+          {'\xa0'}
-        </div>
+          <button
+            className={`maputnik-doc-button maputnik-doc-button--${this.state.open ? 'open' : 'closed'}`}
+            onClick={() => this.onToggleDoc(!this.state.open)}
+          >
+            {this.state.open ? 'x' : '?'}
+          </button>
+        </span>
       </div>
     </label>
   }

src/components/inputs/InputBlock.jsx

@@ -18,11 +18,24 @@ class InputBlock extends React.Component {
     onChange: PropTypes.func,
   }
 
+  constructor (props) {
+    super(props);
+    this.state = {
+      showDoc: false,
+    }
+  }
+
   onChange(e) {
     const value = e.target.value
     return this.props.onChange(value === "" ? undefined : value)
   }
 
+  onToggleDoc = (val) => {
+    this.setState({
+      showDoc: val
+    });
+  }
+
   render() {
     return <div style={this.props.style}
       data-wd-key={this.props["data-wd-key"]}
@@ -36,6 +49,7 @@ class InputBlock extends React.Component {
         <DocLabel
           label={this.props.label}
           doc={this.props.doc}
+          onToggleDoc={this.onToggleDoc}
         />
       </div>
       }
@@ -52,6 +66,14 @@ class InputBlock extends React.Component {
       <div className="maputnik-input-block-content">
         {this.props.children}
       </div>
+      {this.props.doc &&
+      <div
+        className="maputnik-doc-inline"
+        style={{display: this.state.showDoc ? '' : 'none'}}
+      >
+        {this.props.doc}
+      </div>
+      }
     </div>
   }
 }

src/styles/_components.scss

@@ -28,6 +28,13 @@
   height: 100%;
 }
 
+.maputnik-input-block:hover {
+  .maputnik-doc-button {
+    opacity: 1;
+    pointer-events: all;
+  }
+}
+
 // DOC LABEL
 .maputnik-doc {
   &-target {
@@ -57,6 +64,30 @@
     z-index: 10;
     pointer-events: none;
   }
+
+  &-button {
+    opacity: 0;
+    pointer-events: none;
+    background: #000;
+    color: white;
+    border: solid 1px #555;
+    border-radius: 100px;
+
+    &--open {
+      background: white;
+      color: black;
+      opacity: 1;
+      pointer-events: all;
+    }
+  }
+}
+
+.maputnik-doc-inline {
+  color: $color-lowgray;
+  background-color: $color-gray;
+  padding: $margin-2;
+  font-size: 12px;
+  margin-top: $margin-2;
 }
 
 .maputnik-doc-target:hover .maputnik-doc-popup {