import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import { CssVariables } from '../../.storybook/blocks';
import * as stories from './app.stories';
import { Button, Popover } from '../react';

<Meta of={stories} />

# App
> App er en forhåndsdefinert layoutkomponent som gir et enkelt startpunkt å bygge videre på når du skal tegne eller utvikle en ny applikasjon.

## Kode
- Bruk klassen `app` på typisk `<body>` eller et element inni
- Legg inn `<header>`, `<dialog role="navigation">` (for sidemeny), `<main>` og evt. `<footer>`
- Alle elemetene er valgfrie, og kan grupperes i `<div>`-er for [island-architecture](https://www.patterns.dev/vanilla/islands-architecture/)
- Bruk `data-app-expanded="mobile | desktop"` på elementer ønsker å vise noe kun på en skjermstørrelse (f.eks kun vise sideområde-knapp på mobil)
- **React?** Bruk `App`, `App.Header`, `App.Sidebar`,  `App.Sticky`, `App.Toggle`,  `App.Main` og `App.Footer`
- **Next.js?** Bruk `<App.Script>` i `<head>` for å tegne minimert/ekspanert sidemeny uten <button type="button" data-popover="inline" popoverTarget='fouc'>FOUC</button><Popover id="fouc">Flash of unstyled content</Popover>
<div className="sbdocs-canvas-thumbnail">
  <Button data-arrow data-variant="primary" target="_blank" href="/iframe.html?globals=&id=designsystem-app--default">Se app i ny fane</Button>
  <Canvas of={stories.Default} />
</div>

## Ekspander og minimer sideområde
- Legg en `<button>` med klassen `button` og `command="show-modal" commandfor="mtds-sidebar"` før `<dialog role="navigation" id="mtds-sidebar">` for å få automatisk ekspandering/minimering av sideområde
- Bruk `data-app-expanded="true | false"` på elementer for å vises/skjules basert på ekspandert/minimert sideområde
- Visning huskes automatisk mellom sidevisninger ved bruk av `localStorage`
- **React?** Bruk `App.Toggle`
<div className="sbdocs-canvas-thumbnail">
  <Button data-arrow data-variant="primary" target="_blank" href="/iframe.html?globals=&id=designsystem-app--default">Se ekspandering i ny fane</Button>
  <Canvas of={stories.Default} />
</div>

## Sticky sideområde
- Legg en `<div>` med klassen `sticky` rundt alt innholdet inni `<dialog role="navigation">`
- Dette gir deg en avansert implementasjon av sticky, som tar hensyn til scroll-retning
<div className="sbdocs-canvas-thumbnail">
  <Button data-arrow data-variant="primary" target="_blank" href="/iframe.html?globals=&id=designsystem-app--with-complex-content">Se sticky i ny fane</Button>
  <Canvas of={stories.Default} />
</div>

## Mobil bunnmeny
- Bruk `data-variant="mobilebar"` på `.app` for å få en mobil bunnmeny
- Burde kun benyttes om du har 5 menypunkter eller færre
- Titler, skillelinjer og elementer med `data-app-expanded="false"` skjules
<div className="sbdocs-canvas-thumbnail">
  <Button data-arrow data-variant="primary" href="/iframe.html?globals=&id=designsystem-app--with-mobile-bar">Se mobilebar i egen visning</Button>
  <Canvas of={stories.WithMobileBar} />
</div>

## Programatisk ekspander/minimer
- Bruk `import { toggleAppExpand } from '@mattilsynet/design';`
- `toggleAppExpand()` veksler mellom ekspandert og minimert
- `toggleAppExpand(true)` tvinger ekspandert
- `toggleAppExpand(false)` tvinger minimert
<div className="sbdocs-canvas-thumbnail">
  <Button data-arrow data-variant="primary" target="_blank" href="/iframe.html?globals=&id=designsystem-app--with-complex-content">Se programatisk ekspander/minimer</Button>
  <Canvas of={stories.WithCustomToggle} />
</div>

<CssVariables component="app" />