import Badge from "../Badge";
import { createComponentTemplate, createStoryMetaSettings } from "../../../storybook";
import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";

export const metaSettings = createStoryMetaSettings({
  component: Badge
});

<Meta
  title="Badge (in progress)"
  component={Badge}
  argTypes={metaSettings.argTypes}
  decorators={metaSettings.decorators}
/>

<!--- Component template -->

export const badgeTemplate = createComponentTemplate(Badge);

<!--- Component documentation -->

# Badge

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Do’s and don’ts](#dos-and-donts)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

<Canvas>
  <Story name="Overview">{badgeTemplate.bind({})}</Story>
</Canvas>

## Variants

### States

<Canvas>
  <Story name="States">
    <Badge dot="accent" />
    <Badge dot="warning" />
    <Badge dot="positive" />
  </Story>
</Canvas>
