Version Packages (#1845)

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

.github/ISSUE_TEMPLATE/update-icon.yml

@@ -1,7 +1,7 @@
 name: Innspill til ikon
 description: Send inn innspill til ikon
-title: "[Innspill til ikon]: "
-labels: ["forespørsel 🥰", "nytt ✨"]
+title: "[Tilbakemelding på ikon]: "
+labels: ["forespørsel 🥰", "ikoner 🖼️"]
 assignees:
   - olejorgenbakken
 body:

.github/workflows/aksel-dev.yml

@@ -40,6 +40,10 @@ jobs:
   build_and_deploy:
     name: Build and deploy to dev-gcp
     runs-on: ubuntu-20.04
+    permissions:
+      packages: "write"
+      contents: "read"
+      id-token: "write"
     steps:
       - uses: actions/setup-node@v3
         with:
@@ -51,6 +55,7 @@ jobs:
           echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
           echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
           echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
+          echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env
 
       - name: Restore cache
         uses: actions/cache@v3
@@ -68,6 +73,13 @@ jobs:
           yarn boot
           yarn workspace aksel.nav.no build:next
 
+      - name: Upload static files to NAV CDN
+        uses: navikt/frontend/actions/cdn-upload/v1@main
+        with:
+          cdn-team-name: aksel
+          source: ./aksel.nav.no/website/.next/static
+          destination: "/website/_next"
+
       - name: Login to GitHub Container Registry
         uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
         with:

.github/workflows/aksel-prod.yml

@@ -72,6 +72,10 @@ jobs:
   build_and_deploy:
     name: Build and deploy to prod-gcp
     runs-on: ubuntu-latest
+    permissions:
+      packages: "write"
+      contents: "read"
+      id-token: "write"
     steps:
       - uses: actions/setup-node@v3
         with:
@@ -83,6 +87,7 @@ jobs:
           echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
           echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
           echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
+          echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env
 
       - name: Restore cache
         uses: actions/cache@v3
@@ -104,6 +109,13 @@ jobs:
       - name: Build application
         run: yarn workspace aksel.nav.no build:next
 
+      - name: Upload static files to NAV CDN
+        uses: navikt/frontend/actions/cdn-upload/v1@main
+        with:
+          cdn-team-name: aksel
+          source: ./aksel.nav.no/website/.next/static
+          destination: "/website/_next"
+
       - name: Login to GitHub Container Registry
         uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
         with:

.github/workflows/codeql.yml

@@ -1,71 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [main, next]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [main]
-  schedule:
-    - cron: "41 8 * * 6"
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: ["javascript"]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
-        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-
-      # Initializes the CodeQL tools for scanning.
-      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
-        with:
-          languages: ${{ matrix.language }}
-          # If you wish to specify custom queries, you can do so here or in a config file.
-          # By default, queries listed here will override any specified in a config file.
-          # Prefix the list here with "+" to use these queries and those in the config file.
-
-          # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-          # queries: security-extended,security-and-quality
-
-      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-      # If this step fails, then you should remove it and run the build manually (see below)
-      - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
-
-      # ℹ️ Command-line programs to run using the OS shell.
-      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
-
-      #   If the Autobuild fails above, remove it and uncomment the following three lines.
-      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
-
-      # - run: |
-      #   echo "Run, Build Application using script"
-      #   ./location_of_script_within_repo/buildscript.sh
-
-      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2

.storybook/indexer.ts

@@ -0,0 +1,33 @@
+import { loadCsf } from "@storybook/csf-tools";
+import { readFileSync } from "fs";
+
+module.exports = (indexers) => {
+  const csfIndexer = async (fileName: string, opts) => {
+    const code = readFileSync(fileName, "utf-8").toString();
+    return loadCsf(code, { ...opts, fileName }).parse();
+  };
+
+  const exampleIndexer = async (fileName: string, opts) => {
+    let code = readFileSync(fileName, "utf-8").toString();
+
+    code = code.replace("export const args =", "const args =");
+
+    code += `\nexport default { title: "Eksempler/${fileName
+      .split("pages/eksempler/")[1]
+      .replace(".tsx", "")}"  };\n`;
+
+    return loadCsf(code, { ...opts, fileName }).parse();
+  };
+
+  return [
+    ...(indexers || []),
+    {
+      test: /(stories|story)\.[tj]sx?$/,
+      indexer: csfIndexer,
+    },
+    {
+      test: /pages\/eksempler\/|(".+")|(.+.tsx)$/,
+      indexer: exampleIndexer,
+    },
+  ];
+};

.storybook/layout.css

@@ -19,3 +19,13 @@
 .rowgap-wrap {
   flex-wrap: wrap;
 }
+
+.css-warning {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  border-radius: 6px;
+  padding: 1.5rem;
+  background-color: var(--a-surface-warning-subtle);
+  border: 1px solid var(--a-border-warning);
+}

.storybook/main.cjs

@@ -1,4 +1,10 @@
+const storyIndexers = require("./indexer");
+
+const path = require("path");
+const { mergeConfig } = require("vite");
+
 module.exports = {
+  storyIndexers,
   devServer: {
     stats: "errors-only",
   },
@@ -7,6 +13,12 @@ module.exports = {
   stories: () => [
     "../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
     "./*.stories.mdx",
+    ...(process.env.STORYBOOK_STORIES === "all"
+      ? [
+          "../aksel.nav.no/website/components/**/*.stories.tsx",
+          "../aksel.nav.no/website/pages/eksempler/**/*.tsx",
+        ]
+      : []),
   ],
   addons: [
     "@storybook/addon-a11y",
@@ -44,4 +56,26 @@ module.exports = {
     checkOptions: {},
     reactDocgen: false,
   },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      define: { "process.env": {} },
+      resolve: {
+        alias: [
+          /*
+          // Example
+          {
+            find: "@components",
+            replacement: path.resolve(__dirname, "./src/components"),
+          }, */
+          {
+            find: "components",
+            replacement: path.resolve(
+              __dirname,
+              "../aksel.nav.no/website/components"
+            ),
+          },
+        ],
+      },
+    });
+  },
 };

.storybook/preview.jsx

@@ -40,14 +40,24 @@ export const globalTypes = {
   },
 };
 
-export const withTheme = (StoryFn, context) => (
-  <div
-    data-theme={context.parameters.theme || context.globals.theme || "light"}
-    lang="no"
-    id="root"
-  >
-    <StoryFn />
-  </div>
-);
+export const withTheme = (StoryFn, context) => {
+  const foundCss =
+    context.parameters.fileName.startsWith("./@navikt") &&
+    document.querySelector('[data-vite-dev-id$="dist/tw.css"]');
+  return (
+    <div
+      data-theme={context.parameters.theme || context.globals.theme || "light"}
+      lang="no"
+      id="root"
+    >
+      {foundCss && (
+        <div className="css-warning">
+          OBS! Ser ut som CSS fra aksel.nav.no er lastet. Refresh siden!
+        </div>
+      )}
+      <StoryFn />
+    </div>
+  );
+};
 
 export const decorators = [withTheme];

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @navikt/ds-codemod
 
+## 2.6.1
+
+## 2.6.0
+
+## 2.5.1
+
+## 2.5.0
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+## 2.3.1
+
+## 2.3.0
+
+## 2.2.0
+
 ## 2.1.7
 
 ## 2.1.6

@navikt/codemod/package.json

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

@navikt/community/navno/package.json

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

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @navikt/ds-css
 
+## 2.6.1
+
+## 2.6.0
+
+## 2.5.1
+
+## 2.5.0
+
+## 2.4.3
+
+### Patch Changes
+
+- [`f962bc781`](https://github.com/navikt/aksel/commit/f962bc7816027c24e334d9754c3e07cda951cf56) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset disabled-opacity bug i select for Chrome
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+### Minor Changes
+
+- [#1807](https://github.com/navikt/aksel/pull/1807) [`70eeb24b3`](https://github.com/navikt/aksel/commit/70eeb24b38ac871c7f2e31e1621b949669c401b6) Thanks [@kschieren](https://github.com/kschieren)! - Added List component
+
+## 2.3.1
+
+### Patch Changes
+
+- [`241b2e678`](https://github.com/navikt/aksel/commit/241b2e678f1f40909e2d36fe095dcbce8673f174) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset feil bruk av fallback-tokens i textarea, timeline
+
+## 2.3.0
+
+### Minor Changes
+
+- [#1813](https://github.com/navikt/aksel/pull/1813) [`7702c6527`](https://github.com/navikt/aksel/commit/7702c65275a4d86a8260852d091e6dd4cfe9217c) Thanks [@ingfo](https://github.com/ingfo)! - Fiksa sentrering av tekst i Select i Firefox
+
+### Patch Changes
+
+- [`51b62cca7`](https://github.com/navikt/aksel/commit/51b62cca7b857e92669cd0b09e620b131faf80e5) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Select small 34px høyde -> 32px
+
+## 2.2.0
+
+### Minor Changes
+
+- [#1789](https://github.com/navikt/aksel/pull/1789) [`c0929a534`](https://github.com/navikt/aksel/commit/c0929a534dc8effece5435f8be550cb7931a52b1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Button og ToggleGroup har nå en neutral-variant, oppdatert neutral-tokens
+
 ## 2.1.7
 
 ## 2.1.6

@navikt/core/css/accordion.css

@@ -14,7 +14,7 @@
   background: transparent;
   cursor: pointer;
   border: none;
-  border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-strong));
+  border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-divider));
 }
 
 .navds-accordion__header:focus {
@@ -24,7 +24,7 @@
 
 .navds-accordion__header:hover {
   color: var(--ac-accordion-header-text-hover, var(--a-text-action-on-action-subtle));
-  border-color: var(--ac-accordion-header-border-hover, var(--a-border-strong));
+  border-color: var(--ac-accordion-header-border-hover, var(--a-border-default));
 }
 
 .navds-accordion__header-content {
@@ -39,11 +39,11 @@
 
 .navds-accordion__content {
   padding: var(--a-spacing-3) var(--a-spacing-3) 18px;
-  border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-strong));
+  border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-divider));
 }
 
 .navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
-  border-color: var(--ac-accordion-content-border-open, var(--a-border-strong));
+  border-color: var(--ac-accordion-content-border-open, var(--a-border-default));
 }
 
 .navds-accordion__expand-icon {

@navikt/core/css/alert.css

@@ -24,6 +24,7 @@
   font-size: 1.5rem;
   align-self: flex-start;
   height: var(--a-font-line-height-xlarge);
+  background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
 }
 
 .navds-alert--small > .navds-alert__icon {
@@ -41,6 +42,10 @@
   background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
 }
 
+.navds-alert--warning > .navds-alert__icon {
+  background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 32%, 0, transparent);
+}
+
 .navds-alert--info {
   border-color: var(--ac-alert-info-border, var(--a-border-info));
   background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));

@navikt/core/css/button.css

@@ -112,13 +112,39 @@
   background-color: var(--ac-button-primary-bg, var(--a-surface-action));
 }
 
+/*************************
+ * .navds-button--primary-neutral *
+ *************************/
+
+.navds-button--primary-neutral {
+  background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
+  color: var(--ac-button-primary-neutral-text, var(--a-text-on-neutral));
+}
+
+.navds-button--primary-neutral:hover {
+  background-color: var(--ac-button-primary-neutral-hover-bg, var(--a-surface-neutral-hover));
+}
+
+.navds-button--primary-neutral:active {
+  background-color: var(--ac-button-primary-neutral-active-bg, var(--a-surface-neutral-active));
+}
+
+.navds-button--primary-neutral:focus {
+  box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+}
+
+.navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
+}
+
 /**************************
 * .navds-button--secondary *
  **************************/
 
 .navds-button--secondary {
   color: var(--ac-button-secondary-text, var(--a-text-action));
-  background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
+  background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
   box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
 }
 
@@ -144,10 +170,47 @@
 .navds-button--secondary:where(:disabled, .navds-button--disabled),
 .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
   color: var(--ac-button-secondary-text, var(--a-text-action));
-  background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
+  background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
   box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
 }
 
+/**************************
+* .navds-button--secondary-neutral *
+ **************************/
+
+.navds-button--secondary-neutral {
+  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+  background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
+}
+
+.navds-button--secondary-neutral:hover {
+  background-color: var(--ac-button-secondary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-button--secondary-neutral:focus {
+  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+}
+
+.navds-button--secondary-neutral:active {
+  color: var(--ac-button-secondary-neutral-active-text, var(--a-text-on-neutral));
+  background-color: var(--ac-button-secondary-neutral-active-bg, var(--a-surface-neutral-active));
+  box-shadow: none;
+}
+
+.navds-button--secondary-neutral:focus:active {
+  box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
+    var(--a-shadow-focus);
+}
+
+.navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+  background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
+}
+
 /****************************
  * .navds-button--tertiary *
  ****************************/
@@ -188,6 +251,46 @@
   box-shadow: none;
 }
 
+/****************************
+ * .navds-button--tertiary-neutral *
+ ****************************/
+
+.navds-button--tertiary-neutral {
+  color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
+}
+
+.navds-button--tertiary-neutral:hover {
+  color: var(--ac-button-tertiary-neutral-hover-text, var(--a-text-default));
+  background-color: var(--ac-button-tertiary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-button--tertiary-neutral:focus {
+  box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+}
+
+.navds-button--tertiary-neutral:active {
+  color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
+  background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
+  box-shadow: inset 0 0 0 1px var(--a-surface-default);
+}
+
+.navds-button--tertiary-neutral:active:hover {
+  background-color: var(--ac-button-tertiary-neutral-active-hover-bg, var(--a-surface-neutral-active));
+}
+
+.navds-button--tertiary-neutral:active:focus {
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+}
+
+.navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
+  background: none;
+  box-shadow: none;
+}
+
 /*************************
  * .navds-button--danger *
  *************************/

@navikt/core/css/form/radio-checkbox.css

@@ -28,7 +28,7 @@
 .navds-radio__label::before {
   content: "";
   background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-strong));
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
   width: 1.5rem;
   height: 1.5rem;
   border-radius: var(--a-border-radius-medium);
@@ -67,7 +67,7 @@
 
 .navds-checkbox__input:focus + .navds-checkbox__label::before,
 .navds-radio__input:focus + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-strong)), var(--a-shadow-focus);
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
 }
 
 .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,

@navikt/core/css/form/select.css

@@ -2,7 +2,7 @@
   appearance: none;
   background-color: var(--ac-select-bg, var(--a-surface-default));
   border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-select-border, var(--a-border-strong));
+  border: 1px solid var(--ac-select-border, var(--a-border-default));
   width: 100%;
   box-sizing: border-box;
   min-height: 48px;
@@ -25,7 +25,6 @@
   position: relative;
   display: flex;
   width: 100%;
-  align-items: center;
   color: var(--a-text-default);
 }
 
@@ -34,12 +33,12 @@
   font-size: 1rem;
   right: 0.5rem;
   pointer-events: none;
+  align-self: center;
 }
 
 .navds-form-field--small .navds-select__input {
   min-height: 32px;
-  padding: 0.25rem;
-  padding-right: 2rem;
+  padding: 0 2rem 0 0.25rem;
 }
 
 /**
@@ -50,9 +49,21 @@
   border-color: var(--ac-select-error-border, var(--a-surface-danger));
 }
 
+/**
+  Disabled
+*/
 .navds-select__input:disabled {
   background-color: var(--ac-select-bg, var(--a-surface-default));
-  border: 1px solid var(--ac-select-border, var(--a-border-strong));
+  border: 1px solid var(--ac-select-border, var(--a-border-default));
   box-shadow: none;
   cursor: not-allowed;
+
+  /* Chrome-fix */
+  opacity: 1;
+  color: var(--a-text-default);
+}
+
+/* Chrome-fix */
+.navds-select__input:disabled > option {
+  color: var(--a-text-default);
 }

