Update Documentation for Switches

docs/src/app/app-routes.jsx

@@ -26,6 +26,7 @@ import BadgePage from './components/pages/components/Badge/Page';
 import Buttons from './components/pages/components/buttons';
 import CardPage from './components/pages/components/Card/Page';
 import CircularProgressPage from './components/pages/components/CircularProgress/Page';
+import CheckboxPage from './components/pages/components/Checkbox/Page';
 import DatePicker from './components/pages/components/DatePicker/Page';
 import DialogPage from './components/pages/components/Dialog/Page';
 import DividerPage from './components/pages/components/Divider/Page';
@@ -41,6 +42,7 @@ import Menus from './components/pages/components/menus';
 import PaperPage from './components/pages/components/Paper/Page';
 import Popover from './components/pages/components/popover';
 import RefreshIndicatorPage from './components/pages/components/RefreshIndicator/Page';
+import RadioButtonPage from './components/pages/components/RadioButton/Page';
 import SelectField from './components/pages/components/SelectField/Page';
 import SliderPage from './components/pages/components/Slider/Page';
 import SnackbarPage from './components/pages/components/Snackbar/Page';
@@ -50,6 +52,7 @@ import Table from './components/pages/components/table';
 import TabsPage from './components/pages/components/Tabs/Page';
 import TextFields from './components/pages/components/text-fields';
 import TimePicker from './components/pages/components/time-picker';
