@mattilsynet/design 3.2.8 → 3.3.0

package/mtds/ai/logo.stories.tsx

@@ -0,0 +1,146 @@
+import { PlantIcon } from "@phosphor-icons/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Logo } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Logo",
+	parameters: {
+		layout: "fullscreen",
+	},
+	decorators: [
+		(Story) => (
+			<div className={styles.body} style={{ padding: "3em" }}>
+				<div className={`${styles.grid} demo-resize`} data-gap="8">
+					<Story />
+					<style>{`
+						html:not(:has(.sbdocs-content)) { background: var(--ds-color-background-default) }
+						html:has(.sbdocs-preview)::before { display: none } /* Hide environment bar in Storybook *
+						.demo-resize {
+							box-sizing: border-box;
+							border-radius: 2px;
+							box-sizing: border-box;
+							outline: 1px dashed transparent;
+							outline-offset: 5px;
+							overflow: hidden;
+							padding: 1em 1em 2em;
+							position: relative;
+							resize: horizontal;
+							
+							&:active,
+							&:hover { outline-color: currentColor }
+							&:ative::after,
+							&:hover::after { content: "Drag to resize →"; position: absolute; right: 1em; bottom: 0; white-space: nowrap }
+						}
+					`}</style>
+				</div>
+			</div>
+		),
+	],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => <a className={styles.logo} href="https://mattilsynet.no"></a>,
+};
+
+export const React: Story = {
+	render: () => (
+		<>
+			<Logo href="/" />
+			<Logo href="/">
+				Helse
+				<wbr />
+				sertifikat
+			</Logo>
+			<Logo as="h1" />
+			<Logo href="/" data-env="test">
+				Helse
+				<wbr />
+				sertifikat
+			</Logo>
+			<Logo href="/" data-env="test">
+				<PlantIcon weight="fill" />
+				Digiplant
+			</Logo>
+		</>
+	),
+};
+
+export const WithEnvironment: Story = {
+	render: () => <a className={styles.logo} href="/" data-env="test"></a>,
+};
+
+export const WithEnvironmentBlue: Story = {
+	render: () => (
+		<a className={styles.logo} href="/" data-env="dev" data-color="info"></a>
+	),
+};
+
+export const WithSubbrand: Story = {
+	render: () => (
+		<a className={styles.logo} href="/">
+			Helse
+			<wbr />
+			sertifikat
+		</a>
+	),
+};
+
+export const WithSubbrandEnglish: Story = {
+	render: () => (
+		<a className={styles.logo} href="/" lang="en">
+			Sanitary certificate status
+		</a>
+	),
+};
+
+export const WithSubbrandEnvironment: Story = {
+	render: () => (
+		<a className={styles.logo} href="/" lang="en" data-env="test">
+			Sanitary certificate status
+		</a>
+	),
+};
+
+export const WithSubbrandEnvironmentBlue: Story = {
+	render: () => (
+		<a
+			className={styles.logo}
+			href="/"
+			lang="en"
+			data-env="dev"
+			data-color="info"
+		>
+			Sanitary certificate status
+		</a>
+	),
+};
+
+export const WithAppIcon: Story = {
+	render: () => (
+		<a className={styles.logo} href="/">
+			<PlantIcon weight="fill" />
+			Digiplant
+		</a>
+	),
+};
+
+export const WithAppIconEnvironment: Story = {
+	render: () => (
+		<a className={styles.logo} href="/" data-env="test">
+			<PlantIcon weight="fill" />
+			Digiplant
+		</a>
+	),
+};
+export const WithAppIconEnvironmentBlue: Story = {
+	render: () => (
+		<a className={styles.logo} href="/" data-env="dev" data-color="info">
+			<PlantIcon weight="fill" />
+			Digiplant
+		</a>
+	),
+};

package/mtds/ai/pagination.mdx