@navikt/core/css/form/textarea.css

@@ -63,7 +63,7 @@
 }
 
 .navds-textarea__counter--error {
-  color: var(--ac-textarea-counter-error-text, var(--a-surface-danger));
+  color: var(--ac-textarea-counter-error-text, var(--a-text-danger));
 }
 
 .navds-textarea--resize .navds-textarea__input {

@navikt/core/css/index.css

@@ -26,3 +26,4 @@
 @import "stepper.css";
 @import "table.css";
 @import "tabs.css";
+@import "list.css";

@navikt/core/css/link.css

@@ -6,12 +6,8 @@
   gap: var(--a-spacing-1);
 }
 
-.navds-alert--info .navds-link {
-  color: var(--a-text-default);
-}
-
-.navds-alert--error .navds-link,
-.navds-confirmation-panel--error .navds-link {
+.navds-alert .navds-link,
+.navds-confirmation-panel .navds-link {
   color: var(--a-text-default);
 }
 

@navikt/core/css/list.css

@@ -0,0 +1,66 @@
+.navds-list ul,
+.navds-list ol {
+  padding: 0;
+}
+
+.navds-list--nested {
+  margin: var(--a-spacing-4) 0 var(--a-spacing-8) 0;
+}
+
+.navds-list li:not(.navds-list__item--noMargin) {
+  margin-bottom: var(--a-spacing-5);
+}
+
+.navds-list:last-child > ul > li:last-child,
+.navds-list:last-child > ol > li:last-child {
+  margin-bottom: 0;
+}
+
+.navds-list ul .navds-list__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--a-spacing-3);
+  padding-left: 0;
+}
+
+.navds-list ul .navds-list__item::marker {
+  content: none;
+}
+
+.navds-list ol .navds-list__item-marker--icon {
+  grid-column: 1 / 2;
+  display: flex;
+}
+
+.navds-list .navds-list__item-marker--bullet {
+  display: flex;
+  margin-top: 6px;
+  grid-column: 1 / 2;
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.navds-list__item-marker--icon {
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.navds-list ul .navds-list__item-content {
+  grid-column: 2 / 3;
+}
+
+.navds-list ol {
+  padding-left: var(--a-spacing-2);
+}
+
+.navds-list ol li {
+  padding-left: var(--a-spacing-1);
+  margin-left: var(--a-spacing-2);
+}
+
+.navds-list ol li::marker {
+  font-weight: var(--a-font-weight-bold);
+  font-size: var(--a-font-size-medium);
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "2.1.7",
+  "version": "2.6.1",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -20,7 +20,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.1.7",
+    "@navikt/ds-tokens": "^2.6.1",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.0",
     "postcss-cli": "^9.0.0",

@navikt/core/css/toggle-group.css

@@ -6,7 +6,7 @@
 
 .navds-toggle-group {
   border-radius: 9px;
-  background-color: var(--ac-toggle-group-bg, var(--a-surface-default));
+  background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
   box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
   padding: calc(var(--a-spacing-1) + 1px);
   gap: var(--a-spacing-1);
@@ -15,6 +15,11 @@
   grid-auto-columns: 1fr;
 }
 
+.navds-toggle-group--neutral {
+  background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
+}
+
 .navds-toggle-group__button {
   display: inline-flex;
   align-items: center;
@@ -23,17 +28,27 @@
   min-height: 48px;
   border: none;
   cursor: pointer;
-  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-default));
+  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
   color: var(--ac-toggle-group-button-text, var(--a-text-default));
   border-radius: var(--a-border-radius-medium);
   min-width: fit-content;
 }
 
+.navds-toggle-group--neutral > .navds-toggle-group__button {
+  background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent));
+  color: var(--ac-toggle-group-button-neutral-text, var(c));
+}
+
 .navds-toggle-group__button:hover {
   background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
   color: var(--ac-toggle-group-button-hover-text, var(--a-text-action-on-action-subtle));
 }
 
+.navds-toggle-group--neutral > .navds-toggle-group__button:hover {
+  background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+  color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
+}
+
 .navds-toggle-group__button:focus {
   outline: none;
   box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
@@ -43,6 +58,11 @@
   box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
 }
 
+.navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
+  box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
+    0 0 0 4px var(--a-border-focus);
+}
+
 .navds-toggle-group__button-inner {
   display: flex;
   align-items: center;
@@ -59,6 +79,12 @@
   color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
 }
 
+.navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
+.navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
+  background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral));
+  color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
+}
+
 .navds-toggle-group--small > .navds-toggle-group__button {
   padding: 0.375rem;
   min-height: 32px;

@navikt/core/css/tokens.json

@@ -10,13 +10,13 @@
     "--ac-alert-success-bg": "--a-surface-success-subtle"
   },
   "accordion": {
-    "--ac-accordion-header-border": "--a-border-strong",
+    "--ac-accordion-header-border": "--a-border-divider",
     "--ac-accordion-header-text-hover": "--a-text-action-on-action-subtle",
-    "--ac-accordion-header-border-hover": "--a-border-strong",
+    "--ac-accordion-header-border-hover": "--a-border-default",
     "--ac-accordion-item-bg-open": "--a-surface-action-subtle",
     "--ac-accordion-item-border-open": "--a-surface-action-subtle",
-    "--ac-accordion-content-border": "--a-border-strong",
-    "--ac-accordion-content-border-open": "--a-border-strong"
+    "--ac-accordion-content-border": "--a-border-divider",
+    "--ac-accordion-content-border-open": "--a-border-default"
   },
   "button": {
     "--ac-button-primary-bg": "--a-surface-action",
@@ -25,7 +25,7 @@
     "--ac-button-primary-active-bg": "--a-surface-action-active",
     "--ac-button-primary-focus-border": "--a-surface-default",
     "--ac-button-secondary-text": "--a-text-action",
-    "--ac-button-secondary-bg": "--a-surface-default",
+    "--ac-button-secondary-bg": "--a-surface-transparent",
     "--ac-button-secondary-border": "--a-border-action",
     "--ac-button-secondary-hover-text": "--a-text-action-on-action-subtle",
     "--ac-button-secondary-hover-bg": "--a-surface-action-subtle-hover",
@@ -45,7 +45,27 @@
     "--ac-button-danger-hover-bg": "--a-surface-danger-hover",
     "--ac-button-danger-active-bg": "--a-surface-danger-active",
     "--ac-button-loader-stroke": "currentColor",
-    "--ac-button-primary-loader-stroke-bg": "rgb(255 255 255 / 0.3)"
+    "--ac-button-primary-loader-stroke-bg": "rgb(255 255 255 / 0.3)",
+    "--ac-button-primary-neutral-bg": "--a-surface-neutral",
+    "--ac-button-primary-neutral-text": "--a-text-on-neutral",
+    "--ac-button-primary-neutral-hover-bg": "--a-surface-neutral-hover",
+    "--ac-button-primary-neutral-active-bg": "--a-surface-neutral-active",
+    "--ac-button-primary-neutral-focus-border": "--a-surface-default",
+    "--ac-button-secondary-neutral-text": "--a-text-default",
+    "--ac-button-secondary-neutral-bg": "--a-surface-transparent",
+    "--ac-button-secondary-neutral-border": "--a-border-strong",
+    "--ac-button-secondary-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-button-secondary-neutral-focus-border": "--a-border-stron",
+    "--ac-button-secondary-neutral-active-text": "--a-text-on-neutral",
+    "--ac-button-secondary-neutral-active-bg": "--a-surface-neutral-active",
+    "--ac-button-secondary-neutral-active-focus-border": "--a-surface-default",
+    "--ac-button-tertiary-neutral-text": "--a-text-default",
+    "--ac-button-tertiary-neutral-hover-text": "--a-text-default",
+    "--ac-button-tertiary-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-button-tertiary-neutral-focus-border": "--a-border-stron",
+    "--ac-button-tertiary-neutral-active-text": "--a-text-on-neutral",
+    "--ac-button-tertiary-neutral-active-bg": "--a-surface-neutral-active",
+    "--ac-button-tertiary-neutral-active-hover-bg": "--a-surface-neutral-active"
   },
   "chat": {
     "--ac-chat-avatar-bg": "--a-bg-subtle",
@@ -109,6 +129,12 @@
     "--ac-link-active-bg": "--a-border-focus",
     "--ac-link-active-border": "--a-border-focus"
   },
+  "list": {
+    "--ac-list-marker-ul-color": "--ac-list-marker-color",
+    "--ac-list-marker-icon-color": "--ac-list-marker-color",
+    "--ac-list-marker-ol-color": "--ac-list-marker-color",
+    "--ac-list-marker-color": "--a-icon-default"
+  },
   "loader": {
     "--ac-loader-stroke": "--a-border-default",
     "--ac-loader-stroke-bg": "--a-surface-active",
@@ -221,14 +247,20 @@
     "--ac-tag-alt-3-filled-text": "--a-text-on-alt-3"
   },
   "togglegroup": {
-    "--ac-toggle-group-bg": "--a-surface-default",
+    "--ac-toggle-group-bg": "--a-surface-transparent",
     "--ac-toggle-group-border": "--a-border-default",
-    "--ac-toggle-group-button-bg": "--a-surface-default",
+    "--ac-toggle-group-button-bg": "--a-surface-transparent",
     "--ac-toggle-group-button-text": "--a-text-default",
     "--ac-toggle-group-button-hover-bg": "--a-surface-action-subtle",
     "--ac-toggle-group-button-hover-text": "--a-text-action-on-action-subtle",
     "--ac-toggle-group-selected-bg": "--a-surface-action-selected",
-    "--ac-toggle-group-selected-text": "--a-text-on-action"
+    "--ac-toggle-group-selected-text": "--a-text-on-action",
+    "--ac-toggle-group-button-neutral-bg": "--a-surface-transparent",
+    "--ac-toggle-group-button-neutral-text": "--ac-toggle-group-button-neutral-text",
+    "--ac-toggle-group-button-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-toggle-group-button-neutral-hover-text": "--a-text-default",
+    "--ac-toggle-group-neutral-selected-bg": "--a-surface-neutral",
+    "--ac-toggle-group-neutral-selected-text": "--a-text-on-neutral"
   },
   "tooltip": {
     "--ac-tooltip-bg": "--a-surface-inverted",
@@ -253,7 +285,7 @@
   },
   "checkbox-radio": {
     "--ac-radio-checkbox-bg": "--a-surface-default",
-    "--ac-radio-checkbox-border": "--a-border-strong",
+    "--ac-radio-checkbox-border": "--a-border-default",
     "--ac-radio-checkbox-action": "--a-surface-action",
     "--ac-radio-checkbox-action-hover-bg": "--a-surface-action-subtle",
     "--ac-radio-checkbox-error-border": "--a-border-danger",
@@ -269,7 +301,7 @@
   },
   "select": {
     "--ac-select-bg": "--a-surface-default",
-    "--ac-select-border": "--a-border-strong",
+    "--ac-select-border": "--a-border-default",
     "--ac-select-hover-bg": "--a-border-action",
     "--ac-select-error-border": "--a-surface-danger"
   },
@@ -298,7 +330,7 @@
     "--ac-textarea-placeholder": "--a-text-subtle",
     "--ac-textarea-hover-border": "--a-border-action",
     "--ac-textarea-counter-text": "--a-text-subtle",
-    "--ac-textarea-counter-error-text": "--a-surface-danger",
+    "--ac-textarea-counter-error-text": "--a-text-danger",
     "--ac-textarea-error-border": "--a-border-danger"
   }
 }

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,98 @@
 # @navikt/ds-react
 
+## 2.6.1
+
+### Patch Changes
+
+- [`1c5e06438`](https://github.com/navikt/aksel/commit/1c5e06438ce9ff8225d5b2b2bf1f94348dfefe9c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Ny onSearchClick-prop i Search for lettere submit-handling
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.6.1
+
+## 2.6.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.6.0
+
+## 2.5.1
+
+### Patch Changes
+
+- [`ac1e69b34`](https://github.com/navikt/aksel/commit/ac1e69b342ae207db2e80e3058555c56902e5832) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :recycle: Refaktorert nested-list logikk
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.5.1
+
+## 2.5.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.5.0
+
+## 2.4.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+- Updated dependencies [[`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8)]:
+  - @navikt/ds-icons@2.4.2
+
+## 2.4.1
+
+### Patch Changes
+
+- [#1827](https://github.com/navikt/aksel/pull/1827) [`98c06b0be`](https://github.com/navikt/aksel/commit/98c06b0be20debff9969af874d5239ec920fa401) Thanks [@kschieren](https://github.com/kschieren)! - Added fixedWeeks prop to standalone datepicker
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.4.1
+
+## 2.4.0
+
+### Minor Changes
+
+- [#1807](https://github.com/navikt/aksel/pull/1807) [`70eeb24b3`](https://github.com/navikt/aksel/commit/70eeb24b38ac871c7f2e31e1621b949669c401b6) Thanks [@kschieren](https://github.com/kschieren)! - Added List component
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.4.0
+
+## 2.3.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.3.1
+
+## 2.3.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.3.0
+
+## 2.2.0
+
+### Minor Changes
+
+- [#1789](https://github.com/navikt/aksel/pull/1789) [`c0929a534`](https://github.com/navikt/aksel/commit/c0929a534dc8effece5435f8be550cb7931a52b1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Button og ToggleGroup har nå en neutral-variant, oppdatert neutral-tokens
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.2.0
+
 ## 2.1.7
 
 ### Patch Changes

@navikt/core/react/package.json

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

@navikt/core/react/src/alert/alert.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Alert } from ".";
-import { BodyLong, Heading as DsHeading } from "..";
+import { BodyLong, Heading as DsHeading, Link } from "..";
 
 const meta: Meta<typeof Alert> = {
   title: "ds-react/Alert",
@@ -135,3 +135,15 @@ export const Heading = () => {
     </div>
   );
 };
+
+export const Links = () => {
+  return (
+    <div className="colgap">
+      {variants.map((variant, i) => (
+        <Alert key={variant} variant={variant}>
+          <Link href="#">Id elit esse enim reprehenderit</Link>
+        </Alert>
+      ))}
+    </div>
+  );
+};

@navikt/core/react/src/button/Button.tsx

@@ -13,7 +13,14 @@ export interface ButtonProps
    * Changes design and interaction-visuals
    * @default "primary"
    */
-  variant?: "primary" | "secondary" | "tertiary" | "danger";
+  variant?:
+    | "primary"
+    | "primary-neutral"
+    | "secondary"
+    | "secondary-neutral"
+    | "tertiary"
+    | "tertiary-neutral"
+    | "danger";
   /**
    * Changes padding, height and font-size
    * @default medium

@navikt/core/react/src/button/button.stories.tsx

@@ -10,11 +10,22 @@ export default {
   },
 };
 
-const variants: Array<"primary" | "secondary" | "tertiary" | "danger"> = [
+const variants: Array<
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "primary-neutral"
+  | "secondary-neutral"
+  | "tertiary-neutral"
+  | "danger"
+> = [
   "primary",
   "secondary",
   "tertiary",
   "danger",
+  "primary-neutral",
+  "secondary-neutral",
+  "tertiary-neutral",
 ];
 
 const varSwitch = {
@@ -22,6 +33,9 @@ const varSwitch = {
   secondary: "Secondary",
   tertiary: "Tertiary",
   danger: "Danger",
+  "primary-neutral": "Primary",
+  "secondary-neutral": "Secondary",
+  "tertiary-neutral": "Tertiary",
 };
 
 export const Default = {
@@ -51,7 +65,15 @@ export const Default = {
     variant: {
       control: {
         type: "radio",
-        options: ["primary", "secondary", "tertiary", "danger"],
+        options: [
+          "primary",
+          "secondary",
+          "tertiary",
+          "danger",
+          "primary-neutral",
+          "secondary-neutral",
+          "tertiary-neutral",
+        ],
       },
     },
     size: {
@@ -126,7 +148,8 @@ export const Loading = {
     </div>
   ),
 
-  args: { chromatic: { delay: 300 } },
+  args: { chromatic: { disableSnapshot: true } },
+  chromatic: { disableSnapshot: true },
 };
 
 export const Icon = () => (
@@ -252,5 +275,6 @@ export const LoadingWithAs = {
     </div>
   ),
 
-  args: { chromatic: { delay: 300 } },
+  args: { chromatic: { disableSnapshot: true } },
+  chromatic: { disableSnapshot: true },
 };

@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx

@@ -24,6 +24,11 @@ interface DatePickerStandaloneDefaultProps
    * Datepicker classname
    */
   className?: string;
+  /**
+   * If datepicker should be fixed to 6 weeks, regardless of actual weeks in month
+   * @default true
+   */
+  fixedWeeks?: boolean;
 }
 
 export type DatePickerStandaloneProps = DatePickerStandaloneDefaultProps &
@@ -50,6 +55,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
       id,
       defaultSelected,
       onSelect,
+      fixedWeeks = true,
       ...rest
     },
     ref
@@ -113,7 +119,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
             weekend: "rdp-day__weekend",
           }}
           showWeekNumber={showWeekNumber}
