@mattilsynet/design 3.2.9 → 3.3.1

package/mtds/ai/fieldset.mdx

@@ -0,0 +1,126 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Example, CssVariables } from '../../.storybook/blocks';
+import * as stories from './fieldset.stories';
+import { Flex, Grid } from '../react';
+import styles from '../styles.module.css';
+
+<Meta of={stories} />
+
+# Fieldset
+>Fieldset brukes til å gruppere og navngi felt som naturlig hører sammen, for eksempel datofelt eller adressefelt. Komponenten hjelper med å organisere informasjon, gjøre skjemaer mer oversiktlige og forbedre tilgjengeligheten for skjermlesere.
+
+## Kode
+- Legg klassen `fieldset` på `<fieldset>` rundt `<legend>` og skjemafelter
+- Dette grupperer typisk `checkbox` eller `radio` inputs
+<Canvas of={stories.Radios} />
+
+## Skikk og bruk
+<Flex data-items="350">
+   {/* Vertikal vs horisontal alignment: */}
+  <Example data-color="success" text="Radiobutton- og checkboxgrupper skal i hovedsak stables vertikalt slik at alternativene er lette å lese." zoom="100%">
+  <div className={styles.grid}>
+    <label>Velg dyregruppe</label>
+    <ds-field className={styles.field}>
+        <label>Fisk</label>
+        <input type="radio" className={styles.input} name="my-radio" defaultChecked />
+    </ds-field>
+    <ds-field className={styles.field}>
+      <label>Fjørfe</label>
+      <input type="radio" className={styles.input} name="my-radio" />
+    </ds-field>
+    <ds-field className={styles.field}>
+      <label>Storfe</label>
+      <input type="radio" className={styles.input} name="my-radio" />
+    </ds-field>
+  </div>
+  </Example>
+  <Example data-color="danger" text="Radiobutton- og checkboxgrupper bør ikke legges etter hverandre. Da er det vanskeligere skanne innholdet" zoom="100%">
+    <div className={styles.grid}>
+      <label>Velg dyregruppe</label>
+      <Flex data-gap="10">
+        <ds-field className={styles.field}>
+          <label>Fisk</label>
+          <input type="radio" className={styles.input} name="my-radio" defaultChecked />
+        </ds-field>
+        <ds-field className={styles.field}>
+          <label>Fjørfe</label>
+          <input type="radio" className={styles.input} name="my-radio" />
+        </ds-field>
+        <ds-field className={styles.field}>
+          <label>Storfe</label>
+          <input type="radio" className={styles.input} name="my-radio" />
+        </ds-field>
+      </Flex>
+     </div>
+  </Example>
+
+  {/* Label + Input: */}
+  <Example data-color="success" text="Input, radiobutton- og checkboxgrupper skal alltid ha en tydelig label." zoom="100%">
+    <div className={styles.grid}>
+      <label>Velg størrelse</label>
+      <ds-field className={styles.field}>
+        <label>Liten</label>
+        <input type="radio" className={styles.input} name="my-radio" defaultChecked />
+      </ds-field>
+      <ds-field className={styles.field}>
+        <label>Medium</label>
+        <input type="radio" className={styles.input} name="my-radio" />
+      </ds-field>
+      <ds-field className={styles.field}>
+        <label>Stor</label>
+        <input type="radio" className={styles.input} name="my-radio" />
+      </ds-field>
+    </div>
+  </Example>
+
+  <Example data-color="danger" text="Uten en label kan alternativene være vanskelige eller umulige å forstå." zoom="100%">
+    <Grid>
+      <ds-field className={styles.field}>
+        <label>Liten</label>
+        <input type="radio" className={styles.input} name="my-radio" defaultChecked />
+      </ds-field>
+      <ds-field className={styles.field}>
+        <label>Medium</label>
+        <input type="radio" className={styles.input} name="my-radio" />
+      </ds-field>
+      <ds-field className={styles.field}>
+        <label>Stor</label>
+        <input type="radio" className={styles.input} name="my-radio" />
+      </ds-field>
+     </Grid>
+  </Example>
+</Flex>
+
+## Obligatoriske felter
+- Dersom alle skjemafelter er påkrevd, vises dette automatisk i `<legend>`
+- 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.Radios} />
+
+## 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å `fieldset` 
+- **Merk:** Legg du vil vise valideringsmelding ved hvert input-element, må `data-validation="form"` legges på hvert enkelt `field`
+<Canvas of={stories.WithValidationForm} />
+
+## Checkboxes
+<Canvas of={stories.Checkboxes} />
+
+## Disabled
+- Legg attributten `disabled` rett på `fieldset`
+<Canvas of={stories.Disabled} />
+
+## Read only
+- Legg attributten `readonly disabled` på hver `input`
+<Canvas of={stories.ReadOnly} />
+
+{/* ## Horisontal NOT RECOMMENDED
+- Legg attributten `field` inni en `flex` med `data-gap="9"`
+- Brukes kun ved få svaralternativer
+<Canvas of={stories.Horizontal} /> */}
+
+## Feilmelding
+- Legg klassen `validation` på et direkte barn for å knytte feilmelding til alle inputs
+<Canvas of={stories.WithValidation} />
+
+<CssVariables component="fieldset" />

