Add icon in Storybook

.eslintrc

@@ -13,8 +13,8 @@
   "rules": {
     "camelcase": 0,
     "import/no-extraneous-dependencies": 0,
-    "import/prefer-default-export": 0,
     "import/no-named-as-default": 0,
+    "import/prefer-default-export": 0,
     "jsx-a11y/anchor-is-valid": 0,
     "jsx-a11y/label-has-for": 0,
     "new-cap": 0,
@@ -28,6 +28,7 @@
     "react/forbid-prop-types": 0,
     "react/jsx-curly-brace-presence": 0,
     "react/jsx-filename-extension": 0,
+    "react/jsx-no-target-blank": 0,
     "react/prefer-stateless-function": 0,
   },
   "settings": {
@@ -35,7 +36,7 @@
       "babel-module": {},
     },
     "flowtype": {
-      "onlyFilesWithFlowAnnotation": true
+      "onlyFilesWithFlowAnnotation": true,
     }
   },
 }

package.json

@@ -39,7 +39,6 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.3",
-    "@fortawesome/fontawesome-free-brands": "^5.0.6",
     "@fortawesome/fontawesome-free-regular": "^5.0.6",
     "@fortawesome/fontawesome-free-solid": "^5.0.6",
     "@fortawesome/react-fontawesome": "^0.0.17",

src/components/base/Icon.js → src/components/base/Icon/index.js

@@ -12,6 +12,6 @@ const Container = styled.span`
 
 export default ({ name, ...props }: { name: string }) => (
   <Container {...props}>
-    <FontAwesomeIcon icon={name} fixedWidth />
+    <FontAwesomeIcon icon={name} />
   </Container>
 )

src/components/base/Icon/stories.js

@@ -0,0 +1,36 @@
+// @flow
+
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { text, number } from '@storybook/addon-knobs'
+
+import Icon from 'components/base/Icon'
+
+const stories = storiesOf('Icon', module)
+
+const Wrapper = ({ children }: { children: any }) => (
+  <div>
+    <div style={{ opacity: 0.2 }}>
+      (Change the icon value with{' '}
+      <a
+        href="https://fontawesome.com/icons?d=gallery&s=regular,solid&m=free"
+        target="_blank"
+        style={{ cursor: 'pointer' }}
+      >
+        FontAwesome
+      </a>{' '}
+      icon)
+    </div>
+    {children}
+  </div>
+)
+
+stories.add('basic', () => (
+  <Wrapper>
+    <Icon
+      color={text('color', 'black')}
+      fontSize={number('fontSize', 5)}
+      name={text('icon', 'check')}
+    />
+  </Wrapper>
+))

yarn.lock

@@ -82,12 +82,6 @@
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.2.tgz#d6aa075058f0c984d6e2ebcbc0052c1f7f9bea72"
 
-"@fortawesome/fontawesome-free-brands@^5.0.6":
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-brands/-/fontawesome-free-brands-5.0.6.tgz#fee054ce0c4d74019020f6353ca85cfb408de719"
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.1.2"
-
 "@fortawesome/fontawesome-free-regular@^5.0.6":
   version "5.0.6"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-regular/-/fontawesome-free-regular-5.0.6.tgz#fafc624025a247c1a1bbb5080b9902a490cd79f5"
@@ -7345,14 +7339,14 @@ react-fuzzy@^0.5.1:
     fuse.js "^3.0.1"
     prop-types "^15.5.9"
 
-react-hot-loader@^4.0.0-beta.17:
-  version "4.0.0-beta.17"
-  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.0.0-beta.17.tgz#484ff64221fc456698d6a24cd2a107b66f024eaa"
+react-hot-loader@^4.0.0-beta.18:
+  version "4.0.0-beta.18"
+  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.0.0-beta.18.tgz#5a3d1b5bd813633380b88c0c660019dbf638975d"
   dependencies:
     fast-levenshtein "^2.0.6"
     global "^4.3.0"
     hoist-non-react-statics "^2.3.1"
-    react-stand-in "^4.0.0-beta.17"
+    react-stand-in "^4.0.0-beta.18"
 
 react-html-attributes@^1.3.0:
   version "1.4.1"
@@ -7472,9 +7466,9 @@ react-split-pane@^0.1.74:
     prop-types "^15.5.10"
     react-style-proptype "^3.0.0"
 
-react-stand-in@^4.0.0-beta.17:
-  version "4.0.0-beta.17"
-  resolved "https://registry.yarnpkg.com/react-stand-in/-/react-stand-in-4.0.0-beta.17.tgz#c65216f5109ae9db2a961812a96ea5a5e416184b"
+react-stand-in@^4.0.0-beta.18:
+  version "4.0.0-beta.18"
+  resolved "https://registry.yarnpkg.com/react-stand-in/-/react-stand-in-4.0.0-beta.18.tgz#67d83309ae5d95526a2d1124beaa7ab093085cb2"
   dependencies:
     shallowequal "^1.0.2"