// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { configDocs } from '../../../.storybook/config-docs';
import { Box } from '.';
import docs from './README.MARGIN.mkd';

storiesOf('Primitives/Box/margin/all', module)
  .addDecorator(withInfo(configDocs(docs, Box)))
  .add('m1', () => (
    <Box spacing="m1">
      <Box colorName="brand-primary-bg">m1</Box>
    </Box>
  ))
  .add('m2', () => (
    <Box spacing="m2">
      <Box colorName="brand-primary-bg">m2</Box>
    </Box>
  ))
  .add('m3', () => (
    <Box spacing="m3">
      <Box colorName="brand-primary-bg">m3</Box>
    </Box>
  ))
  .add('m4', () => (
    <Box spacing="m4">
      <Box colorName="brand-primary-bg">m4</Box>
    </Box>
  ))
  .add('m5', () => (
    <Box spacing="m5">
      <Box colorName="brand-primary-bg">m5</Box>
    </Box>
  ))
  .add('m6', () => (
    <Box spacing="m6">
      <Box colorName="brand-primary-bg">m6</Box>
    </Box>
  ))
  .add('m7', () => (
    <Box spacing="m7">
      <Box colorName="brand-primary-bg">m7</Box>
    </Box>
  ));

storiesOf('Primitives/Box/margin/vertical', module)
  .add('mv1', () => (
    <Box spacing="mv1">
      <Box colorName="brand-primary-bg">mv1</Box>
    </Box>
  ))
  .add('mv2', () => (
    <Box spacing="mv2">
      <Box colorName="brand-primary-bg">mv2</Box>
    </Box>
  ))
  .add('mv3', () => (
    <Box spacing="mv3">
      <Box colorName="brand-primary-bg">mv3</Box>
    </Box>
  ))
  .add('mv4', () => (
    <Box spacing="mv4">
      <Box colorName="brand-primary-bg">mv4</Box>
    </Box>
  ))
  .add('mv5', () => (
    <Box spacing="mv5">
      <Box colorName="brand-primary-bg">mv5</Box>
    </Box>
  ))
  .add('mv6', () => (
    <Box spacing="mv6">
      <Box colorName="brand-primary-bg">mv6</Box>
    </Box>
  ))
  .add('mv7', () => (
    <Box spacing="mv7">
      <Box colorName="brand-primary-bg">mv7</Box>
    </Box>
  ));

storiesOf('Primitives/Box/margin/horizontal', module)
  .add('mh1', () => (
    <Box spacing="mh1">
      <Box colorName="brand-primary-bg">mh1</Box>
    </Box>
  ))
  .add('mh2', () => (
    <Box spacing="mh2">
      <Box colorName="brand-primary-bg">mh2</Box>
    </Box>
  ))
  .add('mh3', () => (
    <Box spacing="mh3">
      <Box colorName="brand-primary-bg">mh3</Box>
    </Box>
  ))
  .add('mh4', () => (
    <Box spacing="mh4">
      <Box colorName="brand-primary-bg">mh4</Box>
    </Box>
  ))
  .add('mh5', () => (
    <Box spacing="mh5">
      <Box colorName="brand-primary-bg">mh5</Box>
    </Box>
  ))
  .add('mh6', () => (
    <Box spacing="mh6">
      <Box colorName="brand-primary-bg">mh6</Box>
    </Box>
  ))
  .add('mh7', () => (
    <Box spacing="mh7">
      <Box colorName="brand-primary-bg">mh7</Box>
    </Box>
  ));

