@mattilsynet/design 3.2.8 → 3.3.0

package/mtds/ai/popover.mdx

@@ -0,0 +1,86 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Example, CssVariables, JumpTo } from '../../.storybook/blocks';
+import * as stories from './popover.stories';
+import { Flex, Prose } from '../react';
+import styles from '../styles.module.css';
+
+<Meta of={stories} />
+
+# Popover
+> Popover vises over andre elementer i grensesnittet og er koblet til et spesifikt element. Den brukes til å vise tilleggsinformasjon, interaktive elementer eller korte forklaringer uten å navigere bort fra siden. Popover kan brukes som en utvidet løsning når tooltip ikke strekker til.
+
+<JumpTo />
+
+## Kode
+- Legg klassen `popover`, attributten `popover` og `id` på `<div>` eller `<menu>`
+- Legg `popovertarget="ID"` på typisk `<button>` som trigger element
+- Plassiering vil automatisk tilpasse seg scroll og tilgjengelig plass
+
+> **Merk:** I React 19 kan du skrive `popoverTarget` og `popoverTargetAction`. Eldre versjoner av React krever `popovertarget` og `popovertargetaction`
+
+<Canvas of={stories.Default} />
+
+## Skikk og bruk
+<Flex data-items="350">
+
+   {/* Lange tekster */}
+  <Example data-color="success" text="Innhold i popover bør være kort og konsist (trykk for å se)." zoom="100%">
+    
+
+    Vi bruker{" "} <button popoverTarget="pop-inline-1" type="button" data-popover="inline">
+    design tokens </button>{" "} for å sikre at vi har en konsistent design.
+
+    <div popover="auto" id="pop-inline-1" className={styles.popover}> Design tokens er en samling av variabler som definerer designet i et
+    designsystem. </div>
+
+  </Example>
+
+  <Example data-color="danger" text="Unngå lange tekster i popover (trykk for å se)." zoom="100%">
+   
+    Vi bruker{" "} <button popoverTarget="pop-inline-2" type="button" data-popover="inline">
+    design tokens </button>{" "} for å sikre at vi har en konsistent design.
+    
+    <div popover="auto" id="pop-inline-2" className={styles.popover}> Design tokens er navngitte variabler (navn-verdi-par) som representerer grunnleggende designattributter som farger, typografi, mellomrom, skygger og animasjoner. De fungerer som et "enkelt kilde til sannhet" som kan brukes på tvers av ulike plattformer, teknologier og designverktøy for å opprettholde et enhetlig og konsistent utseende i digitale produkter. Ved å erstatte hardkodede verdier med tokens, kan design og kode holdes synkronisert, noe som forenkler vedlikehold og gir skalerbarhet for designsystemer. </div>
+
+  </Example>
+
+</Flex>
+
+## Nedtrekksmeny / Dropdown
+- Bruk `<menu>` med `<li><button type="button">` eller ` <li><a>` som barn
+- Dersom du legger `<a>` inni en `popover`, vil den automatsk lukke popoveren på klikk, med mindre du setter `popovertargetaction="show"` eller kjører `event.preventDefault()` på `onClick`
+
+<Canvas of={stories.Dropdown} />
+
+## Placement
+- Bruk `data-placement="top | top-start | top-end | right | right-start | right-end | bottom | bottom-start | bottom-end | left | left-start | left-end"` for å plassere popoveren
+- Popover vil alltid legge seg der det er plass i skjermbildet
+<Canvas of={stories.Placement} />
+
+## Lukkeknapp
+- Bruk `popovertargetaction="hide"` på `<button>` (eller `<a>` dersom du lager en SPA) for å lage lukkeknapp:
+<Canvas of={stories.WithClose} />
+
+## Tekst inline
+- Bruk `data-popover="inline"` på `<button>` for popover fra brødtekst:
+<Canvas of={stories.WithTextInline} />
+
+
+
+## Pil
+- Bruk `data-arrow` på `<button>` for å få ikon:
+<Canvas of={stories.WithArrow} />
+
+## Egendefinert ikon
+- Du kan vise/skjule innhold ved bruke attributten `data-pressed="true | false"` på barn:
+<Canvas of={stories.WithIcon} />
+
+## Skillelinje
+- Bruk `<li><hr />` i `<menu>` for å få skillelinje:
+<Canvas of={stories.WithDivider} />
+
+## Scroll
+- Bruk `data-overscroll="contain"` for å holde popover høyde innen skjermbildet:
+<Canvas of={stories.WithOverscroll} />
+
+<CssVariables component="popover" />