package/mtds/ai/fieldset.stories.tsx

@@ -0,0 +1,298 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Field, Fieldset } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Fieldset",
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const React: Story = {
+	render: () => (
+		<Fieldset>
+			<Fieldset.Legend>Hva foretrekker du?</Fieldset.Legend>
+			<Fieldset.Description>Fellesbeskrivelse</Fieldset.Description>
+			<Field
+				as="input"
+				defaultChecked
+				description="Beskrivelse"
+				label="Alternativ 1"
+				name="my-react-radio"
+				required
+				type="radio"
+			/>
+			<Field
+				as="input"
+				label="Alternativ 2"
+				name="my-react-radio"
+				required
+				type="radio"
+			/>
+		</Fieldset>
+	),
+};
+
+export const Radios: Story = {
+	parameters: {
+		showInOverview: true,
+	},
+	render: () => (
+		<fieldset className={styles.fieldset}>
+			<legend>Hva foretrekker du?</legend>
+			<p data-field="description">Fellesbeskrivelse</p>
+			<ds-field className={styles.field}>
+				<input
+					type="radio"
+					className={styles.input}
+					name="my-radio"
+					required
+					defaultChecked
+				/>
+				<label>Alternativ 1</label>
+				<p data-field="description">Beskrivelse</p>
+			</ds-field>
+			<ds-field className={styles.field}>
+				<input type="radio" className={styles.input} name="my-radio" required />
+				<label>Alternativ 2</label>
+				<p data-field="description">Beskrivelse</p>
+			</ds-field>
+		</fieldset>
+	),
+};
+
+export const Checkboxes: Story = {
+	parameters: {
+		showInOverview: true,
+	},
+	render: () => (
+		<fieldset className={styles.fieldset}>
+			<legend>Hvilke foretrekker du?</legend>
+			<p data-field="description">Fellesbeskrivelse</p>
+			<ds-field className={styles.field}>
+				<input
+					type="checkbox"
+					className={styles.input}
+					name="my-check"
+					defaultChecked
+				/>
+				<label>Alternativ 1</label>
+			</ds-field>
+			<ds-field className={styles.field}>
+				<input type="checkbox" className={styles.input} name="my-check" />
+				<label>Alternativ 2</label>
+			</ds-field>
+		</fieldset>
+	),
+};
+
+export const Disabled: Story = {
+	render: () => (
+		<fieldset className={styles.fieldset} disabled>
+			<legend>Hvilke foretrekker du?</legend>
+			<p data-field="description">Fellesbeskrivelse</p>
+			<ds-field className={styles.field}>
+				<input
+					type="checkbox"
+					className={styles.input}
+					name="my-check"
+					defaultChecked
+				/>
+				<label>Alternativ 1</label>
+			</ds-field>
+			<ds-field className={styles.field}>
+				<input type="checkbox" className={styles.input} name="my-check" />
+				<label>Alternativ 2</label>
+			</ds-field>
+		</fieldset>
+	),
+};
+
+export const ReadOnly: Story = {
+	render: () => (
+		<fieldset className={styles.fieldset}>
+			<legend>Hvilke foretrekker du?</legend>
+			<p data-field="description">Fellesbeskrivelse</p>
+			<ds-field className={styles.field}>
+				<input
+					type="checkbox"
+					className={styles.input}
+					name="my-check"
+					defaultChecked
+					readOnly
+					disabled
+				/>
+				<label>Alternativ 1</label>
+			</ds-field>
+			<ds-field className={styles.field}>
+				<input
+					type="checkbox"
+					className={styles.input}
+					name="my-check"
+					readOnly
+					disabled
+				/>
+				<label>Alternativ 2</label>
+			</ds-field>
+		</fieldset>
+	),
+};
+
+export const Horizontal: Story = {
+	render: () => (
+		<fieldset className={styles.fieldset}>
+			<legend>Hvilke foretrekker du?</legend>
+			<p data-field="description">Fellesbeskrivelse</p>
+			<div className={styles.flex} data-gap="9">
+				<ds-field className={styles.field}>
+					<input
+						type="checkbox"
+						className={styles.input}
+						name="my-check"
+						defaultChecked
+					/>
+					<label>Alternativ 1</label>
+				</ds-field>
+				<ds-field className={styles.field}>
+					<input type="checkbox" className={styles.input} name="my-check" />
+					<label>Alternativ 2</label>
+				</ds-field>
+			</div>
+		</fieldset>
+	),
+};
+
+export const WithValidation: Story = {
+	parameters: {
+		showInOverview: true,
+	},
+	render: () => (
+		<fieldset className={styles.fieldset}>
+			<legend>Hvilke foretrekker du?</legend>
+			<p data-field="description">Fellesbeskrivelse</p>
+			<ds-field className={styles.field}>
+				<input
+					type="checkbox"
+					className={styles.input}
+					name="my-check"
+					defaultChecked
+				/>
+				<label>Alternativ 1</label>
+				<p data-field="description">Beskrivelse</p>
+			</ds-field>
+			<ds-field className={styles.field}>
+				<input type="checkbox" className={styles.input} name="my-check" />
+				<label>Alternativ 2</label>
+			</ds-field>
+			<div className={styles.validation} data-field="validation">
+				Feilmelding
+			</div>
+		</fieldset>
+	),
+};
+
+export const WithValidationForm: Story = {
+	parameters: {
+		showInOverview: true,
+	},
+	render: () => (
+		<form action="#" className={styles.prose} data-validation="form">
+			<fieldset className={styles.fieldset}>
+				<legend>Hvilke foretrekker du?</legend>
+				<ds-field className={styles.field}>
+					<input
+						type="checkbox"
+						className={styles.input}
+						name="my-check-validation"
+						required
+					/>
+					<label>Checkbox 1</label>
+					<div className={styles.validation} data-field="validation" hidden>
+						Feilmelding 1
+					</div>
+				</ds-field>
+				<ds-field className={styles.field}>
+					<input
+						type="checkbox"
+						className={styles.input}
+						name="my-check-validation"
+						required
+					/>
+					<label>Checkbox 2</label>
+					<div className={styles.validation} data-field="validation" hidden>
+						Feilmelding 2
+					</div>
+				</ds-field>
+				<div className={styles.validation} data-field="validation" hidden>
+					Feilmelding
+				</div>
+			</fieldset>
+			<fieldset className={styles.fieldset}>
+				<legend>Hvilke foretrekker du?</legend>
+				<ds-field className={styles.field}>
+					<input
+						type="radio"
+						className={styles.input}
+						name="my-radio-validation"
+						required
+					/>
+					<label>Radio 1</label>
+					<div className={styles.validation} data-field="validation" hidden>
+						Feilmelding 1
+					</div>
+				</ds-field>
+				<ds-field className={styles.field}>
+					<input
+						type="radio"
+						className={styles.input}
+						name="my-radio-validation"
+						required
+					/>
+					<label>Radio 2</label>
+					<div className={styles.validation} data-field="validation" hidden>
+						Feilmelding 2
+					</div>
+				</ds-field>
+				<div className={styles.validation} data-field="validation" hidden>
+					Feilmelding
+				</div>
+			</fieldset>
+
+			<button type="submit" className={styles.button} data-variant="primary">
+				Send inn
+			</button>
+		</form>
+	),
+};
+
+export const WithTexts: Story = {
+	parameters: {
+		showInOverview: true,
+	},
+	render: () => (
+		<fieldset className={styles.fieldset}>
+			<legend>Hva heter du?</legend>
+			<div className={styles.grid} data-items="200" data-fixed>
+				<ds-field className={styles.field}>
+					<input
+						aria-label="Fornavn"
+						placeholder="Fornavn"
+						className={styles.input}
+						name="fornavn"
+						type="text"
+					/>
+				</ds-field>
+				<ds-field className={styles.field}>
+					<input
+						aria-label="Etternavn"
+						placeholder="Etternavn"
+						className={styles.input}
+						name="etternavn"
+						type="text"
+					/>
+				</ds-field>
+			</div>
+		</fieldset>
+	),
+};

