import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import { CssVariables } from '../../.storybook/blocks';
import { Button } from '../react';
import * as stories from './errorsummary.stories';

<Meta of={stories} />

# Error summary
> ErrorSummary er en oppsummering av feil. Den gir brukeren oversikt over feil eller mangler som må rettes for å komme videre.

## Kode
- Bruk klassen `errorsummary` på `<ds-errorsummary>`
- Hver lenke skal være et anker som peker til `id` til relevante skjemafelt
- Legg `tabindex="-1"` på overskriften slik at den kan gå fokus
- Hvis `errorsummary` er synlig ved pageload: legg `autofocus` på overskriften
- Hvis `errorsummary` blir ved submit av skjema: flytt fokus til overskriften med `.focus()`
- **Merk:** Alle skjemafelt med feil skal ha en tilhørende [Validation](?path=/docs/designsystem-validation--docs). Errorsummary sin jobb er å gi en enkel oversikt og lenking alle feil.
- **Mønster:** [Se mønster for skjemafeilemeldinger](https://www.designsystemet.no/no/patterns/errors)

<Canvas of={stories.Default} />

## Komplett eksempel
- **Merk:** React kan ikke vise og flytte fokus i samme operasjon på grunn av asynkron uttegning. Bruk `setTimeout(() => { din-fokus-her })` for å flytte fokus etter at feilmeldingen er synlig.
<Canvas of={stories.WithForm} />

<CssVariables component="errorsummary" />