-          fixedWeeks
+          fixedWeeks={fixedWeeks}
           showOutsideDays
           {...omit(rest, ["onSelect"])}
         />

@navikt/core/react/src/form/search/Search.tsx

@@ -48,6 +48,10 @@ export interface SearchProps
    * Callback for click on clear-button or Escape keydown
    */
   onClear?: (e: SearchClearEvent) => void;
+  /**
+   * Callback for Search-button submit
+   */
+  onSearchClick?: (value: string) => void;
   /**
    * aria-label on clear button
    * @default "Tøm"
@@ -76,6 +80,7 @@ export interface SearchContextProps {
   disabled?: boolean;
   size: "medium" | "small";
   variant: "primary" | "secondary" | "simple";
+  handleClick: () => void;
 }
 
 export const SearchContext = React.createContext<SearchContextProps | null>(
@@ -106,6 +111,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       variant = "primary",
       defaultValue,
       onChange,
+      onSearchClick,
       ...rest
     } = props;
 
@@ -146,6 +152,10 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       wrapperRef
     );
 
+    const handleClick = () => {
+      onSearchClick?.(`${value ?? internalValue}`);
+    };
+
     return (
       <div
         ref={setWrapperRef}
@@ -221,6 +231,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               size,
               disabled: inputProps.disabled,
               variant,
+              handleClick,
             }}
           >
             {children ? children : variant !== "simple" && <SearchButton />}

@navikt/core/react/src/form/search/SearchButton.tsx

@@ -17,7 +17,7 @@ export type SearchButtonType = React.ForwardRefExoticComponent<
 >;
 
 const SearchButton: SearchButtonType = forwardRef(
-  ({ className, children, disabled, ...rest }, ref) => {
+  ({ className, children, disabled, onClick, ...rest }, ref) => {
     const context = useContext(SearchContext);
 
     if (context === null) {
@@ -25,7 +25,7 @@ const SearchButton: SearchButtonType = forwardRef(
       return null;
     }
 
-    const { size, variant } = context;
+    const { size, variant, handleClick } = context;
 
     return (
       <Button
@@ -36,6 +36,10 @@ const SearchButton: SearchButtonType = forwardRef(
         variant={variant === "secondary" ? "secondary" : "primary"}
         className={cl("navds-search__button-search", className)}
         disabled={context?.disabled ?? disabled}
+        onClick={(e) => {
+          handleClick();
+          onClick?.(e);
+        }}
         icon={
           <Search
             {...(children ? { "aria-hidden": true } : { title: "Søk" })}

@navikt/core/react/src/form/search/search.stories.tsx

@@ -46,6 +46,7 @@ export const Default = {
           variant={props.variant}
           hideLabel={props.hideLabel}
           error={props.error}
+          onSearchClick={console.log}
         />
       </div>
     );

@navikt/core/react/src/index.ts

@@ -1,27 +1,28 @@
 export * from "./accordion";
 export * from "./alert";
-export * from "./provider";
 export * from "./button";
+export * from "./chat";
+export * from "./chips";
 export * from "./date";
 export * from "./form";
 export * from "./grid";
-export * from "./help-text";
 export * from "./guide-panel";
+export * from "./help-text";
 export * from "./link";
 export * from "./link-panel";
+export * from "./list";
 export * from "./loader";
 export * from "./modal";
 export * from "./pagination";
 export * from "./panel";
 export * from "./popover";
+export * from "./provider";
 export * from "./read-more";
-export * from "./chat";
-export * from "./chips";
 export * from "./stepper";
-export * from "./tag";
-export * from "./toggle-group";
 export * from "./table";
 export * from "./tabs";
+export * from "./tag";
+export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";

@navikt/core/react/src/list/List.tsx

@@ -0,0 +1,97 @@
+import cl from "clsx";
+import React, { createContext, forwardRef, useContext } from "react";
+import { BodyShort, Heading } from "../typography";
+import { useId } from "../util/useId";
+import { ListItem, ListItemType } from "./ListItem";
+
+export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * HTML list element to render
+   * @default "ul"
+   */
+  as?: "ul" | "ol";
+  /**
+   * List heading title
+   */
+  title?: string;
+  /**
+   * List heading description
+   */
+  description?: string;
+  /**
+   * Allows setting a different HTML h-tag
+   * @default "h3"
+   */
+  headingTag?: React.ElementType<any>;
+}
+
+export interface ListComponent
+  extends React.ForwardRefExoticComponent<ListProps> {
+  Item: ListItemType;
+}
+
+interface ListContextProps {
+  listType: "ul" | "ol";
+  isNested: boolean | null;
+}
+
+export const ListContext = createContext<ListContextProps>({
+  listType: "ul",
+  isNested: null,
+});
+
+export const List = forwardRef<HTMLDivElement, ListProps>(
+  (
+    {
+      children,
+      className,
+      as: ListTag = "ul",
+      title,
+      description,
+      headingTag = "h3",
+      ...rest
+    },
+    ref
+  ) => {
+    const ariaId = useId();
+
+    const { isNested } = useContext(ListContext);
+
+    return (
+      <ListContext.Provider
+        value={{
+          listType: ListTag,
+          isNested: isNested === null ? false : true,
+        }}
+      >
+        <div
+          {...rest}
+          ref={ref}
+          className={cl("navds-list", className, {
+            "navds-list--nested": isNested === null ? false : true,
+          })}
+        >
+          {title && (
+            <Heading id={`tittel-${ariaId}`} size="small" as={headingTag}>
+              {title}
+            </Heading>
+          )}
+          {description && (
+            <BodyShort id={`description-${ariaId}`}>{description}</BodyShort>
+          )}
+          <ListTag
+            aria-labelledby={title && `tittel-${ariaId}`}
+            aria-describedby={description && `description-${ariaId}`}
+          >
+            {children}
+          </ListTag>
+        </div>
+      </ListContext.Provider>
+    );
+  }
+) as ListComponent;
+
+List.Item = ListItem;
+
+export default List;

@navikt/core/react/src/list/ListItem.tsx

@@ -0,0 +1,83 @@
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
+import { BodyShort, Label } from "../typography";
+import { ListContext } from "./List";
+
+export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+  /**
+   * Content for description of the list item
+   */
+  children: React.ReactNode;
+  /**
+   * Title for the list item
+   */
+  title?: string;
+  /*
+   * Icon to be used as list marker for unordered lists.
+   */
+  icon?: React.ReactNode;
+}
+
+export interface ListItemType
+  extends React.ForwardRefExoticComponent<
+    ListItemProps & React.RefAttributes<HTMLLIElement>
+  > {}
+
+export const ListItem: ListItemType = forwardRef(
+  ({ className, children, title, icon, ...rest }, ref) => {
+    const { listType, isNested } = useContext(ListContext);
+
+    if (listType === "ol" && icon) {
+      console.warn(
+        "<List />: Icon prop is not supported for ordered lists. Please remove the icon prop."
+      );
+    }
+
+    return (
+      <li
+        {...rest}
+        ref={ref}
+        className={cl("navds-list__item", className, {
+          "navds-list__item--noMargin": isNested,
+        })}
+      >
+        {listType === "ul" && (
+          <div
+            className={cl({
+              "navds-list__item-marker--icon": icon,
+              "navds-list__item-marker--bullet": !icon,
+            })}
+          >
+            {icon ? (
+              icon
+            ) : (
+              <svg
+                width="6"
+                height="6"
+                viewBox="0 0 6 6"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden
+                focusable={false}
+                role="img"
+              >
+                <rect width="6" height="6" rx="3" fill="currentColor" />
+              </svg>
+            )}
+          </div>
+        )}
+
+        <BodyShort as="div" size="small" className="navds-list__item-content">
+          {title && (
+            <Label as="p" size="small">
+              {title}
+            </Label>
+          )}
+          {children}
+        </BodyShort>
+      </li>
+    );
+  }
+);
+
+export default ListItem;

@navikt/core/react/src/list/index.ts

@@ -0,0 +1,2 @@
+export { default as List } from "./List";
+export type { ListProps } from "./List";

@navikt/core/react/src/list/list.stories.tsx

@@ -0,0 +1,148 @@
+import {
+  BabyChangingRoom,
+  Braille,
+  Cognition,
+  Refresh,
+} from "@navikt/ds-icons";
+import { Meta } from "@storybook/react";
+import React from "react";
+import { List } from "..";
+
+export default {
+  title: "ds-react/List",
+  component: List,
+} as Meta;
+
+export const Default = {
+  render: () => {
+    return (
+      <List>
+        <List.Item title="Lorem Ipsum Dolor Sit Amet">
+          Lorem Ipsum Dolor Sit Amet
+        </List.Item>
+        <List.Item title="Consectetur Adipiscing Elit">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+      </List>
+    );
+  },
+};
+
+export const Ordered = {
+  render: () => {
+    return (
+      <List as="ol">
+        <List.Item title="Lorem Ipsum Dolor Sit Amet">
+          Lorem Ipsum Dolor Sit Amet
+        </List.Item>
+        <List.Item title="Consectetur Adipiscing Elit">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Ut Labore Et Dolore Magna Aliqua">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Enim Ad Minim Veniam">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Quis Nostrud Exercitation Ullamco">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Laboris Nisi Ut Aliquip Ex Ea Commodo">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Duis Aute Irure Dolor In Reprehenderit">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Voluptate Velit Esse Cillum Dolore">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Eu Fugiat Nulla Pariatur">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+      </List>
+    );
+  },
+};
+
+export const WithHeading = {
+  render: () => {
+    return (
+      <List
+        title="Lorem Ipsum Dolor Sit Amet"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+      >
+        <List.Item title="Lorem Ipsum Dolor Sit Amet">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item title="Consectetur Adipiscing Elit">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+      </List>
+    );
+  },
+};
+
+export const Icons = {
+  render: () => {
+    return (
+      <List>
+        <List.Item
+          title="Lorem Ipsum Dolor Sit Amet"
+          icon={<Braille aria-hidden />}
+        >
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item
+          title="Consectetur Adipiscing Elit"
+          icon={<Cognition aria-hidden />}
+        >
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item icon={<BabyChangingRoom aria-hidden />}>
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item icon={<Refresh aria-hidden />}>
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+      </List>
+    );
+  },
+};
+
+export const Nested = {
+  render: () => {
+    return (
+      <List>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          <List>
+            <List.Item title="Lorem Ipsum Dolor Sit Amet">
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+            <List.Item title="Consectetur Adipiscing Elit">
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+            <List.Item>
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+            <List.Item>
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+          </List>
+        </List.Item>
+        <List.Item>
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+      </List>
+    );
+  },
+};

@navikt/core/react/src/tag/tag.stories.tsx

@@ -84,6 +84,7 @@ export const Default = {
 
   args: {
     children: "Id elit esse",
+    variant: "info",
   },
 };
 

@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx

@@ -13,6 +13,12 @@ export default {
         options: ["medium", "small"],
       },
     },
+    variant: {
+      control: {
+        type: "radio",
+        options: ["action", "neutral"],
+      },
+    },
   },
 } as Meta;
 
@@ -88,6 +94,29 @@ export const Compositions = () => {
   );
 };
 
+export const Variants = () => {
+  const [activeValue, setActiveValue] = useState("ulest");
+
+  return (
+    <div className="colgap">
+      <ToggleGroup
+        variant="action"
+        value={activeValue}
+        onChange={setActiveValue}
+      >
+        {Items(true, true)}
+      </ToggleGroup>
+      <ToggleGroup
+        variant="neutral"
+        value={activeValue}
+        onChange={setActiveValue}
+      >
+        {Items(true, true)}
+      </ToggleGroup>
+    </div>
+  );
+};
+
 export const Small = () => {
   const [activeValue, setActiveValue] = useState("ulest");
 

@navikt/core/react/src/toggle-group/ToggleGroup.tsx

@@ -36,6 +36,11 @@ export interface ToggleGroupProps
    * Label describing ToggleGroup
    */
   label?: React.ReactNode;
+  /**
+   * Changes design and interaction-visuals
+   * @default "action"
+   */
+  variant?: "action" | "neutral";
 }
 
 interface ToggleGroupComponent
@@ -65,6 +70,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
       defaultValue,
       id,
       "aria-describedby": desc,
+      variant = "action",
       ...rest
     },
     ref
@@ -114,7 +120,11 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
             value={value ?? groupValue}
             defaultValue={defaultValue}
             ref={ref}
-            className={cl("navds-toggle-group", `navds-toggle-group--${size}`)}
+            className={cl(
+              "navds-toggle-group",
+              `navds-toggle-group--${size}`,
+              `navds-toggle-group--${variant}`
+            )}
             {...(describeBy && { "aria-describedby": describeBy })}
             role="radiogroup"
             type="single"

@navikt/core/react/src/util/AnimateHeight.tsx

