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

<Meta of={stories} />

# Card og Group

> Med Card kan vi gruppere og fremheve informasjon eller oppgaver som hører sammen. Group brukes til å gruppere flere Cards.

## Kode
- Bruk klassen `card` på typisk `<div>`, `<a>` eller `<button>`
- Bruk [`info`](?path=/story/designsystem-typography--info-story) rundt ledetekst+verdi, ikon+verdi eller verdi for enkelt, responsivt oppsett
<Canvas of={stories.Default} />

## Padding
- Både `card` og `group` støtter `data-pad="0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 22 | 26 | 30"` for endring av padding (`5` er default)
- **Fluid padding:** Bruk `data-pad="TALL-TALL"` - da får du voksende padding fra første tall `368px` til siste tall på `1440px`
- **Brekkpunkt-padding:** Bruk `data-pad-sm` (over `640px`), `data-pad-md` (over `768px`),<br />`data-pad-lg` (over `1024px`), `data-pad-xl` (over `1280px`) og<br />`data-pad-2xl` (over `1536px`)
<div className="sbdocs-canvas-thumbnail">
  <Button data-arrow data-variant="primary" href="?path=/story/designsystem-card--padding">Se paddings i egen visning</Button>
  <Canvas of={stories.Padding} />
</div>

## Border radius
- Både `card` og `group` støtter `data-radius="sm | md | lg | lg"` for endring av avrunding (`lg` er default for card, og `xl` er default for group)
<Canvas of={stories.Radius} />

## Interaktiv
- Når `card` er klikkbart, får hele kortet `hover` og `active`-effekter
- **Merk:** Klikkbare `card` kan ikke inneholde andre klikkbare elementer
<Canvas of={stories.Interactive} />

## Responsiv
- Legg `flex` og `grid` inni `card` for å lage responsive design

<Alert>
**Å lage gode responsive kort er utfordrende**, fordi gruppering og brekkpunkter burde bestemmes av innholdet.
I stede for å tilby et fastlåst "one size fits nobody" design, gir vi deg heller stor fleksibilitet, men dermed også mer ansvar.
Frykt ikke dog! Du kan kontakt oss på [#designsystem](https://mattilsynet-hq.slack.com/archives/C03FAJ7N1EU) så kommer vi i gang sammen 💙
</Alert>

<Canvas of={stories.Responsive} />

## Gruppering
- Bruk `group` på typisk en `grid` eller `flex` for å gruppere flere `card`
- Kan også benyttes rundt annet innhold for å visuelt vise gruppering
<Canvas of={stories.GroupStory} />

<CssVariables component="card" />