Adding Menu Component

src/index.js

@@ -10,6 +10,7 @@ import Elevation from './elevation/elevation';
 import ActionChip from './action-chip/action-chip';
 import ChoiceChip from './choice-chip/choice-chip';
 import FilterChip from './filter-chip/filter-chip';
+import Menu from './menu/menu';
 
 export {
   Avatar,
@@ -24,4 +25,5 @@ export {
   ActionChip,
   ChoiceChip,
   FilterChip,
+  Menu,
 };

src/menu/menu.css

@@ -0,0 +1,55 @@
+.mt-menu {
+  --mt-ripple-color: #666;
+  all: initial;
+  font-size: calc(var(--mt-baseFontSize, 1rem) * 0.875);
+  font-family: var(--mt-fontFamily, 'Roboto');
+  position: relative;
+  box-sizing: border-box;
+  border-radius: 2px;
+  text-align: left;
+  margin: 0;
+  padding: 0.55em 0;
+  display: inline-block;
+  background-color: #fff;
+  min-width: 10em;
+  overflow: hidden;
+}
+
+.mt-menu_item {
+  position: relative;
+  box-sizing: border-box;
+  display: block;
+  min-height: var(--itemHeight);
+  margin: 0;
+  padding: 1.1em 1.7em;
+  z-index: 0;
+  cursor: pointer;
+}
+
+.mt-menu_item:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #eee;
+  z-index: -1;
+  opacity: 0;
+  will-change: opacity;
+  transition: opacity 0.1s ease-in-out;
+}
+
+.mt-menu_item:hover:after {
+  opacity: 1;
+}
+
+.mt-menu_item-separator {
+  border-bottom: 1px solid #e3e2e2;
+}
+
+.mt-menu_item-selected:after {
+  background-color: #e1e0e0;
+  opacity: 1;
+}

src/menu/menu.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import Ripple from '../ripple/ripple';
+import Elevation from '../elevation/elevation';
+
+export default class Menu extends Component {
+  render() {
+    const { className = '', ...props } = this.props;
+    return (
+      <Elevation depth={1}>
+        <ul className={`mt-menu ${className}`} {...props} />
+      </Elevation>
+    );
+  }
+}
+
+class MenuItem extends Component {
+  render() {
+    const {
+      className = '',
+      separator = false,
+      selected = false,
+      ripple = true,
+      children,
+      ...props
+    } = this.props;
+    return (
+      <div
+        className={`mt-menu_item ${separator ? 'mt-menu_item-separator' : ''} ${
+          selected ? 'mt-menu_item-selected' : ''
+        } ${className}`}
+        {...props}
+        onClick={this.onClick}>
+        {children}
+        {ripple && <Ripple ref={this.getRippleRef} />}
+      </div>
+    );
+  }
+
+  getRippleRef = component => {
+    this.rippleComponent = component;
+  };
+
+  onClick = e => {
+    const { onClick } = this.props;
+
+    if (this.rippleComponent) {
+      this.rippleComponent.onClick(e);
+    }
+
+    if (onClick) {
+      onClick();
+    }
+  };
+}
+
+Menu.Item = MenuItem;

stories/menu.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { setOptions } from '@storybook/addon-options';
+import '../src/menu/menu.css';
+import { Menu } from '../src/index';
+
+setOptions({
+  name: 'Materialish',
+  addonPanelInRight: true,
+});
+
+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>Option four</Menu.Item>
+    <Menu.Item>Option five</Menu.Item>
+    <Menu.Item>Option six</Menu.Item>
+  </Menu>
+));