import {
  Story,
  Preview,
  Props,
  Meta,
  SourceState,
} from "@storybook/addon-docs/blocks";
import { Badge, BADGE_SIZE } from "./Badge";
import { STATUS_VARIANT } from "../../types";
import { EnumTable } from "../../storybook-components/EnumTable";
import {
  ComponentStatus,
  COMPONENT_STATUS,
} from "../../storybook-components/ComponentStatus";

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

# Badge

<ComponentStatus status={COMPONENT_STATUS.A11Y_VIOLATION_COLOR_CONTRAST} />

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

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

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

## Props

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

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

## Demos

### Sizes

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

### Status Variants

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

<Preview>
  <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>
</Preview>

### Inline

`Badge` can display inline with other text

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