@@ -0,0 +1,136 @@
+import { ArgTypes, Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Example, CssVariables, JumpTo } from '../../.storybook/blocks';
+import { Flex } from '../react';
+import * as stories from './pagination.stories';
+import { Details } from '../react';
+import styles from '../styles.module.css';
+
+<Meta of={stories} />
+
+# Pagination
+
+> Pagination er en liste med knapper som brukes for å navigere mellom ulike sider med innhold, for eksempel søkeresultater eller tabeller.
+
+<JumpTo />
+
+## Kode
+- Bruk klassen `pagination` på `<ds-pagination>`
+- Legg `<ul><li>` inni, med `<a class="button">` eller `<button type="button" class="button">`
+- Legg inn tom `<li>` der du ønsker ellipsis (&hellip;)
+- Legg `aria-current="page"` på valgt side
+- Legg `<a aria-disabled="true"` eller `<button disabled` for ugyldig forrige/neste
+<Details>
+  <Details.Summary>Se egne parameter for React</Details.Summary>
+<div>
+I React kan du velge å bruke `<Pagination>` med props for automatisk oppsett av elementer:
+<ArgTypes of={stories} />
+</div>
+</Details>
+<Canvas of={stories.WithLinks} />
+
+## Skikk og bruk
+<Flex data-items="700">
+
+   {/* Navngivning  */}
+  <Example data-color="success" text="Bruk korte og konsise ord som «Forrige» og «Neste»." zoom="100%">
+    <nav aria-label="Sidenavigering" className={styles.pagination}>
+        <ul>
+          <li>
+            <a href="?p=1" className={styles.button} aria-disabled="true">Forrige</a>
+          </li>
+          <li>
+            <a href="?p=1" className={styles.button} aria-current="page">1</a>
+          </li>
+          <li>
+            <a href="?p=2" className={styles.button}>2</a>
+          </li>
+          <li>
+            <a href="?p=3" className={styles.button}>3</a>
+          </li>
+          <li>
+            <a href="?p=4" className={styles.button}>4</a>
+          </li>
+          <li></li>
+          <li>
+            <a href="?p=10" className={styles.button}>10</a>
+          </li>
+          <li>
+            <a href="?p=2" className={styles.button}>Neste</a>
+          </li>
+        </ul>
+      </nav>
+  </Example>
+
+  <Example data-color="danger" text="Unngå bruk av «Forrige side», «Neste side», «Gå tilbake», «Gå videre», «Videre» og «Tilbake»." zoom="100%">
+    <nav aria-label="Sidenavigering" className={styles.pagination}>
+      <ul>
+        <li>
+          <a href="?p=1" className={styles.button} aria-disabled="true">Forrige side</a>
+        </li>
+        <li>
+          <a href="?p=1" className={styles.button} aria-current="page">1</a>
+        </li>
+        <li>
+          <a href="?p=2" className={styles.button}>2</a>
+        </li>
+        <li>
+          <a href="?p=3" className={styles.button}>3</a>
+        </li>
+        <li>
+          <a href="?p=4" className={styles.button}>4</a>
+        </li>
+        <li></li>
+        <li>
+          <a href="?p=10" className={styles.button}>10</a>
+        </li>
+        <li>
+          <a href="?p=2" className={styles.button}>Neste side</a>
+        </li>
+      </ul>
+    </nav>
+  </Example>
+
+</Flex>
+
+## Knapper
+- Bruk `<button type="button">` istedenfor `<a>` dersom du bygger en SPA
+<Canvas of={stories.WithButtons} />
+
+## Størrelser
+- Bruk `data-size="sm | md | lg"`
+<Canvas of={stories.Sizes} />
+
+## Varianter/farger
+- Bruk `data-variant="secondary | primary"`, hvor `secondary` er default
+- `data-variant="primary"` er nyttig når paginering ligger på grå bakgrunn
+<Canvas of={stories.Variants} />
+
+
+## Javascript-hjelper
+
+1. Bruk JS-hjelperen for å generere steg og tilhørende attributter:
+    ```tsx
+    import { pagination } from '@mattilsynet/design';
+
+    const { pages, next, prev } = pagination({
+      current: 1,
+      total: 20,
+      show: 7, // Optional, shows all if not proivded
+    })
+    ```
+2. Du får et hendig `object` i retur, som kan brukes til å generere HTML:
+    ```ts
+    {
+      prev: number; // Previous page, 0 if no previous
+      next: number; // Next page, 0 if no next
+      pages: Array<{
+        current: 'page' | false; // Value of `aria-current`
+        page: number;     // Page number or 0 if ellipsis
+        key: string;      // Unique child key for React/frameworks
+      }>
+    }
+    ```
+3. Eksempel på bruk i `React`:
+    <Canvas of={stories.WithHelper} />
+
+<CssVariables component="pagination" />

package/mtds/ai/pagination.stories.tsx

