@mattilsynet/design 3.2.9 → 3.3.0

package/mtds/ai/toast.stories.tsx

@@ -0,0 +1,215 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button, Flex, toast } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Toast",
+	parameters: {
+		layout: "padded",
+	},
+	decorators: [
+		(Story) => (
+			<div style={{ minHeight: 200 }}>
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+let count = 1;
+export const Default: Story = {
+	render: () => (
+		<button
+			onClick={() => toast(`Toast #${++count}`)}
+			type="button"
+			className={styles.button}
+			data-variant="secondary"
+		>
+			Vis en toast
+		</button>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<Button
+			onClick={() => toast(<span>Toast #{++count}</span>)}
+			data-variant="secondary"
+		>
+			Vis en toast
+		</Button>
+	),
+};
+
+export const Colors: Story = {
+	render: () => (
+		<Flex>
+			<button
+				onClick={() => toast("Toast default")}
+				type="button"
+				className={styles.button}
+				data-variant="secondary"
+			>
+				Vis default
+			</button>
+			<button
+				onClick={() => toast.info("Toast info")}
+				type="button"
+				className={styles.button}
+				data-variant="secondary"
+				data-color="info"
+			>
+				Vis info
+			</button>
+			<button
+				onClick={() => toast.success("Toast success")}
+				type="button"
+				className={styles.button}
+				data-variant="secondary"
+				data-color="success"
+			>
+				Vis success
+			</button>
+			<button
+				onClick={() => toast.warning("Toast warning")}
+				type="button"
+				className={styles.button}
+				data-variant="secondary"
+				data-color="warning"
+			>
+				Vis warning
+			</button>
+			<button
+				onClick={() => toast.danger("Toast danger")}
+				type="button"
+				className={styles.button}
+				data-variant="secondary"
+				data-color="danger"
+			>
+				Vis danger
+			</button>
+			<button
+				onClick={() => toast.neutral("Toast neutral")}
+				type="button"
+				className={styles.button}
+				data-variant="secondary"
+				data-color="neutral"
+			>
+				Vis neutral
+			</button>
+		</Flex>
+	),
+};
+
+const someApiCall = () => new Promise((resolve) => setTimeout(resolve, 2000));
+export const WithUpdates: Story = {
+	render: () => (
+		<button
+			onClick={() => {
+				const id = toast.info(<span>Toast loading</span>, { busy: true });
+				someApiCall()
+					.then(() => toast.success("Ferdig!", { id, busy: false }))
+					.catch(() => toast.danger("Feil!", { id, busy: false }));
+			}}
+			type="button"
+			className={styles.button}
+			data-variant="secondary"
+		>
+			Vis laster
+		</button>
+	),
+};
+
+export const WithPromise: Story = {
+	render: () => (
+		<button
+			onClick={() =>
+				toast.promise(someApiCall, {
+					loading: <span>Toast loading</span>,
+					success: "Handlingen ble fullført",
+					error: "Noe gikk galt under utføring",
+				})
+			}
+			type="button"
+			className={styles.button}
+			data-variant="secondary"
+		>
+			Vis promise
+		</button>
+	),
+};
+
+export const WithNoTimeout: Story = {
+	render: () => (
+		<button
+			onClick={() => toast("Blir stående åpen", { timeout: false })}
+			type="button"
+			className={styles.button}
+			data-variant="secondary"
+		>
+			Vis uten automatisk lukking
+		</button>
+	),
+};
+
+export const WithCustomClose: Story = {
+	render: () => (
+		<div className={styles.prose}>
+			<button
+				onClick={() => toast("Ingen lukke-kryss", { closedby: "none" })}
+				type="button"
+				className={styles.button}
+				data-variant="secondary"
+			>
+				Vis uten lukke-kryss
+			</button>
+			<button
+				onClick={() =>
+					toast.info(
+						<div className={styles.prose}>
+							<p>Pellentesque scelerisque urna orci in placerat.</p>
+							<button
+								className={styles.button}
+								commandfor="my-toast"
+								command="close"
+								data-variant="primary"
+								type="button"
+							>
+								Ok
+							</button>
+						</div>,
+						{ closedby: "none", timeout: false, id: "my-toast" },
+					)
+				}
+				type="button"
+				className={styles.button}
+				data-variant="secondary"
+			>
+				Vis egen lukk knapp
+			</button>
+		</div>
+	),
+};
+
+export const AsHTML: Story = {
+	render: () => (
+		<>
+			<button
+				onClick={() =>
+					document.querySelector<HTMLDialogElement>("#my-toast")?.show()
+				}
+				type="button"
+				className={styles.button}
+				data-variant="secondary"
+			>
+				Vis en toast
+			</button>
+			<dialog id="my-toast" className={styles.toast}>
+				Toasten
+			</dialog>
+		</>
+	),
+};

package/mtds/ai/togglegroup.mdx

@@ -0,0 +1,75 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Example, CssVariables } from '../../.storybook/blocks';
+import * as stories from './togglegroup.stories';
+import { Grid } from '../react';
+import { Flex } from '../react';
+import styles from '../styles.module.css';
+import { TextAlignCenterIcon, TextAlignLeftIcon, TextAlignRightIcon } from '@phosphor-icons/react';
+
+<Meta of={stories} />
+
+# Togglegroup
+> ToggleGroup lar brukeren ta valg som påvirker innholdet på siden. Komponenten består av en gruppe knapper som henger sammen og bare én knapp kan være valgt om gangen.
+
+## Kode
+- Bruk klassen `togglegroup` på `<fieldset>` med `data-toggle-group="LABEL-PÅ-GRUPPEN"`
+- Legg `<label><input type="radio">` elementer inni med samme `name` og `checked` på valgt verdier
+<Canvas of={stories.Default} />
+
+
+## Skikk og bruk
+
+<Grid data-items={350} data-gap="5">
+  > ✅ **Egnet til:**<br />Filtrering eller endring av visning av samme innhold
+
+  > ❌ **Uegnet til:**<br />Navigasjon eller erstatning for radio/checkbox
+</Grid>
+
+<Flex data-items="350">
+  {/* Togglegroup med ikon */}
+  <Example data-color="success" text="ToggleGroup med bare ikoner bør kun brukes i ekspertløsninger. Bruk tooltip sammen med ikon." zoom="100%">
+  <div className={styles.grid}>
+      <fieldset className={styles.togglegroup} data-toggle-group="Mappe">
+        <label className={styles.button} data-tooltip="Venstrejustert">
+          <input type="radio" name="my-icon-example-1" value="left" />
+          <TextAlignLeftIcon />
+        </label>
+        <label className={styles.button} data-tooltip="Sentrert">
+          <input type="radio" name="my-icon-example-1" value="center" defaultChecked />
+          <TextAlignCenterIcon />
+        </label>
+        <label className={styles.button} data-tooltip="Høyrejustert">
+          <input type="radio" name="my-icon-example-1" value="right" />
+          <TextAlignRightIcon />
+        </label>
+      </fieldset>
+    </div>
+  </Example>
+
+  <Example data-color="danger" text="ToggleGroup med bare ikoner bør ha tooltip." zoom="100%">
+    <div className={styles.grid}>
+      <fieldset className={styles.togglegroup} data-toggle-group="Mappe">
+        <label className={styles.button}>
+          <input type="radio" name="my-icon-example-2" value="left" />
+          <TextAlignLeftIcon />
+        </label>
+        <label className={styles.button}>
+          <input type="radio" name="my-icon-example-2" value="center" defaultChecked />
+          <TextAlignCenterIcon />
+        </label>
+        <label className={styles.button}>
+          <input type="radio" name="my-icon-example-2" value="right" />
+          <TextAlignRightIcon />
+        </label>
+      </fieldset>
+    </div>
+  </Example>
+</Flex>
+
+## Med lenker
+
+- Hvis du ønsker lenker istedenfor radio-knapper: Bruk `<nav>`, ikke `<fieldset>`
+- Bruk `aria-current="true"` på den aktive lenken
+<Canvas of={stories.AsLinks} />
+
+<CssVariables component="togglegroup" />

package/mtds/ai/togglegroup.stories.tsx

@@ -0,0 +1,96 @@
+import {
+	TextAlignCenterIcon,
+	TextAlignLeftIcon,
+	TextAlignRightIcon,
+} from "@phosphor-icons/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { Togglegroup } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Togglegroup",
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<div className={styles.grid}>
+			<fieldset className={styles.togglegroup} data-toggle-group="Mappe">
+				<label className={styles.button}>
+					<input type="radio" name="my-toggles" value="innboks" />
+					Innboks
+				</label>
+				<label className={styles.button}>
+					<input type="radio" name="my-toggles" value="utkast" defaultChecked />
+					Utkast
+				</label>
+				<label className={styles.button}>
+					<input type="radio" name="my-toggles" value="arkiv" />
+					Arkiv
+				</label>
+				<label className={styles.button}>
+					<input type="radio" name="my-toggles" value="sendt" />
+					Sendt
+				</label>
+			</fieldset>
+			<fieldset className={styles.togglegroup} data-toggle-group="Mappe">
+				<label className={styles.button}>
+					<input type="radio" name="my-icon-toggle" value="left" />
+					<TextAlignLeftIcon />
+				</label>
+				<label className={styles.button}>
+					<input
+						type="radio"
+						name="my-icon-toggle"
+						value="center"
+						defaultChecked
+					/>
+					<TextAlignCenterIcon />
+				</label>
+				<label className={styles.button}>
+					<input type="radio" name="my-icon-toggle" value="right" />
+					<TextAlignRightIcon />
+				</label>
+			</fieldset>
+		</div>
+	),
+};
+
+export const React: Story = {
+	render: () => {
+		const items = ["Innboks", "Utkast", "Arkiv", "Sendt"];
+		const [value, setValue] = useState(items[1]);
+
+		return (
+			<Togglegroup data-toggle-group="Mappe">
+				{items.map((item) => (
+					<Togglegroup.Item
+						checked={value === item}
+						key={item}
+						name="react-toggles"
+						onChange={() => setValue(item)}
+						value={item}
+					>
+						{item}
+					</Togglegroup.Item>
+				))}
+			</Togglegroup>
+		);
+	},
+};
+
+export const AsLinks: Story = {
+	render: () => (
+		<nav className={styles.togglegroup} data-toggle-group="Valgknapper">
+			<a href="#liste" className={styles.button} aria-current="true">
+				Liste
+			</a>
+			<a href="#tidslinje" className={styles.button}>
+				Tidslinje
+			</a>
+		</nav>
+	),
+};

package/mtds/ai/tooltip.mdx

@@ -0,0 +1,32 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Example, CssVariables } from '../../.storybook/blocks';
+import * as stories from './tooltip.stories';
+import { Flex } from '../react';
+import styles from '../styles.module.css';
+
+<Meta of={stories} />
+
+# Tooltip
+> Tooltip viser kort informasjon når brukeren holder musepekeren over (hover) eller fokuserer på et element. Den brukes til sekundær informasjon, for eksempel til å forklare hva et symbol betyr.
+
+## Kode
+- Bruk `data-tooltip="Hjelpetekst"` på hvilet et interaktivt element
+- Bruk `data-tooltip-position="top | right | bottom | left"` for å endre plassering
+- Dersom elementet ikke er interaktivt; legg på `tabindex="0"`
+- Teksten blir også automatisk tilgjengelig for skjermlesere
+- **Merk:** Tooltip senterer seg til sitt anker, så bruk en `<span data-tooltip="">` dersom du ønsker tooltip rundt kun tekst
+<Canvas of={stories.Default} />
+
+<CssVariables component="tooltip" />
+
+## Skikk og bruk
+<Flex data-items="350">
+  {/* Tooltip med lang tekst */}
+  <Example data-color="success" text="Bruk korte konsise forklaringer i Tooltip." zoom="100%">
+      <button type="button" className={styles.button} data-tooltip="Tooltip eksempel">Hover meg</button>
+  </Example>
+
+  <Example data-color="danger" text="Unngå lange tekster i tooltip. Bruk maks fire ord. Bruk heller popover hvis du trenger lengre forklaringer." zoom="100%">
+      <button type="button" className={styles.button} data-tooltip="Når du trykker på denne knappen vil det ikke skje noen ting. Dette er bare et eksempel på hvordan en tooltip ikke skal være.">Hover meg</button>
+  </Example>
+</Flex>

