import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import { Example, CssVariables } from '../../.storybook/blocks';
import * as stories from './tag.stories';
import { Flex, Prose } from '../react';
import styles from '../styles.module.css';

<Meta of={stories} />

# Tag
>Tags er merkelapper som kan brukes til å kategorisere elementer eller kommunisere fremdrift, status eller prosess. Tags kan gi brukeren et raskere overblikk over innholdet. Bruk tags når innholdet har mange kategorier og det er hensiktsmessig å kunne skille mellom dem. Tags er statiske merkelapper; de kan ikke klikkes på.

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

## Skikk og bruk
<Flex data-items="350">
  {/* Tekstmengde i tag: */}
  <Example data-color="success" text="Bruk korte konsiste ord i tags" zoom="100%">
    <span className={styles.tag} data-color="success">Hest</span>
  </Example>

  <Example data-color="danger" text="Unngå lange tekster i tags. Prøv å begrense til maks et par ord" zoom="100%">
    <span className={styles.tag} data-color="danger">Araberhest - Equus caballus arabicus</span>
  </Example>
</Flex>

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

## Farger og ikon
- Bruk `data-color="neutral | info | success | warning | danger"`
- Ikon følger automatisk med farge, med mindre du legger inn `<svg>` eller `data-icon="none"`
<Canvas of={stories.WithIcon} />

## Egenvalgt ikon
- Ikon forsvinner dersom du legger inn egen `<svg>` eller `data-icon="none"`
- [Ikon fra phosphoricons.com](https://phosphoricons.com/) kan legges før tekst
<Canvas of={stories.WithIconOverwrite} />

## Tooltip
- Bruk `data-tooltip="Hjelpetekst"`
- Bruk `data-tooltip-position="top | right | bottom | left"` for å endre plassering
- Teksten blir også automatisk tilgjengelig for skjermlesere
<Canvas of={stories.WithTooltip} />

<CssVariables component="tag" />