import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
import { SmallCaps } from "./SmallCaps";
import { STATUS_VARIANT } from "../../types";
import { EnumTable } from "../../storybook-components/EnumTable";

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

# SmallCaps

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

export const variants = Object.values(STATUS_VARIANT);

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

## Custom Props

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

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

## Demos

### Status Variants

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

## All Props

<Props of={SmallCaps} />