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

<Meta of={stories} />

# Popover
> Popover vises over andre elementer i grensesnittet og er koblet til et spesifikt element. Den brukes til å vise tilleggsinformasjon, interaktive elementer eller korte forklaringer uten å navigere bort fra siden. Popover kan brukes som en utvidet løsning når tooltip ikke strekker til.

<JumpTo />

## Kode
- Legg klassen `popover`, attributten `popover` og `id` på `<div>` eller `<menu>`
- Legg `popovertarget="ID"` på typisk `<button>` som trigger element
- Plassiering vil automatisk tilpasse seg scroll og tilgjengelig plass

> **Merk:** I React 19 kan du skrive `popoverTarget` og `popoverTargetAction`. Eldre versjoner av React krever `popovertarget` og `popovertargetaction`

<Canvas of={stories.Default} />

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

   {/* Lange tekster */}
  <Example data-color="success" text="Innhold i popover bør være kort og konsist (trykk for å se)." zoom="100%">
    

    Vi bruker{" "} <button popoverTarget="pop-inline-1" type="button" data-popover="inline">
    design tokens </button>{" "} for å sikre at vi har en konsistent design.

    <div popover="auto" id="pop-inline-1" className={styles.popover}> Design tokens er en samling av variabler som definerer designet i et
    designsystem. </div>

  </Example>

  <Example data-color="danger" text="Unngå lange tekster i popover (trykk for å se)." zoom="100%">
   
    Vi bruker{" "} <button popoverTarget="pop-inline-2" type="button" data-popover="inline">
    design tokens </button>{" "} for å sikre at vi har en konsistent design.
    
    <div popover="auto" id="pop-inline-2" className={styles.popover}> Design tokens er navngitte variabler (navn-verdi-par) som representerer grunnleggende designattributter som farger, typografi, mellomrom, skygger og animasjoner. De fungerer som et "enkelt kilde til sannhet" som kan brukes på tvers av ulike plattformer, teknologier og designverktøy for å opprettholde et enhetlig og konsistent utseende i digitale produkter. Ved å erstatte hardkodede verdier med tokens, kan design og kode holdes synkronisert, noe som forenkler vedlikehold og gir skalerbarhet for designsystemer. </div>

  </Example>

</Flex>

## Nedtrekksmeny / Dropdown
- Bruk `<menu>` med `<li><button type="button">` eller ` <li><a>` som barn
- Dersom du legger `<a>` inni en `popover`, vil den automatsk lukke popoveren på klikk, med mindre du setter `popovertargetaction="show"` eller kjører `event.preventDefault()` på `onClick`

<Canvas of={stories.Dropdown} />

## Placement
- Bruk `data-placement="top | top-start | top-end | right | right-start | right-end | bottom | bottom-start | bottom-end | left | left-start | left-end"` for å plassere popoveren
- Popover vil alltid legge seg der det er plass i skjermbildet
<Canvas of={stories.Placement} />

## Lukkeknapp
- Bruk `popovertargetaction="hide"` på `<button>` (eller `<a>` dersom du lager en SPA) for å lage lukkeknapp:
<Canvas of={stories.WithClose} />

## Tekst inline
- Bruk `data-popover="inline"` på `<button>` for popover fra brødtekst:
<Canvas of={stories.WithTextInline} />



## Pil
- Bruk `data-arrow` på `<button>` for å få ikon:
<Canvas of={stories.WithArrow} />

## Egendefinert ikon
- Du kan vise/skjule innhold ved bruke attributten `data-pressed="true | false"` på barn:
<Canvas of={stories.WithIcon} />

## Skillelinje
- Bruk `<li><hr />` i `<menu>` for å få skillelinje:
<Canvas of={stories.WithDivider} />

## Scroll
- Bruk `data-overscroll="contain"` for å holde popover høyde innen skjermbildet:
<Canvas of={stories.WithOverscroll} />

<CssVariables component="popover" />