@mattilsynet/design 3.2.9 → 3.3.0

package/mtds/ai/chip.stories.tsx

@@ -0,0 +1,211 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+	Button,
+	Chip,
+	Fieldset,
+	Flex,
+	Input,
+	Prose,
+	Validation,
+} from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Chip",
+	decorators: [
+		(Story) => (
+			<div className={styles.flex}>
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const React: Story = {
+	render: () => (
+		<>
+			<Fieldset aria-label="Velg språk">
+				<Flex>
+					<Chip>
+						<Input
+							type="radio"
+							value="nynorsk"
+							defaultChecked
+							name="my-radio"
+						/>
+						Nynorsk
+					</Chip>
+					<Chip>
+						<Input type="radio" value="bokmål" name="my-radio" />
+						Bokmål
+					</Chip>
+				</Flex>
+			</Fieldset>
+			<Chip data-removable>Bokmål</Chip>
+			<Fieldset aria-label="Filtering">
+				<Flex>
+					<Chip>
+						<Input type="checkbox" value="filter-1" name="my-check" />
+						Filter 1
+					</Chip>
+					<Chip>
+						<Input type="checkbox" value="filter-1" name="my-check" />
+						Filter 2
+					</Chip>
+				</Flex>
+			</Fieldset>
+		</>
+	),
+};
+
+export const Sizes: Story = {
+	render: () => (
+		<fieldset className={styles.fieldset} aria-label="Size">
+			<div className={styles.flex} data-align="center">
+				<label className={styles.chip} data-size="sm">
+					<input
+						className={styles.input}
+						type="radio"
+						value="sm"
+						defaultChecked
+						name="my-size"
+					/>
+					Small
+				</label>
+				<label className={styles.chip} data-size="md">
+					<input
+						className={styles.input}
+						type="radio"
+						value="md"
+						defaultChecked
+						name="my-size"
+					/>
+					Medium
+				</label>
+				<label className={styles.chip} data-size="lg">
+					<input
+						className={styles.input}
+						type="radio"
+						value="lg"
+						defaultChecked
+						name="my-size"
+					/>
+					Large
+				</label>
+			</div>
+		</fieldset>
+	),
+};
+
+export const Radio: Story = {
+	render: () => (
+		<fieldset className={styles.fieldset} aria-label="Velg språk">
+			<div className={styles.flex}>
+				<label className={styles.chip}>
+					<input
+						className={styles.input}
+						type="radio"
+						value="nynorsk"
+						defaultChecked
+						name="my-radio"
+					/>
+					Nynorsk
+				</label>
+				<label className={styles.chip}>
+					<input
+						className={styles.input}
+						type="radio"
+						value="bokmål"
+						name="my-radio"
+					/>
+					Bokmål
+				</label>
+			</div>
+		</fieldset>
+	),
+};
+
+export const Checkbox: Story = {
+	render: () => (
+		<fieldset className={styles.fieldset} aria-label="Velg språk">
+			<div className={styles.flex}>
+				<label className={styles.chip}>
+					<input
+						className={styles.input}
+						type="checkbox"
+						value="nynorsk"
+						defaultChecked
+						name="my-checkbox"
+					/>
+					Nynorsk
+				</label>
+				<label className={styles.chip}>
+					<input
+						className={styles.input}
+						type="checkbox"
+						value="bokmål"
+						name="my-checkbox"
+					/>
+					Bokmål
+				</label>
+			</div>
+		</fieldset>
+	),
+};
+
+export const Removable: Story = {
+	render: () => (
+		<button type="button" className={styles.chip} data-removable>
+			Nynorsk
+		</button>
+	),
+};
+
+export const Nowrap: Story = {
+	render: () => (
+		<div className={styles.grid} data-items="auto" style={{ width: 250 }}>
+			<div>
+				<p>Med nowrap:</p>
+				<button type="button" className={styles.chip} data-removable>
+					<span data-nowrap>Mine favoritter</span>
+				</button>
+			</div>
+			<div>
+				<p>Uten nowrap:</p>
+				<button type="button" className={styles.chip} data-removable>
+					Mine favoritter
+				</button>
+			</div>
+		</div>
+	),
+};
+
+export const WithValidationForm: Story = {
+	parameters: {
+		showInOverview: true,
+	},
+	render: () => (
+		<Prose as="form" action="#" data-validation="form">
+			<Fieldset>
+				<Fieldset.Legend>Hvilke foretrekker du?</Fieldset.Legend>
+				<Flex>
+					<Chip>
+						<Input type="radio" name="my-radio-validation" required />
+						Radio 1
+					</Chip>
+					<Chip>
+						<Input type="radio" name="my-radio-validation" required />
+						Radio 2
+					</Chip>
+				</Flex>
+				<Validation hidden>Feilmelding</Validation>
+			</Fieldset>
+			<Button type="submit" data-variant="primary">
+				Send inn
+			</Button>
+		</Prose>
+	),
+};

package/mtds/ai/details.mdx

@@ -0,0 +1,33 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { CssVariables } from '../../.storybook/blocks';
+import * as stories from './details.stories';
+import { Details } from '../react';
+
+<Meta of={stories} />
+
+# Details
+>Trekkspill, accordions, expander eller details - kjært barn, mange navn. Med details kan du presentere mye innhold på liten plass i en eller flere rader. Hele raden er klikkbar og lar brukere åpne eller lukke visningen av innholdet under.
+
+## Kode
+- Legg klassen `details` på `<u-details>`
+- Legg `<u-summary>` til som første barn med tittelen inni
+- **React?** Bruk `<Details>` og `<Details.Summary>`
+
+<Details>
+<Details.Summary>Hva er `u-details`?</Details.Summary>
+
+[u-details](https://u-elements.github.io/u-elements/elements/u-details) 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 [HTMLDetailsElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement) interface ved behov.
+</Details>
+
+<Canvas of={stories.Default} />
+
+## Card variant
+- Bruk `data-variant="card"` for å få avrunnede kanter og bakgrunn
+- Bruk `data-color="main | neutral"` for å endre farge
+- Bruk `data-align="start"` for å justere innholdet til toppen
+- Legg eventuelt til ikon som første barn av `<u-summary>`
+<Canvas of={stories.VariantCard} />
+
+<CssVariables component="details" />

package/mtds/ai/details.stories.tsx

@@ -0,0 +1,91 @@
+import { ShrimpIcon } from "@phosphor-icons/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Details } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Details",
+	parameters: {
+		layout: "padded",
+	},
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<>
+			<details className={styles.details}>
+				<summary>Åpne/lukk</summary>
+				Innhold
+			</details>
+			<details className={styles.details}>
+				<summary>Åpne/lukk</summary>
+				Innhold
+			</details>
+			<details className={styles.details}>
+				<summary>Åpne/lukk</summary>
+				Innhold
+			</details>
+			<details className={styles.details}>
+				<summary>Åpne/lukk</summary>
+				Innhold
+			</details>
+			<details className={styles.details}>
+				<summary>Åpne/lukk</summary>
+				Innhold
+			</details>
+			<details className={styles.details}>
+				<summary>Åpne/lukk</summary>
+				Innhold
+			</details>
+		</>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<Details>
+			<Details.Summary>Åpne/lukk</Details.Summary>
+			Innhold
+		</Details>
+	),
+};
+
+export const DefaultOpen: Story = {
+	render: () => (
+		<details className={styles.details} open>
+			<summary>Default open</summary>
+			Innhold
+		</details>
+	),
+};
+
+export const VariantCard: Story = {
+	render: () => (
+		<div className={styles.grid}>
+			<details className={styles.details} data-variant="card">
+				<summary>Details with data-variant="card"</summary>
+				Innhold
+			</details>
+			<details className={styles.details} data-variant="card">
+				<summary>
+					<ShrimpIcon /> Details with data-variant="card" and icon
+				</summary>
+				Innhold
+			</details>
+			<details
+				className={styles.details}
+				data-variant="card"
+				data-color="neutral"
+			>
+				<summary>
+					<ShrimpIcon /> Details with data-variant="card" and icon and
+					data-color="neutral"
+				</summary>
+				Innhold
+			</details>
+		</div>
+	),
+};

package/mtds/ai/dialog.mdx

@@ -0,0 +1,38 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { CssVariables, JumpTo } from '../../.storybook/blocks';
+import * as stories from './dialog.stories';
+
+<Meta of={stories} />
+
+# Dialog
+
+> Dialog lar deg lage et vindu som kan vises foran innholdet på en side. Den kan enten være modal, som betyr at brukeren må gjøre noe før de kan komme videre, eller ikke-modalt, som bare er et vanlig vindu som kan lukkes når man vil.
+
+<JumpTo />
+
+## Kode
+- Legg klassen `dialog` på `<dialog>`
+- Åpnes enten med `open` attribute, button med `command="show-modal | show" commandfor="DIALOG-ID"` eller `.showModal() | .show()` metodene
+- **Merk:** Dialog sentreres med `transform`, så skal du plassere den et annet sted, sett `transform: none`
+<Canvas of={stories.Default} />
+
+## Lukke knapp
+- Legg `command="close" commandfor="DIALOG-ID"` på en button inni for lukke-knapp
+- Første tomme knapp i `<dialog>` vil automatisk styles som lukke-knapp
+- Legg evt. til flere knapper for lukking
+<Canvas of={stories.WithClose} />
+
+## Klikk utenfor dialog for å lukke
+- Legg `closedby="any"` på `<dialog>`
+<Canvas of={stories.WithBackdropClose} />
+
+## Ikke-modal
+- Legg `data-modal="false"` på `<dialog>`
+<Canvas of={stories.WithoutBackdrop} />
+
+## Med sticky footer
+- Legg et `<footer>` element inn som siste barn for å få sticky footer
+- **Merk:** Legg `form="ID-OF-FORM-HERE"` på knappen i footer som skal sende inn skjema
+<Canvas of={stories.VariantDrawerWithoutBackdrop} />
+
+<CssVariables component="dialog" exclude="divider" />