Merge branch 'main' into biome-noUselessElse

.changeset/breezy-squids-rescue.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+Increased padding size for contentBlockPadding on the Page primitive to 4 rem to reflect docs/Figma

.changeset/early-snails-serve.md

@@ -0,0 +1,5 @@
+---
+"@navikt/aksel-icons": minor
+---
+
+Icons: New icons for geometric shapes

.changeset/flat-donkeys-draw.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+:bug: Modal: Fix issue where polyfill-classname was not applied when using SSR (Next.js)

.changeset/mean-onions-share.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Combobox: Improved performance when parsing 1k or more options.

.changeset/three-shrimps-float.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Added options row-reverse and column-reverse to direction prop on Stack. Should only be used with caution.

.github/workflows/chromatic.yml

@@ -10,6 +10,7 @@ on:
     branches: [main, next]
     paths:
       - "@navikt/**"
+      - "aksel.nav.no/website/pages/templates/**"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -57,7 +58,7 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: x3xqdfgkujg
           exitZeroOnChanges: false
-          buildScriptName: "build:storybook"
+          buildScriptName: "build:storybook-chromatic"
           onlyChanged: true
           untraced: "**/package.json|yarn.lock|**/*.md"
           externals: \@navikt/core/css/**/*.css

.storybook/main.ts

@@ -1,9 +1,54 @@
+import { loadCsf } from "@storybook/csf-tools";
+import { StorybookConfig } from "@storybook/react-vite";
+import { readFileSync } from "fs";
 import turbosnap from "vite-plugin-turbosnap";
