// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import { configDocs } from '../../../../.storybook/config-docs';
import docs from './CLICK_OUTSIDE.mkd';
import { ClickOutside } from './index';
import { Box } from '../../../primitives';
import { Card } from '../../structures';

storiesOf('Core/Behaviors/ClickOutside', module)
  .addDecorator(withInfo(configDocs(docs, ClickOutside)))
  .add('normal', () => (
    <Box
      colorName="background"
      spacing="p7"
      stacked="column"
      justify="center"
      align="center"
    >
      <ClickOutside onClickOutside={action('Click Outside')}>
        <Card spacing="p5" />
      </ClickOutside>
    </Box>
  ));
