@mattilsynet/design 3.2.8 → 3.3.0

package/mtds/ai/tabs.mdx

@@ -0,0 +1,106 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Example, CssVariables } from '../../.storybook/blocks';
+import * as stories from './tabs.stories';
+import { Details } from '../react';
+import { Flex } from '../react';
+import styles from '../styles.module.css';
+import { PencilSimpleIcon, ListMagnifyingGlassIcon, AddressBookTabsIcon, SquaresFourIcon } from '@phosphor-icons/react';
+
+<Meta of={stories} />
+
+# Tabs
+>Tabs lar brukerne navigere mellom relaterte deler av innholdet, der én del vises om gangen. Dette er en effektiv måte å organisere og presentere relatert innhold på samme side.
+
+## Kode
+- Legg klassen `tabs` på elementet `<ds-tabs>`
+- Bruk `aria-selected="true"` på fanen du ønsker skal være åpen når siden lastes
+- Bruk `aria-disabled="true"` på faner som ikke skal være klikkbare
+- **React?** Bruk `<Tabs>`, `<Tabs.List>`, `<Tabs.Tab>` og , `<Tabs.Panel>`
+
+<Details>
+<Details.Summary>Hva er `ds-tabs`?</Details.Summary>
+
+[ds-tabs](https://u-elements.github.io/u-elements/elements/ds-tabs) 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 også hente inn tilhørende HTMLElement interface ved behov:
+```
+import {
+  UHTMLTabsElement,
+  UHTMLTabElement,
+  UHTMLTabListElement,
+  UHTMLTabPanelElement
+} from '@mattilsynet/design'
+```
+</Details>
+
+
+<Canvas of={stories.Default} />
+
+## Skikk og bruk
+<Flex data-items="350">
+
+  {/* Tekstmengde i Tabs */}
+  <Example data-color="success" text="Bruk korte beskrivende tekster i Tabs." zoom="80%">
+    <ds-tabs class={styles.tabs}>
+      <ds-tablist>
+        <ds-tab role="tab" aria-selected="true"> Oversikt </ds-tab>
+        <ds-tab> Detaljer</ds-tab>
+        <ds-tab> Kontakter </ds-tab>
+      </ds-tablist>
+      <ds-tabpanel> </ds-tabpanel>
+      <ds-tabpanel> </ds-tabpanel>
+      <ds-tabpanel> </ds-tabpanel>
+    </ds-tabs>
+  </Example>
+
+  <Example data-color="danger" text="Unngå lange tekster i Tabs. Tekst over flere linjer er ikke brukervennlig. Husk at Tabs være utfordrende å bruke på mobil" zoom="80%">
+      <ds-tabs class={styles.tabs}>
+        <ds-tablist>
+          <ds-tab role="tab" aria-selected="true"> Oversikt over nylige hendelser </ds-tab>
+          <ds-tab> Detaljer </ds-tab>
+          <ds-tab> Kontakter </ds-tab>
+        </ds-tablist>
+        <ds-tabpanel> </ds-tabpanel>
+        <ds-tabpanel> </ds-tabpanel>
+        <ds-tabpanel> </ds-tabpanel>
+      </ds-tabs>
+  </Example>
+
+  {/* Kun ikon i Tabs */}
+  <Example data-color="success" text="Tabs med bare ikoner bør kun brukes i ekspertløsninger. Bruk tooltip sammen med ikon." zoom="80%">
+    <ds-tabs class={styles.tabs}>
+      <ds-tablist>
+        <ds-tab role="tab" aria-selected="true" data-tooltip="Oversikt"><SquaresFourIcon/></ds-tab>
+        <ds-tab data-tooltip="Detaljer"><ListMagnifyingGlassIcon /></ds-tab>
+        <ds-tab data-tooltip="Kontakter"><AddressBookTabsIcon /></ds-tab>
+      </ds-tablist>
+      <ds-tabpanel> </ds-tabpanel>
+      <ds-tabpanel> </ds-tabpanel>
+      <ds-tabpanel> </ds-tabpanel>
+    </ds-tabs>
+  </Example>
+
+  <Example data-color="danger" text="Tabs med bare ikoner skal ha tooltip." zoom="80%">
+      <ds-tabs class={styles.tabs}>
+        <ds-tablist>
+          <ds-tab role="tab" aria-selected="true"><SquaresFourIcon /></ds-tab>
+          <ds-tab><ListMagnifyingGlassIcon /></ds-tab>
+          <ds-tab><AddressBookTabsIcon /></ds-tab>
+        </ds-tablist>
+        <ds-tabpanel> </ds-tabpanel>
+        <ds-tabpanel> </ds-tabpanel>
+        <ds-tabpanel> </ds-tabpanel>
+      </ds-tabs>
+  </Example>
+</Flex>
+
+## Gjenbruke panel
+- Bruk `aria-controls="panel-ID"` for å gjenbruke samme panel for flere faner
+<Canvas of={stories.WithReusePanel} />
+
+## Størrelser
+- Bruk `data-size="sm | md | lg"`
+
+<Canvas of={stories.Sizes} />
+
+<CssVariables component="tabs" />

package/mtds/ai/tabs.stories.tsx

@@ -0,0 +1,159 @@
+import { PencilSimpleIcon } from "@phosphor-icons/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Card, Tabs } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Tabs",
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const decorators: Story["decorators"] = [
+	(Story) => (
+		<div className={`${styles.body} ${styles.grid}`} style={{ padding: "2em" }}>
+			<style>
+				{
+					"body:not(:has(.sbdocs-content)) { background: var(--ds-color-background-default) }"
+				}
+			</style>
+			<Story />
+		</div>
+	),
+];
+
+export const Default: Story = {
+	parameters: {
+		layout: "padded",
+	},
+	render: () => (
+		<ds-tabs class={styles.tabs}>
+			<ds-tablist>
+				<ds-tab aria-selected="true">Tab 1</ds-tab>
+				<ds-tab>Tab 2</ds-tab>
+				<ds-tab>
+					<PencilSimpleIcon />
+					Tab 3
+				</ds-tab>
+				<ds-tab>Tab with very long content</ds-tab>
+				<ds-tab>Tab with very long content</ds-tab>
+				<ds-tab>Tab with very long content</ds-tab>
+			</ds-tablist>
+			<ds-tabpanel>
+				Panel 1 with <a href="#none">link</a>
+			</ds-tabpanel>
+			<ds-tabpanel>
+				Panel 2 with <a href="#none">link</a>
+			</ds-tabpanel>
+			<ds-tabpanel>
+				Panel 3 with <a href="#none">link</a>
+			</ds-tabpanel>
+		</ds-tabs>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<Tabs>
+			<Tabs.List>
+				<Tabs.Tab aria-selected="true">Tab 1</Tabs.Tab>
+				<Tabs.Tab>Tab 2</Tabs.Tab>
+				<Tabs.Tab>Tab 3</Tabs.Tab>
+			</Tabs.List>
+			<Tabs.Panel>
+				Panel 1 with <a href="#none">link</a>
+			</Tabs.Panel>
+			<Tabs.Panel>
+				Panel 2 with <a href="#none">link</a>
+			</Tabs.Panel>
+			<Tabs.Panel>
+				Panel 3 with <a href="#none">link</a>
+			</Tabs.Panel>
+		</Tabs>
+	),
+};
+
+export const Sizes: Story = {
+	render: () => (
+		<ds-tabs class={styles.tabs} data-size="sm">
+			<ds-tablist>
+				<ds-tab aria-selected="true">Tab 1</ds-tab>
+				<ds-tab>Tab 2</ds-tab>
+				<ds-tab>Tab 3</ds-tab>
+			</ds-tablist>
+			<ds-tabpanel>
+				Panel 1 with <a href="#none">link</a>
+			</ds-tabpanel>
+			<ds-tabpanel>
+				Panel 2 with <a href="#none">link</a>
+			</ds-tabpanel>
+			<ds-tabpanel>
+				Panel 3 with <a href="#none">link</a>
+			</ds-tabpanel>
+		</ds-tabs>
+	),
+};
+
+export const WithReusePanel: Story = {
+	decorators,
+	render: () => (
+		<ds-tabs class={styles.tabs}>
+			<ds-tablist>
+				<ds-tab aria-controls="my-panel" aria-selected="true">
+					Tab 1
+				</ds-tab>
+				<ds-tab aria-controls="my-panel">Tab 2</ds-tab>
+				<ds-tab aria-controls="my-panel">Tab 3</ds-tab>
+			</ds-tablist>
+			<ds-tabpanel id="my-panel" className={styles.card}>
+				My panel is used for all tabs!
+			</ds-tabpanel>
+		</ds-tabs>
+	),
+};
+
+export const WithCardPanels: Story = {
+	decorators,
+	render: () => (
+		<ds-tabs class={styles.tabs}>
+			<ds-tablist>
+				<ds-tab aria-selected="true">Tab 1</ds-tab>
+				<ds-tab>Tab 2</ds-tab>
+				<ds-tab>Tab 3</ds-tab>
+			</ds-tablist>
+			<ds-tabpanel className={styles.card}>
+				Panel 1 with <a href="#none">link</a>
+			</ds-tabpanel>
+			<ds-tabpanel className={styles.card}>
+				Panel 2 with <a href="#none">link</a>
+			</ds-tabpanel>
+			<ds-tabpanel className={styles.card}>
+				Panel 3 with <a href="#none">link</a>
+			</ds-tabpanel>
+		</ds-tabs>
+	),
+};
+
+export const ReactWithCardPanels: Story = {
+	decorators,
+	render: () => (
+		<Tabs>
+			<Tabs.List>
+				<Tabs.Tab aria-selected="true">Tab 1</Tabs.Tab>
+				<Tabs.Tab>Tab 2</Tabs.Tab>
+				<Tabs.Tab>Tab 3</Tabs.Tab>
+			</Tabs.List>
+			<Card as={Tabs.Panel}>
+				Panel 1 with <a href="#none">link</a>
+			</Card>
+			<Card as={Tabs.Panel}>
+				Panel 2 with <a href="#none">link</a>
+			</Card>
+			<Card as={Tabs.Panel}>
+				Panel 3 with <a href="#none">link</a>
+			</Card>
+		</Tabs>
+	),
+};

package/mtds/ai/tag.mdx

@@ -0,0 +1,49 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Example, CssVariables } from '../../.storybook/blocks';
+import * as stories from './tag.stories';
+import { Flex, Prose } from '../react';
+import styles from '../styles.module.css';
+
+<Meta of={stories} />
+
+# Tag
+>Tags er merkelapper som kan brukes til å kategorisere elementer eller kommunisere fremdrift, status eller prosess. Tags kan gi brukeren et raskere overblikk over innholdet. Bruk tags når innholdet har mange kategorier og det er hensiktsmessig å kunne skille mellom dem. Tags er statiske merkelapper; de kan ikke klikkes på.
+
+## Kode
+- Bruk klassen `tag` på typisk `<span>`
+<Canvas of={stories.Default} />
+
+## Skikk og bruk
+<Flex data-items="350">
+  {/* Tekstmengde i tag: */}
+  <Example data-color="success" text="Bruk korte konsiste ord i tags" zoom="100%">
+    <span className={styles.tag} data-color="success">Hest</span>
+  </Example>
+
+  <Example data-color="danger" text="Unngå lange tekster i tags. Prøv å begrense til maks et par ord" zoom="100%">
+    <span className={styles.tag} data-color="danger">Araberhest - Equus caballus arabicus</span>
+  </Example>
+</Flex>
+
+## Størrelser
+- Bruk `data-size="sm | md | lg"`
+- `sm` er standard størrelse
+<Canvas of={stories.Sizes} />
+
+## Farger og ikon
+- Bruk `data-color="neutral | info | success | warning | danger"`
+- Ikon følger automatisk med farge, med mindre du legger inn `<svg>` eller `data-icon="none"`
+<Canvas of={stories.WithIcon} />
+
+## Egenvalgt ikon
+- Ikon forsvinner dersom du legger inn egen `<svg>` eller `data-icon="none"`
+- [Ikon fra phosphoricons.com](https://phosphoricons.com/) kan legges før tekst
+<Canvas of={stories.WithIconOverwrite} />
+
+## 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} />
+
+<CssVariables component="tag" />

package/mtds/ai/tag.stories.tsx

@@ -0,0 +1,111 @@
+import { ShrimpIcon } from "@phosphor-icons/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Tag } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Tag",
+	decorators: [
+		(Story) => (
+			<span className={styles.flex}>
+				<Story />
+			</span>
+		),
+	],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<>
+			<span className={styles.tag} data-color="neutral">
+				Neutral
+			</span>
+			<span className={styles.tag} data-color="info">
+				Info
+			</span>
+			<span className={styles.tag} data-color="success">
+				Success
+			</span>
+			<span className={styles.tag} data-color="warning">
+				Warning
+			</span>
+			<span className={styles.tag} data-color="danger">
+				Danger
+			</span>
+		</>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<>
+			<Tag data-color="neutral">Neutral</Tag>
+			<Tag data-color="info">Info</Tag>
+			<Tag data-color="success">Success</Tag>
+			<Tag data-color="warning">Warning</Tag>
+			<Tag data-color="danger">Danger</Tag>
+		</>
+	),
+};
+
+export const Sizes: Story = {
+	render: () => (
+		<>
+			<span className={styles.tag} data-size="sm">
+				Small
+			</span>
+			<span className={styles.tag} data-size="md">
+				Medium
+			</span>
+			<span className={styles.tag} data-size="lg">
+				Large
+			</span>
+		</>
+	),
+};
+
+export const WithIcon: Story = {
+	render: () => (
+		<>
+			<span className={styles.tag} data-color="info">
+				Info
+			</span>
+			<span className={styles.tag} data-color="success">
+				Success
+			</span>
+			<span className={styles.tag} data-color="warning">
+				Warning
+			</span>
+			<span className={styles.tag} data-color="danger">
+				Danger
+			</span>
+		</>
+	),
+};
+
+export const WithIconOverwrite: Story = {
+	render: () => (
+		<>
+			<span className={styles.tag} data-color="success">
+				<ShrimpIcon />
+				Reke
+			</span>
+			<span className={styles.tag} data-color="info" data-icon="none">
+				Alle felter må fylles ut
+			</span>
+		</>
+	),
+};
+
+export const WithTooltip: Story = {
+	render: () => (
+		<>
+			<span className={styles.tag} data-tooltip="Ikke original" tabIndex={0}>
+				Bekreftet kopi
+			</span>
+		</>
+	),
+};

