From ba0a94f3ade64ce092042b015018e14cf01764cc Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Mon, 9 Jan 2017 16:45:59 +0100
Subject: [PATCH] Use DocLabel in input block

---
 src/components/inputs/InputBlock.jsx            | 13 +++++++++++++
 src/components/layers/LayerIdBlock.jsx          |  3 ++-
 src/components/layers/LayerSourceBlock.jsx      |  3 ++-
 src/components/layers/LayerSourceLayerBlock.jsx |  3 ++-
 src/components/layers/LayerTypeBlock.jsx        |  3 ++-
 5 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/inputs/InputBlock.jsx b/src/components/inputs/InputBlock.jsx
index 9023911..68e8645 100644
--- a/src/components/inputs/InputBlock.jsx
+++ b/src/components/inputs/InputBlock.jsx
@@ -1,11 +1,13 @@
 import React from 'react'
 import input from '../../config/input'
+import DocLabel from '../fields/DocLabel'
 import { margins } from '../../config/scales'
 
 /** Wrap a component with a label */
 class InputBlock extends React.Component {
   static propTypes = {
     label: React.PropTypes.string.isRequired,
+    doc: React.PropTypes.string,
     children: React.PropTypes.element.isRequired,
     style: React.PropTypes.object,
   }
@@ -31,6 +33,16 @@ class InputBlock extends React.Component {
       ...input.property,
       ...this.props.style,
     }}>
+      {this.props.doc &&
+      <DocLabel
+        label={this.props.label}
+        doc={this.props.doc}
+        style={{
+          width: '50%',
+        }}
+      />
+      }
+      {!this.props.doc &&
       <label
         style={{
           ...input.label,
@@ -38,6 +50,7 @@ class InputBlock extends React.Component {
       }}>
         {this.props.label}
       </label>
+      }
       {this.renderChildren()}
     </div>
   }
diff --git a/src/components/layers/LayerIdBlock.jsx b/src/components/layers/LayerIdBlock.jsx
index 0a57237..3544079 100644
--- a/src/components/layers/LayerIdBlock.jsx
+++ b/src/components/layers/LayerIdBlock.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 
@@ -10,7 +11,7 @@ class LayerIdBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Layer ID"}>
+    return <InputBlock label={"Layer ID"} doc={GlSpec.layer.id.doc}>
       <StringInput
         value={this.props.value}
         onChange={this.props.onChange}
diff --git a/src/components/layers/LayerSourceBlock.jsx b/src/components/layers/LayerSourceBlock.jsx
index 6dc1890..b5da99b 100644
--- a/src/components/layers/LayerSourceBlock.jsx
+++ b/src/components/layers/LayerSourceBlock.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
@@ -18,7 +19,7 @@ class LayerSourceBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Source"}>
+    return <InputBlock label={"Source"} doc={GlSpec.layer.source.doc}>
       <AutocompleteInput
         value={this.props.value}
         onChange={this.props.onChange}
diff --git a/src/components/layers/LayerSourceLayerBlock.jsx b/src/components/layers/LayerSourceLayerBlock.jsx
index 1966c84..646badf 100644
--- a/src/components/layers/LayerSourceLayerBlock.jsx
+++ b/src/components/layers/LayerSourceLayerBlock.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
@@ -18,7 +19,7 @@ class LayerSourceLayer extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Source Layer"}>
+    return <InputBlock label={"Source Layer"} doc={GlSpec.layer['source-layer'].doc}>
       <AutocompleteInput
         value={this.props.value}
         onChange={this.props.onChange}
diff --git a/src/components/layers/LayerTypeBlock.jsx b/src/components/layers/LayerTypeBlock.jsx
index 87ad151..ba1540f 100644
--- a/src/components/layers/LayerTypeBlock.jsx
+++ b/src/components/layers/LayerTypeBlock.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import InputBlock from '../inputs/InputBlock'
 import SelectInput from '../inputs/SelectInput'
 
@@ -10,7 +11,7 @@ class LayerTypeBlock extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"Layer Type"}>
+    return <InputBlock label={"Layer Type"} doc={GlSpec.layer.type.doc}>
       <SelectInput
         options={[
           ['background', 'Background'],