Adding IconButton Component and Story

src/icon-button/icon-button.css

@@ -0,0 +1,60 @@
+.mt-iconButton {
+  --_mt-iconButton-color: var(--mt-iconButton-color, #6d6c6c);
+  --_mt-iconButton-disabledColor: var(
+    --mt-iconButton-disabledColor,
+    rgba(0, 0, 0, 0.38)
+  );
+
+  font-family: var(--mt-fontFamily, 'Roboto');
+  font-size: calc(1.5 * var(--mt-baseFontSize, 1rem));
+  border: none;
+  position: relative;
+  width: 2em;
+  height: 2em;
+  border-radius: 2em;
+  cursor: pointer;
+  outline: none;
+  background-color: transparent;
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
+  touch-action: manipulation;
+  z-index: 0;
+
+  --mt-ripple-color: var(--_mt-iconButton-color);
+  --mt-ripple-spread: 1.2;
+}
+
+.mt-iconButton:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--_mt-iconButton-color);
+  opacity: 0;
+  border-radius: 2em;
+  z-index: -1;
+}
+
+.mt-iconButton:hover:after,
+.mt-iconButton:focus:after {
+  opacity: 0.1;
+}
+
+.mt-iconButton > svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  fill: var(--_mt-iconButton-color);
+  pointer-events: none;
+}
+
+.mt-iconButton:disabled > svg {
+  fill: var(--_mt-iconButton-disabledColor);
+}
+
+.mt-iconButton:disabled:hover:after,
+.mt-iconButton:disabled:focus:after {
+  opacity: 0;
+}

src/icon-button/icon-button.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import Ripple from '../ripple/ripple';
+
+export default class IconButton extends Component {
+  render() {
+    const { className = '', ripple = true, children, ...props } = this.props;
+    return (
+      <button
+        className={`mt-iconButton ${className}`}
+        depth={1}
+        {...props}
+        onClick={this.onClick}>
+        {children}
+        {ripple && <Ripple ref={this.getRippleRef} />}
+      </button>
+    );
+  }
+
+  getRippleRef = component => {
+    this.rippleComponent = component;
+  };
+
+  onClick = e => {
+    const { onClick } = this.props;
+
+    if (this.rippleComponent) {
+      this.rippleComponent.onClick(e);
+    }
+
+    if (onClick) {
+      onClick(e);
+    }
+  };
+}

src/index.js

@@ -16,6 +16,7 @@ import Menu from './menu/menu';
 import Snackbar from './snackbar/snackbar';
 import Table from './table/table';
 import Input from './input/input';
+import IconButton from './icon-button/icon-button';
 
 export {
   Avatar,
@@ -36,4 +37,5 @@ export {
   Snackbar,
   Table,
   Input,
+  IconButton,
 };

stories/icon-button.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, boolean } from '@storybook/addon-knobs/react';
+import { action } from '@storybook/addon-actions';
+import { setOptions } from '@storybook/addon-options';
+import '../src/icon-button/icon-button.css';
+import '../src/ripple/ripple.css';
+import { IconButton } from '../src/index';
+
+setOptions({
+  name: 'Materialish',
+  addonPanelInRight: true,
+});
+
+storiesOf('Icon Button', module)
+  .addDecorator(withKnobs)
+  .add('Regular', () => (
+    <IconButton
+      onClick={action('clicked')}
+      disabled={boolean('Disabled', false, 'PROPS')}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        viewBox="0 0 48 48">
+        <path d="M44 11.44l-9.19-7.71-2.57 3.06 9.19 7.71L44 11.44zM15.76 6.78l-2.57-3.06L4 11.43l2.57 3.06 9.19-7.71zM23.99 8C14.04 8 6 16.06 6 26s8.04 18 17.99 18S42 35.94 42 26 33.94 8 23.99 8zM24 40c-7.73 0-14-6.27-14-14s6.27-14 14-14 14 6.27 14 14-6.26 14-14 14zm-2.93-10.95l-4.24-4.24-2.12 2.12 6.36 6.36 12.01-12.01-2.12-2.12-9.89 9.89z" />
+      </svg>
+    </IconButton>
+  ));