@mattilsynet/design 3.2.8 → 3.3.0

package/mtds/ai/input.mdx

@@ -0,0 +1,223 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { JumpTo, Example, CssVariables } from '../../.storybook/blocks';
+import * as stories from './input.stories';
+import { Flex, Prose } from '../react';
+import styles from '../styles.module.css';
+
+<Meta of={stories} />
+
+# Input
+>Input er et skjemaelement for å samle inn brukerdata. Det tilbyr grunnleggende funksjonalitet og er ideell når du trenger full kontroll over komponentens oppsett og validering, noe som gjør det ideelt for bygging av spesialtilpassede elementer.
+
+<JumpTo />
+
+## Kode
+- Legg klassen `input` på `<input>`, `<select>` eller `<textarea>`
+- Input `type="radio"`, `type="checkbox"` og `role="switch"`  er også støttet
+- Bruk [field](?path=/docs/designsystem-field--docs) for automatisk kobling mot `<label>` eller `aria-label` på `input` for skjult label
+<Canvas of={stories.Default} />
+
+## Skikk og bruk
+### Tekstfelt
+<Flex data-items="350">
+  {/* Viser tekstfelt som ligger over hverandre */}
+  <Example data-color="success" data-variant="false" text="Plasser tekstfelt over hverandre, slik at det er lettere å navigere mellom komponentene og skanne innholdet." zoom="100%">
+    <div className={styles.prose} data-items="auto"> 
+        <ds-field className={styles.field}>
+            <label>Fornavn</label>
+            <input className={styles.input} />
+        </ds-field>
+
+        <ds-field className={styles.field}>
+            <label>Etternavn</label>
+            <input className={styles.input} />
+        </ds-field>
+
+        <ds-field className={styles.field}>
+            <label>E-post</label>
+            <input className={styles.input} />
+        </ds-field>
+
+        <ds-field className={styles.field}>
+            <label>Telefon</label>
+            <input className={styles.input} />
+        </ds-field>
+    </div> 
+
+  </Example>
+  <Example data-color="danger" data-variant="false" text="Unngå plassering av tekstfelt ved siden av hverandre. Skannbarheten blir dårligere." zoom="100%">
+        <div className={styles.grid} data-items="150" data-gap="6"> 
+            <ds-field className={styles.field}>
+                <label>Fornavn</label>
+                <input className={styles.input} type="number" />
+            </ds-field>
+
+            <ds-field className={styles.field}>
+                <label>Etternavn</label>
+                <input className={styles.input} type="text" inputMode="numeric" />
+            </ds-field>
+             <ds-field className={styles.field}>
+                <label>E-post</label>
+                <input className={styles.input} type="number" />
+            </ds-field>
+
+            <ds-field className={styles.field}>
+                <label>Telefon</label>
+                <input className={styles.input} type="text" inputMode="numeric" />
+            </ds-field>           
+        </div>
+  </Example>
+</Flex>
+
+### Switch
+<Flex data-items="350">
+  {/* Viser tekstfelt som ligger over hverandre */}
+  <Example data-color="success" data-variant="false" text="Bruk tydelig og beskrivende labeltekst. Status vises i selve komponenten." zoom="100%">
+    <ds-field className={styles.field}>
+        <label>Varsle via e-post</label>
+        <input type="checkbox" role="switch" className={styles.input} />
+    </ds-field>
+  </Example>
+  <Example data-color="danger" data-variant="false" text="Unngå beskrivelse av status i labelteksten, da dette kan forvirre brukeren." zoom="100%">
+    <ds-field className={styles.field}>
+        <label>Slå på e-postvarsling</label>
+        <input type="checkbox" role="switch" className={styles.input} />
+    </ds-field>
+  </Example>
+</Flex>
+
+### Radio
+<Flex data-items="350">
+    <Example data-color="success" data-variant="false" text="Det er anbefalt å bruke radio hvis du har færre enn 5-7 alternativer." zoom="100%">
+    <fieldset className={styles.fieldset}>
+        <legend>Skal du reise med hund?</legend>
+                <ds-field className={styles.field}>
+                    <input type="radio" className={styles.input} name="do-radio"/>
+                    <label>Ja</label>
+                </ds-field>
+                <ds-field className={styles.field}>
+                    <input type="radio" className={styles.input} name="do-radio"/>
+                    <label>Nei</label>
+                </ds-field>
+    </fieldset>
+  </Example>
+  <Example data-color="danger" data-variant="false" text="Bruk av radio med mange alternativer gjør det mer tungvindt for bruker å ta et raskt valg." zoom="100%">
+    <fieldset className={styles.fieldset}>
+        <legend>Hvilken hunderase skal du reise med?</legend>
+                <ds-field className={styles.field}>
+                    <input type="radio" className={styles.input} name="dont-radio"/>
+                    <label>Golden retriever</label>
+                </ds-field>
+                <ds-field className={styles.field}>
+                    <input type="radio" className={styles.input} name="dont-radio"/>
+                    <label>Fuglehund</label>
+                </ds-field>
+                <ds-field className={styles.field}>
+                    <input type="radio" className={styles.input} name="dont-radio"/>
+                    <label>Cocker spaniel</label>
+                </ds-field>
+                <ds-field className={styles.field}>
+                    <input type="radio" className={styles.input} name="dont-radio"/>
+                    <label>Terrier</label>
+                </ds-field>
+                <ds-field className={styles.field}>
+                    <input type="radio" className={styles.input} name="dont-radio"/>
+                    <label>Beagle</label>
+                </ds-field>
+                <ds-field className={styles.field}>
+                    <input type="radio" className={styles.input} name="dont-radio"/>
+                    <label>Chihuahua</label>
+                </ds-field>
+                <ds-field className={styles.field}>
+                    <input type="radio" className={styles.input} name="dont-radio"/>
+                    <label>Puddel</label>
+                </ds-field>
+                <ds-field className={styles.field}>
+                    <input type="radio" className={styles.input} name="dont-radio"/>
+                    <label>Setter</label>
+                </ds-field>
+                <ds-field className={styles.field}>
+                    <input type="radio" className={styles.input} name="dont-radio"/>
+                    <label>Spisshund</label>
+                </ds-field>
+    </fieldset>
+  </Example>
+</Flex>
+
+### Select
+<Flex data-items="350">
+    <Example data-color="success" data-variant="false" text="Bruk select når det er mange alternativer." zoom="100%">
+            <ds-field className={styles.field}>
+                <label>Hvor skal du reise med hund?</label>
+                <select className={styles.input}>
+                    <option>Albania</option>
+                    <option>Bahamas</option>
+                    <option>Canada</option>
+                    <option>Danmark</option>
+                    <option>Estland</option>
+                    <option>Finland</option>
+                    <option>Georgia</option>
+                    <option>Hellas</option>
+                    <option>India</option>
+                    <option>Japan</option>
+                    <option>Kroatia</option>
+                    <option>Latvia</option>
+                    <option>Maldivene</option>
+                </select>
+            </ds-field>
+  </Example>
+  <Example data-color="danger" data-variant="false" text="Ikke bruk select når det er få alternativer." zoom="100%">
+            <ds-field className={styles.field}>
+                <label>Har hunden noen kjente sykdommer?</label>
+                <select className={styles.input}>
+                    <option>Ja</option>
+                    <option>Nei</option>
+                </select>
+            </ds-field>
+  </Example>
+</Flex>
+
+## Typer
+- Bruk `<select>`, `<textarea>` eller `<input type="text | checkbox | radio | email | number | password | radio | search | tel | url">`
+- Kombiner `type="checkbox" role="switch"` for å få bryter-design
+<Canvas of={stories.Types} />
+
+## Størrelser
+- Bruk `data-size="sm | md | lg"`
+- Bruk `size="number"` for å sette en bredde som indikere antall tegn
+<Canvas of={stories.Sizes} />
+
+## Read only
+- Legg på attributt `readonly`
+- Husk også `disabled` dersom du legger `readonly` på `type="checkbox"` eller `type="radio"`, siden disse ikke stoppes automatisk av nettleseren
+- **Merk:** `readonly disabled` felter ikke sendes inn som skjemadata i verken `<form>` eller `FormData`
+<Canvas of={stories.ReadOnly} />
+
+## Disabled
+- Legg på attributt `disabled`
+<Canvas of={stories.Disabled} />
+
+## Indeterminate
+- Legg på attributt `data-indeterminate` på `type="checkbox"` for å indikere en tilstand som er verken av eller på, f.eks
+<Canvas of={stories.Indeterminate} />
+
+## Søk
+- Bruk `type="search"`
+- Bruk `data-icon="none"` dersom du ønsker å skjule forstørrelsesglass-ikonet
+<Canvas of={stories.TypeSearch} />
+
+## Datovelger
+- Bruk `type="date"`
+<Canvas of={stories.TypeDate} />
+
+## Tall
+- Øker taller inkrementelt (f.eks. et antall av noe)? Bruk `type="number"`
+- Skal tallet ikke øke (f.eks. referansenummer, fødselsnummer, etc.)? Bruk `type="text" inputmode="numeric"`
+- Nysgjerrig? [Les mer om input og tall på GOV.uk](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/)
+<Canvas of={stories.TypeNumber} />
+
+## Variant Inline (Eksperimentell)
+- Bruk `data-variant="inline"` på `input`, `select` eller `textarea` for subtil fremtoning
+<Canvas of={stories.VariantInline} />
+
+<CssVariables component="input" />

