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

<Meta of={stories} />

# Pagination

> Pagination er en liste med knapper som brukes for å navigere mellom ulike sider med innhold, for eksempel søkeresultater eller tabeller.

<JumpTo />

## Kode
- Bruk klassen `pagination` på `<ds-pagination>`
- Legg `<ul><li>` inni, med `<a class="button">` eller `<button type="button" class="button">`
- Legg inn tom `<li>` der du ønsker ellipsis (&hellip;)
- Legg `aria-current="page"` på valgt side
- Legg `<a aria-disabled="true"` eller `<button disabled` for ugyldig forrige/neste
<Details>
  <Details.Summary>Se egne parameter for React</Details.Summary>
<div>
I React kan du velge å bruke `<Pagination>` med props for automatisk oppsett av elementer:
<ArgTypes of={stories} />
</div>
</Details>
<Canvas of={stories.WithLinks} />

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

   {/* Navngivning  */}
  <Example data-color="success" text="Bruk korte og konsise ord som «Forrige» og «Neste»." zoom="100%">
    <nav aria-label="Sidenavigering" className={styles.pagination}>
        <ul>
          <li>
            <a href="?p=1" className={styles.button} aria-disabled="true">Forrige</a>
          </li>
          <li>
            <a href="?p=1" className={styles.button} aria-current="page">1</a>
          </li>
          <li>
            <a href="?p=2" className={styles.button}>2</a>
          </li>
          <li>
            <a href="?p=3" className={styles.button}>3</a>
          </li>
          <li>
            <a href="?p=4" className={styles.button}>4</a>
          </li>
          <li></li>
          <li>
            <a href="?p=10" className={styles.button}>10</a>
          </li>
          <li>
            <a href="?p=2" className={styles.button}>Neste</a>
          </li>
        </ul>
      </nav>
  </Example>

  <Example data-color="danger" text="Unngå bruk av «Forrige side», «Neste side», «Gå tilbake», «Gå videre», «Videre» og «Tilbake»." zoom="100%">
    <nav aria-label="Sidenavigering" className={styles.pagination}>
      <ul>
        <li>
          <a href="?p=1" className={styles.button} aria-disabled="true">Forrige side</a>
        </li>
        <li>
          <a href="?p=1" className={styles.button} aria-current="page">1</a>
        </li>
        <li>
          <a href="?p=2" className={styles.button}>2</a>
        </li>
        <li>
          <a href="?p=3" className={styles.button}>3</a>
        </li>
        <li>
          <a href="?p=4" className={styles.button}>4</a>
        </li>
        <li></li>
        <li>
          <a href="?p=10" className={styles.button}>10</a>
        </li>
        <li>
          <a href="?p=2" className={styles.button}>Neste side</a>
        </li>
      </ul>
    </nav>
  </Example>

</Flex>

## Knapper
- Bruk `<button type="button">` istedenfor `<a>` dersom du bygger en SPA
<Canvas of={stories.WithButtons} />

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

## Varianter/farger
- Bruk `data-variant="secondary | primary"`, hvor `secondary` er default
- `data-variant="primary"` er nyttig når paginering ligger på grå bakgrunn
<Canvas of={stories.Variants} />


## Javascript-hjelper

1. Bruk JS-hjelperen for å generere steg og tilhørende attributter:
    ```tsx
    import { pagination } from '@mattilsynet/design';

    const { pages, next, prev } = pagination({
      current: 1,
      total: 20,
      show: 7, // Optional, shows all if not proivded
    })
    ```
2. Du får et hendig `object` i retur, som kan brukes til å generere HTML:
    ```ts
    {
      prev: number; // Previous page, 0 if no previous
      next: number; // Next page, 0 if no next
      pages: Array<{
        current: 'page' | false; // Value of `aria-current`
        page: number;     // Page number or 0 if ellipsis
        key: string;      // Unique child key for React/frameworks
      }>
    }
    ```
3. Eksempel på bruk i `React`:
    <Canvas of={stories.WithHelper} />

<CssVariables component="pagination" />