@mattilsynet/design 3.2.8 → 3.3.0

package/mtds/ai/progress.mdx

@@ -0,0 +1,41 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { CssVariables } from '../../.storybook/blocks';
+import * as stories from './progress.stories';
+import { Details } from '../react';
+
+<Meta of={stories} />
+
+# Progress
+> Indikerer status på en prosess. Den kan være definert med verdier fra start til slutt eller ubestemt. Progress går i loop når den er ubestemt.
+
+## Kode
+- Legg klassen `progress` på `<u-progress>`
+- Sett numerisk verdi i attributtene `value` og `max`
+
+<Details>
+<Details.Summary>Hva er `u-progress`?</Details.Summary>
+
+[u-progress](https://u-elements.github.io/u-elements/elements/u-progress) er en del av prosjektet [u-elements](https://u-elements.github.io/u-elements)
+som sikrer universell utforming. Dette lastes automatisk når du bruker `@mattilsynet/design`.
+Du kan benytte native tilhørende [HTMLProgressElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLProgressElement) interface ved behov.
+</Details>
+<Canvas of={stories.Default} />
+
+## Størrelser
+- Bruk `data-size="sm | md | lg"`
+<Canvas of={stories.Sizes} />
+
+## Farger
+- Bruk `data-size="main | neutral | success | info | warning | danger"`
+<Canvas of={stories.Colors} />
+
+## Uten synlig label
+- Bruk `aria-label` istedefor `<label>` for å visuelt skjult label
+<Canvas of={stories.WithoutVisibleLabel} />
+
+## Ubestemt
+- Uten `value` blir `progress` ubestemt
+<Canvas of={stories.Indeterminate} />
+
+
+<CssVariables component="progress" />

package/mtds/ai/progress.stories.tsx

@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Progress } from "../react";
+import styles from "../styles.module.css";
+import "../index";
+
+const meta = {
+	title: "Designsystem/Progress",
+	decorators: [
+		(Story) => (
+			<div className={styles.grid} style={{ width: "80vw", maxWidth: 200 }}>
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<label>
+			Fremdrift
+			<u-progress class={styles.progress} value="33" max="100"></u-progress>
+		</label>
+	),
+};
+
+export const Sizes: Story = {
+	render: () => (
+		<>
+			<label data-size="sm">
+				Small
+				<u-progress class={styles.progress} value="33" max="100"></u-progress>
+			</label>
+			<label data-size="md">
+				Medium
+				<u-progress class={styles.progress} value="33" max="100"></u-progress>
+			</label>
+			<label data-size="lg">
+				Large
+				<u-progress class={styles.progress} value="33" max="100"></u-progress>
+			</label>
+		</>
+	),
+};
+
+export const Colors: Story = {
+	render: () => (
+		<>
+			<label>
+				Main
+				<u-progress
+					class={styles.progress}
+					value="33"
+					max="100"
+					data-color="main"
+				></u-progress>
+			</label>
+			<label>
+				Neutral
+				<u-progress
+					class={styles.progress}
+					value="33"
+					max="100"
+					data-color="neutral"
+				></u-progress>
+			</label>
+			<label>
+				Success
+				<u-progress
+					class={styles.progress}
+					value="33"
+					max="100"
+					data-color="success"
+				></u-progress>
+			</label>
+			<label>
+				Info
+				<u-progress
+					class={styles.progress}
+					value="33"
+					max="100"
+					data-color="info"
+				></u-progress>
+			</label>
+			<label>
+				Warning
+				<u-progress
+					class={styles.progress}
+					value="33"
+					max="100"
+					data-color="warning"
+				></u-progress>
+			</label>
+			<label>
+				Danger
+				<u-progress
+					class={styles.progress}
+					value="33"
+					max="100"
+					data-color="danger"
+				></u-progress>
+			</label>
+		</>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<>
+			<label>
+				Fremdrift
+				<Progress value="33" max="100" />
+			</label>
+			<label>
+				Ubestemt
+				<Progress />
+			</label>
+		</>
+	),
+};
+
+export const WithoutVisibleLabel: Story = {
+	render: () => (
+		<u-progress
+			aria-label="Fremdrift"
+			class={styles.progress}
+			value="33"
+			max="100"
+		></u-progress>
+	),
+};
+export const Indeterminate: Story = {
+	render: () => (
+		<label>
+			Ubestemt
+			<u-progress class={styles.progress}></u-progress>
+		</label>
+	),
+};

package/mtds/ai/skeleton.mdx

@@ -0,0 +1,26 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { CssVariables } from '../../.storybook/blocks';
+import * as stories from './skeleton.stories';
+
+<Meta of={stories} />
+
+# Skeleton
+> Skeleton brukes til å gi brukeren en midlertidig visuell tilbakemelding mens innholdet lastes eller behandles. Den er en enkel og minimalistisk versjon av det faktiske innholdet som skal vises.
+
+## Kode
+- Legg klassen `skeleton` på typisk `div` eller `span` (for tekst)
+- Bruk `data-variant="rectangle | circle | text"`
+- Bruk inline `style` for `width` og `height`
+<Canvas of={stories.Default} />
+
+## Sirkel
+- Bruk `data-variant="circle"`
+- Bruk inline `style` for `width` - height er automatisk lik width
+<Canvas of={stories.Circle} />
+
+## Tekst
+- Bruk `data-variant="text"` på en `span`
+- Innholdet bestemmer størrelsen på tekst-skeleton
+<Canvas of={stories.Text} />
+
+<CssVariables component="skeleton" />

package/mtds/ai/skeleton.stories.tsx

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Flex, Grid, Heading, Skeleton } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Skeleton",
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<div className={styles.grid}>
+			<div className={styles.skeleton} style={{ height: 150 }} />
+			<div className={styles.flex} data-gap="4" data-align="center">
+				<div
+					className={styles.skeleton}
+					data-variant="circle"
+					style={{ width: 40 }}
+				/>
+				<h2>
+					<div className={styles.skeleton} data-variant="text">
+						En medium tittel
+					</div>
+				</h2>
+			</div>
+			<p>
+				<span className={styles.skeleton} data-variant="text">
+					Cras vulputate et dolor vel aliquet. Aliquam convallis, dolor id
+					rhoncus lobortis, quam quam cursus nisl, consectetur accumsan ligula
+					velit eu nulla.
+				</span>
+			</p>
+		</div>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<Grid>
+			<Skeleton style={{ height: 150 }} />
+			<Flex data-gap="4" data-align="center">
+				<Skeleton data-variant="circle" style={{ width: 40 }}></Skeleton>
+				<Heading>
+					<Skeleton data-variant="text">En medium tittel</Skeleton>
+				</Heading>
+			</Flex>
+			<div>
+				<Skeleton data-variant="text">
+					Cras vulputate et dolor vel aliquet. Aliquam convallis, dolor id
+					rhoncus lobortis, quam quam cursus nisl, consectetur accumsan ligula
+					velit eu nulla.
+				</Skeleton>
+			</div>
+		</Grid>
+	),
+};
+
+export const Circle: Story = {
+	render: () => (
+		<div
+			className={styles.skeleton}
+			data-variant="circle"
+			style={{ width: 50 }}
+		></div>
+	),
+};
+
+export const Text: Story = {
+	render: () => (
+		<div>
+			<span className={styles.skeleton} data-variant="text">
+				Cras vulputate et dolor vel aliquet. Aliquam convallis, dolor id rhoncus
+				lobortis, quam quam cursus nisl, consectetur accumsan ligula velit eu
+				nulla. Cras vulputate et dolor vel aliquet. Aliquam convallis, dolor id
+				rhoncus lobortis, quam quam cursus nisl, consectetur accumsan ligula
+				velit eu nulla.
+			</span>
+		</div>
+	),
+};
+
+export const OnBackground: Story = {
+	render: () => (
+		<div
+			className={`${styles.grid} ${styles.body}`}
+			data-items="auto"
+			style={{ padding: 40 }}
+		>
+			<p className={styles.card}>
+				<span className={styles.skeleton} data-variant="text">
+					Cras vulputate et dolor vel aliquet. Aliquam convallis, dolor id
+					rhoncus lobortis, quam quam cursus nisl, consectetur accumsan ligula
+					velit eu nulla. Cras vulputate et dolor vel aliquet. Aliquam
+					convallis, dolor id rhoncus lobortis, quam quam cursus nisl,
+					consectetur accumsan ligula velit eu nulla.
+				</span>
+			</p>
+			<p
+				className={styles.card}
+				style={{
+					background: "var(--mtds-color-background-default)",
+				}}
+			>
+				<span className={styles.skeleton} data-variant="text">
+					Cras vulputate et dolor vel aliquet. Aliquam convallis, dolor id
+					rhoncus lobortis, quam quam cursus nisl, consectetur accumsan ligula
+					velit eu nulla. Cras vulputate et dolor vel aliquet. Aliquam
+					convallis, dolor id rhoncus lobortis, quam quam cursus nisl,
+					consectetur accumsan ligula velit eu nulla.
+				</span>
+			</p>
+			<p
+				className={styles.card}
+				style={{
+					border: 0,
+					background: "var(--mtds-color-background-tinted)",
+				}}
+			>
+				<span className={styles.skeleton} data-variant="text">
+					Cras vulputate et dolor vel aliquet. Aliquam convallis, dolor id
+					rhoncus lobortis, quam quam cursus nisl, consectetur accumsan ligula
+					velit eu nulla. Cras vulputate et dolor vel aliquet. Aliquam
+					convallis, dolor id rhoncus lobortis, quam quam cursus nisl,
+					consectetur accumsan ligula velit eu nulla.
+				</span>
+			</p>
+		</div>
+	),
+};

