@mattilsynet/design 3.2.8 → 3.3.0

package/mtds/ai/layout.stories.tsx

@@ -0,0 +1,443 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Fragment } from "react";
+import { Button, Flex, Grid } from "../react";
+import styles from "../styles.module.css";
+
+const gaps = [
+	0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 18, 22, 26, 30,
+];
+const meta = {
+	title: "Designsystem/Layout",
+	parameters: {
+		layout: "padded",
+	},
+	decorators: [
+		(Story) => (
+			<div className="mt-story">
+				<Story />
+				<style>{`
+					.mt-story:not(:has(.${styles.body.split(" ")[0]})) {
+						display: grid;
+						gap: 1rem;
+						padding: 1px;
+						
+						& b { display: flex; align-items: center; padding: .5em 1em; border: 1px solid; border-radius: var(--mtds-border-radius-md) }
+						& code { font-size: .875rem }
+						& div:not([class*="box"]) { outline: 1px dashed color-mix(in hsl, currentcolor 50%, transparent) }
+						& div[data-align-content] { height: 150px }
+					}
+				`}</style>
+			</div>
+		),
+	],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const FlexStory: Story = {
+	name: "Flex",
+	parameters: {
+		showInOverview: true,
+	},
+	render: () => (
+		<div className={styles.flex}>
+			<button type="button" className={styles.button} data-variant="primary">
+				Action 1
+			</button>
+			<button type="button" className={styles.button} data-variant="primary">
+				Action som er lengre 2
+			</button>
+			<button type="button" className={styles.button} data-variant="primary">
+				Action 3
+			</button>
+			<button type="button" className={styles.button} data-variant="primary">
+				Action 4
+			</button>
+			<button type="button" className={styles.button} data-variant="primary">
+				Action 5
+			</button>
+			<button type="button" className={styles.button} data-variant="primary">
+				Action 6
+			</button>
+		</div>
+	),
+};
+
+export const GridStory: Story = {
+	name: "Grid",
+	parameters: {
+		showInOverview: true,
+	},
+	render: () => (
+		<div className={styles.grid} data-gap="6">
+			<div className={styles.grid} data-items="auto">
+				<div>auto</div>
+				<div>auto</div>
+			</div>
+			<div
+				className={styles.grid}
+				data-gap="6"
+				style={{ gridTemplateColumns: "1fr 2fr" }}
+			>
+				<div>
+					Custom
+					<div className={styles.grid} data-items="100" data-gap="0">
+						<div>100</div>
+						<div>100</div>
+					</div>
+				</div>
+				<div className={styles.grid} data-items="300" data-gap="4">
+					<div>300</div>
+					<div className={styles.grid} data-items="100">
+						<div>100</div>
+						<div>100</div>
+						<div>100</div>
+						<div>100</div>
+						<div>100</div>
+						<div>100</div>
+					</div>
+					<div>300</div>
+					<div>300</div>
+				</div>
+			</div>
+		</div>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<>
+			<Flex>
+				<Button data-variant="primary">Action 1</Button>
+				<Button data-variant="primary">Action som er lengre 2</Button>
+				<Button data-variant="primary">Action 3</Button>
+				<Button data-variant="primary">Action 4</Button>
+				<Button data-variant="primary">Action 5</Button>
+				<Button data-variant="primary">Action 6</Button>
+			</Flex>
+			<Grid data-gap="6">
+				<Grid data-items="auto">
+					<div>auto</div>
+					<div>auto</div>
+				</Grid>
+				<Grid style={{ gridTemplateColumns: "1fr 2fr" }} data-gap="6">
+					<div>
+						Custom
+						<Grid data-items="100" data-gap="0">
+							<div>100</div>
+							<div>100</div>
+						</Grid>
+					</div>
+					<Grid data-items="300" data-gap="4">
+						<div>300</div>
+						<Grid data-items="100">
+							<div>100</div>
+							<div>100</div>
+							<div>100</div>
+							<div>100</div>
+							<div>100</div>
+							<div>100</div>
+						</Grid>
+						<div>300</div>
+						<div>300</div>
+					</Grid>
+				</Grid>
+			</Grid>
+		</>
+	),
+};
+
+export const Gap: Story = {
+	render: () => (
+		<section className={styles.grid} style={{ gridTemplateColumns: "1fr 2fr" }}>
+			{gaps.map((gap) => (
+				<Fragment key={gap}>
+					<code>data-gap="{gap}"</code>
+					<div className={styles.flex} data-gap={gap}>
+						<b>a</b>
+						<b>b</b>
+						<b>c</b>
+					</div>
+				</Fragment>
+			))}
+		</section>
+	),
+};
+
+export const Center: Story = {
+	parameters: {
+		layout: "fullscreen",
+	},
+	render: () => (
+		<>
+			<div className={styles.grid} data-center="sm">
+				sm (640px)
+			</div>
+			<div className={styles.grid} data-center="md">
+				md (768px)
+			</div>
+			<div className={styles.grid} data-center="lg">
+				lg (1024px)
+			</div>
+			<div className={styles.grid} data-center="xl">
+				xl (1280px)
+			</div>
+			<div className={styles.grid} data-center="2xl">
+				2xl (1536px)
+			</div>
+		</>
+	),
+};
+
+export const ItemSizes: Story = {
+	render: () => (
+		<>
+			<h2 className={styles.heading}>
+				Minimumsstørrelser Grid og Flex data-items:
+			</h2>
+			{[
+				25,
+				50,
+				75,
+				100,
+				125,
+				150,
+				175,
+				200,
+				225,
+				250,
+				275,
+				300,
+				325,
+				350,
+				375,
+				400,
+				425,
+				450,
+				475,
+				500,
+				525,
+				550,
+				575,
+				600,
+				"auto",
+				"full",
+			].map((i) => (
+				<div key={i}>
+					<div className={styles.flex} key={i} data-gap="3" data-fixed>
+						<div
+							data-self={i}
+							style={{
+								background: "var(--mtds-color-surface-tinted)",
+								whiteSpace: "nowrap",
+							}}
+						>
+							{i}
+						</div>
+					</div>
+				</div>
+			))}
+		</>
+	),
+};
+
+export const ItemFixed: Story = {
+	render: () => (
+		<>
+			<span>
+				Flex <code>data-items="100"</code> with <code>data-fixed</code> (does
+				not allow growing over <code>data-items</code> value):
+			</span>
+			<div className={styles.flex} data-items="100" data-fixed>
+				<div>a</div>
+				<div>b</div>
+				<div>c</div>
+				<div>d</div>
+			</div>
+			<span>
+				Flex <code>data-items="100"</code> without <code>data-fixed</code>{" "}
+				(allows items to grow):
+			</span>
+			<div className={styles.flex} data-items="100">
+				<div>a</div>
+				<div>b</div>
+				<div>c</div>
+				<div>d</div>
+			</div>
+			<span>
+				Grid <code>data-items="100"</code> with <code>data-fixed</code> (repeats
+				"fake" empty columns to align ish with <code>data-items</code>):
+			</span>
+			<div className={styles.grid} data-items="100" data-fixed>
+				<div>a</div>
+				<div>b</div>
+				<div>c</div>
+				<div>d</div>
+			</div>
+			<span>
+				Grid <code>data-items="100"</code> without <code>data-fixed</code>{" "}
+				(fills grid with actual columns):
+			</span>
+			<div className={styles.grid} data-items="100">
+				<div>a</div>
+				<div>b</div>
+				<div>c</div>
+				<div>d</div>
+			</div>
+		</>
+	),
+};
+
+export const Align: Story = {
+	render: () => (
+		<section
+			className={styles.grid}
+			data-align="center"
+			data-gap="6"
+			style={{ gridTemplateColumns: "1fr 2fr" }}
+		>
+			<code>data-align="stretch"</code>
+			<div className={styles.flex} data-align="stretch">
+				<b data-size="sm">Small</b>
+				<b data-size="md">Medium</b>
+				<b data-size="lg">Large</b>
+			</div>
+			<code>data-align="start"</code>
+			<div className={styles.flex} data-align="start">
+				<b data-size="sm">Small</b>
+				<b data-size="md">Medium</b>
+				<b data-size="lg">Large</b>
+			</div>
+			<code>data-align="center"</code>
+			<div className={styles.flex} data-align="center">
+				<b data-size="sm">Small</b>
+				<b data-size="md">Medium</b>
+				<b data-size="lg">Large</b>
+			</div>
+			<code>data-align="end"</code>
+			<div className={styles.flex} data-align="end">
+				<b data-size="sm">Small</b>
+				<b data-size="md">Medium</b>
+				<b data-size="lg">Large</b>
+			</div>
+		</section>
+	),
+};
+
+export const Justify: Story = {
+	render: () => (
+		<section
+			className={styles.grid}
+			data-align="center"
+			data-gap="6"
+			style={{ gridTemplateColumns: "1fr 2fr" }}
+		>
+			<code>data-justify="start"</code>
+			<div className={styles.flex} data-justify="start">
+				<b>Box</b>
+				<b>Box</b>
+				<b>Box</b>
+			</div>
+			<code>data-justify="center"</code>
+			<div className={styles.flex} data-justify="center">
+				<b>Box</b>
+				<b>Box</b>
+				<b>Box</b>
+			</div>
+			<code>data-justify="end"</code>
+			<div className={styles.flex} data-justify="end">
+				<b>Box</b>
+				<b>Box</b>
+				<b>Box</b>
+			</div>
+			<code>data-justify="space-between"</code>
+			<div className={styles.flex} data-justify="space-between">
+				<b>Box</b>
+				<b>Box</b>
+				<b>Box</b>
+			</div>
+			<code>data-justify="space-around"</code>
+			<div className={styles.flex} data-justify="space-around">
+				<b>Box</b>
+				<b>Box</b>
+				<b>Box</b>
+			</div>
+			<code>data-justify="space-evenly"</code>
+			<div className={styles.flex} data-justify="space-evenly">
+				<b>Box</b>
+				<b>Box</b>
+				<b>Box</b>
+			</div>
+			<span>
+				<code>.grid</code> +<br />
+				<code>data-justify="center"</code>
+			</span>
+			<div className={styles.grid} data-justify="center">
+				<b>Box Box</b>
+				<b>Box Box Box</b>
+				<b>Box</b>
+			</div>
+		</section>
+	),
+};
+
+export const AlignContent: Story = {
+	render: () => (
+		<section
+			className={styles.grid}
+			data-items="200"
+			data-gap="6"
+			style={{ maxWidth: 700 }}
+		>
+			<article>
+				<code>start</code>
+				<div className={styles.flex} data-align-content="start">
+					<b>Box</b>
+					<b>Box</b>
+					<b>Box</b>
+				</div>
+			</article>
+			<article>
+				<code>center</code>
+				<div className={styles.flex} data-align-content="center">
+					<b>Box</b>
+					<b>Box</b>
+					<b>Box</b>
+				</div>
+			</article>
+			<article>
+				<code>end</code>
+				<div className={styles.flex} data-align-content="end">
+					<b>Box</b>
+					<b>Box</b>
+					<b>Box</b>
+				</div>
+			</article>
+			<article>
+				<code>space-between</code>
+				<div className={styles.flex} data-align-content="space-between">
+					<b>Box</b>
+					<b>Box</b>
+					<b>Box</b>
+				</div>
+			</article>
+			<article>
+				<code>space-around</code>
+				<div className={styles.flex} data-align-content="space-around">
+					<b>Box</b>
+					<b>Box</b>
+					<b>Box</b>
+				</div>
+			</article>
+			<article>
+				<code>space-evenly</code>
+				<div className={styles.flex} data-align-content="space-evenly">
+					<b>Box</b>
+					<b>Box</b>
+					<b>Box</b>
+				</div>
+			</article>
+		</section>
+	),
+};

package/mtds/ai/link.mdx

@@ -0,0 +1,45 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Example, CssVariables } from '../../.storybook/blocks';
+import { Button } from '../react';
+import * as stories from './link.stories';
+import { Flex, Prose } from '../react';
+import styles from '../styles.module.css';
+
+<Meta of={stories} />
+
+# Link
+> Link er klikkbar tekst eller grafikk, som gjør det enkelt for brukerne å navigere til filer eller interne- og eksterne sider.
+
+## Kode
+- `<a>` får automatisk lenkestil
+- Lenker burde alltid være `<a>` for å oppnå god universell utforming
+- Bruk klassen `link` om du mot formodning trenger lenkestil på andre element
+- **Mønster:** [Se mønster for merking av eksterne lenker](https://www.designsystemet.no/no/patterns/external-links)
+
+<Canvas of={stories.Default} />
+
+## Skikk og bruk
+<Flex data-items="350">
+
+   {/* Lenker som CTA: */}
+  <Example data-color="success" text="Lenker brukes til å navigere eller laste ned innhold." zoom="100%">
+    
+    <a href="https://www.mattilsynet.no/">Mattilsynet</a> er et statlig tilsyn
+            og direktorat som har som visjon å trygge framtiden for mennesker, dyr og
+            natur.
+  
+
+  </Example>
+
+  <Example data-color="danger" text="Ikke bruk lenker til å utføre handlinger (call to action). Bruk heller Button-komponenten." zoom="100%">
+   
+        
+    Skjemaet er ferdig utfylt. <a href="https://www.mattilsynet.no/">Trykk her for å sende inn</a>
+
+  </Example>
+
+</Flex>
+
+
+
+<CssVariables component="link" />

package/mtds/ai/link.stories.tsx

@@ -0,0 +1,44 @@
+import { HeartIcon } from "@phosphor-icons/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Link } from "../react";
+
+const meta = {
+	title: "Designsystem/Link",
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<>
+			<a href="https://www.mattilsynet.no/">Mattilsynet</a> er et statlig tilsyn
+			og direktorat som har som visjon å trygge framtiden for mennesker, dyr og
+			natur.
+		</>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<>
+			<a href="https://www.mattilsynet.no/">Mattilsynet</a> er et statlig tilsyn
+			og direktorat som har som visjon å trygge framtiden for mennesker, dyr og
+			natur.{" "}
+			<Link as="button" type="button">
+				Button om ser ut som lenke
+			</Link>
+		</>
+	),
+};
+
+export const WithIcon: Story = {
+	render: () => (
+		<>
+			<a href="https://www.mattilsynet.no/">
+				Mattilsynet <HeartIcon />
+			</a>{" "}
+			trygger framtiden for mennesker, dyr og natur.
+		</>
+	),
+};

