// @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.HIDE.mkd';

storiesOf('Primitives/Box', module)
  .addDecorator(withInfo(configDocs(docs, Box)))
  .add('hiding', () => (
    <>
      <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', () => (
    <>
      <Box hide="sm">Hide small</Box>
      <Box hide="md">Only small</Box>
    </>
  ));