+import TsconfigPathsPlugin from "vite-tsconfig-paths";
+
+const indexRegex = /export const args = {\s+index: (\d+),/;
 
 export default {
-  staticDirs: ["./public"],
+  experimental_indexers: (indexers) => {
+    // Changes here might need to be reflected in aksel.nav.no/website/.storybook/main.ts
+    const customIndexer = async (fileName: string, opts) => {
+      let code = readFileSync(fileName, "utf-8").toString();
+
+      const matches = indexRegex.exec(code);
+      const prefix = matches ? `${matches[1]} | ` : "";
+
+      code = code.split(
+        /\/\/ EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE/,
+      )[0];
+
+      const [templateName, name] = fileName
+        .split(`pages/templates/`)[1]
+        .replace(".tsx", "")
+        .split("/");
+      const storyName = process.env.CHROMATIC
+        ? `${templateName} | ${prefix}${name}` // Chromatic does not support folders
+        : `${prefix}${name}`;
+
+      code += `
+        export default { title: "Templates/${templateName}/${storyName}" };
+        export const Demo = { render: Example };
+        Demo.storyName = "${storyName}";`;
+
+      return loadCsf(code, { ...opts, fileName }).parse().indexInputs;
+    };
 
-  stories: () => ["../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)", "./*.mdx"],
+    return [
+      ...(indexers || []),
+      {
+        test: /pages\/templates\/.+?.tsx$/,
+        createIndex: customIndexer,
+      },
+    ];
+  },
+  staticDirs: ["./public"],
+  stories: () => [
+    "../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+    "./*.mdx",
+    "../aksel.nav.no/website/pages/templates/**/*.tsx",
+  ],
   addons: [
     "@storybook/addon-a11y",
     "@whitespace/storybook-addon-html",
@@ -36,21 +81,24 @@ export default {
   },
   typescript: {
     check: false,
-    checkOptions: {},
     reactDocgen: false,
   },
 
   async viteFinal(config, { configType }) {
     const { mergeConfig } = await import("vite");
+
+    // The TsconfigPathsPlugin is only used to silence errors when importing nextjs components, but the imports does not acutally work.
+
     return mergeConfig(config, {
       plugins:
         configType === "PRODUCTION"
           ? [
+              TsconfigPathsPlugin(),
               turbosnap({
                 rootDir: config.root ?? process.cwd(),
               }),
             ]
-          : [],
+          : [TsconfigPathsPlugin()],
     });
   },
-};
+} satisfies StorybookConfig;

@navikt/aksel-icons/__tests__/validate-config.test.ts

@@ -31,5 +31,7 @@ describe(`Each icons YML-config is valid`, () => {
 });
 
 function isDate(dateStr) {
-  return !isNaN(new Date(dateStr.split(".").reverse().join(".")).getDate());
+  return !Number.isNaN(
+    new Date(dateStr.split(".").reverse().join(".")).getDate(),
+  );
 }

@navikt/aksel-icons/config/figma/make-configs.mjs

@@ -5,11 +5,17 @@ import { resolveName } from "./icon-name.mjs";
 
 export const makeConfig = (icons, folder) => {
   icons.forEach((icon) => {
+    const name = resolveName(icon).replace(".svg", "");
+    const keywords = icon.description
+      .split(",")
+      .map((x) => x.trim())
+      .filter(Boolean);
+
     const config = {
-      name: resolveName(icon).replace(".svg", ""),
+      name,
       category: icon.containing_frame.pageName,
       sub_category: icon.containing_frame.name,
-      keywords: [...icon.description.split(",").map((x) => x.trim())],
+      keywords: keywords.length > 0 ? keywords : [name],
       variant: icon.name.includes("Variant=")
         ? icon.name.replace("Variant=", "")
         : "Stroke",
@@ -27,7 +33,11 @@ export const makeConfig = (icons, folder) => {
         .join("."),
     };
 
-    const yml = jsYaml.dump(config, { noRefs: true, skipInvalid: false });
+    const yml = jsYaml.dump(config, {
+      noRefs: true,
+      skipInvalid: false,
+      quotingType: '"',
+    });
 
     writeFileSync(resolve(folder, `${config.name}.yml`), yml, {
       encoding: "utf8",

@navikt/aksel-icons/icons.stories.tsx

@@ -5,6 +5,7 @@ import { StarFillIcon } from "@navikt/aksel-icons";
 
 const meta: Meta<typeof StarFillIcon> = {
   title: "aksel-icons/Icons",
+  parameters: { html: { disable: true } },
 };
 export default meta;
 

@navikt/aksel-icons/icons/ArrowDown.yml

@@ -11,5 +11,5 @@ keywords:
   - åpnet
   - opened
 variant: Stroke
-updated_at: 07.01.2024
+updated_at: 02.05.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/ArrowDownRight.yml

@@ -9,5 +9,5 @@ keywords:
   - nivå
   - innrykk
 variant: Stroke
-updated_at: 16.01.2024
+updated_at: 02.05.2024
 created_at: 04.12.2023

@navikt/aksel-icons/icons/ArrowLeft.yml

@@ -8,5 +8,5 @@ keywords:
   - back
   - tilbake
 variant: Stroke
-updated_at: 04.01.2024
+updated_at: 21.05.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/ArrowRight.yml

@@ -9,5 +9,5 @@ keywords:
   - frem
   - fram
 variant: Stroke
-updated_at: 03.01.2024
+updated_at: 21.05.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/ArrowUp.yml

@@ -10,5 +10,5 @@ keywords:
   - close
   - lukke
 variant: Stroke
-updated_at: 03.01.2024
+updated_at: 02.05.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/ArrowsCirclepath.yml

@@ -13,5 +13,5 @@ keywords:
   - oppfrisking
   - oppdatering
 variant: Stroke
-updated_at: 29.02.2024
+updated_at: 17.04.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/ArrowsSquarepath.yml

@@ -14,5 +14,5 @@ keywords:
   - opptak
   - gjenopptak
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 17.04.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/BookmarkDash.yml

@@ -0,0 +1,14 @@
+name: BookmarkDash
+category: Interface
+sub_category: Filtering and sorting
+keywords:
+  - save
+  - bokmerke
+  - collection
+  - collect
+  - samling
+  - empty
+  - tom
+variant: Stroke
+updated_at: 15.05.2024
+created_at: 15.05.2024

@navikt/aksel-icons/icons/Bug.yml

@@ -2,7 +2,7 @@ name: Bug
 category: Nature and animals
 sub_category: Nature
 keywords:
-  - ""
+  - Bug
 variant: Stroke
 updated_at: 04.12.2023
 created_at: 27.02.2023

@navikt/aksel-icons/icons/BugFill.yml

@@ -2,7 +2,7 @@ name: BugFill
 category: Nature and animals
 sub_category: Nature
 keywords:
-  - ""
+  - BugFill
 variant: Fill
 updated_at: 04.12.2023
 created_at: 27.02.2023

@navikt/aksel-icons/icons/BulletList.yml

@@ -7,5 +7,5 @@ keywords:
   - order
   - punktliste
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 19.04.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Checkmark.yml

@@ -15,5 +15,5 @@ keywords:
   - fullføring
   - validering
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 17.04.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/CheckmarkCircle.yml

@@ -15,5 +15,5 @@ keywords:
   - fullføring
   - validering
 variant: Stroke
-updated_at: 04.12.2023
+updated_at: 21.05.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/CheckmarkCircleFill.yml

@@ -15,5 +15,5 @@ keywords:
   - fullføring
   - validering
 variant: Fill
-updated_at: 04.12.2023
+updated_at: 21.05.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/ChevronDown.yml

@@ -10,5 +10,5 @@ keywords:
   - åpner
   - mer
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 21.05.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/ChevronLeft.yml

@@ -6,5 +6,5 @@ keywords:
   - venstre
   - side
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 24.04.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/ChevronRight.yml

@@ -6,5 +6,5 @@ keywords:
   - høyre
   - side
 variant: Stroke
-updated_at: 04.01.2024
+updated_at: 17.04.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/ChevronUp.yml

@@ -10,5 +10,5 @@ keywords:
   - lukk
   - lukke
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 16.04.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Circle.yml

@@ -0,0 +1,8 @@
+name: Circle
+category: Status
+sub_category: Shapes
+keywords:
+  - Sirkel
+variant: Stroke
+updated_at: 15.05.2024
+created_at: 15.05.2024

@navikt/aksel-icons/icons/CircleFill.yml

@@ -0,0 +1,8 @@
+name: CircleFill
+category: Status
+sub_category: Shapes
+keywords:
+  - Sirkel
+variant: Fill
+updated_at: 15.05.2024
+created_at: 15.05.2024

@navikt/aksel-icons/icons/ClockDashed.yml

@@ -8,5 +8,5 @@ keywords:
   - historikk
   - visited
 variant: Stroke
-updated_at: 09.01.2024
+updated_at: 17.04.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/CurrencyExchange.yml

@@ -11,5 +11,5 @@ keywords:
   - handel
   - økonomi
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 07.05.2024
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Diamond.yml

@@ -0,0 +1,8 @@
+name: Diamond
+category: Status
+sub_category: Shapes
+keywords:
+  - diamant
+variant: Stroke
+updated_at: 15.05.2024
+created_at: 15.05.2024

@navikt/aksel-icons/icons/DiamondFill.yml

@@ -0,0 +1,8 @@
+name: DiamondFill
+category: Status
+sub_category: Shapes
+keywords:
+  - diamant
+variant: Fill
+updated_at: 15.05.2024
+created_at: 15.05.2024

@navikt/aksel-icons/icons/Divide.yml

@@ -5,5 +5,5 @@ keywords:
   - dele
   - division
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 12.04.2024
 created_at: 07.03.2023