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

<Meta of={stories} />

# Input
>Input er et skjemaelement for å samle inn brukerdata. Det tilbyr grunnleggende funksjonalitet og er ideell når du trenger full kontroll over komponentens oppsett og validering, noe som gjør det ideelt for bygging av spesialtilpassede elementer.

<JumpTo />

## Kode
- Legg klassen `input` på `<input>`, `<select>` eller `<textarea>`
- Input `type="radio"`, `type="checkbox"` og `role="switch"`  er også støttet
- Bruk [field](?path=/docs/designsystem-field--docs) for automatisk kobling mot `<label>` eller `aria-label` på `input` for skjult label
<Canvas of={stories.Default} />

## Skikk og bruk
### Tekstfelt
<Flex data-items="350">
  {/* Viser tekstfelt som ligger over hverandre */}
  <Example data-color="success" data-variant="false" text="Plasser tekstfelt over hverandre, slik at det er lettere å navigere mellom komponentene og skanne innholdet." zoom="100%">
    <div className={styles.prose} data-items="auto"> 
        <ds-field className={styles.field}>
            <label>Fornavn</label>
            <input className={styles.input} />
        </ds-field>

        <ds-field className={styles.field}>
            <label>Etternavn</label>
            <input className={styles.input} />
        </ds-field>

        <ds-field className={styles.field}>
            <label>E-post</label>
            <input className={styles.input} />
        </ds-field>

        <ds-field className={styles.field}>
            <label>Telefon</label>
            <input className={styles.input} />
        </ds-field>
    </div> 

  </Example>
  <Example data-color="danger" data-variant="false" text="Unngå plassering av tekstfelt ved siden av hverandre. Skannbarheten blir dårligere." zoom="100%">
        <div className={styles.grid} data-items="150" data-gap="6"> 
            <ds-field className={styles.field}>
                <label>Fornavn</label>
                <input className={styles.input} type="number" />
            </ds-field>

            <ds-field className={styles.field}>
                <label>Etternavn</label>
                <input className={styles.input} type="text" inputMode="numeric" />
            </ds-field>
             <ds-field className={styles.field}>
                <label>E-post</label>
                <input className={styles.input} type="number" />
            </ds-field>

            <ds-field className={styles.field}>
                <label>Telefon</label>
                <input className={styles.input} type="text" inputMode="numeric" />
            </ds-field>           
        </div>
  </Example>
</Flex>

### Switch
<Flex data-items="350">
  {/* Viser tekstfelt som ligger over hverandre */}
  <Example data-color="success" data-variant="false" text="Bruk tydelig og beskrivende labeltekst. Status vises i selve komponenten." zoom="100%">
    <ds-field className={styles.field}>
        <label>Varsle via e-post</label>
        <input type="checkbox" role="switch" className={styles.input} />
    </ds-field>
  </Example>
  <Example data-color="danger" data-variant="false" text="Unngå beskrivelse av status i labelteksten, da dette kan forvirre brukeren." zoom="100%">
    <ds-field className={styles.field}>
        <label>Slå på e-postvarsling</label>
        <input type="checkbox" role="switch" className={styles.input} />
    </ds-field>
  </Example>
</Flex>

