@mattilsynet/design 3.3.9 → 3.4.1

package/mtds/_virtual/_rolldown/runtime.js

@@ -0,0 +1,17 @@
+//#region \0rolldown/runtime.js
+var e = Object.defineProperty, t = Object.getOwnPropertyDescriptor, n = Object.getOwnPropertyNames, r = Object.prototype.hasOwnProperty, i = (t, n) => {
+	let r = {};
+	for (var i in t) e(r, i, {
+		get: t[i],
+		enumerable: !0
+	});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+}, a = (i, a, o, s) => {
+	if (a && typeof a == "object" || typeof a == "function") for (var c = n(a), l = 0, u = c.length, d; l < u; l++) d = c[l], !r.call(i, d) && d !== o && e(i, d, {
+		get: ((e) => a[e]).bind(null, d),
+		enumerable: !(s = t(a, d)) || s.enumerable
+	});
+	return i;
+}, o = (e, t, n) => (a(e, t, "default"), n && a(n, t, "default"));
+//#endregion
+export { i as __exportAll, o as __reExport };

package/mtds/ai/card.stories.tsx

@@ -136,11 +136,11 @@ export const Responsive: Story = {
 		<>
 			Grupperte eksempler:
 			<a href="#anchor" className={styles.card}>
-				<div className={styles.flex}>
-					<h2 data-size="md" data-self="250" data-fixed>
+				<div className={styles.flex} data-break>
+					<h2 data-size="md" data-self="250">
 						123456789
 					</h2>
-					<div className={styles.flex} data-self="500" data-items="100">
+					<div className={styles.flex} data-items="100">
 						<div className={styles.grid} data-items="100">
 							<div className={styles.info}>
 								<CalendarDotsIcon />
@@ -175,44 +175,37 @@ export const Responsive: Story = {
 				</div>
 			</a>
 			<Card>
-				<Flex data-align="start">
-					<Info data-self="250" data-fixed>
+				<Flex data-align="start" data-break>
+					<Info data-self="250">
 						<small>Opprettet 01.01.1970</small>
 						<Heading data-size="2xs">KY.KELLI.815.493.00</Heading>
 					</Info>
-					<Flex data-self="500">
-						<Flex data-self="500" data-align="start">
-							<Grid data-self="200">
-								<Info>
-									<PaperPlaneRightIcon />
-									Firmanavn AS
-								</Info>
-								<Info>
-									<i>🇳🇱</i> Nederland
-								</Info>
-							</Grid>
-							<Info data-self="300">
-								<DownloadSimpleIcon />
-								Bomsterlandet importerer bomster AS, Rogaland
+					<Flex data-align="start">
+						<Grid data-self="200">
+							<Info>
+								<PaperPlaneRightIcon />
+								Firmanavn AS
+							</Info>
+							<Info>
+								<i>🇳🇱</i> Nederland
 							</Info>
-						</Flex>
-						<Tag data-fixed data-color="info" data-icon="none">
-							Skal på tilsyn
-						</Tag>
+						</Grid>
+						<Info data-self="300">
+							<DownloadSimpleIcon />
+							Bomsterlandet importerer bomster AS, Rogaland
+						</Info>
 					</Flex>
+					<Tag data-fixed data-color="info" data-icon="none">
+						Skal på tilsyn
+					</Tag>
 				</Flex>
 			</Card>
 			<div className={styles.card}>
-				<div className={styles.flex} data-align="center">
-					<h2 data-size="md" data-self="250" data-fixed>
+				<div className={styles.flex} data-align="center" data-break>
+					<h2 data-size="md" data-self="250">
 						Bambus
 					</h2>
-					<div
-						className={styles.flex}
-						data-self="500"
-						data-items="150"
-						data-align="center"
-					>
+					<div className={styles.flex} data-items="150" data-align="center">
 						<div className={styles.grid} data-items="150">
 							<div className={styles.info}>
 								<MapPinIcon />
@@ -233,30 +226,23 @@ export const Responsive: Story = {
 								107.02.2020
 							</div>
 						</div>
-						<button
-							type="button"
-							className={styles.button}
-							data-variant="secondary"
-							data-nowrap
-							data-fixed
-							data-arrow
-						>
-							Planlegg tur
-						</button>
 					</div>
+					<button
+						type="button"
+						className={styles.button}
+						data-variant="secondary"
+						data-arrow
+					>
+						Planlegg tur
+					</button>
 				</div>
 			</div>
 			<div className={styles.card}>
-				<div className={styles.flex} data-align="center">
-					<h2 data-size="md" data-self="250" data-fixed>
+				<div className={styles.flex} data-align="center" data-break>
+					<h2 data-size="md" data-self="250">
 						Burgern
 					</h2>
-					<div
-						className={styles.flex}
-						data-self="500"
-						data-items="150"
-						data-align="center"
-					>
+					<div className={styles.flex} data-items="150" data-align="center">
 						<div className={styles.grid} data-items="150">
 							<div className={styles.info}>
 								<MapPinIcon />
@@ -285,30 +271,23 @@ export const Responsive: Story = {
 								13.02.2023
 							</div>
 						</div>
-						<button
-							type="button"
-							className={styles.button}
-							data-variant="secondary"
-							data-nowrap
-							data-fixed
-							data-arrow
-						>
-							Planlegg tur
-						</button>
 					</div>
+					<button
+						type="button"
+						className={styles.button}
+						data-variant="secondary"
+						data-arrow
+					>
+						Planlegg tur
+					</button>
 				</div>
 			</div>
 			<div className={styles.card}>
-				<div className={styles.flex} data-align="center">
-					<h2 data-size="md" data-self="250" data-fixed>
+				<div className={styles.flex} data-align="center" data-break>
+					<h2 data-size="md" data-self="250">
 						Den lekke tomat
 					</h2>
-					<div
-						className={styles.flex}
-						data-self="500"
-						data-items="150"
-						data-align="center"
-					>
+					<div className={styles.flex} data-items="150" data-align="center">
 						<div className={styles.grid} data-items="150">
 							<div className={styles.info}>
 								<MapPinIcon />
@@ -329,17 +308,15 @@ export const Responsive: Story = {
 								23.03.2025
 							</div>
 						</div>
-						<button
-							type="button"
-							className={styles.button}
-							data-variant="secondary"
-							data-nowrap
-							data-fixed
-							data-arrow
-						>
-							Planlegg tur
-						</button>
 					</div>
+					<button
+						type="button"
+						className={styles.button}
+						data-variant="secondary"
+						data-arrow
+					>
+						Planlegg tur
+					</button>
 				</div>
 			</div>
 			Ikke gruppert eksempel:

package/mtds/ai/layout.mdx

@@ -1,6 +1,6 @@
 import { Meta, Canvas } from '@storybook/addon-docs/blocks';
 import { CssVariables, JumpTo } from '../../.storybook/blocks';
-import { Alert, Button, Details, Popover, Table } from '../react.tsx';
+import { Alert, Button, Details, Popover, Table, Flex } from '../react.tsx';
 import * as stories from './layout.stories';
 
 <Meta of={stories} />
@@ -100,6 +100,12 @@ samt noen superpowers for responsivitet via vår egen `data-items` attributt.
       <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>
 
@@ -142,4 +148,34 @@ samt noen superpowers for responsivitet via vår egen `data-items` attributt.
 - `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" />

package/mtds/ai/layout.stories.tsx

@@ -1,3 +1,10 @@
+import {
+	CalendarDotsIcon,
+	ClockIcon,
+	DownloadSimpleIcon,
+	ListChecksIcon,
+	UploadSimpleIcon,
+} from "@phosphor-icons/react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Fragment } from "react";
 import { Button, Flex, Grid } from "../react";
@@ -16,7 +23,7 @@ const meta = {
 			<div className="mt-story">
 				<Story />
 				<style>{`
-					.mt-story:not(:has(.${styles.body.split(" ")[0]})) {
+					.mt-story:not(:has(.${styles.body.split(" ")[0]}), :has([data-break])) {
 						display: grid;
 						gap: 1rem;
 						padding: 1px;
@@ -441,3 +448,121 @@ export const AlignContent: Story = {
 		</section>
 	),
 };
+
+export const BreakCard: Story = {
+	render: () => (
+		<div
+			className={styles.grid}
+			style={{ "--mtds-break": "40em" } as React.CSSProperties}
+		>
+			<div className={styles.card}>
+				<div className={styles.flex} data-align="start" data-break>
+					<h2
+						data-card="start"
+						className={styles.heading}
+						data-size="2xs"
+						data-self="200"
+					>
+						123456789
+					</h2>
+					<div className={styles.flex} data-self="500" data-items="100">
+						<div className={styles.grid} data-items="100">
+							<div className={styles.info}>
+								<CalendarDotsIcon />
+								<span>06.12.2024</span>
+							</div>
+							<div className={styles.info}>
+								<ClockIcon />
+								19:37
+							</div>
+						</div>
+						<div className={styles.grid} data-items="100">
+							<div className={styles.info}>
+								<UploadSimpleIcon />
+								Groene Tuin
+							</div>
+							<div className={styles.info}>
+								<i>🇫🇷</i>
+								Frankrike
+							</div>
+						</div>
+						<div className={styles.grid} data-self="500" data-items="250">
+							<div className={styles.info}>
+								<DownloadSimpleIcon />
+								Blomquist Blomster AS
+							</div>
+							<div className={styles.info}>
+								<ListChecksIcon />
+								Daucus carota, Hydrangea paniculata, +4
+							</div>
+						</div>
+					</div>
+					<div className={styles.flex} data-self="150">
+						<button
+							className={styles.button}
+							type="button"
+							data-variant="secondary"
+							data-arrow
+						>
+							Action
+						</button>
+					</div>
+				</div>
+			</div>
+			<div className={styles.card}>
+				<div className={styles.flex} data-align="start" data-break>
+					<h2
+						data-card="start"
+						className={styles.heading}
+						data-size="2xs"
+						data-self="200"
+					>
+						123456789
+					</h2>
+					<div className={styles.flex} data-self="500" data-items="100">
+						<div className={styles.grid} data-items="100">
+							<div className={styles.info}>
+								<CalendarDotsIcon />
+								<span>06.12.2024</span>
+							</div>
+							<div className={styles.info}>
+								<ClockIcon />
+								19:37
+							</div>
+						</div>
+						<div className={styles.grid} data-items="100">
+							<div className={styles.info}>
+								<UploadSimpleIcon />
+								Groene Tuin
+							</div>
+							<div className={styles.info}>
+								<i>🇫🇷</i>
+								Frankrike
+							</div>
+						</div>
+						<div className={styles.grid} data-self="500" data-items="250">
+							<div className={styles.info}>
+								<DownloadSimpleIcon />
+								Blomquist Blomster AS
+							</div>
+							<div className={styles.info}>
+								<ListChecksIcon />
+								Daucus carota, Hydrangea paniculata, +4
+							</div>
+						</div>
+					</div>
+					<div className={styles.flex} data-self="150">
+						<button
+							className={styles.button}
+							type="button"
+							data-variant="secondary"
+							data-arrow
+						>
+							Action 1
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	),
+};

package/mtds/ai/print.mdx

@@ -6,7 +6,7 @@ import styles from '../styles.module.css';
 
 <Meta of={stories} />
 
-# Print (Eksperimentell)
+# Print
 > Print brukes for å lage PDF eller utskriftsvennlige rapporter og dokumenter med Mattilsynets designprofil.
 > I nettleser får du en A4-forhåndsvisning, og ved PDF/utskrift får du sidetall, bunnlinje og kontrollerte sideskift som unngår brudd i bilder, lister og tabeller.