Merge branch 'master' into greenkeeper-eslint-plugin-jsx-a11y-2.1.0

stipsan · Aug 11, 2016 · cb5bdba · cb5bdba
2 parents 70b6d05 + fa10028
commit cb5bdba
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 110 deletions.
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -38,8 +38,8 @@ addDecorator((fn, { kind, story }) => <div>
 </div>)
 
 function loadStories() {
-  require('../src/stories/button')
-  require('../src/stories/dropdown')
+  require('../src/stories/Button')
+  require('../src/stories/Dropdown')
   require('../src/stories/Select')
 }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "uikit-react",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "UIkit components built with React",
   "main": "./lib",
   "scripts": {

diff --git a/src/stories/Select.js b/src/stories/Select.js
@@ -37,35 +37,28 @@ class Form extends Component {
 }
 
 storiesOf('Select', module)
-  .addWithInfo(
-    'Basic Usage',
-    `
-      This is the basic usage examples
-    `,
-    () => (
-      <div className="uk-grid uk-margin-bottom">
-        <Form>
-          <Select
-            allowCreate
-            options={[
-              { value: 1, label: 'Color' },
-              { value: 2, label: 'Size' },
-              { value: 3, label: 'Material' },
-            ]}
-          />
-        </Form>
-        <Form defaultValue={[]}>
-          <Select
-            allowCreate
-            multi
-            options={[
-              { value: 1, label: 'Red' },
-              { value: 2, label: 'Green' },
-              { value: 3, label: 'Blue' },
-            ]}
-          />
-        </Form>
-      </div>
-  ),
-  { header: false, inline: true, propTables: [/* Value, Option, */Select] }
-)
+  .addWithInfo('Basic Usage', '', () => (
+    <div className="uk-grid uk-margin-bottom">
+      <Form>
+        <Select
+          allowCreate
+          options={[
+            { value: 1, label: 'Color' },
+            { value: 2, label: 'Size' },
+            { value: 3, label: 'Material' },
+          ]}
+        />
+      </Form>
+      <Form defaultValue={[]}>
+        <Select
+          allowCreate
+          multi
+          options={[
+            { value: 1, label: 'Red' },
+            { value: 2, label: 'Green' },
+            { value: 3, label: 'Blue' },
+          ]}
+        />
+      </Form>
+    </div>
+  ), { header: false, inline: true, propTables: [/* Value, Option, */Select] })
diff --git a/src/stories/button.js b/src/stories/button.js
@@ -5,19 +5,12 @@ import { Button } from 'uikit-react'
 Button.displayName = 'Button'
 
 storiesOf('Button', module)
-  .addWithInfo(
-    'Basic Usage',
-    `
-      This is the basic usage with the button with providing a label to show the text.
-    `,
-    () => (
-      <div className="uk-margin-bottom">
-        <Button primary>Primary</Button> &nbsp;
-        <Button success>Success</Button> &nbsp;
-        <Button danger>Danger</Button> &nbsp;
-        <Button link>Link</Button> &nbsp;
-        <Button type="submit">Submit</Button>
-      </div>
-  ),
-  { header: false, inline: true, propTables: [Button] }
-)
+  .addWithInfo('Basic Usage', '', () => (
+    <div className="uk-margin-bottom">
+      <Button primary>Primary</Button> &nbsp;
+      <Button success>Success</Button> &nbsp;
+      <Button danger>Danger</Button> &nbsp;
+      <Button link>Link</Button> &nbsp;
+      <Button type="submit">Submit</Button>
+    </div>
+  ), { header: false, inline: true, propTables: [Button] })
diff --git a/src/stories/dropdown.js b/src/stories/dropdown.js
@@ -5,69 +5,56 @@ import Dropdown from '../Dropdown'
 // This is to work around: https://github.com/kadirahq/react-storybook-addon-info/issues/26#issuecomment-229029177
 Dropdown.displayName = 'Dropdown'
 
+const Nav = () => <ul className="uk-nav uk-nav-dropdown">
+  <li><a className="uk-warning" href="#">Item</a></li>
+  <li><a href="#">Another item</a></li>
+  <li className="uk-nav-header">Header</li>
+  <li><a href="#">Item</a></li>
+  <li><a href="#">Another item</a></li>
+  <li className="uk-nav-divider" />
+  <li><a href="#">Separated item</a></li>
+</ul>
+
 const Menu = () => (
   <div className="uk-dropdown uk-dropdown-bottom">
-    <ul className="uk-nav uk-nav-dropdown">
-      <li><a className="uk-warning" href="#">Item</a></li>
-      <li><a href="#">Another item</a></li>
-      <li className="uk-nav-header">Header</li>
-      <li><a href="#">Item</a></li>
-      <li><a href="#">Another item</a></li>
-      <li className="uk-nav-divider" />
-      <li><a href="#">Separated item</a></li>
-    </ul>
+    <Nav />
+  </div>
+)
+Menu.displayName = 'Menu'
+
+const DropdownMenu = () => (
+  <div className="uk-dropdown uk-dropdown-navbar uk-dropdown-bottom">
+    <Nav />
   </div>
 )
+DropdownMenu.displayName = 'Menu'
 
 storiesOf('Dropdown', module)
-  .addWithInfo(
-    'Basic Usage',
-    `
-      This is the basic usage showing hover, and click mode.
-    `,
-    () => (
-      <div className="uk-margin-bottom">
-        <Dropdown>
-          <button className="uk-button">
-            Hover <i className="uk-icon-caret-down" />
-          </button>
-          <Menu />
-        </Dropdown>
-        <br /> <br />
-        <Dropdown mode="click">
-          <button className="uk-button">
-            Click me <i className="uk-icon-caret-down" />
-          </button>
-          <Menu />
-        </Dropdown>
-      </div>
-    ),
-    { header: false, inline: true, propTables: [Dropdown] }
-    )
-    .add('Advanced', () => (
-      <div className="uk-margin-bottom">
-        <nav className="uk-navbar">
-          <ul className="uk-navbar-nav">
-            <li className="uk-active"><a>Active</a></li>
-            <li><a href="">Item</a></li>
-            <Dropdown className="uk-parent" component="li" >
-              <a>
-                Parent <i className="uk-icon-caret-down" />
-              </a>
-              <div className="uk-dropdown uk-dropdown-navbar uk-dropdown-bottom">
-                <ul className="uk-nav uk-nav-dropdown">
-                  <li><a className="uk-warning" href="#">Item</a></li>
-                  <li><a href="#">Another item</a></li>
-                  <li className="uk-nav-header">Header</li>
-                  <li><a href="#">Item</a></li>
-                  <li><a href="#">Another item</a></li>
-                  <li className="uk-nav-divider" />
-                  <li><a href="#">Separated item</a></li>
-                </ul>
-              </div>
-            </Dropdown>
-          </ul>
+  .addWithInfo('Basic Usage', '', () => (
+    <div className="uk-margin-bottom">
+      <Dropdown>
+        <button className="uk-button">Hover <i className="uk-icon-caret-down" /></button>
+        <Menu />
+      </Dropdown>
+      <br /> <br />
+      <Dropdown mode="click">
+        <button className="uk-button">Click me <i className="uk-icon-caret-down" /></button>
+        <Menu />
+      </Dropdown>
+    </div>
+  ), { header: false, inline: true, propTables: [Dropdown] })
+  .addWithInfo('Advanced', '', () => (
+    <div className="uk-margin-bottom">
+      <nav className="uk-navbar">
+        <ul className="uk-navbar-nav">
+          <li className="uk-active"><a>Active</a></li>
+          <li><a href="">Item</a></li>
+          <Dropdown className="uk-parent" component="li" >
+            <a>Parent <i className="uk-icon-caret-down" /></a>
+            <DropdownMenu />
+          </Dropdown>
+        </ul>
 
-        </nav>
-      </div>
-    ))
+      </nav>
+    </div>
+  ), { header: false, inline: true })