Button

components/SLDSButton/index.js

@@ -12,35 +12,91 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 import React from 'react';
 const classNames = require('classnames');
 import createChainedFunction from '../utils/create-chained-function';
+import {ButtonIcon, Icon} from '../SLDSIcons.js';
 import {omit} from 'lodash';
 
 class Button extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = { active: false };
   };
 
+  componentWillMount(){
+    /*===============================
+    TODO: refactor so that React doesn't throw warnings in console
+    for (var key in this.props) {
+      if(this.props.hasOwnProperty(key) && typeof(this.props[key]) === 'string' && key !== 'label'){
+        this.props[key] = this.props[key].toLowerCase();
+      }
+    }
+    ===============================*/
+  }
+
   onClick(e) {
     this.setState({ active: !this.state.active });
   }
 
   getClassName() {
+    let isStateful = this.props.stateful && this.state.active ? true : false;
     return classNames(this.props.className, 'slds-button', {
-      [`slds-button--${this.props.flavor}`]: this.props.flavor,
-      ['slds-is-selected']: this.state.active,
+      [`slds-button--${this.props.variant}`]: this.props.variant,
+      ['slds-is-selected']: isStateful,
     });
   }
 
+  renderIcon(){
+    if(this.props.iconName){
+      return (
+        <ButtonIcon
+          name={this.props.iconName}
+          size={this.props.iconSize}
+          position={this.props.iconPosition || 'left'} />
+      );
+    }
+  }
+
+
   render() {
     const props = omit('className', this.props);
     const click = createChainedFunction(this.props.onClick, this.onClick.bind(this));
-    return (
-      <button className={this.getClassName()} {...props} onClick={click}>
-        {this.props.children}
-      </button>
-    );
+
+    //If the button is only an icon render this:
+    if(this.props.variant === 'icon'){
+      return (
+        <button className={this.getClassName()} {...props} onClick={click}>
+          <Icon
+          name={this.props.iconName}
+          category='utility'
+          size={this.props.iconSize}
+          className={'slds-icon'} />
+          <span className="slds-assistive-text">{this.props.label}</span>
+        </button>
+      );
+    }
+    //Else we assume the button has a visible label (with or without an icon):
+    else{
+      return (
+        <button className={this.getClassName()} {...props} onClick={click}>
+
+        <span aria-live="assertive">{this.props.iconPosition === 'right' ? this.props.label : null}</span>
+
+        {this.renderIcon()}
+
+        <span aria-live="assertive">{(this.props.iconPosition === 'left' || !this.props.iconPosition) ? this.props.label : null}</span>
+
+        </button>
+      );
+    }
   }
 }
 
+Button.propTypes = {
+  label: React.PropTypes.string.isRequired,
+  variant: React.PropTypes.oneOf(['base', 'neutral', 'brand', 'icon']),
+  iconName: React.PropTypes.string,
+  iconSize: React.PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
+  iconPosition: React.PropTypes.oneOf(['left', 'right']),
+}
+
 module.exports = Button;

components/SLDSIcons.js

@@ -18,7 +18,7 @@ export const ButtonIcon = React.createClass({
     getDefaultProps() {
 
         return {
-            category: 'utility',
+            category: 'utility', // Utility Icon Reference: https://www.lightningdesignsystem.com/resources/icons#utility
         };
     },
 
@@ -42,7 +42,7 @@ export const ButtonIcon = React.createClass({
         if (this.props.hint) {
             className = className + ' slds-button__icon--hint';
         }
-        return <svg  aria-hidden='true' className={className} dangerouslySetInnerHTML={{__html: useTag }} />;
+        return <svg aria-hidden='true' className={className} dangerouslySetInnerHTML={{__html: useTag }} />;
     }
 
 });

components/SLDSModal/index.jsx

@@ -113,10 +113,13 @@ module.exports = React.createClass( {
             >
             <div className='slds-modal__header'>
               <h2 className='slds-text-heading--medium'>{this.props.title}</h2>
-              <SLDSButton className='slds-button slds-modal__close' onClick={this.closeModal}>
-                <Icon name='close' category='utility' size='small'/>
-                <span className='slds-assistive-text'>Close</span>
-              </SLDSButton>
+              <SLDSButton
+                label='Close'
+                variant='icon'
+                iconName='close'
+                iconSize='small'
+                className='slds-modal__close'
+                onClick={this.closeModal} />
             </div>
 
             <div className='slds-modal__content'>

demo/code-snippets/SLDSButton.txt

@@ -1,2 +1,9 @@
 
-<SLDSButton flavor="brand" onClick={this.handleButtonClick}>Test Button</SLDSButton>
+
+<SLDSButton label='Test Button' variant='neutral' iconName='download' iconSize='small' iconPosition='left' onClick={this.handleButtonClick} />
+
+* Only label is required
+* variant must be neutral, brand, or icon
+* iconSize must be small, medium, or large
+* iconPosition must be left or right
+

demo/pages/HomePage/ButtonSection.jsx

@@ -37,7 +37,6 @@ module.exports = React.createClass( {
   render() {
     return (
 
-
             <div className='slds-p-around--medium'>
               <h3 className='slds-text-heading--medium slds-truncate'>
                 Button
@@ -47,9 +46,13 @@ module.exports = React.createClass( {
                 {require('raw-loader!../../code-snippets/SLDSButton.txt')}
               </PrismCode>
               <div className='slds-p-vertical--large'>
-                <SLDSButton flavor='brand' onClick={this.handleButtonClick}>
-                  Test Button
-                </SLDSButton>
+                <SLDSButton
+                  label='Test Button'
+                  variant='neutral'
+                  iconName='download'
+                  iconSize='small'
+                  iconPosition='right'
+                  onClick={this.handleButtonClick} />
               </div>
             </div>
 

demo/pages/HomePage/ModalSection.jsx

@@ -89,15 +89,16 @@ Utilize our detailed guidelines to confidently design excellent apps that fit ri
 */}
 
               <div className='slds-p-vertical--large'>
-                <SLDSButton flavor='brand' onClick={this.openModal}>
-                  Open Modal
-                </SLDSButton>
-                <SLDSModal 
+                <SLDSButton
+                  label='Open Modal'
+                  variant='brand'
+                  onClick={this.openModal} />
+                <SLDSModal
                   isOpen={this.state.modalIsOpen}
                   title={<span>Lightning Design System: Style with Ease</span>}
                   footer={[
-                    <button className='slds-button slds-button--neutral' onClick={this.closeModal}>Cancel</button>,
-                    <button className='slds-button slds-button--neutral slds-button--brand' onClick={this.handleSubmitModal}>Save</button>
+                    <SLDSButton label='Cancel' variant='neutral' onClick={this.closeModal} />,
+                    <SLDSButton label='Save' variant='brand' onClick={this.handleSubmitModal} />
                   ]}
                   onRequestClose={this.closeModal}>
                   {this.getModalContent()}