import {
  ArgsTable,
  Canvas,
  Meta,
  Source,
  Story
} from '@storybook/addon-docs/blocks';
import Typography from 'components/Typography';
import CWBTheme, { ThemeProvider } from 'styles/CWBTheme';
import ErrorIcon from 'images/clear_circle.svg';

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

# Typography

Typography is the basic building blocks for all text.

<Canvas>
  <Story name="Typography">
    <Typography>This is a sample text.</Typography>
  </Story>
</Canvas>

<Source code="import { Typography } from 'cwb-react';" />

## Usage

Typography can be used for validations, updating color and style

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    <Typography color="error" variant="captionBold">
      <img style={{ marginLeft: '4px', marginBottom: '2px' }} src={ErrorIcon} />{' '}
      Error Message
    </Typography>
  </Canvas>
</ThemeProvider>

<Source
  code={`<Typography color="error" variant="captionBold">
               <img style={{marginLeft: '4px', marginBottom: '2px'}} src={ErrorIcon} />   Error Message
  </Typography>`}
/>

Colors can be customized with the `color` prop. By default, text is rendered in `black`.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <Typography>This is a sample text.</Typography>
      <Typography color="darkGrey">This is a sample text.</Typography>
      <Typography color="medGrey">This is a sample text.</Typography>
      <Typography color="lightGrey">This is a sample text.</Typography>
      <div style={{ width: 'fit-content', backgroundColor: 'black' }}>
        <Typography color="white">This is a sample text.</Typography>
      </div>
      <Typography color="error">This is a sample text.</Typography>
      <Typography color="success">This is a sample text.</Typography>
      <Typography color="link">This is a sample text.</Typography>
      <Typography color="disabled">This is a sample text.</Typography>
    </div>
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        '<Typography>This is a sample text.</Typography>\n' +
        '<Typography color="darkGrey">This is a sample text.</Typography>\n' +
        '<Typography color="medGrey">This is a sample text.</Typography>\n' +
        '<Typography color="lightGrey">This is a sample text.</Typography>\n' +
        '<Typography color="white">This is a sample text.</Typography>\n' +
        '<Typography color="error">This is a sample text.</Typography>\n' +
        '<Typography color="success">This is a sample text.</Typography>\n' +
        '<Typography color="link">This is a sample text.</Typography>\n' +
        '<Typography color="disabled">This is a sample text.</Typography>'
      }
    />
  </div>
</ThemeProvider>

Variant is a one-stop shop for defining the font size, font weight and line height. All text on a page should appear as one of the variants below.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <Typography style={{ marginBottom: '4px' }} variant="h1">
        h1. Heading
      </Typography>
      <Typography style={{ marginBottom: '4px' }} variant="h2">
        h2. Heading
      </Typography>
      <Typography style={{ marginBottom: '4px' }} variant="h3">
        h3. Heading
      </Typography>
      <Typography style={{ marginBottom: '4px' }} variant="h4">
        h4. Heading
      </Typography>
      <Typography style={{ marginBottom: '4px' }} variant="h5">
        h5. Heading
      </Typography>
      <Typography style={{ marginBottom: '4px' }}>
        body. This is a sample text.
      </Typography>
      <Typography style={{ marginBottom: '4px' }} variant="bodyBold">
        bodyBold. This is a sample text.
      </Typography>
      <Typography style={{ marginBottom: '4px' }} variant="caption">
        caption. This is a sample text.
      </Typography>
      <Typography style={{ marginBottom: '4px' }} variant="captionBold">
        captionBold. This is a sample text.
      </Typography>
    </div>
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        '<Typography variant="h1">h1. Heading</Typography>\n' +
        '<Typography variant="h2">h2. Heading</Typography>\n' +
        '<Typography variant="h3">h3. Heading</Typography>\n' +
        '<Typography variant="h4">h4. Heading</Typography>\n' +
        '<Typography variant="h5">h5. Heading</Typography>\n' +
        '<Typography>body. This is a sample text.</Typography>\n' +
        '<Typography variant="bodyBold">bodyBold. This is a sample text.</Typography>\n' +
        '<Typography variant="caption">caption. This is a sample text.</Typography>\n' +
        '<Typography variant="captionBold">captionBold. This is a sample text.</Typography>'
      }
    />
  </div>
</ThemeProvider>

According to WCAG 2.0, heading levels should not be skipped. That is, if a page has an `<h1>`, it must also have an `<h2>` before rendering an `<h3>`. This is because heading levels are read by screen readers, and skipping heading levels could mean to the user that content was possibly skipped over by the screen reader.

Unless otherwise specified, Typography renders a `<p>` component.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    <Typography component="h4" variant="h4">
      A heading with variant h4 rendered as an h4 HTML tag.
    </Typography>
    <Typography component="h2" variant="h4">
      The same variant heading rendered as an h2 HTML tag. They look the same,
      but have a meaningful difference to screen readers.
    </Typography>
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        '<Typography component="h4" variant="h4">\n' +
        '  A heading with variant h4 rendered as an h4 HTML tag.\n' +
        '</Typography>\n' +
        '<Typography component="h2" variant="h4">\n' +
        '  The same variant heading rendered as an h2 HTML tag. They look the same,\n' +
        '  but have a meaningful difference to screen readers.\n' +
        '</Typography>'
      }
    />
  </div>
</ThemeProvider>

## Props

<ArgsTable />