📚 Update storybook setup

gilbarbara · Oct 28, 2018 · 68d74fb · 68d74fb
1 parent ed4c138
commit 68d74fb
Show file tree

Hide file tree

Showing 28 changed files with 297 additions and 235 deletions.
diff --git a/stories/Alert.stories.js b/stories/Alert.stories.js
@@ -6,16 +6,16 @@ import { withKnobs, text, select, boolean } from '@storybook/addon-knobs/react';
 import { Alert, Box, Flex, Heading } from '../src';
 import { sizeOptions, variantOptions } from '../src/utils/options';
 
-import { SVG, View } from './helpers/components';
+import { SVG, ViewCheckbox } from './helpers/components';
 import { backgroundAddon, capitalize } from './helpers/extras';
 
 storiesOf('Alert', module)
   .addDecorator(backgroundAddon)
   .addDecorator(withKnobs)
   .add('default', withInfo({
-    propTablesExclude: [View, Heading],
+    propTablesExclude: [ViewCheckbox, Heading],
   })(() => (
-    <View direction="column" hideCheckbox>
+    <ViewCheckbox>
       <Alert
         alignHorizontal={select('Align Horizontal', ['left', 'center', 'right'], 'left')}
         outline={boolean('Outline', false)}
@@ -24,10 +24,10 @@ storiesOf('Alert', module)
       >
         {text('Children', 'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.')}
       </Alert>
-    </View>
+    </ViewCheckbox>
   )))
   .add('with child components', () => (
-    <View direction="column" hideCheckbox>
+    <ViewCheckbox>
       <Alert
         alignHorizontal={select('Align Horizontal', ['left', 'center', 'right'], 'left')}
         outline={boolean('Outline', false)}
@@ -40,28 +40,28 @@ storiesOf('Alert', module)
         </Flex>
         <Box mt={1} pt={1} borderTop="1px solid #fff">Footer</Box>
       </Alert>
-    </View>
+    </ViewCheckbox>
   ))
   .add('with size', () => (
-    <View>
+    <ViewCheckbox direction="column">
       <Alert size="xs">Alert XS</Alert>
       <Alert size="sm">Alert SM</Alert>
       <Alert size="md">Alert MD</Alert>
       <Alert size="lg">Alert LG</Alert>
       <Alert size="xl">Alert XL</Alert>
-    </View>
+    </ViewCheckbox>
   ))
   .add('with variant', () => (
-    <View direction="column">
+    <ViewCheckbox>
       {variantOptions.map((d, i) => (
         <Alert key={i} variant={d}>{capitalize(d)}</Alert>
       ))}
-    </View>
+    </ViewCheckbox>
   ))
   .add('with outline', () => (
-    <View>
+    <ViewCheckbox>
       {variantOptions.map((d, i) => (
         <Alert key={i} outline variant={d}>{capitalize(d)}</Alert>
       ))}
-    </View>
+    </ViewCheckbox>
   ));
diff --git a/stories/Badge.stories.js b/stories/Badge.stories.js
@@ -7,71 +7,73 @@ import { sizeOptions, variantOptions } from '../src/utils/options';
 import { backgroundAddon, capitalize } from './helpers/extras';
 
 import { Badge, Button, Heading } from '../src';