package/mtds/ai/spinner.mdx

@@ -0,0 +1,26 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { CssVariables } from '../../.storybook/blocks';
+import * as stories from './spinner.stories';
+
+<Meta of={stories} />
+
+# Spinner
+> En spinner er et visuelt element som viser at noe laster eller er i gang.
+
+## Kode
+- Bruk klassen `spinner` på typisk `<span>`
+<Canvas of={stories.Default} />
+
+## Størrelser
+- Bruk `data-size="xs | sm | md | lg"`
+<Canvas of={stories.Sizes} />
+
+## Tekst
+- Skriv tekst inni for dersom du ønsker
+<Canvas of={stories.WithText} />
+
+{/* ## Ferdig
+- Legg på `data-state="complete"` for å få huke-animasjon
+<Canvas of={stories.WithStateComplete} /> */}
+
+<CssVariables component="spinner" />

package/mtds/ai/spinner.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useEffect, useState } from "react";
+import { Button, Grid, Spinner } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Spinner",
+	decorators: [
+		(Story) => (
+			<div
+				className={styles.grid}
+				data-align="center"
+				data-items="100"
+				style={{ width: "max-content", minWidth: 250 }}
+			>
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => <span className={styles.spinner}></span>,
+};
+
+export const React: Story = {
+	render: () => <Spinner />,
+};
+
+export const Sizes: Story = {
+	render: () => (
+		<>
+			xs: <span className={styles.spinner} data-size="xs"></span>
+			sm: <span className={styles.spinner} data-size="sm"></span>
+			md: <span className={styles.spinner} data-size="md"></span>
+			lg: <span className={styles.spinner} data-size="lg"></span>
+		</>
+	),
+};
+
+export const WithText: Story = {
+	render: () => <span className={styles.spinner}>Henter innhold...</span>,
+};
+
+export const WithStateComplete: Story = {
+	tags: ["!dev"], // TODO
+	render: function Render() {
+		const [done, setDone] = useState(false);
+
+		useEffect(() => {
+			const spinner = document.querySelector(`.${styles.spinner}`);
+			const state = spinner?.getAttribute("data-state") || "loading";
+			spinner?.removeAttribute("data-state");
+			setTimeout(() => spinner?.setAttribute("data-state", state), 500);
+		});
+
+		return (
+			<Grid>
+				<span
+					className={styles.spinner}
+					data-state={done ? "complete" : undefined}
+				></span>
+				<Button onClick={() => setDone(!done)}>
+					{done ? "Start lasting" : "Avslutt lasting"}
+				</Button>
+			</Grid>
+		);
+	},
+};

package/mtds/ai/steps.mdx

@@ -0,0 +1,37 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { CssVariables } from '../../.storybook/blocks';
+import { Tag } from '../react';
+import * as stories from './steps.stories';
+
+<Meta of={stories} />
+
+# Steps
+> Steps viser fremdrift i en flerstegsprosess. Den forteller brukeren hvor langt man har kommet i en sekvens av trinn. Komponenten kan også brukes til å presentere en tidlinje.
+
+## Kode
+- Bruk klassen `steps` på `<ol>`
+- Legg `<li>` elementer inni, med `<mark>` som barn av hver `<li>`
+- Legg valgfritt til mer tekst etter `<mark>`
+- Legg valgfritt ikon inni `<mark>` - dette erstatter standard ikon som følger fargene
+- Bruk `aria-current="step"` på valgt `<li>`
+- Bruk `data-color` for å endre farge på stegene
+<Canvas of={stories.Default} />
+
+## Fullført
+- Bruk `data-state="complete"` for å få avhuking på alle stegene
+<Canvas of={stories.WithStateComplete} />
+
+## Retning
+- Bruk `data-direction="right | down | up"` for å endre retningen på stegene
+<Canvas of={stories.WithDirection} />
+
+## Tidslinje
+- Steg kan også brukes som en tidslinje
+- Dersom du ikke setter `aria-current="step"`, men heller bruker `data-color="main | success | warning | danger"`, du ikke få fylt strek mellom punktene
+<Canvas of={stories.Timeline} />
+
+## Interaksjon
+- Legg `<a>` eller `<button>` som direkte barn av `<li>` for å gjøre stegene interaktive
+<Canvas of={stories.WithInteraction} />
+
+<CssVariables component="steps" />