begin dropdown examples

docs/app/Examples/modules/Dropdown/CheckboxExamples.js → docs/app/Examples/modules/Dropdown/DropdownExamples.js

@@ -1,15 +1,13 @@
 import React, { Component } from 'react'
 import Types from './Types/Types'
 import States from './States/States'
-import Variations from './Variations/Variations'
 
-export default class CheckboxExamples extends Component {
+export default class DropdownExamples extends Component {
   render() {
     return (
       <div>
         <Types />
         <States />
-        <Variations />
       </div>
     )
   }

docs/app/Examples/modules/Dropdown/States/Disabled.js

@@ -1,17 +1,16 @@
 import React, { Component } from 'react'
-import { Form, Checkbox, Field } from 'stardust'
+import { Dropdown } from 'stardust'
 
-export default class CheckboxDisabledExample extends Component {
+export default class DropdownDisabledExample extends Component {
   render() {
     return (
-      <Form>
-        <Field>
-          <Checkbox className='disabled' label='Disabled' />
-        </Field>
-        <Field>
-          <Checkbox className='toggle' disabled label='Disabled' />
-        </Field>
-      </Form>
+      <Dropdown className='disabled' text='Dropdown'>
+        <Dropdown.Menu>
+          <Dropdown.Item text='Choice 1' />
+          <Dropdown.Item text='Choice 2' />
+          <Dropdown.Item text='Choice 3' />
+        </Dropdown.Menu>
+      </Dropdown>
     )
   }
 }

docs/app/Examples/modules/Dropdown/States/States.js

@@ -1,41 +1,15 @@
 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 CheckboxStatesExamples extends Component {
+export default class DropdownStatesExamples extends Component {
   render() {
     return (
       <ExampleSection title='States'>
-        <ComponentExample
-          title='Checked'
-          description='A checkbox can come pre-checked'
-          examplePath='modules/Checkbox/States/Checked'
-        >
-          <Message>
-            Use
-            &nbsp;
-            <a href='https://facebook.github.io/react/docs/forms.html#default-value' target='_blank'>
-              <code>defaultChecked</code>
-            </a>
-            &nbsp;
-            as you normally would to set default form values.
-          </Message>
-        </ComponentExample>
         <ComponentExample
           title='Disabled'
-          description='Checkboxes can be disabled'
-          examplePath='modules/Checkbox/States/Disabled'
-        />
-        <ComponentExample
-          title='ReadOnly'
-          description='Make the checkbox unable to be edited by the user'
-          examplePath='modules/Checkbox/States/ReadOnly'
-        />
-        <ComponentExample
-          title='Remote Control'
-          description='You can trigger events remotely.'
-          examplePath='modules/Checkbox/States/CheckboxRemoteControlExample'
+          description='A disabled dropdown menu or item does not allow user interaction'
+          examplePath='modules/Dropdown/States/Disabled'
         />
       </ExampleSection>
     )

docs/app/Examples/modules/Dropdown/Types/Dropdown.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import { Dropdown } from 'stardust'
+
+export default class DropdownDropdownExample extends Component {
+  render() {
+    return (
+      <Dropdown text='File'>
+        <Dropdown.Item text='New' />
+        <Dropdown.Item text='Open...' description='ctrl + o' />
+        <Dropdown.Item text='Save as...' description='ctrl + s' />
+        <Dropdown.Item text='Rename' description='ctrl + r' />
+        <Dropdown.Item text='Make a copy' />
+        <Dropdown.Item icon='trash' text='Move to trash' />
+        <Dropdown.Divider />
+        <Dropdown.Item text='Download As...' />
+        <Dropdown.Item text='Publish To Web'>
+          <Dropdown.Menu>
+            <Dropdown.Item text='Google Docs' />
+            <Dropdown.Item text='Google Drive' />
+            <Dropdown.Item text='Dropbox' />
+            <Dropdown.Item text='Adobe Creative Cloud' />
+            <Dropdown.Item text='Private FTP' />
+            <Dropdown.Item text='Another Service...' />
+          </Dropdown.Menu>
+        </Dropdown.Item>
+        {/* item text can also be defined as children */}
+        <Dropdown.Item>E-mail Collaborators</Dropdown.Item>
+      </Dropdown>
+    )
+  }
+}

docs/app/Examples/modules/Dropdown/Types/Types.js

@@ -1,32 +1,22 @@
 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 CheckboxTypesExamples extends Component {
+export default class DropdownTypesExamples extends Component {
   render() {
     return (
       <ExampleSection title='Types'>
         <ComponentExample
-          title='Checkbox'
-          description='A box for checking.'
-          examplePath='modules/Checkbox/Types/Checkbox'
-        />
-        <ComponentExample
-          title='Toggle'
-          description='A checkbox can toggle.'
-          examplePath='modules/Checkbox/Types/Toggle'
-        />
-        <ComponentExample
-          title='Slider'
-          description='A checkbox can look like a slider.'
-          examplePath='modules/Checkbox/Types/Slider'
-        />
-        <ComponentExample
-          title='Radio'
-          description='A checkbox can be formatted as a radio element. This means it is an exclusive option.'
-          examplePath='modules/Checkbox/Types/Radio'
-        />
-        <ComponentExample examplePath='modules/Checkbox/Types/RadioGroup' />
+          title='Dropdown'
+          description='A dropdown'
+          examplePath='modules/Dropdown/Types/Dropdown'
+        >
+          <Message>
+            Dropdown <code>children</code> are automatically wrapped in a
+            {' '}<code>{`<Dropdown.Menu />`}</code> for convenience.
+          </Message>
+        </ComponentExample>
       </ExampleSection>
     )
   }