From 67bdea1827936afb0a065a5d31c72794c8e0af47 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 29 Jun 2020 16:03:59 +0100
Subject: [PATCH] Re-added info button and SDK docs to fields after refactor.

---
 src/components/Block.jsx     | 25 ++++++++++++++++++++++---
 src/components/Fieldset.jsx  | 36 +++++++++++++++++++++++++++++++++---
 src/components/SpecField.jsx |  6 +++++-
 src/styles/_components.scss  |  1 +
 4 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/src/components/Block.jsx b/src/components/Block.jsx
index bfa85ba1..383c1fcb 100644
--- a/src/components/Block.jsx
+++ b/src/components/Block.jsx
@@ -69,15 +69,34 @@ export default class Block extends React.Component {
       })}
       onClick={this.onLabelClick}
     >
-      <div className="maputnik-input-block-label">
-        {this.props.label}
-      </div>
+      {this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          <FieldDocLabel
+            label={this.props.label}
+            onToggleDoc={this.onToggleDoc}
+            fieldSpec={this.props.fieldSpec}
+          />
+        </div>
+      }
+      {!this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          {this.props.label}
+        </div>
+      }
       <div className="maputnik-input-block-action">
         {this.props.action}
       </div>
       <div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
         {this.props.children}
       </div>
+      {this.props.fieldSpec &&
+        <div
+          className="maputnik-doc-inline"
+          style={{display: this.state.showDoc ? '' : 'none'}}
+        >
+          <Doc fieldSpec={this.props.fieldSpec} />
+        </div>
+      }
     </label>
   }
 }
diff --git a/src/components/Fieldset.jsx b/src/components/Fieldset.jsx
index aa3b23ec..e6308b9b 100644
--- a/src/components/Fieldset.jsx
+++ b/src/components/Fieldset.jsx
@@ -1,5 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import FieldDocLabel from './FieldDocLabel'
+import Doc from './Doc'
 
 
 let IDX = 0;
@@ -8,21 +10,49 @@ export default class Fieldset extends React.Component {
   constructor (props) {
     super(props);
     this._labelId = `fieldset_label_${(IDX++)}`;
+    this.state = {
+      showDoc: false,
+    }
+  }
+
+  onToggleDoc = (val) => {
+    this.setState({
+      showDoc: val
+    });
   }
 
   render () {
     const {props} = this;
 
     return <div className="maputnik-input-block" role="group" aria-labelledby={this._labelId}>
-      <div className="maputnik-input-block-label" id={this._labelId}>
-        {props.label}
-      </div>
+      {this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          <FieldDocLabel
+            label={this.props.label}
+            onToggleDoc={this.onToggleDoc}
+            fieldSpec={this.props.fieldSpec}
+          />
+        </div>
+      }
+      {!this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          {props.label}
+        </div>
+      }
       <div className="maputnik-input-block-action">
         {this.props.action}
       </div>
       <div className="maputnik-input-block-content">
         {props.children}
       </div>
+      {this.props.fieldSpec &&
+        <div
+          className="maputnik-doc-inline"
+          style={{display: this.state.showDoc ? '' : 'none'}}
+        >
+          <Doc fieldSpec={this.props.fieldSpec} />
+        </div>
+      }
     </div>
   }
 }
diff --git a/src/components/SpecField.jsx b/src/components/SpecField.jsx
index 9d73f1c1..e978b65a 100644
--- a/src/components/SpecField.jsx
+++ b/src/components/SpecField.jsx
@@ -39,7 +39,11 @@ export default class SpecField extends React.Component {
       TypeBlock = Block;
     }
 
-    return <TypeBlock label={props.label} action={props.action}>
+    return <TypeBlock
+      label={props.label}
+      action={props.action}
+      fieldSpec={this.props.fieldSpec}
+    >
       <InputSpec {...props} />
     </TypeBlock>
   }
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index 6406dd73..d7ee1966 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -89,6 +89,7 @@
   font-size: 12px;
   margin-top: $margin-3;
   line-height: 1.5;
+  flex: 1 0;
 }
 
 .maputnik-doc-target:hover .maputnik-doc-popup {