feat(Button): update to v1 API

.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/Validation/FormSpecifyingValidationRulesExample.js

@@ -49,8 +49,8 @@ const FormSpecifyingValidationRulesExample = (props) => (
     <Form.Field className='inline'>
       <Checkbox name='terms' className='hidden' label='I agree to the terms and conditions' />
     </Form.Field>
-    <Button className='blue submit'>Submit</Button>
-    <Message error />
+    <Button color='blue' type='submit'>Submit</Button>
+    <Message className='error' />
   </Form>
 )
 

docs/app/Examples/collections/Form/Validation/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/jsx-curly-spacing */
+
 import React, { Component } from 'react'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'

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

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

docs/app/Examples/elements/Button/Groups/ButtonButtonsExample.js

@@ -1,14 +1,14 @@
 import React, { Component } from 'react'
-import { Buttons, Button } from 'stardust'
+import { Button } from 'stardust'
 
 export default class ButtonButtonsExample extends Component {
   render() {
     return (
-      <Buttons>
+      <Button.Group>
         <Button>One</Button>
         <Button>Two</Button>
         <Button>Three</Button>
-      </Buttons>
+      </Button.Group>
     )
   }
 }

docs/app/Examples/elements/Button/Groups/ButtonColoredButtonsExample.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react'
+import { Button } from 'stardust'
+
+export default class ButtonColoredButtonsExample extends Component {
+  render() {
+    return (
+      <Button.Group color='blue'>
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </Button.Group>
+    )
+  }
+}

docs/app/Examples/elements/Button/Groups/ButtonEqualWidthsButtonsExample.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+import { Button } from 'stardust'
+
+export default class ButtonEqualWidthsButtonsExample extends Component {
+  render() {
+    return (
+      <div>
+        <Button.Group widths='five'>
+          <Button>Overview</Button>
+          <Button>Specs</Button>
+          <Button>Warrantee</Button>
+          <Button>Reviews</Button>
+          <Button>Support</Button>
+        </Button.Group>
+        <Button.Group widths='three'>
+          <Button>Overview</Button>
+          <Button>Specs</Button>
+          <Button>Support</Button>
+        </Button.Group>
+      </div>
+    )
+  }
+}

docs/app/Examples/elements/Button/Groups/ButtonGroupsExamples.js

@@ -11,11 +11,31 @@ export default class ButtonGroupsExamples extends Component {
           description='Buttons can exist together as a group'
           examplePath='elements/Button/Groups/ButtonButtonsExample'
         />
+        <ComponentExample
+          title='Vertical Buttons'
+          description='Groups can be formatted to appear vertically'
+          examplePath='elements/Button/Groups/ButtonVerticalButtonsExample'
+        />
         <ComponentExample
           title='Icon Buttons'
           description='Button groups can show groups of icons'
           examplePath='elements/Button/Groups/ButtonIconButtonsExample'
         />
+        <ComponentExample
+          title='Labeled Icon Buttons'
+          description='Groups can be formatted as labeled icons'
+          examplePath='elements/Button/Groups/ButtonLabeledIconButtonsExample'
+        />
+        <ComponentExample
+          title='Equal Widths'
+          description='Groups can have their widths divided evenly'
+          examplePath='elements/Button/Groups/ButtonEqualWidthsButtonsExample'
+        />
+        <ComponentExample
+          title='Colored Buttons'
+          description='Groups can have a shared color'
+          examplePath='elements/Button/Groups/ButtonColoredButtonsExample'
+        />
       </ExampleSection>
     )
   }

docs/app/Examples/elements/Button/Groups/ButtonIconButtonsExample.js

@@ -1,20 +1,14 @@
 import React, { Component } from 'react'
-import { Buttons, Button, Icon } from 'stardust'
+import { Button } from 'stardust'
 
 export default class ButtonIconButtonsExample extends Component {
   render() {
     return (
-      <Buttons>
-        <Button className='icon'>
-          <Icon name='save' />
-        </Button>
-        <Button className='icon'>
-          <Icon name='delete' />
-        </Button>
-        <Button className='icon'>
-          <Icon name='edit' />
-        </Button>
-      </Buttons>
+      <Button.Group icon>
+        <Button icon='save' />
+        <Button icon='delete' />
+        <Button icon='edit' />
+      </Button.Group>
     )
   }
 }

docs/app/Examples/elements/Button/Groups/ButtonLabeledIconButtonsExample.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react'
+import { Button } from 'stardust'
+
+export default class ButtonLabeledIconButtonsExample extends Component {
+  render() {
+    return (
+      <Button.Group vertical labeled='icon'>
+        <Button icon='save'>Pause</Button>
+        <Button icon='play'>Play</Button>
+        <Button icon='shuffle'>Shuffle</Button>
+      </Button.Group>
+    )
+  }
+}

docs/app/Examples/elements/Button/Groups/ButtonMixedGroupButtonsExample.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import { Button } from 'stardust'
+
+export default class ButtonMixedGroupButtonsExample extends Component {
+  render() {
+    return (
+      <Button.Group>
+        <Button labeled='icon'>Feed</Button>
+        <Button>Messages</Button>
+        <Button>Events</Button>
+        <Button>Photos</Button>
+      </Button.Group>
+    )
+  }
+}

docs/app/Examples/elements/Button/Groups/ButtonVerticalButtonsExample.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import { Button } from 'stardust'
+
+export default class ButtonVerticalButtonsExample extends Component {
+  render() {
+    return (
+      <Button.Group vertical>
+        <Button>Feed</Button>
+        <Button>Messages</Button>
+        <Button>Events</Button>
+        <Button>Photos</Button>
+      </Button.Group>
+    )
+  }
+}

docs/app/Examples/elements/Button/States/ButtonActiveExample.js

@@ -4,7 +4,7 @@ import { Button } from 'stardust'
 export default class ButtonActiveExample extends Component {
   render() {
     return (
-      <Button className='active' />
+      <Button active />
     )
   }
 }

docs/app/Examples/elements/Button/States/ButtonDisabledExample.js

@@ -4,7 +4,7 @@ import { Button } from 'stardust'
 export default class ButtonDisabledExample extends Component {
   render() {
     return (
-      <Button className='disabled'>Disabled</Button>
+      <Button disabled >Disabled</Button>
     )
   }
 }

docs/app/Examples/elements/Button/States/ButtonLoadingExample.js

