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