import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import { Example, CssVariables } from '../../.storybook/blocks';
import { HeartIcon, StarIcon } from '@phosphor-icons/react';
import { Flex } from '../react';
import * as stories from './button.stories';
import styles from '../styles.module.css';
import { Alert } from '../react';

<Meta of={stories} />

# Button

> Knapper lar brukeren utføre en handling.

## Kode
- Legg klassen `button` på typisk `<button>` eller `<a>`
- Husk `type="button"` hvis en `<button>` gjør noe annet enn å sende skjema
- Bruk `data-variant="primary | secondary | tertiary"`
- **Merk:** `data-variant="tertiary"` er default siden dette benyttes mest, men for å sikre god universell utforming må knappen da inneholde enten ikon og tekst, eller plasseres ved andre knapper.
- **Next.js og lenke?** Bruk `<Button as={Link} to={url}>` for å hvor `Link` hentes fra Next.js.
<Alert data-color="warning">
**Viktig:** Dersom en knapp innholder personopplysninger, for eksempel navn, må du sette `data-analytics-name=""` for å unngå personopplysninger i analyse-logger
</Alert>
<Canvas of={stories.Default} />

## Skikk og bruk

<Flex data-items="350">
  {/* Viser knapp med lange navn: */}
  <Example data-color="success" text="Bruk korte beskrivende navn på knapper" zoom="100%">
    <button type="button" className={styles.button} data-variant="primary">Lagre</button>
  </Example>
  <Example data-color="danger" text="Lange tekster og flere handlinger på samme knapp bør unngås." zoom="100%">
    <button type="button" className={styles.button} data-variant="primary">Lagre og send inn skjemaet</button>
  </Example>

  {/* Viser tertiærknapp som står alene: */}
  <Example data-color="success" text="Tertiærknapp bør alltid stå sammen med en primærknapp eller sekundærknapp, eller inneholde ikon" zoom="100%">
    <div className={styles.flex}>
      <button type="button" className={styles.button} data-variant="secondary">Lagre</button>
      <button type="button" className={styles.button} data-variant="tertiary">Avbryt</button>
    </div>
  </Example>
  <Example data-color="danger" text="Unngå å bruke tertiærknapp alene. Vurdér å bruke en sekundærknapp istedenfor eller legg til et ikon" zoom="100%">
    <button type="button" className={styles.button} data-variant="tertiary">Avbryt</button>
  </Example>

  {/* Viser tertiærknapp med ikon: */}
  <Example data-color="success" text="Tertiærknapp alene kan brukes med et ikon" zoom="100%">
    <button type="button" className={styles.button} data-variant="tertiary"><StarIcon />Favoritt</button>
  </Example>
  <Example data-color="danger" text="Tertiærknapp alene bør brukes med et ikon" zoom="100%">
    <button type="button" className={styles.button} data-variant="tertiary">Favoritt</button>
  </Example>

  {/* Viser knapp med konsistent størrelse: */}
  <Example data-color="success" text="Bruk konsistente størrelser på knapper" zoom="100%">
    <div className={styles.flex}>
      <button type="button" className={styles.button} data-variant="primary">Lagre</button>
      <button type="button" className={styles.button} data-variant="tertiary">Avbryt</button>
    </div>
  </Example>
  <Example data-color="danger" text="Unngå ulike størrelser på knapper" zoom="100%">
    <div className={styles.flex}>
      <button type="button" className={styles.button} data-variant="primary" data-size='sm'>Lagre</button>
      <button type="button" className={styles.button} data-variant="secondary" data-size='lg'>Avbryt</button>
    </div>
  </Example>

  {/* Viser knapp med bare ikon: */}
  <Example data-color="success" text="Button kan brukes med bare ikon. Da må den ha en beskrivende tooltip" zoom="100%">
    <button type="button" className={styles.button} data-variant="tertiary" data-tooltip="Hjelpetekst"><StarIcon /></button>
  </Example>
  <Example data-color="danger" text="Når button bare inneholder et ikon skal den ha en beskrivende tooltip " zoom="100%">
    <button type="button" className={styles.button} data-variant="tertiary"><StarIcon /></button>
  </Example>

  {/* Samme fargevariant i en gruppe: */}
  <Example data-color="success" text="Buttons skal ha samme fargestil innenfor en gruppe" zoom="100%">
    <div className={styles.flex}>
      <button type="button" className={styles.button} data-variant="primary">Lagre</button>
      <button type="button" className={styles.button} data-variant="tertiary">Avbryt</button>
    </div>
  </Example>
  <Example data-color="danger" text="Unngå å blande fargestil på knapper i samme gruppe" zoom="100%">
    <div className={styles.flex}>
      <button type="button" className={styles.button} data-variant="primary" data-color='danger'>Lagre</button>
      <button type="button" className={styles.button} data-variant="tertiary" data-color='info'>Avbryt</button>
    </div>
  </Example>

  {/* Stor forbokstav: */}
  <Example data-color="success" text="Bruk stor forbokstav og resten små (sentence case) for best mulig lesbarhet" zoom="100%">
    <button type="button" className={styles.button} data-variant="primary">Send søknad</button>
  </Example>
  <Example data-color="danger" text="Ikke bruk store bokstaver eller en blanding av små og store bokstaver i en knapp" zoom="100%">
    <div className={styles.prose}>
      <button type="button" className={styles.button} data-variant="primary">SEND SØKNAD</button>
      <button type="button" className={styles.button} data-variant="primary">Send Søknad</button>
      <button type="button" className={styles.button} data-variant="primary">send søknad</button>
    </div>
  </Example>

  {/* Kun én call to action: */}
  <Example data-color="success" text="En side skal bare ha én call to action-button" zoom="100%">
    <div className={styles.button}>
    <button type="button" className={styles.button} data-variant="primary">Ferdig</button>
    <button type="button" className={styles.button} data-variant="secondary">Avbryt</button>
    </div>
  </Example>
  <Example data-color="danger" text="Aldri bruk flere call to action-knapper sammen" zoom="100%">
    <div className={styles.button}>
      <button type="button" className={styles.button} data-variant="primary">Ferdig</button>
      <button type="button" className={styles.button} data-variant="primary">Avbryt</button>
    </div>
  </Example>