package/mtds/ai/input.stories.tsx

@@ -0,0 +1,352 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Field, Input } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Input",
+	decorators: [
+		(Story) => (
+			<div className={styles.grid}>
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<ds-field className={styles.field}>
+			<label>Ledetekst</label>
+			<input className={styles.input} />
+		</ds-field>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<Field>
+			<Field.Label>Ledetekst</Field.Label>
+			<Input />
+		</Field>
+	),
+};
+
+export const Types: Story = {
+	render: () => (
+		<>
+			<ds-field className={styles.field}>
+				<label>Text</label>
+				<input type="text" className={styles.input} />
+			</ds-field>
+
+			<ds-field className={styles.field}>
+				<label>Select</label>
+				<select className={styles.input}>
+					<option>Option 1</option>
+					<option>Option 2</option>
+					<option>Option 3</option>
+					<option>Option 4</option>
+					<option>Option 5</option>
+				</select>
+			</ds-field>
+
+			<ds-field className={styles.field}>
+				<label>Checkbox</label>
+				<input type="checkbox" className={styles.input} />
+			</ds-field>
+
+			<ds-field className={styles.field}>
+				<label>Radio 1</label>
+				<input
+					type="radio"
+					className={styles.input}
+					name="my-radio"
+					defaultChecked
+				/>
+			</ds-field>
+
+			<ds-field className={styles.field}>
+				<label>Radio 2</label>
+				<input type="radio" className={styles.input} name="my-radio" />
+			</ds-field>
+
+			<ds-field className={styles.field}>
+				<label>Switch</label>
+				<input type="checkbox" role="switch" className={styles.input} />
+			</ds-field>
+
+			<ds-field className={styles.field}>
+				<label>Textarea</label>
+				<textarea className={styles.input} />
+			</ds-field>
+		</>
+	),
+};
+
+export const Select: Story = {
+	parameters: {
+		showInOverview: true,
+	},
+	render: () => (
+		<ds-field className={styles.field}>
+			<label>Select</label>
+			<select className={styles.input}>
+				<option>Option 1</option>
+				<option>Option 2</option>
+				<option>Option 3</option>
+				<option>Option 4</option>
+				<option>Option 5</option>
+			</select>
+		</ds-field>
+	),
+};
+
+export const Textarea: Story = {
+	parameters: {
+		showInOverview: true,
+	},
+	render: () => (
+		<ds-field className={styles.field}>
+			<label>Textarea</label>
+			<textarea className={styles.input}></textarea>
+		</ds-field>
+	),
+};
+
+export const Checkbox: Story = {
+	render: () => (
+		<ds-field className={styles.field}>
+			<label>Checkbox</label>
+			<input type="checkbox" className={styles.input} />
+		</ds-field>
+	),
+};
+
+export const Radio: Story = {
+	render: () => (
+		<ds-field className={styles.field}>
+			<label>Radio</label>
+			<input type="radio" className={styles.input} />
+		</ds-field>
+	),
+};
+
+export const Switch: Story = {
+	parameters: {
+		showInOverview: true,
+	},
+	render: () => (
+		<ds-field className={styles.field}>
+			<label>Switch</label>
+			<input type="checkbox" role="switch" className={styles.input} />
+		</ds-field>
+	),
+};
+
+export const Sizes: Story = {
+	render: () => (
+		<>
+			<input
+				aria-label="small"
+				className={styles.input}
+				data-size="sm"
+				defaultValue="Small"
+			/>
+			<input
+				aria-label="medium"
+				className={styles.input}
+				data-size="md"
+				defaultValue="Medium"
+			/>
+			<input
+				aria-label="large"
+				className={styles.input}
+				data-size="lg"
+				defaultValue="Large"
+			/>
+			<input
+				aria-label="size=20"
+				className={styles.input}
+				size={20}
+				defaultValue="size=20"
+			/>
+		</>
+	),
+};
+
+export const ReadOnly: Story = {
+	render: () => (
+		<>
+			<ds-field className={styles.field}>
+				<label>Read only text</label>
+				<input className={styles.input} readOnly value="Value" />
+			</ds-field>
+			<ds-field className={styles.field}>
+				<label>Read only checkbox</label>
+				<input type="checkbox" className={styles.input} readOnly disabled />
+			</ds-field>
+			<ds-field className={styles.field}>
+				<label>Read only radio</label>
+				<input type="radio" className={styles.input} readOnly disabled />
+			</ds-field>
+			<ds-field className={styles.field}>
+				<label>Read only switch</label>
+				<input
+					type="checkbox"
+					role="switch"
+					className={styles.input}
+					readOnly
+					disabled
+				/>
+			</ds-field>
+		</>
+	),
+};
+
+export const Disabled: Story = {
+	render: () => (
+		<>
+			<ds-field className={styles.field}>
+				<label>Disabled text</label>
+				<input className={styles.input} disabled />
+			</ds-field>
+			<ds-field className={styles.field}>
+				<label>Disabled checkbox</label>
+				<input type="checkbox" className={styles.input} disabled />
+			</ds-field>
+			<ds-field className={styles.field}>
+				<label>Disabled radio</label>
+				<input type="radio" className={styles.input} disabled />
+			</ds-field>
+			<ds-field className={styles.field}>
+				<label>Disabled switch</label>
+				<input
+					type="checkbox"
+					role="switch"
+					className={styles.input}
+					disabled
+				/>
+			</ds-field>
+		</>
+	),
+};
+
+export const Indeterminate: Story = {
+	render: () => (
+		<>
+			<ds-field className={styles.field}>
+				<label>Disabled text</label>
+				<input className={styles.input} type="checkbox" data-indeterminate />
+			</ds-field>
+		</>
+	),
+};
+
+export const TypeSearch: Story = {
+	parameters: {
+		showInOverview: true,
+	},
+	render: () => (
+		<>
+			<ds-field className={styles.field}>
+				<label>Søkefelt</label>
+				<input
+					className={styles.input}
+					type="search"
+					placeholder="Skriv for å søke"
+				/>
+			</ds-field>
+			<ds-field className={styles.field}>
+				<label>Søkefelt data-icon="none"</label>
+				<input className={styles.input} type="search" data-icon="none" />
+			</ds-field>
+		</>
+	),
+};
+
+export const TypeDate: Story = {
+	parameters: {
+		showInOverview: true,
+	},
+	render: () => (
+		<ds-field className={styles.field}>
+			<label>Datovelger</label>
+			<input className={styles.input} type="date" />
+		</ds-field>
+	),
+};
+
+export const TypeNumber: Story = {
+	render: () => (
+		<div className={styles.grid} data-items="auto">
+			<ds-field className={styles.field}>
+				<label>Antall dyr</label>
+				<input className={styles.input} type="number" />
+			</ds-field>
+			<ds-field className={styles.field}>
+				<label>Referansenummer</label>
+				<input className={styles.input} type="text" inputMode="numeric" />
+			</ds-field>
+		</div>
+	),
+};
+
+export const VariantInline: Story = {
+	name: "Variant Inline (Eksperimentell)",
+	render: () => (
+		<>
+			<ds-field className={styles.field}>
+				<label>Text</label>
+				<input
+					type="text"
+					defaultValue="Content"
+					className={styles.input}
+					data-variant="inline"
+				/>
+			</ds-field>
+
+			<ds-field className={styles.field}>
+				<label>Select</label>
+				<select
+					className={styles.input}
+					data-variant="inline"
+					defaultValue="Option 1"
+				>
+					<option>Option 1</option>
+					<option>Option 2</option>
+					<option>Option 3</option>
+					<option>Option 4</option>
+					<option>Option 5</option>
+				</select>
+			</ds-field>
+
+			<ds-field className={styles.field}>
+				<label>Textarea</label>
+				<textarea
+					className={styles.input}
+					data-variant="inline"
+					defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum euismod dui lacus, eget lacinia metus ullamcorper a. Nam id erat eu odio dignissim ornare ac eu erat. Maecenas bibendum cursus risus, sed tincidunt ipsum auctor id. Aliquam erat volutpat. Pellentesque mi sapien, ornare a iaculis ac, blandit in lectus. "
+				/>
+			</ds-field>
+		</>
+	),
+};
+
+// <Field
+// 	as="input"
+// 	label="Dato"
+// 	onFocus={() =>
+// 		document
+// 			.querySelector<HTMLInputElement>('input[type="date"]')
+// 			?.showPicker()
+// 	}
+// />
+// <Input
+// 	type="date"
+// 	aria-hidden="true"
+// 	tabIndex={-1}
+// 	style={{ marginTop: -60, opacity: 0, pointerEvents: "none" }}
+// />

