import { Meta, Canvas, ArgsTable, Story } from "@storybook/blocks";
import { SmallCaps } from "./SmallCaps";
import { STATUS_VARIANT } from "../../types";
import { ComponentHeading, EnumTable } from "../../storybook-components";

<Meta title="Components/Typography/Small Caps" component={SmallCaps} />

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

## Installation

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

export const variants = Object.values(STATUS_VARIANT);

## Basic usage

<Canvas>
  <Story name="StatusPanel">
    <SmallCaps>This is some text in small caps</SmallCaps>
  </Story>
</Canvas>

## API

These are the custom props that extend `TextProps`. Full list of props <a href="#all-props">below</a>.

<ArgsTable of={SmallCaps} />
<EnumTable enums={{ STATUS_VARIANT }} />

## Demos

### Status Variants

<Canvas>
  <Story name="Status Variants">
    {variants.map((variant) => (
      <SmallCaps key={variant} className="mb-1" variant={variant}>
        {variant}
      </SmallCaps>
    ))}
  </Story>
</Canvas>