From 88ba5ecdadbc74a49f8de499d0cef43e778d82a8 Mon Sep 17 00:00:00 2001
From: brevis <brevis.ua@gmail.com>
Date: Mon, 10 Dec 2018 02:27:13 +0300
Subject: [PATCH] center icon

---
 @src/TitleInput/TitleInput.stories.tsx |  66 +++++-
 @src/TitleInput/TitleInput.tsx         |   9 +-
 @src/TitleInput/style.m.scss           |  20 +-
 package-lock.json                      | 301 +++++++++++++++++++++++++
 package.json                           |   2 +
 5 files changed, 384 insertions(+), 14 deletions(-)

diff --git a/@src/TitleInput/TitleInput.stories.tsx b/@src/TitleInput/TitleInput.stories.tsx
index f6e2f23..8afddcc 100644
--- a/@src/TitleInput/TitleInput.stories.tsx
+++ b/@src/TitleInput/TitleInput.stories.tsx
@@ -1,10 +1,12 @@
+import InsertDriveFile from '@material-ui/icons/InsertDriveFile';
 import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import { FaFile } from 'react-icons/fa';
+import { MdInsertDriveFile } from 'react-icons/md';
+import { TiDocument } from 'react-icons/ti';
 import { Field, reduxForm } from 'redux-form';
 import { length, required } from 'redux-form-validators';
-
 import { FormDecorator } from '../../.storybook/decorators';
 import { TitleInput } from './index';
 
@@ -90,4 +92,66 @@ storiesOf('Atoms/TitleInput', module)
         )}
       </div>
     );
+  })
+  .add('icon', () => {
+    return (
+      <div>
+        <div style={{ width: '300px', display: 'inline-block' }}>
+          {React.createElement(
+            MyForm({
+              label: 'No icon',
+              placeholder: '(empty)'
+            })
+          )}
+        </div>
+
+        <hr />
+
+        <div style={{ width: '300px', display: 'inline-block' }}>
+          {React.createElement(
+            MyForm({
+              icon: <FaFile size={16} />,
+              label: 'Font Awesome Icons',
+              placeholder: '(empty)'
+            })
+          )}
+        </div>
+
+        <hr />
+
+        <div style={{ width: '300px', display: 'inline-block' }}>
+          {React.createElement(
+            MyForm({
+              icon: <MdInsertDriveFile size={16} />,
+              label: 'Material Icons',
+              placeholder: '(empty)'
+            })
+          )}
+        </div>
+
+        <hr />
+
+        <div style={{ width: '300px', display: 'inline-block' }}>
+          {React.createElement(
+            MyForm({
+              icon: <TiDocument size={16} />,
+              label: 'Typeicons',
+              placeholder: '(empty)'
+            })
+          )}
+        </div>
+
+        <hr />
+
+        <div style={{ width: '300px', display: 'inline-block' }}>
+          {React.createElement(
+            MyForm({
+              icon: <InsertDriveFile fontSize={'small'} />,
+              label: 'Material UI Icons',
+              placeholder: '(empty)'
+            })
+          )}
+        </div>
+      </div>
+    );
   });
diff --git a/@src/TitleInput/TitleInput.tsx b/@src/TitleInput/TitleInput.tsx
index 0659433..8e132ac 100644
--- a/@src/TitleInput/TitleInput.tsx
+++ b/@src/TitleInput/TitleInput.tsx
@@ -169,12 +169,15 @@ class TitleInput extends React.Component<ITitleInputProps, IState> {
           </label>
         )}
         <div styleName={'input-wrapper'} style={{ height: wrapperHeight }}>
-          {icon && <div styleName="icon">{icon}</div>}
+          {icon && (
+            <div styleName="icon">
+              <div styleName="inner">{icon}</div>
+            </div>
+          )}
           <textarea
             className={cn(styles.textarea, {
               [`${classNameInput}`]: !!classNameInput,
-              [styles.bold]: bold,
-              [styles['with-icon']]: !!icon
+              [styles.bold]: bold
             })}
             {...input}
             maxLength={maxLength}
