Create a more designed Menu Dropdown Button

.gitignore

@@ -9,3 +9,4 @@ coverage
 examples/bundle.js
 examples/style.css
 npm-debug.log
+yarn.lock

stories/Menu.story.js

@@ -5,6 +5,7 @@ import faker from 'faker'
 import { Card, Button, IconButton } from 'react-mdl'
 
 import { Menu, MenuItem } from '../src'
+import StatefulMenu from './helpers/StatefulMenu'
 
 const bigMenuItems = [...Array(35).keys()].map(i =>
   <MenuItem key={i}>Menu Item {i}</MenuItem>
@@ -22,6 +23,16 @@ storiesOf('Menu', module)
       <MenuItem onClick={() => console.log('select three')}>Three</MenuItem>
     </Menu>
   ))
+  .add('default with icon', () => (
+      <div>
+          <h4>Menu with Icon</h4>
+          <p>Useful for a button-style dropdown.</p>
+          <StatefulMenu
+            options={['One', 'Two', 'Three']}
+            value="Select Value"
+          />
+      </div>
+  ))
   .add('position', () => {
     const styles = {
       center: {

stories/helpers/StatefulMenu.js

@@ -0,0 +1,40 @@
+import React, { Component, PropTypes } from 'react';
+import { Button, Icon } from 'react-mdl'
+import { Menu, MenuItem } from '../../src'
+
+export default class StatefulMenu extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { value: null }
+  }
+
+  static propTypes = {
+    options: PropTypes.arrayOf(React.PropTypes.string).isRequired,
+    value: PropTypes.string
+  }
+
+  static defaultProps = {
+    value: null
+  }
+
+  onChange = (value) => {
+    this.setState({ value })
+    console.log(`select ${value}`)
+  }
+
+  render() {
+    const { value, options } = this.props;
+    const val = this.state.value ? this.state.value : value ? value : options[0];
+    return (
+      <Menu
+        target={<Button raised>{val} <Icon name="arrow_drop_down" /></Button>}
+        align={'tl bl'}
+      >
+        { options.map((option) => (
+          <MenuItem key={option} onClick={() => this.onChange(option) }>{option}</MenuItem>
+        ))}
+      </Menu>
+    )
+  }
+}