Support full dropdown functionality

docs/app/Examples/modules/Dropdown/Content/AsyncOptions.js

@@ -0,0 +1,48 @@
+import _ from 'lodash'
+import cx from 'classnames'
+import faker from 'faker'
+import React, { Component } from 'react'
+import { Button, Dropdown } from 'stardust'
+
+const getOptions = () => _.times(3, () => {
+  const name = faker.name.findName()
+  return { text: name, value: _.snakeCase(name) }
+})
+
+export default class DropdownAsyncOptions extends Component {
+  state = { isFetching: false, value: [], options: [] }
+
+  handleChange = value => this.setState({ value })
+
+  // fake api call
+  fetchOptions = () => {
+    this.setState({ isFetching: true })
+
+    setTimeout(() => {
+      this.setState({ isFetching: false, options: getOptions() })
+      this.selectRandom()
+    }, 500)
+  }
+
+  selectRandom = () => this.setState({ value: _.sample(this.state.options).value })
+
+  render() {
+    const { options, isFetching, value } = this.state
+    const classes = cx('search selection multiple', { 'disabled loading': isFetching })
+
+    return (
+      <div>
+        <Button onClick={this.fetchOptions}>Fetch</Button>
+        <Button onClick={this.selectRandom} disabled={_.isEmpty(options)}>Random</Button>
+        <Dropdown
+          defaultText='Add Users'
+          className={classes}
+          options={options}
+          value={value}
+          onChange={this.handleChange}
+        />
+        <pre>{JSON.stringify(this.state, null, 2)}</pre>
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+export default class DropdownContentExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='Content'>
+        <ComponentExample
+          title='Async Options'
+          description="A dropdown's options can change over time"
+          examplePath='modules/Dropdown/Content/AsyncOptions'
+        />
+      </ExampleSection>
+    )
+  }
+}

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

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

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

@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { Dropdown } from 'stardust'
+
+export default class DropdownDisabledExample extends Component {
+  render() {
+    return (
+      <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

@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+export default class DropdownStatesExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='States'>
+        <ComponentExample
+          title='Disabled'
+          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' action='hide'>
+        <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

@@ -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 DropdownTypesExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='Types'>
+        <ComponentExample
+          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>
+    )
+  }
+}