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

<Meta of={stories} />

# Details
>Trekkspill, accordions, expander eller details - kjært barn, mange navn. Med details kan du presentere mye innhold på liten plass i en eller flere rader. Hele raden er klikkbar og lar brukere åpne eller lukke visningen av innholdet under.

## Kode
- Legg klassen `details` på `<u-details>`
- Legg `<u-summary>` til som første barn med tittelen inni
- **React?** Bruk `<Details>` og `<Details.Summary>`

<Details>
<Details.Summary>Hva er `u-details`?</Details.Summary>

[u-details](https://u-elements.github.io/u-elements/elements/u-details) er en del av prosjektet [u-elements](https://u-elements.github.io/u-elements)
som sikrer universell utforming. Dette lastes automatisk når du bruker `@mattilsynet/design`.
Du kan benytte native tilhørende [HTMLDetailsElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement) interface ved behov.
</Details>

<Canvas of={stories.Default} />

## Card variant
- Bruk `data-variant="card"` for å få avrunnede kanter og bakgrunn
- Bruk `data-color="main | neutral"` for å endre farge
- Bruk `data-align="start"` for å justere innholdet til toppen
- Legg eventuelt til ikon som første barn av `<u-summary>`
<Canvas of={stories.VariantCard} />

<CssVariables component="details" />