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

<Meta of={stories} />

# Progress
> Indikerer status på en prosess. Den kan være definert med verdier fra start til slutt eller ubestemt. Progress går i loop når den er ubestemt.

## Kode
- Legg klassen `progress` på `<u-progress>`
- Sett numerisk verdi i attributtene `value` og `max`

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

[u-progress](https://u-elements.github.io/u-elements/elements/u-progress) 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 [HTMLProgressElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLProgressElement) interface ved behov.
</Details>
<Canvas of={stories.Default} />

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

## Farger
- Bruk `data-size="main | neutral | success | info | warning | danger"`
<Canvas of={stories.Colors} />

## Uten synlig label
- Bruk `aria-label` istedefor `<label>` for å visuelt skjult label
<Canvas of={stories.WithoutVisibleLabel} />

## Ubestemt
- Uten `value` blir `progress` ubestemt
<Canvas of={stories.Indeterminate} />


<CssVariables component="progress" />