@mattilsynet/design 3.2.9 → 3.3.1

package/mtds/ai/badge.mdx

@@ -0,0 +1,70 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Example, CssVariables } from '../../.storybook/blocks';
+import * as stories from './badge.stories';
+import { Flex } from '../react';
+import styles from '../styles.module.css';
+import { EnvelopeIcon } from '@phosphor-icons/react';
+
+
+<Meta of={stories} />
+
+# Badge
+
+> Badge er en ikke-interaktiv komponent som viser status med eller uten tall. 
+
+## Kode
+- Legg klassen `badge` på typisk `span` eller bruk `<Badge>` komponenten i React
+- Legg innhold inni attributten `data-badge`
+<Canvas of={stories.Default} />
+
+## Skikk og bruk
+
+<Flex data-items="350">
+  {/* Innhold i Badge: */}
+  <Example data-color="success" text="Bruk bare tall i badge." zoom="100%">
+    <button type="button" className={styles.button} data-variant="secondary"><EnvelopeIcon />E-post <span className={styles.badge} data-badge="2"></span></button>
+  </Example>
+  <Example data-color="danger" text="Unngå å bruke tekst i badge, bruk heller tag-komponenten hvis det er behov for tekst." zoom="100%">
+    <button type="button" className={styles.button} data-variant="secondary"> <EnvelopeIcon />E-post <span className={styles.badge} data-badge="Trehundreogtjuefire"></span></button>
+  </Example>
+
+   {/* Flere Badger: */}
+  <Example data-color="success" text="Bruk én badge i sammenheng med et element." zoom="100%">
+    <button type="button" className={styles.button} data-variant="secondary"><EnvelopeIcon />E-post <span className={styles.badge} data-badge="2"></span></button>
+  </Example>
+  <Example data-color="danger" text="Unngå bruk av flere badges samtidig. Det kan skape forvirring." zoom="100%">
+      <button type="button" className={styles.button} data-variant="secondary"> <EnvelopeIcon />E-post <span className={styles.badge} data-badge="42"></span><span className={styles.badge} data-badge="98"></span></button>
+  </Example>
+
+  {/* Badge brukes i en kontekst: */}
+  <Example data-color="success" text="Bruk badge i en kontekst." zoom="100%">
+    <ds-tabs class={styles.tabs} data-size="sm">
+      <ds-tablist>
+        <ds-tab role="tab" aria-selected="true"><div className={styles.flex} data-gap="2">Kjøtt <span className={styles.badge} data-badge="2"></span></div></ds-tab>
+        <ds-tab>Fisk</ds-tab>
+        <ds-tab>Grønnsaker</ds-tab>
+      </ds-tablist>
+    </ds-tabs>
+  </Example>
+  <Example data-color="danger" text="Badge skal aldri stå alene." zoom="100%">
+    <span className={styles.badge} data-badge="Firehundreogfemtito"></span>
+  </Example>
+
+
+
+</Flex>
+
+## Farger
+- Bruk `data-color` for å endre farge
+<Canvas of={stories.Color} />
+
+## Inni element
+- Knapper og overskifter kan være forelder til `badge`
+<Canvas of={stories.InElement} />
+
+## Rundt element
+- Dersom `badge` har elementer inni, vil den plassere seg i top-høyre hjørne 
+- Bruk `--mtdsc-badge-offset` om du trenger å flytte badge innover i elementet
+<Canvas of={stories.WithPosition} />
+
+<CssVariables component="badge" />

package/mtds/ai/badge.stories.tsx