diff --git a/@src/TitleInput/style.m.scss b/@src/TitleInput/style.m.scss
index 8b7c733..d41f054 100644
--- a/@src/TitleInput/style.m.scss
+++ b/@src/TitleInput/style.m.scss
@@ -12,7 +12,7 @@ $warning: #ffc107 !default; // hover #E0A800 or #ff8484
 
 .input-wrapper {
   box-sizing: border-box;
-  display: block;
+  display: table;
   position: relative;
   width: 100%;
   &.bold {
@@ -27,6 +27,8 @@ $warning: #ffc107 !default; // hover #E0A800 or #ff8484
 }
 
 .textarea {
+  display: table-cell;
+  width: 100%;
   color: $mainColor;
   box-sizing: border-box;
   resize: none;
@@ -34,7 +36,7 @@ $warning: #ffc107 !default; // hover #E0A800 or #ff8484
   overflow-wrap: break-word;
   min-height: 32px;
   height: auto;
-  width: 100%;
+  //width: 100%;
   margin: 1px;
   padding: 4px;
   font-size: 18px;
@@ -61,14 +63,12 @@ $warning: #ffc107 !default; // hover #E0A800 or #ff8484
 }
 
 .icon {
-  position: absolute;
-  left: 0;
-  top: 0;
-  * {
-    position: absolute;
-    left: 0;
-    top: 10px;
-    max-width: 16px;
+  display: table-cell;
+  vertical-align: top;
+  .inner {
+    display: table-cell;
+    vertical-align: middle;
+    height: 40px;
   }
 }
 
diff --git a/package-lock.json b/package-lock.json
index 201a375..7605a26 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,23 @@
       "integrity": "sha1-H0XrYXv5Rj1IKywE00nZ5O2/SJI=",
       "dev": true
     },
+    "@babel/runtime": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
+      "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
+      "dev": true,
+      "requires": {
+        "regenerator-runtime": "^0.12.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==",
+          "dev": true
+        }
+      }
+    },
     "@babel/types": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.1.3.tgz",
@@ -122,6 +139,112 @@
       "integrity": "sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw==",
       "dev": true
     },
+    "@material-ui/core": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.5.1.tgz",
+      "integrity": "sha512-yMBwYV5HQ/kZjncSmzHSx4uxJCePdbq9N58Jl0tq9D1gD5fKVJY/lItnQLRlcpCzZUkGxfDhpDutvLDq58ZAkg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "7.1.2",
+        "@material-ui/utils": "^3.0.0-alpha.0",
+        "@types/jss": "^9.5.6",
+        "@types/react-transition-group": "^2.0.8",
+        "brcast": "^3.0.1",
+        "classnames": "^2.2.5",
+        "csstype": "^2.5.2",
+        "debounce": "^1.1.0",
+        "deepmerge": "^2.0.1",
+        "dom-helpers": "^3.2.1",
+        "hoist-non-react-statics": "^3.0.0",
+        "is-plain-object": "^2.0.4",
+        "jss": "^9.3.3",
+        "jss-camel-case": "^6.0.0",
+        "jss-default-unit": "^8.0.2",
+        "jss-global": "^3.0.0",
+        "jss-nested": "^6.0.1",
+        "jss-props-sort": "^6.0.0",
+        "jss-vendor-prefixer": "^7.0.0",
+        "keycode": "^2.1.9",
+        "normalize-scroll-left": "^0.1.2",
+        "popper.js": "^1.14.1",
+        "prop-types": "^15.6.0",
+        "react-event-listener": "^0.6.2",
+        "react-transition-group": "^2.2.1",
+        "recompose": "0.28.0 - 0.30.0",
+        "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.1.2.tgz",
+          "integrity": "sha512-Y3SCjmhSupzFB6wcv1KmmFucH6gDVnI30WjOcicV10ju0cZjak3Jcs67YLIXBrmZYw1xCrVeJPbycFwrqNyxpg==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "hoist-non-react-statics": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.1.0.tgz",
+          "integrity": "sha512-MYcYuROh7SBM69xHGqXEwQqDux34s9tz+sCnxJmN18kgWh6JFdTw/5YdZtqsOdZJXddE/wUpCzfEdDrJj8p0Iw==",
+          "dev": true,
+          "requires": {
+            "react-is": "^16.3.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==",
+          "dev": true
+        },
+        "warning": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
+          "integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
+    "@material-ui/icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-3.0.1.tgz",
+      "integrity": "sha512-1kNcxYiIT1x8iDPEAlgmKrfRTIV8UyK6fLVcZ9kMHIKGWft9I451V5mvSrbCjbf7MX1TbLWzZjph0aVCRf9MqQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "7.0.0",
+        "recompose": "^0.29.0"
+      }
+    },
+    "@material-ui/utils": {
+      "version": "3.0.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-3.0.0-alpha.0.tgz",
+      "integrity": "sha512-HwC/pBcPG81UP4Jh0BaH2i4wAY9aDOrvL5+B/7J6cyFlG/Wip5Li+qI+GDlk9MR3kpG8v0sxfpWA0IlQYcHK6g==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "7.1.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.1.2.tgz",
+          "integrity": "sha512-Y3SCjmhSupzFB6wcv1KmmFucH6gDVnI30WjOcicV10ju0cZjak3Jcs67YLIXBrmZYw1xCrVeJPbycFwrqNyxpg==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==",
+          "dev": true
+        }
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -743,6 +866,16 @@
       "integrity": "sha512-hy+8Sdet9JiNEZpJZWRcmT4pBz19H9dKMr/qWD1JJINBpTTts+Vbe8P+nx9vRJUlbVN4GMPAVr1F4Ff3V5U/Kg==",
       "dev": true
     },
