import { ArgsTable, Canvas, Story } from '@storybook/addon-docs/blocks';
import Hed from '../Hed/Hed';
import Pill from './Pill';
import { TabNav, TabNavItem } from '../TabNav/TabNav';

<Meta title="Content/Pill" component={Pill} />

# Pill

A pill displays an important data point or callout next to a head or label. It
is typically used to show that something has been updated.

## Usage guidelines

- **Do not** use the `Pill` component for long strings of text.

## Props

<Canvas>
	<Story
		args={{
			pillStyle: 'faint',
			children: 'Updated',
		}}
		name="Faint style"
	>
		{args => <Pill {...args} />}
	</Story>
</Canvas>

<ArgsTable story="Faint style" />

## Stories

### Inverted style

<Canvas>
	<Story
		args={{
			pillStyle: 'inverted',
			children: 'Members only',
		}}
		name="Inverted style"
	>
		{(args) => (
			<Hed>
				<Pill {...args} />
			</Hed>
		)}
	</Story>
</Canvas>

### With icon

<Canvas>
	<Story
		args={{
			pillStyle: 'inverted',
			children: 'Members only',
			icon: '✦',
		}}
		name="With icon"
	>
		{(args) => (
			<Hed>
				<Pill {...args} />
			</Hed>
		)}
	</Story>
</Canvas>

### With Hed

<Canvas>
	<Story
		args={{
			pillStyle: 'faint',
			children: '2 new',
		}}
		name="With Hed"
	>
		{args => <Hed>Latest stories <Pill {...args} /></Hed>}
	</Story>
</Canvas>