import { Canvas, Meta, Story, Typeset } from '@storybook/addon-docs/blocks';
import { Link, Paragraph } from './typography.stories.js';

<Meta title="Documentation/Style/Typography" />

# <img src="./BmsIcon.png" /> Typography

## h1

**Font:** Roboto

**Weights:** 400(regular)

<Typeset
  fontSizes={[Number(typography.size.l1)]}
  fontWeight={typography.weight.regular}
  sampleText={SampleText}
  fontFamily={typography.type.primary}
/>

## h2

**Font:** Roboto

**Weights:** 500(semibold)

<Typeset
  fontSizes={[Number(typography.size.l2)]}
  fontWeight={typography.weight.semibold}
  sampleText={SampleText}
  fontFamily={typography.type.primary}
/>

## h3

**Font:** Roboto

**Weights:** 500(semibold)

<Typeset
  fontSizes={[Number(typography.size.l3)]}
  fontWeight={typography.weight.semibold}
  sampleText={SampleText}
  fontFamily={typography.type.primary}
/>

## Paragraph

**Font:** Roboto

**Weights:** 400(regular)

<Typeset
  fontSizes={[Number(typography.size.m1), Number(typography.size.m2)]}
  fontWeight={typography.weight.regular}
  sampleText={SampleText}
  fontFamily={typography.type.primary}
/>

## Link

**Font:** Roboto

<Canvas of={Link}></Canvas>

## Information

**Font:** Roboto

<Canvas of={Paragraph}></Canvas>
export const typography = {
  type: {
    primary: '"Roboto",',
  },
  weight: {
    regular: '400',
    semibold: '500',
    bold: '700',
  },
  size: {
    l1: 40,
    l2: 28,
    l3: 20,
    m1: 16,
    m2: 16,
    s1: 12,
    s2: 14,
    s3: 16,
  },
};

export const SampleText =
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
