import {
  Story,
  Canvas,
  ArgsTable,
  Meta,
  SourceState,
} from "@storybook/blocks";
import { ComponentHeading, EnumTable } from "../../storybook-components";
import {
  ComponentStatus,
  COMPONENT_STATUS,
} from "../../storybook-components/ComponentStatus";
import { STATUS_VARIANT } from "../../types";
import { Badge, BADGE_SIZE } from "./Badge";

<Meta title="Components/Data/Badge" component={Badge} />

<ComponentHeading
  componentName="Badge"
  description=""
  sourcePath="src/components/Badge/Badge.tsx"
/>

<ComponentStatus status={COMPONENT_STATUS.A11Y_VIOLATION_COLOR_CONTRAST} />

## Installation

```jsx
import { Badge } from "@conveyorhq/arrow-ds";
```

export const variants = Object.values(STATUS_VARIANT);
export const sizes = Object.values(BADGE_SIZE);

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="Badge">
    <Badge>Badge</Badge>
  </Story>
</Canvas>

## API

These are the custom props that extend [`BoxProps`](/?path=/docs/components-box--box#all-props).

<ArgsTable of={Badge} />
<EnumTable enums={{ BADGE_SIZE }} />
<EnumTable enums={{ STATUS_VARIANT }} />

## Demos

### Sizes

<Canvas>
  <Story name="Badge Size Medium">
    <Badge>Medium</Badge>
  </Story>
  <Story name="Badge Size Micro">
    <Badge size={BADGE_SIZE.MICRO}>Micro</Badge>
  </Story>
</Canvas>

### Status Variants

`Badge` accepts a `variant` prop whose value is a `STATUS_VARIANT`.

<Canvas>
  <Story name="Badge Status Variant Default">
    <Badge>Default</Badge>
  </Story>
  <Story name="Badge Status Variant Warning">
    <Badge variant={STATUS_VARIANT.WARNING}>Warning</Badge>
  </Story>
  <Story name="Badge Status Variant Success">
    <Badge variant={STATUS_VARIANT.SUCCESS}>Success</Badge>
  </Story>
  <Story name="Badge Status Variant Danger">
    <Badge variant={STATUS_VARIANT.DANGER}>Danger</Badge>
  </Story>
  <Story name="Badge Status Variant Default Micro">
    <Badge size={BADGE_SIZE.MICRO}>Default</Badge>
  </Story>
  <Story name="Badge Status Variant Warning Micro">
    <Badge variant={STATUS_VARIANT.WARNING} size={BADGE_SIZE.MICRO}>
      Warning
    </Badge>
  </Story>
  <Story name="Badge Status Variant Success Micro">
    <Badge variant={STATUS_VARIANT.SUCCESS} size={BADGE_SIZE.MICRO}>
      Success
    </Badge>
  </Story>
  <Story name="Badge Status Variant Danger Micro">
    <Badge variant={STATUS_VARIANT.DANGER} size={BADGE_SIZE.MICRO}>
      Danger
    </Badge>
  </Story>
</Canvas>

### Inline

`Badge` can display inline with other text

<Canvas>
  <Story name="Inline">
    <span>
      <Badge className="mr-1">v1.0</Badge>
      Some Text
    </span>
  </Story>
</Canvas>