Merge pull request #46 from salesforce-ux/button

Button

Author: ivansfdc

demo/code-snippets/SLDSButton.txt

@@ -1,17 +1,27 @@
 
 Default Props             Prop Values
-* label=''                Required Prop
+* label=undefined         Required Prop
 * variant='base'          ['base', 'neutral', 'brand', 'destructive', 'icon'] Use icon if you want an icon only button
-* disabled={false}
-* tabindex=''
-* inverse={false}
-* stateful={false}
-* responsive={false}
-* iconName=''             see https://www.lightningdesignsystem.com/resources/icons#utility for names
-* iconVariant='bare'      ['bare', 'container', 'border', 'border-filled', 'small', 'more']
-* iconSize='medium'       ['x-small', 'medium', 'small', 'large']
-* iconPosition='left'     ['left', 'right', 'large']
-* className = ''          custom classes on the button tag
+* disabled=false
+* tabindex=undefined
+* inverse=false
+* stateful=false
+* responsive=false
+* iconName=undefined      see https://www.lightningdesignsystem.com/resources/icons#utility for names
+* className=undefined     custom classes on the button tag
+
+** If iconName exists
+  * iconVariant='bare'    ['bare', 'container', 'border', 'border-filled', 'small', 'more']
+  * iconSize='medium'     ['x-small', 'medium', 'small', 'large']
+  * iconPosition='left'   ['left', 'right', 'large']
+
+** If stateful=true
+  * notSelectedIcon=undefined
+  * notSelectedLabel=undefined
+  * selectedIcon=undefined
+  * selectedLabel=undefined
+  * selectedFocusIcon=undefined
+  * selectedFocusLabel=undefined
 
 1. <SLDSButton label='Neutral' variant='neutral' onClick={this.handleNeutralClick} />
 2. <SLDSButton label='Neutral Icon' variant='neutral' iconName='download' iconSize='small' iconPosition='right' onClick={this.handleNeutralClick} />
@@ -20,3 +30,14 @@ Default Props             Prop Values
 5. <SLDSButton label='Settings' variant='icon' iconName='settings' iconSize='large' onClick={this.handleIconClick} />
 6. <SLDSButton label='User' variant='icon' inverse={true} iconName='user' iconSize='large' onClick={this.handleIconClick} />
 7. <SLDSButton label='Edit' variant='icon' hint={true} iconName='edit' iconSize='large' onClick={this.handleIconClick} />
+8. <SLDSButton
+      label='Follow'
+      variant='neutral'
+      stateful={true}
+      notSelectedIcon='add'
+      notSelectedLabel='Follow'
+      selectedIcon='check'
+      selectedLabel='Following'
+      selectedFocusIcon='close'
+      selectedFocusLabel='Unfollow'
+      onClick={this.handleStatefulClick} />

demo/pages/HomePage/index.jsx

@@ -10,17 +10,18 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 'use strict';
 
 import React from 'react';
+import Router from 'react-router';
+const { Route, DefaultRoute, RouteHandler, Link } = Router;
+
 import SLDSGrid from '../../../components/SLDSGrid';
 import {ButtonIcon, Icon} from "./../../../components/SLDSIcons";
 
-
 import ButtonSection from './ButtonSection';
 import ButtonGroupSection from './ButtonGroupSection';
-import LookupBaseSection from './LookupBaseSection';
 
+import LookupBaseSection from './LookupBaseSection';
 import LookupBaseDynamicSection from './LookupBaseDynamicSection';
 
-
 import PicklistBaseSection from './PicklistBaseSection';
 import PicklistBaseCustomSection from './PicklistBaseCustomSection';
 
@@ -42,7 +43,6 @@ module.exports = React.createClass( {
     return {};
   },
 
-
   render() {
     return (
       <SLDSGrid flavor='vertical' className='stage slds-nowrap'>
@@ -66,10 +66,11 @@ module.exports = React.createClass( {
             </SLDSGrid>
           </div>
         </div>
+
         <main className='stage-main slds-grid slds-wrap slds-grow' role='main'>
           <div className='region region--main slds-grow slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--8-of-12 slds-col-rule--right slds-p-around--large'>
 
-            <ButtonSection />
+            <ButtonSection/>
 
             <ButtonGroupSection />