-import { SVG, View } from './helpers/components';
+import { SVG, ViewCheckbox } from './helpers/components';
 
 storiesOf('Badge', module)
   .addDecorator(backgroundAddon)
   .addDecorator(withKnobs)
   .add('default', withInfo({
-    propTablesExclude: [View],
+    propTablesExclude: [ViewCheckbox],
   })(() => (
-    <View>
+    <ViewCheckbox>
       <Badge
         outline={boolean('Outline', false)}
         size={select('Size', sizeOptions, 'md')}
         variant={select('Variant', variantOptions, 'primary')}
       >
         {text('Children', 'badge')}
       </Badge>
-    </View>
+    </ViewCheckbox>
   )))
   .add('with Heading', () => (
-    <View direction="column">
-      <Heading as="h1" gutterBottom>Example heading <Badge>New</Badge></Heading>
-      <Heading as="h2" gutterBottom>Example heading <Badge>New</Badge></Heading>
-      <Heading as="h3" gutterBottom>Example heading <Badge>New</Badge></Heading>
-      <Heading as="h4" gutterBottom>Example heading <Badge>New</Badge></Heading>
-      <Heading as="h5" gutterBottom>Example heading <Badge>New</Badge></Heading>
-      <Heading as="h6" gutterBottom>Example heading <Badge>New</Badge></Heading>
-    </View>
+    <ViewCheckbox direction="column">
+      <div>
+        <Heading as="h1">Example heading <Badge>New</Badge></Heading>
+        <Heading as="h2">Example heading <Badge>New</Badge></Heading>
+        <Heading as="h3">Example heading <Badge>New</Badge></Heading>
+        <Heading as="h4">Example heading <Badge>New</Badge></Heading>
+        <Heading as="h5">Example heading <Badge>New</Badge></Heading>
+        <Heading as="h6">Example heading <Badge>New</Badge></Heading>
+      </div>
+    </ViewCheckbox>
   ))
   .add('with Button', () => (
-    <View direction="column">
+    <ViewCheckbox>
       <Button size="xs">Notifications <Badge variant="light">4</Badge></Button>
       <Button size="sm">Notifications <Badge variant="light">4</Badge></Button>
       <Button size="md">Notifications <Badge variant="light">4</Badge></Button>
       <Button size="lg">Notifications <Badge variant="light">4</Badge></Button>
       <Button size="xl">Notifications <Badge variant="light">4</Badge></Button>
-    </View>
+    </ViewCheckbox>
   ))
   .add('with size', () => (
-    <View>
+    <ViewCheckbox>
       <Badge size="xs">Badge XS</Badge>
       <Badge size="sm">Badge SM</Badge>
       <Badge size="md">Badge MD</Badge>
       <Badge size="lg">Badge LG</Badge>
       <Badge size="xl">Badge XL</Badge>
-    </View>
+    </ViewCheckbox>
   ))
   .add('with variant', () => (
-    <View>
+    <ViewCheckbox>
       {variantOptions.map((d, i) => (
         <Badge key={i} variant={d}>{capitalize(d)}</Badge>
       ))}
-    </View>
+    </ViewCheckbox>
   ))
   .add('with outline', () => (
-    <View>
+    <ViewCheckbox>
       {variantOptions.map((d, i) => (
         <Badge key={i} outline variant={d}>{capitalize(d)}</Badge>
       ))}
-    </View>
+    </ViewCheckbox>
   ))
   .add('with icon', () => (
-    <View>
+    <ViewCheckbox>
       <Badge>
         <SVG width="10px" height="10px" />{' '}
         <span>Bad</span>
       </Badge>
-    </View>
+    </ViewCheckbox>
   ));
diff --git a/stories/Box.stories.js b/stories/Box.stories.js
@@ -4,16 +4,16 @@ import { withInfo } from '@storybook/addon-info';
 import { withKnobs, select, text, number } from '@storybook/addon-knobs/react';
 
 import { Box } from '../src';
-import { View } from './helpers/components';
+import { ViewCheckbox } from './helpers/components';
 import { backgroundAddon } from './helpers/extras';
 
 storiesOf('Box', module)
   .addDecorator(backgroundAddon)
   .addDecorator(withKnobs)
   .add('default', withInfo({
-    propTablesExclude: [View],
+    propTablesExclude: [ViewCheckbox],
   })(() => (
-    <View skipSpacer>
+    <ViewCheckbox skipSpacer>
       <Box
         bg={text('BG Color', '#eee')}
         color={text('Color', '#f04')}
@@ -25,5 +25,5 @@ storiesOf('Box', module)
       >
         {text('Children', 'This is a box')}
       </Box>
-    </View>
+    </ViewCheckbox>
   )));