package/mtds/ai/law.mdx

@@ -0,0 +1,115 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { HeartIcon } from '@phosphor-icons/react';
+import * as stories from './law.stories';
+import { Alert, Table, Prose, Popover } from '../react';
+
+
+<Meta of={stories} />
+
+# Law (Eksperimentell)
+> Law gir visning og valg av lover og forskrifter fra Lovdata.
+
+<Alert data-color="warning">
+  På grunn av pågådende kartlegging av bruk og behov, er Law foreløpig først og fremst et sett med hjelpefunksjoner og CSS.
+  Vi setter stor pris på [tilbakemeldinger](https://mattilsynet-hq.slack.com/archives/C03FAJ7N1EU) <HeartIcon style={{ verticalAlign: -3 }} />
+</Alert>
+
+## Kode
+
+- Legg klassen `law` på en `<div>` og fyll med HTML generert av `fixLawHtml()`
+- Bruk `data-variant="view"` eller `data-variant="readonly"` dersom du ikke ønsker valg-knapper
+- Du må selv hente [HTML via Lovdatas API](https://api.lovdata.no/), mens valg og parsing løses av hjelpefunksjonene `fixLawHtml`, `parseLawIds`, `setLawChecked`, `getLawChecked` og `toggleLawChecked` (støtter strukturer fra både Lovdatas betalte og gratis API). <button data-popover="inline" popoverTarget='pop-filenameHTML'>Vær obs på feil i feltet filenameHTML</button>
+<Popover id='pop-filenameHTML' style={{ maxWidth: 700 }}><Prose>
+Lovdatas felt `filenameHTML` slutter noen ganger på `.html`, og noen ganger ikke. Sørg for at kall til `https://api.lovdata.no/v1/structuredRules/get/` alltid slutter på `.html`. Eksempel:
+```js
+const fix = `${filenameHTML.replace('.html', '')}.html`;
+const url = `https://api.lovdata.no/v1/structuredRules/get/${fix}`;
+```
+<style>{`[popover] .docblock-source { margin: 0 }`}</style>
+</Prose></Popover>
+
+
+<Table data-fixed>
+<thead>
+  <tr>
+    <th style={{ width: 450 }}>Funksjon</th>
+    <th>Beskrivelse</th>
+  </tr>
+</thead>
+<tbody>
+  <tr>
+    <td>
+      ```ts
+      fixLawHtml(html: string)
+      // Returns:
+      string
+      ```
+    </td>
+    <td>
+      - Parser, renser og legger på valg-knapper i HTML fra Lovdata
+      - **Kan kjøre på:** Server og nettleser
+      - **React?** Bruk `useMemo`
+    </td>
+  </tr>
+  <tr>
+    <td>
+      ```ts
+      parseLawIds(ids: string[], html: string)
+      // Returns:
+      {
+        id: string;        // Element ID
+        className: string; // From Lovdata
+        html: string;      // Outer HTML
+        label: string;     // Juridisk henvisning
+        path: [];          // Parent elements
+        url: string;       // Closest lovdata url
+        guideUrl: string;  // URL for mattilsynet.no-veiledning
+      }
+      ```
+    </td>
+    <td>
+      - Parser en liste med IDer til et strukturert objekt, som blant annet inneholder juridisk henvisningstekst til bruk i vedtaksbrev osv.
+      - **Kan kjøre på:** Server og nettleser
+    </td>
+  </tr>
+  <tr>
+    <td>
+      ```ts
+      setLawChecked(ids: string[], element: HTMLElement)
+      // Returns:
+      void
+      ```
+    </td>
+    <td>
+      - Markerer valgte deler av regelverk i et `Law` element.
+      - **Kan kjøre på:** Kun nettleser
+    </td>
+  </tr>
+  <tr>
+    <td>
+      ```ts
+      getLawChecked(element: HTMLElement)
+      // Returns:
+      string[]
+      ```
+    </td>
+    <td>
+      - Hente valgte IDer.
+      - **Kan kjøre på:** Kun nettleser
+    </td>
+  </tr>
+  <tr>
+    <td>
+      ```ts
+      toggleLawChecked(ids: string[], element: HTMLElement)
+      // Returns:
+      string[]
+      ```
+    </td>
+    <td>
+      - Hente valgte IDer.
+      - **Kan kjøre på:** Kun nettleser
+    </td>
+  </tr>
+</tbody>
+</Table>