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

<Meta of={stories} />

# Dialog

> Dialog lar deg lage et vindu som kan vises foran innholdet på en side. Den kan enten være modal, som betyr at brukeren må gjøre noe før de kan komme videre, eller ikke-modalt, som bare er et vanlig vindu som kan lukkes når man vil.

<JumpTo />

## Kode
- Legg klassen `dialog` på `<dialog>`
- Åpnes enten med `open` attribute, button med `command="show-modal | show" commandfor="DIALOG-ID"` eller `.showModal() | .show()` metodene
- **Merk:** Dialog sentreres med `transform`, så skal du plassere den et annet sted, sett `transform: none`
<Canvas of={stories.Default} />

## Lukke knapp
- Legg `command="close" commandfor="DIALOG-ID"` på en button inni for lukke-knapp
- Første tomme knapp i `<dialog>` vil automatisk styles som lukke-knapp
- Legg evt. til flere knapper for lukking
<Canvas of={stories.WithClose} />

## Klikk utenfor dialog for å lukke
- Legg `closedby="any"` på `<dialog>`
<Canvas of={stories.WithBackdropClose} />

## Ikke-modal
- Legg `data-modal="false"` på `<dialog>`
<Canvas of={stories.WithoutBackdrop} />

## Med sticky footer
- Legg et `<footer>` element inn som siste barn for å få sticky footer
- **Merk:** Legg `form="ID-OF-FORM-HERE"` på knappen i footer som skal sende inn skjema
<Canvas of={stories.VariantDrawerWithoutBackdrop} />

<CssVariables component="dialog" exclude="divider" />