Merge pull request #106 from TechnologyAdvice/feature/buttons-component

Feature/buttons component

Author: kyleturco

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

@@ -1,5 +1,7 @@
 import React, {Component} from 'react';
 import ButtonTypesExamples from './Types/ButtonTypesExamples';
+import ButtonGroupsExamples from './Groups/ButtonGroupsExamples';
+import ButtonContentExamples from './Content/ButtonContentExamples';
 import ButtonStatesExamples from './States/ButtonStatesExamples';
 import ButtonsVariationsExamples from './Variations/ButtonsVariationsExamples';
 
@@ -8,6 +10,8 @@ export default class ButtonExamples extends Component {
     return (
       <div>
         <ButtonTypesExamples />
+        <ButtonGroupsExamples />
+        <ButtonContentExamples />
         <ButtonStatesExamples />
         <ButtonsVariationsExamples />
       </div>

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

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

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

@@ -0,0 +1,23 @@
+import React, {Component} from 'react';
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
+import {Message} from 'stardust';
+
+export default class ButtonContentExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='Content'>
+        <ComponentExample
+          title='Conditionals'
+          description='Button groups can contain conditionals'
+          examplePath='elements/Button/Content/ButtonConditionalsExample'
+        >
+          <Message className='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>
+    );
+  }
+}

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

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

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

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
+
+export default class ButtonGroupsExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='Groups'>
+        <ComponentExample
+          title='Buttons'
+          description='Buttons can exist together as a group'
+          examplePath='elements/Button/Groups/ButtonButtonsExample'
+        />
+        <ComponentExample
+          title='Icon Buttons'
+          description='Button groups can show groups of icons'
+          examplePath='elements/Button/Groups/ButtonIconButtonsExample'
+        />
+      </ExampleSection>
+    );
+  }
+}

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

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

src/elements/Button/Buttons.js

@@ -0,0 +1,30 @@
+import React, {Component, PropTypes} from 'react';
+import classNames from 'classnames';
+import META from 'src/utils/Meta';
+
+export default class Buttons extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+  };
+
+  static _meta = {
+    library: META.library.semanticUI,
+    name: 'Buttons',
+    type: META.type.element,
+  };
+
+  render() {
+    const classes = classNames(
+      'sd-buttons',
+      'ui',
+      this.props.className,
+      'buttons'
+    );
+    return (
+      <div {...this.props} className={classes}>
+        {this.props.children}
+      </div>
+    );
+  }
+}

src/elements/List/List.js

@@ -15,7 +15,12 @@ export default class List extends Component {
   };
 
   render() {
-    const classes = classNames('sd-list', 'ui', this.props.className, 'list');
+    const classes = classNames(
+      'sd-list',
+      'ui',
+      this.props.className,
+      'list'
+    );
     return (
       <div {...this.props} className={classes}>
         {this.props.children}

src/index.js

@@ -17,6 +17,7 @@ import TableColumn from 'src/collections/Table/TableColumn';
 
 // Elements
 import Button from 'src/elements/Button/Button';
+import Buttons from 'src/elements/Button/Buttons';
 import Container from 'src/elements/Container/Container';
 import Image from 'src/elements/Image/Image';
 import Input from 'src/elements/Input/Input';
@@ -56,6 +57,7 @@ export default {
 
   // Elements
   Button,
+  Buttons,
   Container,
   Image,
   Input,