import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import { Example, CssVariables, JumpTo } from '../../.storybook/blocks';
import { Button, Popover } from '../react.tsx';
import * as stories from './typography.stories';
import { Flex } from '../react';
import styles from '../styles.module.css';
import { BuildingOfficeIcon, HeartIcon } from '@phosphor-icons/react';

<Meta of={stories} />

# Typography
> Vi bruker vår egen open source font Mattilsynet Sans i alle løsninger. God og lesbar typografi er et viktig virkemiddel både når vi skal ivareta Mattilsynets identitet og når vi bygger brukervennlige løsninger. 

<JumpTo />

## Text
- All tekst er automatisk satt til Figmas text style `text/default`
- Bruk klassen `ingress` for introtekster og <button type="button" data-popover="inline" popoverTarget="styles">`styles.muted`</button> eller `<small>` elementet for mindre tekst
- Tekststørrelser påvirkes av `data-size` (`mode: size` i Figma), og av teknikken [fluid typography](https://utopia.fyi/blog/designing-with-fluid-type-scales) som gradvis skalerer font ned et nivå basert på skjermbredde.
<Canvas of={stories.Default} />
<Popover id="styles">`import { styles } from '@mattilsynet/design'`</Popover>

## Heading
- Bruk klassen `styles.heading` på `<h[1-6]>` eller `<Heading as="h[1-6]">` komponenten
- Bruk `data-size="2xs | xs | sm | md | lg | xl | 2xl"`
- Bruk `data-justify="start | center | end"` for å endre tekstjustering
- I React kan du bruke `as="h1 | h2 | h3 | h4 | h5 | h6"` for å endre semantisk overskriftsnivå, hvor `h2` er default. 

> **Merk:** `data-size` endrer kun størrelse - ikke semantisk overskriftsnivå. Benytt alltid korrekt HTML `<h[1-6]>` eller `as="h[1-6]"` for [god universell utforming &rarr;](https://www.uutilsynet.no/veiledning/246-overskrifter-og-ledetekster/1253)

<Canvas of={stories.HeadingStory} />

## Prose
- Bruk klassen `prose` på typisk `div` eller annen container som har prosa/skjema/typografisk innhold
- `Prose` styler direkte barn med typografisk justert margin over og under for god lesbarhet
- Bruk `data-justify="start | center | end"` for å endre tekstjustering
<div className="sbdocs-canvas-thumbnail">
  <Button data-arrow data-variant="primary" href="?path=/story/designsystem-typography--prose">Se prose-layout i egen visning</Button>
  <Canvas className="sbdocs-canvas--max-height" of={stories.Prose} />
</div>

## Info
- Bruk `info` rundt ledetekst+verdi, ikon+verdi eller kun verdi for enkelt, responsivt oppsett
- Bruk `<svg>` for ikon eller `<i>` rundt ikon dersom svg ikke er mulig
- Bruk `<strong>` som direkte barn, rundt ledetekst eller verdi
- Bruk `<span data-nowrap>` som direkte barn for å å tvinge tekst på én linje
- Bruk `data-size="sm | md | lg"` for å endre størrelse
- Bruk `data-variant="circle"` for å få sirkel rundt ikonet
- Bruk `data-color="success | warning | danger"` på sirkevariant for å endre farge
- Kan også brukes rundt andre elementer for å lage informasjonsoppsett
<Canvas of={stories.InfoStory} />

<Flex data-items="350">

  {/* Info med ikon i sirkel */}
  <Example data-color="success" text="Med varianten circle skal både ledetekst og informasjon alltid vises." zoom="100%">
    <div className={styles.info} data-variant="circle"><BuildingOfficeIcon /> <strong>Firma</strong>Fisk & Video AS</div>
  </Example>

  <Example data-color="danger" text="Unngå bare informasjonstekst eller ledetekst når du bruker circle." zoom="100%">
    <div className={styles.info} data-variant="circle"><BuildingOfficeIcon /> Fisk & Video AS</div>
  </Example>

</Flex>

<CssVariables component="prose" />