Merge pull request #224 from meriadec/master

Update storybook

.circleci/config.yml

@@ -16,8 +16,8 @@ jobs:
           name: Flow typed
           command: yarn flow-typed
       - run:
-          name: Temporary remove flow definitions for react-redux
-          command: rm flow-typed/npm/react-redux_v5.x.x.js
+          name: Temporary remove broken flow definitions
+          command: rm flow-typed/npm/{react-redux_v5.x.x.js,redux_v3.x.x.js}
       - run:
           name: Lint
           command: yarn lint

src/components/RequestAmount/stories.js

@@ -4,12 +4,13 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import { number } from '@storybook/addon-knobs'
+import { translate } from 'react-i18next'
 
 import { accounts } from 'components/SelectAccount/stories'
 
 import { RequestAmount } from 'components/RequestAmount'
 
-const stories = storiesOf('Components/RequestAmount', module)
+const stories = storiesOf('Components', module)
 
 const props = {
   counterValue: 'USD',
@@ -17,8 +18,10 @@ const props = {
   account: accounts[0],
 }
 
-stories.add('basic', () => (
-  <RequestAmount
+const RequestAmountComp = translate()(RequestAmount)
+
+stories.add('RequestAmount', () => (
+  <RequestAmountComp
     {...props}
     t={k => k}
     onChange={action('onChange')}

src/components/base/InputCurrency/stories.js

@@ -8,8 +8,8 @@ import { getDefaultUnitByCoinType } from '@ledgerhq/currencies'
 
 import InputCurrency from 'components/base/InputCurrency'
 
-const stories = storiesOf('Components/InputCurrency', module)
+const stories = storiesOf('Components', module)
 
 const unit = getDefaultUnitByCoinType(1)
 
-stories.add('basic', () => <InputCurrency unit={unit} onChange={action('onChange')} />)
+stories.add('InputCurrency', () => <InputCurrency unit={unit} onChange={action('onChange')} />)

src/components/base/Modal/stories.js

@@ -1,10 +1,12 @@
 // @flow
 
-import React, { Fragment } from 'react'
+import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { boolean } from '@storybook/addon-knobs'
 
-import { Modal, ModalBody } from 'components/base/Modal'
+import { Modal, ModalBody, ModalTitle, ModalContent, ModalFooter } from 'components/base/Modal'
+import Box from 'components/base/Box'
+import Button from 'components/base/Button'
 
 const stories = storiesOf('Components', module)
 
@@ -14,11 +16,14 @@ stories.add('Modal', () => {
     <Modal
       isOpened={isOpened}
       render={({ onClose }) => (
-        <Fragment>
-          <ModalBody>Hey!</ModalBody>
-          <ModalBody onClose={onClose}>Hoy!</ModalBody>
-          <ModalBody>Hu!</ModalBody>
-        </Fragment>
+        <ModalBody onClose={onClose}>
+          <ModalTitle>{'modal title'}</ModalTitle>
+          <ModalContent>{'this is the modal content'}</ModalContent>
+          <ModalFooter horizontal align="center">
+            <Box grow>{'modal footer'}</Box>
+            <Button primary>{'Next'}</Button>
+          </ModalFooter>
+        </ModalBody>
       )}
     />
   )

src/styles/global.js

@@ -3,11 +3,15 @@
 /* eslint-disable no-unused-expressions */
 
 import { injectGlobal } from 'styled-components'
+import omitBy from 'lodash/omitBy'
 
 import { fontFace } from 'styles/helpers'
 import { radii, colors } from 'styles/theme'
 import reset from './reset'
 
+const { STORYBOOK_ENV, NODE_ENV } = process.env
+const COPYRIGHTED_FONTS = ['Museo Sans']
+
 const fonts = {
   'Open Sans': [
     {
@@ -73,6 +77,11 @@ const fonts = {
 }
 
 function transformFonts(allFonts) {
+  allFonts = omitBy(
+    allFonts,
+    (_, key: string) =>
+      NODE_ENV === 'production' && STORYBOOK_ENV && COPYRIGHTED_FONTS.includes(key),
+  )
   return Object.keys(allFonts)
     .map(name => {
       const fonts = allFonts[name]