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>
   }