@mattilsynet/design 3.2.9 → 3.3.0

package/mtds/ai/steps.stories.tsx

@@ -0,0 +1,568 @@
+import { FilePlusIcon, HandshakeIcon, HeartIcon } from "@phosphor-icons/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Flex, Grid, Steps } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Steps",
+	parameters: {
+		layout: "padded",
+	},
+	decorators: [
+		(Story) => (
+			<Grid data-gap="14">
+				<Story />
+			</Grid>
+		),
+	],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<ol className={styles.steps}>
+			<li>
+				<mark>
+					<HeartIcon />
+				</mark>
+				<strong>Steg 1</strong>
+				<br />
+				<small>Beskrivelse</small>
+			</li>
+			<li>
+				<mark />
+				<strong>Steg 2</strong>
+				<br />
+				<small>Donec et odio</small>
+			</li>
+			<li aria-current="step" data-color="danger">
+				<mark />
+				<strong>Steg 3</strong>
+			</li>
+			<li>
+				<mark />
+				<strong>Steg 4</strong>
+			</li>
+			<li>
+				<mark />
+				<strong>Steg 5</strong>
+			</li>
+		</ol>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<Steps>
+			<li>
+				<mark />
+				<strong>Steg 1</strong>
+			</li>
+			<li>
+				<mark />
+				<strong>Steg 2</strong>
+			</li>
+			<li aria-current="step">
+				<mark />
+				<strong>Steg 3</strong>
+			</li>
+			<li>
+				<mark />
+				<strong>Steg 4</strong>
+			</li>
+		</Steps>
+	),
+};
+
+export const WithStateComplete: Story = {
+	render: () => (
+		<ol className={styles.steps} data-state="complete">
+			<li>
+				<mark />
+				<strong>Steg 1</strong>
+				<br />
+				<small>Beskrivelse</small>
+			</li>
+			<li>
+				<mark />
+				<strong>Steg 2</strong>
+				<br />
+				<small>Donec et odio</small>
+			</li>
+			<li>
+				<mark />
+				<strong>Steg 3</strong>
+			</li>
+			<li>
+				<mark />
+				<strong>Steg 4</strong>
+			</li>
+			<li>
+				<mark />
+				<strong>Steg 5</strong>
+			</li>
+		</ol>
+	),
+};
+
+export const WithDirection: Story = {
+	render: () => (
+		<Flex data-items="500" data-gap="14">
+			<Grid style={{ flexBasis: "100%" }}>
+				<strong>
+					With <code>data-direction="right"</code>:
+				</strong>
+				<ol className={styles.steps} data-direction="right">
+					<li>
+						<mark>
+							<HeartIcon />
+						</mark>
+						<strong>Steg 1</strong> Beskrivelse
+					</li>
+					<li data-color="danger">
+						<mark />
+						<strong>Steg 2</strong>
+					</li>
+					<li aria-current="step">
+						<mark />
+						<strong>Steg 3</strong>
+					</li>
+					<li>
+						<mark />
+						<strong>Steg 4</strong>
+					</li>
+					<li>
+						<mark />
+						<strong>Steg 5</strong>
+					</li>
+				</ol>
+			</Grid>
+			<Grid>
+				<strong>
+					With <code>data-direction="down"</code>:
+				</strong>
+				<ol className={styles.steps} data-direction="down">
+					<li>
+						<mark>
+							<HeartIcon />
+						</mark>
+						<strong>Steg 1</strong> Beskrivelse
+					</li>
+					<li data-color="danger">
+						<mark />
+						<strong>Steg 2</strong>
+						<br />
+						Donec sagittis et odio in consequat. Nullam rutrum erat in euismod
+						scelerisque. Nullam imperdiet lorem mauris, ut dapibus sem efficitur
+						a. Proin nec vulputate erat. Proin venenatis aliquam justo at
+						venenatis. Proin pharetra turpis sem, et consectetur nunc fringilla
+						vitae. Morbi molestie eleifend libero, et posuere magna semper non.
+						Nullam dictum massa non nibh sagittis vestibulum.
+					</li>
+					<li aria-current="step">
+						<mark />
+						<strong>Steg 3</strong>
+					</li>
+					<li>
+						<mark />
+						<strong>Steg 4</strong>
+					</li>
+					<li>
+						<mark />
+						<strong>Steg 5</strong>
+					</li>
+				</ol>
+			</Grid>
+			<Grid>
+				<strong>
+					With <code>data-direction="up"</code>:
+				</strong>
+				<ol className={styles.steps} data-direction="up">
+					<li>
+						<mark>
+							<HeartIcon />
+						</mark>
+						<strong>Steg 5</strong> Beskrivelse
+					</li>
+					<li>
+						<mark />
+						<strong>Steg 4</strong>
+						<br />
+						Donec sagittis et odio in consequat. Nullam rutrum erat in euismod
+						scelerisque. Nullam imperdiet lorem mauris, ut dapibus sem efficitur
+						a. Proin nec vulputate erat. Proin venenatis aliquam justo at
+						venenatis. Proin pharetra turpis sem, et consectetur nunc fringilla
+						vitae. Morbi molestie eleifend libero, et posuere magna semper non.
+						Nullam dictum massa non nibh sagittis vestibulum.
+					</li>
+					<li aria-current="step">
+						<mark />
+						<strong>Steg 3</strong>
+					</li>
+					<li>
+						<mark />
+						<strong>Steg 2</strong>
+					</li>
+					<li>
+						<mark />
+						<strong>Steg 1</strong>
+					</li>
+				</ol>
+			</Grid>
+		</Flex>
+	),
+};
+
+export const WithFade: Story = {
+	render: () => (
+		<>
+			<strong>
+				No <code>data-fade</code>:
+			</strong>
+			<ol className={styles.steps}>
+				<li>
+					<mark />
+					<strong>Steg 1</strong>
+				</li>
+				<li aria-current="step">
+					<mark />
+					<strong>Steg 2</strong>
+				</li>
+				<li>
+					<mark />
+					<strong>Steg 3</strong>
+				</li>
+			</ol>
+			<strong>
+				With <code>data-fade</code>:
+			</strong>
+			<ol className={styles.steps} data-fade>
+				<li>
+					<mark />
+					<strong>Steg 1</strong>
+				</li>
+				<li aria-current="step">
+					<mark />
+					<strong>Steg 2</strong>
+				</li>
+				<li>
+					<mark />
+					<strong>Steg 3</strong>
+				</li>
+			</ol>
+			<strong>
+				With <code>data-fade="start"</code>:
+			</strong>
+			<ol className={styles.steps} data-fade="start">
+				<li>
+					<mark />
+					<strong>Steg 1</strong>
+				</li>
+				<li aria-current="step">
+					<mark />
+					<strong>Steg 2</strong>
+				</li>
+				<li>
+					<mark />
+					<strong>Steg 3</strong>
+				</li>
+			</ol>
+			<strong>
+				With <code>data-fade="end"</code>:
+			</strong>
+			<ol className={styles.steps} data-fade="end">
+				<li>
+					<mark />
+					<strong>Steg 1</strong>
+				</li>
+				<li aria-current="step">
+					<mark />
+					<strong>Steg 2</strong>
+				</li>
+				<li>
+					<mark />
+					<strong>Steg 3</strong>
+				</li>
+			</ol>
+		</>
+	),
+};
+
+export const WithFadeAndDirection: Story = {
+	render: () => (
+		<Flex data-items="500" data-gap="14">
+			<Grid data-gap="14">
+				<strong>
+					With <code>data-direction="down"</code> and <code>data-fade</code>:
+				</strong>
+				<ol className={styles.steps} data-fade data-direction="down">
+					<li>
+						<mark />
+						<strong>Steg 1</strong>
+					</li>
+					<li aria-current="step">
+						<mark />
+						<strong>Steg 2</strong>
+					</li>
+					<li>
+						<mark />
+						<strong>Steg 3</strong>
+					</li>
+				</ol>
+				<strong>
+					With <code>data-direction="down"</code> and{" "}
+					<code>data-fade="start"</code>:
+				</strong>
+				<ol className={styles.steps} data-fade="start" data-direction="down">
+					<li>
+						<mark />
+						<strong>Steg 1</strong>
+					</li>
+					<li aria-current="step">
+						<mark />
+						<strong>Steg 2</strong>
+					</li>
+					<li>
+						<mark />
+						<strong>Steg 3</strong>
+					</li>
+				</ol>
+				<strong>
+					With <code>data-direction="down"</code> and{" "}
+					<code>data-fade="end"</code>:
+				</strong>
+				<ol className={styles.steps} data-fade="end" data-direction="down">
+					<li>
+						<mark />
+						<strong>Steg 1</strong>
+					</li>
+					<li aria-current="step">
+						<mark />
+						<strong>Steg 2</strong>
+					</li>
+					<li>
+						<mark />
+						<strong>Steg 3</strong>
+					</li>
+				</ol>
+			</Grid>
+			<Grid data-gap="14">
+				<strong>
+					With <code>data-direction="up"</code> and <code>data-fade</code>:
+				</strong>
+				<ol className={styles.steps} data-fade data-direction="up">
+					<li>
+						<mark />
+						<strong>Steg 3</strong>
+					</li>
+					<li aria-current="step">
+						<mark />
+						<strong>Steg 2</strong>
+					</li>
+					<li>
+						<mark />
+						<strong>Steg 1</strong>
+					</li>
+				</ol>
+				<strong>
+					With <code>data-direction="up"</code> and{" "}
+					<code>data-fade="start"</code>:
+				</strong>
+				<ol className={styles.steps} data-fade="start" data-direction="up">
+					<li>
+						<mark />
+						<strong>Steg 3</strong>
+					</li>
+					<li aria-current="step">
+						<mark />
+						<strong>Steg 2</strong>
+					</li>
+					<li>
+						<mark />
+						<strong>Steg 1</strong>
+					</li>
+				</ol>
+				<strong>
+					With <code>data-direction="up"</code> and <code>data-fade="end"</code>
+					:
+				</strong>
+				<ol className={styles.steps} data-fade="end" data-direction="up">
+					<li>
+						<mark />
+						<strong>Steg 3</strong>
+					</li>
+					<li aria-current="step">
+						<mark />
+						<strong>Steg 2</strong>
+					</li>
+					<li>
+						<mark />
+						<strong>Steg 1</strong>
+					</li>
+				</ol>
+			</Grid>
+		</Flex>
+	),
+};
+
+export const WithColors: Story = {
+	render: () => (
+		<ol className={styles.steps}>
+			<li>
+				<mark />
+				<strong>Steg 1</strong>
+				<br />
+				<small>Beskrivelse</small>
+			</li>
+			<li data-color="danger">
+				<mark />
+				<strong>Steg 2</strong>
+				<br />
+				<small>Donec et odio</small>
+			</li>
+			<li aria-current="step">
+				<mark />
+				<strong>Steg 3</strong>
+			</li>
+			<li data-color="warning">
+				<mark />
+				<strong>Steg 4</strong>
+			</li>
+			<li>
+				<mark />
+				<strong>Steg 5</strong>
+			</li>
+		</ol>
+	),
+};
+
+export const WithVariantFilled: Story = {
+	render: () => (
+		<>
+			<ol className={styles.steps} data-variant="filled">
+				<li>
+					<mark />
+					<strong>Steg 1</strong>
+					<br />
+					<small>Beskrivelse</small>
+				</li>
+				<li aria-current="step">
+					<mark />
+					<strong>Steg 2</strong>
+					<br />
+					<small>Donec et odio</small>
+				</li>
+				<li>
+					<mark />
+					<strong>Steg 3</strong>
+				</li>
+			</ol>
+			<ol className={styles.steps} data-variant="filled" data-direction="down">
+				<li>
+					<mark />
+					<strong>Steg 1</strong>
+					<br />
+					<small>Beskrivelse</small>
+				</li>
+				<li data-color="danger" aria-current="step">
+					<mark />
+					<strong>Steg 2</strong>
+					<br />
+					<small>Donec et odio</small>
+				</li>
+				<li>
+					<mark />
+					<strong>Steg 3</strong>
+				</li>
+			</ol>
+			<ol className={styles.steps} data-variant="filled" data-direction="up">
+				<li>
+					<mark />
+					<strong>Steg 1</strong>
+					<br />
+					<small>Beskrivelse</small>
+				</li>
+				<li data-color="danger" aria-current="step">
+					<mark />
+					<strong>Steg 2</strong>
+					<br />
+					<small>Donec et odio</small>
+				</li>
+				<li data-color="danger">
+					<mark />
+					<strong>Steg 3</strong>
+				</li>
+			</ol>
+		</>
+	),
+};
+
+export const WithInteraction: Story = {
+	render: () => (
+		<ol className={styles.steps}>
+			<li>
+				<a href="#none">
+					<mark />
+					<strong>Steg 1</strong>
+					<br />
+					<small>Beskrivelse</small>
+				</a>
+			</li>
+			<li>
+				<a href="#none">
+					<mark />
+					<strong>Steg 2</strong>
+					<br />
+					<small>Donec et odio</small>
+				</a>
+			</li>
+			<li aria-current="step">
+				<button type="button">
+					<mark />
+					<strong>Steg 3</strong>
+				</button>
+			</li>
+			<li>
+				<button type="button">
+					<mark />
+					<strong>Steg 4</strong>
+				</button>
+			</li>
+		</ol>
+	),
+};
+
+export const Timeline: Story = {
+	parameters: { showInOverview: true },
+	render: () => (
+		<ol className={styles.steps} data-direction="up">
+			<li data-color="main">
+				<mark>
+					<HeartIcon />
+				</mark>
+				<strong>06.04.2025</strong> Enighet om løsning
+			</li>
+			<li data-color="main">
+				<mark>
+					<HandshakeIcon />
+				</mark>
+				<strong>05.04.2025</strong> Oppfølgingsmøte gjennomført
+				<br />
+				Donec sagittis et odio in consequat. Nullam rutrum erat in euismod
+				scelerisque. Nullam imperdiet lorem mauris, ut dapibus sem efficitur a.
+				Proin nec vulputate erat. Proin venenatis aliquam justo at venenatis.
+				Proin pharetra turpis sem, et consectetur nunc fringilla vitae. Morbi
+				molestie eleifend libero, et posuere magna semper non. Nullam dictum
+				massa non nibh sagittis vestibulum.
+			</li>
+			<li data-color="main">
+				<mark>
+					<FilePlusIcon />
+				</mark>
+				<strong>01.02.2025</strong> Sak opprettet
+			</li>
+		</ol>
+	),
+};