+import TogglePage from './components/pages/components/Toggle/Page';
 import ToolbarsPage from './components/pages/components/Toolbars/Page';
 
 /**
@@ -89,6 +92,7 @@ const AppRoutes = (
       <Route path="buttons" component={Buttons} />
       <Route path="card" component={CardPage} />
       <Route path="circular-progress" component={CircularProgressPage} />
+      <Route path="checkbox" component={CheckboxPage} />
       <Route path="date-picker" component={DatePicker} />
       <Route path="dialog" component={DialogPage} />
       <Route path="divider" component={DividerPage} />
@@ -104,6 +108,7 @@ const AppRoutes = (
       <Route path="paper" component={PaperPage} />
       <Route path="popover" component={Popover} />
       <Route path="refresh-indicator" component={RefreshIndicatorPage} />
+      <Route path="radio-button" component={RadioButtonPage} />
       <Route path="select-field" component={SelectField} />
       <Route path="svg-icon" component={SvgIconPage} />
       <Route path="slider" component={SliderPage} />
@@ -113,6 +118,7 @@ const AppRoutes = (
       <Route path="tabs" component={TabsPage} />
       <Route path="text-fields" component={TextFields} />
       <Route path="time-picker" component={TimePicker} />
+      <Route path="toggle" component={TogglePage} />
       <Route path="toolbars" component={ToolbarsPage} />
     </Route>
 

docs/src/app/components/app-left-nav.jsx

@@ -252,8 +252,22 @@ const AppLeftNav = React.createClass({
                 primaryText="Slider"
               />,
               <ListItem
-                value="/components/switches"
                 primaryText="Switches"
+                primaryTogglesNestedList={true}
+                nestedItems={[
+                  <ListItem
+                    value="/components/checkbox"
+                    primaryText="Checkbox"
+                  />,
+                  <ListItem
+                    value="/components/radio-button"
+                    primaryText="Radio Button"
+                  />,
+                  <ListItem
+                    value="/components/toggle"
+                    primaryText="Toggle"
+                  />,
+                ]}
               />,
               <ListItem
                 value="/components/snackbar"

docs/src/app/components/pages/components/Checkbox/ExampleSimple.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Checkbox from 'material-ui/lib/checkbox';
+import ToggleStar from 'material-ui/lib/svg-icons/toggle/star';
+import ToggleStarBorder from 'material-ui/lib/svg-icons/toggle/star-border';
+
+const style = {
+  container: {
+    textAlign: 'left',
+    marginBottom: '16px',
+    minHeight: '24px',
+  },
+  group: {
+    width: 300,
+  },
+};
+
+const CheckboxExampleSimple = () => (
+  <div style={style.group}>
+    <div style={style.container}>
+      <Checkbox
+        id="checkboxId1"
+        name="checkboxName1"
+        value="checkboxValue1"
+        label="went for a run today"/>
+    </div>
+    <div style={style.container}>
+      <Checkbox
+        id="checkboxId2"
+        name="checkboxName2"
+        value="checkboxValue2"
+        label="fed the dog"
+        defaultChecked={true}/>
+    </div>
+    <div style={style.container}>
+      <Checkbox
+        id="checkboxId3"
+        name="checkboxName3"
+        value="checkboxValue3"
+        label="built a house on the moon"
+        disabled={true}/>
+    </div>
+    <div style={style.container}>
+      <Checkbox
+        name="checkboxName4"
+        value="checkboxValue4"
+        checkedIcon={<ToggleStar />}
+        unCheckedIcon={<ToggleStarBorder />}
+        label="custom icon" />
+    </div>
+  </div>
+);
+
+export default CheckboxExampleSimple;

docs/src/app/components/pages/components/Checkbox/Page.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import checkboxReadmeText from './README';
+import checkboxCode from '!raw!material-ui/lib/radio-button';
+import CheckboxExampleSimple from './ExampleSimple';
+import checkboxExampleSimpleCode from '!raw!./ExampleSimple';
+
+const CheckboxPage = () => (
+  <div>
+    <MarkdownElement text={checkboxReadmeText} />
+    <CodeExample code={checkboxExampleSimpleCode}>
+      <CheckboxExampleSimple />
+    </CodeExample>
+    <PropTypeDescription code={checkboxCode}/>
+  </div>
+);
+
+export default CheckboxPage;

docs/src/app/components/pages/components/Checkbox/README.md

@@ -0,0 +1,4 @@
+## Checkbox
+A [checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox)
+is used to verify which options you want selected from a group. 
+### Examples

docs/src/app/components/pages/components/RadioButton/ExampleSimple.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import RadioButton from 'material-ui/lib/radio-button';
+import RadioButtonGroup from 'material-ui/lib/radio-button-group';
+
+const style = {
+  container: {
+    textAlign: 'left',
+    marginBottom: '16px',
+    minHeight: '24px',
+  },
+  group: {
+    width: 300,
+  },
+};
+
+const RadioButtonExampleSimple = () => (
+  <div style={style.group}>
+    <RadioButtonGroup name="shipSpeed" defaultSelected="not_light">
+      <RadioButton
+        id="radioButtonId1"
+        value="light"
+        label="prepare for light speed"
+        style={{marginBottom: 16}} />
+      <RadioButton
+        id="radioButtonId2"
+        value="not_light"
+        label="light speed too slow"
+        style={{marginBottom: 16}}/>
+      <RadioButton
+        id="radioButtonId3"
+        value="ludicrous"
+        label="go to ludicrous speed"
+        style={{marginBottom: 16}}
+        disabled={true}/>
+    </RadioButtonGroup>
+  </div>
+);
+
+export default RadioButtonExampleSimple;

docs/src/app/components/pages/components/RadioButton/Page.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import radioButtonReadmeText from './README';
+import radioButtonCode from '!raw!material-ui/lib/radio-button';
+import RadioButtonExampleSimple from './ExampleSimple';
+import radioButtonExampleSimpleCode from '!raw!./ExampleSimple';
+
+const RadioButtonPage = () => (
+  <div>
+    <MarkdownElement text={radioButtonReadmeText} />
+    <CodeExample code={radioButtonExampleSimpleCode}>
+      <RadioButtonExampleSimple />
+    </CodeExample>
+    <PropTypeDescription code={radioButtonCode}/>
+  </div>
+);
+
+export default RadioButtonPage;

docs/src/app/components/pages/components/RadioButton/README.md

@@ -0,0 +1,5 @@
+## Radio Button
+[Radio buttons](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button)
+are switches used for selection from multiple options.
+
+### Examples

docs/src/app/components/pages/components/Toggle/ExampleSimple.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Toggle from 'material-ui/lib/toggle';
+
+const style = {
+  container: {
+    textAlign: 'left',
+    marginBottom: '16px',
+    minHeight: '24px',
+  },
+  group: {
+    width: 300,
+  },
+};
+
+const ToggleExampleSimple = () => (
+  <div style={style.group}>
+    <div style={style.container}>
+      <Toggle
+        id="toggleId1"
+        name="toggleName1"
+        value="toggleValue1"
+        label="activate thrusters"/>
+    </div>
+    <div style={style.container}>
+      <Toggle
+        id="toggleId2"
+        name="toggleName2"
+        value="toggleValue2"
+        label="auto-pilot"
+        defaultToggled={true}/>
+    </div>
+    <div style={style.container}>
+      <Toggle
+        id="toggleId3"
+        name="toggleName3"
+        value="toggleValue3"
+        label="initiate self-destruct sequence"
+        disabled={true}/>
+    </div>
+  </div>
+);
+
+export default ToggleExampleSimple;

docs/src/app/components/pages/components/Toggle/Page.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import toggleReadmeText from './README';
+import toggleCode from '!raw!material-ui/lib/toggle';
+import ToggleExampleSimple from './ExampleSimple';
+import toggleExampleSimpleCode from '!raw!./ExampleSimple';
+
+const TogglePage = () => (
+  <div>
+    <MarkdownElement text={toggleReadmeText} />
+    <CodeExample code={toggleExampleSimpleCode}>
+      <ToggleExampleSimple />
+    </CodeExample>
+    <PropTypeDescription code={toggleCode}/>
+  </div>
+);
+
+export default TogglePage;

docs/src/app/components/pages/components/Toggle/README.md

@@ -0,0 +1,5 @@
+## Toggle
+A [toggle switch](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-switch)
+is used as an on/off control. Supports checkedLink.
+
+### Examples

src/checkbox.jsx

@@ -10,15 +10,58 @@ import ThemeManager from './styles/theme-manager';
 const Checkbox = React.createClass({
 
   propTypes: {
+    /**
+     * Checkbox is checked if true.
+     */
     checked: React.PropTypes.bool,