@@ -5,10 +5,10 @@ export default class ButtonLoadingExample extends Component {
   render() {
     return (
       <div>
-        <Button className='loading' />
-        <Button className='basic loading' />
-        <Button className='primary loading' />
-        <Button className='secondary loading' />
+        <Button loading />
+        <Button basic loading />
+        <Button loading className='primary' />
+        <Button loading className='secondary' />
       </div>
     )
   }

docs/app/Examples/elements/Button/Types/ButtonAnimatedExample.js

@@ -4,7 +4,7 @@ import { Button, Icon } from 'stardust'
 export default class ButtonAnimatedExample extends Component {
   render() {
     return (
-      <Button className='animated'>
+      <Button animated>
         <div className='visible content'>Next</div>
         <div className='hidden content'>
           <Icon name='right arrow' />

docs/app/Examples/elements/Button/Types/ButtonBasicExample.js

@@ -5,20 +5,20 @@ export default class ButtonBasicExample extends Component {
   render() {
     return (
       <div>
-        <Button className='basic'>Standard</Button>
-        <Button className='red basic'>Red</Button>
-        <Button className='orange basic'>Orange</Button>
-        <Button className='yellow basic'>Yellow</Button>
-        <Button className='olive basic'>Olive</Button>
-        <Button className='green basic'>Green</Button>
-        <Button className='teal basic'>Teal</Button>
-        <Button className='blue basic'>Blue</Button>
-        <Button className='violet basic'>Violet</Button>
-        <Button className='purple basic'>Purple</Button>
-        <Button className='pink basic'>Pink</Button>
-        <Button className='brown basic'>Brown</Button>
-        <Button className='grey basic'>Grey</Button>
-        <Button className='black basic'>Black</Button>
+        <Button basic >Standard</Button>
+        <Button basic color='red'>Red</Button>
+        <Button basic color='orange'>Orange</Button>
+        <Button basic color='yellow'>Yellow</Button>
+        <Button basic color='olive'>Olive</Button>
+        <Button basic color='green'>Green</Button>
+        <Button basic color='teal'>Teal</Button>
+        <Button basic color='blue'>Blue</Button>
+        <Button basic color='violet'>Violet</Button>
+        <Button basic color='purple'>Purple</Button>
+        <Button basic color='pink'>Pink</Button>
+        <Button basic color='brown'>Brown</Button>
+        <Button basic color='grey'>Grey</Button>
+        <Button basic color='black'>Black</Button>
       </div>
     )
   }

docs/app/Examples/elements/Button/Types/ButtonEmphasisExample.js

@@ -5,8 +5,8 @@ export default class ButtonEmphasisExample extends Component {
   render() {
     return (
       <div>
-        <Button className='primary'>Primary</Button>
-        <Button className='secondary'>Secondary</Button>
+        <Button primary>Primary</Button>
+        <Button secondary>Secondary</Button>
       </div>
     )
   }

docs/app/Examples/elements/Button/Types/ButtonIconExample.js

@@ -1,12 +1,10 @@
 import React, { Component } from 'react'
-import { Button, Icon } from 'stardust'
+import { Button } from 'stardust'
 
 export default class ButtonIconExample extends Component {
   render() {
     return (
-      <Button className='icon'>
-        <Icon name='world' />
-      </Button>
+      <Button icon='world' />
     )
   }
 }

docs/app/Examples/elements/Button/Types/ButtonInvertedExample.js

@@ -5,37 +5,37 @@ export default class ButtonInvertedExample extends Component {
   render() {
     return (
       <div>
-        <Segment className='inverted'>
-          <Button className='inverted'>Standard</Button>
-          <Button className='inverted red'>Red</Button>
-          <Button className='inverted orange'>Orange</Button>
-          <Button className='inverted yellow'>Yellow</Button>
-          <Button className='inverted olive'>Olive</Button>
-          <Button className='inverted green'>Green</Button>
-          <Button className='inverted teal'>Teal</Button>
-          <Button className='inverted blue'>Blue</Button>
-          <Button className='inverted violet'>Violet</Button>
-          <Button className='inverted purple'>Purple</Button>
-          <Button className='inverted pink'>Pink</Button>
-          <Button className='inverted brown'>Brown</Button>
-          <Button className='inverted grey'>Grey</Button>
-          <Button className='inverted black'>Black</Button>
+        <Segment inverted>
+          <Button inverted>Standard</Button>
+          <Button inverted color='red'>Red</Button>
+          <Button inverted color='orange'>Orange</Button>
+          <Button inverted color='yellow'>Yellow</Button>
+          <Button inverted color='olive'>Olive</Button>
+          <Button inverted color='green'>Green</Button>
+          <Button inverted color='teal'>Teal</Button>
+          <Button inverted color='blue'>Blue</Button>
+          <Button inverted color='violet'>Violet</Button>
+          <Button inverted color='purple'>Purple</Button>
+          <Button inverted color='pink'>Pink</Button>
+          <Button inverted color='brown'>Brown</Button>
+          <Button inverted color='grey'>Grey</Button>
+          <Button inverted color='black'>Black</Button>
         </Segment>
-        <Segment className='inverted'>
-          <Button className='inverted basic'>Standard</Button>
-          <Button className='inverted red basic'>Red</Button>
-          <Button className='inverted orange basic'>Orange</Button>
-          <Button className='inverted yellow basic'>Yellow</Button>
-          <Button className='inverted olive basic'>Olive</Button>
-          <Button className='inverted green basic'>Green</Button>
-          <Button className='inverted teal basic'>Teal</Button>
-          <Button className='inverted blue basic'>Blue</Button>
-          <Button className='inverted violet basic'>Violet</Button>
-          <Button className='inverted purple basic'>Purple</Button>
-          <Button className='inverted pink basic'>Pink</Button>
-          <Button className='inverted brown basic'>Brown</Button>
-          <Button className='inverted grey basic'>Grey</Button>
-          <Button className='inverted black basic'>Black</Button>
+        <Segment inverted>
+          <Button basic inverted >Standard</Button>
+          <Button basic inverted color='red'>Red</Button>
+          <Button basic inverted color='orange'>Orange</Button>
+          <Button basic inverted color='yellow'>Yellow</Button>
+          <Button basic inverted color='olive'>Olive</Button>
+          <Button basic inverted color='green'>Green</Button>
+          <Button basic inverted color='teal'>Teal</Button>
+          <Button basic inverted color='blue'>Blue</Button>
+          <Button basic inverted color='violet'>Violet</Button>
+          <Button basic inverted color='purple'>Purple</Button>
+          <Button basic inverted color='pink'>Pink</Button>
+          <Button basic inverted color='brown'>Brown</Button>
+          <Button basic inverted color='grey'>Grey</Button>
+          <Button basic inverted color='black'>Black</Button>
         </Segment>
       </div>
     )

docs/app/Examples/elements/Button/Types/ButtonLabeledExample.js

@@ -1,13 +1,10 @@
 import React, { Component } from 'react'
-import { Button, Icon, Label } from 'stardust'
+import { Button, Label } from 'stardust'
 
 export default class ButtonLabeledExample extends Component {
   render() {
     return (
-      <Button className='labeled'>
-        <Button>
-          <Icon name='heart' /> Like
-        </Button>
+      <Button labeled icon='heart'>
         {/* TODO: See issue #46 - button needs to render as a div */}
         <Label basic link>
           3,000