package/mtds/ai/popover.stories.tsx

@@ -0,0 +1,355 @@
+import { ListIcon, XIcon } from "@phosphor-icons/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useId } from "react";
+import { Button, Field, Input, Popover } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Popover",
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const range = Array.from(Array(10), (_, num) => num + 1);
+
+export const Default: Story = {
+	render: function Render() {
+		const popId = useId();
+
+		return (
+			<>
+				<button
+					className={styles.button}
+					data-arrow
+					data-variant="secondary"
+					popoverTarget={popId}
+					type="button"
+				>
+					Knapp
+				</button>
+				<menu popover="auto" id={popId} className={styles.popover}>
+					{range.map((num) => (
+						<li key={num}>
+							<button
+								className={styles.button}
+								popoverTargetAction="hide"
+								type="button"
+							>
+								Knapp {num}
+							</button>
+						</li>
+					))}
+				</menu>
+			</>
+		);
+	},
+};
+
+export const React: Story = {
+	render: function Render() {
+		const popId = useId();
+		const popInlineId = useId();
+		const popLabelId = useId();
+
+		return (
+			<>
+				<Button popoverTarget={popId} data-variant="secondary" data-arrow>
+					Knapp
+				</Button>
+				<Popover as="menu" id={popId}>
+					{range.map((num) => (
+						<li key={num}>
+							<Button>Knapp {num}</Button>
+						</li>
+					))}
+				</Popover>
+				<br />
+				<p>
+					En{" "}
+					<button
+						type="button"
+						data-popover="inline"
+						popoverTarget={popInlineId}
+					>
+						popover i test
+					</button>
+				</p>
+				<Popover id={popInlineId}>Popover i tekst</Popover>
+				<br />
+				<Field>
+					<Field.Label>
+						Et{" "}
+						<button
+							type="button"
+							data-popover="inline"
+							popoverTarget={popLabelId}
+						>
+							vanskelig ord
+						</button>{" "}
+						i ledetekst
+					</Field.Label>
+					<Popover id={popLabelId}>
+						Legg popover elementet <i>etter</i> label elementet (ikke inni), for
+						å oppnå semantisk riktig HTML
+					</Popover>
+					<Input />
+				</Field>
+			</>
+		);
+	},
+};
+
+export const Dropdown: Story = {
+	render: function Render() {
+		const popId = useId();
+
+		return (
+			<>
+				<button
+					popoverTarget={popId}
+					type="button"
+					className={styles.button}
+					data-variant="secondary"
+					data-arrow
+				>
+					Knapp
+				</button>
+				<menu popover="auto" id={popId} className={styles.popover}>
+					<li>
+						<a href="#none" className={styles.button}>
+							Knapp 1
+						</a>
+					</li>
+					<li>
+						<a href="#none" className={styles.button}>
+							Knapp 2
+						</a>
+					</li>
+					<li>
+						<a
+							href="#none"
+							className={styles.button}
+							popoverTargetAction="show"
+						>
+							Knapp 3
+						</a>
+					</li>
+				</menu>
+			</>
+		);
+	},
+};
+
+export const Placement: Story = {
+	render: () => (
+		<>
+			<button
+				popoverTarget="pop-2"
+				type="button"
+				className={styles.button}
+				data-variant="primary"
+			>
+				Knapp
+			</button>
+			<div
+				className={styles.popover}
+				data-placement="top"
+				id="pop-2"
+				popover="auto"
+			>
+				<div className={styles.grid}>
+					<p>Er du sikker på at du vil avslutte uten å lagre?</p>
+					<div className={styles.flex}>
+						<button
+							type="button"
+							className={styles.button}
+							data-variant="primary"
+						>
+							Lagre
+						</button>
+						<button
+							popoverTarget="pop-2"
+							popoverTargetAction="hide"
+							type="button"
+							className={styles.button}
+							data-variant="secondary"
+						>
+							Avbryt
+						</button>
+					</div>
+				</div>
+			</div>
+		</>
+	),
+};
+
+export const WithClose: Story = {
+	render: () => (
+		<>
+			<button
+				popoverTarget="pop-3"
+				type="button"
+				className={styles.button}
+				data-variant="primary"
+			>
+				Knapp
+			</button>
+			<div popover="auto" id="pop-3" className={styles.popover}>
+				<button
+					popoverTargetAction="hide"
+					type="button"
+					className={styles.button}
+					data-variant="secondary"
+				>
+					Lukk
+				</button>
+			</div>
+		</>
+	),
+};
+
+export const WithTextInline: Story = {
+	parameters: { showInOverview: true },
+	render: () => (
+		<>
+			Vi bruker{" "}
+			<button popoverTarget="pop-inline" type="button" data-popover="inline">
+				design tokens
+			</button>{" "}
+			for å sikre at vi har en konsistent design.
+			<div popover="auto" id="pop-inline" className={styles.popover}>
+				Design tokens er en samling av variabler som definerer designet i et
+				designsystem.
+			</div>
+			<br />
+			<br />
+			<ds-field className={styles.field}>
+				<label>
+					Et{" "}
+					<button popoverTarget="pop-label" type="button" data-popover="inline">
+						vanskelig ord
+					</button>{" "}
+					i ledetekst
+				</label>
+				<div popover="auto" id="pop-label" className={styles.popover}>
+					Legg popover elementet <i>etter</i> label elementet (ikke inni), for å
+					oppnå semantisk riktig HTML
+				</div>
+				<input className={styles.input} />
+			</ds-field>
+		</>
+	),
+};
+
+export const WithArrow: Story = {
+	render: () => (
+		<>
+			<button
+				className={styles.button}
+				data-arrow
+				popoverTarget="pop-4"
+				type="button"
+			>
+				Knapp
+			</button>
+			<div popover="auto" id="pop-4" className={styles.popover}>
+				Innhold
+			</div>
+		</>
+	),
+};
+
+export const WithIcon: Story = {
+	render: () => (
+		<>
+			<button className={styles.button} popoverTarget="pop-icon" type="button">
+				Knapp
+				<ListIcon data-pressed="false" />
+				<XIcon data-pressed="true" />
+			</button>
+			<div popover="auto" id="pop-icon" className={styles.popover}>
+				Innhold
+			</div>
+		</>
+	),
+};
+
+export const WithDivider: Story = {
+	render: function Render() {
+		const popId = useId();
+
+		return (
+			<>
+				<button
+					popoverTarget={popId}
+					type="button"
+					className={styles.button}
+					data-variant="secondary"
+					data-arrow
+				>
+					Knapp
+				</button>
+				<menu popover="auto" id={popId} className={styles.popover}>
+					<li>
+						<button type="button" className={styles.button}>
+							Knapp 1
+						</button>
+					</li>
+					<li>
+						<button type="button" className={styles.button}>
+							Knapp 2
+						</button>
+					</li>
+					<li>
+						<hr className={styles.divider} />
+					</li>
+					<li>
+						<button type="button" className={styles.button}>
+							Knapp 3
+						</button>
+					</li>
+					<li>
+						<button type="button" className={styles.button}>
+							Knapp 4
+						</button>
+					</li>
+				</menu>
+			</>
+		);
+	},
+};
+
+export const WithOverscroll: Story = {
+	render: function Render() {
+		const popId = useId();
+
+		return (
+			<>
+				<button
+					popoverTarget={popId}
+					type="button"
+					className={styles.button}
+					data-variant="secondary"
+					data-arrow
+				>
+					Overscroll
+				</button>
+				<menu
+					popover="auto"
+					id={popId}
+					className={styles.popover}
+					data-overscroll="contain"
+				>
+					{Array.from({ length: 20 }, (_, i) => i).map((num) => (
+						<li key={num}>
+							<button type="button" className={styles.button}>
+								Knapp {num + 1}
+							</button>
+						</li>
+					))}
+				</menu>
+			</>
+		);
+	},
+};

