@mattilsynet/design 3.2.9 → 3.3.0

package/mtds/ai/alert.mdx

@@ -0,0 +1,63 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { CssVariables, Example } from '../../.storybook/blocks';
+import { Flex } from '../react';
+import styles from '../styles.module.css';
+import * as stories from './alert.stories';
+
+<Meta of={stories} />
+
+# Alert
+> Alert tiltrekker brukerens oppmerksomhet til viktige opplysninger og varsler. Komponenten har flere varianter du kan bruke for å tilpasse den til budskapet i varselet.
+
+## Kode
+- Legg klassen `alert` på `<output>` eller `<div>` eller bruk `<Alert>` komponenten i React
+- Bruk `<div role="alert">` ved kritiske feil og `<output>` ved andre varsel
+<Canvas of={stories.Default} />
+
+## Skikk og bruk
+<Flex data-items="350">
+
+  <Example data-color="success" text="Skriv kort og konsist i alerts" zoom="100%">
+    <output className={styles.alert}>
+        Det er lange køer for å bestille pass om dagen, det kan være lurt å bestille i god tid før du skal reise.
+    </output>
+  </Example>
+  <Example data-color="danger" text="Unngå lange tekster i alerts" zoom="100%">
+    <output className={styles.alert}>
+        For å ivareta en helhetlig oppfølging av innbyggere som mottar flere typer offentlige tjenester, 
+        har vi opprettet et eget koordinerende team som inkluderer representanter fra helse, sosial, NAV og teknisk etat. 
+        Hensikten er å etablere et samlet kontaktpunkt for brukere med sammensatte behov, 
+        slik at de slipper å navigere mellom ulike kontorer og etater på egen hånd. 
+        I praksis betyr dette at en brukers sak kan drøftes i fellesmøter der alle relevante fagpersoner er til stede, 
+        noe som gir bedre informasjonsflyt og mer tilpassede løsninger. 
+        Et typisk eksempel kan være en person med nedsatt funksjonsevne og mangelfull boligtilpasning, 
+        som samtidig har behov for sosialhjelp og helsetjenester. 
+        Tidligere ville vedkommende måtte oppsøke NAV for økonomisk støtte, 
+        eget kontor for ergoterapi og enda en avdeling for kommunale boligtjenester. 
+        Resultatet ble ofte ulike vedtak som ikke henger sammen, og tidkrevende oppfølging. 
+    </output>
+  </Example>
+</Flex>
+
+## Farger og ikon
+- Bruk `data-color="info | success | warning | danger | neutral"`
+<Canvas of={stories.Colors} />
+
+## Størrelser
+- Bruk `data-size="sm | md | lg"`
+<Canvas of={stories.Sizes} />
+
+## Med tittel
+- Legg `h2`, `h3` eller `h4` som første element
+<Canvas of={stories.WithTitle} />
+
+## Med lukkeknapp
+- Legg en tom `<button type="button" aria-label="Lukk">` som siste element
+<Canvas of={stories.WithClose} />
+
+## Med knapper
+- Legg en `flex` med knapper inni
+- Det er valgfritt om første knapp skal være `primary` eller `secondary`
+<Canvas of={stories.WithButtons} />
+
+<CssVariables component="alert" />

