import React from 'react';
import PropTable from './components/propTable';
import { storiesOf } from '@storybook/react';
import { checkA11y } from 'storybook-addon-a11y';
import { withInfo } from '@storybook/addon-info';
import { withKnobs, select } from '@storybook/addon-knobs/react';
import {
  Box,
  Bullet,
  Tooltip,
  Heading1,
  Heading2,
  Heading3,
  Heading4,
  TextBody,
  TextDisplay,
  TextSmall,
} from '../components';

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

const TooltippedBullet = Tooltip(Bullet);

storiesOf('Bullets', module)
  .addDecorator((story, context) =>
    withInfo({
      TableComponent: PropTable,
      propTablesExclude: [Box, Heading1, Heading2, Heading3, Heading4, TextBody, TextDisplay, TextSmall],
    })(story)(context),
  )
  .addDecorator(checkA11y)
  .addDecorator(withKnobs)
  .add('Basic', () => <Bullet color={select('Color', colors, 'neutral')} size={select('Size', sizes, 'medium')} />)
  .add('With tooltip', () => (
    <TooltippedBullet
      color={select('Color', colors, 'ruby')}
      size={select('Size', sizes, 'medium')}
      tooltip={<TextBody>I am the tooltip</TextBody>}
    />
  ))
  .add('Inline with text', () => (
    <Box>
      <Box marginTop={4} display="flex" alignItems="center">
        <Bullet color={select('Color', colors, 'aqua')} size="medium" />
        <Heading1>I'm an Header 1 with a subtle status</Heading1>
      </Box>
      <Box marginTop={4} display="flex" alignItems="center">
        <Bullet color={select('Color', colors, 'aqua')} size="medium" />
        <Heading2>I'm an Header 2 with a subtle status</Heading2>
      </Box>
      <Box marginTop={4} display="flex" alignItems="center">
        <Bullet color={select('Color', colors, 'aqua')} size="medium" />
        <Heading3>I'm an Header 3 with a subtle status</Heading3>
      </Box>
      <Box marginTop={4} display="flex" alignItems="center">
        <Bullet color={select('Color', colors, 'aqua')} size="small" />
        <Heading4>I'm an Header 4 with a subtle status</Heading4>
      </Box>
      <Box marginTop={4} display="flex" alignItems="center">
        <Bullet color={select('Color', colors, 'aqua')} size="small" />
        <TextDisplay>I'm an text display with a subtle status</TextDisplay>
      </Box>
      <Box marginTop={4} display="flex" alignItems="center">
        <Bullet color={select('Color', colors, 'aqua')} size="small" />
        <TextBody>I'm an text body with a subtle status</TextBody>
      </Box>
      <Box marginTop={4} display="flex" alignItems="center">
        <Bullet color={select('Color', colors, 'aqua')} size="small" />
        <TextSmall>I'm an text small with a subtle status</TextSmall>
      </Box>
    </Box>
  ));

@@ -1270,60 +1270,16 @@
    %3C
-Box marginTop=%7B4%7D display=%22flex%22 alignItems=%22center%22
+Heading1
 %3E%0A  
@@ -1357,26 +1357,16 @@
         
-%3CHeading1%3E
 I'm an H
@@ -1385,32 +1385,39 @@
  a subtle status
+%0A      
 %3C/Heading1%3E%0A    
@@ -1423,73 +1423,30 @@
    %3C
-/Box%3E%0A      %3CBox marginTop=%7B4%7D display=%22flex%22 alignItems=%22center%22
+Heading2 marginTop=%7B4%7D
 %3E%0A  
@@ -1528,18 +1528,8 @@
     
-%3CHeading2%3E
 I'm 
@@ -1552,32 +1552,39 @@
  a subtle status
+%0A      
 %3C/Heading2%3E%0A    
@@ -1590,73 +1590,30 @@
    %3C
-/Box%3E%0A      %3CBox marginTop=%7B4%7D display=%22flex%22 alignItems=%22center%22
+Heading3 marginTop=%7B4%7D
 %3E%0A  
@@ -1664,38 +1664,37 @@
  'aqua')%7D size=%22
-medium
+small
 %22 /%3E%0A        %3CHe
@@ -1694,18 +1694,8 @@
     
-%3CHeading3%3E
 I'm 
@@ -1718,32 +1718,39 @@
  a subtle status
+%0A      
 %3C/Heading3%3E%0A    
@@ -1756,73 +1756,30 @@
    %3C
-/Box%3E%0A      %3CBox marginTop=%7B4%7D display=%22flex%22 alignItems=%22center%22
+Heading4 marginTop=%7B4%7D
 %3E%0A  
@@ -1860,18 +1860,8 @@
     
-%3CHeading4%3E
 I'm 
@@ -1892,16 +1892,23 @@
 e status
+%0A      
 %3C/Headin
@@ -1922,73 +1922,33 @@
    %3C
-/Box%3E%0A      %3CBox marginTop=%7B4%7D display=%22flex%22 alignItems=%22center%22
+TextDisplay marginTop=%7B4%7D
 %3E%0A  
@@ -2029,21 +2029,8 @@
     
-%3CTextDisplay%3E
 I'm 
@@ -2061,24 +2061,31 @@
 ubtle status
+%0A      
 %3C/TextDispla
@@ -2098,73 +2098,30 @@
    %3C
-/Box%3E%0A      %3CBox marginTop=%7B4%7D display=%22flex%22 alignItems=%22center%22
+TextBody marginTop=%7B4%7D
 %3E%0A  
@@ -2198,26 +2198,16 @@
         
-%3CTextBody%3E
 I'm an t
@@ -2235,27 +2235,16 @@
 e status
-%3C/TextBody%3E
 %0A      %3C
@@ -2240,27 +2240,32 @@
 tus%0A      %3C/
-Box
+TextBody
 %3E%0A      %3CBox
@@ -2261,19 +2261,25 @@
 %0A      %3C
-Box
+TextSmall
  marginT
@@ -2288,43 +2288,8 @@
 =%7B4%7D
- display=%22flex%22 alignItems=%22center%22
 %3E%0A  
@@ -2370,19 +2370,8 @@
     
-%3CTextSmall%3E
 I'm 
@@ -2404,16 +2404,23 @@
 e status
+%0A      
 %3C/TextSm
@@ -2428,21 +2428,8 @@
 ll%3E%0A
-      %3C/Box%3E%0A
     

Revert ":bulb: Change the way inline Bullets should be constructed in the stories"