Version Packages (#1828)

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:

.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,15 @@
 # @navikt/ds-codemod
 
+## 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.4.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.4.1",
+    "@navikt/ds-react": "^2.4.1",
     "clsx": "^1.1.1"
   },
   "devDependencies": {

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @navikt/ds-css
 
+## 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;
 }
 
 /**
@@ -52,7 +51,7 @@
 
 .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;
 }

@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,57 @@
+.navds-list ul,
+.navds-list ol {
+  padding: 0;
+}
+
+.navds-list li:not(:first-child) {
+  margin-top: var(--a-spacing-5);
+}
+
+.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.4.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.4.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,50 @@
 # @navikt/ds-react
 
+## 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.4.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.4.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: {

@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/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,85 @@
+import cl from "clsx";
+import React, { createContext, forwardRef } 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>;
+}
+
+interface ListComponent extends React.ForwardRefExoticComponent<ListProps> {
+  Item: ListItemType;
+}
+
+interface ListContextProps {
+  listType: "ul" | "ol";
+}
+
+export const ListContext = createContext<ListContextProps>({
+  listType: "ul",
+});
+
+export const List = forwardRef<HTMLDivElement, ListProps>(
+  (
+    {
+      children,
+      className,
+      as: ListTag = "ul",
+      title,
+      description,
+      headingTag = "h3",
+      ...rest
+    },
+    ref
+  ) => {
+    const ariaId = useId();
+
+    return (
+      <ListContext.Provider
+        value={{
+          listType: ListTag,
+        }}
+      >
+        <div {...rest} ref={ref} className={cl("navds-list", className)}>
+          {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,71 @@
+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
+   */
+  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 } = useContext(ListContext);
+
+    return (
+      <li {...rest} ref={ref} className={cl("navds-list__item", className)}>
+        {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,119 @@
+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>
+    );
+  },
+};

@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,15 @@
 # @navikt/ds-tailwind
 
+## 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.4.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.4.1",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @navikt/ds-tokens
 
+## 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

@@ -69,7 +69,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 +134,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 +154,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 +163,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 +173,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 +200,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 +227,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 +293,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.4.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/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,15 @@
 # @navikt/ds-icons
 
+## 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.4.1",
   "description": "Aksel icons for NAV",
   "author": "Aksel | NAV designsystem team",
   "repository": {

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/ds-css-internal
 
+## 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.4.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,45 @@
 # @navikt/ds-react-internal
 
+## 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.4.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.4.1",
+    "@navikt/ds-react": "^2.4.1",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1"
   },

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"),

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.4.1",
+    "@navikt/ds-css": "^2.4.1",
+    "@navikt/ds-css-internal": "^2.4.1",
+    "@navikt/ds-icons": "^2.4.1",
+    "@navikt/ds-react": "^2.4.1",
+    "@navikt/ds-react-internal": "^2.4.1",
+    "@navikt/ds-tailwind": "^2.4.1",
+    "@navikt/ds-tokens": "^2.4.1"
   },
   "devDependencies": {
-    "prettier-plugin-tailwindcss": "^0.1.13"
+    "prettier-plugin-tailwindcss": "^0.2.3"
   }
 }

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

