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

<Meta of={stories} />

# Spinner
> En spinner er et visuelt element som viser at noe laster eller er i gang.

## Kode
- Bruk klassen `spinner` på typisk `<span>`
<Canvas of={stories.Default} />

## Størrelser
- Bruk `data-size="xs | sm | md | lg"`
<Canvas of={stories.Sizes} />

## Tekst
- Skriv tekst inni for dersom du ønsker
<Canvas of={stories.WithText} />

{/* ## Ferdig
- Legg på `data-state="complete"` for å få huke-animasjon
<Canvas of={stories.WithStateComplete} /> */}

<CssVariables component="spinner" />