feat(icon): Icon component

The `Icon` component should encompess all the necessary icons for the app.
We are wrapping the FontAwesomeIcon component. However, some icons we need are not part of the free set of FontAwesomeIcons, so, for now, those icons contains the `faQuestionCircle` icon, and will be replaced with svgs asap.
The icons that do not have equivalents, or otherwise need replacing, are: boolean, object, array, integer, number, string, null, commit

app/components/chrome/Icon.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react'
+import classNames from 'classnames'
+
+import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome'
+import { 
+  faQuestionCircle, 
+  faFont, 
+  faHashtag, 
+  faCode, 
+  faGlasses, 
+  faLock, 
+  faTh, 
+  faSearch,
+  faQuestion,
+  faComment,
+  faCloudUploadAlt,
+  faFolderOpen,
+  faArchive,
+  faTags,
+  faPlus,
+  faDownload,
+  faFileAlt,
+  faCopy
+} from '@fortawesome/free-solid-svg-icons'
+
+interface IconProps {
+  // name of the icon
+  icon: string
+  // size sm: .875em
+  // md: 1.33em
+  // lg: 2em
+  size: 'sm' | 'md' | 'lg'
+  color: 'light' | 'medium' | 'dark'
+}
+
+const icons: {[key:  string]: any} = {
+  'search': faSearch,
+  'any': faQuestion,
+  'string': faFont,
+  'integer': faHashtag,
+  'number': faHashtag,
+  'boolean': faQuestionCircle,
+  'null': faQuestionCircle,
+  'object': faQuestionCircle,
+  'array': faQuestionCircle,
+  'chat': faComment,
+  'publish': faCloudUploadAlt,
+  'openInFinder': faFolderOpen,
+  'structure': faTh,
+  'unknown': faQuestionCircle,
+  'moreInfo': faQuestionCircle,
+  'body': faArchive,
+  'meta': faTags,
+  'create': faPlus,
+  'clone': faDownload,
+  'download': faDownload,
+  'dataset': faFileAlt,
+  'datasets': faCopy,
+  'readme': faGlasses,
+  'commit': faQuestionCircle,
+  'lock': faLock,
+  'transform': faCode,
+}
+
+export const iconsList = Object.keys(icons)
+
+const Icon: React.FunctionComponent<IconProps> = ({
+  icon = 'any',
+  size = 'md',
+  color = 'light'
+}) => {
+
+  const sizes: {[key: string]: FontAwesomeIconProps['size']} = {
+    'sm': 'sm',
+    'md': 'lg',
+    'lg': '2x'
+  }
+
+  return <FontAwesomeIcon size={sizes[size]} icon={icons[icon]} className={`icon-${color}`}/>
+}
+
+export default Icon

app/scss/4.0/icons.scss

@@ -0,0 +1,11 @@
+.icon-dark {
+  color: #000000;
+}
+
+.icon-medium {
+  color: #B3B3B3;
+}
+
+.icon-light {
+  color: #ffffff;
+}

app/scss/style.scss

@@ -38,4 +38,6 @@
 @import "sidebar-layout";
 
 @import '~easymde/dist/easymde.min.css';
-@import "dialog"
+@import "dialog";
+
+@import "4.0/icons";

stories/2-Icons.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import Icon, { iconsList } from '../app/components/chrome/Icon'
+
+export default {
+  title: 'Icons',
+  parameters: {
+    notes: `listing all available icons`
+  }
+}
+
+export const allIcons = () => {
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+      {iconsList.map((icon, i) => {
+        return (
+          <div key={i} style={{ width: 150, margin: 15, display: 'flex', flexDirection: 
+          'column', justifyContent: 'center', alignItems: 'space-between' }}>
+            <p>{icon}</p>
+            <p style={{display: 'flex', justifyContent:'space-between'}}>
+              <Icon icon={icon} size='sm' color='dark' />
+              <Icon icon={icon} size='sm' color='medium' />
+              <span style={{background: '#000'}}><Icon icon={icon} size='sm' color='light' /></span>
+            </p>
+            <p style={{display: 'flex', justifyContent:'space-between'}}>
+              <Icon icon={icon} size='md' color='dark' />
+              <Icon icon={icon} size='md' color='medium' />
+              <span style={{background: '#000'}}><Icon icon={icon} size='md' color='light' /></span>
+            </p>
+            <p style={{display: 'flex', justifyContent:'space-between'}}>
+              <Icon icon={icon} size='lg' color='dark' />
+              <Icon icon={icon} size='lg' color='medium' />
+              <div style={{background: '#000', display: 'inline-block'}}><Icon icon={icon} size='lg' color='light' /></div>
+            </p>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+allIcons.story = {
+  name: 'All Icons',
+  parameters: { note: 'each icon in small and dark' }
+}