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>
-        <div className="maputnik-doc-popup">
-          {this.props.doc}
-        </div>
+        <span>
+          {this.props.label}
+          {'\xa0'}
+          <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>
   }
 }