// @flow
import React from 'react';
import { Tag } from './index';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import docs from './tag.mdx';

export default {
  component: Tag,
  title: 'Components/Feedback/Tag',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

export const Default = () => <Tag color={undefined}>RRSP</Tag>;
export const PrimaryColor = () => <Tag color="primary">RRSP</Tag>;
export const SecondaryColor = () => <Tag color="secondary">RRSP</Tag>;
export const InfoColor = () => <Tag color="info">RRSP</Tag>;
export const ErrorColor = () => <Tag color="error">RRSP</Tag>;
export const GreyscaleColor = () => <Tag color="greyscale">RRSP</Tag>;

export const Inverted = () => (
  <Tag inverted color={undefined}>
    RRSP
  </Tag>
);

export const MixinsMarginOnlySpacing = () => (
  <MarginChecker Component={Tag}>RRSP</MarginChecker>
);
