Add Markdown Documentation for Labels

.storybook/Story.scss

@@ -171,6 +171,27 @@
   width: 500px;
 }
 
+.story--example-table {
+  width: 340px;
+
+  tbody tr td {
+    padding: $cf-marg-b;
+  }
+
+  tbody tr td:nth-child(1) {
+    width: 28%;
+  }
+
+  tbody tr td:nth-child(2) {
+    width: 72%;
+  }
+
+  p {
+    font-weight: 600;
+    margin: 0;
+  }
+}
+
 /*
   Markdown Styles
   ------------------------------------------------------------------------------

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 #### 0.0.16
 
+- [#139](https://github.com/influxdata/clockface/pull/139): Add markdown documentation for `Label`
 - [#138](https://github.com/influxdata/clockface/pull/138): Add markdown documentation for `ComponentSpacer`, `EmptyState`, `Grid`, and `ColorPicker`
 - [#137](https://github.com/influxdata/clockface/pull/137): Improve documentation for dropdown family components
 - [#137](https://github.com/influxdata/clockface/pull/137): Fix dropdown menu scrolling bug by updating `react-scrollbars-custom` dependency

src/Components/Alerts/Alert.stories.tsx

@@ -17,12 +17,12 @@ import {ComponentColor, IconFont} from '../../Types/index'
 // Notes
 const AlertReadme = marked(require('./Alert.md'))
 
-const alertStories = storiesOf('Components|Alerts', module)
+const alertStories = storiesOf('Atomic|Alert', module)
   .addDecorator(withKnobs)
   .addDecorator(jsxDecorator)
 
 alertStories.add(
-  'Alert',
+  'Example',
   () => (
     <div className="story--example">
       <Alert

src/Components/Icon/Icon.stories.tsx

@@ -17,12 +17,12 @@ import {IconFont} from '../../Types'
 // Notes
 const IconReadme = marked(require('./Icon.md'))
 
-const iconStories = storiesOf('Elements|Icon', module)
+const iconStories = storiesOf('Atomic|Icon', module)
   .addDecorator(withKnobs)
   .addDecorator(jsxDecorator)
 
 iconStories.add(
-  'Icon Component',
+  'Example',
   () => (
     <div
       className="story--example"

src/Components/Label/Label.md

@@ -0,0 +1,20 @@
+# Label
+
+This component is for displaying Labels from the InfluxDB API but can be used in many ways.
+
+### Usage
+```js
+import {Label} from '@influxdata/clockface'
+```
+
+### Examples
+
+Label changes based on what props are passed in. If `onDelete` is passed in the delete button appears. If `onClick` is passed in the entire label becomes clickable and highlights on hover. Both of these props can be passed in simultaneously.
+
+<!-- STORY -->
+
+<!-- STORY HIDE START -->
+
+<!-- STORY HIDE END -->
+
+<!-- PROPS -->

src/Components/Label/Label.stories.tsx

@@ -1,5 +1,6 @@
 // Libraries
 import * as React from 'react'
+import marked from 'marked'
 
 // Storybook
 import {storiesOf} from '@storybook/react'
@@ -13,48 +14,95 @@ import {Label} from './Label'
 // Types
 import {ComponentSize, InfluxColors} from '../../Types'
 
-const labelStories = storiesOf('Components|Label/Examples', module)
+// Notes
+const LabelReadme = marked(require('./Label.md'))
+
+const labelStories = storiesOf('Atomic|Label', module)
   .addDecorator(withKnobs)
   .addDecorator(jsxDecorator)
 
-labelStories.add('Read Only Label', () => (
-  <div className="story--example">
-    <Label
-      id="example-label"
-      name={text('name', 'Fresh Label')}
-      description={text('description', 'I am okay with being labeled')}
-      color={color('backgroundColor', `${InfluxColors.Star}`)}
-      size={ComponentSize[select('size', mapEnumKeys(ComponentSize), 'Small')]}
-    />
-  </div>
-))
-
-labelStories.add('Clickable Label', () => (
-  <div className="story--example">
-    <Label
-      id="example-label"
-      name={text('name', 'Fresh Label')}
-      description={text('description', 'I am okay with being labeled')}
-      color={color('backgroundColor', `${InfluxColors.Star}`)}
-      size={ComponentSize[select('size', mapEnumKeys(ComponentSize), 'Small')]}
-      onClick={id => {
-        alert(`Label with id: ${id} has been clicked`)
-      }}
-    />
-  </div>
-))
-
-labelStories.add('Removable Label', () => (
-  <div className="story--example">
-    <Label
-      id="example-label"
-      name={text('name', 'Fresh Label')}
-      description={text('description', 'I am okay with being labeled')}
-      color={color('backgroundColor', `${InfluxColors.Star}`)}
-      size={ComponentSize[select('size', mapEnumKeys(ComponentSize), 'Small')]}
-      onDelete={id => {
-        alert(`Label with id: ${id} has been deleted`)
-      }}
-    />
-  </div>
-))
+labelStories.add(
+  'Examples',
+  () => (
+    <div className="story--example">
+      <table className="story--example-table">
+        <tbody>
+          <tr>
+            <td>
+              <p>Read Only</p>
+            </td>
+            <td>
+              <Label
+                id="example-label"
+                name={text('name', 'Fresh Label')}
+                description={text(
+                  'description',
+                  'I am okay with being labeled'
+                )}
+                color={color('backgroundColor', `${InfluxColors.Star}`)}
+                size={
+                  ComponentSize[
+                    select('size', mapEnumKeys(ComponentSize), 'Small')
+                  ]
+                }
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <p>Clickable</p>
+            </td>
+            <td>
+              <Label
+                id="example-label"
+                name={text('name', 'Fresh Label')}
+                description={text(
+                  'description',
+                  'I am okay with being labeled'
+                )}
+                color={color('backgroundColor', `${InfluxColors.Star}`)}
+                size={
+                  ComponentSize[
+                    select('size', mapEnumKeys(ComponentSize), 'Small')
+                  ]
+                }
+                onClick={id => {
+                  alert(`Label with id: ${id} has been clicked`)
+                }}
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <p>Removable</p>
+            </td>
+            <td>
+              <Label
+                id="example-label"
+                name={text('name', 'Fresh Label')}
+                description={text(
+                  'description',
+                  'I am okay with being labeled'
+                )}
+                color={color('backgroundColor', `${InfluxColors.Star}`)}
+                size={
+                  ComponentSize[
+                    select('size', mapEnumKeys(ComponentSize), 'Small')
+                  ]
+                }
+                onDelete={id => {
+                  alert(`Label with id: ${id} has been deleted`)
+                }}
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  ),
+  {
+    readme: {
+      content: LabelReadme,
+    },
+  }
+)