@mattilsynet/design 3.2.8 → 3.3.0

package/mtds/ai/dialog.stories.tsx

@@ -0,0 +1,373 @@
+import { FunnelIcon } from "@phosphor-icons/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useEffect, useRef, useState } from "react";
+import { Button, Dialog, Field, Flex, Heading, Prose } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Dialog",
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const LOREM_IPSUM = (
+	<>
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+			malesuada eget risus nec viverra. Nam dapibus nec arcu in tristique. Fusce
+			varius urna odio, vel bibendum odio imperdiet eget. Aliquam consectetur
+			arcu mi, quis elementum mi convallis a. Sed venenatis nec enim vel
+			molestie. Vestibulum nec auctor ligula. Nunc id sollicitudin ligula. Fusce
+			interdum quam posuere augue fringilla, dignissim convallis ex suscipit.
+		</p>
+		<p>
+			Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+			cubilia curae; Aliquam commodo bibendum risus non luctus. Etiam molestie
+			lectus commodo quam ornare posuere. Vestibulum aliquam viverra ligula non
+			ultricies. Pellentesque eu bibendum nibh, vel vestibulum tortor. Duis
+			rutrum metus sed dictum sagittis. Vivamus in arcu sed neque cursus
+			condimentum. Praesent vel turpis malesuada, ullamcorper justo et,
+			facilisis neque. In ex enim, semper sed sapien sit amet, mollis laoreet
+			mi. Fusce vitae bibendum nulla, in condimentum tortor.
+		</p>
+	</>
+);
+
+export const Default: Story = {
+	render: () => (
+		<>
+			<button
+				className={styles.button}
+				command="show-modal"
+				commandfor="my-dialog"
+				type="button"
+			>
+				Open
+			</button>
+			<dialog className={styles.dialog} id="my-dialog">
+				<button
+					aria-label="Lukk"
+					command="request-close"
+					commandfor="my-dialog"
+					type="button"
+				></button>
+				<div className={styles.prose}>
+					<h2 className={styles.heading}>Eksempeldialog</h2>
+					{LOREM_IPSUM}
+				</div>
+			</dialog>
+		</>
+	),
+};
+
+export const React: Story = {
+	render: function Render() {
+		return (
+			<>
+				<Button command="show-modal" commandfor="my-react-dialog">
+					Open
+				</Button>
+				<Dialog id="my-react-dialog">
+					<Button
+						aria-label="Lukk"
+						command="close"
+						commandfor="my-react-dialog"
+					/>
+					<Prose>
+						<Heading>Eksempeldialog</Heading>
+						{LOREM_IPSUM}
+					</Prose>
+				</Dialog>
+			</>
+		);
+	},
+};
+
+export const ReactWithState: Story = {
+	render: function Render() {
+		const dialogRef = useRef<HTMLDialogElement>(null);
+		const [open, setOpen] = useState(false);
+
+		useEffect(() => {
+			dialogRef.current?.[open ? "showModal" : "close"]();
+		}, [open]);
+
+		return (
+			<>
+				<Button onClick={() => setOpen(true)}>Open</Button>
+				<Dialog ref={dialogRef} onClose={() => setOpen(false)}>
+					<Button
+						aria-label="Lukk"
+						command="close"
+						onClick={() => setOpen(false)}
+					/>
+					<Prose>
+						<Heading>Eksempeldialog</Heading>
+						{LOREM_IPSUM}
+					</Prose>
+				</Dialog>
+			</>
+		);
+	},
+};
+
+export const WithClose: Story = {
+	render: () => (
+		<>
+			<button
+				className={styles.button}
+				command="show-modal"
+				commandfor="my-close-dialog"
+				type="button"
+			>
+				Open
+			</button>
+			<dialog className={styles.dialog} id="my-close-dialog">
+				<button
+					type="button"
+					command="close"
+					commandfor="my-close-dialog"
+					aria-label="Lukk"
+				></button>
+				<div className={styles.prose}>
+					<h2 className={styles.heading}>Eksempeldialog</h2>
+					<p>Dialog content here</p>
+					<div className={styles.flex}>
+						<button
+							type="button"
+							data-variant="primary"
+							className={styles.button}
+						>
+							Lagre
+						</button>
+						<button
+							className={styles.button}
+							commandfor="my-close-dialog"
+							command="close"
+							type="button"
+						>
+							Avbryt
+						</button>
+					</div>
+				</div>
+			</dialog>
+		</>
+	),
+};
+
+export const WithBackdropClose: Story = {
+	render: () => (
+		<>
+			<button
+				className={styles.button}
+				command="show-modal"
+				commandfor="my-backdrop-dialog"
+				type="button"
+			>
+				Open
+			</button>
+			<dialog id="my-backdrop-dialog" className={styles.dialog} closedby="any">
+				<h2 className={styles.heading}>Eksempeldialog</h2>
+				Klikk på utsiden for å lukke
+			</dialog>
+		</>
+	),
+};
+
+export const WithStickyFooter: Story = {
+	render: () => (
+		<>
+			<button
+				className={styles.button}
+				type="button"
+				command="show-modal"
+				commandfor="my-footer-dialog"
+			>
+				Open
+			</button>
+			<dialog className={styles.dialog} id="my-footer-dialog">
+				<form className={styles.prose} method="dialog" id="my-dialog-form">
+					<h2 className={styles.heading}>Vilkår</h2>
+					{LOREM_IPSUM}
+					{LOREM_IPSUM}
+					{LOREM_IPSUM}
+					{LOREM_IPSUM}
+					{LOREM_IPSUM}
+				</form>
+				<footer className={styles.flex}>
+					<button
+						form="my-dialog-form"
+						type="submit"
+						className={styles.button}
+						data-variant="primary"
+					>
+						Godta vilkår
+					</button>
+					<button
+						type="button"
+						command="close"
+						commandfor="my-footer-dialog"
+						className={styles.button}
+					>
+						Avbryt
+					</button>
+				</footer>
+			</dialog>
+		</>
+	),
+};
+
+export const WithoutBackdrop: Story = {
+	render: function Render() {
+		const [open, setOpen] = useState(false);
+
+		return (
+			<>
+				<button
+					className={styles.button}
+					type="button"
+					onClick={() => setOpen(true)}
+				>
+					Open
+				</button>
+				<dialog
+					className={styles.dialog}
+					onClose={() => setOpen(false)}
+					id="my-nonmodal-dialog"
+					open={open}
+				>
+					<button
+						type="button"
+						aria-label="Lukk"
+						command="close"
+						commandfor="my-nonmodal-dialog"
+					/>
+					<div className={styles.prose}>
+						<h2 className={styles.heading}>Eksempeldialog</h2>
+						<p>Uten backdrop</p>
+					</div>
+				</dialog>
+			</>
+		);
+	},
+};
+
+export const VariantDrawer: Story = {
+	render: function Render() {
+		return (
+			<>
+				<button
+					className={styles.button}
+					type="button"
+					command="show-modal"
+					commandfor="my-drawer"
+				>
+					Open
+				</button>
+				<dialog
+					className={styles.dialog}
+					data-placement="right"
+					id="my-drawer"
+					closedby="any"
+				>
+					<button
+						type="button"
+						aria-label="Lukk"
+						command="close"
+						commandfor="my-drawer"
+					/>
+					<div className={styles.prose}>
+						<h2 className={styles.heading}>Eksempelskuff med backdrop</h2>
+						<p>Kan også brukes uten backdrop</p>
+					</div>
+				</dialog>
+			</>
+		);
+	},
+};
+
+const options = Array.from({ length: 25 }, (_, i) => ({
+	label: `Alternativ ${i + 1}`,
+	value: `${i}`,
+}));
+
+export const VariantDrawerWithoutBackdrop: Story = {
+	render: function Render() {
+		const [open, setOpen] = useState(false);
+
+		return (
+			<>
+				<Button data-variant="secondary" onClick={() => setOpen(true)}>
+					<FunnelIcon />
+					Filtrer
+				</Button>
+				<Dialog
+					id="my-filter-drawer"
+					data-placement="right"
+					open={open}
+					onClose={() => setOpen(false)}
+				>
+					<Button command="close" commandfor="my-filter-drawer" />
+					<form action="#">
+						<Prose>
+							<Heading>
+								<FunnelIcon /> Filtrer
+							</Heading>
+							<Field as={Field.Suggestion} label="Filter 1" options={options} />
+							<Field as={Field.Suggestion} label="Filter 2" options={options} />
+							<Field as={Field.Suggestion} label="Filter 3" options={options} />
+							<Field as={Field.Suggestion} label="Filter 4" options={options} />
+							<Field as={Field.Suggestion} label="Filter 5" options={options} />
+							<Field as={Field.Suggestion} label="Filter 6" options={options} />
+							<Field as={Field.Suggestion} label="Filter 7" options={options} />
+							<Field as={Field.Suggestion} label="Filter 8" options={options} />
+							<Field as={Field.Suggestion} label="Filter 9" options={options} />
+						</Prose>
+					</form>
+					<Flex as="footer">
+						<Button data-variant="primary" type="submit" form="my-filter-form">
+							Bruk
+						</Button>
+						<Button type="reset" form="my-filter-form">
+							Tøm filter
+						</Button>
+					</Flex>
+				</Dialog>
+			</>
+		);
+	},
+};
+
+export const DeprecatedDefault: Story = {
+	tags: ["!dev"],
+	render: function Render() {
+		const [open, setOpen] = useState(false);
+
+		return (
+			<>
+				<button
+					className={styles.button}
+					onClick={() => setOpen(true)}
+					type="button"
+				>
+					Open
+				</button>
+				<dialog
+					className={styles.dialog}
+					data-closedby="any"
+					data-modal="true"
+					data-variant="drawer"
+					onClose={() => setOpen(false)}
+					open={open}
+				>
+					<button aria-label="Lukk" data-command="close" type="button"></button>
+					<div className={styles.prose}>
+						<h2 className={styles.heading}>Eksempeldialog</h2>
+						{LOREM_IPSUM}
+					</div>
+				</dialog>
+			</>
+		);
+	},
+};

