import Typography from '../Typography';

import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';

export const argTypes = {
  component: Typography,
  title: 'Foundations/Typography',
};

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

<Heading title="Typography" componentRelativePath="Typography/Typography.js" />

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Contribute](#contribute)

## Overview

Typography is a component that renders the Typographys.

<Canvas>
  <Story name="Overview">
    <Typography variant="h1" className="text-blue-800">
      Heading 1
    </Typography>
  </Story>
</Canvas>

### Usage

#### Variants

There are several variants of the Typography component.

<Canvas>
  <Story name="Variants">
    <Typography variant="h1" className="text-blue-800">
      Heading 1
    </Typography>
    <Typography variant="h2" className="text-blue-800">
      Heading 2
    </Typography>
    <Typography variant="h3" className="text-blue-800">
      Heading 3
    </Typography>
    <Typography variant="h4" className="text-blue-800">
      Heading 4
    </Typography>
    <Typography variant="h5" className="text-blue-800">
      Heading 5
    </Typography>
    <Typography variant="h6" className="text-blue-800">
      Heading 6
    </Typography>
    <Typography variant="p" className="text-blue-800">
      Paragraph
    </Typography>
    <Typography variant="subtitle" className="text-blue-800">
      Subtitle
    </Typography>
    <Typography variant="caption" className="text-blue-800">
      Caption
    </Typography>
    <Typography variant="body" className="text-blue-800">
      Body
    </Typography>
  </Story>
</Canvas>

#### Text Color

You can use the `color` prop to change the color of the text.

<Canvas>
  <Story name="Text Color">
    <Typography variant="h5" color="primary">
      Primary Color
    </Typography>
    <Typography variant="h5" color="secondary">
      Secondary Color
    </Typography>
    <Typography variant="h5" color="error">
      Error Color
    </Typography>
    <Typography variant="h5" color="inherit">
      Inherit Color
    </Typography>
  </Story>
</Canvas>

#### Custom className

You can use the `className` prop to add a custom className to the Typography.

<Canvas>
  <Story name="Custom Class">
    <Typography variant="h5" className="text-red-400">
      Custom Red Color
    </Typography>
  </Story>
</Canvas>

#### Align

<Canvas>
  <Story name="Align">
    <Typography variant="body" align="left" color="primary">
      Align Left: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
      tincidunt tempus ante, non blandit sem vehicula ac. Vestibulum in dolor
      commodo, elementum massa scelerisque, molestie nulla. Aenean sed odio
      interdum, rutrum ex at, volutpat diam. Donec vel tristique sem, eget
      iaculis velit. Aenean placerat justo
    </Typography>
    <br />
    <Typography variant="body" align="center" color="primary">
      Align Center: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
      tincidunt tempus ante, non blandit sem vehicula ac. Vestibulum in dolor
      commodo, elementum massa scelerisque, molestie nulla. Aenean sed odio
      interdum, rutrum ex at, volutpat diam. Donec vel tristique sem, eget
      iaculis velit. Aenean placerat justo
    </Typography>
    <br />
    <Typography variant="body" align="right" color="primary">
      Align Right: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
      tincidunt tempus ante, non blandit sem vehicula ac. Vestibulum in dolor
      commodo, elementum massa scelerisque, molestie nulla. Aenean sed odio
      interdum, rutrum ex at, volutpat diam. Donec vel tristique sem, eget
      iaculis velit. Aenean placerat justo
    </Typography>
    <br />
    <Typography variant="body" align="justify" color="primary">
      Align Justify: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Sed tincidunt tempus ante, non blandit sem vehicula ac. Vestibulum in
      dolor commodo, elementum massa scelerisque, molestie nulla. Aenean sed
      odio interdum, rutrum ex at, volutpat diam. Donec vel tristique sem, eget
      iaculis velit. Aenean placerat justo
    </Typography>
  </Story>
</Canvas>

## Props

<ArgsTable of={Typography} />

## Usage

## Contribute

<Footer componentRelativePath="Typography/__stories__/typography.stories.mdx" />
