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

<Meta of={stories} />

# Fieldset
>Fieldset brukes til å gruppere og navngi felt som naturlig hører sammen, for eksempel datofelt eller adressefelt. Komponenten hjelper med å organisere informasjon, gjøre skjemaer mer oversiktlige og forbedre tilgjengeligheten for skjermlesere.

## Kode
- Legg klassen `fieldset` på `<fieldset>` rundt `<legend>` og skjemafelter
- Dette grupperer typisk `checkbox` eller `radio` inputs
<Canvas of={stories.Radios} />

## Skikk og bruk
<Flex data-items="350">
   {/* Vertikal vs horisontal alignment: */}
  <Example data-color="success" text="Radiobutton- og checkboxgrupper skal i hovedsak stables vertikalt slik at alternativene er lette å lese." zoom="100%">
  <div className={styles.grid}>
    <label>Velg dyregruppe</label>
    <ds-field className={styles.field}>
        <label>Fisk</label>
        <input type="radio" className={styles.input} name="my-radio" defaultChecked />
    </ds-field>
    <ds-field className={styles.field}>
      <label>Fjørfe</label>
      <input type="radio" className={styles.input} name="my-radio" />
    </ds-field>
    <ds-field className={styles.field}>
      <label>Storfe</label>
      <input type="radio" className={styles.input} name="my-radio" />
    </ds-field>
  </div>
  </Example>
  <Example data-color="danger" text="Radiobutton- og checkboxgrupper bør ikke legges etter hverandre. Da er det vanskeligere skanne innholdet" zoom="100%">
    <div className={styles.grid}>
      <label>Velg dyregruppe</label>
      <Flex data-gap="10">
        <ds-field className={styles.field}>
          <label>Fisk</label>
          <input type="radio" className={styles.input} name="my-radio" defaultChecked />
        </ds-field>
        <ds-field className={styles.field}>
          <label>Fjørfe</label>
          <input type="radio" className={styles.input} name="my-radio" />
        </ds-field>
        <ds-field className={styles.field}>
          <label>Storfe</label>
          <input type="radio" className={styles.input} name="my-radio" />
        </ds-field>
      </Flex>
     </div>
  </Example>

  {/* Label + Input: */}
  <Example data-color="success" text="Input, radiobutton- og checkboxgrupper skal alltid ha en tydelig label." zoom="100%">
    <div className={styles.grid}>
      <label>Velg størrelse</label>
      <ds-field className={styles.field}>
        <label>Liten</label>
        <input type="radio" className={styles.input} name="my-radio" defaultChecked />
      </ds-field>
      <ds-field className={styles.field}>
        <label>Medium</label>
        <input type="radio" className={styles.input} name="my-radio" />
      </ds-field>
      <ds-field className={styles.field}>
        <label>Stor</label>
        <input type="radio" className={styles.input} name="my-radio" />
      </ds-field>
    </div>
  </Example>

  <Example data-color="danger" text="Uten en label kan alternativene være vanskelige eller umulige å forstå." zoom="100%">
    <Grid>
      <ds-field className={styles.field}>
        <label>Liten</label>
        <input type="radio" className={styles.input} name="my-radio" defaultChecked />
      </ds-field>
      <ds-field className={styles.field}>
        <label>Medium</label>
        <input type="radio" className={styles.input} name="my-radio" />
      </ds-field>
      <ds-field className={styles.field}>
        <label>Stor</label>
        <input type="radio" className={styles.input} name="my-radio" />
      </ds-field>
     </Grid>
  </Example>
</Flex>

## Obligatoriske felter
- Dersom alle skjemafelter er påkrevd, vises dette automatisk i `<legend>`
- Teksten `Må fylles ut` oversettes automatisk til `Required` dersom du setter `<html lang="en">`. Du kan også selv endre tekst med CSS custom property: `--mtds-text-required: "Må fylles ut";`
- **Merk:** Dersom du ønsker å skru denne [lovpålagte merkingen av obligatoriske felter](https://www.designsystemet.no/monstre/obligatoriske-og-valgfrie-felt), kan du legge `data-required="hidden"` på hvilket som helst element (f.eks. `<html data-required="hidden">` for å skru av for hele dokumentet)
<Canvas of={stories.Radios} />

## Innebygget skjemavalidering
- Nettleserens innebyggede valideringsmeldinger skjules pga. begrenset styling og universell utforming
- Du kan allikevel få [nettleserens innebygge skjemavalidering](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation#using_built-in_form_validation) til å automatisk skjule og vise [validation-komponentet](?path=/docs/designsystem-validation--docs) ved å legge `data-validation="form"` på `fieldset` 
- **Merk:** Legg du vil vise valideringsmelding ved hvert input-element, må `data-validation="form"` legges på hvert enkelt `field`
<Canvas of={stories.WithValidationForm} />

## Checkboxes
<Canvas of={stories.Checkboxes} />

## Disabled
- Legg attributten `disabled` rett på `fieldset`
<Canvas of={stories.Disabled} />

## Read only
- Legg attributten `readonly disabled` på hver `input`
<Canvas of={stories.ReadOnly} />

{/* ## Horisontal NOT RECOMMENDED
- Legg attributten `field` inni en `flex` med `data-gap="9"`
- Brukes kun ved få svaralternativer
<Canvas of={stories.Horizontal} /> */}

## Feilmelding
- Legg klassen `validation` på et direkte barn for å knytte feilmelding til alle inputs
<Canvas of={stories.WithValidation} />

<CssVariables component="fieldset" />