package/mtds/ai/fileupload.mdx

@@ -0,0 +1,16 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Example, CssVariables } from '../../.storybook/blocks';
+import * as stories from './fileupload.stories';
+import { Flex, Grid } from '../react';
+import styles from '../styles.module.css';
+
+<Meta of={stories} />
+
+# Fileupload (Eksperimentell)
+
+## Kode
+- Legg klassen `fileupload` på `<label>` rundt `<input type="file">`
+- Du kan selv knytte til funkjonalitet med JavaScript
+<Canvas of={stories.Default} />
+
+<CssVariables component="fileupload" />

package/mtds/ai/fileupload.stories.tsx

@@ -0,0 +1,126 @@
+import { UploadIcon, XIcon } from "@phosphor-icons/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { Button, Card, Fileupload, Flex, Grid } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Fileupload",
+	parameters: {
+		layout: "padded",
+	},
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<label className={styles.fileupload}>
+			<UploadIcon />
+			<strong>Last opp filer</strong>
+			Dra over eller <u>last opp fil</u>
+			<small>
+				Støttede formater: PDF, JPEG, SVG
+				<br />
+				Filstørrelse under 10 MB
+			</small>
+			<input type="file" accept="image/*,.pdf" title="Last opp filer" />
+		</label>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<Fileupload>
+			<UploadIcon />
+			<strong>Last opp filer</strong>
+			Dra over eller <u>last opp fil</u>
+			<small>
+				Støttede formater: PDF, JPEG, SVG
+				<br />
+				Filstørrelse under 10 MB
+			</small>
+			<input type="file" accept="image/*,.pdf" title="Last opp filer" />
+		</Fileupload>
+	),
+};
+
+export const Invalid: Story = {
+	render: () => (
+		<Fileupload aria-invalid="true">
+			<UploadIcon />
+			<strong>Last opp filer</strong>
+			Dra over eller <u>last opp fil</u>
+			<small>
+				Støttede formater: PDF, JPEG, SVG
+				<br />
+				Filstørrelse under 10 MB
+			</small>
+			<input type="file" accept="image/*,.pdf" title="Last opp filer" />
+		</Fileupload>
+	),
+};
+
+export const WithPreviewImage: Story = {
+	render: function Render() {
+		const [images, setImages] = useState<{ title: string; src: string }[]>([]);
+		const handleFile = (event: React.ChangeEvent<HTMLInputElement>) => {
+			const file = event.target.files?.[0];
+			const reader = new FileReader();
+			reader.onload = () =>
+				setImages((prev) => [
+					...prev,
+					{
+						title: file?.name || "",
+						src: reader.result as string,
+					},
+				]);
+			if (file) reader.readAsDataURL(file);
+			event.target.value = ""; // Reset file input value to allow re-uploading the same file
+		};
+
+		const handleRemove = (index: number) =>
+			setImages((prev) => prev.filter((_, i) => i !== index));
+
+		return (
+			<Grid>
+				Velg et bilde for å se:
+				<Fileupload>
+					<UploadIcon />
+					<strong>Last opp filer</strong>
+					Dra over eller <u>last opp fil</u>
+					<small>
+						Støttede formater: PDF, JPEG, SVG
+						<br />
+						Filstørrelse under 10 MB
+					</small>
+					<input
+						type="file"
+						accept="image/jpeg, image/png, image/gif"
+						title="Last opp filer"
+						onChange={handleFile}
+					/>
+				</Fileupload>
+				<Grid data-items="300" data-fixed>
+					{images.map((file, index) => (
+						<Card as={Grid} key={index.toString()}>
+							<img alt="" width="100%" src={file.src} />
+							<Flex data-align="center" data-nowrap>
+								<strong>{file.title}</strong>
+								<Button
+									data-self="auto"
+									data-fixed
+									data-size="sm"
+									onClick={() => handleRemove(index)}
+								>
+									<XIcon />
+								</Button>
+							</Flex>
+						</Card>
+					))}
+				</Grid>
+			</Grid>
+		);
+	},
+};