package/mtds/ai/print.mdx

@@ -0,0 +1,96 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Example, CssVariables, JumpTo } from '../../.storybook/blocks';
+import * as stories from './print.stories';
+import { Button } from '../react';
+import styles from '../styles.module.css';
+
+<Meta of={stories} />
+
+# Print (Eksperimentell)
+> 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.
+
+<JumpTo />
+
+## Kode
+- All HTML du lager, kan sendes til Mattilsynets [HTML-til-PDF-tjeneste](https://github.com/Mattilsynet/html-to-pdf)
+  - Koden legges automatisk i `<body>`, så du trenger ikke lage head, meta osv selv.
+  - Tjenesten bruker headless Chrome, så bruk Chromes print-preview ved lokal testing
+  - Alle bilder må inlines som `base64`-urler så de blir en del av HTML-strengen
+  - All CSS og fonter må også inlines, dette hjelper designsystemet med slik:
+
+```
+// Import CSS as text if using Vite
+import css from '@mattilsynet/design/styles.css?raw';
+
+// ...or import css with pure Node:
+import path from "node:path";
+import fs from "node:fs";
+
+const cssPath = path.resolve(process.cwd(), 'node_modules/@mattilsynet/design/mtds/styles.css');
+const css = fs.readFileSync(cssPath, 'utf8');
+
+
+<div id="my-print">
+  <style>
+    {css}
+    :root {
+      --mtdsc-print-office: 'ditt kontor'; /* Required */
+      --mtdsc-print-department: 'din avdeling'; /* Required */
+      --mtdsc-print-classification: none; /* Optional, remove to get "Unntatt offentlighet" */
+
+      --mtdsc-print-back-tagline: none; /* Optional, if using data-variant="back" */
+      --mtdsc-print-back-footer: none; /* Optional, if using data-variant="back" */
+    }
+  </style>
+  <section className="print">
+    innhold her
+  </section>
+</div>
+```
+
+## Brevmal
+
+- For å legge inn mottaker, lag en `<address>` og `<dl>` inne i en `<div>`:
+
+```
+<div>
+  <address>
+    Eksempelstedet AS
+    <br />Uendeligveien 999
+    <br />0000 Sted
+  </address>
+  <dl>
+    <dt>Vår ref:</dt><dd>2004/12345</dd>
+    <dt>Dato:</dt><dd>01.01.2024</dd>
+    <dt>Org.nr:</dt><dd>123456789</dd>
+  </dl>
+</div>
+```
+
+<div className="sbdocs-canvas-thumbnail">
+  <Button data-arrow data-variant="primary" target="_blank" href="/iframe.html?globals=&id=designsystem-print--brevmal">Se brevmal i ny fane</Button>
+  <Canvas of={stories.Brevmal} />
+</div>
+
+## Rapportmal
+- Legg til en `<section className="print" data-variant="front">` for forside
+- Legg til en `<section className="print" data-variant="back">` for bakside
+
+<div className="sbdocs-canvas-thumbnail">
+  <Button data-arrow data-variant="primary" target="_blank" href="/iframe.html?globals=&id=designsystem-print--rapportmal">Se rapportmal i ny fane</Button>
+  <Canvas of={stories.Rapportmal} />
+</div>
+
+<CssVariables component='print' />
+
+## Vedtak
+- Det finnes mye, godt utarbeidet materiale for hvordan vedtak skal utformes, og det er viktig at vi følger dette så langt det lar seg gjøre. [Se rapportkvalitet →](https://mattilsynet.sharepoint.com/:f:/r/sites/TVRTilsyn/Delte%20dokumenter/Rapportkvalitet/Oppl%C3%A6ring%20Nytt%20oppsett%20i%20MATS?csf=1&web=1&e=94K1gM)
+- Designsystemet har foreløpig ingen spesifikke komponenter for vedtak, men har heller kodet opp et eksempel foreløpig.
+
+<div className="sbdocs-canvas-thumbnail">
+  <Button data-arrow data-variant="primary" target="_blank" href="/iframe.html?globals=&id=designsystem-print--vedtak">Se vedtak i ny fane</Button>
+  <Canvas of={stories.Rapportmal} />
+</div>
+
+<CssVariables component='print' />