Merge branch 'next' into feat/suggestion

.changeset/gorgeous-geese-boil.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": minor
+---
+
+Added option dry run using `--dry` on `tokens create` & `tokens build`

.changeset/lazy-wolves-provide.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": minor
+---
+
+`tokens create` now writes by default

.changeset/wicked-pots-allow.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": minor
+---
+
+Changed `-w, --write` to `-o, --out-dir` on `tokens create` & `tokens build` for defining output dir

.github/workflows/checks.yml

@@ -9,10 +9,14 @@ on:
       - 'biome.jsonc'
 jobs:
   checks:
-    name: Lint
+    name: Checks
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/gh-setup
-      - name: Lint code
+      - name: Build
+        run: yarn build
+      - name: Types
+        run: yarn types
+      - name: Biome CI
         run: yarn biome ci .

.github/workflows/test.yml

@@ -13,7 +13,7 @@ permissions:
   pull-requests: write
 
 jobs:
-  checks:
+  test:
     name: Build & test
     runs-on: ubuntu-latest
     steps:

.vscode/settings.json

@@ -7,7 +7,9 @@
     "source.organizeImports.biome": "explicit"
   },
   "editor.defaultFormatter": "biomejs.biome",
-  "css.customData": ["./.vscode/css-data.json"],
+  "css.customData": [
+    "./.vscode/css-data.json"
+  ],
   "[css]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
@@ -24,5 +26,8 @@
   },
   "[html]": {
     "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome"
   }
 }

apps/_components/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const styles: { [className: string]: string };
+  export default styles;
+}

apps/_components/package.json

@@ -24,6 +24,7 @@
     "@navikt/aksel-icons": "^6.14.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "clsx": "^2.1.1",
+    "next": "^14.2.5",
     "prettier": "^3.3.3",
     "react-syntax-highlighter": "^15.5.0"
   },

apps/_components/src/Header/Header.tsx

@@ -171,7 +171,7 @@ const Header = ({
                       onClick={() => setOpen(false)}
                       prefetch={false}
                       className={cl(
-                        pathname.includes(item.href) && classes.active,
+                        pathname?.includes(item.href) && classes.active,
                         classes.link,
                         'ds-focus',
                       )}

apps/_components/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "extends": "../../tsconfig.base.json",
+  "rootDir": "./src",
   "compilerOptions": {
     "outDir": "./tsc-build",
     "declarationDir": "./dist/types",
@@ -9,8 +10,12 @@
     "noEmit": false,
     "incremental": true,
     "moduleResolution": "Bundler",
-    "types": ["@digdir/designsystemet-theme/colors.d.ts"]
+    "types": ["@digdir/designsystemet-theme/colors.d.ts", "./declarations.d.ts"]
   },
   "include": ["./src", "./stories", "declarations.d.ts"],
-  "rootDir": "./src"
+  "plugins": [
+    {
+      "name": "next"
+    }
+  ]
 }

apps/storefront/app/monstre/bekreftelsesdialog/page.mdx

@@ -0,0 +1,58 @@
+import { Card, CardContent, Heading, Paragraph } from '@digdir/designsystemet-react';
+
+import { Image } from '@components';
+import { MenuPageLayout } from '@layouts';
+import { Contributors } from '@blog';
+
+export const metadata = {
+  title: 'Bekreftelsesdialog',
+  description: '...'
+};
+
+export default ({ children }) => (
+  <MenuPageLayout
+    content={children}
+    data={{
+      title: 'Bekreftelsesdialog',
+      date: '23. oktober 2024',
+    }}
+  />
+);
+
+## Innledning
+I tillegg til [brukerutløste feilmeldinger](/monstre/feilmeldinger) og [systemvarsler](/monstre/systemvarsler), har vi også bekreftelsesdialoger. Bekreftelsesdialoger vises i form av en `modal` eller `popover` og ber brukeren bekrefte en handling som har alvorlige eller irreversible konsekvenser. 
+
+
+#### Popover
+En `popover` er et ui-element som legger seg over grensesnittet. I motsetning til `modal` så vil ikke grensesnittet bak bli tonet ned, og brukeren vil ikke bli "låst" inne i popover komponenten. Disse kan være nyttige å bruke om du vil gi en beskjed basert på en handling. For eksempel at du vil informere brukeren om at det elementet de ønsker å slette ikke kan gjenopprettes om de velger å slette det. Disse burde kun brukes om det er lite informasjon som skal gis. Om du har bruk for mer plass kan `modal` være et bedre alternativ.
+
+Eksempelet under viser en popover der du må bekrefte at du ønsker å slette en rad i en tabell.
+<Image dataUnstyled
+  src='/img/popover-systemvarsler.png'
+  alt='Skjermbilde av tabell med medlemsliste. Popover viser en knapp der du må bekrefte at du ønsker å fjerne et medlem.'
+/>
+
+
+<Card color='brand3' data-unstyled>
+  *Retningslinjene er under arbeid fra 5. juni 2024 i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg, Politiet, KS DIF og Oslo kommune. Alle er velkommen til å påvirke arbeidet på [Github](https://github.com/digdir/designsystemet/discussions/1801) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ).
+</Card>
+
+<Contributors
+  authors={[
+    'Roy Halvor Frimanslund (Brreg)',
+    'Astrid Eline Øksnes (Politiet)',
+    'Bernard Tommerbakke (Oslo Kommune)',
+    'Vegard Haugstvedt (NAV)',
+    'Eirik Backer (Mattilsynet)',
+    'Lasse Febakke Straum (Digdir)',
+    'Frida Almqvist (Entur)',
+    'Marianne Røsvik (Digdir)',
+    'Camilla Orten (SKD)',
+    'Gørild Døhl (Digdir)',
+    'Viveca Krishnamoorthi (Digdir)',
+
+  ]}
+/>
+<br />
+<br />
+<br />