import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import Typography from '../Typography';

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

# Typography API

The API documentation of the Typography React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { Typography } from '@useblu/ocean-react';
```

## Usage

<Canvas withSource="open" withToolbar>
  <Story name="usage">
    <Typography variant="paragraph">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis
      tenetur
    </Typography>
  </Story>
</Canvas>

## Props

<ArgsTable of="." />

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (native element).

## CSS

| Global class                   | Description                                                  |
| ------------------------------ | ------------------------------------------------------------ |
| .ods-typography                | Styles applied to the root element.                          |
| .ods-typography\_\_heading1    | Styles applied to the root element if variant="heading1".    |
| .ods-typography\_\_heading2    | Styles applied to the root element if variant="heading2".    |
| .ods-typography\_\_heading3    | Styles applied to the root element if variant="heading3".    |
| .ods-typography\_\_heading4    | Styles applied to the root element if variant="heading4".    |
| .ods-typography\_\_subtitle1   | Styles applied to the root element if variant="subtitle1".   |
| .ods-typography\_\_subtitle2   | Styles applied to the root element if variant="subtitle2".   |
| .ods-typography\_\_paragraph   | Styles applied to the root element if variant="paragraph".   |
| .ods-typography\_\_lead        | Styles applied to the root element if variant="lead".        |
| .ods-typography\_\_description | Styles applied to the root element if variant="description". |
| .ods-typography\_\_caption     | Styles applied to the root element if variant="caption".     |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Typography/Typography.tsx) for more detail.

## Playground

<Canvas>
  <Story
    name="playground"
    args={{
      variant: 'heading3',
      children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    }}
    argTypes={{
      variant: {
        name: 'variant',
        options: [
          'heading1',
          'heading2',
          'heading3',
          'heading4',
          'heading5',
          'subtitle1',
          'subtitle2',
          'paragraph',
          'lead',
          'description',
          'caption',
          'captionbold',
          'eyebrow',
        ],
        control: { type: 'select' },
      },
    }}
  >
    {(props) => <Typography {...props} />}
  </Story>
</Canvas>
