import { Meta, Typeset } from '@storybook/addon-docs';
import '../styles/shared.css';

<Meta title="Design Tokens/Typographie" />

export const typography = {
    type: {
        primary: 'Arial',
    },
    weight: {
        regular: '400',
        bold: '700',
        extrabold: '800',
        black: '900',
    },
    size: {
        s1: 12,
        s2: 14,
        s3: 16,
        m1: 18,
        m2: 20,
        m3: 24,
        l1: 28,
        l2: 30,
        l3: 32,
        l4:40,
    },
};

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

<div className="header">
  <h1>Typographie</h1>
  <p>Les grands principes typographiques du Design System.</p>
</div>

Impulsé par les travaux réalisés sur [Ameli.fr](https://www.ameli.fr/), le Design System fournit un ensemble limité et ciblé de styles typographiques que nous utilisons pour présenter l'interface utilisateur et le contenu de la manière la plus claire et la plus efficace possible tout en assurant la cohérence de la marque sur l’ensemble des plateformes.

Les grands principes typographiques du Design System sont les suivants :

- **Une unique typographie.**

L’usage de la typographie système Arial nous permet de ne pas charger de polices sur nos plateforme et de s’assurer que les contenus textuels seront affichés comme souhaité sur tous les appareils.

- **Un nombre limité de tailles de polices.**

Le design system utilise 10 tailles de police différente allant de 12 (la taille minimum permettant une lecture confortable) à 40px (la taille maximum permettant la mutualisation entre desktop et mobile) (0,75 à 2,5rem). Cette échelle limitée nous permet de mutualiser les utilisations quelle que soit la taille de l’écran.
<br />

<img alt="Arial" src={'/font-arial.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

**Weights:** 400(regular), 700(bold), 900(black)

<Typeset
    fontSizes={[
        Number(typography.size.s1),
        Number(typography.size.s2),
        Number(typography.size.s3),
        Number(typography.size.m1),
        Number(typography.size.m2),
        Number(typography.size.m3),
        Number(typography.size.l1),
        Number(typography.size.l2),
        Number(typography.size.l3),
        Number(typography.size.l4),
    ]}
    fontWeight={typography.weight.regular}
    sampleText={SampleText}
    fontFamily={typography.type.primary}
/>

**Interlignage:** 2 ratio de line-height :

- 130% quand le `font-size` est supérieur à 18px
- 150% quand le `font-size` est inférieur ou égal à 18px