import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import Badge from '../Badge';
import '../styles/Badge.story.scss';

<Meta title="Atoms/Badge" component={Badge} />

# Badge
<br />

## `Badges` are used to display counts and labels.
<br />

### Default
<Canvas>
    <Story name="Default">
        <Badge label="this is a default badge" />
    </Story>
</Canvas>

### Success
<Canvas>
    <Story name="Sucess">
        <Badge label="Success" type="success" />
    </Story>
</Canvas>

### Emphasis
<Canvas>
    <Story name="Emphasis">
        <Badge label="emphasis" type="emphasis" />
    </Story>
</Canvas>

### Pending
<Canvas>
    <Story name="Pending">
        <Badge label="Pending" type="pending" />
    </Story>
</Canvas>

### Error
<Canvas>
    <Story name="Error">
        <Badge label="Error" type="error" />
    </Story>
</Canvas>

### With class
<Canvas>
    <Story name="With class">
        <Badge label="this is a badge with a class" className="test-class" />
    </Story>
</Canvas>

## Usage Example

```jsx
import Badge from '@appdirect/sfb-theme-components/src/atoms/badge/Badge';

<Badge
    label="Success"
    type="success"  // Badge.allowedTypes 'default', 'error', 'success', 'emphasis', 'pending'
/>

```
## Props

<ArgsTable of={Badge} />
