Update Menu and add docs

docs/components.js

@@ -68,6 +68,14 @@ export default [
       'Elevations create a sense of depth by applying a drop shadow to an element.',
     component: 'src/components/component-doc',
   },
+  {
+    name: 'Menu',
+    url: 'menu',
+    componentKey: 'menu',
+    description:
+      'Menus represent a list of items. They can be used within selects or dropdowns.',
+    component: 'src/components/component-doc',
+  },
   {
     name: 'Chips',
     url: 'chips',

docs/examples/menu.js

@@ -0,0 +1,16 @@
+class MenuExample extends Component {
+  render() {
+    return (
+      <Menu>
+        <Menu.Item>Option one</Menu.Item>
+        <Menu.Item>Option two</Menu.Item>
+        <Menu.Item separator>Option three</Menu.Item>
+        <Menu.Item>Option four</Menu.Item>
+        <Menu.Item>Option five</Menu.Item>
+        <Menu.Item>Option six</Menu.Item>
+      </Menu>
+    );
+  }
+}
+
+return <MenuExample />;

docs/readmes/menu.md

@@ -0,0 +1,36 @@
+## Usage
+
+```jsx
+import { Menu } from 'materialish';
+import 'materialish/menu.css';
+```
+
+# `Menu`
+
+## Props
+
+| Prop Name | Default Value | Required | Description                                                       |
+| --------- | ------------- | -------- | ----------------------------------------------------------------- |
+| className |               | No       | Additional class name(s) to add to the menu                       |
+| ...rest   |               | No       | Other props are placed on the underlying `ul` element of the menu |
+
+## CSS Variables
+
+| Variable               | Default Value | Description                               |
+| ---------------------- | ------------- | ----------------------------------------- |
+| --mt-baseFontSize      | 1rem          | The size of text within the menu          |
+| --mt-fontFamily        | 'Roboto'      | The font family to use for text           |
+| --mt-menuItemMinHeight |               | The minimum allowed height for menu items |
+
+# `Menu.Item`
+
+## Props
+
+| Prop Name | Default Value | Required | Description                                                                 |
+| --------- | ------------- | -------- | --------------------------------------------------------------------------- |
+| className |               | No       | Additional class name(s) to add to the menu item                            |
+| separator | false         | No       | Pass `true` to include a border-bottom to the menu item                     |
+| selected  | false         | No       | Whether or not this menu item is currently selected                         |
+| ripple    | true          | No       | Whether or not to display the "ripple" effect when the menu item is clicked |
+| children  |               | No       | The contents to render within the menu item                                 |
+| ...rest   |               | No       | Other props are placed on the root element of the menu item                 |

docs/static.config.js

@@ -18,6 +18,7 @@ const readmes = {
   radio: fs.readFileSync('./readmes/radio.md', fsOptions),
   dialog: fs.readFileSync('./readmes/dialog.md', fsOptions),
   elevation: fs.readFileSync('./readmes/elevation.md', fsOptions),
+  menu: fs.readFileSync('./readmes/menu.md', fsOptions),
   'action-chip': fs.readFileSync('./readmes/action-chip.md', fsOptions),
   'filter-chip': fs.readFileSync('./readmes/filter-chip.md', fsOptions),
   'choice-chip': fs.readFileSync('./readmes/choice-chip.md', fsOptions),
@@ -33,6 +34,7 @@ const examples = {
   radio: fs.readFileSync('./examples/radio.js', fsOptions),
   dialog: fs.readFileSync('./examples/dialog.js', fsOptions),
   elevation: fs.readFileSync('./examples/elevation.js', fsOptions),
+  menu: fs.readFileSync('./examples/menu.js', fsOptions),
   'action-chip': fs.readFileSync('./examples/action-chip.js', fsOptions),
   'filter-chip': fs.readFileSync('./examples/filter-chip.js', fsOptions),
   'choice-chip': fs.readFileSync('./examples/choice-chip.js', fsOptions),

src/menu/menu.css

@@ -19,7 +19,7 @@
   position: relative;
   box-sizing: border-box;
   display: block;
-  min-height: var(--itemHeight);
+  min-height: var(--mt-menuItemMinHeight);
   margin: 0;
   padding: 1.1em 1.7em;
   z-index: 0;

src/menu/menu.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Ripple from '../ripple/ripple';
 import Elevation from '../elevation/elevation';
 
@@ -13,7 +14,11 @@ export default class Menu extends Component {
   }
 }
 
-class MenuItem extends Component {
+Menu.propTypes = {
+  className: PropTypes.string,
+};
+
+class Item extends Component {
   render() {
     const {
       className = '',
@@ -53,4 +58,11 @@ class MenuItem extends Component {
   };
 }
 
-Menu.Item = MenuItem;
+Item.propTypes = {
+  className: PropTypes.string,
+  separator: PropTypes.bool,
+  selected: PropTypes.bool,
+  ripple: PropTypes.bool,
+};
+
+Menu.Item = Item;

stories/menu.stories.js

@@ -13,7 +13,7 @@ storiesOf('Menu', module).add('Regular', () => (
   <Menu>
     <Menu.Item>Option one</Menu.Item>
     <Menu.Item>Option two</Menu.Item>
-    <Menu.Item selected>Option three</Menu.Item>
+    <Menu.Item separator>Option three</Menu.Item>
     <Menu.Item>Option four</Menu.Item>
     <Menu.Item>Option five</Menu.Item>
     <Menu.Item>Option six</Menu.Item>