import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { Tag } from './tag.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

<Meta title="Feedback|Tag" component={Tag} />

# Tag

Renders text in a rounded box with a background color.

## Default

<Canvas>
  <Story id="components-feedback-tag--default" />
</Canvas>

## Primary Color

<Canvas>
  <Story id="components-feedback-tag--primary-color" />
</Canvas>

## Secondary Color

<Canvas>
  <Story id="components-feedback-tag--secondary-color" />
</Canvas>

## Info

<Canvas>
  <Story id="components-feedback-tag--info-color" />
</Canvas>

## Error

<Canvas>
  <Story id="components-feedback-tag--error-color" />
</Canvas>

## Greyscale

<Canvas>
  <Story id="components-feedback-tag--greyscale-color" />
</Canvas>

## Inverted

<Canvas>
  <Story id="components-feedback-tag--inverted" />
</Canvas>

## Supported Property Mixins:

Margin-only spacing:

<Canvas>
  <Story id="tfeedback-ag--mixins-margin-only-spacing" />
</Canvas>

## Props

<FlowPropsTable ofComponent={Tag} />

## External Reference

<ExternalReferenceLink
  src="https://www.figma.com/file/r5zKXblbSt0b869OEcOWXu/Patchwork-Web?node-id=637%3A64"
  type="figma"
/>
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/feedback/tag"
  type="github"
/>
