@mattilsynet/design 3.2.9 → 3.3.0

package/mtds/ai/atlas.mdx

@@ -0,0 +1,82 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { JumpTo, CssVariables } from '../../.storybook/blocks';
+import * as stories from './atlas.stories';
+import { Table, Popover } from '../react';
+import atlasCSS from './atlas.css?raw';
+
+<Meta of={stories} />
+
+# Atlas (Eksperimentell)
+
+> Atlas er et standardisert oppsett for presentasjon av kart.
+
+<JumpTo />
+<Popover id="pop-jsref" style={{ maxWidth: 500 }}>For eksempel via `document.getElementById` eller via `useRef` i React.</Popover>
+
+## Kode
+- Importer `import "@mattilsynet/design/atlas"` og bruk elementene<br />`<mtds-atlas>`, `<mtds-atlas-marker>` og `<mtds-atlas-matgeo>`
+- **React?** Importer `import { Atlas } from "@mattilsynet/design/atlas/react"` og bruk elementene `<Atlas>`, `<Atlas.Marker>` og `<Atlas.Matgeo>`. Husk `"use client"`
+- **Avansert bruk?** Du får tilgang til hele [Leaflet](https://leafletjs.com/) via `import { L } from "@mattilsynet/design/atlas"` eller `import { L } from "@mattilsynet/design/atlas/react"`
+- **Kartlag** leveres av [Kartverket](https://cache.kartverket.no/) for oppnå gjenkjennlige og presise norgeskart
+- **Karttegning** leveres av [Leaflet](https://leafletjs.com/) ([2.0.0@alpha.1](https://leafletjs.com/2025/05/18/leaflet-2.0.0-alpha.html)) i [EPSG:4326 koordinatsystem](https://epsg.io/4326)
+
+## Utsnitt
+- Bruk `data-view="lat, lng, zoom"` for å sette eller endre kartutsnitt
+- Bruk `data-view="fit"` for å få et utsnitt som viser alle markører
+- Du kan også hente Atlas elementet via JS (f.eks `document.getElementById` eller `useRef` i React) og kalle `atlasElement.setView([lat, lng, zoom])` eller `atlasElement.setView('fit')` for å endre utsnitt programatisk
+<Canvas of={stories.WithView} />
+
+## Kartlag
+- Bruk `data-tiles="gray | color"` for å endre kartlag
+<Canvas of={stories.WithColor} />
+
+## Markører
+- Legg elementer i `<mtds-atlas>` eller `<Atlas.Marker>` med `data-marker="lat, lng"`
+- Legg innhold inni for å gi markøren ikon eller tekst
+- Bruk `popovertarget="ID"` for å knytte en popover til markøren
+- Bruk `data-tooltip="TEKST"` for å legge til tooltip
+- Bruk `draggable` for å gjøre markøren flyttbar
+- Bruk `data-color` for å endre farge
+- Du kan style markører via CSS-variabler, enten individuelt eller satt på Atlas-elementet
+<Canvas of={stories.WithMarker} />
+
+## Clustering
+- Bruk `data-cluster="number"` for å aktivere clustring fra til et gitt zoom-nivå og utover
+- Bruk `data-cluster="true"` for clustering på alle zoomnivå. Dette er anbefalt dersom du kan ha datapunker på samme posisjon
+<Canvas of={stories.WithClustering} />
+
+## Popover
+- Legg et Popover element med `id` inni Atlas med ønsket innhold
+- Bruk `popovertarget="ID"` på markører eller matgeo for å tilknytte
+- Du kan også hente Atlas elementet via JS (f.eks `document.getElementById` eller `useRef` i React) og kalle `atlasElement.map.openPopup("content", [lat, lng])` for å åpne en popover programatisk. Dersom du kaller `atlasElement.map.openPopup("#ID", [lat, lng])`, vil popupen automatisk vise innholdet fra et annet element med gitt `ID`.
+<Canvas of={stories.WithPopover} />
+
+## Matgeo
+- Matgeo er Mattilsynets egne stedfestede data fra alle fagområder
+- Du kan vise Matgeo-data i Atlas ved å bruke `<mtds-atlas-matgeo>` eller `<Atlas.Matgeo>`
+- Bruk `data-collection="COLLECTION-ID"` for å velge collection
+  - Hvis du ikke setter en gyldig `COLLECTION-ID`, listes mulige collections i konsoll
+- Bruk `data-color` for å endre farge
+- Bruk `popovertarget="ID"` for å knytte en popover til matgeo
+- Lytt til `atlasfeatureclick` (eller `onFeatureClick` i React) for å fange opp klikk på matgeo
+- Bruk `await AtlasMatgeoElement.getCollection()` for å hente collection metadata
+- Bruk `await AtlasElement.getCollections()` for å hente alle collections
+<Canvas of={stories.WithMatgeo} />
+
+## WMS
+- WMS (web map service), er en åpen standard for utveksling av kartlag på tvers av kilder
+- Du kan vise WMS-lag fra f.eks [geonorge](https://kartkatalog.geonorge.no/) ved å bruke `<mtds-atlas-wma>` eller `<Atlas.WMS>`
+- Bruk `data-url="MATRIKKEL-URL-MED-PARAMETER"` for å hente karlag
+<Canvas of={stories.WithWMS} />
+
+## Klikk-for-markør
+- Bruk `data-cursor="pointer"` på `<mtds-atlas>` for å indikere at kartet er klikkbart
+- Lytt til `click`, og sjekk at `event.currentTarget === event.target` for å sikre at klikket skjedde på kartet og ikke en markør eller matgeo
+- Bruk `event.currentTarget.latLngFromPoint(event.clientX, event.clientY)` for å få lat/lng fra klikkpunktet
+<Canvas of={stories.WithClickToAddMarker} />
+
+## Uten scroll-zoom
+- Bruk `data-scroll-zoom="false"` for å deaktivere zooming med scroll-hjul
+<Canvas of={stories.WithoutScrollZoom} />
+
+<CssVariables component='atlas' css={atlasCSS} />

package/mtds/ai/atlas.stories.tsx

@@ -0,0 +1,424 @@
+import { MagnifyingGlassMinusIcon, StarIcon } from "@phosphor-icons/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useEffect, useRef, useState } from "react";
+import type { MTDSAtlasCollection, MTDSAtlasElement } from "../atlas";
+import {
+	Button,
+	Details,
+	Field,
+	Fieldset,
+	Flex,
+	Group,
+	Heading,
+	Popover,
+	Prose,
+	toast,
+} from "../react";
+import { Atlas, type AtlasMatgeoProps } from "../react-atlas";
+
+const meta = {
+	title: "Designsystem/Atlas",
+	parameters: {
+		layout: "padded",
+	},
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const LOREM_IPSUM =
+	"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque finibus dui id efficitur lobortis. Aliquam erat volutpat. Pellentesque imperdiet consectetur posuere. Donec ultrices libero eu velit egestas tincidunt. Suspendisse placerat risus non tellus faucibus, eu ultricies augue tempus. Donec vestibulum arcu diam, efficitur auctor lectus placerat vel. Nullam aliquam turpis vel mollis pharetra. Etiam eget pulvinar dui, imperdiet congue nisi. Nullam vel finibus risus. Ut sodales luctus odio quis interdum. Donec ligula quam, viverra vitae finibus a, bibendum quis odio. Quisque sodales erat volutpat condimentum maximus. Sed eget augue sed ligula congue hendrerit id sed turpis. Fusce nec leo fringilla, faucibus turpis a, tristique est. In ac semper libero, nec lacinia tellus.";
+
+export const Default: Story = {
+	parameters: {
+		showInOverview: false,
+	},
+	render: () => <mtds-atlas />,
+};
+
+export const React: Story = {
+	parameters: {
+		showInOverview: false,
+	},
+	render: () => <Atlas />,
+};
+
+export const WithView: Story = {
+	render: () => <Atlas data-view="63.431958, 10.397461, 12" />,
+};
+
+export const WithViewAdvanced: Story = {
+	render: function Render() {
+		const atlasRef = useRef<MTDSAtlasElement>(null);
+		const [open, setOpen] = useState<(typeof markers)[number]>();
+		const markers = [
+			{
+				latlng: "59.910815, 10.754078",
+				summary: "Oslo",
+				content: "Informasjon om Oslo",
+			},
+			{
+				latlng: "63.431958, 10.397461",
+				summary: "Trondheim",
+				content: "Informasjon om Trondheim",
+			},
+			{
+				latlng: "60.391449, 5.324119",
+				summary: "Bergen",
+				content: "Informasjon om Bergen",
+			},
+		];
+
+		return (
+			<Flex data-items="300" data-nowrap>
+				<Atlas ref={atlasRef} data-view={open ? `${open.latlng}, 14` : "fit"}>
+					{markers.map((marker) => (
+						<Atlas.Marker
+							key={marker.summary}
+							data-tooltip={marker.summary}
+							data-latlng={marker.latlng}
+							onClick={() => setOpen(marker)}
+						/>
+					))}
+				</Atlas>
+				<Group as={Prose} data-items="200" data-fixed>
+					{markers.map((marker) => (
+						<Details
+							key={marker.summary}
+							open={open?.summary === marker.summary}
+							name="place"
+						>
+							<Details.Summary onClick={() => setOpen(marker)}>
+								{marker.summary}
+							</Details.Summary>
+							<div>{marker.content}</div>
+						</Details>
+					))}
+					<Button onClick={() => setOpen(undefined)}>
+						<MagnifyingGlassMinusIcon /> Zoom ut
+					</Button>
+				</Group>
+			</Flex>
+		);
+	},
+};
+
+export const WithColor: Story = {
+	render: () => (
+		<mtds-atlas data-tiles="color" data-view="63.431958, 10.397461, 12" />
+	),
+};
+
+export const WithCustomSize: Story = {
+	render: () => (
+		<mtds-atlas style={{ width: "100%", height: "calc(100vh - 30px)" }} />
+	),
+};
+
+export const WithMarker: Story = {
+	render: () => (
+		<Atlas data-view="60.722, 10.989, 16">
+			<Atlas.Marker data-latlng="60.7223, 10.9861" aria-label="Min markør" />
+			<Atlas.Marker
+				data-color="info"
+				data-latlng="60.72235, 10.9837"
+				aria-label="Min markør med stjerne"
+			>
+				<StarIcon weight="fill" />
+			</Atlas.Marker>
+			<Atlas.Marker
+				data-latlng="60.7222, 10.988"
+				aria-label="Min markør med tekst"
+			>
+				A
+			</Atlas.Marker>
+		</Atlas>
+	),
+};
+export const WithMarkerStyling: Story = {
+	render: () => (
+		<Atlas data-view="60.722, 10.989, 16">
+			<Atlas.Marker
+				data-latlng="60.72235, 10.9837"
+				aria-label="Min markør rød"
+				data-color="danger"
+			/>
+			<Atlas.Marker
+				data-latlng="60.7223, 10.9861"
+				aria-label="Min markør styled"
+				style={
+					{
+						"--mtdsc-atlas-marker-size": "var(--mtds-10)",
+						"--mtdsc-atlas-marker-inset": "var(--mtds-2)",
+						"--mtdsc-atlas-marker-color": "var(--mtds-color-info-base-default)",
+						"--mtdsc-atlas-marker-border": "2px solid",
+						"--mtdsc-atlas-marker-background":
+							"var(--mtds-color-info-base-contrast-default)",
+						"--mtdsc-atlas-marker-background-outer":
+							"var(--mtds-color-info-base-default)",
+					} as React.CSSProperties
+				}
+			/>
+		</Atlas>
+	),
+};
+
+const getRandomCoordinates = (lat = 60.722, lng = 10.985) =>
+	Array.from({ length: 100 }, () => {
+		return `${lat + (Math.random() - 0.5) * 0.025}, ${lng + (Math.random() - 0.5) * 0.1}`;
+	});
+
+export const WithClustering: Story = {
+	render: () => (
+		<Atlas data-view={"60.722, 10.985, 12"} data-cluster="true">
+			{getRandomCoordinates().map((latlng, index) => (
+				<Atlas.Marker
+					aria-label={`Markør ${index + 1}`}
+					key={index.toString()}
+					data-latlng={latlng}
+					popoverTarget="my-cluster-popover"
+				/>
+			))}
+			<Popover id="my-cluster-popover">Popover</Popover>
+		</Atlas>
+	),
+};
+
+export const WithPopover: Story = {
+	render: () => (
+		<Atlas data-view="60.722, 10.985, 16">
+			<Atlas.Marker
+				aria-label="Markør 1"
+				data-latlng="60.722, 10.985"
+				popoverTarget="popover-1"
+			/>
+			<Atlas.Marker
+				aria-label="Markør 2"
+				data-latlng="60.721, 10.980"
+				popoverTarget="popover-2"
+			/>
+			<Popover id="popover-1">Popover 1</Popover>
+			<Popover id="popover-2">Popover 2</Popover>
+		</Atlas>
+	),
+};
+
+export const WithPopoverDynamic: Story = {
+	render: function Render() {
+		const [open, setOpen] = useState(-1);
+		const markers = [
+			{ latlng: "60.722, 10.985", popover: "Min nydelige popover" },
+			{
+				latlng: "60.721, 10.980",
+				popover: (
+					<Prose>
+						<Heading>Avansert popover</Heading>
+						<p>Innhold</p>
+					</Prose>
+				),
+			},
+		];
+
+		return (
+			<Atlas data-view="60.722, 10.985, 16">
+				{markers.map((marker, index) => (
+					<Atlas.Marker
+						aria-label={`Markør ${index + 1}`}
+						data-latlng={marker.latlng}
+						key={index.toString()}
+						onClick={() => setOpen(index)}
+						popoverTarget="my-popover"
+					/>
+				))}
+				<Popover id="my-popover">{markers[open]?.popover}</Popover>
+			</Atlas>
+		);
+	},
+};
+
+export const WithMatgeo: Story = {
+	render: () => {
+		const [content, setContent] = useState("");
+
+		return (
+			<Atlas data-view="60.722, 10.985, 16">
+				<Atlas.Matgeo
+					data-collection="bygg"
+					popoverTarget="my-matgeo-popover"
+					onFeatureClick={(event) => {
+						setContent(
+							JSON.stringify(
+								event.detail.targets.map((layer) => layer.feature?.properties),
+								null,
+								" ",
+							),
+						);
+					}}
+				/>
+				<Popover as={Prose} id="my-matgeo-popover">
+					<pre data-size="sm">{content}</pre>
+				</Popover>
+			</Atlas>
+		);
+	},
+};
+
+export const WithMatgeoToggle: Story = {
+	render: () => {
+		const atlasRef = useRef<MTDSAtlasElement>(null);
+		const colors = ["info", "success", "warning", "danger"] as const;
+		const [content, setContent] = useState("");
+		const [collections, setCollections] = useState<
+			(MTDSAtlasCollection & { hidden?: boolean })[]
+		>([]);
+
+		const handleFeatureClick: AtlasMatgeoProps["onFeatureClick"] = (event) => {
+			const targets = event.detail.targets;
+			const props = targets.map((layer) => layer.feature?.properties);
+			setContent(JSON.stringify(props, null, " "));
+		};
+
+		useEffect(() => {
+			atlasRef.current
+				?.getCollections()
+				.then((collections) => setCollections(Object.values(collections)));
+		}, []);
+
+		return (
+			<Flex data-nowrap data-items="300">
+				<Atlas ref={atlasRef} data-view="60.722, 10.985, 16">
+					{collections.map((collection, index) => (
+						<Atlas.Matgeo
+							hidden={collection.hidden}
+							key={collection.id}
+							data-collection={collection.id}
+							data-color={colors[index % colors.length]}
+							popoverTarget="my-matgeo-popover"
+							onFeatureClick={handleFeatureClick}
+						/>
+					))}
+					<Popover as={Prose} id="my-matgeo-popover">
+						<pre data-size="sm">{content}</pre>
+					</Popover>
+				</Atlas>
+				<Group data-fixed>
+					<Fieldset aria-label="Lag">
+						{collections.map((collection, index) => (
+							<Field
+								as="input"
+								type="checkbox"
+								key={collection.id}
+								data-color={colors[index % colors.length]}
+								checked={!collection.hidden}
+								label={collection.title}
+								onChange={() => {
+									const clone = collections.slice();
+									clone[index].hidden = !clone[index].hidden;
+									setCollections(clone);
+								}}
+							/>
+						))}
+					</Fieldset>
+				</Group>
+			</Flex>
+		);
+	},
+};
+
+export const WithWMS: Story = {
+	render: () => (
+		<Atlas data-view="63.431958, 10.397461, 16">
+			<Atlas.WMS data-url="https://wms.geonorge.no/skwms1/wms.matrikkel?request=GetMap&version=1.3.0&layers=matrikkel_WMS&format=image/png&transparent=true" />
+		</Atlas>
+	),
+};
+
+export const WithTooltip: Story = {
+	render: () => (
+		<Atlas data-view="60.722, 10.985, 16">
+			<Atlas.Marker data-latlng="60.722, 10.985" data-tooltip="Mitt tooltip" />
+		</Atlas>
+	),
+};
+
+export const WithClickToAddMarker: Story = {
+	render: function Render() {
+		const atlasRef = useRef<MTDSAtlasElement>(null);
+		const [markers, setMarkers] = useState<string[]>([]);
+
+		return (
+			<>
+				<Atlas
+					role="application"
+					ref={atlasRef}
+					data-cursor="pointer"
+					data-view="60.722, 10.985, 16"
+					onClick={({ currentTarget: atlas, clientX, clientY, target }) => {
+						if (atlas !== target) return; // Only add if clicking directly on map
+						const latlng = atlas.latLngFromPoint(clientX, clientY);
+						setMarkers([...markers, `${latlng?.lat}, ${latlng?.lng}`]);
+						toast(<code>{`${latlng}`}</code>);
+					}}
+				>
+					{markers.map((latlng, index) => (
+						<Atlas.Marker
+							key={index.toString()}
+							data-latlng={latlng}
+							aria-label={`Markør ${index + 1}`}
+							draggable
+							onClick={() => {
+								const clone = [...markers];
+								clone.splice(index, 1); // Remove marker
+								setMarkers(clone);
+							}}
+							onDragEnd={(event) => {
+								const clone = [...markers];
+								clone[index] = event.currentTarget.latlng;
+								setMarkers(clone);
+							}}
+						>
+							{index + 1}
+						</Atlas.Marker>
+					))}
+				</Atlas>
+				<ol>
+					<li>Klikk på kartet for å legge til markør</li>
+					<li>Dra markør for å flytte</li>
+					<li>Klikk på markør for å fjerne</li>
+				</ol>
+			</>
+		);
+	},
+};
+
+export const WithoutScrollZoom: Story = {
+	render: () => (
+		<Prose>
+			<p>{LOREM_IPSUM}</p>
+			<Atlas data-scrollzoom="false" />
+			<p>{LOREM_IPSUM}</p>
+		</Prose>
+	),
+};
+
+// export const WithGeoJSON: Story = {
+// 	render: () => {
+// 		const atlasRef = useRef<MTDSAtlasElement>(null);
+
+// 		useEffect(() => {
+// 			const map = atlasRef.current?.map;
+// 			const url =
+// 				"https://mattilsynet.avadaptive.dev/api/core/v1/ogc/features/collections/slammelding_spredeareal/items";
+
+// 			if (!map) return;
+// 			fetch(url)
+// 				.then((res) => res.json())
+// 				.then((data) => {
+// 					console.log(data);
+// 					L.geoJSON(data).addTo(map);
+// 				});
+// 		}, []);
+
+// 		return <Atlas ref={atlasRef} />;
+// 	},
+// };

package/mtds/ai/avatar.mdx

@@ -0,0 +1,45 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Example, CssVariables } from '../../.storybook/blocks';
+import * as stories from './avatar.stories';
+import styles from '../styles.module.css';
+import { EnvelopeIcon, UserIcon, FilePdfIcon } from '@phosphor-icons/react';
+import { Flex } from '../react';
+import avatar from "./avatar.jpg";
+
+<Meta of={stories} />
+
+# Avatar
+> Avatar er en komponent som viser et bilde, initialer eller ikon for en person, enhet eller profil.
+
+## Kode
+- Bruk klassen `avatar` på typisk `<span>` eller `<Avatar>` komponenten i React
+<Canvas of={stories.Default} />
+
+## Skikk og bruk
+
+<Flex data-items="350">
+  {/* Ikoner i Badge: */}
+  <Example data-color="success" text="Avatar kan inneholde tekst, bilde eller ikon som representerer en person eller enhet" zoom="100%">
+    <div className={styles.flex}>
+        <div className={styles.avatar}>MT</div>
+        <div className={styles.avatar}>
+            <img src={avatar} alt="Navn Navnesen" />
+        </div>
+        <div className={styles.avatar}>
+            <UserIcon aria-label="Navn Navnesen" />
+        </div>
+    </div>
+  </Example>
+  <Example data-color="danger" text="Ikke bruk avatar til å representere noe annet enn en person eller enhet, for eksempel et dokument." zoom="100%">
+    <div className={styles.avatar}>
+        <FilePdfIcon aria-label="PDF fil" />
+    </div>
+    
+  </Example>
+
+</Flex>
+
+## Sizes
+<Canvas of={stories.Sizes} />
+
+<CssVariables component="avatar" />

package/mtds/ai/avatar.stories.tsx

@@ -0,0 +1,109 @@
+import { UserIcon } from "@phosphor-icons/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Avatar } from "../react";
+import styles from "../styles.module.css";
+import avatar from "./avatar.jpg";
+
+const meta = {
+	title: "Designsystem/Avatar",
+	decorators: [
+		(Story) => (
+			<div className={styles.flex} data-align="center">
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<>
+			<div className={styles.avatar}>MT</div>
+			<div className={styles.avatar}>
+				<img src={avatar} alt="Navn Navnesen" />
+			</div>
+			<div className={styles.avatar}>
+				<UserIcon aria-label="Navn Navnesen" />
+			</div>
+		</>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<>
+			<Avatar>MT</Avatar>
+			<Avatar>
+				<img src={avatar} alt="Navn Navnesen" />
+			</Avatar>
+			<Avatar href="#">
+				<UserIcon aria-label="Navn Navnesen" />
+			</Avatar>
+		</>
+	),
+};
+
+export const Sizes: Story = {
+	render: () => (
+		<>
+			<div className={styles.avatar} data-size="xs">
+				XS
+			</div>
+			<div className={styles.avatar} data-size="sm">
+				SM
+			</div>
+			<div className={styles.avatar} data-size="md">
+				MD
+			</div>
+			<div className={styles.avatar} data-size="lg">
+				LG
+			</div>
+		</>
+	),
+};
+
+export const WithBadge: Story = {
+	render: () => (
+		<>
+			<div className={styles.badge}>
+				<div className={styles.avatar} data-size="xs">
+					<img src={avatar} alt="Navn Navnesen" />
+				</div>
+			</div>
+			<div className={styles.badge}>
+				<div className={styles.avatar} data-size="sm">
+					<img src={avatar} alt="Navn Navnesen" />
+				</div>
+			</div>
+			<div className={styles.badge}>
+				<a className={styles.avatar} data-size="md" href="#none">
+					<img src={avatar} alt="Navn Navnesen" />
+				</a>
+			</div>
+			<div className={styles.badge}>
+				<button type="button" className={styles.avatar} data-size="lg">
+					<img src={avatar} alt="Navn Navnesen" />
+				</button>
+			</div>
+		</>
+	),
+};
+
+export const InButton: Story = {
+	render: () => (
+		<>
+			<button type="button" className={styles.button}>
+				<div className={styles.avatar} data-size="xs">
+					NN
+				</div>
+				Navn Navnesen
+			</button>
+			<button type="button" className={styles.button}>
+				More buttons
+			</button>
+		</>
+	),
+};