feat(#95): added stories for async components

src/ui/async/AsyncContainer.stories.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { storiesOf } from '@storybook/react';
+
+import AsyncContainer from './AsyncContainer';
+import { Colors } from '../../styles';
+
+import { baseName, sharedKnobs } from './async.stories';
+
+const Styles = {
+  Background: styled.div`
+    background-color: ${Colors.ColorsPalette.White};
+    padding: 3rem;
+  `,
+};
+
+storiesOf(`${baseName}/AsyncContainer`)
+  .add('default', () => (<Styles.Background>
+    <AsyncContainer loading={sharedKnobs.getLoading()}>
+      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+    </AsyncContainer>
+  </Styles.Background>));

src/ui/async/AsyncImage.jsx

@@ -11,7 +11,7 @@ export const StyledAsyncImage = styled(Box)`
   transition: all 0.5s ease;
   img {
     opacity: ${props => props.loaded ? '1' : '0'};
-    display: ${props => props.loaded || props.neverHideImg ? 'flex' : 'none'};
+    display: ${props => (props.loaded || props.neverHideImg) ? 'flex' : 'none'};
   }
 `;
 

src/ui/async/AsyncImage.stories.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { boolean } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+
+import AsyncImage from './AsyncImage';
+
+import { baseName, sharedKnobs } from './async.stories';
+
+storiesOf(`${baseName}/AsyncImage`)
+  .add('default', () => (
+    <AsyncImage
+      src={sharedKnobs.getImage()[0]}
+      onLoad={action('onLoad')}
+    />
+  ))
+  .add('with never hide img enabled', () => (
+    <AsyncImage
+      src={sharedKnobs.getImage()[0]}
+      onLoad={action('onLoad')}
+      neverHideImg={boolean('neverHideImg', true)}
+    />
+  ));

src/ui/async/LoadingIndicator.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { color } from '@storybook/addon-knobs';
+
+import LoadingIndicator from './LoadingIndicator';
+import { Colors } from '../../styles';
+
+import { baseName, sharedKnobs } from './async.stories';
+
+storiesOf(`${baseName}/LoadingIndicator`, module)
+  .add('default', () => (
+    <LoadingIndicator
+      size={sharedKnobs.getSize()}
+      color={{
+        light: color('Light color', Colors.Blue.Light),
+        default: color('Default color', Colors.Blue.Default),
+        dark: color('Dark color', Colors.Blue.Dark),
+      }}
+    />
+  ));

src/ui/async/async.stories.js

@@ -0,0 +1,9 @@
+import { boolean, files, number } from '@storybook/addon-knobs';
+
+export const baseName = 'Async';
+
+export const sharedKnobs = {
+  getLoading: () => boolean('Loading', true),
+  getImage: () => files('Src (image)', 'image/*', []),
+  getSize: () => number('Size', 100),
+};