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

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

storiesOf('Section', module)
  .addDecorator((story, context) => withInfo('common info')(story)(context))
  .addDecorator(checkA11y)
  .add('colors', () => (
    <Box padding={5}>
      {colors.map((color, key) => (
        <Section color={color} key={key} marginTop={4}>
          <TextBody>I am a {color} section</TextBody>
        </Section>
      ))}
      <Section dark marginTop={4}><TextBody>I am a dark white section</TextBody></Section>
      <Section color="neutral" dark marginTop={4}>
        <TextBody>I am a dark neutral section</TextBody>
      </Section>
    </Box>
  ))
  .add('sizes', () => (
    <Box padding={5}>
      {sizes.map((size, index) => (
        <Section key={index} size={size}>
          <TextBody>I am a {size} section.</TextBody>
        </Section>
      ))}
    </Box>
  ));

@@ -179,12 +179,82 @@
 t %7B 
-Box,
+withKnobs, boolean, select %7D from '@storybook/addon-knobs/react';%0Aimport %7B
  Sec
@@ -560,78 +560,46 @@
 .add
-('colors', () =%3E (%0A    %3CBox padding=%7B5%7D%3E%0A      %7Bcolors.map((color, key
+Decorator(withKnobs)%0A  .add('Basic', (
 ) =%3E
@@ -605,28 +605,24 @@
 %3E (%0A    
-    
 %3CSection
  color=%7B
@@ -617,497 +617,149 @@
 tion
- color=%7Bcolor%7D key=%7Bkey%7D marginTop=%7B4%7D%3E%0A          %3CTextBody%3EI am a %7Bcolor%7D section%3C/TextBody%3E%0A        %3C/Section%3E%0A      ))%7D%0A      %3CSection dark marginTop=%7B4%7D%3E%3CTextBody%3EI am a dark white section%3C/TextBody%3E%3C/Section%3E%0A      %3CSection color=%22neutral%22 dark marginTop=%7B4%7D%3E%0A        %3CTextBody%3EI am a dark neutr
+%0A      color=%7Bselect('Color', colors, 'white')%7D%0A      dark=%7Bboolean('Dark', f
 al
- 
 se
-ction%3C/TextBody%3E%0A      %3C/Section%3E%0A    %3C/Box%3E%0A  ))%0A  .add('s
+)%7D%0A      size=%7Bselect('S
 ize
-s
 ', 
-() =%3E (%0A    %3CBox padding=%7B5%7D%3E%0A      %7Bsizes.map((size, index) =%3E (%0A        %3CSection key=%7Bindex%7D size=%7Bsize%7D%3E%0A   
+sizes, 'medium')%7D%0A    %3E%0A
       
- 
 %3CTex
@@ -774,23 +774,16 @@
 am a
- %7Bsize%7D
  section
 .%3C/T
@@ -778,17 +778,16 @@
  section
-.
 %3C/TextBo
@@ -790,20 +790,16 @@
 xtBody%3E%0A
-    
     %3C/Se
@@ -809,29 +809,8 @@
 on%3E%0A
-      ))%7D%0A    %3C/Box%3E%0A
   ))

implement Knobs and simplify stories