package/mtds/ai/toast.mdx

@@ -0,0 +1,67 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Example, CssVariables } from '../../.storybook/blocks';
+import { Alert, Flex } from '../react';
+import styles from '../styles.module.css';
+import * as stories from './toast.stories';
+
+<Meta of={stories} />
+
+# Toast
+
+> Toasts gir korte oppdateringer om status.
+De skal ikke forstyrre brukeropplevelsen og kan forsvinne automatisk
+eller krysses ut.
+
+<Alert data-color="warning">Unngå bruk av toast da dette kan skape tilgjengelighetsproblemer<br />[Lær mer om hvorfor og alternativer til toast &rarr;](https://primer.style/accessibility/patterns/accessible-notifications-and-messages/#toasts)</Alert>
+
+## Kode
+- **Javascript:** Kall `toast(content: string, options)` fra `@mattilsynet/design`
+- **React:** Kall `toast(content: React.ReactNode, options)` fra `@mattilsynet/design/react`
+- **HTML:** Bruk klassen `toast` på `<dialog open data-timeout="milliseconds:  | false">`
+<Canvas of={stories.Default} />
+
+## Skikk og bruk
+<Flex data-items="350">
+  {/* Viser toast med lange navn: */}
+  <Example data-color="success" data-variant="false" text="Bruk en kort, generisk og beskrivende setning i toast som bekrefter en handling." zoom="80%">
+    <div className={styles.alert} data-color="success">
+            Dokumentet er lagret
+        </div>
+  </Example>
+  <Example data-color="danger" data-variant="false" text="Unngå lange setninger og innhold som er viktig for brukeren. Husk at det er anbefalt at toasten forsvinner automatisk." zoom="80%">
+        <div className={styles.alert} data-color="success">
+            Helsesertifikat-til-Storbritannia123.pdf har blitt lastet ned på din datamaskin. Husk å signere dokumentet og send det til mottaker i løpet av en uke.
+        </div>
+  </Example>
+</Flex>
+
+## Automatisk lukking
+- Toast skjules automatisk etter 3000 millisekunder nedtelling
+- Hvis brukeren holder musepekeren over toasten, pauses den automatiske nedtellingen
+- Du kan endre antall millisekunder, eller sette `false` får å gjøre toasten permanent
+- Bruk `toast(content, { timeout })` eller `data-timeout` i HTML for å endre timeout
+<Canvas of={stories.WithNoTimeout} />
+
+## Programatisk oppdatering
+- Funksjonen `toast()` returner en `id` som kan brukes for oppdateringer
+- Bruk `toast(content, { id })` for å oppdatere en toast
+<Canvas of={stories.WithUpdates} />
+
+## Lasting / Promise
+- Funksjonen `toast.promise()` kan brukes for å vise lasting, suksess og feil
+- Bruk `toast(promise, { loading, success, error })`
+<Canvas of={stories.WithPromise} />
+
+## Lukkekryss
+- Lukkekryss tegnes automatisk
+- Bruk `toast(content, { closedby: 'none' })` eller `closedby="none"` i HTML for å skjule
+- Bruk `command="close" commandfor="TOAST-ID"` en button inni for egendefinert lukke-knapp
+<Canvas of={stories.WithCustomClose} />
+
+## Farger
+- Støtter `main | info | success | warning | danger | neutral` (hvor `main` er default)
+- Ikon følger automatisk med farge, med mindre du setter `toast(content, { icon: false })` eller `data-icon="false"`
+- Bruk `toast.success`, `toast.danger`, `toast.info`, `toast.warning` eller `toast.neutral`, *eller* bruk `toast(content, { color })` eller `data-color` i HTML for å endre farge
+<Canvas of={stories.Colors} />
+
+<CssVariables component="toast" />