Version Packages (#1949)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/config.json

@@ -12,6 +12,7 @@
       "@navikt/ds-react-internal",
       "@navikt/ds-codemod",
       "@navikt/aksel-icons",
+      "@navikt/aksel",
       "@navikt/ds-icons"
     ]
   ],

.github/workflows/aksel-dev.yml

@@ -6,34 +6,6 @@ on:
       - next
 
 jobs:
-  snyk-monitor:
-    name: monitor dependencies
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-      - name: Run Snyk to check for vulnerabilities
-        continue-on-error: true
-        uses: snyk/actions/node@master
-        env:
-          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
-        with:
-          command: monitor
-          args: --org=designsystemet --severity-threshold=high
-  snyk-test:
-    name: analyze dependencies
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-      - name: Run Snyk to check for vulnerabilities
-        uses: snyk/actions/node@master
-        continue-on-error: true
-        env:
-          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
-        with:
-          command: test
-          args: --org=designsystemet --severity-threshold=high
   build_and_deploy:
     name: Build and deploy to dev-gcp
     runs-on: ubuntu-20.04

.github/workflows/aksel-prod.yml

@@ -10,34 +10,6 @@ env:
   IMAGE: ghcr.io/navikt/aksel
 
 jobs:
-  snyk-monitor:
-    name: monitor dependencies
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-      - name: Run Snyk to check for vulnerabilities
-        continue-on-error: true
-        uses: snyk/actions/node@master
-        env:
-          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
-        with:
-          command: monitor
-          args: --org=designsystemet --severity-threshold=high
-  snyk-test:
-    name: analyze dependencies
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-      - name: Run Snyk to check for vulnerabilities
-        uses: snyk/actions/node@master
-        continue-on-error: true
-        env:
-          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
-        with:
-          command: test
-          args: --org=designsystemet --severity-threshold=high
   sync_data_with_sanity:
     name: Update component data
     runs-on: ubuntu-latest

.github/workflows/release.yml

@@ -83,3 +83,17 @@ jobs:
           cdn-team-name: aksel
           source: ./@navikt/aksel-icons/aksel-icons.zip
           destination: "/icons/zip"
+
+      - name: Get @navikt/ds-css version
+        run: |
+          VERSION=$(yarn css:get-version)
+          echo "version=$VERSION" >> $GITHUB_ENV
+          echo "Version of @navikt/ds-css: ${{ env.version }}"
+
+      - name: Upload CSS to NAV CDN
+        if: steps.changesets.outputs.published == 'true'
+        uses: navikt/frontend/actions/cdn-upload/v1@main
+        with:
+          cdn-team-name: aksel
+          source: ./@navikt/core/css/dist/version/${{env.version}}
+          destination: "@navikt/ds-css"

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/aksel-icons
 
+## 2.9.2
+
+## 2.9.1
+
+## 2.9.0
+
 ## 2.8.16
 
 ## 2.8.15

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "2.8.16",
+  "version": "2.9.2",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

@navikt/aksel/.gitignore

@@ -0,0 +1 @@
+dist

@navikt/aksel/CHANGELOG.md