package/mtds/ai/logo.mdx

@@ -0,0 +1,86 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Details } from '../react';
+import { Example, CssVariables } from '../../.storybook/blocks';
+import { Flex } from '../react';
+import * as stories from './logo.stories';
+import styles from '../styles.module.css';
+
+
+<Meta of={stories} />
+
+# Logo
+> Mattilsynet har logoer som er spesialutviklet for definerte bruksområder i våre digitale løsninger. Her finner du alle tilgjengelige varianter
+
+## Kode
+- Legg klassen `logo` på typisk `<h1>` eller `<a>`
+- Teksten "Mattilsynet" blir automatisk lagt inn for skjermlesere
+- Logo følger tekststørrelse og tekstfarge
+- Ved lite plass blir tekst visuelt
+
+<Details>
+<Details.Summary>Opplever at logoen bare blir en firkant i Next.js eller Tailwind?</Details.Summary>
+
+Noen versjoner av [Autoprefixer](https://github.com/postcss/autoprefixer) er vell ivrig på å prefixe `mask`.
+Det er dessverre lite å gjøre med i `@mattilsynet/design`, men du kan fikse dette igjen ved å sette:
+```html
+style="-webkit-mask-box-image: none"
+```
+
+
+</Details>
+
+<Canvas of={stories.Default} />
+
+## Skikk og bruk
+<Flex data-items="350">
+
+   {/* Logofarger */}
+  <Example data-color="success" text="Logo skal kun brukes i fargene som er definert i designsystemet." zoom="100%">
+    
+    <a className={styles.logo} href="https://mattilsynet.no"></a>
+  
+  
+  </Example>
+
+  <Example data-color="danger" text="Ikke bruk Mattilsynets logo med andre farger enn definert i designsystemet." zoom="100%">
+      
+    <a style={{ color: 'purple' }} className={styles.logo} href="https://mattilsynet.no"></a>
+
+  </Example>
+
+</Flex>
+
+## App logo
+- Applikasjonsnavn i Mattilsynet følger [språkrådets retningslinjer for statlige navn](https://sprakradet.no/stedsnavn-og-navn-pa-statsorgan/veiledning-om-valg-av-navn-i-staten/krav-til-og-rad-om-selve-navnet/)
+- Legg en `<svg>` fra [phosphoricons.com](https://phosphoricons.com) i `filled` variant som første barn
+- Legg appnavn inn i `logo` som tekst
+- Applogo endrer automatisk favion
+<Canvas of={stories.WithAppIcon} />
+
+## App logo med teknisk miljø
+- Bruk `data-color="orange | blue"` på `logo` for å få en distinkt fargeendring
+- Bruk `data-env="MILJØNAVN"` for å indikere teknisk kjøremiljø
+<Canvas of={stories.WithAppIconEnvironment} />
+
+## Undermerke
+- Legg tekst inn i `logo` for å lage et undermerke
+- Bruk `<wbr />` dersom du ønsker at et ord skal kunne brekke i flere deler, eksempel: `Helse&shy;sertifikat`
+<Canvas of={stories.WithSubbrand} />
+
+## Undermerke på engelsk
+- Logo blir engelsk dersom du setter `<html lang="en">`
+<Canvas of={stories.WithSubbrandEnglish} />
+
+## Favicon
+- For å støtte dark mode og eldre Safari, bruker vi flere favicon-filer (<a href="/favicon.svg" download>svg</a>, <a href="/favicon.ico" download>ico</a> og <a href="/favicon-dark.ico" download>ico dark</a>)
+- Disse er tilgjengelig via `@mattilsynet/design/favicon.[svg|ico]`
+- **Merk:** App-logo endrer automatisk på favicon ([utenom i Safari som ikke støtter dette](https://bugs.webkit.org/show_bug.cgi?id=95979#c2))
+```html
+<head>
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+  <link rel="icon" href="/favicon.ico" media="(prefers-color-scheme: light)" />
+  <link rel="icon" href="/favicon-dark.ico" media="(prefers-color-scheme: dark)" />
+</head>
+```
+
+<CssVariables component="logo" />