import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import { Example, CssVariables } from '../../.storybook/blocks';
import { Alert, Flex } from '../react';
import styles from '../styles.module.css';
import * as stories from './toast.stories';

<Meta of={stories} />

# Toast

> Toasts gir korte oppdateringer om status.
De skal ikke forstyrre brukeropplevelsen og kan forsvinne automatisk
eller krysses ut.

<Alert data-color="warning">Unngå bruk av toast da dette kan skape tilgjengelighetsproblemer<br />[Lær mer om hvorfor og alternativer til toast &rarr;](https://primer.style/accessibility/patterns/accessible-notifications-and-messages/#toasts)</Alert>

## Kode
- **Javascript:** Kall `toast(content: string, options)` fra `@mattilsynet/design`
- **React:** Kall `toast(content: React.ReactNode, options)` fra `@mattilsynet/design/react`
- **HTML:** Bruk klassen `toast` på `<dialog open data-timeout="milliseconds:  | false">`
<Canvas of={stories.Default} />

## Skikk og bruk
<Flex data-items="350">
  {/* Viser toast med lange navn: */}
  <Example data-color="success" data-variant="false" text="Bruk en kort, generisk og beskrivende setning i toast som bekrefter en handling." zoom="80%">
    <div className={styles.alert} data-color="success">
            Dokumentet er lagret
        </div>
  </Example>
  <Example data-color="danger" data-variant="false" text="Unngå lange setninger og innhold som er viktig for brukeren. Husk at det er anbefalt at toasten forsvinner automatisk." zoom="80%">
        <div className={styles.alert} data-color="success">
            Helsesertifikat-til-Storbritannia123.pdf har blitt lastet ned på din datamaskin. Husk å signere dokumentet og send det til mottaker i løpet av en uke.
        </div>
  </Example>
</Flex>

## Automatisk lukking
- Toast skjules automatisk etter 3000 millisekunder nedtelling
- Hvis brukeren holder musepekeren over toasten, pauses den automatiske nedtellingen
- Du kan endre antall millisekunder, eller sette `false` får å gjøre toasten permanent
- Bruk `toast(content, { timeout })` eller `data-timeout` i HTML for å endre timeout
<Canvas of={stories.WithNoTimeout} />

## Programatisk oppdatering
- Funksjonen `toast()` returner en `id` som kan brukes for oppdateringer
- Bruk `toast(content, { id })` for å oppdatere en toast
<Canvas of={stories.WithUpdates} />

## Lasting / Promise
- Funksjonen `toast.promise()` kan brukes for å vise lasting, suksess og feil
- Bruk `toast(promise, { loading, success, error })`
<Canvas of={stories.WithPromise} />

## Lukkekryss
- Lukkekryss tegnes automatisk
- Bruk `toast(content, { closedby: 'none' })` eller `closedby="none"` i HTML for å skjule
- Bruk `command="close" commandfor="TOAST-ID"` en button inni for egendefinert lukke-knapp
<Canvas of={stories.WithCustomClose} />

## Farger
- Støtter `main | info | success | warning | danger | neutral` (hvor `main` er default)
- Ikon følger automatisk med farge, med mindre du setter `toast(content, { icon: false })` eller `data-icon="false"`
- Bruk `toast.success`, `toast.danger`, `toast.info`, `toast.warning` eller `toast.neutral`, *eller* bruk `toast(content, { color })` eller `data-color` i HTML for å endre farge
<Canvas of={stories.Colors} />

<CssVariables component="toast" />