package/mtds/ai/divider.mdx

@@ -0,0 +1,19 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { CssVariables } from '../../.storybook/blocks';
+import * as stories from './divider.stories';
+
+<Meta of={stories} />
+
+# Divider
+> Divider er en horisontal linje som skaper et visuelt skille mellom innhold.
+
+## Kode
+- `<hr />` får automatisk skillelinjestil
+- Bruk klassen `divider` om du mot formodning trenger skillelinjestil på et annet element
+<Canvas of={stories.Default} />
+
+## Gap
+- Bruk `data-gap="0|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|18|22|26|30"` (`6` er default)
+<Canvas of={stories.Gap} />
+
+<CssVariables component="divider" />

package/mtds/ai/divider.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Divider } from "../react";
+import styles from "../styles.module.css";
+
+const gaps = [
+	0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 18, 22, 26, 30,
+];
+const meta = {
+	title: "Designsystem/Divider",
+	parameters: {
+		layout: "padded",
+	},
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<>
+			Innhold før
+			<hr />
+			Innhold etter
+		</>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<>
+			Innhold før
+			<Divider />
+			Innhold etter
+		</>
+	),
+};
+
+export const Gap: Story = {
+	render: () => (
+		<div className={styles.grid} data-items="150">
+			{gaps.map((gap) => (
+				<div key={gap} className={styles.card}>
+					data-gap="{gap}"
+					<hr data-gap={gap} />
+					data-gap="{gap}"
+				</div>
+			))}
+		</div>
+	),
+};