+    "@types/jss": {
+      "version": "9.5.7",
+      "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.7.tgz",
+      "integrity": "sha512-OZimStu2QdDMtZ0h72JXqvLVbWUjXd5ZLk8vxLmfuC/nM1AabRyyGoxSufnzixrbpEcVcyy/JV5qeQu2JnjVZw==",
+      "dev": true,
+      "requires": {
+        "csstype": "^2.0.0",
+        "indefinite-observable": "^1.0.1"
+      }
+    },
     "@types/node": {
       "version": "10.3.2",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-10.3.2.tgz",
@@ -3496,6 +3629,12 @@
         "supports-color": "^5.3.0"
       }
     },
+    "change-emitter": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
+      "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU=",
+      "dev": true
+    },
     "chardet": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
@@ -4745,6 +4884,15 @@
         "regexpu-core": "^1.0.0"
       }
     },
+    "css-vendor": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz",
+      "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=",
+      "dev": true,
+      "requires": {
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.2.tgz",
@@ -4997,6 +5145,12 @@
       "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==",
       "dev": true
     },
+    "debounce": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
+      "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==",
+      "dev": true
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -5070,6 +5224,12 @@
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "dev": true
+    },
     "default-require-extensions": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-1.0.0.tgz",
@@ -8372,6 +8532,23 @@
       "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
       "dev": true
     },
+    "indefinite-observable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-1.0.1.tgz",
+      "integrity": "sha1-CZFUI8yNb36xy3iCrRNGM8mm7cM=",
+      "dev": true,
+      "requires": {
+        "symbol-observable": "1.0.4"
+      },
+      "dependencies": {
+        "symbol-observable": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.4.tgz",
+          "integrity": "sha1-Kb9hXUqnEhvdiYsi1LP5vE4qoD0=",
+          "dev": true
+        }
+      }
+    },
     "indent-string": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
@@ -8686,6 +8863,12 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=",
+      "dev": true
+    },
     "is-my-ip-valid": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz",
