import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import { Example, CssVariables } from '../../.storybook/blocks';
import * as stories from './togglegroup.stories';
import { Grid } from '../react';
import { Flex } from '../react';
import styles from '../styles.module.css';
import { TextAlignCenterIcon, TextAlignLeftIcon, TextAlignRightIcon } from '@phosphor-icons/react';

<Meta of={stories} />

# Togglegroup
> ToggleGroup lar brukeren ta valg som påvirker innholdet på siden. Komponenten består av en gruppe knapper som henger sammen og bare én knapp kan være valgt om gangen.

## Kode
- Bruk klassen `togglegroup` på `<fieldset>` med `data-toggle-group="LABEL-PÅ-GRUPPEN"`
- Legg `<label><input type="radio">` elementer inni med samme `name` og `checked` på valgt verdier
<Canvas of={stories.Default} />


## Skikk og bruk

<Grid data-items={350} data-gap="5">
  > ✅ **Egnet til:**<br />Filtrering eller endring av visning av samme innhold

  > ❌ **Uegnet til:**<br />Navigasjon eller erstatning for radio/checkbox
</Grid>

<Flex data-items="350">
  {/* Togglegroup med ikon */}
  <Example data-color="success" text="ToggleGroup med bare ikoner bør kun brukes i ekspertløsninger. Bruk tooltip sammen med ikon." zoom="100%">
  <div className={styles.grid}>
      <fieldset className={styles.togglegroup} data-toggle-group="Mappe">
        <label className={styles.button} data-tooltip="Venstrejustert">
          <input type="radio" name="my-icon-example-1" value="left" />
          <TextAlignLeftIcon />
        </label>
        <label className={styles.button} data-tooltip="Sentrert">
          <input type="radio" name="my-icon-example-1" value="center" defaultChecked />
          <TextAlignCenterIcon />
        </label>
        <label className={styles.button} data-tooltip="Høyrejustert">
          <input type="radio" name="my-icon-example-1" value="right" />
          <TextAlignRightIcon />
        </label>
      </fieldset>
    </div>
  </Example>

  <Example data-color="danger" text="ToggleGroup med bare ikoner bør ha tooltip." zoom="100%">
    <div className={styles.grid}>
      <fieldset className={styles.togglegroup} data-toggle-group="Mappe">
        <label className={styles.button}>
          <input type="radio" name="my-icon-example-2" value="left" />
          <TextAlignLeftIcon />
        </label>
        <label className={styles.button}>
          <input type="radio" name="my-icon-example-2" value="center" defaultChecked />
          <TextAlignCenterIcon />
        </label>
        <label className={styles.button}>
          <input type="radio" name="my-icon-example-2" value="right" />
          <TextAlignRightIcon />
        </label>
      </fieldset>
    </div>
  </Example>
</Flex>

## Med lenker

- Hvis du ønsker lenker istedenfor radio-knapper: Bruk `<nav>`, ikke `<fieldset>`
- Bruk `aria-current="true"` på den aktive lenken
<Canvas of={stories.AsLinks} />

<CssVariables component="togglegroup" />