@@ -0,0 +1,122 @@
+import { EnvelopeIcon } from "@phosphor-icons/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Badge } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Badge",
+	decorators: [
+		(Story) => (
+			<div className={styles.flex}>
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => <span className={styles.badge} data-badge="2"></span>,
+};
+
+export const React: Story = {
+	render: () => (
+		<>
+			<Badge data-badge="2"></Badge>
+			<Badge>
+				<EnvelopeIcon />
+			</Badge>
+		</>
+	),
+};
+
+export const Color: Story = {
+	render: () => (
+		<>
+			<span className={styles.badge} data-badge="2"></span>
+			<span className={styles.badge} data-badge="2" data-color="danger"></span>
+		</>
+	),
+};
+
+export const InElement: Story = {
+	render: () => (
+		<div>
+			<h2>
+				Under behandling <span className={styles.badge} data-badge="9"></span>
+			</h2>
+			<div className={styles.flex}>
+				<button
+					type="button"
+					className={styles.button}
+					data-variant="secondary"
+				>
+					<EnvelopeIcon />
+					E-post <span className={styles.badge} data-badge="99+"></span>
+				</button>
+				<button type="button" className={styles.button} data-variant="primary">
+					<EnvelopeIcon />
+					E-post <span className={styles.badge} data-badge="99+"></span>
+				</button>
+			</div>
+		</div>
+	),
+};
+
+export const WithPosition: Story = {
+	render: () => (
+		<>
+			<button type="button" className={styles.button}>
+				E-post{" "}
+				<span className={styles.badge}>
+					<EnvelopeIcon />
+				</span>
+			</button>
+			<button type="button" className={styles.button}>
+				E-post{" "}
+				<span className={styles.badge} data-badge="2">
+					<EnvelopeIcon />
+				</span>
+			</button>
+			<button type="button" className={styles.button}>
+				E-post{" "}
+				<span className={styles.badge} data-color="danger">
+					<EnvelopeIcon />
+				</span>
+			</button>
+			<button type="button" className={styles.button}>
+				E-post{" "}
+				<span className={styles.badge} data-badge="2" data-color="danger">
+					<EnvelopeIcon />
+				</span>
+			</button>
+		</>
+	),
+};
+
+export const Sizes: Story = {
+	render: () => (
+		<div className={styles.prose}>
+			<button type="button" className={styles.button} data-size="sm">
+				E-post{" "}
+				<span className={styles.badge} data-badge="2">
+					<EnvelopeIcon />
+				</span>
+			</button>
+			<button type="button" className={styles.button} data-size="md">
+				E-post{" "}
+				<span className={styles.badge} data-badge="2">
+					<EnvelopeIcon />
+				</span>
+			</button>
+			<button type="button" className={styles.button} data-size="lg">
+				E-post{" "}
+				<span className={styles.badge} data-badge="2">
+					<EnvelopeIcon />
+				</span>
+			</button>
+		</div>
+	),
+};

package/mtds/ai/breadcrumbs.mdx

@@ -0,0 +1,36 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { CssVariables } from '../../.storybook/blocks';
+import * as stories from './breadcrumbs.stories';
+
+<Meta of={stories} />
+
+# Breadcrumbs
+
+> Brukes til å hjelpe brukerne med å forstå hvor de er i en struktur, for eksempel på en nettside. 
+
+## Kode
+- Bruk klassen `breadcrumbs` på `<ds-breadcrumbs>`
+- Legg `<ol>` inni, med `<li><a>` som barn
+- Siste `<a>` får automatisk `aria-current="page"`
+- Hvis `<a>` ligger direkte i `<nav>` vil denne være [tilbakeknapp](#tilbakeknapp)
+- **React?** Bruk `<Breadcrumbs>`, `<ol>`, `<li>` og `<a>`
+
+<Canvas of={stories.Default} />
+
+## Tilbakeknapp
+- Tilbakeknapp vises alltid dersom kun `<a>` er barn av `<nav>`
+- Tilbakeknapp vises kun på mobil dersom `<a>` og `<ol>` er barn av `<nav>`
+
+<Canvas of={stories.WithBackbutton} />
+
+## Størrelser
+- Bruk `data-size="sm | md | lg"`
+
+<Canvas of={stories.Sizes} />
+
+## Uten lenker
+- Bruk `<div>` istedenfor `<nav>` og `<span>` istedenfor `<a>`
+
+<Canvas of={stories.WithoutLinks} />
+
+<CssVariables component="breadcrumbs" />

package/mtds/ai/breadcrumbs.stories.tsx

@@ -0,0 +1,158 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Breadcrumbs } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Breadcrumbs",
+	decorators: [
+		(Story) => (
+			<div className={styles.grid}>
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<ds-breadcrumbs className={styles.breadcrumbs} aria-label="Du er her:">
+			<a href="#none" aria-label="Tilbake til Nivå 3">
+				Nivå 3
+			</a>
+			<ol>
+				<li>
+					<a href="#none">Nivå 1</a>
+				</li>
+				<li>
+					<a href="#none">Nivå 2</a>
+				</li>
+				<li>
+					<a href="#none">Nivå 3</a>
+				</li>
+				<li>
+					<a href="#none">Nivå 4</a>
+				</li>
+			</ol>
+		</ds-breadcrumbs>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<Breadcrumbs aria-label="Du er her:">
+			<a href="#none" aria-label="Tilbake til Nivå 3">
+				Nivå 3
+			</a>
+			<ol>
+				<li>
+					<a href="#none">Nivå 1</a>
+				</li>
+				<li>
+					<a href="#none">Nivå 2</a>
+				</li>
+				<li>
+					<a href="#none">Nivå 3</a>
+				</li>
+				<li>
+					<a href="#none">Nivå 4</a>
+				</li>
+			</ol>
+		</Breadcrumbs>
+	),
+};
+
+export const WithBackbutton: Story = {
+	render: () => (
+		<>
+			Tilbakeknapp på både mobil og desktop:
+			<ds-breadcrumbs className={styles.breadcrumbs} aria-label="Du er her:">
+				<a href="#none" aria-label="Tilbake til Nivå 3">
+					Nivå 3
+				</a>
+			</ds-breadcrumbs>
+			<br />
+			Tilbakeknapp på kun mobil:
+			<ds-breadcrumbs className={styles.breadcrumbs} aria-label="Du er her:">
+				<a href="#none" aria-label="Tilbake til Nivå 3">
+					Nivå 3
+				</a>
+				<ol>
+					<li>
+						<a href="#none">Nivå 1</a>
+					</li>
+					<li>
+						<a href="#none">Nivå 2</a>
+					</li>
+					<li>
+						<a href="#none">Nivå 3</a>
+					</li>
+					<li>
+						<a href="#none">Nivå 4</a>
+					</li>
+				</ol>
+			</ds-breadcrumbs>
+			<br />
+			Ingen tilbakeknapp:
+			<ds-breadcrumbs className={styles.breadcrumbs} aria-label="Du er her:">
+				<ol>
+					<li>
+						<a href="#none">Nivå 1</a>
+					</li>
+					<li>
+						<a href="#none">
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit
+						</a>
+					</li>
+					<li>
+						<a href="#none">Nivå 3</a>
+					</li>
+					<li>
+						<a href="#none">Nivå 4</a>
+					</li>
+				</ol>
+			</ds-breadcrumbs>
+		</>
+	),
+};
+
+export const Sizes: Story = {
+	render: () => (
+		<>
+			<ds-breadcrumbs className={styles.breadcrumbs} data-size="sm">
+				<a href="#none" aria-label="Tilbake til Nivå 3">
+					Nivå 3
+				</a>
+				<ol>
+					<li>
+						<a href="#none">Nivå 1</a>
+					</li>
+					<li>
+						<a href="#none">Nivå 2</a>
+					</li>
+					<li>
+						<a href="#none">Nivå 3</a>
+					</li>
+					<li>
+						<a href="#none">Nivå 4</a>
+					</li>
+				</ol>
+			</ds-breadcrumbs>
+		</>
+	),
+};
+
+export const WithoutLinks: Story = {
+	render: () => (
+		<ds-breadcrumbs className={styles.breadcrumbs} aria-label="Du er her:">
+			<ol>
+				<li>Nivå 1</li>
+				<li>Nivå 2</li>
+				<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
+				<li>Nivå 4</li>
+			</ol>
+		</ds-breadcrumbs>
+	),
+};

package/mtds/ai/button.mdx

@@ -0,0 +1,179 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Example, CssVariables } from '../../.storybook/blocks';
+import { HeartIcon, StarIcon } from '@phosphor-icons/react';
+import { Flex } from '../react';
+import * as stories from './button.stories';
+import styles from '../styles.module.css';
+import { Alert } from '../react';
+
+<Meta of={stories} />
+
+# Button
+
+> Knapper lar brukeren utføre en handling.
+
+## Kode
+- Legg klassen `button` på typisk `<button>` eller `<a>`
+- Husk `type="button"` hvis en `<button>` gjør noe annet enn å sende skjema
+- Bruk `data-variant="primary | secondary | tertiary"`
+- **Merk:** `data-variant="tertiary"` er default siden dette benyttes mest, men for å sikre god universell utforming må knappen da inneholde enten ikon og tekst, eller plasseres ved andre knapper.
+- **Next.js og lenke?** Bruk `<Button as={Link} to={url}>` for å hvor `Link` hentes fra Next.js.
+<Alert data-color="warning">
+**Viktig:** Dersom en knapp innholder personopplysninger, for eksempel navn, må du sette `data-analytics-name=""` for å unngå personopplysninger i analyse-logger
+</Alert>
+<Canvas of={stories.Default} />
+
+## Skikk og bruk
+
+<Flex data-items="350">
+  {/* Viser knapp med lange navn: */}
+  <Example data-color="success" text="Bruk korte beskrivende navn på knapper" zoom="100%">
+    <button type="button" className={styles.button} data-variant="primary">Lagre</button>
+  </Example>
+  <Example data-color="danger" text="Lange tekster og flere handlinger på samme knapp bør unngås." zoom="100%">
+    <button type="button" className={styles.button} data-variant="primary">Lagre og send inn skjemaet</button>
+  </Example>
+
+  {/* Viser tertiærknapp som står alene: */}
+  <Example data-color="success" text="Tertiærknapp bør alltid stå sammen med en primærknapp eller sekundærknapp, eller inneholde ikon" zoom="100%">
+    <div className={styles.flex}>
+      <button type="button" className={styles.button} data-variant="secondary">Lagre</button>
+      <button type="button" className={styles.button} data-variant="tertiary">Avbryt</button>
+    </div>
+  </Example>
+  <Example data-color="danger" text="Unngå å bruke tertiærknapp alene. Vurdér å bruke en sekundærknapp istedenfor eller legg til et ikon" zoom="100%">
+    <button type="button" className={styles.button} data-variant="tertiary">Avbryt</button>
+  </Example>
+
+  {/* Viser tertiærknapp med ikon: */}
+  <Example data-color="success" text="Tertiærknapp alene kan brukes med et ikon" zoom="100%">
+    <button type="button" className={styles.button} data-variant="tertiary"><StarIcon />Favoritt</button>
+  </Example>
+  <Example data-color="danger" text="Tertiærknapp alene bør brukes med et ikon" zoom="100%">
+    <button type="button" className={styles.button} data-variant="tertiary">Favoritt</button>
+  </Example>
+
+  {/* Viser knapp med konsistent størrelse: */}
+  <Example data-color="success" text="Bruk konsistente størrelser på knapper" zoom="100%">
+    <div className={styles.flex}>
+      <button type="button" className={styles.button} data-variant="primary">Lagre</button>
+      <button type="button" className={styles.button} data-variant="tertiary">Avbryt</button>
+    </div>
+  </Example>
+  <Example data-color="danger" text="Unngå ulike størrelser på knapper" zoom="100%">
+    <div className={styles.flex}>
+      <button type="button" className={styles.button} data-variant="primary" data-size='sm'>Lagre</button>
+      <button type="button" className={styles.button} data-variant="secondary" data-size='lg'>Avbryt</button>
+    </div>
+  </Example>
+
+  {/* Viser knapp med bare ikon: */}
+  <Example data-color="success" text="Button kan brukes med bare ikon. Da må den ha en beskrivende tooltip" zoom="100%">
+    <button type="button" className={styles.button} data-variant="tertiary" data-tooltip="Hjelpetekst"><StarIcon /></button>
+  </Example>
+  <Example data-color="danger" text="Når button bare inneholder et ikon skal den ha en beskrivende tooltip " zoom="100%">
+    <button type="button" className={styles.button} data-variant="tertiary"><StarIcon /></button>
+  </Example>
+
+  {/* Samme fargevariant i en gruppe: */}
+  <Example data-color="success" text="Buttons skal ha samme fargestil innenfor en gruppe" zoom="100%">
+    <div className={styles.flex}>
+      <button type="button" className={styles.button} data-variant="primary">Lagre</button>
+      <button type="button" className={styles.button} data-variant="tertiary">Avbryt</button>
+    </div>
+  </Example>
+  <Example data-color="danger" text="Unngå å blande fargestil på knapper i samme gruppe" zoom="100%">
+    <div className={styles.flex}>
+      <button type="button" className={styles.button} data-variant="primary" data-color='danger'>Lagre</button>
+      <button type="button" className={styles.button} data-variant="tertiary" data-color='info'>Avbryt</button>
+    </div>
+  </Example>
+
+  {/* Stor forbokstav: */}
+  <Example data-color="success" text="Bruk stor forbokstav og resten små (sentence case) for best mulig lesbarhet" zoom="100%">
+    <button type="button" className={styles.button} data-variant="primary">Send søknad</button>
+  </Example>
+  <Example data-color="danger" text="Ikke bruk store bokstaver eller en blanding av små og store bokstaver i en knapp" zoom="100%">
+    <div className={styles.prose}>
+      <button type="button" className={styles.button} data-variant="primary">SEND SØKNAD</button>
+      <button type="button" className={styles.button} data-variant="primary">Send Søknad</button>
+      <button type="button" className={styles.button} data-variant="primary">send søknad</button>
+    </div>
+  </Example>
+
+  {/* Kun én call to action: */}
+  <Example data-color="success" text="En side skal bare ha én call to action-button" zoom="100%">
+    <div className={styles.button}>
+    <button type="button" className={styles.button} data-variant="primary">Ferdig</button>
+    <button type="button" className={styles.button} data-variant="secondary">Avbryt</button>
+    </div>
+  </Example>
+  <Example data-color="danger" text="Aldri bruk flere call to action-knapper sammen" zoom="100%">
+    <div className={styles.button}>
+      <button type="button" className={styles.button} data-variant="primary">Ferdig</button>
+      <button type="button" className={styles.button} data-variant="primary">Avbryt</button>
+    </div>
+  </Example>
+
+</Flex>
+
+## Størrelser
+- Bruk `data-size="sm | md | lg"`
+<Canvas of={stories.Sizes} />
+
+## Farger
+- Bruk `data-color="danger"` for å få rød knapp
+<Canvas of={stories.Colors} />
+
+## Innhold på en linje
+- Bruk `<span data-nowrap>` rundt tekst dersom du ønsker å tvinge tekst til en linje
+<Canvas of={stories.Nowrap} />
+
+## Innholdsplassering
+- Bruk `data-justify="start | center | end"` (`center` er default når *ikke* i `<menu>`) 
+<Canvas of={stories.Justify} />
+
+## Pil og popover
+- Legg på `data-arrow` (høyrestilt) eller `data-arrow="left | right"`
+- Lasteindikator vil erstatte pil dersom disse kombineres
+- Kombiner `popovertarget` + `data-arrow` for chevron
+<Canvas of={stories.WithArrows} />
+
+## Ikoner
+- [Ikon fra phosphoricons.com](https://phosphoricons.com/) kan legges før eller etter tekst
+<Canvas of={stories.WithIcons} />
+
+## Spinner
+- For `<button>`: Legg på `<button aria-busy="true" disabled`
+- For `<a>`: Legg på `<a aria-busy="true" tabindex="-1"`
+- Lasteindikator vil erstatte pil dersom disse kombineres
+<Canvas of={stories.WithSpinner} />
+
+## Full bredde
+- Bruk `data-self="full"`
+<Canvas of={stories.WithFullWidth} />
+
+## Handlingsmeny
+- Bruk `aria-label="Knappetekst her"` i stedet for innhold
+- Da får du automatisk ikon for handlingsmeny <svg aria-hidden="ture" width="1em" height="1em" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="128" cy="128" r="16"/><circle cx="60" cy="128" r="16"/><circle cx="196" cy="128" r="16"/></svg>
+
+<Canvas of={stories.WithMenu} />
+
+## Pressed
+- Bruk `<button>` med `aria-pressed="true"`
+- Du kan vise/skjule innhold ved bruke attributten `data-pressed="true | false"` på barn
+- **Merk:** Dersom neste element er `popover`, vil `data-pressed="true | false"` også fungere
+<Canvas of={stories.Pressed} />
+
+## Tooltip
+- Bruk `data-tooltip="Hjelpetekst"`
+- Bruk `data-tooltip-position="top | right | bottom | left"` for å endre plassering
+- Teksten blir også automatisk tilgjengelig for skjermlesere
+<Canvas of={stories.WithTooltip} />
+
+## I meny
+- Legger du `button` i `<menu><li>` vil knappene ha samme bredde og venstrestilt tekst
+- Ved bruk av `aria-pressed="true"` (for `button`) eller `aria-current="page"` (for lenke) indikeres aktivt valg i menyen
+<Canvas of={stories.InMenu} />
+
+<CssVariables component="button" />