package/mtds/ai/table.mdx

@@ -0,0 +1,124 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Example, CssVariables, JumpTo } from '../../.storybook/blocks';
+import { Button } from "../react";
+import * as stories from './table.stories';
+import { Flex } from '../react';
+import styles from '../styles.module.css';
+
+<Meta of={stories} />
+
+# Table
+>Table brukes for å vise strukturert informasjon på en ryddig og oversiktlig måte. Tabeller kan gjøre det enklere for brukerne å skanne og sammenligne informasjon.
+
+<JumpTo />
+
+## Kode
+- Legg klassen `table` på `<table>`
+- Bruk `<thead>` med `<tr><th>` som barn for topplinje
+- Bruk `<tbody>` med `<tr><td>` som barn for rader
+- Bruk `aria-label` for å navngi tabellen for skjermlesere
+- Bruk `data-nowrap` hvor du vil på tabellen, rader eller celler for å hindre linjeskift
+<Canvas of={stories.Default} />
+
+## Horisontale titler
+- Bruk `<th scope="row">` som første barn i en rad for å få horisontal overskrift
+<Canvas of={stories.WithHorizontalTitles} />
+
+## Låste bredder
+- Tabeller tilpasser kolonnebredder automatisk etter innhold
+- Dette kan være upraktisk når innholdet endrer seg/sorteres/pagineres
+- Bruk `data-fixed` på `<table>` for låste bredder. **OBS:** Fungerer ikke med [mobil scroll](#mobil-scroll)
+- Bruk evt. `style="width: X"` på `<th>` for å sette bredde på gitte kolonner
+<Canvas of={stories.WithFixedWidths} />
+
+## Numeriske verdier
+- Bruk `data-numeric` for tall med lik bredde.
+<Canvas of={stories.WithNumericValues} />
+
+## Tekstjustering
+- Bruk `data-justify="start | center | end"` for å justere tekstplassering.
+<Canvas of={stories.WithJustify} />
+
+## Vertikal justering av innhold
+- Bruk `data-align="start | center"` for å vertikalt justere innhold (`start` er default)
+<Canvas of={stories.WithAlign} />
+
+## Sortering
+- Bruk `<th aria-sort="none | ascending | descending | other">`
+- Bruk `<button type="button">` i `<th>` for sorting
+- Bruk [TanStack Table](https://tanstack.com/table/latest) eller annen valgfri kode for å utføre sorteringen
+- **React?** Bruk `<Table.ThSortable aria-sort={} onClick={}>` for automisk knapp og støtte for flere verdier i `aria-sort` : `"acending" | "asc" | "desc" | "descending" | "down" | "false" | "none" | "up" | false | null`. Dersom **onClick er undefined**, vil en vanlig `<th>` uten sortering rendres.
+- Se også [låste bredder](#laste-bredder)
+<Canvas of={stories.SortableSimple} />
+
+## Bunnlinje
+- Bruk `<tfoot>` med `<tr><th>` som barn for bunnlinje
+<Canvas of={stories.WithFooter} />
+
+## Størrelser
+- Bruk `data-size="sm | md | lg"`
+<Canvas of={stories.Sizes} />
+
+## Ekspandering
+- Legg `<button aria-expanded="true | false">` som barn av `td` eller `th`
+- Legg til en rad etter `<tr><td colspan="x">`, hvor `x` er antall kolonner
+<Canvas of={stories.ExpandableSimple} />
+
+## Checkbox
+- Legg et [Field](/designsystem/field/) med `<input type="checkbox">` og `<label>` i første celle
+<Canvas of={stories.CheckableSimple} />
+
+## Rad med handling
+- Legg `data-clickdelegatefor="TARGET-ID"` på en `<tr>`, hvor `TARGET-ID` er `id` til en knapp, lenke eller checkbox inni raden
+<Canvas of={stories.ClickableSimple} />
+
+## Paginering
+- Tabell kan brukes sammen med [Pagination](/designsystem/pagination/)
+<Canvas of={stories.PaginatableSimple} />
+
+## Mobil: Scroll
+- Plasser tabellen inni en `<figure>` for å få scroll på mobil
+- Bruk `data-nowrap` hvor du vil på tabellen, rader eller celler for å hindre linjeskift
+<div className="sbdocs-canvas-thumbnail">
+  <Button data-arrow data-variant="primary" href="?path=/story/designsystem-table--mobile-scroll">Se scroll tabell i egen visning</Button>
+  <Canvas className="sbdocs-canvas--max-height" of={stories.MobileDivided} />
+</div>
+
+## Mobile: Divided
+- Legg `data-mobile="divided"` på `<table>` for todelt visning opp til `768px`
+- Bruk `data-mobile-size="768"` for å sette egen breakpoint
+- Bruk `data-mobile-source="self"` for breakpoint basert på egen størrelse - ikke viewport
+<div className="sbdocs-canvas-thumbnail">
+  <Button data-arrow data-variant="primary" href="?path=/story/designsystem-table--mobile-divided">Se divided tabell i egen visning</Button>
+  <Canvas className="sbdocs-canvas--max-height" of={stories.MobileDivided} />
+</div>
+
+## Mobile: Spaced
+- Legg `data-mobile="spaced"` på `<table>` for todelt visning opp til `768px`
+- Bruk `data-mobile-size="768"` for å sette egen breakpoint
+- Bruk `data-mobile-source="self"` for breakpoint basert på egen størrelse - ikke viewport
+<div className="sbdocs-canvas-thumbnail">
+  <Button data-arrow data-variant="primary" href="?path=/story/designsystem-table--mobile-spaced">Se spaced tabell i egen visning</Button>
+  <Canvas className="sbdocs-canvas--max-height" of={stories.MobileSpaced} />
+</div>
+
+## Mobile: Stacked
+- Legg `data-mobile="stacked"` på `<table>` for stablet visning opp til `768px`
+- Bruk `data-mobile-size="768"` for å sette egen breakpoint
+- Bruk `data-mobile-source="self"` for breakpoint basert på egen størrelse - ikke viewport
+<div className="sbdocs-canvas-thumbnail">
+  <Button data-arrow data-variant="primary" href="?path=/story/designsystem-table--mobile-stacked">Se stacked tabell i egen visning</Button>
+  <Canvas className="sbdocs-canvas--max-height" of={stories.MobileStacked} />
+</div>
+
+## Kant rundt
+- Legg `data-border="true"` på `<table>` for å få kant rundt tabellen
+- **Merk:** Skal hovedsakelig kun brukes når tabell ligger rett på gåsunge bakgrunn
+<Canvas of={stories.WithBorderAround} />
+
+## Uten kant
+- Legg `data-border="false"` på `<table>` for å fjerne alle `border` linjer
+- **Merk:** Skal hovedsakelig kun brukes når tabell har kun to kolonner
+<Canvas of={stories.WithoutBorders} />
+
+<CssVariables component="table" exclude="zebra,sticky,hover,sorted" />