docs(Button): refactor to v1 structure

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/Message/Variations/MessageAttachedExample.js

@@ -18,7 +18,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/Content/ButtonConditionalsExample.js

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

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

@@ -0,0 +1,21 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import { Message } from 'stardust'
+
+const ButtonContentExamples = () => (
+  <ExampleSection title='Content'>
+    <ComponentExample
+      title='Conditionals'
+      description='Button groups can contain conditionals'
+      examplePath='elements/Button/Content/ButtonConditionalsExample'
+    >
+      <Message warning>
+        Or buttons can have their text localized, or adjusted by using the data-text attribute.
+        If the size of the conditional changes you will need to adjust @orCircleSize.
+      </Message>
+    </ComponentExample>
+  </ExampleSection>
+)
+
+export default ButtonContentExamples

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

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

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

@@ -1,14 +1,12 @@
-import React, { Component } from 'react'
+import React 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>
-    )
-  }
-}
+const ButtonColoredButtonsExample = () => (
+  <Button.Group color='blue'>
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Three</Button>
+  </Button.Group>
+)
+
+export default ButtonColoredButtonsExample

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

@@ -1,23 +1,21 @@
-import React, { Component } from 'react'
+import React 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>
-    )
-  }
-}
+const ButtonEqualWidthsButtonsExample = () => (
+  <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>
+)
+
+export default ButtonEqualWidthsButtonsExample

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

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

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

@@ -1,14 +1,12 @@
-import React, { Component } from 'react'
+import React 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>
-    )
-  }
-}
+const ButtonLabeledIconButtonsExample = () => (
+  <Button.Group vertical labeled='icon'>
+    <Button icon='save'>Pause</Button>
+    <Button icon='play'>Play</Button>
+    <Button icon='shuffle'>Shuffle</Button>
+  </Button.Group>
+)
+
+export default ButtonLabeledIconButtonsExample

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

@@ -1,15 +1,13 @@
-import React, { Component } from 'react'
+import React 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>
-    )
-  }
-}
+const ButtonMixedGroupButtonsExample = () => (
+  <Button.Group>
+    <Button labeled='icon'>Feed</Button>
+    <Button>Messages</Button>
+    <Button>Events</Button>
+    <Button>Photos</Button>
+  </Button.Group>
+)
+
+export default ButtonMixedGroupButtonsExample

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

@@ -1,15 +1,13 @@
-import React, { Component } from 'react'
+import React 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>
-    )
-  }
-}
+const ButtonVerticalButtonsExample = () => (
+  <Button.Group vertical>
+    <Button>Feed</Button>
+    <Button>Messages</Button>
+    <Button>Events</Button>
+    <Button>Photos</Button>
+  </Button.Group>
+)
+
+export default ButtonVerticalButtonsExample

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

@@ -0,0 +1,40 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const ButtonGroupsExamples = () => (
+  <ExampleSection title='Groups'>
+    <ComponentExample
+      title='Buttons'
+      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>
+)
+
+export default ButtonGroupsExamples