package/mtds/ai/errorsummary.mdx

@@ -0,0 +1,26 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { CssVariables } from '../../.storybook/blocks';
+import { Button } from '../react';
+import * as stories from './errorsummary.stories';
+
+<Meta of={stories} />
+
+# Error summary
+> ErrorSummary er en oppsummering av feil. Den gir brukeren oversikt over feil eller mangler som må rettes for å komme videre.
+
+## Kode
+- Bruk klassen `errorsummary` på `<ds-errorsummary>`
+- Hver lenke skal være et anker som peker til `id` til relevante skjemafelt
+- Legg `tabindex="-1"` på overskriften slik at den kan gå fokus
+- Hvis `errorsummary` er synlig ved pageload: legg `autofocus` på overskriften
+- Hvis `errorsummary` blir ved submit av skjema: flytt fokus til overskriften med `.focus()`
+- **Merk:** Alle skjemafelt med feil skal ha en tilhørende [Validation](?path=/docs/designsystem-validation--docs). Errorsummary sin jobb er å gi en enkel oversikt og lenking alle feil.
+- **Mønster:** [Se mønster for skjemafeilemeldinger](https://www.designsystemet.no/no/patterns/errors)
+
+<Canvas of={stories.Default} />
+
+## Komplett eksempel
+- **Merk:** React kan ikke vise og flytte fokus i samme operasjon på grunn av asynkron uttegning. Bruk `setTimeout(() => { din-fokus-her })` for å flytte fokus etter at feilmeldingen er synlig.
+<Canvas of={stories.WithForm} />
+
+<CssVariables component="errorsummary" />

package/mtds/ai/errorsummary.stories.tsx

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useEffect, useRef, useState } from "react";
+import { Errorsummary, Heading } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Error summary",
+	decorators: [
+		function Decorate(Story) {
+			useEffect(() => {
+				const handleClick = (event: Event) => {
+					const anchor = (event.target as Element)?.closest?.('a[href^="#"]');
+					const input = document.getElementById(
+						(anchor as HTMLAnchorElement)?.hash.slice(1),
+					);
+
+					if (input) {
+						event.preventDefault();
+						input.scrollIntoView({ behavior: "smooth" });
+						input.focus();
+					}
+				};
+
+				document.addEventListener("click", handleClick);
+				return () => document.removeEventListener("click", handleClick);
+			});
+
+			const klass = styles.errorsummary.split(" ")[0];
+
+			// Disable autofocus in storybook
+			return (
+				<>
+					<style>{`.${klass},.${klass}::after{animation:none}`}</style>
+					<Story />
+				</>
+			);
+		},
+	],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<ds-error-summary className={styles.errorsummary}>
+			<h2 tabIndex={-1}>For å gå videre må du rette opp følgende feil:</h2>
+			<ul>
+				<li>
+					<a href="#my-input-1">Fødselsdato kan ikke være etter år 2005</a>
+				</li>
+				<li>
+					<a href="#my-input-2">Telefonnummer kan kun inneholde siffer</a>
+				</li>
+				<li>
+					<a href="#my-input-3">E-post må være gyldig</a>
+				</li>
+			</ul>
+		</ds-error-summary>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<Errorsummary>
+			<Heading>For å gå videre må du rette opp følgende feil:</Heading>
+			<ul>
+				<li>
+					<a href="#my-input-1">Fødselsdato kan ikke være etter år 2005</a>
+				</li>
+				<li>
+					<a href="#my-input-2">Telefonnummer kan kun inneholde siffer</a>
+				</li>
+				<li>
+					<a href="#my-input-3">E-post må være gyldig</a>
+				</li>
+			</ul>
+		</Errorsummary>
+	),
+};
+
+export const WithForm: Story = {
+	render: function Render() {
+		const [showErrorSummary, setShowErrorSummary] = useState(false);
+		const [value, setValue] = useState("");
+
+		const errorTitle = useRef<HTMLDivElement>(null);
+		const handleSubmit = (event: React.FormEvent) => {
+			const isValid = value === "jeg tester";
+
+			event.preventDefault();
+			setShowErrorSummary(!isValid);
+
+			if (isValid) alert("Du fikk det til!");
+			else setTimeout(() => errorTitle.current?.focus()); // Move focus on next render
+		};
+
+		return (
+			<form className={styles.grid} data-gap="4" onSubmit={handleSubmit}>
+				<ds-error-summary
+					className={styles.errorsummary}
+					hidden={!showErrorSummary}
+				>
+					<h2 tabIndex={-1} ref={errorTitle}>
+						For å gå videre må du rette opp følgende feil:
+					</h2>
+					<ul>
+						<li>
+							<a href="#my-input">Du må skrive teksten "jeg tester"</a>
+						</li>
+					</ul>
+				</ds-error-summary>
+				<ds-field className={styles.field}>
+					<label>
+						Skriv teksten <code className={styles.tag}>jeg tester</code>:
+					</label>
+					<input
+						className={styles.input}
+						id="my-input"
+						onChange={({ target }) => setValue(target.value)}
+						value={value}
+					/>
+				</ds-field>
+				<div className={styles.flex} data-justify="end">
+					<button
+						type="submit"
+						className={styles.button}
+						data-variant="primary"
+						data-arrow
+					>
+						Send inn
+					</button>
+				</div>
+			</form>
+		);
+	},
+};

