// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withDocs } from '../../../.storybook/with-docs';
import { Box } from '.';
import docs from './README.PADDING.mkd';

storiesOf('Primitives/Box/padding/all', module)
  .add(
    'p1',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="p1">
        <Box colorName="brand-primary-bg">p1</Box>
      </Box>
    )),
  )
  .add(
    'p2',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="p2">
        <Box colorName="brand-primary-bg">p2</Box>
      </Box>
    )),
  )
  .add(
    'p3',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="p3">
        <Box colorName="brand-primary-bg">p3</Box>
      </Box>
    )),
  )
  .add(
    'p4',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="p4">
        <Box colorName="brand-primary-bg">p4</Box>
      </Box>
    )),
  )
  .add(
    'p5',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="p5">
        <Box colorName="brand-primary-bg">p5</Box>
      </Box>
    )),
  )
  .add(
    'p6',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="p6">
        <Box colorName="brand-primary-bg">p6</Box>
      </Box>
    )),
  )
  .add(
    'p7',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="p7">
        <Box colorName="brand-primary-bg">p7</Box>
      </Box>
    )),
  );

storiesOf('Primitives/Box/padding/vertical', module)
  .add(
    'pv1',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pv1">
        <Box colorName="brand-primary-bg">pv1</Box>
      </Box>
    )),
  )
  .add(
    'pv2',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pv2">
        <Box colorName="brand-primary-bg">pv2</Box>
      </Box>
    )),
  )
  .add(
    'pv3',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pv3">
        <Box colorName="brand-primary-bg">pv3</Box>
      </Box>
    )),
  )
  .add(
    'pv4',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pv4">
        <Box colorName="brand-primary-bg">pv4</Box>
      </Box>
    )),
  )
  .add(
    'pv5',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pv5">
        <Box colorName="brand-primary-bg">pv5</Box>
      </Box>
    )),
  )
  .add(
    'pv6',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pv6">
        <Box colorName="brand-primary-bg">pv6</Box>
      </Box>
    )),
  )
  .add(
    'pv7',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pv7">
        <Box colorName="brand-primary-bg">pv7</Box>
      </Box>
    )),
  );

storiesOf('Primitives/Box/padding/horizontal', module)
  .add(
    'ph1',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="ph1">
        <Box colorName="brand-primary-bg">ph1</Box>
      </Box>
    )),
  )
  .add(
    'ph2',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="ph2">
        <Box colorName="brand-primary-bg">ph2</Box>
      </Box>
    )),
  )
  .add(
    'ph3',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="ph3">
        <Box colorName="brand-primary-bg">ph3</Box>
      </Box>
    )),
  )
  .add(
    'ph4',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="ph4">
        <Box colorName="brand-primary-bg">ph4</Box>
      </Box>
    )),
  )
  .add(
    'ph5',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="ph5">
        <Box colorName="brand-primary-bg">ph5</Box>
      </Box>
    )),
  )
  .add(
    'ph6',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="ph6">
        <Box colorName="brand-primary-bg">ph6</Box>
      </Box>
    )),
  )
  .add(
    'ph7',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="ph7">
        <Box colorName="brand-primary-bg">ph7</Box>
      </Box>
    )),
  );

storiesOf('Primitives/Box/padding/left', module)
  .add(
    'pl1',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pl1">
        <Box colorName="brand-primary-bg">pl1</Box>
      </Box>
    )),
  )
  .add(
    'pl2',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pl2">
        <Box colorName="brand-primary-bg">pl2</Box>
      </Box>
    )),
  )
  .add(
    'pl3',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pl3">
        <Box colorName="brand-primary-bg">pl3</Box>
      </Box>
    )),
  )
  .add(
    'pl4',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pl4">
        <Box colorName="brand-primary-bg">pl4</Box>
      </Box>
    )),
  )
  .add(
    'pl5',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pl5">
        <Box colorName="brand-primary-bg">pl5</Box>
      </Box>
    )),
  )
  .add(
    'pl6',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pl6">
        <Box colorName="brand-primary-bg">pl6</Box>
      </Box>
    )),
  )
  .add(
    'pl7',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pl7">
        <Box colorName="brand-primary-bg">pl7</Box>
      </Box>
    )),
  );

storiesOf('Primitives/Box/padding/right', module)
  .add(
    'pr1',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pr1">
        <Box colorName="brand-primary-bg">pr1</Box>
      </Box>
    )),
  )
  .add(
    'pr2',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pr2">
        <Box colorName="brand-primary-bg">pr2</Box>
      </Box>
    )),
  )
  .add(
    'pr3',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pr3">
        <Box colorName="brand-primary-bg">pr3</Box>
      </Box>
    )),
  )
  .add(
    'pr4',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pr4">
        <Box colorName="brand-primary-bg">pr4</Box>
      </Box>
    )),
  )
  .add(
    'pr5',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pr5">
        <Box colorName="brand-primary-bg">pr5</Box>
      </Box>
    )),
  )
  .add(
    'pr6',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pr6">
        <Box colorName="brand-primary-bg">pr6</Box>
      </Box>
    )),
  )
  .add(
    'pr7',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pr7">
        <Box colorName="brand-primary-bg">pr7</Box>
      </Box>
    )),
  );

storiesOf('Primitives/Box/padding/top', module)
  .add(
    'pt1',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pt1">
        <Box colorName="brand-primary-bg">pt1</Box>
      </Box>
    )),
  )
  .add(
    'pt2',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pt2">
        <Box colorName="brand-primary-bg">pt2</Box>
      </Box>
    )),
  )
  .add(
    'pt3',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pt3">
        <Box colorName="brand-primary-bg">pt3</Box>
      </Box>
    )),
  )
  .add(
    'pt4',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pt4">
        <Box colorName="brand-primary-bg">pt4</Box>
      </Box>
    )),
  )
  .add(
    'pt5',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pt5">
        <Box colorName="brand-primary-bg">pt5</Box>
      </Box>
    )),
  )
  .add(
    'pt6',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pt6">
        <Box colorName="brand-primary-bg">pt6</Box>
      </Box>
    )),
  )
  .add(
    'pt7',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pt7">
        <Box colorName="brand-primary-bg">pt7</Box>
      </Box>
    )),
  );

storiesOf('Primitives/Box/padding/bottom', module)
  .add(
    'pb1',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pb1">
        <Box colorName="brand-primary-bg">pb1</Box>
      </Box>
    )),
  )
  .add(
    'pb2',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pb2">
        <Box colorName="brand-primary-bg">pb2</Box>
      </Box>
    )),
  )
  .add(
    'pb3',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pb3">
        <Box colorName="brand-primary-bg">pb3</Box>
      </Box>
    )),
  )
  .add(
    'pb4',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pb4">
        <Box colorName="brand-primary-bg">pb4</Box>
      </Box>
    )),
  )
  .add(
    'pb5',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pb5">
        <Box colorName="brand-primary-bg">pb5</Box>
      </Box>
    )),
  )
  .add(
    'pb6',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pb6">
        <Box colorName="brand-primary-bg">pb6</Box>
      </Box>
    )),
  )
  .add(
    'pb7',
    withDocs(docs)(() => (
      <Box colorName="brand-primary-fg" spacing="pb7">
        <Box colorName="brand-primary-bg">pb7</Box>
      </Box>
    )),
  );