package/mtds/ai/helptext.mdx

@@ -0,0 +1,24 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { CssVariables } from '../../.storybook/blocks';
+import * as stories from './helptext.stories';
+
+<Meta of={stories} />
+
+# Help text
+>HelpText gir brukere en forklaring på ukjente begreper eller konsepter, hvis de trenger det.
+
+## Kode
+- **Merk:** Prøv å [unngå å bruke HelpText](https://www.designsystemet.no/no/blog/helptext-is-being-removed-what-should-you-do) - vurder heller [popover inline](?path=/story/designsystem-popover--with-text-inline)
+- Bruk klassen `helptext` på `<button>` og `popovertarget="MIN-ID"`
+- Legg klassen `popover`, attributten `popover` og `id` på `<div>` direkte etter `<button>`
+<Canvas of={stories.Default} />
+
+## I field
+- Legg `helptext` like etter `label` i `field`
+<Canvas of={stories.InField} />
+
+## I fieldset
+- Legg `helptext` like etter `legend` i `field`
+<Canvas of={stories.InFieldset} />
+
+<CssVariables component="helptext" />

package/mtds/ai/helptext.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Field, Grid, HelpText, Input } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Help text",
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<>
+			<button
+				type="button"
+				className={styles.helptext}
+				popoverTarget="my-helptext"
+				aria-label="Hva menes med mottaker"
+			></button>
+			<div className={styles.popover} id="my-helptext" popover="auto">
+				Tekst som forklarer hva som menes med mottaker
+			</div>
+		</>
+	),
+};
+
+export const InField: Story = {
+	render: () => (
+		<div className={styles.grid}>
+			<ds-field className={styles.field}>
+				<label>Ledetekst</label>
+				<button
+					type="button"
+					className={styles.helptext}
+					aria-label="Hva menes med mottaker"
+					popoverTarget="my-helptext-field"
+				></button>
+				<div className={styles.popover} id="my-helptext-field" popover="auto">
+					Tekst som forklarer hva som menes med mottaker
+				</div>
+				<p data-field="desciption">Beskrivelse</p>
+				<input type="text" className={styles.input} />
+			</ds-field>
+			<ds-field className={styles.field}>
+				<label>Ledetekst</label>
+				<button
+					type="button"
+					className={styles.helptext}
+					aria-label="Hva menes med mottaker"
+					popoverTarget="my-helptext-field"
+				></button>
+				<div className={styles.popover} id="my-helptext-field" popover="auto">
+					Tekst som forklarer hva som menes med mottaker
+				</div>
+				<p data-field="desciption">Beskrivelse</p>
+				<input type="text" className={styles.input} readOnly disabled />
+			</ds-field>
+		</div>
+	),
+};
+
+export const InFieldset: Story = {
+	render: () => (
+		<fieldset className={styles.fieldset}>
+			<legend>Legendtekst</legend>
+			<button
+				type="button"
+				className={styles.helptext}
+				aria-label="Hva menes med mottaker"
+				popoverTarget="my-helptext-fieldset"
+			></button>
+			<div className={styles.popover} id="my-helptext-fieldset" popover="auto">
+				Tekst som forklarer hva som menes med mottaker
+			</div>
+			<ds-field className={styles.field}>
+				<label>Labeltekst</label>
+				<input type="checkbox" className={styles.input} />
+			</ds-field>
+		</fieldset>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<Grid data-gap="10">
+			<HelpText aria-label="Hva menes med mottaker">
+				Tekst som forklarer hva som menes med mottaker
+			</HelpText>
+			<Field>
+				<Field.Label>Ledetekst</Field.Label>
+				<HelpText aria-label="Hva menes med mottaker">
+					Tekst som forklarer hva som menes med mottaker
+				</HelpText>
+				<Field.Description>Beskrivelse</Field.Description>
+				<Input />
+			</Field>
+			<Field
+				as="input"
+				label="Ledetekst"
+				helpText="Tekst som forklarer hva som menes med mottaker"
+				helpTextLabel="Hva menes med mottaker"
+			/>
+		</Grid>
+	),
+};