// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { SectionHeader } from './index';
import { Box } from '../../../primitives/box';
import { configDocs } from '../../../../.storybook/config-docs';
import docs from './SECTION_HEADER.mkd';

storiesOf('Core/Text/SectionHeader', module)
  .addDecorator(withInfo(configDocs(docs, SectionHeader)))
  .add('normal', () => (
    <Box>
      <SectionHeader>Section Header</SectionHeader>
    </Box>
  ));

storiesOf('Core/Text/SectionHeader', module).add('small', () => (
  <Box>
    <SectionHeader size="sm">Section Header</SectionHeader>
  </Box>
));