@@ -10180,6 +10363,62 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "9.8.7",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-9.8.7.tgz",
+      "integrity": "sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ==",
+      "dev": true,
+      "requires": {
+        "is-in-browser": "^1.1.3",
+        "symbol-observable": "^1.1.0",
+        "warning": "^3.0.0"
+      }
+    },
+    "jss-camel-case": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-6.1.0.tgz",
+      "integrity": "sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ==",
+      "dev": true,
+      "requires": {
+        "hyphenate-style-name": "^1.0.2"
+      }
+    },
+    "jss-default-unit": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz",
+      "integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg==",
+      "dev": true
+    },
+    "jss-global": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz",
+      "integrity": "sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q==",
+      "dev": true
+    },
+    "jss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-6.0.1.tgz",
+      "integrity": "sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA==",
+      "dev": true,
+      "requires": {
+        "warning": "^3.0.0"
+      }
+    },
+    "jss-props-sort": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
+      "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g==",
+      "dev": true
+    },
+    "jss-vendor-prefixer": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz",
+      "integrity": "sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==",
+      "dev": true,
+      "requires": {
+        "css-vendor": "^0.3.8"
+      }
+    },
     "keycode": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
@@ -12065,6 +12304,12 @@
       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
       "dev": true
     },
+    "normalize-scroll-left": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.1.2.tgz",
+      "integrity": "sha512-F9YMRls0zCF6BFIE2YnXDRpHPpfd91nOIaNdDgrx5YMoPLo8Wqj+6jNXHQsYBavJeXP4ww8HCt0xQAKc5qk2Fg==",
+      "dev": true
+    },
     "normalize-url": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
@@ -12746,6 +12991,12 @@
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
       "dev": true
     },
+    "popper.js": {
+      "version": "1.14.5",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.5.tgz",
+      "integrity": "sha512-fs4Sd8bZLgEzrk8aS7Em1qh+wcawtE87kRUJQhK6+LndyV1HerX7+LURzAylVaTyWIn5NTB/lyjnWqw/AZ6Yrw==",
+      "dev": true
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -15197,6 +15448,28 @@
       "integrity": "sha512-xXUbDAZkU08aAkjtUvldqbvI04ogv+a1XdHxvYuHPYKIVk/42BIOD0zSKTHAWV4+gDy3yGm283z2072rA2gdtw==",
       "dev": true
     },
+    "react-event-listener": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.4.tgz",
+      "integrity": "sha512-t7VSjIuUFmN+GeyKb+wm025YLeojVB85kJL6sSs0wEBJddfmKBEQz+CNBZ2zBLKVWkPy/fZXM6U5yvojjYBVYQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "7.0.0",
+        "prop-types": "^15.6.0",
+        "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
+          "integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "react-fuzzy": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/react-fuzzy/-/react-fuzzy-0.5.2.tgz",
@@ -15249,6 +15522,12 @@
         "is-dom": "^1.0.9"
       }
     },
+    "react-is": {
+      "version": "16.6.3",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.6.3.tgz",
+      "integrity": "sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA==",
+      "dev": true
+    },
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -15447,6 +15726,28 @@
         "resolve": "^1.1.6"
       }
     },
+    "recompose": {
+      "version": "0.29.0",
+      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.29.0.tgz",
+      "integrity": "sha512-J/qLXNU4W+AeHCDR70ajW8eMd1uroqZaECTj6qqDLPMILz3y0EzpYlvrnxKB9DnqcngWrtGwjXY9JeXaW9kS1A==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "change-emitter": "^0.1.2",
+        "fbjs": "^0.8.1",
+        "hoist-non-react-statics": "^2.3.1",
+        "react-lifecycles-compat": "^3.0.2",
+        "symbol-observable": "^1.0.4"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.5",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==",
+          "dev": true
+        }
+      }
+    },
     "recursive-readdir": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.1.tgz",
diff --git a/package.json b/package.json
index fc80590..8d931bb 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,8 @@
     "story-static": "build-storybook -o build"
   },
   "devDependencies": {
+    "@material-ui/core": "^3.5.1",
+    "@material-ui/icons": "^3.0.1",
     "@storybook/addon-actions": "3.4.7",
     "@storybook/addon-info": "3.4.7",
     "@storybook/react": "3.4.7",