Button: update to v1 API (#295)

* feat(Button): update to v1 API

* docs(Button): refactor to v1 structure

* fix(Button): disallow children with shorthand props

* fix(Button): fix tests and element type

* test(Confirm): fix button tests

* feat(Button): support labeled buttons

* refactor(Button): use debug for debugging

* docs(Button): fix active example

* docs(Button): fix loading example

* docs(Button): fix toggle example

* feat(Button): add social colors

* feat(ButtonGroup): add attached variation

* docs(ButtonGroup): add attached variation

* feat(ButtonGroup): begin group variation support

* fix(Button): fix icon/label propTypes

* test(Button): add common labeled test

* feat(Button): finish docs and tests

* fix(ButtonGroupBasicColoredExample): happy linter

* feat(Button): add "animated" and "or"

* refactor(Button): complete button TODOs

Author: jhchill666

.gitignore

@@ -3,9 +3,9 @@ node_modules/
 bower_components/
 coverage/
 dist/
-docs/build
+docs/build/
 docs/app/docgenInfo.json
-dll
+dll/
 
 .DS_Store
 .idea/

docs/app/Examples/collections/Form/Types/FormOnSubmitExample.js

@@ -59,7 +59,7 @@ class FormOnSubmitExample extends Component {
         </Form.Group>
         <Form.TextArea name='details' label='Details' placeholder='Anything else we should know?' rows='3' />
         <Form.Checkbox name='terms' label='I agree to the Terms and Conditions' />
-        <Button className='primary' type='submit'>Submit</Button>
+        <Button primary type='submit'>Submit</Button>
 
         <Message>
           <pre>serializedForm: {JSON.stringify(serializedForm, null, 2)}</pre>

docs/app/Examples/collections/Menu/Content/Buttons.js

@@ -1,13 +1,11 @@
 import React from 'react'
 import { Button, Menu } from 'stardust'
 
-// TODO: Update <Button> usage after its update to v1 API
-
 const Buttons = () => {
   return (
     <Menu>
       <Menu.Item>
-        <Button className='primary'>Sign up</Button>
+        <Button primary>Sign up</Button>
       </Menu.Item>
 
       <Menu.Item>

docs/app/Examples/collections/Menu/Variations/SizeHuge.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Button, Dropdown, Menu } from 'stardust'
 
-// TODO: Update <Button> usage after its update to v1 API
-
 export default class SizeHuge extends Component {
   state = { activeItem: 'home' }
 
@@ -26,7 +24,7 @@ export default class SizeHuge extends Component {
           </Dropdown>
 
           <Menu.Item>
-            <Button className='primary'>Sign Up</Button>
+            <Button primary>Sign Up</Button>
           </Menu.Item>
         </Menu.Menu>
       </Menu>

docs/app/Examples/collections/Menu/Variations/SizeLarge.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Button, Dropdown, Menu } from 'stardust'
 
-// TODO: Update <Button> usage after its update to v1 API
-
 export default class SizeLarge extends Component {
   state = { activeItem: 'home' }
 
@@ -26,7 +24,7 @@ export default class SizeLarge extends Component {
           </Dropdown>
 
           <Menu.Item>
-            <Button className='primary'>Sign Up</Button>
+            <Button primary>Sign Up</Button>
           </Menu.Item>
         </Menu.Menu>
       </Menu>

docs/app/Examples/collections/Menu/Variations/SizeMassive.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Button, Dropdown, Menu } from 'stardust'
 
-// TODO: Update <Button> usage after its update to v1 API
-
 export default class SizeMassive extends Component {
   state = { activeItem: 'home' }
 
@@ -26,7 +24,7 @@ export default class SizeMassive extends Component {
           </Dropdown>
 
           <Menu.Item>
-            <Button className='primary'>Sign Up</Button>
+            <Button primary>Sign Up</Button>
           </Menu.Item>
         </Menu.Menu>
       </Menu>

docs/app/Examples/collections/Menu/Variations/SizeMini.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Button, Dropdown, Menu } from 'stardust'
 
-// TODO: Update <Button> usage after its update to v1 API
-
 export default class SizeMini extends Component {
   state = { activeItem: 'home' }
 
@@ -26,7 +24,7 @@ export default class SizeMini extends Component {
           </Dropdown>
 
           <Menu.Item>
-            <Button className='primary'>Sign Up</Button>
+            <Button primary>Sign Up</Button>
           </Menu.Item>
         </Menu.Menu>
       </Menu>

docs/app/Examples/collections/Menu/Variations/SizeSmall.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Button, Dropdown, Menu } from 'stardust'
 
-// TODO: Update <Button> usage after its update to v1 API
-
 export default class SizeSmall extends Component {
   state = { activeItem: 'home' }
 
@@ -26,7 +24,7 @@ export default class SizeSmall extends Component {
           </Dropdown>
 
           <Menu.Item>
-            <Button className='primary'>Sign Up</Button>
+            <Button primary>Sign Up</Button>
           </Menu.Item>
         </Menu.Menu>
       </Menu>

docs/app/Examples/collections/Menu/Variations/SizeTiny.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Button, Dropdown, Menu } from 'stardust'
 
-// TODO: Update <Button> usage after its update to v1 API
-
 export default class SizeTiny extends Component {
   state = { activeItem: 'home' }
 
@@ -26,7 +24,7 @@ export default class SizeTiny extends Component {
           </Dropdown>
 
           <Menu.Item>
-            <Button className='primary'>Sign Up</Button>
+            <Button primary>Sign Up</Button>
           </Menu.Item>
         </Menu.Menu>
       </Menu>

docs/app/Examples/collections/Message/Variations/MessageAttachedExample.js

@@ -1,8 +1,6 @@
 import React from 'react'
 import { Button, Checkbox, Form, Icon, Message } from 'stardust'
 
-// TODO update Button usage after they're updated to v1 API
-
 const MessageAttachedExample = () => (
   <div>
     <Message
@@ -18,7 +16,7 @@ const MessageAttachedExample = () => (
       <Form.Input label='Username' placeholder='Username' type='text' />
       <Form.Input label='Password' type='password' />
       <Form.Checkbox inline label='I agree to the terms and conditions' />
-      <Button className='blue submit button'>Submit</Button>
+      <Button color='blue'>Submit</Button>
     </Form>
     <Message attached='bottom' warning>
       <Icon name='help' />

docs/app/Examples/elements/Button/ButtonExamples.js

@@ -1,14 +1,12 @@
-import React, { Component } from 'react'
-import { Buttons, Button } from 'stardust'
+import React from 'react'
+import { Button } from 'stardust'
 
-export default class ButtonConditionalsExample extends Component {
-  render() {
-    return (
-      <Buttons>
-        <Button>Cancel</Button>
-        <div className='or' />
-        <Button className='positive'>Save</Button>
-      </Buttons>
-    )
-  }
-}
+const ButtonConditionalsExample = () => (
+  <Button.Group>
+    <Button>Cancel</Button>
+    <Button.Or />
+    <Button positive>Save</Button>
+  </Button.Group>
+)
+
+export default ButtonConditionalsExample

docs/app/Examples/elements/Button/Content/ButtonConditionalsExample.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Button } from 'stardust'
+
+const ButtonMultipleConditionalsExample = () => (
+  <Button.Group>
+    <Button>One</Button>
+    <Button.Or />
+    <Button>Two</Button>
+    <Button.Or />
+    <Button>Three</Button>
+  </Button.Group>
+)
+
+export default ButtonMultipleConditionalsExample

docs/app/Examples/elements/Button/Content/ButtonContentExamples.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const ButtonContentExamples = () => (
+  <ExampleSection title='Content'>
+    <ComponentExample
+      title='Conditionals'
+      description='Button groups can contain conditionals'
+      examplePath='elements/Button/Content/ButtonConditionalsExample'
+    />
+    <ComponentExample
+      examplePath='elements/Button/Content/ButtonMultipleConditionalsExample'
+    />
+  </ExampleSection>
+)
+
+export default ButtonContentExamples

docs/app/Examples/elements/Button/Content/ButtonMultipleConditionalsExample.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Button } from 'stardust'
+
+const ButtonGroupBasicColoredExample = () => (
+  <Button.Group>
+    <Button basic color='red'>One</Button>
+    <Button basic color='green'>Two</Button>
+    <Button basic color='blue'>Three</Button>
+  </Button.Group>
+)
+
+export default ButtonGroupBasicColoredExample

docs/app/Examples/elements/Button/Content/index.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Button, Divider } from 'stardust'
+
+const ButtonGroupBasicExample = () => (
+  <div>
+    <Button.Group basic>
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Three</Button>
+    </Button.Group>
+    <Divider />
+    <Button.Group basic vertical>
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Three</Button>
+    </Button.Group>
+  </div>
+)
+
+export default ButtonGroupBasicExample

docs/app/Examples/elements/Button/GroupVariations/ButtonGroupBasicColoredExample.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Button } from 'stardust'
+
+const ButtonGroupColoredExample = () => (
+  <Button.Group color='blue'>
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Three</Button>
+  </Button.Group>
+)
+
+export default ButtonGroupColoredExample

docs/app/Examples/elements/Button/GroupVariations/ButtonGroupBasicExample.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Button, Divider } from 'stardust'
+
+const ButtonGroupEqualWidthExample = () => (
+  <div>
+    <Button.Group widths='5'>
+      <Button>Overview</Button>
+      <Button>Specs</Button>
+      <Button>Warranty</Button>
+      <Button>Reviews</Button>
+      <Button>Support</Button>
+    </Button.Group>
+    <Divider />
+    <Button.Group widths='3'>
+      <Button>Overview</Button>
+      <Button>Specs</Button>
+      <Button>Support</Button>
+    </Button.Group>
+  </div>
+)
+
+export default ButtonGroupEqualWidthExample

docs/app/Examples/elements/Button/GroupVariations/ButtonGroupColoredExample.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Button, Icon } from 'stardust'
+
+const ButtonGroupIconExample = () => (
+  <Button.Group icon>
+    <Button>
+      <Icon name='play' />
+    </Button>
+    <Button>
+      <Icon name='pause' />
+    </Button>
+    <Button>
+      <Icon name='shuffle' />
+    </Button>
+  </Button.Group>
+)
+
+export default ButtonGroupIconExample

docs/app/Examples/elements/Button/GroupVariations/ButtonGroupEqualWidthExample.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Button } from 'stardust'
+
+const ButtonGroupIconShorthandExample = () => (
+  <Button.Group>
+    <Button icon='play' />
+    <Button icon='pause' />
+    <Button icon='shuffle' />
+  </Button.Group>
+)
+
+export default ButtonGroupIconShorthandExample

docs/app/Examples/elements/Button/GroupVariations/ButtonGroupIconExample.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Button } from 'stardust'
+
+const ButtonGroupIconSizeExample = () => (
+  <Button.Group basic size='small'>
+    <Button icon='file' />
+    <Button icon='save' />
+    <Button icon='upload' />
+    <Button icon='download' />
+  </Button.Group>
+)
+
+export default ButtonGroupIconSizeExample

docs/app/Examples/elements/Button/GroupVariations/ButtonGroupIconShorthandExample.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Button } from 'stardust'
+
+const ButtonGroupLabeledIconExample = () => (
+  <Button.Group labeled>
+    <Button icon='play' content='Play' />
+    <Button icon='pause' content='Pause' />
+    <Button icon='shuffle' content='Shuffle' />
+  </Button.Group>
+)
+
+export default ButtonGroupLabeledIconExample