import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import { CssVariables, JumpTo } from '../../.storybook/blocks';
import { Alert, Button, Details, Popover, Table, Flex } from '../react.tsx';
import * as stories from './layout.stories';

<Meta of={stories} />

# Layout
> Layoutkomponenten organiserer og strukturerer innhold. Du kan bruke Flex, Grid, eller Prose for å sikre riktig flyt og oppsett.

<JumpTo />

## Typer layout
- Bruk `flex` når du trenger forskjellige bredder på barna
- Bruk `grid` når du trenger samme bredde på alle barna, eller alle elementer skal ligge under hverandre
- Bruk [`prose`](?path=/story/designsystem-typography--prose) når du har tekstlig innhold som skal ha god typografisk rytme
- Husk at du kan nøste `flex` og `grid` sammen for å få det beste fra begge verdener

<Details>
<Details.Summary>Hvorfor ikke bare bruke Tailwind eller vanilla CSS?</Details.Summary>

Det er fullt mulig å bruke Tailwind eller CSS. Det vi får med `flex` og `grid` er konsistent kode og luftbruk,
samt noen superpowers for responsivitet via vår egen `data-items` attributt.
</Details>

## Attributter
<Table data-fixed data-size="sm">
  <thead style={{ position: 'sticky', top: 0, backgroundColor: 'var(--mtds-color-surface-default)' }}>
    <tr>
      <th>Attributt</th>
      <th>Beskrivelse</th>
      <th>Type</th>
      <th>Standardverdi</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`data-items`</td>
      <td>Minimumsbredde på barna. Sikrer at barn brekker til nye linjer for å ungå at de blir for smale.</td>
      <td>`25`, `50`, `75`, `100`, `125`, `150`, `175`, `200`, `225`, `250`, `275`, `300`, `325`, `350`, `375`, `400`, `425`, `450`, `475`, `500`, `525`, `550`, `575`, `600`, `auto`, `full`</td>
      <td></td>
    </tr>
    <tr>
      <td>`data-self`</td>
      <td>Kan *kun* brukes på barn av `Flex` for å sette minimumsbredde på enkeltbarn.</td>
      <td>`25`, `50`, `75`, `100`, `125`, `150`, `175`, `200`, `225`, `250`, `275`, `300`, `325`, `350`, `375`, `400`, `425`, `450`, `475`, `500`, `525`, `550`, `575`, `600`, `auto`, `full`</td>
      <td></td>
    </tr>
    <tr>
      <td>`data-nowrap`</td>
      <td>Hindrer barna i å flyte over flere linjer. Kan settes direkte på barn i `Flex`.</td>
      <td>[Boolsk attributt](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML)</td>
      <td></td>
    </tr>
    <tr>
      <td>`data-fixed`</td>
      <td>Hindrer barna i å vokse i bredden. Kan settes direkte på barn i `Flex`.</td>
      <td>[Boolsk attributt](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML)</td>
      <td></td>
    </tr>
    <tr>
      <td>`data-gap`, `data-row-gap`, `data-colum-gap`</td>
      <td>Avstand mellom barna. Bruker size tokens `--mtds-*`. Alias for [gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)</td>
      <td>`0`,  `1`,  `2`, `3`,  `4`,  `5`,  `6`,  `7`,  `8`,  `9`,  `10`,  `11`,  `12`,  `13`,  `14`,  `15`,  `18`,  `22`,  `26`,  `30`</td>
      <td>`3`</td>
    </tr>
    <tr>
      <td>`data-center`</td>
      <td>Maksbredde og midtstilling komponenten.</td>
      <td>`none`,<br />`sm` (max `640px`),<br />`md` (max `768px`),<br />`lg` (max `1024px`),<br />`xl` (max `1280px`),<br />`2xl` (max `1536px`)</td>
      <td>`none`</td>
    </tr>
    <tr>
      <td>`data-align`</td>
      <td>Vertikal justering av barna. Alias for [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).</td>
      <td>`normal`, `start`, `center`, `end`, `baseline`, `stretch`</td>
      <td>`normal`</td>
    </tr>
    <tr>
      <td>`data-align-content`</td>
      <td>Vertikal justering av *alle* barna. Alias for [align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).</td>
      <td>`normal`, `start`, `center`, `end`, `baseline`, `stretch`, `space-around`, `space-between`, `space-evenly`</td>
      <td>`normal`</td>
    </tr>
    <tr>
      <td>`data-justify`</td>
      <td>Horisontal justering av *alle* barna.<br />Hvis `flex`: Alias for [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)<br />Hvis `grid`:  alias for [justify-items](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)</td>
      <td>`normal`, `start`, `center`, `end`, `baseline`, `stretch`, `space-around`, `space-between`, `space-evenly`</td>
      <td>`normal`</td>
    </tr>
    <tr>
      <td>`data-align-self`</td>
      <td>Kan settes på barn av både `grid` og `flex`. Alias for [align-self](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)</td>
      <td>`normal`, `start`, `center`, `end`, `stretch`</td>
      <td>`normal`</td>
    </tr>
    <tr>
      <td>`data-justify-self`</td>
      <td>Kan settes på barn av både `grid` og `flex`. Alias for [justify-self](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self)</td>
      <td>`normal`, `start`, `center`, `end`, `stretch`</td>
      <td>`normal`</td>
    </tr>
    <tr>
      <td>`data-break`</td>
      <td>Kan *kun* settes på `flex`. Forenkler responsive `Card`</td>
      <td>ingen verdi</td>
      <td>ingen verdi</td>
    </tr>
  </tbody>