@@ -0,0 +1,404 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { pagination } from "../";
+import { Button, Pagination } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Pagination",
+	argTypes: {
+		current: {
+			description: "Nåværede side",
+			table: {
+				type: { summary: "number" },
+			},
+		},
+		total: {
+			description: "Totalt antall sider",
+			table: {
+				type: { summary: "number" },
+			},
+		},
+		show: {
+			description: "Maks antall tall/dotter som skal vises i paginasjonen",
+			table: {
+				defaultValue: { summary: "7" },
+				type: { summary: "number" },
+			},
+		},
+		props: {
+			description:
+				"Funksjon som lager props som skal legges på hver lenke/knapp",
+			table: {
+				type: {
+					summary: `({ page: number, type: "prev" | "next" | "page" }) => ({ ...props })`,
+					detail: `Eksempel: ({ page }) => ({ href: \`?p=\${page}\` })`,
+				},
+			},
+		},
+	},
+	decorators: [
+		(Story) => (
+			<div className={styles.grid} data-justify="center">
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithLinks: Story = {
+	render: () => (
+		<ds-pagination aria-label="Sidenavigering" className={styles.pagination}>
+			<ul>
+				<li>
+					<a href="?p=1" className={styles.button} aria-disabled="true">
+						Forrige
+					</a>
+				</li>
+				<li>
+					<a href="?p=1" className={styles.button} aria-current="page">
+						1
+					</a>
+				</li>
+				<li>
+					<a href="?p=2" className={styles.button}>
+						2
+					</a>
+				</li>
+				<li>
+					<a href="?p=3" className={styles.button}>
+						3
+					</a>
+				</li>
+				<li>
+					<a href="?p=4" className={styles.button}>
+						4
+					</a>
+				</li>
+				<li></li>
+				<li>
+					<a href="?p=10" className={styles.button}>
+						10
+					</a>
+				</li>
+				<li>
+					<a href="?p=2" className={styles.button}>
+						Neste
+					</a>
+				</li>
+			</ul>
+		</ds-pagination>
+	),
+};
+
+export const React: Story = {
+	render: () => {
+		const { pages, next, prev } = pagination({
+			current: 1,
+			total: 20,
+			show: 7,
+		});
+
+		return (
+			<>
+				Rendering using separate elements:
+				<Pagination>
+					<ul>
+						<li>
+							<Button href="?p=1" aria-disabled="true">
+								Forrige
+							</Button>
+						</li>
+						<li>
+							<Button href="?p=1" aria-current="page">
+								1
+							</Button>
+						</li>
+						<li>
+							<Button href="?p=2">2</Button>
+						</li>
+						<li>
+							<Button href="?p=3">3</Button>
+						</li>
+						<li>
+							<Button href="?p=4">4</Button>
+						</li>
+						<li></li>
+						<li>
+							<Button href="?p=10">10</Button>
+						</li>
+						<li>
+							<Button href="?p=2">Neste</Button>
+						</li>
+					</ul>
+				</Pagination>
+				<br />
+				Rendering using helper-function:
+				<Pagination>
+					<ul>
+						<li>
+							<Button
+								aria-disabled={!prev}
+								href={prev ? `?p=${prev}` : undefined}
+							>
+								Forrige
+							</Button>
+						</li>
+						{pages.map(({ current, key, page }) => (
+							<li key={key}>
+								{!!page && (
+									<Button aria-current={current} href={`?p=${page}`}>
+										{page}
+									</Button>
+								)}
+							</li>
+						))}
+						<li>
+							<Button
+								aria-disabled={!next}
+								href={next ? `?p=${next}` : undefined}
+							>
+								Neste
+							</Button>
+						</li>
+					</ul>
+				</Pagination>
+				<br />
+				Rendering buttons using props:
+				<Pagination
+					current={1}
+					show={7}
+					total={20}
+					props={({ page }) => ({ onClick: () => alert(page) })}
+				/>
+				<br />
+				Rendering links using props:
+				<Pagination
+					current={1}
+					show={7}
+					total={20}
+					props={({ page }) => ({ href: `?p=${page}` })}
+				/>
+			</>
+		);
+	},
+};
+
+export const WithButtons: Story = {
+	render: () => (
+		<ds-pagination className={styles.pagination}>
+			<ul>
+				<li>
+					<button type="button" className={styles.button} disabled>
+						Forrige
+					</button>
+				</li>
+				<li>
+					<button type="button" className={styles.button} aria-current="page">
+						1
+					</button>
+				</li>
+				<li>
+					<button type="button" className={styles.button}>
+						2
+					</button>
+				</li>
+				<li>
+					<button type="button" className={styles.button}>
+						3
+					</button>
+				</li>
+				<li>
+					<button type="button" className={styles.button}>
+						4
+					</button>
+				</li>
+				<li></li>
+				<li>
+					<button type="button" className={styles.button}>
+						10
+					</button>
+				</li>
+				<li>
+					<button type="button" className={styles.button}>
+						Neste
+					</button>
+				</li>
+			</ul>
+		</ds-pagination>
+	),
+};
+
+export const Sizes: Story = {
+	render: () => (
+		<>
+			<ds-pagination data-size="sm" className={styles.pagination}>
+				<ul>
+					<li>
+						<button type="button" className={styles.button} disabled></button>
+					</li>
+					<li>
+						<button type="button" className={styles.button} aria-current="page">
+							1
+						</button>
+					</li>
+					<li>
+						<button type="button" className={styles.button}>
+							2
+						</button>
+					</li>
+					<li>
+						<button type="button" className={styles.button}>
+							3
+						</button>
+					</li>
+				</ul>
+			</ds-pagination>
+			<ds-pagination data-size="md" className={styles.pagination}>
+				<ul>
+					<li>
+						<button type="button" className={styles.button} disabled></button>
+					</li>
+					<li>
+						<button type="button" className={styles.button} aria-current="page">
+							1
+						</button>
+					</li>
+					<li>
+						<button type="button" className={styles.button}>
+							2
+						</button>
+					</li>
+					<li>
+						<button type="button" className={styles.button}>
+							3
+						</button>
+					</li>
+				</ul>
+			</ds-pagination>
+			<ds-pagination data-size="lg" className={styles.pagination}>
+				<ul>
+					<li>
+						<button type="button" className={styles.button} disabled></button>
+					</li>
+					<li>
+						<button type="button" className={styles.button} aria-current="page">
+							1
+						</button>
+					</li>
+					<li>
+						<button type="button" className={styles.button}>
+							2
+						</button>
+					</li>
+					<li>
+						<button type="button" className={styles.button}>
+							3
+						</button>
+					</li>
+				</ul>
+			</ds-pagination>
+		</>
+	),
+};
+
+export const Variants: Story = {
+	render: () => (
+		<>
+			<ds-pagination data-variant="secondary" className={styles.pagination}>
+				<ul>
+					<li>
+						<button type="button" className={styles.button} disabled></button>
+					</li>
+					<li>
+						<button type="button" className={styles.button} aria-current="page">
+							1
+						</button>
+					</li>
+					<li>
+						<button type="button" className={styles.button}>
+							2
+						</button>
+					</li>
+					<li>
+						<button type="button" className={styles.button}>
+							3
+						</button>
+					</li>
+					<li>
+						<button type="button" className={styles.button}></button>
+					</li>
+				</ul>
+			</ds-pagination>
+			<ds-pagination data-variant="primary" className={styles.pagination}>
+				<ul>
+					<li>
+						<button type="button" className={styles.button} disabled></button>
+					</li>
+					<li>
+						<button type="button" className={styles.button} aria-current="page">
+							1
+						</button>
+					</li>
+					<li>
+						<button type="button" className={styles.button}>
+							2
+						</button>
+					</li>
+					<li>
+						<button type="button" className={styles.button}>
+							3
+						</button>
+					</li>
+					<li>
+						<button type="button" className={styles.button}></button>
+					</li>
+				</ul>
+			</ds-pagination>
+		</>
+	),
+};
+
+export const WithHelper: Story = {
+	render: () => {
+		const { pages, next, prev } = pagination({
+			current: 1,
+			total: 20,
+			show: 7,
+		});
+
+		return (
+			<Pagination>
+				<ul>
+					<li>
+						<Button
+							aria-disabled={!prev}
+							href={prev ? `?p=${prev}` : undefined}
+						>
+							Forrige
+						</Button>
+					</li>
+					{pages.map(({ current, key, page }) => (
+						<li key={key}>
+							{!!page && (
+								<Button aria-current={current} href={`?p=${page}`}>
+									{page}
+								</Button>
+							)}
+						</li>
+					))}
+					<li>
+						<Button
+							aria-disabled={!next}
+							href={next ? `?p=${next}` : undefined}
+						>
+							Neste
+						</Button>
+					</li>
+				</ul>
+			</Pagination>
+		);
+	},
+};