### Radio
<Flex data-items="350">
    <Example data-color="success" data-variant="false" text="Det er anbefalt å bruke radio hvis du har færre enn 5-7 alternativer." zoom="100%">
    <fieldset className={styles.fieldset}>
        <legend>Skal du reise med hund?</legend>
                <ds-field className={styles.field}>
                    <input type="radio" className={styles.input} name="do-radio"/>
                    <label>Ja</label>
                </ds-field>
                <ds-field className={styles.field}>
                    <input type="radio" className={styles.input} name="do-radio"/>
                    <label>Nei</label>
                </ds-field>
    </fieldset>
  </Example>
  <Example data-color="danger" data-variant="false" text="Bruk av radio med mange alternativer gjør det mer tungvindt for bruker å ta et raskt valg." zoom="100%">
    <fieldset className={styles.fieldset}>
        <legend>Hvilken hunderase skal du reise med?</legend>
                <ds-field className={styles.field}>
                    <input type="radio" className={styles.input} name="dont-radio"/>
                    <label>Golden retriever</label>
                </ds-field>
                <ds-field className={styles.field}>
                    <input type="radio" className={styles.input} name="dont-radio"/>
                    <label>Fuglehund</label>
                </ds-field>
                <ds-field className={styles.field}>
                    <input type="radio" className={styles.input} name="dont-radio"/>
                    <label>Cocker spaniel</label>
                </ds-field>
                <ds-field className={styles.field}>
                    <input type="radio" className={styles.input} name="dont-radio"/>
                    <label>Terrier</label>
                </ds-field>
                <ds-field className={styles.field}>
                    <input type="radio" className={styles.input} name="dont-radio"/>
                    <label>Beagle</label>
                </ds-field>
                <ds-field className={styles.field}>
                    <input type="radio" className={styles.input} name="dont-radio"/>
                    <label>Chihuahua</label>
                </ds-field>
                <ds-field className={styles.field}>
                    <input type="radio" className={styles.input} name="dont-radio"/>
                    <label>Puddel</label>
                </ds-field>
                <ds-field className={styles.field}>
                    <input type="radio" className={styles.input} name="dont-radio"/>
                    <label>Setter</label>
                </ds-field>
                <ds-field className={styles.field}>
                    <input type="radio" className={styles.input} name="dont-radio"/>
                    <label>Spisshund</label>
                </ds-field>
    </fieldset>
  </Example>
</Flex>

### Select
<Flex data-items="350">
    <Example data-color="success" data-variant="false" text="Bruk select når det er mange alternativer." zoom="100%">
            <ds-field className={styles.field}>
                <label>Hvor skal du reise med hund?</label>
                <select className={styles.input}>
                    <option>Albania</option>
                    <option>Bahamas</option>
                    <option>Canada</option>
                    <option>Danmark</option>
                    <option>Estland</option>
                    <option>Finland</option>
                    <option>Georgia</option>
                    <option>Hellas</option>
                    <option>India</option>
                    <option>Japan</option>
                    <option>Kroatia</option>
                    <option>Latvia</option>
                    <option>Maldivene</option>
                </select>
            </ds-field>
  </Example>
  <Example data-color="danger" data-variant="false" text="Ikke bruk select når det er få alternativer." zoom="100%">
            <ds-field className={styles.field}>
                <label>Har hunden noen kjente sykdommer?</label>
                <select className={styles.input}>
                    <option>Ja</option>
                    <option>Nei</option>
                </select>
            </ds-field>
  </Example>
</Flex>

## Typer
- Bruk `<select>`, `<textarea>` eller `<input type="text | checkbox | radio | email | number | password | radio | search | tel | url">`
- Kombiner `type="checkbox" role="switch"` for å få bryter-design
<Canvas of={stories.Types} />

## Størrelser
- Bruk `data-size="sm | md | lg"`
- Bruk `size="number"` for å sette en bredde som indikere antall tegn
<Canvas of={stories.Sizes} />

## Read only
- Legg på attributt `readonly`
- Husk også `disabled` dersom du legger `readonly` på `type="checkbox"` eller `type="radio"`, siden disse ikke stoppes automatisk av nettleseren
- **Merk:** `readonly disabled` felter ikke sendes inn som skjemadata i verken `<form>` eller `FormData`
<Canvas of={stories.ReadOnly} />

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

## Indeterminate
- Legg på attributt `data-indeterminate` på `type="checkbox"` for å indikere en tilstand som er verken av eller på, f.eks
<Canvas of={stories.Indeterminate} />

## Søk
- Bruk `type="search"`
- Bruk `data-icon="none"` dersom du ønsker å skjule forstørrelsesglass-ikonet
<Canvas of={stories.TypeSearch} />

## Datovelger
- Bruk `type="date"`
<Canvas of={stories.TypeDate} />

## Tall
- Øker taller inkrementelt (f.eks. et antall av noe)? Bruk `type="number"`
- Skal tallet ikke øke (f.eks. referansenummer, fødselsnummer, etc.)? Bruk `type="text" inputmode="numeric"`
- Nysgjerrig? [Les mer om input og tall på GOV.uk](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/)
<Canvas of={stories.TypeNumber} />

## Variant Inline (Eksperimentell)
- Bruk `data-variant="inline"` på `input`, `select` eller `textarea` for subtil fremtoning
<Canvas of={stories.VariantInline} />

<CssVariables component="input" />