package/mtds/ai/alert.stories.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Alert } from "../react";
+import styles from "../styles.module.css";
+
+const meta = {
+	title: "Designsystem/Alert",
+	decorators: [
+		(Story) => (
+			<div className={styles.grid}>
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<output className={styles.alert}>
+			Info ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in
+			tincidunt ipsum. Morbi et consequat felis, quis finibus quam.
+		</output>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<Alert>
+			Info ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in
+			tincidunt ipsum. Morbi et consequat felis, quis finibus quam.
+		</Alert>
+	),
+};
+
+export const Colors: Story = {
+	render: () => (
+		<>
+			<output className={styles.alert}>
+				Info ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in
+				tincidunt ipsum. Morbi et consequat felis, quis finibus quam.
+			</output>
+			<output className={styles.alert} data-color="success">
+				Success ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in
+				tincidunt ipsum. Morbi et consequat felis, quis finibus quam.
+			</output>
+			<output className={styles.alert} data-color="warning">
+				Warning ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in
+				tincidunt ipsum. Morbi et consequat felis, quis finibus quam.
+			</output>
+			<div role="alert">
+				<div className={styles.alert} data-color="danger">
+					Danger ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in
+					tincidunt ipsum. Morbi et consequat felis, quis finibus quam.
+				</div>
+			</div>
+			<output className={styles.alert} data-color="neutral">
+				Neutral ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in
+				tincidunt ipsum. Morbi et consequat felis, quis finibus quam.
+			</output>
+		</>
+	),
+};
+
+export const Sizes: Story = {
+	render: () => (
+		<>
+			<output className={styles.alert} data-size="sm">
+				Info ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in
+				tincidunt ipsum. Morbi et consequat felis, quis finibus quam.
+			</output>
+			<output className={styles.alert} data-size="md">
+				Info ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in
+				tincidunt ipsum. Morbi et consequat felis, quis finibus quam.
+			</output>
+			<output className={styles.alert} data-size="lg">
+				Info ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in
+				tincidunt ipsum. Morbi et consequat felis, quis finibus quam.
+			</output>
+		</>
+	),
+};
+
+export const WithTitle: Story = {
+	render: () => (
+		<output className={styles.alert}>
+			<h2>Har du husket å bestille passtime?</h2>
+			<p>
+				Det er lange køer for å bestille pass om dagen, det kan være lurt å
+				bestille i god tid før du skal reise.
+			</p>
+		</output>
+	),
+};
+
+export const WithClose: Story = {
+	render: () => (
+		<output className={styles.alert}>
+			<h2>Har du husket å bestille passtime?</h2>
+			<p>
+				Det er lange køer for å bestille pass om dagen, det kan være lurt å
+				bestille i god tid før du skal reise.
+			</p>
+			<button type="button" aria-label="Lukk"></button>
+		</output>
+	),
+};
+
+export const WithButtons: Story = {
+	render: () => (
+		<output className={styles.alert}>
+			<h2>Har du husket å bestille passtime?</h2>
+			<p>
+				Det er lange køer for å bestille pass om dagen, det kan være lurt å
+				bestille i god tid før du skal reise.
+			</p>
+			<div className={styles.flex}>
+				<a href="#none" className={styles.button} data-variant="secondary">
+					Prøv igjen
+				</a>
+				<a href="#none" className={styles.button}>
+					Kontakt oss
+				</a>
+			</div>
+		</output>
+	),
+};

package/mtds/ai/analytics.mdx

@@ -0,0 +1,185 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { ChartBarIcon } from '@phosphor-icons/react';
+import { JumpTo } from '../../.storybook/blocks';
+import { Alert, Button, Popover, Prose, Details, Table } from '../react';
+import { HeartIcon } from '@phosphor-icons/react';
+
+<Meta title="Designsystem/Analyse" />
+# <ChartBarIcon /> Analyse
+
+> Å forstå bruksmønster er viktig for å kunne forbedre og videreutvikle Mattilsynet tjenester.
+> For å ivareta personvern og sikre at bruksdata kan forstås likt på tvers av tjenester, har vi en felles analysestandard.
+
+<JumpTo />
+
+{/* https://matomo.org/faq/tag-manager/how-to-use-the-clicked-data-attribute-variable/ */}
+
+## Oppsett
+- Bruk funksjonen `analytics` for å logge til [Mattilsynets analyseverktøy](https://mattilsynet.matomo.cloud/)
+- Hver applikasjon trenger en `matomoId` - dette har teamet, eller dere kan [be om å få en](https://mattilsynet-hq.slack.com/archives/C03FAJ7N1EU)
+- Husk å sette `enabled: false` for test-miljøer (`localhost` er *default* av)
+- Husk å sette `consent: 'custom'` dersom du har implementert eget [samtykkebanner](https://www.datatilsynet.no/personvern-pa-ulike-omrader/internett-og-apper/bruk-av-informasjonskapsler-og-andre-sporingsteknologier/)
+- **Køsystem:** Hvis `init` ikke er kjørt, vil alle `analytics`-kall legges i kø og vente på `init`
+- **React?** Husk `"use client"` i filer som bruker `analytics`
+- **Sette opp analyse for første gang?** [Snakk med oss i designsystem](https://mattilsynet-hq.slack.com/archives/C03FAJ7N1EU), så hjelper vi til <HeartIcon style={{ verticalAlign: -3 }} />
+
+<Details>
+<Details.Summary>Hva gjør `analytics` som jeg ikke får ved å bruke Matomo direkte?</Details.Summary>
+
+Mattilsynet bruker for tiden [Matomo](https://matomo.org/) som analyseverktøy, og `analytics` er en wrapper rundt Matomos [JavaScript API](https://developer.matomo.org/guides/tracking-javascript-guide). Dette gir oss: 
+- en felles standard for hvordan vi logger data
+- en felles [melding om informasjonskapsler i henhold til Ekomloven](https://www.datatilsynet.no/personvern-pa-ulike-omrader/internett-og-apper/bruk-av-informasjonskapsler-og-andre-sporingsteknologier/8.-bruk-klare-og-enkle-formuleringer-i-knapper-eller-tilsvarende-losninger/)
+- automatisk [logging av en rekke hendelser](#automatisk-analyse)
+- automatisk [logging av utgående lenker og nedlastingsknapper](https://developer.matomo.org/guides/tracking-javascript-guide#download-and-outlink-tracking)
+- deaktivert [heatmap and session recording](https://developer.matomo.org/guides/heatmap-session-recording/setup) fordi dette krever samtykke ([kan overstyres](#matomo-funksjoner))
+- mulighet for å enkelt bytte ut Matomo eller legge til flere analysetjenester på sikt
+
+</Details>
+
+```
+import { analytics } from '@mattilsynet/design';
+
+analytics('init', {
+  matomoId: string | number,   // Required (if no matomoTagManagerId): Your site ID
+  matomoTagManagerId: string,  // Required (if no matomoId): Your container ID
+  enabled?: boolean | 'debug', // 'debug' console.logs only, default is true unless localhost
+  consent?: 'custom' | true, // Use 'custom' if you have implemented your own cookie consent
+});
+```
+
+## Sidevisninger
+- Send en `pageview` hver gang en side laster
+- **Single Page Application?** Send også `pageview` ved navigering - <Button data-popover="inline" popoverTarget="example-react-router">se eksempel med react router</Button>
+
+```
+analytics('pageview', {
+  title?: string, // Optional: document.title is default
+  url?: string,   // Optional: location.href is default
+});
+```
+
+<Popover id="example-react-router">
+<Prose>
+**Eksempel med React Router:**
+```TSX
+function MyApp (){
+  return (
+    <BrowserRouter>
+      <TrackPageview />
+      {/* YOUR ROUTES HERE */}
+    </BrowserRouter>
+  );
+}
+
+function TrackPageview() {
+  const location = useLocation();
+  useEffect(() => analytics('pageview'), [location]);
+  return null;
+}
+```
+</Prose>
+</Popover>
+
+## Hendelser
+- Send en `event` når du ønsker å lære om brukerens adferd
+- Dette kan være f.eks. ved scroll, filtering, trykk, etc
+- Husk å aldri sende inn personopplysninger
+
+```
+analytics('event', {
+  category: string, // Required: The category of the event, e.g., 'video', 'link', 'form'
+  action: string,   // Required: The action performed, e.g., 'play', 'click', 'submit'
+  name?: string,    // Optional: The name of the item interacted with, e.g., video title, form name
+  value?: number,   // Optional: A numeric value associated with the event, e.g., product price, video completion percentage
+});
+```
+
+## Automatisk analyse
+- Ved å benytte `analytics`, loggføres `submit`, `click` og `change` hendelser automatisk
+- Bruk `data-analytics="ignore"` på elementer (eller foreldre til elementer) for å deaktivere logging på et element
+- Bruk `data-analytics-category`,  `data-analytics-action` og/eller `data-analytics-name`  på elementer hvis du ønsker å overstyre standardverdier - <Button data-popover="inline" popoverTarget="example-data-attributes">se eksempler</Button>
+- **Merk:** `data-analytics-category` satt på `form` arves automatisk av alle skjema elementer, så du slipper å sette kategori på hvert enkelt input
+- **Merk:** `submit` vil kun fungere dersom du benytter standard `<form>` element
+
+<Popover id="example-data-attributes">
+```HTML
+<!-- Overstyr navn så vi unngår å logge personopplysninger: -->
+<a href="/profil" data-analytics-name="Brukernavn">Navn navnesen</a>
+
+<!-- Overstyr kategori for å enklere skille hendelser i loggen: -->
+<input data-analytics-category="Filter" type="range" name="vekt" />
+
+<!-- Overstyr kategori og handling: -->
+<button data-analytics-category="Filter" data-analytics-action="reset">Nullstill filter</button>
+
+<!-- Ignorer element helt: -->
+<u-details>
+  <u-summary data-analytics="ignore">Ignorer dette åpne/lukk-området</u-summary>
+</u-details>
+
+<!-- Ignorer område helt: -->
+<div data-analytics="ignore">
+  <button type="button">Ignorer alle disse knappene</button>
+  <button type="button">Ignorer alle disse knappene</button>
+  <button type="button">Ignorer alle disse knappene</button>
+</div>
+```
+</Popover>
+
+<Alert data-color="warning">
+**Viktig:** Dersom elementer innholder personopplysninger, for eksempel navn i en knapp, må du sette `data-analytics-name=""` for å unngå personopplysninger i loggene
+</Alert>
+
+<Table data-size="sm">
+  <thead>
+    <tr><th>Category</th><th>Action</th><th>Name</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>`Breadcrumbs`</td><td>`navigate`</td><td>Breadcrumb text</td></tr>
+    <tr><td>`Button`</td><td>`click`</td><td>Button text</td></tr>
+    <tr><td>`Card`</td><td>`click` | `navigate`</td><td>Card heading or text</td></tr>
+    <tr><td>`Chip`</td><td>`click` | `remove`</td><td>Chip text</td></tr>
+    <tr><td>`Details`</td><td>`open`</td><td>Summary text</td></tr>
+    <tr><td>`Dialog`</td><td>`open`</td><td>Heading text</td></tr>
+    <tr><td>`Expand`</td><td>`open`</td><td>Button text</td></tr>
+    <tr><td>`Form`</td><td>`change` | `submit`</td><td>Relevant label, legend or heading</td></tr>
+    <tr><td>`HelpText`</td><td>`open`</td><td>Aria label text</td></tr>
+    <tr><td>`Link`</td><td>`navigate` | `anchor` | `email` | `download`</td><td>Link text</td></tr>
+    <tr><td>`Map Marker`</td><td>`open`</td><td>Marker label</td></tr>
+    <tr><td>`Pagination`</td><td>`navigate`</td><td>Pagination item text</td></tr>
+    <tr><td>`Popover`</td><td>`open`</td><td>Opener button text</td></tr>
+    <tr><td>`Sidebar`</td><td>`minimize` | `expand`</td><td>Toggle text</td></tr>
+    <tr><td>`Tab`</td><td>`navigate`</td><td>Tab text</td></tr>
+    <tr><td>`Table`</td><td>`sort`</td><td>Column heading text</td></tr>
+  </tbody>
+</Table>
+
+
+## Søk
+- Send en `search` for å forstå hva brukerne leter etter
+
+```
+analytics('search', {
+  query: string,      // Required: The text user searched for
+  category?: string,  // Optional: The category the search was performed in
+  results?: number,   // Optional: The number of results returned
+});
+```
+
+## Matomo-funksjoner
+- Mattilsynets analysetjeneste [Matomo har flere funksjoner](https://developer.matomo.org/guides/tracking-javascript-guide), men
+disse krever ofte konfigurasjon (som [A/B testing](https://developer.matomo.org/guides/ab-tests/browser)), samtykke (som [heatmap og session recording](https://developer.matomo.org/guides/heatmap-session-recording/setup)) eller kan negativt påvirke ytelse (som [content impressions](https://developer.matomo.org/guides/tracking-javascript-guide#track-all-content-impressions-within-a-page)).
+- Disse funksjonene er derfor kun tilgjengelig bruk av `analytics('matomo', [...args])`, som er identisk med [Matomos javascript API](https://developer.matomo.org/guides/tracking-javascript-guide) `_paq.push([...args])`.
+
+**Eksempel for å aktivere heatmap og session recording:**
+
+```
+analytics('matomo', ['HeatmapSessionRecording::enable']);
+```
+
+## Debugging
+- Du kan til en hver tid skru på "debug", for å se hva som blir logget
+- Debug er kun aktivt på den siden du aktiverer det på - det vil automatisk være av igjen dersom du endrer url eller laster siden på nytt
+1. Åpne console i nettleseren (Høyreklikk &rarr; Inspiser &rarr; Console)
+2. Lim inn `window._mtdsTracking.enabled = 'debug'` i console og trykk enter
+3. Alt `analytics` blir nå synlig i console istedefor å sendes til Matomo

package/mtds/ai/app.mdx

@@ -0,0 +1,60 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { CssVariables } from '../../.storybook/blocks';
+import * as stories from './app.stories';
+import { Button, Popover } from '../react';
+
+<Meta of={stories} />
+
+# App
+> App er en forhåndsdefinert layoutkomponent som gir et enkelt startpunkt å bygge videre på når du skal tegne eller utvikle en ny applikasjon.
+
+## Kode
+- Bruk klassen `app` på typisk `<body>` eller et element inni
+- Legg inn `<header>`, `<dialog role="navigation">` (for sidemeny), `<main>` og evt. `<footer>`
+- Alle elemetene er valgfrie, og kan grupperes i `<div>`-er for [island-architecture](https://www.patterns.dev/vanilla/islands-architecture/)
+- Bruk `data-app-expanded="mobile | desktop"` på elementer ønsker å vise noe kun på en skjermstørrelse (f.eks kun vise sideområde-knapp på mobil)
+- **React?** Bruk `App`, `App.Header`, `App.Sidebar`,  `App.Sticky`, `App.Toggle`,  `App.Main` og `App.Footer`
+- **Next.js?** Bruk `<App.Script>` i `<head>` for å tegne minimert/ekspanert sidemeny uten <button type="button" data-popover="inline" popoverTarget='fouc'>FOUC</button><Popover id="fouc">Flash of unstyled content</Popover>
+<div className="sbdocs-canvas-thumbnail">
+  <Button data-arrow data-variant="primary" target="_blank" href="/iframe.html?globals=&id=designsystem-app--default">Se app i ny fane</Button>
+  <Canvas of={stories.Default} />
+</div>
+
+## Ekspander og minimer sideområde
+- Legg en `<button>` med klassen `button` og `command="show-modal" commandfor="mtds-sidebar"` før `<dialog role="navigation" id="mtds-sidebar">` for å få automatisk ekspandering/minimering av sideområde
+- Bruk `data-app-expanded="true | false"` på elementer for å vises/skjules basert på ekspandert/minimert sideområde
+- Visning huskes automatisk mellom sidevisninger ved bruk av `localStorage`
+- **React?** Bruk `App.Toggle`
+<div className="sbdocs-canvas-thumbnail">
+  <Button data-arrow data-variant="primary" target="_blank" href="/iframe.html?globals=&id=designsystem-app--default">Se ekspandering i ny fane</Button>
+  <Canvas of={stories.Default} />
+</div>
+
+## Sticky sideområde
+- Legg en `<div>` med klassen `sticky` rundt alt innholdet inni `<dialog role="navigation">`
+- Dette gir deg en avansert implementasjon av sticky, som tar hensyn til scroll-retning
+<div className="sbdocs-canvas-thumbnail">
+  <Button data-arrow data-variant="primary" target="_blank" href="/iframe.html?globals=&id=designsystem-app--with-complex-content">Se sticky i ny fane</Button>
+  <Canvas of={stories.Default} />
+</div>
+
+## Mobil bunnmeny
+- Bruk `data-variant="mobilebar"` på `.app` for å få en mobil bunnmeny
+- Burde kun benyttes om du har 5 menypunkter eller færre
+- Titler, skillelinjer og elementer med `data-app-expanded="false"` skjules
+<div className="sbdocs-canvas-thumbnail">
+  <Button data-arrow data-variant="primary" href="/iframe.html?globals=&id=designsystem-app--with-mobile-bar">Se mobilebar i egen visning</Button>
+  <Canvas of={stories.WithMobileBar} />
+</div>
+
+## Programatisk ekspander/minimer
+- Bruk `import { toggleAppExpand } from '@mattilsynet/design';`
+- `toggleAppExpand()` veksler mellom ekspandert og minimert
+- `toggleAppExpand(true)` tvinger ekspandert
+- `toggleAppExpand(false)` tvinger minimert
+<div className="sbdocs-canvas-thumbnail">
+  <Button data-arrow data-variant="primary" target="_blank" href="/iframe.html?globals=&id=designsystem-app--with-complex-content">Se programatisk ekspander/minimer</Button>
+  <Canvas of={stories.WithCustomToggle} />
+</div>
+
+<CssVariables component="app" />