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

<Meta of={stories} />

# Chip
> Chip er små, interaktive komponenter som lar brukerne styre hvordan de vil se innhold. For eksempel kan de brukes til å filtrere kategorier i et søkeresultat og vise hvilke filtere som er aktive.

## Kode
- Bruk klassen `chip` på `<label>`
- Legg en `<input type="radio">` med klassen `input`
<Canvas of={stories.Radio} />

## Skikk og bruk
<Flex data-items="350">
  {/* Tekstmengde i chip: */}
  <Example data-color="success" text="Bruk korte konsiste ord i Chips" zoom="100%">
    <button type="button" className={styles.chip} data-removable> Rødspette </button>
  </Example>
  <Example data-color="danger" text="Unngå lange tekster i chips. Prøv å begrense til maks et par ord" zoom="100%">
    <button type="button" className={styles.chip} data-removable> Gebyr for tilsyn av fiskehelse og fiskevelferd </button>
  </Example>

   {/* Chip alignment: */}
  <Example data-color="success" text="Chips skal ligge etter hverandre og organisk brekke ned på neste linje." zoom="100%">
        <Flex data-gap="2">
        <label className={styles.chip}><input className={styles.input} type="radio" value="Laks" defaultChecked name="my-do" />Laks</label>
        <label className={styles.chip}><input className={styles.input} type="radio" value="Rødspette" name="my-do" />Rødspette</label>
        <label className={styles.chip}><input className={styles.input} type="radio" value="Sei" name="my-do" />Sei</label>
        <label className={styles.chip}><input className={styles.input} type="radio" value="Torsk" name="my-do" />Torsk</label>
        <label className={styles.chip}><input className={styles.input} type="radio" value="Ørret" name="my-do" />Ørret</label>

        </Flex>
  </Example>

  <Example data-color="danger" text="Chips skal ikke stables over hverandre, bruk heller radiobuttons." zoom="100%">
   <div>
      <label className={styles.chip}><input className={styles.input} type="radio" value="Laks" defaultChecked name="my-dont" />Laks</label>
      <br />
      <label className={styles.chip}><input className={styles.input} type="radio" value="Rødspette" name="my-dont" />Rødspette</label>
      <br />
      <label className={styles.chip}><input className={styles.input} type="radio" value="Sei" name="my-dont" />Sei</label>
      <br />
      <label className={styles.chip}><input className={styles.input} type="radio" value="Torsk" name="my-dont" />Torsk</label>
      <br />
      <label className={styles.chip}><input className={styles.input} type="radio" value="Ørret" name="my-dont" />Ørret</label>
    </div>
  </Example>

</Flex>

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

## Checkbox
- Bruk `type="checkbox"` i stedet for `type="radio"`
<Canvas of={stories.Checkbox} />

## Removable
- Bruk `data-removable` for å få lukke-kryss
<Canvas of={stories.Removable} />

## Innhold på en linje
- Bruk `<span data-nowrap>` rundt tekst dersom du ønsker å tvinge tekst til en linje
<Canvas of={stories.Nowrap} />

<CssVariables component="chip" />