</Flex>

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

## Farger
- Bruk `data-color="danger"` for å få rød knapp
<Canvas of={stories.Colors} />

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

## Innholdsplassering
- Bruk `data-justify="start | center | end"` (`center` er default når *ikke* i `<menu>`) 
<Canvas of={stories.Justify} />

## Pil og popover
- Legg på `data-arrow` (høyrestilt) eller `data-arrow="left | right"`
- Lasteindikator vil erstatte pil dersom disse kombineres
- Kombiner `popovertarget` + `data-arrow` for chevron
<Canvas of={stories.WithArrows} />

## Ikoner
- [Ikon fra phosphoricons.com](https://phosphoricons.com/) kan legges før eller etter tekst
<Canvas of={stories.WithIcons} />

## Spinner
- For `<button>`: Legg på `<button aria-busy="true" disabled`
- For `<a>`: Legg på `<a aria-busy="true" tabindex="-1"`
- Lasteindikator vil erstatte pil dersom disse kombineres
<Canvas of={stories.WithSpinner} />

## Full bredde
- Bruk `data-self="full"`
<Canvas of={stories.WithFullWidth} />

## Handlingsmeny
- Bruk `aria-label="Knappetekst her"` i stedet for innhold
- Da får du automatisk ikon for handlingsmeny <svg aria-hidden="ture" width="1em" height="1em" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="128" cy="128" r="16"/><circle cx="60" cy="128" r="16"/><circle cx="196" cy="128" r="16"/></svg>

<Canvas of={stories.WithMenu} />

## Pressed
- Bruk `<button>` med `aria-pressed="true"`
- Du kan vise/skjule innhold ved bruke attributten `data-pressed="true | false"` på barn
- **Merk:** Dersom neste element er `popover`, vil `data-pressed="true | false"` også fungere
<Canvas of={stories.Pressed} />

## 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} />

## I meny
- Legger du `button` i `<menu><li>` vil knappene ha samme bredde og venstrestilt tekst
- Ved bruk av `aria-pressed="true"` (for `button`) eller `aria-current="page"` (for lenke) indikeres aktivt valg i menyen
<Canvas of={stories.InMenu} />

<CssVariables component="button" />