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

<Meta of={stories} />

# Steps
> Steps viser fremdrift i en flerstegsprosess. Den forteller brukeren hvor langt man har kommet i en sekvens av trinn. Komponenten kan også brukes til å presentere en tidlinje.

## Kode
- Bruk klassen `steps` på `<ol>`
- Legg `<li>` elementer inni, med `<mark>` som barn av hver `<li>`
- Legg valgfritt til mer tekst etter `<mark>`
- Legg valgfritt ikon inni `<mark>` - dette erstatter standard ikon som følger fargene
- Bruk `aria-current="step"` på valgt `<li>`
- Bruk `data-color` for å endre farge på stegene
<Canvas of={stories.Default} />

## Fullført
- Bruk `data-state="complete"` for å få avhuking på alle stegene
<Canvas of={stories.WithStateComplete} />

## Retning
- Bruk `data-direction="right | down | up"` for å endre retningen på stegene
<Canvas of={stories.WithDirection} />

## Tidslinje
- Steg kan også brukes som en tidslinje
- Dersom du ikke setter `aria-current="step"`, men heller bruker `data-color="main | success | warning | danger"`, du ikke få fylt strek mellom punktene
<Canvas of={stories.Timeline} />

## Interaksjon
- Legg `<a>` eller `<button>` som direkte barn av `<li>` for å gjøre stegene interaktive
<Canvas of={stories.WithInteraction} />

<CssVariables component="steps" />