@mattilsynet/design 3.2.9 → 3.3.1

package/mtds/ai/law.stories.tsx

@@ -0,0 +1,168 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+	fixLawHtml,
+	getLawChecked,
+	parseLawIds,
+	setLawChecked,
+	toggleLawChecked,
+} from "../";
+import { Flex, Law } from "../react";
+import styles from "../styles.module.css";
+import { vinforskriften } from "./vinforskriften-new";
+
+// TODO: Søkefunksjon
+// TODO: Kommentar/tilbakemeldingsfunksjon
+// TODO: Må finnes kommentarfelt med fritekst i alle systemer uansett, for å kunne utbrodere
+// ? defaultP eksempel Artikkel 9, Nr. 1, Avsnitt 2, https://lovdata.no/dokument/SF/forskrift/2013-01-13-60/ARTIKKEL_9#ARTIKKEL_9
+
+const meta = {
+	title: "Designsystem/Law",
+	parameters: {
+		layout: "padded",
+		showInOverview: false,
+	},
+	decorators: [
+		(Story) => {
+			return (
+				<Flex
+					data-center="2xl"
+					data-gap="8"
+					data-items="300"
+					data-nowrap
+					id="flex"
+				>
+					<style>{`#flex:has([data-variant="view"]) pre strong { display: none }`}</style>
+					<Story />
+					<pre data-self="300" data-fixed style={SIDEBAR_STYLE}>
+						<strong>Valgte:</strong>
+						<div id="log"></div>
+					</pre>
+				</Flex>
+			);
+		},
+	],
+} satisfies Meta;
+
+const console = {
+	log: (laws: ReturnType<typeof parseLawIds>) => {
+		const log = document.getElementById("log") as HTMLElement;
+		log.textContent = laws.map(({ label }) => `\n- ${label}`).join("");
+		window.console.log(laws);
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const SIDEBAR_STYLE: React.CSSProperties = {
+	maxHeight: "calc(100vh - 32px)",
+	overflow: "auto",
+	fontFamily: "monospace",
+	whiteSpace: "pre-wrap",
+	position: "sticky",
+	fontSize: 14,
+	top: 16,
+};
+
+export const Default: Story = {
+	parameters: {
+		showInOverview: false,
+	},
+	render: () => {
+		const lawElement = useRef<HTMLDivElement>(null);
+
+		// Avoid re-processing on every render:
+		const html = useMemo(() => ({ __html: fixLawHtml(vinforskriften) }), []);
+
+		// Sync checked state to Law component:
+		useEffect(() => {
+			const self = lawElement.current;
+			const onClick = ({ target }: Event) => {
+				if (target instanceof HTMLButtonElement) {
+					toggleLawChecked(target, self);
+					const checked = getLawChecked(self);
+					console.log(parseLawIds(checked, html.__html));
+				}
+			};
+
+			self?.addEventListener("click", onClick);
+			return () => self?.removeEventListener("click", onClick);
+		}, [html]);
+
+		// Render:
+		return (
+			<div
+				className={styles.law}
+				dangerouslySetInnerHTML={html}
+				ref={lawElement}
+			/>
+		);
+	},
+};
+
+export const React: Story = {
+	render: () => {
+		const [checkedIds, setCheckedIds] = useState<string[]>([]);
+		const lawElement = useRef<HTMLDivElement>(null);
+
+		// Avoid re-processing on every render:
+		const html = useMemo(() => ({ __html: fixLawHtml(vinforskriften) }), []);
+
+		// Sync checked state to Law component:
+		useEffect(() => {
+			setLawChecked(checkedIds, lawElement.current);
+		}, [checkedIds]);
+
+		// Render:
+		return (
+			<Law
+				dangerouslySetInnerHTML={html}
+				ref={lawElement}
+				onClick={(event) => {
+					if (event.target instanceof HTMLButtonElement) {
+						const id = event.target.value;
+						const checked = checkedIds.includes(id)
+							? checkedIds.filter((cid) => cid !== id)
+							: [...checkedIds, id];
+
+						setCheckedIds(checked);
+						console.log(parseLawIds(checked, html.__html));
+					}
+				}}
+			/>
+		);
+	},
+};
+
+export const VariantView: Story = {
+	render: () => {
+		// Avoid re-processing on every render:
+		const html = useMemo(() => ({ __html: fixLawHtml(vinforskriften) }), []);
+
+		// Render:
+		return (
+			<div
+				data-variant="view"
+				className={styles.law}
+				dangerouslySetInnerHTML={html}
+			/>
+		);
+	},
+};
+
+export const VariantReadOnly: Story = {
+	render: () => {
+		// Avoid re-processing on every render:
+		const html = useMemo(() => ({ __html: fixLawHtml(vinforskriften) }), []);
+
+		// Render:
+		return (
+			<div
+				data-variant="readonly"
+				className={styles.law}
+				dangerouslySetInnerHTML={html}
+			/>
+		);
+	},
+};

package/mtds/ai/layout.mdx

@@ -0,0 +1,145 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { CssVariables, JumpTo } from '../../.storybook/blocks';
+import { Alert, Button, Details, Popover, Table } 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>
+  </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} />
+
+<CssVariables component="layout" />