</Table>


## Flex
- Bruk `flex` når du trenger forskjellige bredder på barna
- Bruk heller `prose` eller `grid` når du skal ha <button type="button" data-popover="inline" popoverTarget="grid-stack">under hverandre</button>

<Popover id="grid-stack">...siden `flex-direction: column` kan ha uønskede<br />bieffekter på f.eks. `align-items`, `justify-content`</Popover>
<Canvas of={stories.FlexStory} />

## Grid
- Bruk `grid` når du trenger samme bredder på alle elementer
- Bruk `grid` *uten* `data-items` for å sette elementer under hverandre
<Canvas of={stories.GridStory} />

## Gap
- Bruk `data-gap="0|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|18|22|26|30"` (`3` er default)
- Bruk `data-row-gap` eller `data-column-gap` for å individuellt gap i hver retning
<Canvas of={stories.Gap} />

## Center
- Bruk `data-center="sm | md | lg | xl | 2xl"` for å sentrere innholdet
- Elementet vil allid ha minimum `5vw` luft på venste og høyre side
- Vi bruker hovedsakelig `2xl` som hoved container for innhold
<div className="sbdocs-canvas-thumbnail">
  <Button data-arrow data-variant="primary" href="?path=/story/designsystem-layout--center">Se center i egen visning</Button>
  <Canvas className="sbdocs-canvas--max-height" of={stories.Center} />
</div>

## Align
- `data-align="normal | start | center | end | stretch"` (`normal` er default) setter vertikal plassering med [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) 
<Canvas of={stories.Align} />

## Justify
- `data-justify="start | center | end | space-between | space-around | space-evenly"` setter horisontal plassering med [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) 
<Canvas of={stories.Justify} />

## AlignContent
- `data-align-content="start | center | end | space-between | space-around | space-evenly"` setter vertikal plassering over flere rader med [align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
<Canvas of={stories.AlignContent} />

## Break Card
- I rader av `Card` har vi ofte 1: tittel, 2: innhold og 3: valgfrie handlinger/tags
- Tittel og handlinger ønsker vi skal ligge for seg selv - ikke blandes med innholdet
- `Flex` støtter `data-break` for å forenkle et responsivt oppsett av `flex` med 3 barn
- Du må da sette `data-self` på tittel (påkrevd) og (valgfri) handlinger
- `Flex` vil brekke innholdet til egen rad når det er `40rem` bredt eller mindre, men du kan overstyre dette ved å sette f.eks. `style="--mtds-break: 50em"` på `Flex` eller hvilket som helst foreldre-element (f.eks. `Grid` som ligger rundt alle `Card` for å få likt brekkpunkt på alle rader).
- **Merk:** Firefox støtter ikke dynamisk `order` *enda*, så der vil handlingene ligge under innholdet på små skjermer.

<Flex data-justify="space-between" data-align="end">
<div>**Eksempel-kode:**</div>
<Button data-variant='secondary' href="?path=/story/designsystem-layout--break-card" data-arrow>Se live-eksempel</Button>
</Flex>
```tsx
<Card>
  <Flex data-break> ⬅️ data-break aktiverer brekkpunkt
    <h2 data-size="md" data-self="250"> ⬅️ data-self setter tittel-bredde
      Bambus
    </h2>
    <Flex data-items="150">
      Innholds-elementer her...
    </Flex>
    <Flex data-self="150"> ⬅️ data-self setter handlinger-bredde
      <Button type="button" data-variant="primary" data-arrow>
        Action 1
      </Button>
    </Flex>
  </Flex>
</Card>
```

<CssVariables component="layout" />