import React from 'react';
import { storiesOf } from '@storybook/react';
import { checkA11y } from 'storybook-addon-a11y';
import { withInfo } from '@storybook/addon-info';
import { Box, StatusLabel } from '../components';

const colors = ['mint', 'violet', 'ruby', 'gold', 'aqua', 'neutral'];
const sizes = ['small', 'medium'];

storiesOf('Status Labels', module)
  .addDecorator((story, context) => withInfo('common info')(story)(context))
  .addDecorator(checkA11y)
  .add('colors', () => (
    <Box>
      {colors.map((color, key) => (
        <StatusLabel color={color} key={key} marginHorizontal={1}>
          {color}
        </StatusLabel>
      ))}
    </Box>
  ))
  .add('sizes', () => (
    <Box>
      {sizes.map((size, key) => (
        <StatusLabel size={size} key={key} marginHorizontal={1}>
          {size}
        </StatusLabel>
      ))}
    </Box>
  ));

@@ -179,12 +179,73 @@
 t %7B 
-Box,
+withKnobs, select %7D from '@storybook/addon-knobs/react';%0Aimport %7B
  Sta
@@ -533,77 +533,53 @@
 .add
-('colors', () =%3E (%0A    %3CBox%3E%0A      %7Bcolors.map((color, key
+Decorator(withKnobs)%0A  .add('Basic', (
 ) =%3E (%0A
-    
     
@@ -594,16 +594,22 @@
 abel
+%0A     
  color=%7B
 colo
@@ -608,268 +608,107 @@
 or=%7B
-color%7D key=%7Bkey%7D marginHorizontal=%7B1%7D%3E%0A          %7Bcolor%7D%0A        %3C/StatusLabel%3E%0A      ))%7D%0A    %3C/Box%3E%0A  ))%0A  .add('sizes', () =%3E (%0A    %3CBox%3E%0A      %7Bsizes.map((s
+select('Color', colors, 'neutral')%7D%0A      size=%7Bselect('S
 ize
+'
 , 
-key) =%3E (%0A        %3CStatusLabel size=%7Bsize%7D key=%7Bkey%7D marginHorizontal=%7B1%7D%3E
+sizes, 'medium')%7D
 %0A    
+%3E%0A
       
-%7Bsize%7D%0A    
+label%0A
     
@@ -726,29 +726,8 @@
 el%3E%0A
-      ))%7D%0A    %3C/Box%3E%0A
   ))

implement Knobs and simplify stories