@@ -0,0 +1,22 @@
+# @navikt/aksel
+
+## 2.9.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@2.9.2
+
+## 2.9.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@2.9.1
+
+## 2.9.0
+
+### Patch Changes
+
+- Updated dependencies [[`657b7f3f3`](https://github.com/navikt/aksel/commit/657b7f3f3e62c5ce3173e6c95a29fcd237ce7343)]:
+  - @navikt/ds-css@2.9.0

@navikt/aksel/README.md

@@ -0,0 +1,17 @@
+# Aksel command line interface
+
+CLI tool for managing CSS-imports and more when consuming Aksel-packages.
+
+[Documentation](https://aksel.nav.no/preview/grunnleggende/kode/kommandolinje)
+
+```bash
+run:
+npx @navikt/aksel
+
+commands:
+css-imports: Generate css-imports for all components from Aksel
+```
+
+## License
+
+[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)

@navikt/aksel/css-imports/config.ts

@@ -0,0 +1,14 @@
+export type AnswersT = {
+  "config-type": "regular" | "easy" | "advanced";
+  cdn: "yes" | "no";
+  version: string;
+  tailwind?: "yes" | "no";
+  layers?: "yes" | "no";
+  autoscan?: "yes" | "no";
+  scandir?: string;
+  imports?: string[];
+  output: "print" | "clipboard" | "print-clipboard";
+};
+
+export const ComponentPrefix = "C_";
+export const layerSuffix = " layer(aksel)";

@navikt/aksel/css-imports/generate-output.ts

@@ -0,0 +1,175 @@
+import { AnswersT, ComponentPrefix, layerSuffix } from "./config.js";
+import {
+  formCss,
+  typoCss,
+  componentsCss,
+  StyleMappings,
+  componentDir,
+  rootDir,
+  globalDir,
+} from "@navikt/ds-css/config/_mappings.js";
+import { inquiry } from "./inquiry.js";
+import clipboard from "clipboardy";
+import lodash from "lodash";
+import chalk from "chalk";
+
+export async function generateImportOutput(answers: AnswersT) {
+  const useCdn = answers.cdn === "yes";
+  const useTailwind = answers.tailwind === "yes";
+  const version = answers.version;
+
+  const imports = [];
+  let importStr = "";
+
+  await inquiry(answers, [
+    {
+      type: "select",
+      name: "output",
+      message: "Output format",
+      initial: "print-clipboard",
+      choices: [
+        { message: "Clipboard & Print", name: "clipboard-print" },
+        { message: "Clipboard", name: "clipboard" },
+        { message: "Print", name: "print" },
+      ],
+    },
+  ]);
+
+  answers["config-type"] === "regular"
+    ? imports.push(simpleOutput(useCdn, answers.layers === "yes", version))
+    : imports.push(
+        ...advancedOutput(answers, useCdn, answers.layers === "yes", version)
+      );
+
+  if (useTailwind) {
+    importStr = `@import "tailwindcss/base";
+${imports.join("\n")}
+
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+    `;
+  } else {
+    importStr = imports.join("\n");
+  }
+
+  if (answers.output.includes("print")) {
+    console.log(chalk.bold.cyan(`\nImports 🚀 \n`));
+    console.log(chalk.green(`${importStr}`));
+  }
+
+  if (useCdn) {
+    console.log(chalk.bold.underline.cyan(`\nNotes on CDN-usage 📝`));
+    console.log(
+      `We recommend using Static imports, then uploading the your bundled static-files to your own CDN-instance.
+✔︎ This allows you to control the version of the CSS-files with package.json, and avoids desync between ds-react/ds-css.
+✔︎ Remember to add 'https://cdn.nav.no' to your applications CSP!`
+    );
+  }
+
+  if (useTailwind) {
+    console.log(chalk.bold.underline.cyan(`\nNotes on Tailwind-use 📝`));
+    console.log(
+      `When using tailwind with Aksel, you will need to add the postcss plugin ${chalk.cyan(
+        "postcss-import"
+      )}
+✔︎ NPM: https://www.npmjs.com/package/postcss-import
+✔︎ Read more here: https://aksel.nav.no/grunnleggende/kode/tailwind`
+    );
+  }
+
+  if (answers.layers === "yes") {
+    console.log(chalk.bold.underline.cyan(`\nNotes on Layers 📝`));
+    console.log(
+      `Layers is not yet supported in Safari <= 15.3. (https://caniuse.com/css-cascade-layers)`
+    );
+  }
+
+  answers.output.includes("clipboard") && clipboard.writeSync(importStr);
+}
+
+function simpleOutput(cdn: boolean, layers: boolean, version: string) {
+  const options = {
+    static: `@import "@navikt/ds-css"${layers ? layerSuffix : ""};`,
+    cdn: toCdn("index.css", version),
+  };
+
+  return cdn ? options.cdn : options.static;
+}
+
+function advancedOutput(
+  answers: AnswersT,
+  cdn: boolean,
+  layers: boolean,
+  version: string
+) {
+  const imports = ["/* Defaults */"];
+  const baselineImports = answers.imports.filter(
+    (x) => !x.startsWith(ComponentPrefix) && x !== "default"
+  );
+
+  const componentImports = answers.imports
+    .filter((x) => x.startsWith(ComponentPrefix) && x !== "components")
+    .map((x) => x.replace(ComponentPrefix, ""));
+
+  baselineImports.forEach((x) => {
+    cdn
+      ? imports.push(toCdn(`${globalDir}/${x}.css`, version))
+      : imports.push(toCssImport(`${globalDir}/${x}.css`, layers));
+  });
+
+  if (answers["config-type"] === "easy") {
+    cdn
+      ? imports.push(toCdn(componentsCss, version))
+      : imports.push(toCssImport(`${rootDir}/${componentsCss}`, layers));
+    return imports;
+  }
+
+  const components = new Set();
+
+  componentImports.forEach((x) => {
+    const styleRef = StyleMappings.components.find((y) => y.component === x);
+    if (styleRef) {
+      components.add(styleRef.main);
+      styleRef?.dependencies?.forEach((dep) => components.add(dep));
+    }
+  });
+
+  let componentImportsList = (Array.from(components) as string[])
+    .filter((x) => x.length > 0)
+    .sort((a, b) => a.localeCompare(b));
+
+  if (componentImportsList.find((x) => x === formCss)) {
+    componentImportsList = componentImportsList.filter((x) => x !== formCss);
+    componentImportsList.unshift(formCss);
+  }
+
+  if (componentImportsList.find((x) => x === typoCss)) {
+    componentImportsList = componentImportsList.filter((x) => x !== typoCss);
+    componentImportsList.unshift(typoCss);
+  }
+  if (componentImportsList.length === 0) {
+    return imports;
+  }
+
+  imports.push(``);
+  imports.push(`/* Components */`);
+
+  componentImportsList.forEach((x) => {
+    const pascalCase = lodash.camelCase(x.replace("css", "")).toLowerCase();
+    cdn
+      ? imports.push(toCdn(`${componentDir}/${pascalCase}.css`, version))
+      : imports.push(toCssImport(`${componentDir}/${pascalCase}.css`, layers));
+  });
+
+  return imports;
+}
+
+function toCdn(str: string, version: string): string {
+  return `<link rel="preload" href="https://cdn.nav.no/aksel/@navikt/ds-css/${version}/${str
+    .replace(".css", ".min.css")
+    .replace(`${rootDir}/`, "")}" as="style"></link>`;
+}
+
+function toCssImport(str: string, layers: boolean): string {
+  return `@import "@navikt/ds-css/${str}"${layers ? layerSuffix : ""};`;
+}

@navikt/aksel/css-imports/get-directories.ts

@@ -0,0 +1,22 @@
+import fg from "fast-glob";
+import path from "path";
+
+export async function getDirectories() {
+  const baseDir = process.cwd();
+  const ignoreNodeModules = [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    "**/lib/**",
+  ];
+  const directories = await fg(`${baseDir}/**`, {
+    onlyDirectories: true,
+    ignore: ignoreNodeModules,
+  });
+
+  directories.sort((a, b) => a.length - b.length);
+
+  return [baseDir, ...directories].map((x) =>
+    x.replace(baseDir, path.basename(baseDir))
+  );
+}

@navikt/aksel/css-imports/get-version.ts

@@ -0,0 +1,13 @@
+import axios from "axios";
+
+export async function getAllVersions() {
+  try {
+    const npmPackageData = await axios.get(
+      `https://registry.npmjs.org/@navikt/ds-css`
+    );
+    return Object.keys(npmPackageData.data["versions"]);
+  } catch (e) {
+    console.log(e);
+    return [];
+  }
+}

@navikt/aksel/css-imports/index.ts

@@ -0,0 +1,199 @@
+import { StyleMappings } from "@navikt/ds-css/config/_mappings.js";
+import { generateImportOutput } from "./generate-output.js";
+import { AnswersT, ComponentPrefix } from "./config.js";
+
+import { inquiry } from "./inquiry.js";
+import { exec } from "child_process";
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+import { getAllVersions } from "./get-version.js";
+import chalk from "chalk";
+import { getDirectories } from "./get-directories.js";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export async function cssImportsCommand() {
+  let answers: AnswersT = {
+    "config-type": "regular",
+    cdn: "no",
+    version: "0.0.0",
+    autoscan: "no",
+    scandir: "",
+    tailwind: "no",
+    layers: "no",
+    imports: null,
+    output: "print-clipboard",
+  };
+
+  await inquiry(answers, [
+    {
+      type: "select",
+      name: "config-type",
+      message: "Import variants:",
+      initial: 0,
+      choices: [
+        { message: "Regular import (recommended)", name: "regular" },
+        { message: "Partial control (global)", name: "easy" },
+        { message: "Full control (global + components)", name: "advanced" },
+      ],
+      footer() {
+        return chalk.grey(
+          `${chalk.cyan(
+            `\n  Documentation:`
+          )}\n  Regular: https://aksel.nav.no/grunnleggende/kode/css-import
+  Partial: https://aksel.nav.no/grunnleggende/kode/css-import#h64650b1a4ad6
+  Full: https://aksel.nav.no/grunnleggende/kode/css-import#h4037598416ef\n`
+        );
+      },
+    },
+    {
+      type: "select",
+      name: "cdn",
+      message: "Import format",
+      initial: 0,
+      choices: [
+        { message: "Static import (default)", name: "no" },
+        { message: "CDN import (not recommended)", name: "yes" },
+      ],
+    },
+  ]);
+
+  if (answers?.cdn === "no") {
+    await inquiry(answers, [
+      {
+        type: "select",
+        name: "tailwind",
+        message: "Add tailwind support?",
+        initial: 0,
+        choices: [
+          { message: "No", name: "no" },
+          { message: "Yes", name: "yes" },
+        ],
+      },
+      {
+        type: "select",
+        name: "layers",
+        message: "Add styling to custom @layer rule?",
+        initial: 0,
+        choices: [
+          { message: "No", name: "no" },
+          { message: "Yes", name: "yes" },
+        ],
+      },
+    ]);
+  } else {
+    let versions = (await getAllVersions()).filter((x) => !x.includes("-"));
+
+    const index = versions.findIndex((x) => x.startsWith("2.9.0"));
+    versions = versions.slice(index).reverse();
+
+    await inquiry(answers, [
+      {
+        type: "autocomplete",
+        name: "version",
+        message: `@navikt/ds-css version from CDN:`,
+        limit: 6,
+        initial: 0,
+        choices: versions,
+        footer() {
+          return chalk.grey(
+            'Remember to match version with @navikt/ds-react!\nNote: CDN was introduced in v2.9.0, older versions not available.\nUse "static" import instead.'
+          );
+        },
+      },
+    ]);
+  }
+
+  if (answers["config-type"] === "regular") {
+    await generateImportOutput(answers);
+    return;
+  }
+
+  answers["config-type"] === "advanced" &&
+    (await inquiry(answers, [
+      {
+        type: "select",
+        name: "autoscan",
+        message: "Scan current directory for '@navikt/ds-react' components?",
+        initial: 0,
+        choices: [
+          { message: "No", name: "no" },
+          { message: "Yes", name: "yes" },
+        ],
+      },
+    ]));
+
+  answers.autoscan === "yes" &&
+    (await inquiry(answers, [
+      {
+        type: "autocomplete",
+        name: "scandir",
+        message: `Directory to scan`,
+        limit: 6,
+        initial: 0,
+        choices: getDirectories(),
+        footer() {
+          return chalk.grey(
+            "filtered out: node_moduels, dist, build, lib, .* (dotfiles)"
+          );
+        },
+      },
+    ]));
+
+  let foundComponents: string[] = [];
+
+  if (answers["autoscan"] === "yes") {
+    foundComponents = await new Promise((resolve) => {
+      exec(`node ${__dirname}/scan-code.js ${answers.scandir}`, (_, stdout) => {
+        resolve(
+          stdout ? JSON.parse(stdout.trim().split("\n").slice(1).join("")) : []
+        );
+      });
+    });
+  }
+
+  await inquiry(answers, [
+    {
+      type: "multiselect",
+      name: "imports",
+      message: "Imports",
+      initial: [
+        ...StyleMappings.baseline.map((x) => x.main.replace(".css", "")),
+        ...StyleMappings.components
+          .filter((x) => foundComponents.includes(x.component))
+          .map((x) => `${ComponentPrefix}${x.component}`),
+      ],
+      choices: [
+        {
+          message: "Default-imports",
+          name: "default",
+          choices: [
+            ...StyleMappings.baseline.map((x) => ({
+              message: `${x.main.replace(".css", "")}${
+                x.optional ? "" : " (required)"
+              }`,
+              name: x.main.replace(".css", ""),
+            })),
+          ],
+        },
+        ...(answers["config-type"] === "advanced"
+          ? [
+              {
+                message: "Components",
+                name: "components",
+                choices: [
+                  ...StyleMappings.components.map((x) => ({
+                    message: x.component,
+                    name: `${ComponentPrefix}${x.component}`,
+                  })),
+                ],
+              },
+            ]
+          : []),
+      ],
+    },
+  ]);
+
+  await generateImportOutput(answers);
+}

@navikt/aksel/css-imports/inquiry.ts

@@ -0,0 +1,29 @@
+import Enquirer from "enquirer";
+import { AnswersT } from "./config.js";
+import chalk from "chalk";
+
+export async function inquiry(answers: AnswersT, questions: any[]) {
+  return await Enquirer.prompt(
+    questions.map((x) => ({
+      ...x,
+      cancel: () => process.exit(1),
+      header: `\n${chalk.gray(
+        "Command 'css-imports' will not edit your files directly!"
+      )}\n`,
+    }))
+  )
+    .then((a) => {
+      Object.entries(a).forEach(([key, value]) => {
+        answers[key] = value;
+      });
+    })
+    .catch((error) => {
+      if (error.isTtyError) {
+        console.log(
+          "Oops, something went wrong! Looks like @navikt/aksel-cli can't run in this terminal. Contact Aksel"
+        );
+      } else {
+        console.error(error);
+      }
+    });
+}

@navikt/aksel/css-imports/scan-code.ts

@@ -0,0 +1,44 @@
+import path from "path";
+import scanner from "react-scanner";
+
+run();
+
+async function run() {
+  await scanCode();
+}
+
+async function scanCode() {
+  const cwd = process.cwd();
+
+  const config = {
+    rootDir: cwd,
+    crawlFrom: `${process.argv[2] ?? ""}`.replace(path.basename(cwd), "."),
+
+    globs: ["**/!(*.test|*.spec|*.stories|*.story).@(jsx|tsx)"],
+    exclude: (dirname: string) => dirname === "node_modules",
+    getComponentName: ({
+      imported,
+      moduleName,
+    }: {
+      imported: string;
+      moduleName: string;
+    }) => imported || path.basename(moduleName),
+  };
+
+  let result: any | null = null;
+
+  await scanner
+    .run({
+      ...config,
+      importedFrom: /@navikt\/ds-react/,
+      processors: [
+        "count-components",
+        ({ report }) => {
+          result = report;
+        },
+      ],
+    })
+    .catch(() => null);
+
+  console.log(JSON.stringify(Object.keys(result)));
+}

@navikt/aksel/help.ts

@@ -0,0 +1,18 @@
+import chalk from "chalk";
+import figlet from "figlet";
+
+export function helpCommand() {
+  console.log(figlet.textSync("Aksel CLI"));
+  console.log(`
+📝 Documentation
+   - ${chalk.blueBright(
+     "https://aksel.nav.no/grunnleggende/kode/kommandolinje"
+   )}
+
+💻 Commands:
+   - ${chalk.cyan(`npx @navikt/aksel ${chalk.green("css-imports")}`)}
+   ✔︎ Helps with CSS imports for all Aksel components
+   ✔︎ Supports Static and CDN-imports
+   ✔︎ Handles cascading, tailwind and @layer rules
+`);
+}

@navikt/aksel/index.ts

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+import chalk from "chalk";
+import { helpCommand } from "./help.js";
+import { cssImportsCommand } from "./css-imports/index.js";
+
+run();
+
+async function run() {
+  if (!process.argv[2] || process.argv[2] === "help") {
+    helpCommand();
+    return;
+  } else if (process.argv[2] === "css-imports") {
+    await cssImportsCommand();
+    return;
+  } else {
+    console.log(
+      chalk.red(
+        `Unknown command: ${process.argv[2]}.\nRun ${chalk.cyan(
+          "npx @navikt/aksel help"
+        )} for all available commands.`
+      )
+    );
+  }
+}

@navikt/aksel/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@navikt/aksel",
+  "version": "2.9.2",
+  "description": "Aksel command line interface. Handles css-imports, codemods (planned) and more",
+  "author": "Aksel | NAV designsystem team",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "command-line",
+    "CLI",
+    "css",
+    "CDN"
+  ],
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "yarn clean && tsc -p tsconfig.json",
+    "dev": "tsc --watch -p tsconfig.json"
+  },
+  "bin": "./dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navikt/aksel.git",
+    "directory": "@navikt/aksel"
+  },
+  "type": "module",
+  "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
+  "dependencies": {
+    "@navikt/ds-css": "2.9.2",
+    "axios": "1.3.6",
+    "chalk": "4.1.0",
+    "clipboardy": "^3.0.0",
+    "enquirer": "^2.3.6",
+    "fast-glob": "3.2.11",
+    "figlet": "1.6.0",
+    "lodash": "4.17.21",
+    "react-scanner": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/inquirer": "^9.0.3",
+    "rimraf": "3.0.2",
+    "typescript": "^4.8.0"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  }
+}