diff --git a/stories/Button.stories.js b/stories/Button.stories.js
@@ -1,24 +1,21 @@
 import React from 'react';
-
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withInfo } from '@storybook/addon-info';
 import { withKnobs, text, select, boolean } from '@storybook/addon-knobs/react';
 
 import { Button } from '../src';
 import { sizeOptions, variantOptions } from '../src/utils/options';
-import { SVG, View } from './helpers/components';
+import { SVG, ViewCheckbox } from './helpers/components';
 import { backgroundAddon, capitalize } from './helpers/extras';
 
-const stories = storiesOf('Button', module);
-
-stories
+storiesOf('Button', module)
   .addDecorator(backgroundAddon)
   .addDecorator(withKnobs)
   .add('default', withInfo({
-    propTablesExclude: [View],
+    propTablesExclude: [ViewCheckbox],
   })(() => (
-    <View>
+    <ViewCheckbox>
       <Button
         animate={boolean('Animate', false)}
         block={boolean('Block', false)}
@@ -31,40 +28,56 @@ stories
       >
         {text('Children', 'Click here now')}
       </Button>
-    </View>
+    </ViewCheckbox>
   )))
   .add('with size', () => (
-    <View>
+    <ViewCheckbox>
       <Button onClick={action('clicked')} size="xs">Button XS</Button>
       <Button onClick={action('clicked')} size="sm">Button SM</Button>
       <Button onClick={action('clicked')} size="md">Button MD</Button>
       <Button onClick={action('clicked')} size="lg">Button LG</Button>
       <Button onClick={action('clicked')} size="xl">Button XL</Button>
-    </View>
+    </ViewCheckbox>
   ))
   .add('with as', () => (
-    <View>
+    <ViewCheckbox>
       <Button as="a" onClick={action('clicked')} href="https://amaro.com" target="_blank">Anchor</Button>
       <Button as="span" onClick={action('clicked')}>Span</Button>
       <Button as="label" onClick={action('clicked')}>Label</Button>
-    </View>
+    </ViewCheckbox>
   ))
   .add('with variant', () => (
-    <View>
+    <ViewCheckbox>
       {variantOptions.map((d, i) => (
-        <Button key={i} variant={d}>{capitalize(d)}</Button>
+        <Button
+          key={i}
+          variant={d}
+          disabled={boolean('Disabled', false)}
+          onClick={action('clicked')}
+          outline={boolean('Outline', false)}
+        >
+          {capitalize(d)}
+        </Button>
       ))}
-    </View>
+    </ViewCheckbox>
   ))
   .add('with outline', () => (
-    <View>
+    <ViewCheckbox>
       {variantOptions.map((d, i) => (
-        <Button key={i} outline variant={d}>{capitalize(d)}</Button>
+        <Button
+          key={i}
+          disabled={boolean('Disabled', false)}
+          onClick={action('clicked')}
+          outline
+          variant={d}
+        >
+          {capitalize(d)}
+        </Button>
       ))}
-    </View>
+    </ViewCheckbox>
   ))
   .add('with icons', () => (
-    <View>
+    <ViewCheckbox>
       <Button onClick={action('clicked')}>
         <span role="img" aria-label="so cool" style={{ marginRight: 5 }}>😀</span>
         <span>COOL</span>
@@ -77,12 +90,12 @@ stories
         <span style={{ marginRight: 5 }}>SUPER</span>
         <span role="img" aria-label="fresh"><SVG /></span>
       </Button>
-    </View>
+    </ViewCheckbox>
   ))
   .add('with animation', () => (
-    <View>
+    <ViewCheckbox>
       <Button onClick={action('clicked')} animate>Waiting</Button>
       <Button onClick={action('clicked')} variant="success" animate>Loading</Button>
       <Button onClick={action('clicked')} variant="indigo" animate>Running</Button>
-    </View>
+    </ViewCheckbox>
   ));
