import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
import { ComponentName, Frame, Link, RelatedComponents } from '../../components'
import { TextStyles } from './text-styles/text-styles'
import { TextColors } from '../../components/text-colors/text-colors'
import {
  COLORS,
  SHADOW,
  SPACING,
} from '../../components/related-components/component-description-map'
import { typographyExample1, typographyExample2 } from './assets'

import Typography from './Typography'

import './typography.scss'

<Meta title='Foundations/Typography' />

<!--- Component documentation -->

<ComponentName withFoundationBackground>Typography</ComponentName>

- [Overview](#overview)
- [Text styles](#text-styles)
- [Text colors](#text-colors)
- [Usage and examples](#usage-and-examples)
- [Feedback](#feedback)

## Overview

Like in other ui in l3vels's interface, typography works by principle of accessibility before aesthetics.
Therefore the text should be readable and help the user understand what’s important by well contrasted size and colors hierarchy.

## Text styles

<TextStyles />

## Label

<Canvas>
  <Story name='Label'>
    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
      <Typography
        value='label large'
        type={Typography.types.LABEL}
        size={Typography.sizes.lg}
        as={'label'}
      />
      <Typography
        value='label medium'
        type={Typography.types.LABEL}
        size={Typography.sizes.md}
        as={'label'}
      />
      <Typography
        value='label small'
        type={Typography.types.LABEL}
        size={Typography.sizes.sm}
        as={'label'}
      />
      <Typography
        value='label xs-small'
        type={Typography.types.LABEL}
        size={Typography.sizes.xss}
        as={'label'}
      />
    </div>
  </Story>
</Canvas>

## Paragraph

<Canvas>
  <Story name='Paragraph'>
    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
      <Typography
        value='paragraph large'
        type={Typography.types.P}
        size={Typography.sizes.lg}
        as={'p'}
      />
      <Typography
        value='paragraph medium'
        type={Typography.types.P}
        size={Typography.sizes.md}
        as={'p'}
      />
      <Typography
        value='paragraph small'
        type={Typography.types.P}
        size={Typography.sizes.sm}
        as={'p'}
      />
      <Typography
        value='paragraph xs-small'
        type={Typography.types.P}
        size={Typography.sizes.xss}
        as={'p'}
      />
    </div>
  </Story>
</Canvas>

## Text colors

<TextColors />

## Usage and examples

<UsageGuidelines
  guidelines={[
    'Use fonts bigger than 14 pixel only.',
    <>Don’t underline words, use bold text.</>,
    "Don't use two different sizes of text in the same line.",
  ]}
/>

<Tip title='What font to use?'>
  We are using Roboto from Google Fonts as default for our design system. Click{' '}
  <Link size={Link.sizes.SMALL} href='https://fonts.google.com/specimen/Roboto' withoutSpacing>
    here
  </Link>{' '}
  to download.
</Tip>

<Frame className='l3-storybook-typography_image-container l3-storybook-typography_image-container--first'>
  <img src={typographyExample1} alt='' className='l3-storybook-typography_popup-example' />
</Frame>
<Frame className='l3-storybook-typography_image-container'>
  <img src={typographyExample2} alt='' className='l3-storybook-typography_timeline-example' />
</Frame>

## Up next

<RelatedComponents componentsNames={[COLORS, SPACING, SHADOW]} />
