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

storiesOf('Primitives/Box', module)
  .add(
    'hiding',
    withDocs(docs)(() => (
      <>
        <Box spacing={['ml2', 'mr2', 'mb2']} hide={['sm']}>
          Show on MD, LG, XL
        </Box>
        <Box spacing={['ml2', 'mr2', 'mb2']} hide={['md']}>
          Show on SM, LG, XL
        </Box>
        <Box spacing={['ml2', 'mr2', 'mb2']} hide={['lg']}>
          Show on SM, MD, XL
        </Box>
        <Box spacing={['ml2', 'mr2', 'mb2']} hide={['xl']}>
          Show on SM, MD, LG
        </Box>
        <Box spacing={['ml2', 'mr2', 'mb2']} hide={['sm', 'md', 'lg']}>
          Show on XL
        </Box>
        <Box spacing={['ml2', 'mr2', 'mb2']} hide={['sm', 'md', 'xl']}>
          Show on LG
        </Box>
        <Box spacing={['ml2', 'mr2', 'mb2']} hide={['sm', 'lg', 'xl']}>
          Show on MD
        </Box>
        <Box spacing={['ml2', 'mr2', 'mb2']} hide={['md', 'lg', 'xl']}>
          Show on SM
        </Box>
      </>
    )),
  )
  .add(
    'hiding/legacy',
    withDocs(docs)(() => (
      <>
        <Box hide="sm">Hide small</Box>
        <Box hide="md">Only small</Box>
      </>
    )),
  );