package/mtds/ai/tooltip.stories.tsx

@@ -0,0 +1,34 @@
+import { HeartIcon } from "@phosphor-icons/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Tooltip",
+	decorators: [
+		(Story) => (
+			<span className={styles.flex}>
+				<Story />
+			</span>
+		),
+	],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<button type="button" className={styles.button} data-tooltip="Innhold her">
+			Hold over meg
+		</button>
+	),
+};
+
+export const React: Story = {
+	render: () => <Button data-tooltip="Innhold her">Hold over meg</Button>,
+};
+
+export const Icon: Story = {
+	render: () => <HeartIcon data-tooltip="Innhold her" tabIndex={0} />,
+};

package/mtds/ai/typography.mdx

@@ -0,0 +1,67 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Example, CssVariables, JumpTo } from '../../.storybook/blocks';
+import { Button, Popover } from '../react.tsx';
+import * as stories from './typography.stories';
+import { Flex } from '../react';
+import styles from '../styles.module.css';
+import { BuildingOfficeIcon, HeartIcon } from '@phosphor-icons/react';
+
+<Meta of={stories} />
+
+# Typography
+> Vi bruker vår egen open source font Mattilsynet Sans i alle løsninger. God og lesbar typografi er et viktig virkemiddel både når vi skal ivareta Mattilsynets identitet og når vi bygger brukervennlige løsninger. 
+
+<JumpTo />
+
+## Text
+- All tekst er automatisk satt til Figmas text style `text/default`
+- Bruk klassen `ingress` for introtekster og <button type="button" data-popover="inline" popoverTarget="styles">`styles.muted`</button> eller `<small>` elementet for mindre tekst
+- Tekststørrelser påvirkes av `data-size` (`mode: size` i Figma), og av teknikken [fluid typography](https://utopia.fyi/blog/designing-with-fluid-type-scales) som gradvis skalerer font ned et nivå basert på skjermbredde.
+<Canvas of={stories.Default} />
+<Popover id="styles">`import { styles } from '@mattilsynet/design'`</Popover>
+
+## Heading
+- Bruk klassen `styles.heading` på `<h[1-6]>` eller `<Heading as="h[1-6]">` komponenten
+- Bruk `data-size="2xs | xs | sm | md | lg | xl | 2xl"`
+- Bruk `data-justify="start | center | end"` for å endre tekstjustering
+- I React kan du bruke `as="h1 | h2 | h3 | h4 | h5 | h6"` for å endre semantisk overskriftsnivå, hvor `h2` er default. 
+
+> **Merk:** `data-size` endrer kun størrelse - ikke semantisk overskriftsnivå. Benytt alltid korrekt HTML `<h[1-6]>` eller `as="h[1-6]"` for [god universell utforming &rarr;](https://www.uutilsynet.no/veiledning/246-overskrifter-og-ledetekster/1253)
+
+<Canvas of={stories.HeadingStory} />
+
+## Prose
+- Bruk klassen `prose` på typisk `div` eller annen container som har prosa/skjema/typografisk innhold
+- `Prose` styler direkte barn med typografisk justert margin over og under for god lesbarhet
+- Bruk `data-justify="start | center | end"` for å endre tekstjustering
+<div className="sbdocs-canvas-thumbnail">
+  <Button data-arrow data-variant="primary" href="?path=/story/designsystem-typography--prose">Se prose-layout i egen visning</Button>
+  <Canvas className="sbdocs-canvas--max-height" of={stories.Prose} />
+</div>
+
+## Info
+- Bruk `info` rundt ledetekst+verdi, ikon+verdi eller kun verdi for enkelt, responsivt oppsett
+- Bruk `<svg>` for ikon eller `<i>` rundt ikon dersom svg ikke er mulig
+- Bruk `<strong>` som direkte barn, rundt ledetekst eller verdi
+- Bruk `<span data-nowrap>` som direkte barn for å å tvinge tekst på én linje
+- Bruk `data-size="sm | md | lg"` for å endre størrelse
+- Bruk `data-variant="circle"` for å få sirkel rundt ikonet
+- Bruk `data-color="success | warning | danger"` på sirkevariant for å endre farge
+- Kan også brukes rundt andre elementer for å lage informasjonsoppsett
+<Canvas of={stories.InfoStory} />
+
+<Flex data-items="350">
+
+  {/* Info med ikon i sirkel */}
+  <Example data-color="success" text="Med varianten circle skal både ledetekst og informasjon alltid vises." zoom="100%">
+    <div className={styles.info} data-variant="circle"><BuildingOfficeIcon /> <strong>Firma</strong>Fisk & Video AS</div>
+  </Example>
+
+  <Example data-color="danger" text="Unngå bare informasjonstekst eller ledetekst når du bruker circle." zoom="100%">
+    <div className={styles.info} data-variant="circle"><BuildingOfficeIcon /> Fisk & Video AS</div>
+  </Example>
+
+</Flex>
+
+<CssVariables component="prose" />
+