storiesOf('Primitives/Box/margin/left', module)
  .add('ml1', () => (
    <Box spacing="ml1">
      <Box colorName="brand-primary-bg">ml1</Box>
    </Box>
  ))
  .add('ml2', () => (
    <Box spacing="ml2">
      <Box colorName="brand-primary-bg">ml2</Box>
    </Box>
  ))
  .add('ml3', () => (
    <Box spacing="ml3">
      <Box colorName="brand-primary-bg">ml3</Box>
    </Box>
  ))
  .add('ml4', () => (
    <Box spacing="ml4">
      <Box colorName="brand-primary-bg">ml4</Box>
    </Box>
  ))
  .add('ml5', () => (
    <Box spacing="ml5">
      <Box colorName="brand-primary-bg">ml5</Box>
    </Box>
  ))
  .add('ml6', () => (
    <Box spacing="ml6">
      <Box colorName="brand-primary-bg">ml6</Box>
    </Box>
  ))
  .add('ml7', () => (
    <Box spacing="ml7">
      <Box colorName="brand-primary-bg">ml7</Box>
    </Box>
  ));

storiesOf('Primitives/Box/margin/right', module)
  .add('mr1', () => (
    <Box spacing="mr1">
      <Box colorName="brand-primary-bg">mr1</Box>
    </Box>
  ))
  .add('mr2', () => (
    <Box spacing="mr2">
      <Box colorName="brand-primary-bg">mr2</Box>
    </Box>
  ))
  .add('mr3', () => (
    <Box spacing="mr3">
      <Box colorName="brand-primary-bg">mr3</Box>
    </Box>
  ))
  .add('mr4', () => (
    <Box spacing="mr4">
      <Box colorName="brand-primary-bg">mr4</Box>
    </Box>
  ))
  .add('mr5', () => (
    <Box spacing="mr5">
      <Box colorName="brand-primary-bg">mr5</Box>
    </Box>
  ))
  .add('mr6', () => (
    <Box spacing="mr6">
      <Box colorName="brand-primary-bg">mr6</Box>
    </Box>
  ))
  .add('mr7', () => (
    <Box spacing="mr7">
      <Box colorName="brand-primary-bg">mr7</Box>
    </Box>
  ));

storiesOf('Primitives/Box/margin/top', module)
  .add('mt1', () => (
    <Box spacing="mt1">
      <Box colorName="brand-primary-bg">mt1</Box>
    </Box>
  ))
  .add('mt2', () => (
    <Box spacing="mt2">
      <Box colorName="brand-primary-bg">mt2</Box>
    </Box>
  ))
  .add('mt3', () => (
    <Box spacing="mt3">
      <Box colorName="brand-primary-bg">mt3</Box>
    </Box>
  ))
  .add('mt4', () => (
    <Box spacing="mt4">
      <Box colorName="brand-primary-bg">mt4</Box>
    </Box>
  ))
  .add('mt5', () => (
    <Box spacing="mt5">
      <Box colorName="brand-primary-bg">mt5</Box>
    </Box>
  ))
  .add('mt6', () => (
    <Box spacing="mt6">
      <Box colorName="brand-primary-bg">mt6</Box>
    </Box>
  ))
  .add('mt7', () => (
    <Box spacing="mt7">
      <Box colorName="brand-primary-bg">mt7</Box>
    </Box>
  ));

storiesOf('Primitives/Box/margin/bottom', module)
  .add('mb1', () => (
    <Box spacing="mb1">
      <Box colorName="brand-primary-bg">mb1</Box>
    </Box>
  ))
  .add('mb2', () => (
    <Box spacing="mb2">
      <Box colorName="brand-primary-bg">mb2</Box>
    </Box>
  ))
  .add('mb3', () => (
    <Box spacing="mb3">
      <Box colorName="brand-primary-bg">mb3</Box>
    </Box>
  ))
  .add('mb4', () => (
    <Box spacing="mb4">
      <Box colorName="brand-primary-bg">mb4</Box>
    </Box>
  ))
  .add('mb5', () => (
    <Box spacing="mb5">
      <Box colorName="brand-primary-bg">mb5</Box>
    </Box>
  ))
  .add('mb6', () => (
    <Box spacing="mb6">
      <Box colorName="brand-primary-bg">mb6</Box>
    </Box>
  ))
  .add('mb7', () => (
    <Box spacing="mb7">
      <Box colorName="brand-primary-bg">mb7</Box>
    </Box>
  ));