package/mtds/ai/field.mdx

@@ -0,0 +1,86 @@
+import { ArgTypes, Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { CssVariables, JumpTo } from '../../.storybook/blocks';
+import * as stories from './field.stories';
+import { Details } from '../react';
+
+<Meta of={stories} />
+
+# Field
+> Field er et hjelpemiddel for å automatisk koble et felt sammen med Label, Field. Description, ValidationMessage og Field.Counter. Field kan brukes sammen med Input, Textarea og Select. 
+
+<JumpTo />
+
+## Kode
+- Legg klassen `field` på `<ds-field>` rundt ledetekst og skjemafelt
+- Field beriker indre skjemaelementer med f.eks automatisk sammenkobling av `<label>` og `<input>`, beskrivelser (`<p data-field="validation">`) og valideringer `validation data-field="validation"`, samt `textarea` skalering, tegn teller, `suggestion` posisjonering etc.
+- **Flere inputs for én label?** Field skal kun inneholde ét skjemaelementet, men du kan knytte flere sammen (f.eks fornavn + etternavn osv.) med [Fieldset](/?path=/story/designsystem-fieldset--with-texts)
+- **Mønster:** [Se mønster for merking av obligatoriske felter](https://www.designsystemet.no/no/patterns/required-and-optional-fields)
+
+<Details>
+  <Details.Summary>Se egne parameter for React</Details.Summary>
+<div>
+I React kan du velge å bruke `<Field>` med `<label>`, `<Input>` osv. for full kontroll, eller med `as="input"`/`as="select"` og props for automatisk oppsett av elementer:
+<ArgTypes of={stories} />
+</div>
+</Details>
+
+<Canvas of={stories.Default} />
+
+## Obligatorisk felt
+- Legg `required` eller `aria-required` på skjemaelementet
+- Da får du automatisk teksten `Må fylles ut` i `<label>`
+- Teksten `Må fylles ut` oversettes automatisk til `Required` dersom du setter `<html lang="en">`. Du kan også selv endre tekst med CSS custom property: `--mtds-text-required: "Må fylles ut";`
+- **Merk:** Dersom du ønsker å skru denne [lovpålagte merkingen av obligatoriske felter](https://www.designsystemet.no/monstre/obligatoriske-og-valgfrie-felt), kan du legge `data-required="hidden"` på hvilket som helst element (f.eks. `<html data-required="hidden">` for å skru av for hele dokumentet)
+<Canvas of={stories.Required} />
+
+## Radio / Check / Switch
+- Ved bruk av `<input type="checkbox | radio"` vil `<label>`, `<p data-field="description">` og `class="styles.validation" data-field="validation"` legge seg etter input
+<Canvas of={stories.Toggles} />
+
+## Delvis valgt checkbox
+- Bruk `indeterminate` ([via javascript](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate)) på `<input type="checkbox">` for delvis valgt checkbox
+<Canvas of={stories.Indeterminate} />
+
+## Feilmelding
+- Legg klassen `validation` på et element for å tilknytte feilmelding
+<Canvas of={stories.WithValidation} />
+
+## Innebygget skjemavalidering
+- Nettleserens innebyggede valideringsmeldinger skjules pga. begrenset styling og universell utforming
+- Du kan allikevel få [nettleserens innebygge skjemavalidering](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation#using_built-in_form_validation) til å automatisk skjule og vise [validation-komponentet](?path=/docs/designsystem-validation--docs) ved å legge `data-validation="form"` på `form` 
+- **Merk:** `ds-suggestion` krever `input aria-required="true"` (ikke `input required`) siden suggestion ikke er et native skjemaelement
+<Canvas of={stories.WithValidationForm} />
+
+## Prefiks og suffiks
+- Legg klassen `affixes` på en `<div>` rundt `input`
+- Legg elementer før eller etter `input` for å legge til ikon eller tekst
+- **Merk:** for god tilgjengelighet, beskriv ønsket innhold i `<p data-field="description">` eller `<label>`, f.eks.: "Pris i NOK per måned"
+<Canvas of={stories.WithAffixes} />
+
+## Antall tegn
+- Legg klassen `validation` og attributt `data-field="counter"` på typisk en `<p>` etter `input`
+- Du kan endre teksten med `data-over="%d characters too many"` og `data-under="%d characters remaining"`
+<Canvas of={stories.WithCharacterCount} />
+
+## Med suggestion (Combobox)
+- Legg klassen `suggestion` på `<ds-suggestion>` rundt `<input>` og `<datalist>` med `<option>`s for å lage forslag
+- Legg en `<select hidden name="NAME-HERE">` i `<ds-suggestion>` for å få med verdien i skjemaet
+- Legg en `<del hidden aria-label=""></del>` etter input for å få en tøm-knapp
+- Bruk `data-nofilter` på `<u-datalist>` for å skru av filtrering
+- Trenger du egne hjelpetekster for skjemleser? Se attributter [for ds-suggestion](https://u-elements.github.io/u-elements/elements/u-combobox#attributes-and-props) og for [for u-datalist]https://u-elements.github.io/u-elements/elements/u-datalist#attributes-and-props)
+- **Merk:** Suggestion må alltid ha en tilknyttet `<label>`, men denne kan skjules med `hidden`
+- **React?** Bruk `<Field.Suggestion>`, `<Field.Datalist>` og `<Field.Option>` eller<br />`<Field as={Field.Suggestion}>` ([se eksempel](?path=/story/designsystem-field--react-with-suggestion))
+<Details>
+<Details.Summary>Hva er `ds-suggestion`?</Details.Summary>
+
+ds-suggestion bygger på [u-combobox](https://u-elements.github.io/u-elements/elements/u-combobox),
+som sikrer universell utforming. Dette lastes automatisk når du bruker `@mattilsynet/design`.
+Du kan også hente inn tilhørende HTMLElement interface ved behov:
+```
+import { DSSuggestionElement } from '@mattilsynet/design'
+```
+</Details>
+
+<Canvas of={stories.WithSuggestion} />
+
+<CssVariables component="field" />