@@ -42,7 +42,13 @@ function showContent(element: HTMLDivElement | null, height: Height) {
 // ------------------ Component
 
 interface AnimateHeightProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * @default 250ms
+   */
   duration?: number;
+  /**
+   * @default ease
+   */
   easing?: string;
   height: Height;
   innerClassName?: string;

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @navikt/ds-tailwind
 
+## 2.6.1
+
+## 2.6.0
+
+## 2.5.1
+
+## 2.5.0
+
+### Minor Changes
+
+- [#1832](https://github.com/navikt/aksel/pull/1832) [`8893b5c82`](https://github.com/navikt/aksel/commit/8893b5c82daf7c23897019fda912e702a1f05eaa) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Breakpoint-tokens for ds-tokens og ds-tailwind
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+## 2.3.1
+
+## 2.3.0
+
+## 2.2.0
+
 ## 2.1.7
 
 ## 2.1.6

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "2.1.7",
+  "version": "2.6.1",
   "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.1.7",
+    "@navikt/ds-tokens": "^2.6.1",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tailwind/src/getBreakpoints.ts

@@ -0,0 +1,11 @@
+import Reducer from "./reducer";
+
+export const getBreakpoints = (tokens: { [key: string]: string | number }) => {
+  const breakpoints = Reducer(tokens, ["breakpoint"]);
+
+  return Object.keys(breakpoints)
+    .filter((key) => !key.includes("xs") && !key.includes("-down"))
+    .reduce((cur, key) => {
+      return Object.assign(cur, { [key]: breakpoints[key] });
+    }, {});
+};

@navikt/core/tailwind/src/index.ts

@@ -2,6 +2,7 @@
 import * as TokensBuild from "@navikt/ds-tokens/dist/tokens";
 import { writeFileSync } from "fs";
 import { getColors } from "./colors";
+import { getBreakpoints } from "./getBreakpoints";
 import kebabCase from "./kebabCase";
 import Reducer from "./reducer";
 
@@ -16,6 +17,7 @@ const tokens = Object.entries(TokensBuild).reduce(
 const config = {
   theme: {
     colors: getColors(tokens),
+    screen: getBreakpoints(tokens),
     extend: {
       spacing: Reducer(tokens, ["spacing"]),
       zIndex: Reducer(tokens, ["z-index"]),

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @navikt/ds-tokens
 
+## 2.6.1
+
+## 2.6.0
+
+## 2.5.1
+
+## 2.5.0
+
+### Minor Changes
+
+- [#1832](https://github.com/navikt/aksel/pull/1832) [`8893b5c82`](https://github.com/navikt/aksel/commit/8893b5c82daf7c23897019fda912e702a1f05eaa) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Breakpoint-tokens for ds-tokens og ds-tailwind
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+## 2.3.1
+
+## 2.3.0
+
+## 2.2.0
+
+### Minor Changes
+
+- [#1787](https://github.com/navikt/aksel/pull/1787) [`43463444b`](https://github.com/navikt/aksel/commit/43463444b8a2d178bf1435b88ad2d8719b41e65b) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Justeringer i semantiske fargetokens, statusfarger nå mer tydelig
+
+- [#1789](https://github.com/navikt/aksel/pull/1789) [`c0929a534`](https://github.com/navikt/aksel/commit/c0929a534dc8effece5435f8be550cb7931a52b1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Button og ToggleGroup har nå en neutral-variant, oppdatert neutral-tokens
+
 ## 2.1.7
 
 ## 2.1.6

@navikt/core/tokens/config/tests/validate-docs.test.js

@@ -1,6 +1,6 @@
-const docs = require("../docs.json");
-const DsTokens = require("../dist/tokens-cjs.js");
-const kebabCase = require("./kebabCase.js");
+const docs = require("../../docs.json");
+const DsTokens = require("../../dist/tokens-cjs.js");
+const kebabCase = require("../kebabCase.js");
 
 const flatten = Object.values(docs).reduce((old, val) => [...old, ...val], []);
 
@@ -8,6 +8,33 @@ const notFound = [];
 const removed = [];
 const wrongValues = [];
 
+describe("Validate tokens dokumentation", () => {
+  flatten.forEach((x) => {
+    it(`${x} should be documented`, () => {
+      expect(
+        Object.keys(DsTokens).find(
+          (y) => `--${kebabCase(y)}`.replace("--az-", "--a-z-") === x.name
+        )
+      ).toBeDefined();
+    });
+  });
+
+  Object.entries(DsTokens).forEach(([key, val]) => {
+    const formatedKey = `--${kebabCase(key)}`.replace("--az-", "--a-z-");
+    it(`${formatedKey} should exist in docs`, () => {
+      const tokenInDoc = flatten.find((x) => x.name === formatedKey);
+      expect(tokenInDoc).toBeDefined();
+    });
+
+    it(`${formatedKey} should have correct value ${val}`, () => {
+      const formatedKey = `--${kebabCase(key)}`.replace("--az-", "--a-z-");
+
+      const tokenInDoc = flatten.find((x) => x.name === formatedKey);
+      expect(tokenInDoc?.value).toEqual(val);
+    });
+  });
+});
+
 flatten.forEach((x) => {
   !Object.keys(DsTokens).find(
     (y) => `--${kebabCase(y)}`.replace("--az-", "--a-z-") === x.name

@navikt/core/tokens/docs.json

@@ -1,4 +1,47 @@
 {
+  "breakpoints": [
+    { "name": "--a-breakpoint-xs", "value": "0" },
+    {
+      "name": "--a-breakpoint-sm",
+      "value": "480px",
+      "description": "@media (min-width: 480px)"
+    },
+    {
+      "name": "--a-breakpoint-sm-down",
+      "value": "479px",
+      "description": "@media (max-width: 479px)"
+    },
+    {
+      "name": "--a-breakpoint-md",
+      "value": "768px",
+      "description": "@media (min-width: 768px)"
+    },
+    {
+      "name": "--a-breakpoint-md-down",
+      "value": "767px",
+      "description": "@media (max-width: 767px)"
+    },
+    {
+      "name": "--a-breakpoint-lg",
+      "value": "1024px",
+      "description": "@media (min-width: 1024px)"
+    },
+    {
+      "name": "--a-breakpoint-lg-down",
+      "value": "1023px",
+      "description": "@media (max-width: 1023px)"
+    },
+    {
+      "name": "--a-breakpoint-xl",
+      "value": "1280px",
+      "description": "@media (min-width: 1280px)"
+    },
+    {
+      "name": "--a-breakpoint-xl-down",
+      "value": "1279px",
+      "description": "@media (max-width: 1279px)"
+    }
+  ],
   "font": [
     {
       "name": "--a-font-family",
@@ -69,7 +112,7 @@
   ],
   "global-red": [
     { "name": "--a-red-50", "value": "rgba(255, 230, 230, 1)" },
-    { "name": "--a-red-100", "value": "rgba(255, 184, 184, 1)" },
+    { "name": "--a-red-100", "value": "rgba(255, 194, 194, 1)" },
     { "name": "--a-red-200", "value": "rgba(246, 130, 130, 1)" },
     { "name": "--a-red-300", "value": "rgba(242, 92, 92, 1)" },
     { "name": "--a-red-400", "value": "rgba(222, 46, 46, 1)" },
@@ -134,7 +177,7 @@
     { "name": "--a-orange-300", "value": "rgba(255, 193, 102, 1)" },
     { "name": "--a-orange-400", "value": "rgba(255, 170, 51, 1)" },
     { "name": "--a-orange-500", "value": "rgba(255, 145, 0, 1)" },
-    { "name": "--a-orange-600", "value": "rgba(212, 123, 0, 1)" },
+    { "name": "--a-orange-600", "value": "rgba(199, 115, 0, 1)" },
     { "name": "--a-orange-700", "value": "rgba(168, 100, 0, 1)" },
     { "name": "--a-orange-800", "value": "rgba(125, 76, 0, 1)" },
     { "name": "--a-orange-900", "value": "rgba(82, 51, 0, 1)" }
@@ -154,7 +197,7 @@
 
   "semantic-border": [
     { "name": "--a-border-default", "value": "rgba(0, 0, 0, 0.44)" },
-    { "name": "--a-border-strong", "value": "rgba(0, 0, 0, 0.56)" },
+    { "name": "--a-border-strong", "value": "rgba(0, 0, 0, 0.65)" },
     { "name": "--a-border-divider", "value": "rgba(0, 0, 0, 0.19)" },
     { "name": "--a-border-subtle", "value": "rgba(0, 0, 0, 0.1)" },
     { "name": "--a-border-subtle-hover", "value": "rgba(0, 0, 0, 0.19)" },
@@ -163,7 +206,7 @@
     { "name": "--a-border-selected", "value": "rgba(0, 103, 197, 1)" },
     { "name": "--a-border-success", "value": "rgba(6, 137, 58, 1)" },
     { "name": "--a-border-danger", "value": "rgba(195, 0, 0, 1)" },
-    { "name": "--a-border-warning", "value": "rgba(212, 123, 0, 1)" },
+    { "name": "--a-border-warning", "value": "rgba(199, 115, 0, 1)" },
     { "name": "--a-border-info", "value": "rgba(54, 141, 168, 1)" },
     { "name": "--a-border-on-inverted", "value": "rgba(229, 229, 229, 1)" },
     { "name": "--a-border-on-inverted-subtle", "value": "rgba(89, 89, 89, 1)" },
@@ -173,7 +216,7 @@
       "value": "rgba(153, 195, 255, 1)"
     },
     { "name": "--a-border-alt-1", "value": "rgba(130, 105, 162, 1)" },
-    { "name": "--a-border-alt-2", "value": "rgba(193, 203, 51, 1)" },
+    { "name": "--a-border-alt-2", "value": "rgba(127, 137, 0, 1)" },
     { "name": "--a-border-alt-3", "value": "rgba(0, 91, 130, 1)" }
   ],
   "semantic-text": [
@@ -200,8 +243,8 @@
   ],
   "semantic-surface": [
     { "name": "--a-surface-default", "value": "rgba(255, 255, 255, 1)" },
-    { "name": "--a-surface-hover", "value": "rgba(0, 0, 0, 0.03)" },
-    { "name": "--a-surface-active", "value": "rgba(0, 0, 0, 0.05)" },
+    { "name": "--a-surface-hover", "value": "rgba(0, 0, 0, 0.05)" },
+    { "name": "--a-surface-active", "value": "rgba(0, 0, 0, 0.1)" },
     { "name": "--a-surface-selected", "value": "rgba(230, 240, 255, 1)" },
     { "name": "--a-surface-subtle", "value": "rgba(247, 247, 247, 1)" },
     { "name": "--a-surface-transparent", "value": "rgba(255, 255, 255, 0)" },
@@ -227,42 +270,43 @@
       "name": "--a-surface-neutral-subtle-hover",
       "value": "rgba(0, 0, 0, 0.1)"
     },
-    { "name": "--a-surface-neutral", "value": "rgba(112, 112, 112, 1)" },
-    { "name": "--a-surface-neutral-hover", "value": "rgba(89, 89, 89, 1)" },
-    { "name": "--a-surface-neutral-selected", "value": "rgba(89, 89, 89, 1)" },
-    { "name": "--a-surface-success-subtle", "value": "rgba(243, 252, 245, 1)" },
+    { "name": "--a-surface-neutral", "value": "rgba(89, 89, 89, 1)" },
+    { "name": "--a-surface-neutral-hover", "value": "rgba(64, 64, 64, 1)" },
+    { "name": "--a-surface-neutral-selected", "value": "rgba(38, 38, 38, 1)" },
+    { "name": "--a-surface-neutral-active", "value": "rgba(38, 38, 38, 1)" },
+    { "name": "--a-surface-success-subtle", "value": "rgba(204, 241, 214, 1)" },
     {
       "name": "--a-surface-success-subtle-hover",
-      "value": "rgba(204, 241, 214, 1)"
+      "value": "rgba(153, 222, 173, 1)"
     },
     { "name": "--a-surface-success", "value": "rgba(6, 137, 58, 1)" },
     { "name": "--a-surface-success-hover", "value": "rgba(0, 124, 46, 1)" },
-    { "name": "--a-surface-danger-subtle", "value": "rgba(255, 230, 230, 1)" },
+    { "name": "--a-surface-danger-subtle", "value": "rgba(255, 194, 194, 1)" },
     {
       "name": "--a-surface-danger-subtle-hover",
-      "value": "rgba(255, 184, 184, 1)"
+      "value": "rgba(246, 130, 130, 1)"
     },
     { "name": "--a-surface-danger", "value": "rgba(195, 0, 0, 1)" },
     { "name": "--a-surface-danger-hover", "value": "rgba(173, 0, 0, 1)" },
     { "name": "--a-surface-danger-active", "value": "rgba(140, 0, 0, 1)" },
-    { "name": "--a-surface-warning-subtle", "value": "rgba(255, 249, 240, 1)" },
+    { "name": "--a-surface-warning-subtle", "value": "rgba(255, 236, 204, 1)" },
     { "name": "--a-surface-warning", "value": "rgba(255, 145, 0, 1)" },
     {
       "name": "--a-surface-warning-subtle-hover",
-      "value": "rgba(255, 236, 204, 1)"
+      "value": "rgba(255, 215, 153, 1)"
     },
-    { "name": "--a-surface-info-subtle", "value": "rgba(235, 252, 255, 1)" },
+    { "name": "--a-surface-info-subtle", "value": "rgba(216, 249, 255, 1)" },
     {
       "name": "--a-surface-info-subtle-hover",
-      "value": "rgba(216, 249, 255, 1)"
+      "value": "rgba(181, 241, 255, 1)"
     },
     { "name": "--a-surface-info", "value": "rgba(102, 203, 236, 1)" },
     { "name": "--a-surface-alt-1", "value": "rgba(130, 105, 162, 1)" },
-    { "name": "--a-surface-alt-1-subtle", "value": "rgba(239, 236, 244, 1)" },
+    { "name": "--a-surface-alt-1-subtle", "value": "rgba(224, 216, 233, 1)" },
     { "name": "--a-surface-alt-2", "value": "rgba(193, 203, 51, 1)" },
-    { "name": "--a-surface-alt-2-subtle", "value": "rgba(253, 255, 230, 1)" },
+    { "name": "--a-surface-alt-2-subtle", "value": "rgba(249, 252, 204, 1)" },
     { "name": "--a-surface-alt-3", "value": "rgba(0, 91, 130, 1)" },
-    { "name": "--a-surface-alt-3-subtle", "value": "rgba(230, 241, 248, 1)" },
+    { "name": "--a-surface-alt-3-subtle", "value": "rgba(204, 226, 240, 1)" },
     { "name": "--a-surface-alt-3-strong", "value": "rgba(0, 52, 83, 1)" }
   ],
   "semantic-bg": [
@@ -292,11 +336,13 @@
     { "name": "--a-icon-on-success", "value": "rgba(255, 255, 255, 1)" },
     { "name": "--a-icon-danger", "value": "rgba(195, 0, 0, 1)" },
     { "name": "--a-icon-on-danger", "value": "rgba(255, 255, 255, 1)" },
-    { "name": "--a-icon-warning", "value": "rgba(212, 123, 0, 1)" },
+    { "name": "--a-icon-warning", "value": "rgba(199, 115, 0, 1)" },
     { "name": "--a-icon-on-warning", "value": "rgba(38, 38, 38, 1)" },
-    { "name": "--a-icon-info", "value": "rgba(54, 141, 168, 1)" },
+    { "name": "--a-icon-info", "value": "rgba(35, 107, 125, 1)" },
     { "name": "--a-icon-on-info", "value": "rgba(38, 38, 38, 1)" },
-    { "name": "--a-icon-alt-1", "value": "rgba(130, 105, 162, 1)" }
+    { "name": "--a-icon-alt-1", "value": "rgba(99, 70, 137, 1)" },
+    { "name": "--a-icon-alt-2", "value": "rgba(127, 137, 0, 1)" },
+    { "name": "--a-icon-alt-3", "value": "rgba(51, 128, 165, 1)" }
   ],
   "radius": [
     { "name": "--a-border-radius-small", "value": "2px" },

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "2.1.7",
+  "version": "2.6.1",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -18,11 +18,10 @@
     "docs.json"
   ],
   "scripts": {
-    "build": "node ./config/build.js > /dev/null && yarn validate-docs",
+    "build": "node ./config/build.js > /dev/null",
     "watch": "nodemon --watch src/index.js --exec \"yarn build\"",
     "token": "cd config && style-dictionary build",
-    "test": "jest",
-    "validate-docs": "node config/validate-docs.js"
+    "test": "jest"
   },
   "repository": {
     "type": "git",

@navikt/core/tokens/src/global-colors.json

@@ -112,7 +112,7 @@
         "value": "rgba(255, 230, 230, 1)"
       },
       "100": {
-        "value": "rgba(255, 184, 184, 1)"
+        "value": "rgba(255, 194, 194, 1)"
       },
       "200": {
         "value": "rgba(246, 130, 130, 1)"
@@ -287,7 +287,7 @@
         "value": "rgba(255, 145, 0, 1)"
       },
       "600": {
-        "value": "rgba(212, 123, 0, 1)"
+        "value": "rgba(199, 115, 0, 1)"
       },
       "700": {
         "value": "rgba(168, 100, 0, 1)"

@navikt/core/tokens/src/index.js

@@ -3,6 +3,17 @@ const getFontSize = (size) => `${size / baseFontSize}rem`;
 
 module.exports = {
   a: {
+    breakpoint: {
+      xs: { value: "0" },
+      sm: { value: "480px" },
+      "sm-down": { value: "479px" },
+      md: { value: "768px" },
+      "md-down": { value: "767px" },
+      lg: { value: "1024px" },
+      "lg-down": { value: "1023px" },
+      xl: { value: "1280px" },
+      "xl-down": { value: "1279px" },
+    },
     font: {
       family: { value: '"Source Sans Pro", Arial, sans-serif' },
       line: {

@navikt/core/tokens/src/semantic-colors.json

@@ -74,10 +74,10 @@
         "value": "{a.white.value}"
       },
       "hover": {
-        "value": "{a.grayalpha.50.value}"
+        "value": "{a.grayalpha.100.value}"
       },
       "active": {
-        "value": "{a.grayalpha.100.value}"
+        "value": "{a.grayalpha.200.value}"
       },
       "selected": {
         "value": "{a.blue.50.value}"
@@ -138,20 +138,23 @@
           }
         },
         "hover": {
-          "value": "{a.gray.700.value}"
+          "value": "{a.gray.800.value}"
         },
         "selected": {
-          "value": "{a.gray.700.value}"
+          "value": "{a.gray.900.value}"
+        },
+        "active": {
+          "value": "{a.gray.900.value}"
         },
         "@": {
-          "value": "{a.gray.600.value}"
+          "value": "{a.gray.700.value}"
         }
       },
 
       "success": {
         "subtle": {
-          "hover": { "value": "{a.green.100.value}" },
-          "@": { "value": "{a.green.50.value}" }
+          "hover": { "value": "{a.green.200.value}" },
+          "@": { "value": "{a.green.100.value}" }
         },
         "@": { "value": "{a.green.500.value}" },
         "hover": { "value": "{a.green.600.value}" }
@@ -159,8 +162,8 @@
 
       "danger": {
         "subtle": {
-          "hover": { "value": "{a.red.100.value}" },
-          "@": { "value": "{a.red.50.value}" }
+          "hover": { "value": "{a.red.200.value}" },
+          "@": { "value": "{a.red.100.value}" }
         },
         "hover": {
           "value": "{a.red.600.value}"
@@ -173,30 +176,30 @@
 
       "warning": {
         "subtle": {
-          "hover": { "value": "{a.orange.100.value}" },
-          "@": { "value": "{a.orange.50.value}" }
+          "hover": { "value": "{a.orange.200.value}" },
+          "@": { "value": "{a.orange.100.value}" }
         },
         "@": { "value": "{a.orange.500.value}" }
       },
 
       "info": {
         "subtle": {
-          "hover": { "value": "{a.lightblue.100.value}" },
-          "@": { "value": "{a.lightblue.50.value}" }
+          "hover": { "value": "{a.lightblue.200.value}" },
+          "@": { "value": "{a.lightblue.100.value}" }
         },
         "@": { "value": "{a.lightblue.500.value}" }
       },
 
       "alt1": {
-        "subtle": { "value": "{a.purple.50.value}" },
+        "subtle": { "value": "{a.purple.100.value}" },
         "@": { "value": "{a.purple.400.value}" }
       },
       "alt2": {
-        "subtle": { "value": "{a.limegreen.50.value}" },
+        "subtle": { "value": "{a.limegreen.100.value}" },
         "@": { "value": "{a.limegreen.400.value}" }
       },
       "alt3": {
-        "subtle": { "value": "{a.deepblue.50.value}" },
+        "subtle": { "value": "{a.deepblue.100.value}" },
         "strong": { "value": "{a.deepblue.800.value}" },
         "@": { "value": "{a.deepblue.500.value}" }
       }
@@ -206,7 +209,7 @@
         "value": "{a.grayalpha.500.value}"
       },
       "strong": {
-        "value": "{a.grayalpha.600.value}"
+        "value": "{a.grayalpha.700.value}"
       },
       "divider": {
         "value": "{a.grayalpha.300.value}"
@@ -252,7 +255,7 @@
         "value": "{a.purple.400.value}"
       },
       "alt2": {
-        "value": "{a.limegreen.400.value}"
+        "value": "{a.limegreen.700.value}"
       },
       "alt3": {
         "value": "{a.deepblue.500.value}"
@@ -286,10 +289,16 @@
         "value": "{a.orange.600.value}"
       },
       "info": {
-        "value": "{a.lightblue.700.value}"
+        "value": "{a.lightblue.800.value}"
       },
       "alt1": {
-        "value": "{a.purple.400.value}"
+        "value": "{a.purple.500.value}"
+      },
+      "alt2": {
+        "value": "{a.limegreen.700.value}"
+      },
+      "alt3": {
+        "value": "{a.deepblue.400.value}"
       },
       "on": {
         "neutral": {

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @navikt/ds-icons
 
+## 2.6.1
+
+## 2.6.0
+
+## 2.5.1
+
+## 2.5.0
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+## 2.3.1
+
+## 2.3.0
+
+## 2.2.0
+
 ## 2.1.7
 
 ## 2.1.6

@navikt/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "2.1.7",
+  "version": "2.6.1",
   "description": "Aksel icons for NAV",
   "author": "Aksel | NAV designsystem team",
   "repository": {

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @navikt/ds-css-internal
 
+## 2.6.1
+
+## 2.6.0
+
+## 2.5.1
+
+## 2.5.0
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+## 2.3.1
+
+### Patch Changes
+
+- [`241b2e678`](https://github.com/navikt/aksel/commit/241b2e678f1f40909e2d36fe095dcbce8673f174) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset feil bruk av fallback-tokens i textarea, timeline
+
+## 2.3.0
+
+## 2.2.0
+
 ## 2.1.7
 
 ## 2.1.6

@navikt/internal/css/package.json

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

@navikt/internal/css/timeline.css

@@ -246,7 +246,7 @@
 }
 
 .navdsi-timeline__zoom-button:not([aria-pressed="true"]):hover {
-  background: var(--ac-timeline-zoom-hover, var(--a-surface-action-subtle-hover));
+  background: var(--ac-timeline-zoom-bg-hover, var(--a-surface-action-subtle-hover));
 }
 
 .navdsi-timeline__zoom-button[aria-pressed="true"] {

@navikt/internal/css/tokens.json

@@ -40,7 +40,7 @@
     "--ac-timeline-pin-bg-hover": "--a-surface-danger-hover",
     "--ac-timeline-zoom-border": "--a-border-default",
     "--ac-timeline-zoom-bg": "--a-surface-default",
-    "--ac-timeline-zoom-hover": "--a-surface-action-subtle-hover",
+    "--ac-timeline-zoom-bg-hover": "--a-surface-action-subtle-hover",
     "--ac-timeline-zoom-selected-bg": "--a-surface-inverted",
     "--ac-timeline-zoom-selected-text": "--a-text-on-inverted",
     "--ac-timeline-axislabel-text": "--a-text-subtle"

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,101 @@
 # @navikt/ds-react-internal
 
+## 2.6.1
+
+### Patch Changes
+
+- [`e8b5b44f2`](https://github.com/navikt/aksel/commit/e8b5b44f28fbce79e2b17afb14c0978c2708f9ab) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Sender med onClick-event i onSelectPeriod
+
+- Updated dependencies [[`1c5e06438`](https://github.com/navikt/aksel/commit/1c5e06438ce9ff8225d5b2b2bf1f94348dfefe9c)]:
+  - @navikt/ds-react@2.6.1
+  - @navikt/ds-icons@2.6.1
+
+## 2.6.0
+
+### Minor Changes
+
+- [#1835](https://github.com/navikt/aksel/pull/1835) [`b575816e7`](https://github.com/navikt/aksel/commit/b575816e736d440f224e1e70abf851262a976981) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Controlled og defaultOpen-states for Dropdown
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.6.0
+  - @navikt/ds-icons@2.6.0
+
+## 2.5.1
+
+### Patch Changes
+
+- Updated dependencies [[`ac1e69b34`](https://github.com/navikt/aksel/commit/ac1e69b342ae207db2e80e3058555c56902e5832)]:
+  - @navikt/ds-react@2.5.1
+  - @navikt/ds-icons@2.5.1
+
+## 2.5.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.5.0
+  - @navikt/ds-icons@2.5.0
+
+## 2.4.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.4.3
+  - @navikt/ds-icons@2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+- Updated dependencies [[`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8)]:
+  - @navikt/ds-react@2.4.2
+  - @navikt/ds-icons@2.4.2
+
+## 2.4.1
+
+### Patch Changes
+
+- Updated dependencies [[`98c06b0be`](https://github.com/navikt/aksel/commit/98c06b0be20debff9969af874d5239ec920fa401)]:
+  - @navikt/ds-react@2.4.1
+  - @navikt/ds-icons@2.4.1
+
+## 2.4.0
+
+### Patch Changes
+
+- Updated dependencies [[`70eeb24b3`](https://github.com/navikt/aksel/commit/70eeb24b38ac871c7f2e31e1621b949669c401b6)]:
+  - @navikt/ds-react@2.4.0
+  - @navikt/ds-icons@2.4.0
+
+## 2.3.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.3.1
+  - @navikt/ds-icons@2.3.1
+
+## 2.3.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.3.0
+  - @navikt/ds-icons@2.3.0
+
+## 2.2.0
+
+### Patch Changes
+
+- Updated dependencies [[`c0929a534`](https://github.com/navikt/aksel/commit/c0929a534dc8effece5435f8be550cb7931a52b1)]:
+  - @navikt/ds-react@2.2.0
+  - @navikt/ds-icons@2.2.0
+
 ## 2.1.7
 
 ### Patch Changes

@navikt/internal/react/package.json

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

@navikt/internal/react/src/dropdown/Dropdown.tsx

@@ -5,7 +5,7 @@ import Menu, { MenuType } from "./Menu";
 export interface DropdownProps {
   children: React.ReactNode;
   /**
-   * Handler that is called when an item is selected.
+   * Handler called when an item is selected.
    */
   onSelect?: (element: React.MouseEvent) => void;
   /**
@@ -13,6 +13,14 @@ export interface DropdownProps {
    * @default true
    */
   closeOnSelect?: boolean;
+  /**
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Controlled state of the dropdown. When set, you will need to handle onClose and onSelect manually.
+   */
+  open?: boolean;
 }
 
 export interface DropdownType extends React.FC<DropdownProps> {
@@ -22,7 +30,7 @@ export interface DropdownType extends React.FC<DropdownProps> {
 
 export interface DropdownContextType {
   readonly isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  handleToggle: (v: boolean) => void;
   readonly anchorEl: Element | null;
   setAnchorEl: React.Dispatch<React.SetStateAction<Element | null>>;
   onSelect: (element: React.MouseEvent) => void;
@@ -30,20 +38,34 @@ export interface DropdownContextType {
 
 export const DropdownContext = createContext<DropdownContextType | null>(null);
 
-export const Dropdown = (({ children, onSelect, closeOnSelect = true }) => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+export const Dropdown = (({
+  children,
+  onSelect,
+  closeOnSelect = true,
+  defaultOpen = false,
+  open,
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
   const [anchorEl, setAnchorEl] = useState<Element | null>(null);
 
+  const handleToggle = (v: boolean) => {
+    if (open === undefined) {
+      setIsOpen(v);
+    }
+  };
+
   return (
     <DropdownContext.Provider
       value={{
-        isOpen,
-        setIsOpen,
+        isOpen: open ?? isOpen,
+        handleToggle,
         anchorEl,
         setAnchorEl,
         onSelect: (event) => {
           onSelect?.(event);
-          closeOnSelect && setIsOpen(false);
+          if (closeOnSelect) {
+            open === undefined && setIsOpen(false);
+          }
         },
       }}
     >

@navikt/internal/react/src/dropdown/Menu/GroupedList/Item.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef, useContext } from "react";
-import cl from "clsx";
 import { OverridableComponent } from "@navikt/ds-react";
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
 import { DropdownContext } from "../../Dropdown";
 
 export interface GroupedItemProps
@@ -19,6 +19,7 @@ export type GroupedItemType = OverridableComponent<
 export const GroupedItem: GroupedItemType = forwardRef(
   ({ as: Component = "button", className, ...rest }, ref) => {
     const context = useContext(DropdownContext);
+
     return (
       <dd className="navdsi-dropdown__list-item">
         <Component

@navikt/internal/react/src/dropdown/Menu/List/Item.tsx

@@ -18,6 +18,7 @@ export type ListItemType = OverridableComponent<
 export const ListItem: ListItemType = forwardRef(
   ({ as: Component = "button", className, ...rest }, ref) => {
     const context = useContext(DropdownContext);
+
     return (
       <li className="navdsi-dropdown__list-item">
         <Component

@navikt/internal/react/src/dropdown/Menu/index.tsx

@@ -1,10 +1,10 @@
-import React, { forwardRef, useContext } from "react";
-import cl from "clsx";
 import { Popover } from "@navikt/ds-react";
-import List, { ListType } from "./List";
-import GroupedList, { GroupedListType } from "./GroupedList";
-import Divider, { DividerType } from "./Divider";
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
 import { DropdownContext } from "../Dropdown";
+import Divider, { DividerType } from "./Divider";
+import GroupedList, { GroupedListType } from "./GroupedList";
+import List, { ListType } from "./List";
 
 interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -57,7 +57,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(
       return null;
     }
 
-    const { isOpen, anchorEl, setIsOpen } = context;
+    const { isOpen, anchorEl, handleToggle } = context;
 
     return (
       <Popover
@@ -70,7 +70,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(
         anchorEl={anchorEl}
         open={isOpen}
         onClose={() => {
-          setIsOpen(false);
+          handleToggle(false);
           onClose && onClose();
         }}
       />

@navikt/internal/react/src/dropdown/Toggle.tsx

@@ -23,15 +23,23 @@ export const Toggle: ToggleType = forwardRef(
       return null;
     }
 
-    const { setAnchorEl, setIsOpen, isOpen } = context;
+    const { setAnchorEl, handleToggle, isOpen } = context;
 
     return (
       <button
         {...rest}
-        ref={ref}
+        ref={(el) => {
+          setAnchorEl(el);
+
+          if (typeof ref === "function") {
+            ref(el);
+          } else if (ref != null) {
+            ref.current = el;
+          }
+        }}
         onClick={(e) => {
           setAnchorEl(e.currentTarget);
-          setIsOpen((isOpen) => !isOpen);
+          handleToggle(!isOpen);
           onClick && onClick(e);
         }}
         aria-expanded={isOpen}

@navikt/internal/react/src/dropdown/dropdown.stories.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import { Dropdown } from "..";
 import { Meta } from "@storybook/react";
+import { Button } from "@navikt/ds-react";
 
 export default {
   title: "ds-react-internal/Dropdown",
@@ -34,3 +35,57 @@ export const Default = () => {
     </Dropdown>
   );
 };
+
+export const DefaultOpen = {
+  render: () => (
+    <Dropdown onSelect={(event) => console.log(event)} defaultOpen>
+      <Button as={Dropdown.Toggle}>Toggle</Button>
+      <Dropdown.Menu
+        strategy="fixed"
+        onClose={() => console.log("ONCLOSE default")}
+      >
+        <Dropdown.Menu.GroupedList>
+          <Dropdown.Menu.GroupedList.Heading>
+            Systemer og oppslagsverk
+          </Dropdown.Menu.GroupedList.Heading>
+          <Dropdown.Menu.GroupedList.Item
+            onClick={() => console.log("GroupedList.Item-click")}
+          >
+            Gosys
+          </Dropdown.Menu.GroupedList.Item>
+        </Dropdown.Menu.GroupedList>
+      </Dropdown.Menu>
+    </Dropdown>
+  ),
+  args: { chromatic: { delay: 300 } },
+};
+
+export const ControlledOpen = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [openState, setOpenState] = useState(true);
+    return (
+      <Dropdown onSelect={(event) => console.log(event)} open={openState}>
+        <Button as={Dropdown.Toggle} onClick={() => setOpenState(!openState)}>
+          Toggle
+        </Button>
+        <Dropdown.Menu
+          strategy="fixed"
+          onClose={() => console.log("ONCLOSE CONTROLLED")}
+        >
+          <Dropdown.Menu.GroupedList>
+            <Dropdown.Menu.GroupedList.Heading>
+              Systemer og oppslagsverk
+            </Dropdown.Menu.GroupedList.Heading>
+            <Dropdown.Menu.GroupedList.Item
+              onClick={() => console.log("GroupedList.Item-click")}
+            >
+              Gosys
+            </Dropdown.Menu.GroupedList.Item>
+          </Dropdown.Menu.GroupedList>
+        </Dropdown.Menu>
+      </Dropdown>
+    );
+  },
+  args: { chromatic: { delay: 300 } },
+};

@navikt/internal/react/src/timeline/period/ClickablePeriod.tsx

@@ -8,7 +8,7 @@ import { ariaLabel, getConditionalClasses } from "../utils/period";
 import { PeriodProps } from "./index";
 
 interface TimelineClickablePeriodProps extends PeriodProps {
-  onSelectPeriod?: () => void;
+  onSelectPeriod?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   isActive?: boolean;
   periodRef: React.ForwardedRef<HTMLButtonElement>;
 }
@@ -49,9 +49,9 @@ const ClickablePeriod = React.memo(
             firstFocus && addFocusable(r, index);
             mergedRef(r);
           }}
-          onClick={() => {
+          onClick={(e) => {
             children && setSelected((x) => !x);
-            onSelectPeriod?.();
+            onSelectPeriod?.(e);
           }}
           aria-label={ariaLabel(start, end, status, statusLabel)}
           className={cl(

@navikt/internal/react/src/timeline/period/index.tsx

@@ -32,7 +32,7 @@ export interface TimelinePeriodProps
   /**
    * Callback when selecting a period.
    */
-  onSelectPeriod?: () => void;
+  onSelectPeriod?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   /**
    * Content displayed in Popover on click.
    */

LICENCE

@@ -4,7 +4,7 @@ SIL Open Font License (OFL)
 
 # The MIT License
 
-Copyright 2022 NAV (Arbeids- og velferdsdirektoratet) - The Norwegian Labour and Welfare Administration
+Copyright 2023 NAV (Arbeids- og velferdsdirektoratet) - The Norwegian Labour and Welfare Administration
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the "Software"),

README.md

@@ -35,8 +35,7 @@
 └── codemod         # @navikt/ds-codemod, migrerings-scripts
 
 aksel.nav.no/
-├── website        # NEXT.JS app (v12)
-└── website/sanity # Sanity CMS-app (v3)
+└── website        # NEXT.JS app (v12) website/sanity # Sanity CMS-app (v3)
 ```
 
 ## Commands

aksel.nav.no/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16.15.0-alpine3.14
+FROM node:18.1-alpine3.14
 RUN apk add --no-cache libc6-compat
 
 ENV NODE_ENV production

aksel.nav.no/README.md

@@ -11,7 +11,7 @@ CMS og nettside for [aksel.nav.no](https://aksel.nav.no/)
 
 ### /website/sanity
 
-Det publiserte studioet finner man på [aksel.nav.no/admin](https://aksel.nav.no/admin)(krever NAV SSO eller invite).
+Det publiserte studioet finner man på [aksel.nav.no/admin](https://aksel.nav.no/admin)(krever NAV SSO).
 
 `production`-datasettet er privat, så man må ha riktige tilganger for å kunne lese/jobbe med dataen der.
 
@@ -21,6 +21,10 @@ Det publiserte studioet finner man på [aksel.nav.no/admin](https://aksel.nav.no
 
 Branch `main` blir pusher rett til prod -> aksel.nav.no. For å utvikle nye features brukes branch `next` som ved push publiseres til devmiljø aksel.dev.nav.no (krever naisdevice). Kan også publisere andre branches til dev ved bruk av workflow-dispatch.
 
+## Kode-eksempler
+
+Alle eksemplene våre ligger under /website/pages/eksempler. For å se endringene live kan man starte opp storybook med `yarn storybook`. Du trenger da ikke tilgang til sanity for å se endringene.
+
 ### Nettside (localhost:3000)
 
 ```

aksel.nav.no/nais-prod.yaml

@@ -23,11 +23,11 @@ spec:
     timeout: 1
   resources:
     limits:
-      cpu: 500m
-      memory: 512Mi
+      cpu: 1000m
+      memory: 2048Mi
     requests:
-      cpu: 200m
-      memory: 256Mi
+      cpu: 500m
+      memory: 1024Mi
   accessPolicy:
     outbound:
       external:

aksel.nav.no/package.json

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

aksel.nav.no/website/components/SanityBlockContent.tsx

@@ -67,7 +67,7 @@ const serializers = {
             <Ingress
               spacing
               {...textProps}
-              className={cl("algolia-index-body", {
+              className={cl({
                 "last:mb-0": context.noLastMargin,
               })}
             />
@@ -76,27 +76,20 @@ const serializers = {
               size={context.size}
               spacing
               {...textProps}
-              className={cl("algolia-index-body", {
+              className={cl({
                 "last:mb-0": context.noLastMargin,
               })}
             />
           );
 
         case "detail":
-          return (
-            <Detail
-              spacing
-              size="small"
-              {...textProps}
-              className="algolia-index-detail"
-            />
-          );
+          return <Detail spacing {...textProps} />;
         case "h2":
           return <LevelTwoHeading {...textProps} id={`h${node._key}`} />;
         case "h3":
           return (
             <Heading
-              className="algolia-index-lvl3 max-w-text text-deepblue-800 mt-8 scroll-mt-20 focus:outline-none"
+              className="max-w-text text-deepblue-800 mt-8 scroll-mt-20 focus:outline-none"
               spacing
               level="3"
               size="medium"
@@ -108,7 +101,7 @@ const serializers = {
         case "h4":
           return (
             <Heading
-              className="algolia-index-lvl4 max-w-text text-deepblue-800 mt-6"
+              className="max-w-text text-deepblue-800 mt-6"
               spacing
               level="4"
               size="small"
@@ -117,7 +110,7 @@ const serializers = {
           );
         case "ingress":
           return (
-            <Ingress spacing className="algolia-index-ingress max-w-text">
+            <Ingress spacing className="max-w-text">
               {children}
             </Ingress>
           );
@@ -127,7 +120,7 @@ const serializers = {
               size={context.size}
               spacing
               {...textProps}
-              className="algolia-index-body max-w-text"
+              className="max-w-text"
             />
           );
       }
@@ -190,7 +183,7 @@ const serializers = {
       }
       if (href && href.startsWith("mailto:")) {
         return (
-          <NextLink href={href} passHref>
+          <NextLink href={href} passHref legacyBehavior>
             <Link
               onClick={(e) =>
                 logNav(
@@ -222,7 +215,7 @@ const serializers = {
           {children} <ExternalLink title="åpner lenken i ny fane" />
         </Link>
       ) : (
-        <NextLink href={href} passHref>
+        <NextLink href={href} passHref legacyBehavior>
           <Link
             onClick={(e) =>
               logNav(
@@ -244,7 +237,7 @@ const serializers = {
 
       const href = `/${slug?.current}`;
       return (
-        <NextLink href={href} passHref>
+        <NextLink href={href} passHref legacyBehavior>
           <Link
             onClick={(e) =>
               logNav(

aksel.nav.no/website/components/StoryDecorator.tsx

@@ -0,0 +1,13 @@
+import "../dist/tw.css";
+import { Provider } from "@navikt/ds-react";
+import { IdContext } from "components/website-modules/utils/contexts";
+
+export const NextDecorator = ({ children }: { children: React.ReactNode }) => (
+  <Provider>
+    <IdContext.Provider value={{ id: "storybook-testid" }}>
+      <div id="__next" className="aksel antialiased">
+        {children}
+      </div>
+    </IdContext.Provider>
+  </Provider>
+);

aksel.nav.no/website/components/assets/Icons.tsx

@@ -97,3 +97,54 @@ export const YarnIcon = () => (
     />
   </svg>
 );
+
+export const StorybookIcon = ({ ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    width="18.2"
+    height="22.4"
+    version="1.1"
+    viewBox="0 0 52 64"
+    focusable={false}
+    aria-hidden
+    {...props}
+  >
+    <defs>
+      <path
+        id="path-1"
+        d="M1.94279175,57.1309472 L0.0022554267,5.95476663 C-0.0618328758,4.26461814 1.24754196,2.83223697 2.95307926,2.72673418 L46.9330824,0.00617628491 C48.6691159,-0.10121296 50.1644074,1.2046298 50.2729096,2.92285771 C50.2769973,2.98759391 50.2790429,3.05244063 50.2790429,3.11730315 L50.2790429,58.8828028 C50.2790429,60.6043831 48.8689636,62 47.1295431,62 C47.0824212,62 47.0353056,61.9989534 46.9882313,61.9968606 L4.94876437,60.1280997 C3.31149338,60.0553189 2.00425692,58.751918 1.94279175,57.1309472 Z"
+      />
+    </defs>
+    <g
+      id="icon-storybook-monochrome"
+      fill="none"
+      fillRule="evenodd"
+      stroke="none"
+      strokeWidth="1"
+    >
+      <g id="storybook-icon" transform="translate(1.000000, 1.000000)">
+        <path
+          id="Combined-Shape"
+          fill="var(--a-gray-600)"
+          fillRule="nonzero"
+          d="M50.2729096,2.92285771 C50.2769973,2.98759391 50.2790429,3.05244063 50.2790429,3.11730315 L50.2790429,58.8828028 C50.2790429,60.6043831 48.8689636,62 47.1295431,62 C47.0824212,62 47.0353056,61.9989534 46.9882313,61.9968606 L4.94876437,60.1280997 C3.31149338,60.0553189 2.00425692,58.751918 1.94279175,57.1309472 L0.0022554267,5.95476663 C-0.0618328758,4.26461814 1.24754196,2.83223697 2.95307926,2.72673418 L37.427,0.594 L37.1272753,7.62078766 C37.1238721,7.70179664 37.1419373,7.78178731 37.179031,7.85305525 L37.2223772,7.92113026 C37.3791917,8.12573637 37.6738999,8.16578288 37.880626,8.0105767 L37.880626,8.0105767 L40.6382617,5.94019678 L42.9673936,7.75618537 C43.0546693,7.82423279 43.1634862,7.85946584 43.2745216,7.85562813 C43.5338374,7.84666553 43.7367132,7.6313391 43.7276576,7.37468316 L43.7276576,7.37468316 L43.467,0.22 L46.9330824,0.00617628491 C48.6691159,-0.10121296 50.1644074,1.2046298 50.2729096,2.92285771 Z"
+        />
+        <path
+          id="S"
+          fill="#fff"
+          fillRule="nonzero"
+          d="M29.4029796,23.368648 C29.4029796,24.58142 37.6567008,24.00017 38.7646901,23.1482813 C38.7646901,14.8895929 34.2873503,10.5497821 26.0885852,10.5497821 C17.88982,10.5497821 13.2961856,14.9571143 13.2961856,21.5681161 C13.2961856,33.0822778 28.9959487,33.3026444 28.9959487,39.5830962 C28.9959487,41.3460299 28.1237396,42.3927719 26.2048797,42.3927719 C23.7045471,42.3927719 22.7160434,41.1289316 22.832338,36.8317805 C22.832338,35.8995698 13.2961856,35.6089448 13.0054493,36.8317805 C12.2651161,47.2453073 18.8201763,50.248968 26.3211742,50.248968 C33.5895831,50.248968 39.2880157,46.4144645 39.2880157,39.4729126 C39.2880157,27.132376 23.3556634,27.4629261 23.3556634,21.3477494 C23.3556634,18.8686237 25.2163761,18.5380737 26.3211742,18.5380737 C27.4841196,18.5380737 29.5774214,18.7409467 29.4029796,23.368648 Z"
+          mask="url(#mask-2)"
+        />
+        <path
+          id="bookmark"
+          fill="#fff"
+          fillRule="nonzero"
+          d="M37.1272753,7.62078766 L37.4276823,0.591583333 L43.4674595,0.218291667 L43.7276576,7.37468316 C43.7367132,7.6313391 43.5338374,7.84666553 43.2745216,7.85562813 C43.1634862,7.85946584 43.0546693,7.82423279 42.9673936,7.75618537 L40.6382617,5.94019678 L37.880626,8.0105767 C37.6738999,8.16578288 37.3791917,8.12573637 37.2223772,7.92113026 C37.1563661,7.83500129 37.1227378,7.72879963 37.1272753,7.62078766 Z"
+          mask="url(#mask-2)"
+        />
+      </g>
+    </g>
+  </svg>
+);

aksel.nav.no/website/components/layout/footer/Footer.tsx

@@ -10,7 +10,7 @@ const Footer = () => {
       id="aksel-footer"
       data-hj-suppress
       data-theme="dark"
-      className="algolia-ignore-index text-text-on-inverted bg-deepblue-800 relative flex w-full justify-center"
+      className="toc-ignore text-text-on-inverted bg-deepblue-800 relative flex w-full justify-center"
     >
       <div className="relative z-10 mx-auto grid w-full max-w-screen-2xl gap-16 px-4 pt-12 pb-16 md:px-6">
         <div className="grid gap-12 xl:grid-cols-3 xl:gap-6">
@@ -21,14 +21,22 @@ const Footer = () => {
             </Heading>
             <BodyShort as="ul" className="mt-5 grid gap-2">
               <li>
-                <NextLink href="/god-praksis/artikler/om-aksel" passHref>
+                <NextLink
+                  href="/god-praksis/artikler/om-aksel"
+                  passHref
+                  legacyBehavior
+                >
                   <Link className="text-text-on-inverted focus:shadow-focus focus:text-text-default focus:bg-blue-200 focus:shadow-blue-200">
                     Om Aksel
                   </Link>
                 </NextLink>
               </li>
               <li>
-                <NextLink href="/god-praksis/artikler/skriv-for-aksel" passHref>
+                <NextLink
+                  href="/god-praksis/artikler/skriv-for-aksel"
+                  passHref
+                  legacyBehavior
+                >
                   <Link className="text-text-on-inverted focus:shadow-focus focus:text-text-default focus:bg-blue-200 focus:shadow-blue-200">
                     Skriv for Aksel
                   </Link>
@@ -98,23 +106,22 @@ const Footer = () => {
             Arbeids- og velferdsetaten
           </div>
           <span className="mb-1 self-end xl:mb-0" />
-          {/* <BodyShort className="mb-1 self-end xl:mb-0">
-            Redaktør: Eidar Grande Vollan
-          </BodyShort> */}
           <div className="hidden self-end xl:block">
-            <p>&copy; 2022 NAV</p>
-            <NextLink href="/side/personvernerklaering" passHref>
-              <a className="focus:bg-border-focus-on-inverted focus:text-text-default focus:ring-border-focus-on-inverted outline-none hover:underline focus:no-underline focus:ring">
-                Personvernerklæring og informasjonskapsler
-              </a>
+            <p>&copy; {new Date().getFullYear()} NAV</p>
+            <NextLink
+              href="/side/personvernerklaering"
+              className="focus:bg-border-focus-on-inverted focus:text-text-default focus:ring-border-focus-on-inverted outline-none hover:underline focus:no-underline focus:ring"
+            >
+              Personvernerklæring og informasjonskapsler
             </NextLink>
           </div>
           <div className="block self-end xl:hidden">
-            &copy; 2022 NAV |{" "}
-            <NextLink href="/side/personvernerklaering" passHref>
-              <a className="focus:bg-border-focus-on-inverted focus:ring-border-focus-on-inverted outline-none hover:underline focus:no-underline focus:ring">
-                Personvernerklæring og informasjonskapsler
-              </a>
+            &copy; {new Date().getFullYear()} NAV |{" "}
+            <NextLink
+              href="/side/personvernerklaering"
+              className="focus:bg-border-focus-on-inverted focus:ring-border-focus-on-inverted outline-none hover:underline focus:no-underline focus:ring"
+            >
+              Personvernerklæring og informasjonskapsler
             </NextLink>
           </div>
         </div>

aksel.nav.no/website/components/layout/header/Hamburger.tsx

@@ -11,27 +11,27 @@ const LinkElement = ({ name, href, onClick }) => {
   const { asPath } = useRouter();
   return (
     <li className="flex h-11 items-center">
-      <Link href={href} passHref>
-        <a
-          className={cl(
-            "hover:bg-surface-action-subtle-hover focus-visible:shadow-focus-inset relative flex h-full w-full items-center rounded px-2 focus:outline-none",
-            {
-              "before:bg-surface-action-selected pl-4 font-semibold before:absolute before:left-0 before:h-6 before:w-1 before:rounded-full":
-                asPath.startsWith(href),
-              "": !asPath.startsWith(href),
-            }
-          )}
-          onClick={(e) => {
-            logNav(
-              "header",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            );
-            onClick();
-          }}
-        >
-          {name}
-        </a>
+      <Link
+        href={href}
+        passHref
+        className={cl(
+          "hover:bg-surface-action-subtle-hover focus-visible:shadow-focus-inset relative flex h-full w-full items-center rounded px-2 focus:outline-none",
+          {
+            "before:bg-surface-action-selected pl-4 font-semibold before:absolute before:left-0 before:h-6 before:w-1 before:rounded-full":
+              asPath.startsWith(href),
+            "": !asPath.startsWith(href),
+          }
+        )}
+        onClick={(e) => {
+          logNav(
+            "header",
+            window.location.pathname,
+            e.currentTarget.getAttribute("href")
+          );
+          onClick();
+        }}
+      >
+        {name}
       </Link>
     </li>
   );
@@ -63,7 +63,7 @@ export const Hamburger = () => {
           aria={{ modal: true }}
           overlayClassName="header-modal__overlay"
           contentLabel="Meny"
-          className="bg-surface-default xs:max-w-[90%] xs:right-6 xs:left-auto xs:w-96 absolute left-4 top-0 right-4 block rounded py-14 px-11 md:hidden"
+          className="bg-surface-default absolute left-4 top-0 right-4 block rounded py-14 px-11 sm:right-6 sm:left-auto sm:w-96 sm:max-w-[90%] md:hidden"
         >
           <nav aria-label="hovedmeny">
             <ul>

aksel.nav.no/website/components/layout/header/Header.tsx

@@ -10,27 +10,27 @@ const LinkElement = ({ name, href }) => {
   const { asPath } = useRouter();
   return (
     <li>
-      <Link href={href} passHref>
-        <a
-          className={cl(
-            "text-deepblue-800 focus-visible:shadow-focus relative grid h-full place-items-center rounded px-2 focus:outline-none",
-            {
-              "before:bg-border-action-selected font-semibold before:absolute before:bottom-[1px] before:z-10 before:h-1 before:w-[calc(100%_-_16px)] before:rounded-full":
-                asPath.startsWith(href),
-              "hover:before:bg-border-subtle-hover before:absolute before:bottom-[1px] before:z-10 before:h-1 before:w-[calc(100%_-_16px)] before:rounded-full":
-                !asPath.startsWith(href),
-            }
-          )}
-          onClick={(e) =>
-            logNav(
-              "header",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
+      <Link
+        href={href}
+        passHref
+        className={cl(
+          "text-deepblue-800 focus-visible:shadow-focus relative grid h-full place-items-center rounded px-2 focus:outline-none",
+          {
+            "before:bg-border-action-selected font-semibold before:absolute before:bottom-[1px] before:z-10 before:h-1 before:w-[calc(100%_-_16px)] before:rounded-full":
+              asPath.startsWith(href),
+            "hover:before:bg-border-subtle-hover before:absolute before:bottom-[1px] before:z-10 before:h-1 before:w-[calc(100%_-_16px)] before:rounded-full":
+              !asPath.startsWith(href),
           }
-        >
-          {name}
-        </a>
+        )}
+        onClick={(e) =>
+          logNav(
+            "header",
+            window.location.pathname,
+            e.currentTarget.getAttribute("href")
+          )
+        }
+      >
+        {name}
       </Link>
     </li>
   );
@@ -55,21 +55,21 @@ export const Header = ({
         })}
       >
         <div className="mx-auto flex h-full max-w-screen-2xl items-center  pr-4 pt-3 lg:pr-6">
-          <div className="xs:pr-6 xs:pl-4 flex h-11 items-center pr-4 pl-4">
-            <Link href="/" passHref>
-              <a
-                onClick={(e) =>
-                  logNav(
-                    "header",
-                    window.location.pathname,
-                    e.currentTarget.getAttribute("href")
-                  )
-                }
-                className="focus-visible:shadow-focus grid h-full place-items-center rounded px-2 focus:outline-none"
-              >
-                <Logo />
-                <span className="sr-only">Aksel</span>
-              </a>
+          <div className="flex h-11 items-center pr-4 pl-4 sm:pr-6 sm:pl-4">
+            <Link
+              href="/"
+              passHref
+              onClick={(e) =>
+                logNav(
+                  "header",
+                  window.location.pathname,
+                  e.currentTarget.getAttribute("href")
+                )
+              }
+              className="focus-visible:shadow-focus grid h-full place-items-center rounded px-2 focus:outline-none"
+            >
+              <Logo />
+              <span className="sr-only">Aksel</span>
             </Link>
           </div>
           <nav

aksel.nav.no/website/components/layout/header/search/Hit.tsx

@@ -2,9 +2,9 @@ import { urlFor } from "@/lib";
 import { isNew } from "@/utils";
 import { Tag } from "@navikt/ds-react";
 import cl from "classnames";
+import Image from "next/legacy/image";
 import { StatusTag } from "components/website-modules/StatusTag";
 import { SearchHit } from "lib/types/search";
-import Image from "next/image";
 import NextLink from "next/link";
 
 export function Hit({
@@ -29,16 +29,16 @@ export function Hit({
       )}
     >
       <div className="px-2 py-6">
-        <NextLink href={`/${hit.item.slug}`} passHref>
-          <a
-            onClick={() => logSuccess(index, `/${(hit.item as any).slug}`)}
-            className="flex items-center gap-2 text-xl font-semibold after:absolute after:inset-0 focus:outline-none"
-          >
-            <span className="group-hover:underline">
-              {highlightStr(hit.item.heading, query)}
-            </span>
-            <StatusTag status={hit?.item?.status?.tag} aria-hidden />
-          </a>
+        <NextLink
+          href={`/${hit.item.slug}`}
+          passHref
+          onClick={() => logSuccess(index, `/${(hit.item as any).slug}`)}
+          className="flex items-center gap-2 text-xl font-semibold after:absolute after:inset-0 focus:outline-none"
+        >
+          <span className="group-hover:underline">
+            {highlightStr(hit.item.heading, query)}
+          </span>
+          <StatusTag status={hit?.item?.status?.tag} aria-hidden />
         </NextLink>
         <span className="font-regular text-text-subtle text-lg" aria-hidden>
           {hit.highlight.shouldHightlight ? (
@@ -62,8 +62,8 @@ export function Hit({
           <Image
             src={urlFor(hit.item.status.bilde).auto("format").url()}
             decoding="sync"
-            width="96px"
-            height="96px"
+            width="96"
+            height="96"
             layout="fixed"
             objectFit="contain"
             alt={hit.item?.heading + " thumbnail"}
@@ -100,20 +100,17 @@ export function IconHit({
         <NextLink
           href={`/grunnleggende/staesj/ikoner?icon=${hit.item.name}`}
           passHref
+          onClick={() => logSuccess(index, `/${(hit.item as any).name}`)}
+          className="flex items-center gap-2 text-xl font-semibold after:absolute after:inset-0 focus:outline-none"
         >
-          <a
-            onClick={() => logSuccess(index, `/${(hit.item as any).name}`)}
-            className="flex items-center gap-2 text-xl font-semibold after:absolute after:inset-0 focus:outline-none"
-          >
-            <span className="group-hover:underline">
-              {highlightStr(hit.item.name, query)}
-            </span>
-            {isNew(hit.item?.created_at ?? "") && (
-              <Tag variant="info" size="small" aria-hidden>
-                Ny
-              </Tag>
-            )}
-          </a>
+          <span className="group-hover:underline">
+            {highlightStr(hit.item.name, query)}
+          </span>
+          {isNew(hit.item?.created_at ?? "") && (
+            <Tag variant="info" size="small" aria-hidden>
+              Ny
+            </Tag>
+          )}
         </NextLink>
       </div>
 
@@ -121,8 +118,8 @@ export function IconHit({
         <Image
           src={`https://raw.githubusercontent.com/navikt/aksel/main/%40navikt/icons/svg/${hit.item.name}.svg`}
           decoding="sync"
-          width="24px"
-          height="24px"
+          width="24"
+          height="24"
           layout="fixed"
           objectFit="contain"
           alt={hit.item.name + " thumbnail"}

aksel.nav.no/website/components/layout/page-templates/AkselArtikkel.tsx

@@ -119,7 +119,7 @@ const AkselArtikkelTemplate = ({
           <Heading
             level="1"
             size="large"
-            className="algolia-index-lvl1 text-deepblue-800 mt-4 md:text-5xl"
+            className="text-deepblue-800 mt-4 md:text-5xl"
           >
             {data.heading}
           </Heading>
@@ -154,11 +154,12 @@ const AkselArtikkelTemplate = ({
                     key={title}
                     href={`/god-praksis/${slug.current}`}
                     passHref
+                    legacyBehavior
                   >
                     <BodyShort
                       size="small"
                       as="a"
-                      className="algolia-index-lvl5 min-h-8 text-deepblue-800 focus-visible:shadow-focus flex items-center justify-center gap-[2px] rounded-full bg-gray-200 pl-4 pr-1 capitalize no-underline hover:underline focus:outline-none"
+                      className="min-h-8 text-deepblue-800 focus-visible:shadow-focus flex items-center justify-center gap-[2px] rounded-full bg-gray-200 pl-4 pr-1 capitalize no-underline hover:underline focus:outline-none"
                     >
                       {title}
                       <Next aria-hidden />
@@ -196,10 +197,7 @@ const AkselArtikkelTemplate = ({
                   ))}
                 </BodyShort>
               )}
-              <BodyShort
-                as="span"
-                className="text-text-subtle whitespace-nowrap"
-              >
+              <BodyShort as="span" className="text-text-subtle">
                 Publisert: {dateStr(data?.publishedAt ?? data?._updatedAt)}
               </BodyShort>
             </div>

aksel.nav.no/website/components/layout/page-templates/AkselPrinsipp.tsx

@@ -73,7 +73,7 @@ const AkselPrinsippTemplate = ({
       >
         <article className="overflow-x-clip">
           <div
-            className={cl("max-w-aksel xs:w-[90%] mx-auto px-4", {
+            className={cl("max-w-aksel mx-auto px-4 sm:w-[90%]", {
               "pb-32": mainPage,
             })}
           >
@@ -88,7 +88,7 @@ const AkselPrinsippTemplate = ({
                 <Heading
                   level="1"
                   size="large"
-                  className="algolia-index-lvl1 text-deepblue-700 mt-4 md:text-5xl"
+                  className="text-deepblue-700 mt-4 md:text-5xl"
                 >
                   {data.heading}
                 </Heading>
@@ -101,7 +101,7 @@ const AkselPrinsippTemplate = ({
                   <BodyShort
                     size="small"
                     as="span"
-                    className="text-text-subtle whitespace-nowrap"
+                    className="text-text-subtle "
                   >
                     {dateStr(data?._updatedAt)}
                   </BodyShort>
@@ -123,7 +123,7 @@ const AkselPrinsippTemplate = ({
               "bg-gray-100": mainPage,
             })}
           >
-            <div className="max-w-aksel xs:w-[90%] mx-auto px-4">
+            <div className="max-w-aksel mx-auto px-4 sm:w-[90%]">
               <div className="pb-16 md:pb-32">
                 <div className="relative mx-auto mt-4 max-w-prose lg:ml-0 lg:grid lg:max-w-none lg:grid-flow-row-dense lg:grid-cols-3 lg:items-start lg:gap-x-12">
                   <TableOfContents
@@ -135,7 +135,7 @@ const AkselPrinsippTemplate = ({
                     {data?.hero_bilde && (
                       <Bilde
                         node={data.hero_bilde as any}
-                        className="xs:-mt-72 -mt-36 mb-10"
+                        className="-mt-36 mb-10 sm:-mt-72"
                       />
                     )}
                     <SanityBlockContent
@@ -161,10 +161,7 @@ const AkselPrinsippTemplate = ({
                           ))}
                         </BodyShort>
                       )}
-                      <BodyShort
-                        as="span"
-                        className="text-text-subtle whitespace-nowrap"
-                      >
+                      <BodyShort as="span" className="text-text-subtle ">
                         Publisert:{" "}
                         {dateStr(data?.publishedAt ?? data?._updatedAt)}
                       </BodyShort>

aksel.nav.no/website/components/layout/page-templates/KomponentArtikkel.tsx

@@ -62,7 +62,7 @@ const KomponentArtikkelTemplate = ({
             size="xlarge"
             level="1"
             spacing
-            className="algolia-index-lvl1 text-deepblue-800 flex flex-wrap items-center gap-4"
+            className="text-deepblue-800 flex flex-wrap items-center gap-4"
           >
             {data.heading}
           </Heading>

aksel.nav.no/website/components/layout/page-templates/WithSidebar.tsx

@@ -8,7 +8,7 @@ import { ReactNode } from "react";
 import cl from "clsx";
 import NextLink from "next/link";
 import { capitalize } from "@/utils";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { TableOfContentsv2 } from "components/website-modules/TOCv2";
 
 const HeaderCube = ({ ...props }) => (
@@ -77,7 +77,7 @@ export const WithSidebar = ({
             <main
               tabIndex={-1}
               id="hovedinnhold"
-              className="min-h-screen-header md:max-w-screen-sidebar xs:pl-6 xs:pr-6 relative w-full px-4 focus:outline-none md:pl-0"
+              className="min-h-screen-header md:max-w-screen-sidebar relative w-full px-4 focus:outline-none sm:pl-6 sm:pr-6 md:pl-0"
             >
               <div
                 className={cl(
@@ -96,6 +96,7 @@ export const WithSidebar = ({
                       <NextLink
                         href={`/${pageType.type.toLowerCase()}`}
                         passHref
+                        legacyBehavior
                       >
                         <Link className="text-text-default">
                           {capitalize(pageType.type)}
@@ -144,12 +145,12 @@ export const WithSidebar = ({
                   </div>
                 )}
                 {variant === "landingPage" && (
-                  <div className="xs:block pointer-events-none absolute top-0 right-0 hidden">
+                  <div className="pointer-events-none absolute top-0 right-0 hidden sm:block">
                     <HeaderCube className="text-deepblue-300 z-0 max-h-full" />
                   </div>
                 )}
               </div>
-              <div className={cl("xs:px-6 md:px-10", { flex: withToc })}>
+              <div className={cl("sm:px-6 md:px-10", { flex: withToc })}>
                 {withToc && (
                   <TableOfContentsv2
                     changedState={pageProps["content"]}

aksel.nav.no/website/components/layout/page-templates/wrappers/NoSidebar.tsx

@@ -19,7 +19,7 @@ export const NoSidebarLayout = ({
         id="hovedinnhold"
         className="aksel-artikkel bg-gray-50 pt-4 focus:outline-none"
       >
-        <div className="max-w-aksel xs:w-[90%] mx-auto px-4">
+        <div className="max-w-aksel mx-auto px-4 sm:w-[90%]">
           <article className="pt-12 pb-16 md:pb-32">{children}</article>
         </div>
         {aside}

aksel.nav.no/website/components/layout/sidebar/Sidebar.tsx

@@ -31,7 +31,7 @@ const NavItem = ({
         }
       )}
     >
-      <Link href={`/${link.slug}`} passHref>
+      <Link href={`/${link.slug}`} passHref legacyBehavior>
         <BodyShort
           as="a"
           size="small"
@@ -156,7 +156,7 @@ export const Sidebar = ({
   return (
     <div
       data-testid="ds-sidebar"
-      className="algolia-ignore-index w-sidebar bg-surface-default z-[1002] hidden shrink-0 self-start pb-4 md:block"
+      className="toc-ignore w-sidebar bg-surface-default z-[1002] hidden shrink-0 self-start pb-4 md:block"
     >
       <nav aria-label={kategori} className={cl("overflow-x-auto")}>
         <ul className="pb-4 pl-6">

aksel.nav.no/website/components/sanity-modules/Accordion.tsx

@@ -20,10 +20,7 @@ const Accordion = ({
           <DsAccordion.Item key={el._key}>
             <DsAccordion.Header>{el.title}</DsAccordion.Header>
             <DsAccordion.Content>
-              <SanityBlockContent
-                blocks={el.content}
-                className="algolia-ignore-index"
-              />
+              <SanityBlockContent blocks={el.content} className="toc-ignore" />
             </DsAccordion.Content>
           </DsAccordion.Item>
         ))}

aksel.nav.no/website/components/sanity-modules/DoDont.tsx

@@ -43,7 +43,7 @@ const Element = ({
   return (
     <figure
       className={cl(
-        "flex min-w-full flex-1 flex-col rounded-t sm:min-w-[440px]",
+        "flex min-w-full flex-1 flex-col rounded-t sm:min-w-[320px]",
         {
           "basis-full": block?.fullwidth,
           "max-w-sm": !block?.fullwidth,

aksel.nav.no/website/components/sanity-modules/IntroSeksjon.tsx

@@ -23,7 +23,7 @@ const Intro = ({
       <div>
         <>
           <Label as="p" className="mb-3">
-            Egnet til å:
+            Egnet til:
           </Label>
           <ul className="mb-7 list-disc">
             {node.brukes_til.map((x) => (
@@ -39,7 +39,7 @@ const Intro = ({
         {node?.brukes_ikke_til && (
           <>
             <Label as="p" className="mb-3">
-              Vurder noe annet:
+              Uegnet til:
             </Label>
             <ul className="list-disc">
               {node.brukes_ikke_til.map((x) => (

aksel.nav.no/website/components/sanity-modules/Tabell.tsx

@@ -38,8 +38,7 @@ const TableComponent = ({
         </Table.Body>
       </Table>
       <style global jsx>{`
-        .algolia-index-body.navds-body-long.navds-typo--spacing
-          + .table-heading-margin {
+        .navds-body-long.navds-typo--spacing + .table-heading-margin {
           margin-top: -1rem;
         }
         .table-heading-margin + .navds-heading {

aksel.nav.no/website/components/sanity-modules/TokenTable.tsx

@@ -100,12 +100,21 @@ const TokenTable = ({ node }: { node: SanityT.Schema.token_kategori }) => {
               Komponent-tokens gir deg muligheten til å sette opp theming eller
               justere styling uten å måtte overskrive css-klasser. Les gjennom{" "}
               <NextLink
-                href="https://aksel.nav.no/grunnleggende/styling/design-tokens#hec62d38bc813"
+                href="/grunnleggende/styling/design-tokens#hec62d38bc813"
                 passHref
+                legacyBehavior
               >
                 <Link>guiden vår</Link>
               </NextLink>{" "}
-              for mer info.
+              eller utforsk alle{" "}
+              <NextLink
+                href="/grunnleggende/styling/design-tokens"
+                passHref
+                legacyBehavior
+              >
+                <Link>design tokens</Link>
+              </NextLink>
+              .
             </BodyLong>
           </div>
         )}

aksel.nav.no/website/components/sanity-modules/bilde/Bilde.tsx

@@ -28,7 +28,7 @@ const Bilde = ({
     <>
       <figure
         className={cl("m-0 mb-8 flex flex-col", style.figure, className, {
-          "sm:max-w-text": node?.small,
+          "md:max-w-text": node?.small,
         })}
       >
         <div
@@ -58,7 +58,7 @@ const Bilde = ({
                 {node?.kilde?.link ? (
                   <>
                     {`${node?.kilde?.prefix}: `}
-                    <NextLink href={node.kilde.link} passHref>
+                    <NextLink href={node.kilde.link} passHref legacyBehavior>
                       <Link className="break-normal">{node?.kilde?.tekst}</Link>
                     </NextLink>
                   </>

aksel.nav.no/website/components/sanity-modules/cards/ArtikkelCard.tsx

@@ -42,25 +42,22 @@ const ArtikkelCard = ({
           },
         }}
         passHref
+        className="after:absolute after:inset-0 after:z-10 after:rounded-lg focus:outline-none"
+        onClick={(e) =>
+          logNav(
+            "artikkel-kort",
+            window.location.pathname,
+            e.currentTarget.getAttribute("href")
+          )
+        }
       >
-        <a
-          className="after:absolute after:inset-0 after:z-10 after:rounded-lg focus:outline-none"
-          onClick={(e) =>
-            logNav(
-              "artikkel-kort",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
-          }
+        <Heading
+          level={level}
+          size="small"
+          className="text-deepblue-700 group-hover:underline"
         >
-          <Heading
-            level={level}
-            size="small"
-            className="text-deepblue-700 group-hover:underline"
-          >
-            {heading}
-          </Heading>
-        </a>
+          {heading}
+        </Heading>
       </NextLink>
       {ingress && <BodyShort className="mt-2">{ingress}</BodyShort>}
       {variant === "god-praksis" ? (

aksel.nav.no/website/components/sanity-modules/cards/BloggCard.tsx

@@ -20,7 +20,7 @@ const BloggCard = ({
   return (
     <li key={blog._id} className="border-b-border-subtle h-fit border-b pb-8">
       <Heading size="medium" as="div">
-        <NextLink href={`/${blog.slug}`} passHref>
+        <NextLink href={`/${blog.slug}`} passHref legacyBehavior>
           <Link
             className="text-deepblue-500 no-underline hover:underline"
             onClick={(e) =>

aksel.nav.no/website/components/sanity-modules/cards/GodPraksisCard.tsx

@@ -2,7 +2,7 @@ import { withErrorBoundary } from "@/error-boundary";
 import { BodyShort } from "@navikt/ds-react";
 import cl from "clsx";
 import NextLink from "next/link";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { logNav } from "@/utils";
 import { SanityT, urlFor } from "@/lib";
 
@@ -32,19 +32,19 @@ const GodPraksisCard = ({ node }: { node: AkselTemaT }) => {
           priority
         />
       </div>
-      <NextLink href={`/god-praksis/${node.slug.current}`} passHref>
-        <a
-          onClick={(e) =>
-            logNav(
-              "card",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
-          }
-          className="navds-heading--medium text-deepblue-700 navds-heading  mb-4 no-underline after:absolute after:inset-0 after:rounded-lg focus:outline-none group-hover:underline"
-        >
-          {node.title}
-        </a>
+      <NextLink
+        href={`/god-praksis/${node.slug.current}`}
+        passHref
+        onClick={(e) =>
+          logNav(
+            "card",
+            window.location.pathname,
+            e.currentTarget.getAttribute("href")
+          )
+        }
+        className="navds-heading--medium text-deepblue-700 navds-heading  mb-4 no-underline after:absolute after:inset-0 after:rounded-lg focus:outline-none group-hover:underline"
+      >
+        {node.title}
       </NextLink>
       <BodyShort className={cl("mb-2 lg:mb-6")}>{node.oppsummering}</BodyShort>
       <BodyShort size="small" className="text-text-subtle">

aksel.nav.no/website/components/sanity-modules/cards/InnholdsKort.tsx

@@ -15,27 +15,27 @@ const InnholdsKort = ({
   }
 
   return (
-    <article className="shadow-small last-of-type:mb-18 focus-within:ring-border-focus hover:shadow-medium xs:p-8 group relative mb-7 rounded-lg bg-white p-4 ring-1 ring-gray-900/10 focus-within:ring">
+    <article className="shadow-small last-of-type:mb-18 focus-within:ring-border-focus hover:shadow-medium group relative mb-7 rounded-lg bg-white p-4 ring-1 ring-gray-900/10 focus-within:ring sm:p-8">
       <Heading
         spacing
         size="small"
         level="3"
         id={node._key}
-        className="algolia-index-lvl3 text-deepblue-500 scroll-mt-28 focus:outline-none group-hover:underline"
+        className="text-deepblue-500 scroll-mt-28 focus:outline-none group-hover:underline"
       >
-        <NextLink href={`/${node?.lenke}`} passHref>
-          <a
-            onClick={(e) =>
-              logNav(
-                "prinsipp-kort",
-                window.location.pathname,
-                e.currentTarget.getAttribute("href")
-              )
-            }
-            className="z-10 before:absolute before:inset-0 focus:outline-none"
-          >
-            {node.title}
-          </a>
+        <NextLink
+          href={`/${node?.lenke}`}
+          passHref
+          onClick={(e) =>
+            logNav(
+              "prinsipp-kort",
+              window.location.pathname,
+              e.currentTarget.getAttribute("href")
+            )
+          }
+          className="z-10 before:absolute before:inset-0 focus:outline-none"
+        >
+          {node.title}
         </NextLink>
       </Heading>
       <SanityBlockContent blocks={node.body} noLastMargin />

aksel.nav.no/website/components/sanity-modules/cards/RelatertInnhold.tsx

@@ -27,36 +27,37 @@ const RelatertInnhold = ({
       className={cl(
         "relatedCard",
         "mb-8 max-w-4xl gap-4",
-        "xs:grid-cols-2 grid w-full"
+        "grid w-full sm:grid-cols-2"
       )}
     >
       {node.lenker.map((x) => (
-        <NextLink href={getHref(x)} passHref key={x._key}>
-          <a
-            onClick={(e) =>
-              logNav(
-                "relatert-innhold",
-                window.location.pathname,
-                e.currentTarget.getAttribute("href")
-              )
-            }
-            className="algolia-ignore-index shadow-small focus-visible:shadow-focus bg-surface-default ring-border-subtle group grid rounded border-2 border-transparent px-4 py-3 ring-1 focus:outline-none"
+        <NextLink
+          href={getHref(x)}
+          passHref
+          key={x._key}
+          onClick={(e) =>
+            logNav(
+              "relatert-innhold",
+              window.location.pathname,
+              e.currentTarget.getAttribute("href")
+            )
+          }
+          className="toc-ignore shadow-small focus-visible:shadow-focus bg-surface-default ring-border-subtle group grid rounded border-2 border-transparent px-4 py-3 ring-1 focus:outline-none"
+        >
+          <Heading
+            as="span"
+            size="xsmall"
+            className="underline group-hover:no-underline"
           >
-            <Heading
-              as="span"
-              size="xsmall"
-              className="underline group-hover:no-underline"
-            >
-              {x.title}
-            </Heading>
-            <BodyShort
-              size="small"
-              className="text-text-subtle mt-1 self-end break-words"
-              as="span"
-            >
-              {x.ekstern_domene ? <>{getTag(x)}</> : `aksel.nav.no`}
-            </BodyShort>
-          </a>
+            {x.title}
+          </Heading>
+          <BodyShort
+            size="small"
+            className="text-text-subtle mt-1 self-end break-words"
+            as="span"
+          >
+            {x.ekstern_domene ? <>{getTag(x)}</> : `aksel.nav.no`}
+          </BodyShort>
         </NextLink>
       ))}
     </div>

aksel.nav.no/website/components/sanity-modules/code-examples/Examples.tsx

@@ -19,6 +19,7 @@ const ComponentExamples = ({
 }): JSX.Element => {
   const [activeExample, setActiveExample] = useState(null);
   const [frameState, setFrameState] = useState(300);
+  const [unloaded, setUnloaded] = useState(true);
 
   const handleExampleLoad = () => {
     let attempts = 0;
@@ -32,6 +33,7 @@ const ComponentExamples = ({
         const newHeight = iframePadding + exampleWrapper.offsetHeight;
         clearInterval(waitForExampleContentToRender);
         setFrameState(newHeight < 300 ? 300 : newHeight);
+        setUnloaded(false);
       }
 
       attempts++;
@@ -77,7 +79,10 @@ const ComponentExamples = ({
                 key={fil._key}
                 value={fil.navn}
                 selected={active === fil.navn}
-                onClick={() => setActiveExample(fil.navn)}
+                onClick={() => {
+                  setActiveExample(fil.navn);
+                  setUnloaded(true);
+                }}
               >
                 {fixName(fil.navn)}
               </Chips.Toggle>
@@ -100,7 +105,15 @@ const ComponentExamples = ({
 
             {active === fil.navn && (
               <>
-                <div className="overflow-hidden rounded-t border border-b-0 border-gray-300 bg-gray-50">
+                <div
+                  className={cl(
+                    "overflow-hidden rounded-t border border-b-0 border-gray-300 ",
+                    {
+                      "relative animate-pulse": unloaded,
+                      "bg-gray-50": !unloaded,
+                    }
+                  )}
+                >
                   <iframe
                     src={`/eksempler/${node.dir.title}/${fil.navn.replace(
                       ".tsx",
@@ -109,21 +122,30 @@ const ComponentExamples = ({
                     height={frameState}
                     onLoad={() => handleExampleLoad()}
                     id={iframeId}
-                    aria-label="Komponent eksempler"
+                    aria-label={`${node?.dir?.title} ${fil.navn} eksempel`}
                     className={cl(
-                      "min-w-80 block w-full max-w-full resize-x overflow-auto bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]"
+                      "min-w-80 block w-full max-w-full resize-x overflow-auto bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
+                      { invisible: unloaded }
                     )}
                     title="Kode-eksempler"
                   />
+                  {unloaded && (
+                    <div className="absolute inset-0 mx-auto flex flex-col items-center justify-center gap-2">
+                      <div className="grid w-3/5 gap-2">
+                        <div className="bg-surface-neutral-subtle h-6 w-2/3 rounded-xl" />
+                        <div className="bg-surface-neutral-subtle h-16 w-full rounded-xl" />
+                      </div>
+                    </div>
+                  )}
                 </div>
-                <div className="xs:justify-end mb-2 flex justify-center gap-2 rounded-b border border-gray-300 px-2 py-1 text-base ">
+                <div className="mb-2 flex justify-center gap-2 rounded-b border border-gray-300 px-2 py-1 text-base sm:justify-end ">
                   <CodeSandbox code={fil.innhold.trim()} />
                   <Link
                     href={`/eksempler/${node.dir.title}/${fil.navn.replace(
                       ".tsx",
                       ""
                     )}`}
-                    className="text-gray-900"
+                    className="si-ignore text-gray-900"
                     target="_blank"
                   >
                     Åpne i nytt vindu