// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { Tag } from './index';
import { configDocs } from '../../../../.storybook/config-docs';
import docs from './TAG.mkd';

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