+
+    /**
+     * The SvgIcon to use for the checked state.
+     * This is useful to create icon toggles.
+     */
     checkedIcon: React.PropTypes.element,
+
+    /**
+     * The default state of our checkbox component.
+     */
     defaultChecked: React.PropTypes.bool,
+
+    /**
+     * Disabled if true.
+     */
     disabled: React.PropTypes.bool,
+
+    /**
+     * Overrides the inline-styles of the icon element.
+     */
     iconStyle: React.PropTypes.object,
+
+    /**
+     * Where the label will be placed next to the checkbox.
+     * Options include "left" and "right" (case-sensitive).
+     * Default option is "right".
+     */
     labelPosition: React.PropTypes.oneOf(['left', 'right']),
+
+    /**
+     * Overrides the inline-styles of the Checkbox element label.
+     */
     labelStyle: React.PropTypes.object,
+
+    /**
+     * Callback function that is fired when the checkbox is checked.
+     */
     onCheck: React.PropTypes.func,
+
+    /**
+     * The SvgIcon to use for the unchecked state.
+     * This is useful to create icon toggles.
+     */
     unCheckedIcon: React.PropTypes.element,
+
+    /**
+     * ValueLink for when using controlled checkbox.
+     */
     valueLink: React.PropTypes.object,
   },
 
@@ -33,6 +76,13 @@ const Checkbox = React.createClass({
 
   mixins: [StylePropable],
 
+  getDefaultProps() {
+    return {
+      defaultChecked: false,
+      disabled: false,
+    };
+  },
+
   getInitialState() {
     return {
       switched: