feat(atoms): expand Icon component. add babel svg plugin

.babelrc

@@ -3,5 +3,5 @@
     "react-app",
     "flow"
   ],
-  "plugins": ["flow-react-proptypes", "jsx-control-statements"]
-}
+  "plugins": ["inline-react-svg", "flow-react-proptypes", "jsx-control-statements"]
+}

package.json

@@ -34,6 +34,7 @@
     "babel-eslint": "7.2.3",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-flow-react-proptypes": "^23.0.0",
+    "babel-plugin-inline-react-svg": "^0.5.2",
     "babel-plugin-jsx-control-statements": "^3.2.8",
     "babel-preset-flow": "^6.23.0",
     "babel-preset-react-app": "^3.1.1",

src/atoms/typography/Icon/Icon.js

@@ -1,32 +1,71 @@
+// @flow
+
 import React from 'react';
 
 import { createStyledTag, createTheme } from 'utils';
 import * as glyphs from './glyphs';
 
-type IconProps = {|
+type IconProps = {
+  /** icon name */
   name: string,
-|};
+  /** icon color */
+  color?: 'red' | 'green' | 'blue' | 'primary',
+  /** icon size */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'stretch',
+};
 
 const name = 'icon';
 
-const theme = createTheme(name, {
+const theme : Theme<IconProps> = createTheme(name, (colors: *): * => ({
   modifiers: {
+    color: {
+      primary: { color: colors.PRIMARY },
+      red: { color: colors.RED },
+      green: { color: colors.GREEN },
+      blue: { color: colors.BLUE },
+    },
+    size: {
+      xs: {
+        width: '1.4rem',
+        height: '1.4rem',
+      },
+      sm: {
+        width: '2.4rem',
+        height: '2.4rem',
+      },
+      md: {
+        width: '3.6rem',
+        height: '3.6rem',
+      },
+      lg: {
+        width: '4.8rem',
+        height: '4.8rem',
+      },
+      stretch: {
+        width: '100%',
+        height: '100%',
+      },
+    },
   },
-  defaults: {
-  },
-});
+  defaults: {},
+}));
 
-const StyledTag = createStyledTag(name, {
+const IconTag = createStyledTag(name, {
   display: 'inline-flex',
 });
 
-function Icon({ name, rest }: IconProps) {
+const Icon = ({ name, ...rest }: IconProps) => {
   const Glyph = glyphs[name];
 
   return (
-    <StyledTag { ...rest } tagName="div">
-      <Glyph />
-    </StyledTag>
+    <IconTag { ...rest } tagName="div">
+      <Glyph width="100%" height="100%" />
+    </IconTag>
   );
-}
+};
+
+Icon.defaultProps = {
+  size: 'sm',
+};
+
 export { Icon, theme };

src/atoms/typography/Icon/Icon.stories.js

@@ -3,11 +3,26 @@ import React from 'react';
 export default (asStory) => {
   asStory('ATOMS/TYPOGRAPHY/Icon', module, (story, { Icon }) => {
     story
-      .add('with default modifiers', () => (
-        <React.Fragment>
+      .add('all icons', () => (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
           <Icon name="ChevronDown" />
-        </React.Fragment>
+          <Icon name="Check" />
+        </div>
+      ))
+      .add('with custom color', () => (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <Icon name="Check" color="primary" />
+          <Icon name="Check" color="green" />
+          <Icon name="Check" color="blue" />
+        </div>
+      ))
+      .add('with custom sizes', () => (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <Icon name="Check" size="xs" />
+          <Icon name="Check" size="sm" />
+          <Icon name="Check" size="md" />
+          <Icon name="Check" size="lg" />
+        </div>
       ));
   });
 };
-

src/atoms/typography/Icon/glyphs/index.js

@@ -1 +1,12 @@
-export { ChevronDown } from './ChevronDown';
+// @flow
+// eslint-disable-next-line no-unused-vars
+import React from 'react';
+
+import Check from './Check.svg';
+import ChevronDown from './ChevronDown.svg';
+
+export {
+  ChevronDown,
+  Check,
+};
+

src/atoms/typography/Icon/index.js

@@ -1 +1,3 @@
+// @flow
+
 export { Icon, theme } from './Icon';

yarn.lock

@@ -997,6 +997,17 @@ babel-plugin-flow-react-proptypes@^23.0.0:
     babel-traverse "^6.25.0"
     babel-types "^6.25.0"
 
+babel-plugin-inline-react-svg@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-inline-react-svg/-/babel-plugin-inline-react-svg-0.5.2.tgz#f4c9ea5384e8d08a7a4f96a19f22a5eab0ddf3a9"
+  dependencies:
+    babel-template "^6.15.0"
+    babel-traverse "^6.15.0"
+    babylon "^6.10.0"
+    lodash.isplainobject "^4.0.6"
+    resolve-from "^2.0.0"
+    svgo "^0.7.0"
+
 babel-plugin-istanbul@^4.1.5:
   version "4.1.6"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45"
@@ -1670,7 +1681,7 @@ babel-standalone@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-standalone/-/babel-standalone-6.26.0.tgz#15fb3d35f2c456695815ebf1ed96fe7f015b6886"
 
-babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.25.0, babel-template@^6.26.0:
+babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.25.0, babel-template@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
   dependencies:
@@ -1680,7 +1691,7 @@ babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.25.0, babel-te
     babylon "^6.18.0"
     lodash "^4.17.4"
 
-babel-traverse@^6.18.0, babel-traverse@^6.23.1, babel-traverse@^6.24.1, babel-traverse@^6.25.0, babel-traverse@^6.26.0:
+babel-traverse@^6.15.0, babel-traverse@^6.18.0, babel-traverse@^6.23.1, babel-traverse@^6.24.1, babel-traverse@^6.25.0, babel-traverse@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
   dependencies:
@@ -1707,7 +1718,7 @@ [email protected]:
   version "7.0.0-beta.31"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.31.tgz#7ec10f81e0e456fd0f855ad60fa30c2ac454283f"
 
-babylon@^6.17.0, babylon@^6.18.0:
+babylon@^6.10.0, babylon@^6.17.0, babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
 
@@ -7904,6 +7915,10 @@ resolve-from@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
 
+resolve-from@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-2.0.0.tgz#9480ab20e94ffa1d9e80a804c7ea147611966b57"
+
 resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"