import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { boolean, select } from '@storybook/addon-knobs'
import Tag from './'

<Meta
  title="Components/Badges/Tag"
  component={Tag}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A7443',
    },
  }}
/>

# Tag

A Tag component is a UI element that provide contextual labels for categories/tags.

<Canvas>
  <Story name="default">
    <div>
      <Tag
        allCaps
        count={150}
        color="grey"
        filled={boolean('filled', false)}
        isRemovable={boolean('isRemovable', false)}
        size={select('Size', ['sm', 'md', 'lg'], 'sm')}
      >
        My tag
      </Tag>
      <Tag
        count={20}
        color="green"
        filled={boolean('filled', false)}
        isRemovable={boolean('isRemovable', false)}
        size={select('Size', ['sm', 'md', 'lg'], 'sm')}
      >
        My tag
      </Tag>
      <Tag
        color="purple"
        filled={boolean('filled', false)}
        isRemovable={boolean('isRemovable', false)}
        size={select('Size', ['sm', 'md', 'lg'], 'sm')}
      >
        My tag
      </Tag>
      <Tag
        color="blue"
        filled={boolean('filled', false)}
        isRemovable={boolean('isRemovable', false)}
        size={select('Size', ['sm', 'md', 'lg'], 'sm')}
        onClick={() => console.log('tag onClick')}
      >
        My tag
      </Tag>
      <Tag
        count={75}
        color="red"
        filled={boolean('filled', false)}
        isRemovable={boolean('isRemovable', false)}
        size={select('Size', ['sm', 'md', 'lg'], 'sm')}
      >
        My tag
      </Tag>
      <Tag
        color="orange"
        filled={boolean('filled', false)}
        isRemovable={boolean('isRemovable', false)}
        size={select('Size', ['sm', 'md', 'lg'], 'sm')}
      >
        My tag
      </Tag>
      <Tag
        color="teal"
        filled={boolean('filled', false)}
        isRemovable={boolean('isRemovable', false)}
        size={select('Size', ['sm', 'md', 'lg'], 'sm')}
      >
        My tag
      </Tag>
      <Tag
        href="http://google.com"
        color="pink"
        filled={boolean('filled', false)}
        isRemovable={boolean('isRemovable', false)}
        size={select('Size', ['sm', 'md', 'lg'], 'sm')}
      >
        My tag
      </Tag>
      <Tag
        color="yellow"
        filled={boolean('filled', false)}
        isRemovable={boolean('isRemovable', false)}
        size={select('Size', ['sm', 'md', 'lg'], 'sm')}
      >
        My tag
      </Tag>
    </div>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: PL
- **Usage**: ChatApp, Customers

### Props

<ArgsTable of={Tag} />

## Stories

If you're using the Tag component as something other than a tag, you may want to customize the remove button. Use the `removeProps` prop to pass down an aria label, test ID, or whatever else you might need!

<Canvas>
  <Story name="custom remove label">
    <Tag isRemovable={true} removeProps={{ 'aria-label': 'Remove Steve Aoki' }}>
      Steve Aoki
    </Tag>
  </Story>
</Canvas>