@navikt/aksel/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "Node16",
+    "sourceMap": false,
+    "esModuleInterop": true,
+    "target": "es2015",
+    "preserveWatchOutput": true,
+    "declaration": false,
+    "types": ["node", "jest"],
+    "outDir": "dist",
+    "rootDir": "./",
+    "resolveJsonModule": true
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules", "dist", "jest.config.js", "__tests__"]
+}

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-codemod
 
+## 2.9.2
+
+## 2.9.1
+
+## 2.9.0
+
 ## 2.8.16
 
 ## 2.8.15

@navikt/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "2.8.16",
+  "version": "2.9.2",
   "description": "Aksel codemods for NAVs designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",

@navikt/community/navno/package.json

@@ -40,8 +40,8 @@
     "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.8.16",
-    "@navikt/ds-react": "^2.8.16",
+    "@navikt/ds-icons": "^2.9.2",
+    "@navikt/ds-react": "^2.9.2",
     "clsx": "^1.1.1"
   },
   "devDependencies": {

@navikt/core/css/.gitignore

@@ -0,0 +1 @@
+!*.d.ts

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/ds-css
 
+## 2.9.2
+
+## 2.9.1
+
+## 2.9.0
+
+### Minor Changes
+
+- [#1941](https://github.com/navikt/aksel/pull/1941) [`657b7f3f3`](https://github.com/navikt/aksel/commit/657b7f3f3e62c5ce3173e6c95a29fcd237ce7343) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: CSS nå tilgjengelig som separate filer
+
+  - Kan lastest fra CDN
+  - Tilbys nå i minified-versjoner
+  - Kommandoline: `npx @navikt/aksel css-imports` for å raskt komme i gang med CSS-optimalisering
+
 ## 2.8.16
 
 ## 2.8.15

@navikt/core/css/baseline/_inline-reset.css

@@ -0,0 +1,52 @@
+html,
+:host {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  color: inherit;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+legend {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+}
+
+[hidden] {
+  display: none;
+}

@navikt/core/css/baseline/_utilities.css

@@ -1,3 +1,18 @@
+/* https://web.dev/prefers-reduced-motion/ */
+@media (prefers-reduced-motion: reduce) {
+  *:not(.navds-loader *):not(.navds-loader),
+  ::before,
+  ::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    background-attachment: initial !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+}
+
 /*
  * From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
  *
@@ -20,17 +35,15 @@
   position: absolute;
   white-space: nowrap;
   width: 1px;
-
-  /* 1 */
 }
 
 /*
- * From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
- *
- * Extends the .sr-only class to allow the element
- * to be focusable when navigated to via the keyboard:
- * https://www.drupal.org/node/897638
- */
+* From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
+*
+* Extends the .sr-only class to allow the element
+* to be focusable when navigated to via the keyboard:
+* https://www.drupal.org/node/897638
+*/
 
 .sr-only.focusable:active,
 .sr-only.focusable:focus,

@navikt/core/css/baseline/baseline.css

@@ -1,19 +1,5 @@
-@import "@navikt/ds-tokens";
-@import "normalize.css";
-@import "fonts.css";
-@import "print.css";
-@import "utility.css";
-
-html,
-:host {
-  box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
+@import "./_inline-reset.css";
+@import "./_utilities.css";
 
 :root,
 :host,
@@ -39,22 +25,3 @@ body,
 a {
   color: var(--a-text-action);
 }
-
-button {
-  color: inherit;
-}
-
-/* https://web.dev/prefers-reduced-motion/ */
-@media (prefers-reduced-motion: reduce) {
-  *:not(.navds-loader *):not(.navds-loader),
-  ::before,
-  ::after {
-    animation-delay: -1ms !important;
-    animation-duration: 1ms !important;
-    animation-iteration-count: 1 !important;
-    background-attachment: initial !important;
-    scroll-behavior: auto !important;
-    transition-duration: 0s !important;
-    transition-delay: 0s !important;
-  }
-}

@navikt/core/css/baseline/index.css

@@ -0,0 +1,5 @@
+@import "@navikt/ds-tokens";
+@import "reset.css";
+@import "fonts.css";
+@import "print.css";
+@import "baseline.css";

@navikt/core/css/baseline/reset.css

@@ -0,0 +1,294 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}

@navikt/core/css/baseline/tokens.css

@@ -0,0 +1 @@
+@import "@navikt/ds-tokens";

@navikt/core/css/config/_mappings.d.ts

@@ -0,0 +1,24 @@
+export declare const rootDir = "dist";
+export declare const globalDir = "dist/global";
+export declare const componentDir = "dist/component";
+export declare const typoCss = "typography.css";
+export declare const formCss = "form.css";
+export declare const componentsCss = "components.css";
+export declare const StyleMappings: {
+  baseline: {
+    main: string;
+    optional: boolean;
+  }[];
+  components: (
+    | {
+        component: string;
+        main: string;
+        dependencies: string[];
+      }
+    | {
+        component: string;
+        main: string;
+        dependencies?: undefined;
+      }
+  )[];
+};

@navikt/core/css/config/_mappings.js

@@ -0,0 +1,149 @@
+const rootDir = "dist";
+const globalDir = "dist/global";
+const componentDir = "dist/component";
+
+const typoCss = "typography.css";
+const formCss = "form.css";
+const componentsCss = "components.css";
+
+const StyleMappings = {
+  baseline: [
+    {
+      main: "fonts.css",
+      optional: false,
+    },
+    {
+      main: "tokens.css",
+      optional: false,
+    },
+    {
+      main: "reset.css",
+      optional: true,
+    },
+    {
+      main: "baseline.css",
+      optional: false,
+    },
+    {
+      main: "print.css",
+      optional: true,
+    },
+  ],
+  components: [
+    {
+      component: "Accordion",
+      main: "accordion.css",
+      dependencies: [typoCss],
+    },
+    { component: "Alert", main: "alert.css", dependencies: [typoCss] },
+    {
+      component: "BodyLong",
+      main: typoCss,
+    },
+    {
+      component: "BodyShort",
+      main: typoCss,
+    },
+    {
+      component: "Button",
+      main: "button.css",
+      dependencies: [typoCss, "loader.css"],
+    },
+    { component: "Cell", main: "grid.css" },
+    { component: "Chat", main: "chat.css", dependencies: [typoCss] },
+    { component: "Checkbox", main: formCss, dependencies: [typoCss] },
+    { component: "CheckboxGroup", main: formCss, dependencies: [typoCss] },
+    { component: "Chips", main: "chips.css", dependencies: [typoCss] },
+    {
+      component: "ConfirmationPanel",
+      main: formCss,
+      dependencies: [typoCss],
+    },
+    {
+      component: "ContentContainer",
+      main: "content-container.css",
+    },
+    { component: "Detail", main: typoCss },
+    { component: "ErrorMessage", main: typoCss },
+    { component: "ErrorSummary", main: formCss, dependencies: [typoCss] },
+    {
+      component: "ExpansionCard",
+      main: "expansion-card.css",
+      dependencies: [typoCss],
+    },
+    { component: "Fieldset", main: formCss, dependencies: [typoCss] },
+    { component: "Grid", main: "grid.css", dependencies: [typoCss] },
+    {
+      component: "GuidePanel",
+      main: "guide-panel.css",
+      dependencies: [typoCss],
+    },
+    { component: "Heading", main: typoCss, dependencies: [typoCss] },
+    {
+      component: "HelpText",
+      main: "help-text.css",
+      dependencies: ["popover.css"],
+    },
+    { component: "Ingress", main: typoCss },
+    { component: "Label", main: typoCss },
+    { component: "Link", main: "link.css", dependencies: [typoCss] },
+    {
+      component: "LinkPanel",
+      main: "link-panel.css",
+      dependencies: [typoCss, "panel.css"],
+    },
+    { component: "List", main: "list.css", dependencies: [typoCss] },
+    { component: "Loader", main: "loader.css" },
+    {
+      component: "Modal",
+      main: "modal.css",
+      dependencies: ["button.css"],
+    },
+    {
+      component: "Pagination",
+      main: "pagination.css",
+      dependencies: [typoCss, "button.css"],
+    },
+    { component: "Panel", main: "panel.css" },
+    { component: "Popover", main: "popover.css" },
+    { component: "Provider", main: "" },
+    { component: "Radio", main: formCss, dependencies: [typoCss] },
+    { component: "RadioGroup", main: formCss, dependencies: [typoCss] },
+    { component: "ReadMore", main: "read-more.css", dependencies: [typoCss] },
+    { component: "Search", main: formCss, dependencies: [typoCss] },
+    { component: "Select", main: formCss, dependencies: [typoCss] },
+    { component: "Stepper", main: "stepper.css", dependencies: [typoCss] },
+    { component: "Switch", main: formCss, dependencies: [typoCss] },
+    { component: "Table", main: "table.css", dependencies: [typoCss] },
+    { component: "Tabs", main: "tabs.css", dependencies: [typoCss] },
+    { component: "Tag", main: "tag.css", dependencies: [typoCss] },
+    { component: "TextField", main: formCss, dependencies: [typoCss] },
+    { component: "Textarea", main: formCss, dependencies: [typoCss] },
+    {
+      component: "ToggleGroup",
+      main: "toggle-group.css",
+      dependencies: [typoCss],
+    },
+    { component: "Tooltip", main: "tooltip.css", dependencies: [typoCss] },
+    {
+      component: "UNSAFE_DatePicker",
+      main: "date.css",
+      dependencies: [typoCss, "button.css", "popover.css"],
+    },
+    {
+      component: "UNSAFE_MonthPicker",
+      main: "date.css",
+      dependencies: [typoCss, "button.css", "popover.css"],
+    },
+  ],
+};
+
+module.exports = {
+  StyleMappings,
+  typoCss,
+  formCss,
+  componentsCss,
+  rootDir,
+  globalDir,
+  componentDir,
+};

@navikt/core/css/config/bundle.js

@@ -0,0 +1,159 @@
+const fs = require("fs");
+const path = require("path");
+const fastglob = require("fast-glob");
+const { camelCase } = require("lodash");
+const postcss = require("postcss");
+const autoprefixer = require("autoprefixer");
+const combineSelectors = require("postcss-combine-duplicated-selectors");
+const cssImports = require("postcss-import");
+const cssnano = require("cssnano");
+const getDirName = require("path").dirname;
+const version = require("../package.json").version;
+const {
+  StyleMappings,
+  componentsCss,
+  formCss,
+  rootDir,
+  globalDir,
+  componentDir,
+} = require("./_mappings.js");
+
+run();
+
+/**
+ * Postcss-plugins
+ * - cssImports: Inline of imports from other css files
+ * - combineSelectors: Combine selectors with the same properties, removes duplicates
+ * Minified-versions:
+ * - autoprefixer: Add vendor prefixes, uses browserlist in package.json
+ * - cssnano: css-minification
+ */
+async function run() {
+  [`${rootDir}/version/${version}`, globalDir, componentDir].forEach((dir) => {
+    if (!fs.existsSync(path.resolve(__dirname, `../${dir}`))) {
+      fs.mkdirSync(path.resolve(__dirname, `../${dir}`), { recursive: true });
+    }
+  });
+
+  await bundleMonolith();
+  await bundleComponents();
+  await bundleFragments();
+  await bundleMinified();
+  copyToVersionFolder();
+}
+
+async function bundleMonolith() {
+  const indexSrc = path.resolve(__dirname, "../index.css");
+  const indexDist = path.resolve(__dirname, `../${rootDir}/index.css`);
+
+  const css = fs.readFileSync(indexSrc);
+  const result = await postcss([cssImports, combineSelectors]).process(css, {
+    from: indexSrc,
+    to: indexDist,
+  });
+
+  fs.writeFileSync(indexDist, result.css);
+}
+
+/**
+ * Bundle Components together for flexible import-options
+ */
+async function bundleComponents() {
+  const indexSrc = path.resolve(__dirname, "../index.css");
+  const indexDist = path.resolve(__dirname, `../${rootDir}/${componentsCss}`);
+
+  const css = fs.readFileSync(indexSrc);
+
+  /* Remove @charset, baseline */
+  const cssString = css.toString().split("\n").slice(2).join("\n");
+
+  const result = await postcss([cssImports, combineSelectors]).process(
+    cssString,
+    {
+      from: indexSrc,
+      to: indexDist,
+    }
+  );
+
+  fs.writeFileSync(indexDist, result.css);
+}
+
+/**
+ * Postcss-plugins
+ * - cssImports: Handle inline of imports from other css files
+ * - combineSelectors: Combine selectors with the same properties
+ */
+async function bundleFragments() {
+  const files = buildFragmentFiles();
+
+  for (let file of files) {
+    const css = fs.readFileSync(file.input, { encoding: "utf-8" });
+    const result = await postcss([cssImports, combineSelectors]).process(css, {
+      from: file.input,
+      to: file.output,
+    });
+
+    fs.writeFileSync(file.output, result.css);
+  }
+}
+
+function buildFragmentFiles() {
+  const files = fastglob
+    .sync("*.css", { cwd: ".", ignore: "**/*.min.css" })
+    .map((fileN) => path.basename(fileN))
+    .map((x) => ({
+      input: path.resolve(__dirname, `../${x}`),
+      output: path.resolve(
+        __dirname,
+        `../${componentDir}/${camelCase(x.replace("css", ""))
+          .toLowerCase()
+          .replace(/ /g, "")}.css`
+      ),
+    }));
+
+  StyleMappings.baseline.forEach(({ main }) => {
+    files.push({
+      input: `baseline/${main}`,
+      output: `${globalDir}/${main}`,
+    });
+  });
+
+  files.push({
+    input: "form/index.css",
+    output: `${componentDir}/${formCss}`,
+  });
+
+  return files;
+}
+
+async function bundleMinified() {
+  const files = fastglob
+    .sync("**/*.css", { cwd: `./${rootDir}`, ignore: "**/*.min.css" })
+    .map((x) => ({
+      input: `${rootDir}/${x}`,
+      output: `${rootDir}/${x}`.replace("css", "min.css"),
+    }));
+
+  for (let file of files) {
+    const css = fs.readFileSync(file.input, { encoding: "utf-8" });
+    const result = await postcss([autoprefixer, cssnano]).process(css, {
+      from: file.input,
+      to: file.output,
+    });
+
+    fs.writeFileSync(file.output, result.css);
+  }
+}
+
+function copyToVersionFolder() {
+  const files = fastglob.sync("**/*.css", { cwd: `./${rootDir}` });
+
+  for (let file of files) {
+    const css = fs.readFileSync(`${rootDir}/${file}`, { encoding: "utf-8" });
+
+    const filename = `${rootDir}/version/${version}/${file}`;
+    fs.mkdirSync(getDirName(filename), { recursive: true });
+
+    fs.writeFileSync(filename, css);
+  }
+}

@navikt/core/css/config/get-version.js

@@ -0,0 +1,4 @@
+const packageJson = require("../package.json");
+
+/* Make package-version accessible for github-workflow */
+console.log(packageJson.version);

@navikt/core/css/form/fieldset.css

@@ -18,6 +18,10 @@
   margin-top: 0;
 }
 
+.navds-fieldset__legend {
+  padding: 0;
+}
+
 .navds-fieldset:disabled > .navds-fieldset__legend,
 .navds-fieldset:disabled > .navds-fieldset__description {
   opacity: 0.3;

@navikt/core/css/index.css

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@import "baseline/baseline.css";
+@import "baseline/index.css";
 @import "typography.css";
 @import "grid.css";
 @import "accordion.css";

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "2.8.16",
+  "version": "2.9.2",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -11,21 +11,37 @@
     "access": "public",
     "provenance": true
   },
+  "files": [
+    "*",
+    "!dist/version",
+    "!config/bundle.js"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/navikt/aksel.git"
   },
   "main": "./dist/index.css",
   "scripts": {
-    "build": "postcss --use postcss-import postcss-combine-duplicated-selectors -o dist/index.css index.css",
-    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
+    "build": "node config/bundle.js",
+    "watch": "nodemon --ignore dist -e css --watch . --exec \"yarn build\"",
+    "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.8.16",
+    "@navikt/ds-tokens": "^2.9.2",
+    "cssnano": "6.0.0",
+    "fast-glob": "3.2.11",
+    "lodash": "4.17.21",
+    "nodemon": "^2.0.12",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.0",
     "postcss-cli": "^9.0.0",
     "postcss-combine-duplicated-selectors": "10.0.3",
     "postcss-import": "^14.1.0"
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

@navikt/core/css/typography.css

@@ -1,7 +1,3 @@
-[data-theme="dark"] {
-  --ac-typo-error-text: var(--a-red-300);
-}
-
 /* Heading */
 .navds-heading {
   font-weight: var(--a-font-weight-bold);
@@ -186,6 +182,11 @@
   margin-bottom: var(--a-spacing-2);
 }
 
+[data-theme="dark"].navds-error-message,
+[data-theme="dark"] .navds-error-message {
+  --a-text-danger: var(--a-red-300);
+}
+
 .navds-error-message {
   color: var(--ac-typo-error-text, var(--a-text-danger));
 }

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @navikt/ds-react
 
+## 2.9.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.9.2
+  - @navikt/ds-icons@2.9.2
+
+## 2.9.1
+
+### Patch Changes
+
+- [#1944](https://github.com/navikt/aksel/pull/1944) [`1afdee453`](https://github.com/navikt/aksel/commit/1afdee453fbba20ec280dc868c8aa1ae2a92132d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - ExpansionCard støtter nå aria-labelledby
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.9.1
+  - @navikt/ds-icons@2.9.1
+
+## 2.9.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.9.0
+  - @navikt/ds-icons@2.9.0
+
 ## 2.8.16
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.8.16",
+  "version": "2.9.2",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
-    "@navikt/aksel-icons": "^2.8.16",
-    "@navikt/ds-icons": "^2.8.16",
+    "@navikt/aksel-icons": "^2.9.2",
+    "@navikt/ds-icons": "^2.9.2",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/react/src/expansion-card/ExpansionCard.tsx

@@ -25,7 +25,7 @@ interface ExpansionCardComponent
   Content: ExpansionCardContentType;
 }
 
-export interface ExpansionCardProps
+interface ExpansionCardCommonProps
   extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /**
@@ -49,9 +49,16 @@ export interface ExpansionCardProps
   /**
    * Since ExpansionCard is a section-element, accessible name is required.
    */
-  ["aria-label"]: string;
 }
 
+type ExpansionCardConditionalProps =
+  | {
+      ["aria-label"]: string;
+    }
+  | {
+      ["aria-labelledby"]: string;
+    };
+
 export type ExpansionCardContextProps = {
   open: boolean;
   toggleOpen: () => void;
@@ -64,6 +71,9 @@ export const ExpansionCardContext = createContext<ExpansionCardContextProps>({
   size: "medium",
 });
 
+export type ExpansionCardProps = ExpansionCardCommonProps &
+  ExpansionCardConditionalProps;
+
 export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
   (
     {

@navikt/core/react/src/form/Textarea.tsx

@@ -13,7 +13,7 @@ export interface TextareaProps
     React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   /**
    * Allowed character-count for content
-   * @note This is just a visual validator, you need to set actual character-limits if needed
+   * @note This is just a visual indicator! You will need to handle actual character-limits/validation if needed
    */
   maxLength?: number;
   /**

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-tailwind
 
+## 2.9.2
+
+## 2.9.1
+
+## 2.9.0
+
 ## 2.8.16
 
 ## 2.8.15

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "2.8.16",
+  "version": "2.9.2",
   "description": "Tailwind config based on @navikt/ds-tokens",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.8.16",
+    "@navikt/ds-tokens": "^2.9.2",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-tokens
 
+## 2.9.2
+
+## 2.9.1
+
+## 2.9.0
+
 ## 2.8.16
 
 ## 2.8.15

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "2.8.16",
+  "version": "2.9.2",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-icons
 
+## 2.9.2
+
+## 2.9.1
+
+## 2.9.0
+
 ## 2.8.16
 
 ## 2.8.15

@navikt/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "2.8.16",
+  "version": "2.9.2",
   "description": "Aksel icons for NAV",
   "author": "Aksel | NAV designsystem team",
   "repository": {
@@ -50,7 +50,7 @@
     "@types/jest": "^29.0.0",
     "@types/lodash.startcase": "^4.4.6",
     "@types/rimraf": "3.0.2",
-    "axios": "^0.21.3",
+    "axios": "1.3.6",
     "concurrently": "7.2.1",
     "copyfiles": "^2.4.1",
     "dotenv": "^10.0.0",

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css-internal
 
+## 2.9.2
+
+## 2.9.1
+
+## 2.9.0
+
 ## 2.8.16
 
 ## 2.8.15

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "2.8.16",
+  "version": "2.9.2",
   "description": "CSS for NAV internal Designsystem-components",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @navikt/ds-react-internal
 
+## 2.9.2
+
+### Patch Changes
+
+- [#1948](https://github.com/navikt/aksel/pull/1948) [`b1e18fd72`](https://github.com/navikt/aksel/commit/b1e18fd7249105f18354952b8f64d37108b4d730) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Timeline bruker nå norsk locale for Labels
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.9.2
+  - @navikt/ds-icons@2.9.2
+
+## 2.9.1
+
+### Patch Changes
+
+- Updated dependencies [[`1afdee453`](https://github.com/navikt/aksel/commit/1afdee453fbba20ec280dc868c8aa1ae2a92132d)]:
+  - @navikt/ds-react@2.9.1
+  - @navikt/ds-icons@2.9.1
+
+## 2.9.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.9.0
+  - @navikt/ds-icons@2.9.0
+
 ## 2.8.16
 
 ### Patch Changes

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "2.8.16",
+  "version": "2.9.2",
   "description": "Aksel react components for internal UIs in NAV",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -36,8 +36,8 @@
     "watch": "tsc --watch -p tsconfig.esm.json"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.8.16",
-    "@navikt/ds-react": "^2.8.16",
+    "@navikt/ds-icons": "^2.9.2",
+    "@navikt/ds-react": "^2.9.2",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1"
   },

@navikt/internal/react/src/timeline/AxisLabels.tsx

@@ -14,6 +14,7 @@ import {
   startOfYear,
   subDays,
 } from "date-fns";
+import nbLocale from "date-fns/locale/nb";
 import React from "react";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { isVisible } from "./utils";
@@ -42,7 +43,7 @@ export const dayLabels = (
       return {
         direction: direction,
         horizontalPosition: horizontalPosition,
-        label: format(day, "MM.dd"),
+        label: format(day, "dd.MM", { locale: nbLocale }),
         date: day,
         width: width,
       };
@@ -69,7 +70,7 @@ export const monthLabels = (
     return {
       direction: direction,
       horizontalPosition: horizontalPosition,
-      label: format(month, "MMM yy"),
+      label: format(month, "MMM yy", { locale: nbLocale }),
       date: month,
       width: width,
     };

aksel.nav.no/package.json

@@ -15,15 +15,15 @@
     "website"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^2.8.16",
-    "@navikt/ds-codemod": "^2.8.16",
-    "@navikt/ds-css": "^2.8.16",
-    "@navikt/ds-css-internal": "^2.8.16",
-    "@navikt/ds-icons": "^2.8.16",
-    "@navikt/ds-react": "^2.8.16",
-    "@navikt/ds-react-internal": "^2.8.16",
-    "@navikt/ds-tailwind": "^2.8.16",
-    "@navikt/ds-tokens": "^2.8.16"
+    "@navikt/aksel-icons": "^2.9.2",
+    "@navikt/ds-codemod": "^2.9.2",
+    "@navikt/ds-css": "^2.9.2",
+    "@navikt/ds-css-internal": "^2.9.2",
+    "@navikt/ds-icons": "^2.9.2",
+    "@navikt/ds-react": "^2.9.2",
+    "@navikt/ds-react-internal": "^2.9.2",
+    "@navikt/ds-tailwind": "^2.9.2",
+    "@navikt/ds-tokens": "^2.9.2"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"

aksel.nav.no/website/components/sanity-modules/frontpage-blocks/Card.tsx

@@ -7,6 +7,7 @@ import { Tag } from "./Tag";
 import cl from "clsx";
 import { getImage } from "components/website-modules/utils/get-image";
 import { urlFor } from "@/sanity/interface";
+import { withErrorBoundary } from "@/error-boundary";
 
 export type ArticleT = {
   _key: string;
@@ -27,7 +28,7 @@ export type ArticleT = {
   contributors?: { title: string }[];
 };
 
-export const Card = ({ article }: { article: ArticleT }) => {
+const Card = ({ article }: { article: ArticleT }) => {
   const date = article.publishedAt ? article.publishedAt : article._updatedAt;
 
   const showFooter = ["aksel_artikkel", "aksel_blogg"].includes(article._type);
@@ -117,7 +118,7 @@ export const Card = ({ article }: { article: ArticleT }) => {
         </div>
         {article.ingress ? (
           <BodyShort className="mt-2">{article.ingress}</BodyShort>
-        ) : article.seo.meta ? (
+        ) : article.seo?.meta ? (
           <BodyShort className="mt-2">{article.seo.meta}</BodyShort>
         ) : null}
         {showFooter && (
@@ -134,3 +135,5 @@ export const Card = ({ article }: { article: ArticleT }) => {
     </div>
   );
 };
+
+export default withErrorBoundary(Card, "FrontpageBlockCard");

aksel.nav.no/website/components/sanity-modules/frontpage-blocks/Latest.tsx

@@ -7,7 +7,7 @@ import { getImage } from "components/website-modules/utils/get-image";
 import { getAuthors } from "components/website-modules/LatestBloggs";
 import { dateStr, logNav } from "@/utils";
 import { Tag } from "./Tag";
-import { Card, ArticleT } from "./Card";
+import Card, { ArticleT } from "./Card";
 import cl from "clsx";
 import { urlFor } from "@/sanity/interface";
 

aksel.nav.no/website/components/website-modules/icon-page/Page.tsx

@@ -105,7 +105,7 @@ export const IconPage = ({ name }: { name: string }) => {
           id="hovedinnhold"
           className="min-h-[80vh] focus:outline-none"
         >
-          <div className="mx-auto mb-40 grid w-full max-w-screen-2xl px-4 pt-20 sm:px-6">
+          <div className="mx-auto grid w-full max-w-screen-2xl px-4 pb-40 pt-20 sm:px-6">
             <div>
               <div>
                 <h1 className="text-deepblue-700 my-0 w-fit text-5xl font-bold">

aksel.nav.no/website/package.json

@@ -27,15 +27,15 @@
   },
   "dependencies": {
     "@sanity/block-content-to-react": "^3.0.0",
-    "@sanity/client": "^5.4.0",
+    "@sanity/client": "^5.4.2",
     "@sanity/code-input": "4.1.0",
     "@sanity/color-input": "^3.0.2",
-    "@sanity/icons": "2.2.2",
+    "@sanity/icons": "2.3.1",
     "@sanity/image-url": "1.0.2",
     "@sanity/preview-kit": "^1.4.0",
     "@sanity/table": "1.0.1",
-    "@sanity/ui": "^1.3.1",
-    "@sanity/vision": "3.8.3",
+    "@sanity/ui": "^1.3.2",
+    "@sanity/vision": "3.9.1",
     "@svgr/webpack": "^5.5.0",
     "amplitude-js": "^8.21.5",
     "boring-avatars": "1.7.0",
@@ -54,7 +54,7 @@
     "react-modal": "3.15.1",
     "react-responsive-masonry": "^2.1.7",
     "recharts": "^2.2.0",
-    "sanity": "3.8.3",
+    "sanity": "3.9.1",
     "sanity-plugin-asset-source-unsplash": "^1.0.6",
     "sanity-plugin-iframe-pane": "^2.3.0",
     "sanity-plugin-media": "^2.0.5",

examples/shadow-dom/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@navikt/ds-css": "2.8.16",
-    "@navikt/ds-react": "2.8.16",
+    "@navikt/ds-css": "2.9.2",
+    "@navikt/ds-react": "2.9.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

package.json

@@ -25,6 +25,7 @@
     "@navikt/codemod",
     "@navikt/icons",
     "@navikt/aksel-icons",
+    "@navikt/aksel",
     "@navikt/community/*",
     "examples/*",
     "aksel.nav.no"
@@ -132,6 +133,7 @@
       "examples",
       "esm",
       "cjs",
+      "dist",
       "**/codemod/**/*.js"
     ]
   },