@@ -190,7 +190,7 @@ const serializers = {
       }
       if (href && href.startsWith("mailto:")) {
         return (
-          <NextLink href={href} passHref>
+          <NextLink href={href} passHref legacyBehavior>
             <Link
               onClick={(e) =>
                 logNav(
@@ -222,7 +222,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 +244,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/layout/footer/Footer.tsx

@@ -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>
   );

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>
   );
@@ -56,20 +56,20 @@ 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>
+            <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

@@ -154,6 +154,7 @@ const AkselArtikkelTemplate = ({
                     key={title}
                     href={`/god-praksis/${slug.current}`}
                     passHref
+                    legacyBehavior
                   >
                     <BodyShort
                       size="small"
@@ -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

@@ -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>
@@ -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/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 }) => (
@@ -96,6 +96,7 @@ export const WithSidebar = ({
                       <NextLink
                         href={`/${pageType.type.toLowerCase()}`}
                         passHref
+                        legacyBehavior
                       >
                         <Link className="text-text-default">
                           {capitalize(pageType.type)}

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"

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

@@ -102,6 +102,7 @@ const TokenTable = ({ node }: { node: SanityT.Schema.token_kategori }) => {
               <NextLink
                 href="https://aksel.nav.no/grunnleggende/styling/design-tokens#hec62d38bc813"
                 passHref
+                legacyBehavior
               >
                 <Link>guiden vår</Link>
               </NextLink>{" "}

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

@@ -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

@@ -23,19 +23,19 @@ const InnholdsKort = ({
         id={node._key}
         className="algolia-index-lvl3 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

@@ -31,32 +31,33 @@ const RelatertInnhold = ({
       )}
     >
       {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="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"
+        >
+          <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

@@ -109,7 +109,7 @@ 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)]"
                     )}
@@ -123,7 +123,7 @@ const ComponentExamples = ({
                       ".tsx",
                       ""
                     )}`}
-                    className="text-gray-900"
+                    className="si-ignore text-gray-900"
                     target="_blank"
                   >
                     Åpne i nytt vindu

aksel.nav.no/website/components/sanity-modules/component-overview/index.tsx

@@ -3,7 +3,7 @@ import { SanityT, urlFor } from "@/lib";
 import { Heading } from "@navikt/ds-react";
 import Nextlink from "next/link";
 import cl from "clsx";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { StatusTag } from "components/website-modules/StatusTag";
 
 const ComponentOverview = ({
@@ -58,8 +58,8 @@ const ComponentOverview = ({
                   <Image
                     src={urlFor(x.status?.bilde).auto("format").url()}
                     decoding="async"
-                    width="200px"
-                    height="200px"
+                    width="200"
+                    height="200"
                     layout="fixed"
                     objectFit="contain"
                     alt={x?.heading + " thumbnail"}
@@ -106,7 +106,11 @@ const ComponentOverview = ({
 
               <div className="grid p-6 pt-0">
                 <span className="flex items-center justify-between">
-                  <Nextlink href={`/${x?.slug.current}`} passHref>
+                  <Nextlink
+                    href={`/${x?.slug.current}`}
+                    passHref
+                    legacyBehavior
+                  >
                     <Heading
                       as="a"
                       size="small"

aksel.nav.no/website/components/sanity-modules/icon-search/Filter.tsx

@@ -62,6 +62,7 @@ const Filter = ({
         }}
         size="small"
         defaultValue="outline"
+        variant="neutral"
       >
         <ToggleGroup.Item value="outline">Outline</ToggleGroup.Item>
         <ToggleGroup.Item value="filled">Filled</ToggleGroup.Item>

aksel.nav.no/website/components/sanity-modules/icon-search/ModalContent.tsx

@@ -1,7 +1,7 @@
 import meta from "@navikt/ds-icons/meta.json";
 import { BodyShort, Button, Detail, Heading } from "@navikt/ds-react";
-import Image from "next/image";
 import { useEffect, useState } from "react";
+import Image from "next/legacy/image";
 
 import {
   AmplitudeEvents,
@@ -11,7 +11,7 @@ import {
 } from "@/components";
 import { SanityT } from "@/lib";
 import { Download } from "@navikt/ds-icons";
-import { SuggestionBlock } from "components/website-modules/SuggestionBlock";
+import { SuggestionBlock } from "components/website-modules/suggestionblock";
 
 const ModalContent = ({ icon }: { icon: string }) => {
   const [blob, setBlob]: any = useState();
@@ -136,8 +136,8 @@ import ${icon} from "@navikt/ds-icons/svg/${icon}.svg";`,
           <Image
             src={`https://raw.githubusercontent.com/navikt/aksel/main/%40navikt/icons/svg/${icon}.svg`}
             decoding="sync"
-            width="96px"
-            height="96px"
+            width="96"
+            height="96"
             layout="fixed"
             objectFit="contain"
             alt={icon + "eksempel lyst"}
@@ -149,8 +149,8 @@ import ${icon} from "@navikt/ds-icons/svg/${icon}.svg";`,
             src={`https://raw.githubusercontent.com/navikt/aksel/main/%40navikt/icons/svg/${icon}.svg`}
             decoding="sync"
             className="invert"
-            width="96px"
-            height="96px"
+            width="96"
+            height="96"
             layout="fixed"
             objectFit="contain"
             alt={icon + " eksempel mørk bakgrunn"}

aksel.nav.no/website/components/sanity-modules/icon-search/Search.tsx

@@ -8,7 +8,7 @@ import {
 } from "@/components";
 import meta from "@navikt/ds-icons/meta.json";
 import { BodyLong, BodyShort, Heading, Link, Modal } from "@navikt/ds-react";
-import { SuggestionBlock } from "components/website-modules/SuggestionBlock";
+import { SuggestionBlock } from "components/website-modules/suggestionblock";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";

aksel.nav.no/website/components/website-modules/AkselLink.tsx

@@ -16,49 +16,45 @@ const AkselLink = ({
   className?: string;
 }) => {
   return (
-    <Link href={href} passHref>
-      <a
+    <Link
+      href={href}
+      passHref
+      className={cl("group relative w-fit pr-5 focus:outline-none", className, {
+        "white focus-visible:text-text-default focus-visible:bg-blue-200 focus-visible:shadow-[0_0_0_3px_var(--a-blue-200)]":
+          inverted,
+        "text-deepblue-500 focus-visible:text-text-on-action group-hover:text-deepblue-800 focus-visible:bg-blue-800 focus-visible:shadow-[0_0_0_3px_var(--a-blue-800)]":
+          !inverted,
+      })}
+      onClick={(e) =>
+        logNav(
+          "link",
+          window.location.pathname,
+          e.currentTarget.getAttribute("href")
+        )
+      }
+    >
+      {children}
+      <svg
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
         className={cl(
-          "group relative w-fit pr-5 focus:outline-none",
-          className,
-          {
-            "white focus-visible:text-text-default focus-visible:bg-blue-200 focus-visible:shadow-[0_0_0_3px_var(--a-blue-200)]":
-              inverted,
-            "text-deepblue-500 focus-visible:text-text-on-action group-hover:text-deepblue-800 focus-visible:bg-blue-800 focus-visible:shadow-[0_0_0_3px_var(--a-blue-800)]":
-              !inverted,
-          }
+          "ml-2 h-[20px] w-[10px] scale-[0.85] transition-[width,right] group-hover:w-[16px]",
+          "absolute right-[5px] top-1/2 -translate-y-1/2 rotate-180 group-hover:right-0"
         )}
-        onClick={(e) =>
-          logNav(
-            "link",
-            window.location.pathname,
-            e.currentTarget.getAttribute("href")
-          )
-        }
+        aria-hidden
       >
-        {children}
-        <svg
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          className={cl(
-            "ml-2 h-[20px] w-[10px] scale-[0.85] transition-[width,right] group-hover:w-[16px]",
-            "absolute right-[5px] top-1/2 -translate-y-1/2 rotate-180 group-hover:right-0"
-          )}
-          aria-hidden
-        >
-          <path
-            d="M8 17.5L2.12132 11.6213C0.949744 10.4497 0.949746 8.55025 2.12132 7.37868L8 1.5"
-            stroke="currentColor"
-            strokeWidth="1.5"
-          />
-          <path
-            d="M16 9.72266L8 9.72266"
-            strokeWidth="1.5"
-            stroke="currentColor"
-            className="hidden group-hover:block"
-          />
-        </svg>
-      </a>
+        <path
+          d="M8 17.5L2.12132 11.6213C0.949744 10.4497 0.949746 8.55025 2.12132 7.37868L8 1.5"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        />
+        <path
+          d="M16 9.72266L8 9.72266"
+          strokeWidth="1.5"
+          stroke="currentColor"
+          className="hidden group-hover:block"
+        />
+      </svg>
     </Link>
   );
 };

aksel.nav.no/website/components/website-modules/BloggAd.tsx

@@ -69,7 +69,11 @@ export const BloggAd = () => {
         </BodyLong>
         <BodyLong>
           Ta kontakt med{" "}
-          <NextLink href="https://nav-it.slack.com/archives/C7NE7A8UF" passHref>
+          <NextLink
+            href="https://nav-it.slack.com/archives/C7NE7A8UF"
+            passHref
+            legacyBehavior
+          >
             <Link className="font-semibold text-[#831843]">
               #Aksel-designsystemet
             </Link>

aksel.nav.no/website/components/website-modules/BreadCrumbs.tsx

@@ -18,34 +18,35 @@ export const BreadCrumbs = ({
   }
 
   return (
-    <NextLink href={href ?? `/god-praksis/${router.query.tema}`} passHref>
-      <a className="text-deepblue-500 hover:text-deepblue-800 group mb-1 flex w-fit items-center justify-start focus:underline focus:outline-none">
-        <svg
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          className={cl(
-            "transition-width text-deepblue-500 group-hover:text-deepblue-800 mr-2 h-[20px] w-[10px] group-hover:w-[16px]"
-          )}
-          aria-hidden
-        >
-          <path
-            d="M8 17.5L2.12132 11.6213C0.949744 10.4497 0.949746 8.55025 2.12132 7.37868L8 1.5"
-            stroke="currentColor"
-            strokeWidth="1.5"
-          />
-          <path
-            d="M16 9.72266L8 9.72266"
-            strokeWidth="1.5"
-            stroke="currentColor"
-            className="hidden group-hover:block"
-          />
-        </svg>
-
-        {text ??
-          (router.query.tema as string).replace(/(^\w|\s\w)/g, (m) =>
-            m.toUpperCase()
-          )}
-      </a>
+    <NextLink
+      href={href ?? `/god-praksis/${router.query.tema}`}
+      passHref
+      className="text-deepblue-500 hover:text-deepblue-800 group mb-1 flex w-fit items-center justify-start focus:underline focus:outline-none"
+    >
+      <svg
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={cl(
+          "transition-width text-deepblue-500 group-hover:text-deepblue-800 mr-2 h-[20px] w-[10px] group-hover:w-[16px]"
+        )}
+        aria-hidden
+      >
+        <path
+          d="M8 17.5L2.12132 11.6213C0.949744 10.4497 0.949746 8.55025 2.12132 7.37868L8 1.5"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        />
+        <path
+          d="M16 9.72266L8 9.72266"
+          strokeWidth="1.5"
+          stroke="currentColor"
+          className="hidden group-hover:block"
+        />
+      </svg>
+      {text ??
+        (router.query.tema as string).replace(/(^\w|\s\w)/g, (m) =>
+          m.toUpperCase()
+        )}
     </NextLink>
   );
 };

aksel.nav.no/website/components/website-modules/LatestBloggs.tsx

@@ -1,4 +1,4 @@
-import Image from "next/image";
+import Image from "next/legacy/image";
 import NextLink from "next/link";
 import { dateStr } from "@/utils";
 import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
@@ -98,7 +98,7 @@ export const LatestBloggposts = ({
               />
             )}
           </div>
-          <NextLink href={`/${bloggs[0].slug}`} passHref>
+          <NextLink href={`/${bloggs[0].slug}`} passHref legacyBehavior>
             <Link className="text-deepblue-500 no-underline hover:underline">
               <Heading
                 size="large"
@@ -163,7 +163,7 @@ export const LatestBloggposts = ({
                   </div>
                 )}
                 <div>
-                  <NextLink href={`/${blog.slug}`} passHref>
+                  <NextLink href={`/${blog.slug}`} passHref legacyBehavior>
                     <Link className="text-deepblue-500 no-underline hover:underline">
                       <Heading
                         size="small"
@@ -236,7 +236,7 @@ export const LatestBloggposts = ({
               />
             )}
           </div>
-          <NextLink href={`/${bloggs[0].slug}`} passHref>
+          <NextLink href={`/${bloggs[0].slug}`} passHref legacyBehavior>
             <Link className="text-deepblue-500 no-underline hover:underline">
               <Heading
                 size="large"
@@ -295,7 +295,7 @@ export const LatestBloggposts = ({
                 </div>
               )}
               <div>
-                <NextLink href={`/${blog.slug}`} passHref>
+                <NextLink href={`/${blog.slug}`} passHref legacyBehavior>
                   <Link className="text-deepblue-500 no-underline hover:underline">
                     <Heading
                       size="small"

aksel.nav.no/website/components/website-modules/PreviewBanner.tsx

@@ -41,8 +41,9 @@ function PreviewBanner(): JSX.Element {
           <Link
             href="https://aksel.nav.no/god-praksis/artikler/ny-redaktor-i-aksel"
             passHref
+            className="underline"
           >
-            <a className="underline">Les mer om hvordan du får tilgang</a>
+            Les mer om hvordan du får tilgang
           </Link>
         </div>
       </>

aksel.nav.no/website/components/website-modules/ToolsCard.tsx

@@ -77,7 +77,7 @@ export const ToolCard = () => {
             <div className="-rotate-45">{t.icon}</div>
           </div>
           <div>
-            <NextLink href={t.href} passHref>
+            <NextLink href={t.href} passHref legacyBehavior>
               <Link
                 className="text-text-default mb-1 font-semibold"
                 onClick={(e) =>

aksel.nav.no/website/components/website-modules/suggestionblock/index.tsx

@@ -1,5 +1,5 @@
 import { LightBulb } from "@navikt/ds-icons";
-import { BodyLong, BodyShort, Heading } from "@navikt/ds-react";
+import { BodyLong, BodyShort, Button, Heading } from "@navikt/ds-react";
 import cl from "classnames";
 import { ChangeLogIconOutline } from "components/assets";
 
@@ -23,12 +23,14 @@ const SuggestionBlockComponent = ({
           {options[variant]?.heading}
         </Heading>
         <BodyLong className="mt-2">{options[variant]?.text}</BodyLong>
-        <a
+        <Button
+          variant="secondary-neutral"
+          as="a"
           href={options[variant].link + reference}
-          className="border-border-strong active:bg-surface-active hover:bg-surface-hover focus-visible:shadow-focus mt-4 w-fit rounded border-[2px] px-3 py-[6px] font-semibold focus:outline-none"
+          className="mt-4 w-fit"
         >
           Send innspill
-        </a>
+        </Button>
       </div>
     </div>
   );
@@ -55,7 +57,7 @@ export const SuggestionBlock = ({
   return (
     <div
       className={cl(
-        "ring-border-subtle flex justify-between rounded-lg px-6 py-4 ring-1",
+        "ring-border-subtle flex justify-between gap-3 rounded-lg px-6 py-4 ring-1",
         {
           "mb-0 mt-5": variant === "ikon" || variant === "ikon-ny",
           "mb-12": variant !== "ikon" && variant !== "ikon-ny",
@@ -67,12 +69,13 @@ export const SuggestionBlock = ({
         <LightBulb aria-hidden className="shrink-0 text-2xl" />
         {options[variant]?.text}
       </BodyShort>
-      <a
+      <Button
+        variant="secondary-neutral"
+        as="a"
         href={options[variant]?.link + reference}
-        className="border-border-strong active:bg-surface-active hover:bg-surface-hover focus-visible:shadow-focus rounded border-[2px] px-3 py-[6px] font-semibold focus:outline-none"
       >
         Send forslag
-      </a>
+      </Button>
     </div>
   );
 };
@@ -114,7 +117,7 @@ const options: {
     text: "Har du innspill til ikonet?",
     link:
       issueUrl +
-      "&labels=forespørsel+🥰%2Cnytt+✨&template=update-icon.yml&title=%5BInnspill+til+ikon%5D%3A+",
+      "&labels=forespørsel+🥰%2Cnytt+✨%2Cikoner+🖼&template=update-icon.yml&title=%5BTilbakemelding%20p%C3%A5%20ikon%5D%3A+",
   },
   "komponent-ny": {
     text: "Denne komponenten er ny eller oppdatert. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!",

aksel.nav.no/website/components/website-modules/suggestionblock/suggestionblock.stories.tsx

@@ -0,0 +1,41 @@
+import { SuggestionBlock } from "./index";
+import { Meta } from "@storybook/react";
+import { NextDecorator } from "../../StoryDecorator";
+
+const MetaData: Meta = {
+  component: SuggestionBlock,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <NextDecorator>
+        <Story />
+      </NextDecorator>
+    ),
+  ],
+};
+
+export default MetaData;
+
+export const Ikoner = {
+  render: () => <SuggestionBlock variant="ikoner" />,
+};
+
+export const Ikon = {
+  render: () => <SuggestionBlock variant="ikon" />,
+};
+
+export const Komponent = {
+  render: () => <SuggestionBlock variant="komponent" />,
+};
+
+export const KomponentBeta = {
+  render: () => <SuggestionBlock variant="komponent-beta" />,
+};
+
+export const KomponentNy = {
+  render: () => <SuggestionBlock variant="komponent-ny" />,
+};
+
+export const Komponenter = {
+  render: () => <SuggestionBlock variant="komponenter" />,
+};

aksel.nav.no/website/lib/sanity/queries.js

@@ -196,7 +196,12 @@ const contributorsSingle = `contributors[0]->{
 export const akselBloggPosts = `*[_type == "blogg_landingsside"][0]{
   "page": {..., intro[]{...,${deRefs}}},
   "bloggposts": *[_type == "aksel_blogg"] | order(_createdAt desc){
-    ...,
+    seo,
+    heading,
+    ingress,
+    publishedAt,
+    _createdAt,
+    _id,
     "slug": slug.current,
     ${contributorsAll}
   }

aksel.nav.no/website/next.config.js

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable no-undef */
 
-const withTM = require("next-transpile-modules")(["@navikt/ds-tokens"]);
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
 });
@@ -51,75 +50,72 @@ const securityHeaders = [
 ];
 
 const config = () =>
-  withBundleAnalyzer(
-    withTM({
-      serverRuntimeConfig: {
-        // Will only be available on the server side
-        azureAppClientId: process.env.AZURE_APP_CLIENT_ID,
-        azureJwksUri: process.env.AZURE_OPENID_CONFIG_JWKS_URI,
-        azureAppIssuer: process.env.AZURE_OPENID_CONFIG_ISSUER,
-        azureAppWellKnownUrl: process.env.AZURE_APP_WELL_KNOWN_URL,
-        azureAppJWK: process.env.AZURE_APP_JWK,
-      },
-      publicRuntimeConfig: {
-        NEXT_PUBLIC_TEST: process.env.NEXT_PUBLIC_TEST,
-      },
-      async headers() {
-        return [
-          {
-            source: "/:path*",
-            headers: securityHeaders,
-          },
-        ];
-      },
-      async redirects() {
-        return [
-          {
-            source: "/studio",
-            destination: "/admin",
-            permanent: true,
-          },
-          {
-            source: "/storybook",
-            destination:
-              "https://main--5f801fb2aea7820022de2936.chromatic.com/",
-            permanent: true,
-          },
-          {
-            source: "/prinsipper",
-            destination: "/",
-            permanent: false,
-          },
-          {
-            source: "/preview/:slug*",
-            destination: "/api/preview?slug=:slug*",
-            permanent: true,
-          },
-        ];
+  withBundleAnalyzer({
+    transpilePackages: ["@navikt/ds-tokens"],
+    serverRuntimeConfig: {
+      // Will only be available on the server side
+      azureAppClientId: process.env.AZURE_APP_CLIENT_ID,
+      azureJwksUri: process.env.AZURE_OPENID_CONFIG_JWKS_URI,
+      azureAppIssuer: process.env.AZURE_OPENID_CONFIG_ISSUER,
+      azureAppWellKnownUrl: process.env.AZURE_APP_WELL_KNOWN_URL,
+      azureAppJWK: process.env.AZURE_APP_JWK,
+    },
+    publicRuntimeConfig: {
+      NEXT_PUBLIC_TEST: process.env.NEXT_PUBLIC_TEST,
+    },
+    async headers() {
+      return [
+        {
+          source: "/:path*",
+          headers: securityHeaders,
+        },
+      ];
+    },
+    rewrites: async () => [
+      {
+        source: "/sitemap.xml",
+        destination: "/api/sitemap",
       },
+    ],
+    async redirects() {
+      return [
+        {
+          source: "/studio",
+          destination: "/admin",
+          permanent: true,
+        },
+        {
+          source: "/storybook",
+          destination: "https://main--5f801fb2aea7820022de2936.chromatic.com/",
+          permanent: false,
+        },
+        {
+          source: "/prinsipper",
+          destination: "/",
+          permanent: false,
+        },
+        {
+          source: "/preview/:slug*",
+          destination: "/api/preview?slug=:slug*",
+          permanent: true,
+        },
+      ];
+    },
+    webpack(config) {
+      config.module.rules.push({
+        test: /\.svg$/,
+        use: ["@svgr/webpack"],
+      });
 
-      webpack(config) {
-        config.module.rules.push({
-          test: /\.svg$/,
-          use: ["@svgr/webpack"],
-        });
-
-        return config;
-      },
-      images: {
-        domains: ["cdn.sanity.io", "raw.githubusercontent.com"],
-        dangerouslyAllowSVG: true,
-      },
-      /* swcMinify: true,
-      httpAgentOptions: {
-        keepAlive: false,
-      }, */
-    })
-  );
+      return config;
+    },
+    images: {
+      domains: ["cdn.sanity.io", "raw.githubusercontent.com"],
+      dangerouslyAllowSVG: true,
+    },
+  });
 
 if (process.env.NODE_ENV === "production") {
-  /* console.log("sentry is enabled");
-  module.exports = withSentryConfig(config(), { silent: true }); */
   module.exports = config();
 } else {
   module.exports = config();

aksel.nav.no/website/package.json

@@ -20,21 +20,22 @@
     "test": "jest",
     "playwright": "playwright test",
     "test:watch": "jest --watch",
-    "backup": "ts-node scripts/backup.js"
+    "backup": "ts-node scripts/backup.js",
+    "watch:tw": "yarn tailwindcss -i ./styles/index.css -o ./dist/tw.css --watch"
   },
   "dependencies": {
     "@sanity/block-content-to-react": "^3.0.0",
-    "@sanity/client": "^4.0.1",
+    "@sanity/client": "^5.2.2",
     "@sanity/code-input": "4.0.0",
     "@sanity/color-input": "^3.0.2",
     "@sanity/icons": "2.2.2",
     "@sanity/image-url": "1.0.2",
-    "@sanity/preview-kit": "^1.3.2",
+    "@sanity/preview-kit": "^1.3.4",
     "@sanity/table": "1.0.1",
-    "@sanity/ui": "^1.2.0",
-    "@sanity/vision": "3.2.6",
+    "@sanity/ui": "^1.2.5",
+    "@sanity/vision": "3.5.0",
     "@svgr/webpack": "^5.5.0",
-    "amplitude-js": "^8.8.0",
+    "amplitude-js": "^8.21.5",
     "boring-avatars": "1.7.0",
     "clsx": "^1.2.1",
     "codesandbox": "^2.2.3",
@@ -45,7 +46,7 @@
     "jose": "4.10.0",
     "jwt-decode": "3.1.2",
     "lodash": "^4.17.21",
-    "next": "^12.2.0",
+    "next": "^13.2.1",
     "next-sanity": "^4.1.2",
     "prettier": "2.7.1",
     "prism-react-renderer": "^1.3.0",
@@ -54,10 +55,10 @@
     "react-dom": "^18.0.0",
     "react-modal": "3.15.1",
     "recharts": "^2.2.0",
-    "sanity": "3.2.6",
+    "sanity": "3.5.0",
     "sanity-plugin-asset-source-unsplash": "^1.0.6",
     "sanity-plugin-iframe-pane": "^2.1.1",
-    "sanity-plugin-media": "^2.0.4",
+    "sanity-plugin-media": "^2.0.5",
     "sitemap": "^7.0.0",
     "styled-components": "^5.2",
     "swr": "^1.1.2",
@@ -82,7 +83,6 @@
     "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.0.0",
     "json5": "2.2.1",
-    "next-transpile-modules": "^9.0.0",
     "postcss": "^8.4.0",
     "postcss-import": "^14.1.0",
     "postcss-loader": "7.0.0",

aksel.nav.no/website/pages/404.tsx

@@ -24,7 +24,7 @@ function Page() {
         <BodyLong className="mb-2">
           Vi fant ikke siden du var ute etter{" "}
         </BodyLong>
-        <NextLink href="/" passHref>
+        <NextLink href="/" passHref legacyBehavior>
           <Link>Tilbake til forsiden</Link>
         </NextLink>
       </div>

aksel.nav.no/website/pages/api/log-page-view.ts

@@ -85,7 +85,7 @@ export default async function logPageView(
     // If last week is not same as current week, add new week
     await client
       .patch(metrics._id)
-      .prepend("weekObj.weeks", [
+      .prepend("weeksObj.weeks", [
         {
           week: format(new Date(), "yyyy-MM-dd"),
           views: 1,

aksel.nav.no/website/pages/eksempler/accordion/controlled-state.tsx

@@ -35,6 +35,11 @@ const Example = () => {
 
 export default withDsExample(Example);
 
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
 export const args = {
   index: 1,
 };

aksel.nav.no/website/pages/eksempler/accordion/default.tsx

@@ -28,6 +28,11 @@ const Example = () => {
 
 export default withDsExample(Example);
 
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
 export const args = {
   index: 0,
 };

aksel.nav.no/website/pages/eksempler/alert/error.tsx

@@ -13,6 +13,11 @@ const Example = () => {
 
 export default withDsExample(Example);
 
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
 export const args = {
   index: 3,
 };

aksel.nav.no/website/pages/eksempler/alert/fullwidth.tsx

@@ -13,6 +13,11 @@ const Example = () => {
 
 export default withDsExample(Example);
 
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
 export const args = {
   index: 5,
 };

aksel.nav.no/website/pages/eksempler/alert/info.tsx

@@ -13,6 +13,11 @@ const Example = () => {
 
 export default withDsExample(Example);
 
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
 export const args = {
   index: 0,
 };

aksel.nav.no/website/pages/eksempler/alert/inline.tsx

@@ -13,6 +13,11 @@ const Example = () => {
 
 export default withDsExample(Example);
 
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
 export const args = {
   index: 6,
 };

aksel.nav.no/website/pages/eksempler/alert/med-heading.tsx

@@ -16,6 +16,11 @@ const Example = () => {
 
 export default withDsExample(Example);
 
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
 export const args = {
   index: 7,
 };

aksel.nav.no/website/pages/eksempler/alert/small.tsx

@@ -13,6 +13,11 @@ const Example = () => {
 
 export default withDsExample(Example);
 
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
 export const args = {
   index: 4,
 };

aksel.nav.no/website/pages/eksempler/alert/success.tsx

@@ -13,6 +13,11 @@ const Example = () => {
 
 export default withDsExample(Example);
 
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
 export const args = {
   index: 1,
 };