// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { Tag } from './index';
import { withDocs } from '../../../../.storybook/with-docs';
import docs from './TAG.mkd';

storiesOf('Core/Feedback UI/Tag', module)
  .add('normal', withDocs(docs)(() => <Tag color={undefined}>RRSP</Tag>))
  .add('primary color', withDocs(docs)(() => <Tag color="primary">RRSP</Tag>))
  .add(
    'secondary color',
    withDocs(docs)(() => <Tag color="secondary">RRSP</Tag>),
  )
  .add('info color', withDocs(docs)(() => <Tag color="info">RRSP</Tag>))
  .add('error color', withDocs(docs)(() => <Tag color="error">RRSP</Tag>))
  .add(
    'greyscale color',
    withDocs(docs)(() => <Tag color="greyscale">RRSP</Tag>),
  )
  .add(
    'inverted',
    withDocs(docs)(() => (
      <Tag inverted color={undefined}>
        RRSP
      </Tag>
    )),
  );