diff --git a/stories/ButtonGroup.stories.js b/stories/ButtonGroup.stories.js
@@ -6,16 +6,16 @@ import { withKnobs, select } from '@storybook/addon-knobs/react';
 import { Button, ButtonGroup } from '../src';
 import { sizeOptions, variantOptions } from '../src/utils/options';
 
-import { View } from './helpers/components';
+import { ViewCheckbox } from './helpers/components';
 import { backgroundAddon } from './helpers/extras';
 
 storiesOf('ButtonGroup', module)
   .addDecorator(backgroundAddon)
   .addDecorator(withKnobs)
   .add('default', withInfo({
-    propTablesExclude: [Button, View],
+    propTablesExclude: [Button, ViewCheckbox],
   })(() => (
-    <View skipSpacer hideCheckbox>
+    <ViewCheckbox skipSpacer>
       <ButtonGroup
         size={select('Size', sizeOptions, 'md')}
         variant={select('Variant', variantOptions, 'primary')}
@@ -25,5 +25,5 @@ storiesOf('ButtonGroup', module)
         <Button outline>Third</Button>
         <Button outline>Forth</Button>
       </ButtonGroup>
-    </View>
+    </ViewCheckbox>
   )));
diff --git a/stories/Code.stories.js b/stories/Code.stories.js
@@ -13,9 +13,9 @@ storiesOf('Code', module)
   .add('default', withInfo({
     propTablesExclude: [View],
   })(() => (
-    <View hideCheckbox skipSpacer>
+    <View skipSpacer>
       <Code>
-        {text('Children', '<Code>Some Code</Code>')}
+        {text('Children', '<MyComponent variant="green">Some Code</MyComponent>')}
       </Code>
     </View>
   )));
diff --git a/stories/Container.stories.js b/stories/Container.stories.js
@@ -4,27 +4,31 @@ import { withInfo } from '@storybook/addon-info';
 import { withKnobs, select, boolean } from '@storybook/addon-knobs/react';
 
 import { Container } from '../src';
-import { View } from './helpers/components';
+import { ViewCheckbox } from './helpers/components';
 import { backgroundAddon } from './helpers/extras';
 
 storiesOf('Container', module)
   .addDecorator(backgroundAddon)
   .addDecorator(withKnobs)
   .add('default', withInfo({
-    propTablesExclude: [View],
+    propTablesExclude: [ViewCheckbox],
     text: 'Content wrapper with responsive padding',
   })(() => (
-    <Container
-      layout={select('Layout', ['', 'flex', 'fullScreen'])}
-      textAlign={select('Text Align', ['', 'left', 'center', 'right', 'justify'])}
-      verticalPadding={boolean('Vertical Padding', false)}
-      style={{ backgroundColor: '#000' }}
-    >
-      <div style={{ backgroundColor: '#f04' }}>Content</div>
-    </Container>
+    <ViewCheckbox>
+      <Container
+        layout={select('Layout', ['', 'flex', 'fullScreen'])}
+        textAlign={select('Text Align', ['', 'left', 'center', 'right', 'justify'])}
+        verticalPadding={boolean('Vertical Padding', false)}
+        style={{ backgroundColor: '#000' }}
+      >
+        <div style={{ backgroundColor: '#f04' }}>Content</div>
+      </Container>
+    </ViewCheckbox>
   )))
   .add('with layout', () => (
-    <Container layout="fullScreen" style={{ backgroundColor: '#000' }}>
-      <div style={{ backgroundColor: '#f04' }}>Content</div>
-    </Container>
+    <ViewCheckbox>
+      <Container layout="fullScreen" style={{ backgroundColor: '#000' }}>
+        <div style={{ backgroundColor: '#f04' }}>Content</div>
+      </Container>
+    </ViewCheckbox>
   ));