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

<Meta of={stories} />

# Skeleton
> Skeleton brukes til å gi brukeren en midlertidig visuell tilbakemelding mens innholdet lastes eller behandles. Den er en enkel og minimalistisk versjon av det faktiske innholdet som skal vises.

## Kode
- Legg klassen `skeleton` på typisk `div` eller `span` (for tekst)
- Bruk `data-variant="rectangle | circle | text"`
- Bruk inline `style` for `width` og `height`
<Canvas of={stories.Default} />

## Sirkel
- Bruk `data-variant="circle"`
- Bruk inline `style` for `width` - height er automatisk lik width
<Canvas of={stories.Circle} />

## Tekst
- Bruk `data-variant="text"` på en `span`
- Innholdet bestemmer størrelsen på tekst-skeleton
<Canvas of={stories.Text} />

<CssVariables component="skeleton" />