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

<Meta 
  title = "Design System/Badge" 
  component = { Badge }
/>

# Badge

## 顯示有意義的標識

### All Badges

5 basic status are supported.

<Story name="All Badges">
  <div>
    <Badge status="positive">Positive</Badge>
    <Badge status="negative">Negative</Badge>
    <Badge status="neutral">Neutral</Badge>
    <Badge status="error">Error</Badge>
    <Badge status="warning">Warning</Badge>
  </div>
</Story>

### Preview and ArgsTable

<Preview withToolbar>
  <Story name="initial">
    <Badge status="neutral">Initial</Badge>
  </Story>
</Preview>

<ArgsTable of={Badge} />

### Positive Badge

表示正面的 Badge

<Story name="positive">
  <div>
    <Badge status="positive">Positive</Badge>
  </div>
</Story>

### Negative Badge

表示負面的 Badge

<Story name="negative">
  <div>
    <Badge status="negative">Negative</Badge>
  </div>
</Story>

### Neutral Badge

表示中立的 Badge

<Story name="neutral">
  <div>
    <Badge status="neutral">Neutral</Badge>
  </div>
</Story>

### Error Badge

表示錯誤的 Badge

<Story name="error">
  <div>
    <Badge status="error">Error</Badge>
  </div>
</Story>

### Warning Badge

表示警示的 Badge

<Story name="warning">
  <div>
    <Badge status="warning">Warning</Badge>
  </div>
</Story>

### WithIcon Badge

帶有 Icon 的 Badge

export const IconTemplate = (args) => (
  <div>
    <Badge {...args} >
      <Icon {...args} />
      WithIcon
    </Badge>
  </div>
)

<Story name="With Icon" args={{
  status: neutral,
  icon: 'check',
}}>
  {IconTemplate.bind({})}
</Story>

<ArgsTable components = {{ Badge, Icon }} />

### Playground

用這個 Story 搭配 Controls Addon 在 Canvas 呈現實驗修改的結果

export const Template = (args) => <Badge {...args} >Playground</Badge>

<Canvas>
  <Story name="controls" args={{
    status: neutral,
  }}>
    {Template.bind({})}
  </Story>
</Canvas>