From 968a6914f5811b62114d1ba9a18e4ebb71efc992 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Thu, 6 Apr 2017 16:21:23 +0100
Subject: [PATCH] adding button docs

---
 ui/src/components/button/readme.md | 72 ++++++++++++------------------
 ui/src/components/button/story.js  | 14 +++---
 2 files changed, 36 insertions(+), 50 deletions(-)

diff --git a/ui/src/components/button/readme.md b/ui/src/components/button/readme.md
index 61b8e64b..0e57923f 100644
--- a/ui/src/components/button/readme.md
+++ b/ui/src/components/button/readme.md
@@ -1,51 +1,35 @@
-# `<Button>`
+# Button
 
-## demo
+### Description
+An HTML button element with styles and functionality applied according to props.
 
-```embed
-const React = require('react');
-const ReactDOM = require('react-dom/server');
-const Base = require('../base');
-const Container = require('../container');
-const Row = require('../row');
-const Column = require('../column');
-const Button = require('./index.js');
-const styles = require('./style.css');
+If no props are defined, a "primary" button with no routing capabilities will be 
+rendered.
 
-nmodule.exports = ReactDOM.renderToString(
-  <Base>
-    <Row>
-      <Column>
-        <Button>
-          Create an Instance
-        </Button>
-      </Column>
-      <Column>
-        <Button secondary>
-          Cancel
-        </Button>
-      </Column>
-      <Column>
-        <Button disabled>
-          Inactive Button
-        </Button>
-      </Column>
-    </Row>
-  </Base>
-);
-```
-
-## usage
+### Usage
 
 ```js
-const React = require('react');
-const Button = require('ui/button');
+import Button from '@ui/components/button';
 
-module.exports = () => {
-  return (
-    <Button>
-      Hello World
-    </Button>
-  );
-}
+<div>
+  <Button>Hello</Button>
+  <Button primary>Primary</Button>
+  <Button secondary>Secondary</Button>
+  <Button disabled>Disabled</Button>
+  <Button to='/hello'>To</Button>
+  <Button href='/world'>href</Button>
+</div>
 ```
+
+### Properties
+| propName | propType | defaultValue | isRequired |
+|----------|----------|--------------|------------|
+| href  | string     | -            |            |
+| to    | string   | -            |           |
+| secondary    | bool   | false            |           |
+| disabled    | bool   | false            |           |
+| tertiary    | bool   | false            |           |
+
+## Roadmap
+* `onClick` - click callback
+* `label` - button accessibility tag
\ No newline at end of file
diff --git a/ui/src/components/button/story.js b/ui/src/components/button/story.js
index 7702c49c..42c07ae3 100644
--- a/ui/src/components/button/story.js
+++ b/ui/src/components/button/story.js
@@ -1,26 +1,28 @@
 import React from 'react';
 import { storiesOf } from '@kadira/storybook';
+import withReadme from 'storybook-readme/with-readme';
 import Button from './';
+import README from './readme.md';
 
 storiesOf('Button', module)
-  .add('With text', () => (
+  .add('With text', withReadme(README, () => (
     <Button>
       Inspire the lazy
     </Button>
-  )).add('Secondary', () => (
+  ))).add('Secondary', withReadme(README, () => (
     <Button secondary>
       Inspire the brave
     </Button>
-  )).add('Tertiary', () => (
+  ))).add('Tertiary', withReadme(README, () => (
     <Button tertiary>
       Inspire the tertiary
     </Button>
-  )).add('Disabled', () => (
+  ))).add('Disabled', withReadme(README, () => (
     <Button disabled>
       Inspire the liars
     </Button>
-  )).add('Anchor', () => (
+  ))).add('Anchor', withReadme(README, () => (
     <Button href='#'>
       Inspire the anchor
     </Button>
-  ));
+  )));