import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import { Example, CssVariables } from '../../.storybook/blocks';
import * as stories from './tabs.stories';
import { Details } from '../react';
import { Flex } from '../react';
import styles from '../styles.module.css';
import { PencilSimpleIcon, ListMagnifyingGlassIcon, AddressBookTabsIcon, SquaresFourIcon } from '@phosphor-icons/react';

<Meta of={stories} />

# Tabs
>Tabs lar brukerne navigere mellom relaterte deler av innholdet, der én del vises om gangen. Dette er en effektiv måte å organisere og presentere relatert innhold på samme side.

## Kode
- Legg klassen `tabs` på elementet `<ds-tabs>`
- Bruk `aria-selected="true"` på fanen du ønsker skal være åpen når siden lastes
- Bruk `aria-disabled="true"` på faner som ikke skal være klikkbare
- **React?** Bruk `<Tabs>`, `<Tabs.List>`, `<Tabs.Tab>` og , `<Tabs.Panel>`

<Details>
<Details.Summary>Hva er `ds-tabs`?</Details.Summary>

[ds-tabs](https://u-elements.github.io/u-elements/elements/ds-tabs) er en del av prosjektet [u-elements](https://u-elements.github.io/u-elements)
som sikrer universell utforming. Dette lastes automatisk når du bruker `@mattilsynet/design`.
Du kan også hente inn tilhørende HTMLElement interface ved behov:
```
import {
  UHTMLTabsElement,
  UHTMLTabElement,
  UHTMLTabListElement,
  UHTMLTabPanelElement
} from '@mattilsynet/design'
```
</Details>


<Canvas of={stories.Default} />

## Skikk og bruk
<Flex data-items="350">

  {/* Tekstmengde i Tabs */}
  <Example data-color="success" text="Bruk korte beskrivende tekster i Tabs." zoom="80%">
    <ds-tabs class={styles.tabs}>
      <ds-tablist>
        <ds-tab role="tab" aria-selected="true"> Oversikt </ds-tab>
        <ds-tab> Detaljer</ds-tab>
        <ds-tab> Kontakter </ds-tab>
      </ds-tablist>
      <ds-tabpanel> </ds-tabpanel>
      <ds-tabpanel> </ds-tabpanel>
      <ds-tabpanel> </ds-tabpanel>
    </ds-tabs>
  </Example>

  <Example data-color="danger" text="Unngå lange tekster i Tabs. Tekst over flere linjer er ikke brukervennlig. Husk at Tabs være utfordrende å bruke på mobil" zoom="80%">
      <ds-tabs class={styles.tabs}>
        <ds-tablist>
          <ds-tab role="tab" aria-selected="true"> Oversikt over nylige hendelser </ds-tab>
          <ds-tab> Detaljer </ds-tab>
          <ds-tab> Kontakter </ds-tab>
        </ds-tablist>
        <ds-tabpanel> </ds-tabpanel>
        <ds-tabpanel> </ds-tabpanel>
        <ds-tabpanel> </ds-tabpanel>
      </ds-tabs>
  </Example>

  {/* Kun ikon i Tabs */}
  <Example data-color="success" text="Tabs med bare ikoner bør kun brukes i ekspertløsninger. Bruk tooltip sammen med ikon." zoom="80%">
    <ds-tabs class={styles.tabs}>
      <ds-tablist>
        <ds-tab role="tab" aria-selected="true" data-tooltip="Oversikt"><SquaresFourIcon/></ds-tab>
        <ds-tab data-tooltip="Detaljer"><ListMagnifyingGlassIcon /></ds-tab>
        <ds-tab data-tooltip="Kontakter"><AddressBookTabsIcon /></ds-tab>
      </ds-tablist>
      <ds-tabpanel> </ds-tabpanel>
      <ds-tabpanel> </ds-tabpanel>
      <ds-tabpanel> </ds-tabpanel>
    </ds-tabs>
  </Example>

  <Example data-color="danger" text="Tabs med bare ikoner skal ha tooltip." zoom="80%">
      <ds-tabs class={styles.tabs}>
        <ds-tablist>
          <ds-tab role="tab" aria-selected="true"><SquaresFourIcon /></ds-tab>
          <ds-tab><ListMagnifyingGlassIcon /></ds-tab>
          <ds-tab><AddressBookTabsIcon /></ds-tab>
        </ds-tablist>
        <ds-tabpanel> </ds-tabpanel>
        <ds-tabpanel> </ds-tabpanel>
        <ds-tabpanel> </ds-tabpanel>
      </ds-tabs>
  </Example>
</Flex>

## Gjenbruke panel
- Bruk `aria-controls="panel-ID"` for å gjenbruke samme panel for flere faner
<Canvas of={stories.WithReusePanel} />

## Størrelser
- Bruk `data-size="sm | md | lg"`

<Canvas of={stories.Sizes} />

<CssVariables component="tabs" />