Version Packages (#2408 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
[aksel.nav.no] 📝 Story for Table i aksel (#2406 )
2026-10-15 10:12:03 +00:00 · 2023-10-20 17:18:00 +02:00 · 2023-10-20 17:02:34 +02:00 · 2023-10-20 16:30:50 +02:00 · 2023-10-20 16:05:38 +02:00 · 2023-10-20 15:54:05 +02:00
73 changed files with 571 additions and 431 deletions
@@ -1,5 +1,9 @@
 # @navikt/aksel-icons

+## 5.7.6
+
+## 5.7.5
+
 ## 5.7.4

 ## 5.7.3
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "5.7.4",
+  "version": "5.7.6",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,9 @@
 # @navikt/aksel-stylelint

+## 5.7.6
+
+## 5.7.5
+
 ## 5.7.4

 ## 5.7.3
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "5.7.4",
+  "version": "5.7.6",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,8 +35,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^5.7.4",
-    "@navikt/ds-tokens": "^5.7.4",
+    "@navikt/ds-css": "^5.7.6",
+    "@navikt/ds-tokens": "^5.7.6",
    "@types/jest": "^29.0.0",
    "concurrently": "7.2.1",
    "copyfiles": "2.4.1",
@@ -1,5 +1,19 @@
 # @navikt/aksel

+## 5.7.6
+
+### Patch Changes
+
+- Updated dependencies [[`6d6e6443d`](https://github.com/navikt/aksel/commit/6d6e6443dd00464183b03fad6f822e5f3efab100)]:
+  - @navikt/ds-css@5.7.6
+
+## 5.7.5
+
+### Patch Changes
+
+- Updated dependencies [[`3d1b0ac20`](https://github.com/navikt/aksel/commit/3d1b0ac2041bbc289536fa5a0dc65b2170dfc6fa)]:
+  - @navikt/ds-css@5.7.5
+
 ## 5.7.4

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "5.7.4",
+  "version": "5.7.6",
  "description": "Aksel command line interface. Handles css-imports, codemods and more",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -29,7 +29,7 @@
  },
  "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
  "dependencies": {
-    "@navikt/ds-css": "5.7.4",
+    "@navikt/ds-css": "5.7.6",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,17 @@
 # @navikt/ds-css

+## 5.7.6
+
+### Patch Changes
+
+- :lipstick: Chips.Toggle: Ikon i uvalgt tilstand ([#2395](https://github.com/navikt/aksel/pull/2395))
+
+## 5.7.5
+
+### Patch Changes
+
+- Checkbox, Radio: Transparent-border fungerer nå bedre på mørkere bakgrunner ([#2388](https://github.com/navikt/aksel/pull/2388))
+
 ## 5.7.4

 ## 5.7.3
@@ -20,7 +20,7 @@
  cursor: pointer;
  align-items: center;
  justify-content: center;
-  gap: var(--a-spacing-1);
+  gap: var(--a-spacing-05);
  margin: 0;
  padding: 0 var(--a-spacing-3);
  text-decoration: none;
@@ -97,6 +97,19 @@
  }
 }

+.navds-chips--medium .navds-chips__toggle--with-checkmark {
+  padding-left: var(--a-spacing-1-alt);
+}
+
+.navds-chips--small .navds-chips__toggle--with-checkmark {
+  padding-left: var(--a-spacing-1);
+}
+
+.navds-chips--small .navds-chips__toggle-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .navds-chips__removable {
  gap: 0;
 }
@@ -31,11 +31,13 @@
 .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-default));
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--a-border-radius-small);
  flex-shrink: 0;
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
+  width: calc(1.5rem - 0.25rem);
+  height: calc(1.5rem - 0.25rem);
+  margin-block: 2px;
+  margin-inline: 2px;
 }

 .navds-radio__label::before {
@@ -64,36 +66,37 @@

 .navds-checkbox--small > .navds-checkbox__label::before,
 .navds-radio--small > .navds-radio__label::before {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: calc(1.25rem - 0.25rem);
+  height: calc(1.25rem - 0.25rem);
 }

 .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:focus-visible + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
+    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
 }

@supports not selector(:focus-visible) {
  .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-default)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), 0 0 0 4px var(--a-border-focus);
  }
 }

 .navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
 .navds-radio__input:hover:focus-visible + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
 }

@supports not selector(:focus-visible) {
  .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
  .navds-radio__input:hover:focus + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
  }
 }

 .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
-  box-shadow: none;
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }

@@ -114,7 +117,7 @@
 }

 .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  box-shadow: none;
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }

@@ -146,31 +149,33 @@

 .navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
 .navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
-  box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
 }

@supports not selector(:focus-visible) {
  .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
  .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
-    box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
  }
 }

 .navds-radio__input:checked + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-    inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }

 .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-    inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
 }

@supports not selector(:focus-visible) {
  .navds-radio__input:checked:focus + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
-      inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
  }
 }

@@ -182,13 +187,13 @@
 .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
  + .navds-checkbox__label::before,
 .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
 }

@supports not selector(:focus-visible) {
  .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
  .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
  }
 }

@@ -201,14 +206,14 @@
  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
  + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }

 .navds-checkbox--error
  > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
  + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
 }

@supports not selector(:focus-visible) {
@@ -216,7 +221,7 @@
    > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
    + .navds-checkbox__label::before,
  .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
  }
 }

@@ -225,7 +230,7 @@
  + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }

 .navds-checkbox--error
@@ -233,7 +238,7 @@
  + .navds-checkbox__label::before,
 .navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
 }

@supports not selector(:focus-visible) {
@@ -242,7 +247,7 @@
    + .navds-checkbox__label::before,
  .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
    background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
  }

  .navds-checkbox--error
@@ -250,7 +255,7 @@
    + .navds-checkbox__label::before,
  .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
    background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
-    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+    box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
  }
 }

@@ -290,7 +295,7 @@
 .navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked) + .navds-radio__label::before,
 .navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus-visible) + .navds-radio__label::before {
  background-color: var(--__ac-radio-checkbox-readonly-bg);
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
 }

 .navds-checkbox--readonly > .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
@@ -299,8 +304,8 @@
 }

 .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
  background-color: var(--__ac-radio-checkbox-readonly-bg);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
 }

 .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
@@ -308,12 +313,12 @@
 }

 .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 4px var(--__ac-radio-checkbox-readonly-bg);
  background-color: var(--a-icon-subtle);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
 }

 .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
-  box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
+  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
  background-color: var(--__ac-radio-checkbox-readonly-bg);
 }

@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "5.7.4",
+  "version": "5.7.6",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^5.7.4",
+    "@navikt/ds-tokens": "^5.7.6",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -1,5 +1,25 @@
 # @navikt/ds-react

+## 5.7.6
+
+### Patch Changes
+
+- :lipstick: Chips.Toggle: Ikon i uvalgt tilstand ([#2395](https://github.com/navikt/aksel/pull/2395))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.7.6
+  - @navikt/aksel-icons@5.7.6
+
+## 5.7.5
+
+### Patch Changes
+
+- Loader: Har nå riktig `ref`-type. ([#2391](https://github.com/navikt/aksel/pull/2391))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.7.5
+  - @navikt/aksel-icons@5.7.5
+
 ## 5.7.4

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "5.7.4",
+  "version": "5.7.6",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -38,8 +38,8 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.7.4",
-    "@navikt/ds-tokens": "^5.7.4",
+    "@navikt/aksel-icons": "^5.7.6",
+    "@navikt/ds-tokens": "^5.7.6",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -6,7 +6,7 @@ export interface ToggleChipsProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: string;
  /**
-   * Toggles aria-pressed and visual-changes
+   * Toggles aria-pressed and visual changes
   */
  selected?: boolean;
  /**
@@ -44,28 +44,38 @@ export const ToggleChips: OverridableComponent<
        className={cl(
          "navds-chips__chip navds-chips__toggle",
          className,
-          `navds-chips__toggle--${variant}`
+          `navds-chips__toggle--${variant}`,
+          { "navds-chips__toggle--with-checkmark": checkmark }
        )}
        aria-pressed={selected}
      >
-        {selected && checkmark && (
+        {checkmark && (
          <svg
            aria-hidden
            className="navds-chips__toggle-icon"
-            width="10"
-            height="8"
-            viewBox="0 0 10 8"
+            width="1.25em"
+            height="1.25em"
+            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            focusable={false}
            role="img"
          >
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M9.51894 0.45851C9.81799 0.745107 9.8281 1.21987 9.5415 1.51893L3.7915 7.51893C3.51247 7.81009 3.05315 7.82848 2.75174 7.56056L0.501735 5.56056C0.192148 5.28537 0.164263 4.81132 0.439451 4.50173C0.71464 4.19214 1.18869 4.16426 1.49828 4.43944L3.20835 5.95951L8.45852 0.481072C8.74511 0.182015 9.21988 0.171913 9.51894 0.45851Z"
-              fill="currentColor"
-            />
+            {selected ? (
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M10 18.125C14.4873 18.125 18.125 14.4873 18.125 10C18.125 5.51269 14.4873 1.875 10 1.875C5.51269 1.875 1.875 5.51269 1.875 10C1.875 14.4873 5.51269 18.125 10 18.125ZM14.128 7.72904C14.3695 7.44357 14.3339 7.01635 14.0485 6.7748C13.763 6.53326 13.3358 6.56886 13.0942 6.85432L8.60428 12.1606L6.41627 9.97263C6.15185 9.70822 5.72315 9.70822 5.45873 9.97263C5.19431 10.2371 5.19431 10.6658 5.45873 10.9302L8.16706 13.6385C8.30095 13.7724 8.48479 13.8441 8.67397 13.8362C8.86316 13.8284 9.0404 13.7416 9.16271 13.5971L14.128 7.72904Z"
+                fill="currentColor"
+              />
+            ) : (
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M10 3.125C6.20304 3.125 3.125 6.20304 3.125 10C3.125 13.797 6.20304 16.875 10 16.875C13.797 16.875 16.875 13.797 16.875 10C16.875 6.20304 13.797 3.125 10 3.125ZM1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10Z"
+                fill="var(--a-border-default)"
+              />
+            )}
          </svg>
        )}
        <span className="navds-chips__chip-text">{children}</span>
@@ -60,11 +60,11 @@ Default.argTypes = {
  },
 };

-export const Toggle = () => {
+export const Toggle = ({ size }) => {
  const [selected, setSelected] = useState<number[]>([2, 4]);
  return (
    <div className="colgap">
-      <Chips>
+      <Chips size={size}>
        {options.map((c, y) => (
          <Chips.Toggle
            selected={selected.includes(y)}
@@ -81,7 +81,7 @@ export const Toggle = () => {
          </Chips.Toggle>
        ))}
      </Chips>
-      <Chips>
+      <Chips size={size}>
        {options.map((c, y) => (
          <Chips.Toggle
            variant="neutral"
@@ -102,6 +102,12 @@ export const Toggle = () => {
    </div>
  );
 };
+Toggle.argTypes = {
+  size: {
+    control: { type: "radio" },
+    options: ["medium", "small"],
+  },
+};

 export const ToggleNoCheckmark = () => {
  const [selected, setSelected] = useState<number>(2);
@@ -4,7 +4,6 @@ import isSameDay from "date-fns/isSameDay";
 import React, { useId, useState } from "react";
 import { useDatepicker, useRangeDatepicker } from "..";
 import { BodyLong, Button, HGrid, HStack, Modal, VStack } from "../..";
-
 import DatePicker, { DatePickerProps } from "./DatePicker";

 const disabledDays = [
@@ -1,8 +1,10 @@
 import { Meta, StoryFn } from "@storybook/react";
+import setYear from "date-fns/setYear";
 import React, { useId, useState } from "react";
 import { Button, DateInputProps } from "../..";
 import { useMonthpicker } from "../hooks";
-import MonthPicker, { MonthPickerProps } from "./MonthPicker";
+import MonthPicker from "./MonthPicker";
+import { MonthPickerProps } from "./types";

 export default {
  title: "ds-react/Monthpicker",
@@ -147,3 +149,28 @@ export const UserControlled = () => {
    </div>
  );
 };
+
+export const FollowYear = () => {
+  const { monthpickerProps, inputProps, selectedMonth, setSelected } =
+    useMonthpicker({
+      fromDate: new Date("Aug 23 2019"),
+      toDate: new Date("Aug 23 2025"),
+      onMonthChange: console.log,
+    });
+
+  const customYearChange = (yearDate?: Date) => {
+    monthpickerProps.onYearChange?.(yearDate);
+    if (selectedMonth && yearDate) {
+      setSelected(setYear(selectedMonth, yearDate.getFullYear()));
+    }
+  };
+
+  return (
+    <div className="min-h-96">
+      <MonthPicker {...monthpickerProps} onYearChange={customYearChange}>
+        <MonthPicker.Input {...inputProps} label="Velg månede" />
+      </MonthPicker>
+      {selectedMonth && <div className="pt-4">{selectedMonth.getMonth()}</div>}
+    </div>
+  );
+};
@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef, SVGProps } from "react";
 import { omit, useId } from "../util";

-export interface LoaderProps extends SVGProps<SVGSVGElement> {
+export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
  /**
   * Changes Loader width/height
   * 88px | 64px | 40px | 32px | 24px | 20px | 16px
@@ -31,6 +31,12 @@ export interface LoaderProps extends SVGProps<SVGSVGElement> {
   * @default "neutral"
   */
  variant?: "neutral" | "interaction" | "inverted";
+  /**
+   * Allows getting a ref to the component instance.
+   * Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
+   * @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
+   */
+  ref?: React.Ref<SVGSVGElement>;
 }

 /* Workaround for @types/react v17/v18 feil */
@@ -1,6 +1,6 @@
-import React from "react";
-import { Loader } from "..";
 import { Meta } from "@storybook/react";
+import React from "react";
+import { Loader, LoaderProps } from "..";
 export default {
  title: "ds-react/Loader",
  component: Loader,
@@ -29,7 +29,7 @@ export default {
 } as Meta;

 export const Default = {
-  render: (props: any) => {
+  render: (props: LoaderProps) => {
    return <Loader {...props} />;
  },

@@ -1,5 +1,9 @@
 # @navikt/ds-tailwind

+## 5.7.6
+
+## 5.7.5
+
 ## 5.7.4

 ## 5.7.3
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "5.7.4",
+  "version": "5.7.6",
  "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": "^5.7.4",
+    "@navikt/ds-tokens": "^5.7.6",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,9 @@
 # @navikt/ds-tokens

+## 5.7.6
+
+## 5.7.5
+
 ## 5.7.4

 ## 5.7.3
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "5.7.4",
+  "version": "5.7.6",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,25 @@
 # Changelog

+## 5.7.6
+
+### @navikt/ds-css
+
+- :lipstick: Chips.Toggle: Ikon i uvalgt tilstand ([#2395](https://github.com/navikt/aksel/pull/2395))
+
+### @navikt/ds-react
+
+- :lipstick: Chips.Toggle: Ikon i uvalgt tilstand ([#2395](https://github.com/navikt/aksel/pull/2395))
+
+## 5.7.5
+
+### @navikt/ds-css
+
+- Checkbox, Radio: Transparent-border fungerer nå bedre på mørkere bakgrunner ([#2388](https://github.com/navikt/aksel/pull/2388))
+
+### @navikt/ds-react
+
+- Loader: Har nå riktig `ref`-type. ([#2391](https://github.com/navikt/aksel/pull/2391))
+
 ## 5.7.4

 ### @navikt/ds-react
@@ -15,11 +15,11 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^5.7.4",
-    "@navikt/ds-css": "^5.7.4",
-    "@navikt/ds-react": "^5.7.4",
-    "@navikt/ds-tailwind": "^5.7.4",
-    "@navikt/ds-tokens": "^5.7.4"
+    "@navikt/aksel-icons": "^5.7.6",
+    "@navikt/ds-css": "^5.7.6",
+    "@navikt/ds-react": "^5.7.6",
+    "@navikt/ds-tailwind": "^5.7.6",
+    "@navikt/ds-tokens": "^5.7.6"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -1,3 +1,4 @@
+import { amplitudeLogNavigation } from "@/logging";
 import { BodyLong, Detail, Heading, Link } from "@navikt/ds-react";
 import {
  PortableText,
@@ -27,7 +28,6 @@ import {
  TokenTable,
  UuFeedback,
  Video,
-  logNav,
 } from ".";

 const serializers: Partial<PortableTextReactComponents> = {
@@ -133,11 +133,7 @@ const serializers: Partial<PortableTextReactComponents> = {
          href={href}
          inlineText
          onClick={(e) =>
-            logNav(
-              "link",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
+            amplitudeLogNavigation("link", e.currentTarget.getAttribute("href"))
          }
          {...(href.startsWith("http") &&
          !href.startsWith("https://aksel.nav.no/")
@@ -160,11 +156,7 @@ const serializers: Partial<PortableTextReactComponents> = {
          href={href}
          inlineText
          onClick={(e) =>
-            logNav(
-              "link",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
+            amplitudeLogNavigation("link", e.currentTarget.getAttribute("href"))
          }
        >
          {text}
@@ -1,7 +1,7 @@
+import { amplitudeLogNavigation } from "@/logging";
 import { BodyShort, Heading, Link } from "@navikt/ds-react";
 import { FigmaIcon, GithubIcon, SlackIcon } from "components/assets";
 import Logo from "components/assets/Logo";
-import { logNav } from "components/website-modules/utils/amplitude";
 import dynamic from "next/dynamic";
 /* import FooterForm from "./FooterForm"; */

@@ -119,11 +119,7 @@ function FooterLink({ children, href }) {
        className="text-text-on-inverted focus:shadow-focus focus:text-text-default flex w-fit items-center gap-1 underline hover:no-underline focus:bg-blue-200 focus:shadow-blue-200"
        href={href}
        onClick={(e) =>
-          logNav(
-            "footer",
-            window.location.pathname,
-            e.currentTarget.getAttribute("href")
-          )
+          amplitudeLogNavigation("footer", e.currentTarget.getAttribute("href"))
        }
      >
        {children}
@@ -1,11 +1,11 @@
 import { MenuHamburgerIcon } from "@navikt/aksel-icons";

+import { amplitudeLogNavigation } from "@/logging";
 import { Modal } from "@navikt/ds-react";
 import cl from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useState } from "react";
-import { logNav } from "../..";

 const LinkElement = ({ name, href, onClick }) => {
  const { asPath } = useRouter();
@@ -23,9 +23,8 @@ const LinkElement = ({ name, href, onClick }) => {
          }
        )}
        onClick={(e) => {
-          logNav(
+          amplitudeLogNavigation(
            "header",
-            window.location.pathname,
            e.currentTarget.getAttribute("href")
          );
          onClick();
@@ -1,12 +1,12 @@
+import { amplitudeLogNavigation } from "@/logging";
+import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
+import { Button } from "@navikt/ds-react";
 import cl from "clsx";
 import Logo from "components/assets/Logo";
 import { Hamburger } from "components/layout/header/Hamburger";
+import dynamic from "next/dynamic";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { logNav } from "../..";
-import { Button } from "@navikt/ds-react";
-import dynamic from "next/dynamic";
-import { MagnifyingGlassIcon } from "@navikt/aksel-icons";

 export const GlobalSearch = dynamic(() => import("./search"), {
  loading: () => (
@@ -46,11 +46,7 @@ const LinkElement = ({ name, href, prefetch = undefined }) => {
          }
        )}
        onClick={(e) =>
-          logNav(
-            "header",
-            window.location.pathname,
-            e.currentTarget.getAttribute("href")
-          )
+          amplitudeLogNavigation("header", e.currentTarget.getAttribute("href"))
        }
      >
        {name}
@@ -87,9 +83,8 @@ export const Header = ({
              href="/"
              passHref
              onClick={(e) =>
-                logNav(
+                amplitudeLogNavigation(
                  "header",
-                  window.location.pathname,
                  e.currentTarget.getAttribute("href")
                )
              }
@@ -1,10 +1,10 @@
+import { amplitude, AmplitudeEvents } from "@/logging";
 import { allArticleDocuments } from "@/sanity/config";
 import { SearchResultsT } from "@/types";
+import { debounce } from "@navikt/ds-react";
 import { useMemo, useState } from "react";
 import useSWRImmutable from "swr/immutable";
 import { createSearchResult, formatResults, fuseSearch } from "../utils";
-import { debounce } from "@navikt/ds-react";
-import { logSearch } from "@/utils";

 export const useSearch = () => {
  const [fuseResults, setFuseResults] = useState<SearchResultsT>(null);
@@ -35,7 +35,7 @@ export const useSearch = () => {
          ...createSearchResult(formatedResults, rawResults),
          query: value,
        });
-        logSearch({
+        amplitude.track(AmplitudeEvents.søk, {
          type: "standard",
          searchedFromUrl: window.location.pathname,
          query: value,
@@ -1,4 +1,4 @@
-import { logSearch } from "@/utils";
+import { AmplitudeEvents, amplitude } from "@/logging";
 import { createContext, useCallback, useContext } from "react";
 import { useSearch } from "../hooks";
 import { SearchContext } from "./SearchProvider";
@@ -32,7 +32,7 @@ export const SearchLoggingProvider = ({
        accuracy: (100 - index / context?.results?.totalHits).toFixed(0),
        topResult: index <= context?.results?.topResults?.length,
      };
-      logSearch(data);
+      amplitude.track(AmplitudeEvents.søk, data);
    },
    [
      query,
@@ -1,5 +1,5 @@
+import { amplitudeLogNavigation } from "@/logging";
 import { AkselSidebarT } from "@/types";
-import { logNav } from "@/utils";
 import {
  ChevronDownIcon,
  SparklesIcon,
@@ -26,11 +26,7 @@ const NavItem = ({
      <Link
        href={`/${link.slug}`}
        onClick={(e) => {
-          logNav(
-            "meny",
-            window.location.pathname,
-            e.currentTarget.getAttribute("href")
-          );
+          amplitudeLogNavigation("meny", e.currentTarget.getAttribute("href"));
        }}
        className={cl(
          "hover:text-deepblue-800 focus-visible:shadow-focus text-medium pr-05 relative flex overflow-hidden py-1 pl-4 leading-snug before:rounded-full hover:before:transition-colors focus:outline-none focus-visible:z-10 focus-visible:rounded-sm",
@@ -1,10 +1,10 @@
-import { Heading } from "@navikt/ds-react";
-import Nextlink from "next/link";
-import cl from "clsx";
-import Image from "next/legacy/image";
-import { StatusTag } from "components/website-modules/StatusTag";
-import { ArticleListT } from "@/types";
 import { urlFor } from "@/sanity/interface";
+import { ArticleListT } from "@/types";
+import { Heading } from "@navikt/ds-react";
+import cl from "clsx";
+import { StatusTag } from "components/website-modules/StatusTag";
+import Image from "next/legacy/image";
+import Nextlink from "next/link";

 const ComponentOverview = ({ node }: { node: ArticleListT }) => {
  if (!node || node.length === 0) {
@@ -26,6 +26,16 @@ const ComponentOverview = ({ node }: { node: ArticleListT }) => {
      } else if (b?.status?.tag === "deprecated") {
        return -1;
      }
+
+      if (a.sidebarindex !== null || b.sidebarindex !== null) {
+        if (a.sidebarindex !== null && b.sidebarindex !== null) {
+          return a.sidebarindex - b.sidebarindex;
+        } else if (a.sidebarindex !== null) {
+          return -1;
+        } else {
+          return 1;
+        }
+      }
      return a?.heading?.localeCompare(b?.heading);
    });

@@ -0,0 +1,39 @@
+import { AkselTheme, getKey } from "@/sb-util";
+import type { Meta, StoryObj } from "@storybook/react";
+import Tabell from "./Tabell";
+
+const meta = {
+  title: "Sanity-modules/Tabell",
+  component: Tabell,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tabell>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const args = {
+  node: {
+    rows: [
+      {
+        _key: getKey(),
+        cells: ["Tablehead 1", "Tablehead 2", "Tablehead 3"],
+      },
+      {
+        _key: getKey(),
+        cells: ["Cell 1", "Cell 2", "Cell 3"],
+      },
+      {
+        _key: getKey(),
+        cells: ["Cell 1", "Cell 2", "Cell 3"],
+      },
+    ],
+  },
+};
+export const Aksel: Story = {
+  args,
+  decorators: [AkselTheme],
+};
+
+export const Designsystem: Story = {
+  args,
+};
@@ -1,5 +1,6 @@
 import { withErrorBoundary } from "@/error-boundary";

+import { amplitudeLogNavigation } from "@/logging";
 import {
  AkselGodPraksisDocT,
  ResolveContributorsSingleT,
@@ -9,7 +10,7 @@ import {
 import { BodyShort, Detail, Heading } from "@navikt/ds-react";
 import { useFormatedDate } from "components/website-modules/utils/getDate";
 import NextLink from "next/link";
-import { abbrName, logNav } from "../..";
+import { abbrName } from "../..";

 const ArtikkelCard = ({
  slug,
@@ -42,9 +43,8 @@ const ArtikkelCard = ({
        passHref
        className="after:absolute after:inset-0 after:z-10 after:rounded-lg focus:outline-none"
        onClick={(e) =>
-          logNav(
+          amplitudeLogNavigation(
            "artikkel-kort",
-            window.location.pathname,
            e.currentTarget.getAttribute("href")
          )
        }
@@ -1,9 +1,10 @@
 import { withErrorBoundary } from "@/error-boundary";
+import { amplitudeLogNavigation } from "@/logging";
 import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";
+import { getAuthors } from "@/utils";
 import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
 import { useFormatedDate } from "components/website-modules/utils/getDate";
 import NextLink from "next/link";
-import { getAuthors, logNav } from "@/utils";

 const BloggCard = ({
  blog,
@@ -21,9 +22,8 @@ const BloggCard = ({
          <Link
            className="text-deepblue-500 underline hover:no-underline"
            onClick={(e) =>
-              logNav(
+              amplitudeLogNavigation(
                "blogg-card",
-                window.location.pathname,
                e.currentTarget.getAttribute("href")
              )
            }
@@ -1,7 +1,7 @@
 import { withErrorBoundary } from "@/error-boundary";
+import { amplitudeLogNavigation } from "@/logging";
 import { urlFor } from "@/sanity/interface";
 import { AkselTemaT } from "@/types";
-import { logNav } from "@/utils";
 import { BodyShort } from "@navikt/ds-react";
 import cl from "clsx";
 import Image from "next/legacy/image";
@@ -33,11 +33,7 @@ const GodPraksisCard = ({ node }: { node: AkselTemaT }) => {
        href={`/god-praksis/${node.slug.current}`}
        passHref
        onClick={(e) =>
-          logNav(
-            "card",
-            window.location.pathname,
-            e.currentTarget.getAttribute("href")
-          )
+          amplitudeLogNavigation("card", e.currentTarget.getAttribute("href"))
        }
        className="navds-heading--medium text-deepblue-700 navds-heading  mb-4 underline after:absolute after:inset-0 after:rounded-lg focus:outline-none group-hover:no-underline"
      >
@@ -1,7 +1,7 @@
 import { withErrorBoundary } from "@/error-boundary";
+import { amplitudeLogNavigation } from "@/logging";
 import { urlFor } from "@/sanity/interface";
 import { AkselTemaT } from "@/types";
-import { logNav } from "@/utils";
 import Image from "next/legacy/image";
 import NextLink from "next/link";

@@ -26,11 +26,7 @@ const GodPraksisCardSimple = ({ node }: { node: Partial<AkselTemaT> }) => {
        href={`/god-praksis/${node.slug.current}`}
        passHref
        onClick={(e) =>
-          logNav(
-            "card",
-            window.location.pathname,
-            e.currentTarget.getAttribute("href")
-          )
+          amplitudeLogNavigation("card", e.currentTarget.getAttribute("href"))
        }
        className="navds-heading--small navds-link text-deepblue-700 navds-heading flex-wrap break-all no-underline hover:underline focus:outline-none"
      >
@@ -1,7 +1,7 @@
 import { withErrorBoundary } from "@/error-boundary";
+import { amplitudeLogNavigation } from "@/logging";
 import { SanityBlockContent } from "@/sanity-block";
 import { InnholdsKortPrinsipperT } from "@/types";
-import { logNav } from "@/utils";
 import { Heading } from "@navikt/ds-react";
 import NextLink from "next/link";

@@ -23,9 +23,9 @@ const InnholdsKort = ({ node }: { node: InnholdsKortPrinsipperT }) => {
          href={`/${node?.lenke}`}
          passHref
          onClick={(e) =>
-            logNav(
+            amplitudeLogNavigation(
              "prinsipp-kort",
-              window.location.pathname,
+
              e.currentTarget.getAttribute("href")
            )
          }
@@ -1,5 +1,5 @@
-import { logNav } from "@/components";
 import { withErrorBoundary } from "@/error-boundary";
+import { amplitudeLogNavigation } from "@/logging";
 import { RelatertInnholdT } from "@/types";
 import { NewspaperIcon } from "@navikt/aksel-icons";
 import { Heading, Link } from "@navikt/ds-react";
@@ -31,9 +31,8 @@ const RelatertInnhold = ({ node }: { node: RelatertInnholdT }) => {
              as={NextLink}
              href={getHref(x)}
              onClick={(e) =>
-                logNav(
+                amplitudeLogNavigation(
                  "relatert-innhold",
-                  window.location.pathname,
                  e.currentTarget.getAttribute("href")
                )
              }
@@ -1,9 +1,9 @@
 import { withErrorBoundary } from "@/error-boundary";
+import { amplitudeLogNavigation } from "@/logging";
 import { urlFor } from "@/sanity/interface";
 import { abbrName } from "@/utils";
 import { BodyShort, Detail, Heading } from "@navikt/ds-react";
 import cl from "clsx";
-import { logNav } from "components/website-modules/utils/amplitude";
 import { getImage } from "components/website-modules/utils/get-image";
 import { useFormatedDate } from "components/website-modules/utils/getDate";
 import NextImage from "next/legacy/image";
@@ -112,9 +112,8 @@ const Card = ({
            passHref
            className="after:absolute after:inset-0 after:z-10 after:rounded-lg focus:outline-none"
            onClick={(e) =>
-              logNav(
+              amplitudeLogNavigation(
                "forside-masonary",
-                window.location.pathname,
                e.currentTarget.getAttribute("href")
              )
            }
@@ -1,5 +1,6 @@
+import { amplitudeLogNavigation } from "@/logging";
 import { urlFor } from "@/sanity/interface";
-import { getAuthors, logNav } from "@/utils";
+import { getAuthors } from "@/utils";
 import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
 import cl from "clsx";
 import { getImage } from "components/website-modules/utils/get-image";
@@ -79,9 +80,8 @@ export const Highlight = ({
          <Link
            as={NextLink}
            onClick={(e) =>
-              logNav(
+              amplitudeLogNavigation(
                "artikkel-kort",
-                window.location.pathname,
                e.currentTarget.getAttribute("href")
              )
            }
@@ -1,8 +1,8 @@
 import { withErrorBoundary } from "@/error-boundary";
+import { amplitudeLogNavigation } from "@/logging";
+import cl from "clsx";
 import Link from "next/link";
 import React from "react";
-import cl from "clsx";
-import { logNav } from "@/utils";

 const AkselLink = ({
  href,
@@ -26,11 +26,7 @@ const AkselLink = ({
          !inverted,
      })}
      onClick={(e) =>
-        logNav(
-          "link",
-          window.location.pathname,
-          e.currentTarget.getAttribute("href")
-        )
+        amplitudeLogNavigation("link", e.currentTarget.getAttribute("href"))
      }
    >
      {children}
@@ -1,6 +1,6 @@
-import { logNav } from "components/website-modules/utils/amplitude";
-import Link from "next/link";
+import { amplitudeLogNavigation } from "@/logging";
 import cl from "clsx";
+import Link from "next/link";

 export const IntroCards = ({
  links,
@@ -31,9 +31,8 @@ export const IntroCards = ({
            )}
            prefetch={false}
            onClick={(e) =>
-              logNav(
+              amplitudeLogNavigation(
                "intro-kort",
-                window.location.pathname,
                e.currentTarget.getAttribute("href")
              )
            }
@@ -1,9 +1,10 @@
+import { AmplitudeEvents, amplitude } from "@/logging";
 import { FeedbackT, HelpfulArticleEnum } from "@/types";
 import { Button, Heading, Label, Textarea } from "@navikt/ds-react";
 import cl from "clsx";
 import { useRouter } from "next/router";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
-import { AmplitudeEvents, IdContext, logAmplitudeEvent } from "../utils";
+import { IdContext } from "../utils";
 import styles from "./feedback.module.css";

 const Feedback = ({
@@ -55,7 +56,7 @@ const Feedback = ({
    (completed: boolean) => {
      !hasLoggedFeedback &&
        activeState &&
-        logAmplitudeEvent(AmplitudeEvents.feedbackinteraksjon, {
+        amplitude.track(AmplitudeEvents.feedbackinteraksjon, {
          fra: asPath,
          vamd: activeState,
          completed,
@@ -1,12 +1,9 @@
+import { AmplitudeEvents, amplitude } from "@/logging";
 import * as Icons from "@navikt/aksel-icons";
 import meta from "@navikt/aksel-icons/metadata";
 import { Button, Heading } from "@navikt/ds-react";
 import Snippet from "components/sanity-modules/code/Snippet";
 import { SuggestionBlock } from "components/website-modules/suggestionblock";
-import {
-  AmplitudeEvents,
-  logAmplitudeEvent,
-} from "components/website-modules/utils/amplitude";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -52,7 +49,7 @@ export const IconSidebar = ({
  }, [name]);

  const logDownload = (icon, format) => {
-    logAmplitudeEvent(AmplitudeEvents.ikonnedlastning, {
+    amplitude.track(AmplitudeEvents.ikonnedlastning, {
      icon,
      format,
    });
@@ -1,7 +1,6 @@
-import { AmplitudeEvents, logAmplitudeEvent, logNav } from "@/utils";
+import { AmplitudeEvents, amplitude, amplitudeLogNavigation } from "@/logging";
 import { BrailleIcon, DownloadIcon, PackageIcon } from "@navikt/aksel-icons";
 import { Link as DsLink } from "@navikt/ds-react";
-
 import { FigmaIcon, GithubIcon } from "components/assets";
 import NextLink from "next/link";

@@ -23,11 +22,7 @@ export const TitleLinks = () => (
        <DsLink
          className="text-text-default no-underline hover:underline"
          onClick={(e) =>
-            logNav(
-              "link",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
+            amplitudeLogNavigation("link", e.currentTarget.getAttribute("href"))
          }
        >
          <FigmaIcon className="ml-1" /> <span className="">Figma</span>
@@ -41,7 +36,7 @@ export const TitleLinks = () => (
        href="https://cdn.nav.no/aksel/icons/zip/aksel-icons.zip"
        download="Ikonpakke"
        onClick={() => {
-          logAmplitudeEvent(AmplitudeEvents.ikonnedlastning, {
+          amplitude.track(AmplitudeEvents.ikonnedlastning, {
            icon: "Ikonpakke",
            format: "zip",
          });
@@ -60,11 +55,7 @@ export const TitleLinks = () => (
        <DsLink
          className="text-text-default no-underline hover:underline"
          onClick={(e) =>
-            logNav(
-              "link",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
+            amplitudeLogNavigation("link", e.currentTarget.getAttribute("href"))
          }
        >
          <PackageIcon className="text-2xl" aria-hidden /> Installer med NPM
@@ -81,11 +72,7 @@ export const TitleLinks = () => (
        <DsLink
          className="text-text-default no-underline hover:underline"
          onClick={(e) =>
-            logNav(
-              "link",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
+            amplitudeLogNavigation("link", e.currentTarget.getAttribute("href"))
          }
        >
          <GithubIcon className="ml-[3px] h-[18px] w-[18px]" />{" "}
@@ -103,11 +90,7 @@ export const TitleLinks = () => (
        <DsLink
          className="text-text-default no-underline hover:underline"
          onClick={(e) =>
-            logNav(
-              "link",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
+            amplitudeLogNavigation("link", e.currentTarget.getAttribute("href"))
          }
        >
          <BrailleIcon aria-hidden className="text-2xl" />{" "}
@@ -1,158 +0,0 @@
-import { SearchLogT } from "@/types";
-import getConfig from "next/config";
-import { Router } from "next/router";
-import { useCallback, useEffect } from "react";
-import { track, init } from "@amplitude/analytics-browser";
-const { publicRuntimeConfig } = getConfig();
-
-export enum AmplitudeEvents {
-  "sidevisning" = "sidevisning",
-  "navigasjon" = "navigasjon",
-  "notfound" = "notfound",
-  "error" = "error",
-  "ikonklikk" = "ikonklikk",
-  "ikonsok" = "ikonsok",
-  "fargeklikk" = "fargeklikk",
-  "ikonnedlastning" = "ikonnedlastning",
-  "feedbackinteraksjon" = "feedbackinteraksjon",
-  "scroll" = "scroll",
-  "søk" = "søk",
-}
-
-export const initAmplitude = () => {
-  if (!(typeof window === "undefined")) {
-    init("1a9a84a5e557ac9635a250bc27d75030", undefined, {
-      useBatch: true,
-      serverUrl: "https://amplitude.nav.no/collect",
-      defaultTracking: {
-        attribution: false,
-      },
-      ingestionMetadata: { sourceName: window.location.toString() },
-    });
-  }
-};
-
-export const logSearch = (data: SearchLogT) => {
-  logAmplitudeEvent(AmplitudeEvents.søk, {
-    ...data,
-  });
-};
-
-const logPageView = (s: string, data: any = {}, firstLoad?: boolean) => {
-  logAmplitudeEvent(AmplitudeEvents.sidevisning, {
-    side: s,
-    firstLoad: !!firstLoad,
-    ...data,
-  });
-};
-
-export const logNav = (kilde: string, fra: string, til: string) => {
-  logAmplitudeEvent(AmplitudeEvents.navigasjon, {
-    kilde,
-    fra,
-    til,
-  });
-};
-
-const isPreview = () => !!document.getElementById("exit-preview-id");
-const isProdUrl = () => window.location.host === "aksel.nav.no";
-
-const isDevelopment = process.env.NODE_ENV === "development";
-const isTest = publicRuntimeConfig?.NEXT_PUBLIC_TEST !== undefined;
-
-const isProduction = () => {
-  return !(isDevelopment || isTest || isPreview()) && isProdUrl();
-};
-
-export function logAmplitudeEvent(eventName: string, data?: any): Promise<any> {
-  return new Promise(function (resolve: any) {
-    const eventData = data ? { ...data } : {};
-    if (isProduction()) {
-      track(eventName, eventData, resolve);
-    }
-  });
-}
-
-export const usePageView = (router: Router, pageProps: any) => {
-  const logView = useCallback(
-    (e, first = false) => {
-      const data = {};
-      try {
-        if (pageProps?.page && pageProps.page?._type === "aksel_artikkel") {
-          const tema = pageProps.page.tema.map((x) => x?.slug?.current) ?? null;
-          if (tema && tema.length > 0) {
-            data["tema"] = tema;
-          }
-        }
-      } catch (error) {
-        isDevelopment && console.error(error);
-      }
-      /* first-prop might be an object */
-      logPageView(
-        e,
-        {
-          ...data,
-          ...(pageProps?.title && pageProps?.title.length > 0
-            ? { sidetittel: pageProps.title }
-            : {}),
-        },
-        first === true
-      );
-    },
-    [pageProps]
-  );
-
-  const logScroll = useCallback((highestPercent: number) => {
-    highestPercent > 100 && (highestPercent = 100);
-    if (
-      document === undefined ||
-      window?.location?.pathname?.startsWith?.("/eksempler")
-    ) {
-      return;
-    }
-
-    if (isNaN(highestPercent)) {
-      return;
-    }
-
-    logAmplitudeEvent(AmplitudeEvents.scroll, {
-      side: window.location.pathname,
-      prosent: highestPercent,
-    });
-  }, []);
-
-  useEffect(() => {
-    let highestPercent = 0;
-    let timeoutId = null;
-    const footer = document.querySelector("#aksel-footer") as HTMLElement;
-
-    //get highest scroll percent
-    function scrollListener() {
-      timeoutId = setTimeout(() => {
-        const currentPercent = Math.round(
-          (window.scrollY /
-            (document.body.scrollHeight -
-              window.innerHeight -
-              (footer ? footer.offsetHeight : 0))) *
-            100
-        );
-        if (currentPercent > highestPercent) {
-          highestPercent = currentPercent;
-          clearTimeout(timeoutId);
-        }
-      }, 500);
-    }
-
-    window.addEventListener("scroll", scrollListener);
-
-    router.events.on("routeChangeComplete", logView);
-    router.events.on("routeChangeStart", logScroll);
-    window.onload = () => logView(window.location.pathname, true);
-
-    return () => {
-      router.events.off("routeChangeComplete", logView);
-      router.events.off("routeChangeStart", logScroll);
-      window.removeEventListener("scroll", scrollListener);
-    };
-  }, [router.events, logView, logScroll]);
-};
@@ -1,10 +1,9 @@
 import { AkselBloggDocT, ResolveContributorsT, ResolveSlugT } from "@/types";

-export * from "./util";
-export * from "./amplitude";
-export * from "./hooks";
 export * from "./contexts";
 export * from "./date-string";
+export * from "./hooks";
+export * from "./util";

 export const isNew = (date: string) => {
  const date1 = new Date(date);
@@ -0,0 +1,14 @@
+import { AmplitudeEvents } from "./events";
+import { amplitude } from "./useAmplitude";
+
+/**
+ * Preset for logging navigation-events
+ * @param src Component/Elements to keep track of
+ * @param to Destination URL
+ */
+export const amplitudeLogNavigation = (src: string, to: string) =>
+  amplitude.track(AmplitudeEvents.navigasjon, {
+    src,
+    to,
+    from: window.location.pathname,
+  });
@@ -0,0 +1,9 @@
+export enum AmplitudeEvents {
+  "navigasjon" = "navigasjon",
+  "notfound" = "notfound",
+  "error" = "error",
+  "ikonnedlastning" = "ikonnedlastning",
+  "feedbackinteraksjon" = "feedbackinteraksjon",
+  "søk" = "søk",
+  "link" = "link",
+}
@@ -0,0 +1,3 @@
+export { amplitudeLogNavigation } from "./event-tracking";
+export { AmplitudeEvents } from "./events";
+export { amplitude } from "./useAmplitude";
@@ -0,0 +1,95 @@
+import type { Types } from "@amplitude/analytics-browser";
+
+import { useEffect } from "react";
+
+const batchedEvents = [];
+
+export let amplitude: Partial<Pick<Types.BrowserClient, "init" | "track">> = {
+  track: (...eventsData) => {
+    batchedEvents.push(eventsData);
+    return {
+      promise: new Promise<Types.Result>((resolve) =>
+        resolve({
+          event: { event_type: "MockEvent" },
+          code: 200,
+          message: "Success: pre-batched amplitude-tracking",
+        })
+      ),
+    };
+  },
+};
+
+const AMPLITUDE_PUBLIC_API_KEY = "1a9a84a5e557ac9635a250bc27d75030";
+
+/**
+ * https://www.docs.developers.amplitude.com/data/sdks/browser-2/#tracking-default-events
+ * https://javascript.plainenglish.io/how-to-implement-amplitude-in-next-js-a-3-step-guide-6803c44ca862
+ */
+const useAmplitudeInit = () => {
+  useEffect(() => {
+    const isProdUrl = () => window.location.host === "aksel.nav.no";
+    const isExample = () => window.location.pathname.includes("eksempler/");
+    const isPreview = () => !!document.getElementById("exit-preview-id");
+
+    const initAmplitude = async () => {
+      if (isExample()) {
+        return;
+      } else if (!isProdUrl()) {
+        mockAmplitude();
+        return;
+      }
+
+      amplitude = await import("@amplitude/analytics-browser");
+      amplitude
+        .init(AMPLITUDE_PUBLIC_API_KEY, undefined, {
+          useBatch: true,
+          serverUrl: "https://amplitude.nav.no/collect",
+          defaultTracking: {
+            pageViews: {
+              trackHistoryChanges: "pathOnly",
+              trackOn: () => {
+                return !isPreview();
+              },
+            },
+          },
+        })
+        .promise.then(() =>
+          batchedEvents
+            .splice(0, batchedEvents.length)
+            .forEach(([event, eventData]) => amplitude.track(event, eventData))
+        )
+        .catch(async () => {
+          const { logger } = await import("logger");
+          logger.error("Failed logging batched events");
+        });
+    };
+    initAmplitude();
+  }, []);
+};
+
+/**
+ * Allows logging events to console in dev
+ */
+function mockAmplitude() {
+  amplitude = {
+    track: (
+      eventInput: Types.BaseEvent | string,
+      eventProperties?: Record<string, any>
+    ) => {
+      console.group("Mocked amplitude-event");
+      console.table({ eventInput, ...eventProperties });
+      console.groupEnd();
+      return {
+        promise: new Promise<Types.Result>((resolve) =>
+          resolve({
+            event: { event_type: "MockEvent" },
+            code: 200,
+            message: "Success: mocked amplitude-tracking",
+          })
+        ),
+      };
+    },
+  };
+}
+
+export default useAmplitudeInit;
@@ -1,19 +1,5 @@
 import { useEffect } from "react";

-const environment = process.env.NODE_ENV;
-
-export const isProduction = (): boolean => {
-  if (typeof window !== "undefined") {
-    const url =
-      window && window.location && window.location.href
-        ? window.location.href
-        : "";
-    return environment === "production" && /aksel.nav.no/.test(url);
-  } else {
-    return false;
-  }
-};
-
 // https://stackoverflow.com/questions/38588346/anchor-a-tags-not-working-in-chrome-when-using/38588927#38588927
 // https://github.com/vercel/next.js/discussions/13134
 export function useScrollToHashOnPageLoad(): void {
@@ -11,10 +11,10 @@
    "start": "cd .next/standalone/aksel.nav.no/website && PORT=3000 HOSTNAME=0.0.0.0 node server.js",
    "cp:assets": "cross-env cp -R public .next/standalone/aksel.nav.no/website/ && cross-env cp -R .next/static .next/standalone/aksel.nav.no/website/.next/static",
    "update:searchindex": "ts-node --project tsconfig.json ./scripts/create-index",
-    "e2e": "yarn build && NEXT_PUBLIC_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
-    "e2e:full": "yarn build && ts-node ./e2e/genUrls.ts && NEXT_PUBLIC_TEST=true FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
-    "e2e:ci": "NEXT_PUBLIC_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
-    "e2e:ci-full": "ts-node ./e2e/genUrls.ts && NEXT_PUBLIC_TEST=true FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
+    "e2e": "yarn build && yarn start-server-and-test start http://localhost:3000 playwright",
+    "e2e:full": "yarn build && ts-node ./e2e/genUrls.ts && FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
+    "e2e:ci": " yarn start-server-and-test start http://localhost:3000 playwright",
+    "e2e:ci-full": "ts-node ./e2e/genUrls.ts && FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
    "update:props": "ts-node --project tsconfig.tsnode.json ./scripts/update-props",
    "update:tokens": "ts-node --project tsconfig.tsnode.json ./scripts/update-tokens",
    "update:eksempler": "ts-node --project tsconfig.tsnode.json ./scripts/examples/update-sanity",
@@ -1,12 +1,12 @@
-import React, { useEffect } from "react";
-import { AmplitudeEvents, logAmplitudeEvent } from "@/components";
+import { AmplitudeEvents, amplitude } from "@/logging";
 import { BodyLong, Heading, Link } from "@navikt/ds-react";
-import NextLink from "next/link";
 import { AkselCubeStatic } from "components/website-modules/cube";
+import NextLink from "next/link";
+import { useEffect } from "react";

 function Page() {
  useEffect(() => {
-    logAmplitudeEvent(AmplitudeEvents.notfound, {
+    amplitude.track(AmplitudeEvents.notfound, {
      side: window.location.pathname,
    });
  }, []);
@@ -1,11 +1,11 @@
-import { AmplitudeEvents, logAmplitudeEvent } from "@/components";
+import { AmplitudeEvents, amplitude } from "@/logging";
 import { BodyLong, Heading } from "@navikt/ds-react";
 import { AkselCubeStatic } from "components/website-modules/cube";
 import { useEffect } from "react";

 function Page() {
  useEffect(() => {
-    logAmplitudeEvent(AmplitudeEvents.error, {
+    amplitude.track(AmplitudeEvents.error, {
      side: window.location.pathname,
    });
  }, []);
@@ -1,8 +1,5 @@
 import { BaseSEO } from "components/website-modules/seo/BaseSEO";
-import {
-  initAmplitude,
-  usePageView,
-} from "components/website-modules/utils/amplitude";
+import useAmplitudeInit from "components/website-modules/utils/logging/useAmplitude";
 import { useScrollToHashOnPageLoad } from "components/website-modules/utils/util";
 import { AppProps } from "next/app";
 import { useEffect } from "react";
@@ -10,11 +7,9 @@ import { hotjar } from "react-hotjar";
 import { IdContext } from "../components/website-modules/utils/contexts/id-context";
 import "../styles/index.css";

-initAmplitude();
-
 function App({ Component, pageProps, router }: AppProps) {
  useScrollToHashOnPageLoad();
-  usePageView(router, pageProps);
+  useAmplitudeInit();

  useEffect(() => {
    window.location.host === "design.nav.no" &&
@@ -1,7 +1,7 @@
 // This is imported to allow the Output File Tracing feature of Next.js to work correctly with the log patcher
 import "next-logger";

-import { Html, Head, Main, NextScript } from "next/document";
+import { Head, Html, Main, NextScript } from "next/document";

 export default function Document() {
  return (
@@ -15,12 +15,6 @@ export default function Document() {
          type="font/woff2"
          crossOrigin="anonymous"
        />
-        <link
-          rel="preload"
-          href="/searchindex.json"
-          as="fetch"
-          crossOrigin="anonymous"
-        />
      </Head>
      <body data-theme="light" className="aksel antialiased">
        <Main />
@@ -23,5 +23,5 @@ export const Demo = {
 };

 export const args = {
-  index: 1,
+  index: 3,
 };
@@ -26,5 +26,5 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 1,
 };
@@ -0,0 +1,22 @@
+import { Link } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+import NextLink from "next/link";
+
+const Example = () => {
+  return (
+    <Link href="#" as={NextLink}>
+      Lenke til ny side
+    </Link>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 5,
+};
@@ -21,5 +21,5 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 4,
 };
@@ -25,5 +25,5 @@ export const Demo = {
 };

 export const args = {
-  index: 0,
+  index: 2,
 };
@@ -0,0 +1,22 @@
+import { LinkPanel } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+import NextLink from "next/link";
+
+const Example = () => {
+  return (
+    <LinkPanel href="#" border as={NextLink}>
+      <LinkPanel.Title>Arbeidssøker eller permittert</LinkPanel.Title>
+    </LinkPanel>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 3,
+};
@@ -26,7 +26,7 @@ type PageProps = NextPageT<{

 export const query = `{${sidebarQuery}, ${landingPageQuery(
  "grunnleggende"
-)}, "links": *[_type == "ds_artikkel" && defined(kategori)]{_id,heading,"slug": slug,status,kategori}}`;
+)}, "links": *[_type == "ds_artikkel" && defined(kategori)]{_id,heading,"slug": slug,status,kategori,"sidebarindex": sidebarindex}}`;

 export const getStaticProps: GetStaticProps = async ({
  preview = false,
@@ -3,9 +3,9 @@ import {
  dateStr,
  FigmaIcon,
  GithubIcon,
-  logAmplitudeEvent,
  YarnIcon,
 } from "@/components";
+import { amplitude, AmplitudeEvents } from "@/logging";
 import { SanityBlockContent } from "@/sanity-block";
 import { getClient } from "@/sanity/client.server";
 import { getDocumentsTmp } from "@/sanity/interface";
@@ -27,9 +27,9 @@ import IntroSeksjon from "components/sanity-modules/IntroSeksjon";
 import { SEO } from "components/website-modules/seo/SEO";
 import { StatusTag } from "components/website-modules/StatusTag";
 import { SuggestionBlock } from "components/website-modules/suggestionblock";
+import { GetStaticPaths, GetStaticProps } from "next/types";
 import { lazy, Suspense } from "react";
 import NotFotfund from "../404";
-import { GetStaticPaths, GetStaticProps } from "next/types";

 const kodepakker = {
  "ds-react": {
@@ -186,7 +186,7 @@ const Page = ({
            href={pack.git}
            className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
            onClick={() =>
-              logAmplitudeEvent("link", {
+              amplitude.track(AmplitudeEvents.link, {
                kilde: "intro-lenker komponenter",
                til: "github",
              })
@@ -200,7 +200,7 @@ const Page = ({
            href={`https://yarnpkg.com/package/${pack.title}`}
            className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
            onClick={() =>
-              logAmplitudeEvent("link", {
+              amplitude.track(AmplitudeEvents.link, {
                kilde: "intro-lenker komponenter",
                til: "yarn",
              })
@@ -219,7 +219,7 @@ const Page = ({
          href={page.figma_link}
          className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
          onClick={() =>
-            logAmplitudeEvent("link", {
+            amplitude.track(AmplitudeEvents.link, {
              kilde: "intro-lenker komponenter",
              til: "figma",
            })
@@ -236,7 +236,7 @@ const Page = ({
            href={pack.changelog}
            className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
            onClick={() =>
-              logAmplitudeEvent("link", {
+              amplitude.track(AmplitudeEvents.link, {
                kilde: "intro-lenker komponenter",
                til: "endringslogg",
              })
@@ -303,7 +303,7 @@ const Page = ({
          />
        )}
        <IntroSeksjon node={page?.intro} internal={internal} />
-        {page?.status?.tag === "ready" && (
+        {page?.status?.tag === "ready" && !page?.hide_feedback && (
          <SuggestionBlock
            variant="komponent"
            reference={`<${page?.heading} />`}
@@ -1,3 +1,4 @@
+import { AmplitudeEvents, amplitude } from "@/logging";
 import { SanityBlockContent } from "@/sanity-block";
 import { getClient } from "@/sanity/client.server";
 import { landingPageQuery, sidebarQuery } from "@/sanity/queries";
@@ -7,7 +8,6 @@ import {
  ArticleListT,
  NextPageT,
 } from "@/types";
-import { logAmplitudeEvent } from "@/utils";
 import { CodeIcon } from "@navikt/aksel-icons";
 import { BodyShort, Heading, Ingress } from "@navikt/ds-react";
 import cl from "clsx";
@@ -36,7 +36,7 @@ type PageProps = NextPageT<{

 export const query = `{${sidebarQuery}, ${landingPageQuery(
  "komponenter"
-)}, "links": *[_type == "komponent_artikkel" && defined(kategori)]{_id,heading,"slug": slug,status,kategori}}`;
+)}, "links": *[_type == "komponent_artikkel" && defined(kategori)]{_id,heading,"slug": slug,status,kategori, "sidebarindex": sidebarindex}}`;

 export const getStaticProps: GetStaticProps = async ({
  preview = false,
@@ -158,7 +158,7 @@ function Links() {
        href="https://github.com/navikt/aksel/tree/main/%40navikt"
        className="hover:text-text-on-inverted focus:text-text-default focus:bg-border-focus-on-inverted flex items-center gap-1 underline hover:no-underline focus:no-underline focus:shadow-[0_0_0_2px_var(--a-border-focus-on-inverted)] focus:outline-none"
        onClick={() =>
-          logAmplitudeEvent("link", {
+          amplitude.track(AmplitudeEvents.link, {
            kilde: "intro-lenker ikonside",
            til: "github",
          })
@@ -172,7 +172,7 @@ function Links() {
        href="https://yarnpkg.com/package/@navikt/ds-react"
        className="hover:text-text-on-inverted focus:text-text-default focus:bg-border-focus-on-inverted flex items-center gap-1 underline hover:no-underline focus:no-underline focus:shadow-[0_0_0_2px_var(--a-border-focus-on-inverted)] focus:outline-none"
        onClick={() =>
-          logAmplitudeEvent("link", {
+          amplitude.track(AmplitudeEvents.link, {
            kilde: "intro-lenker ikonside",
            til: "yarn",
          })
@@ -187,7 +187,7 @@ function Links() {
        href="/grunnleggende/kode/endringslogg"
        className="hover:text-text-on-inverted focus:text-text-default focus:bg-border-focus-on-inverted flex items-center gap-1 underline hover:no-underline focus:no-underline focus:shadow-[0_0_0_2px_var(--a-border-focus-on-inverted)] focus:outline-none"
        onClick={() =>
-          logAmplitudeEvent("link", {
+          amplitude.track(AmplitudeEvents.link, {
            kilde: "intro-lenker komponenter",
            til: "endringslogg",
          })
@@ -203,7 +203,7 @@ function Links() {
        href="https://www.figma.com/@nav_aksel"
        className="hover:text-text-on-inverted focus:text-text-default focus:bg-border-focus-on-inverted flex items-center gap-1 underline hover:no-underline focus:no-underline focus:shadow-[0_0_0_2px_var(--a-border-focus-on-inverted)] focus:outline-none"
        onClick={() =>
-          logAmplitudeEvent("link", {
+          amplitude.track(AmplitudeEvents.link, {
            kilde: "intro-lenker ikonside",
            til: "figma",
          })
@@ -217,7 +217,7 @@ function Links() {
        href="/storybook"
        className="hover:text-text-on-inverted focus:text-text-default focus:bg-border-focus-on-inverted group flex items-center gap-1 underline hover:no-underline focus:no-underline focus:shadow-[0_0_0_2px_var(--a-border-focus-on-inverted)] focus:outline-none"
        onClick={() =>
-          logAmplitudeEvent("link", {
+          amplitude.track(AmplitudeEvents.link, {
            kilde: "intro-lenker ikonside",
            til: "storybook",
          })
@@ -1,10 +1,11 @@
 import { defineField, defineType } from "sanity";
 import { komponentKategorier } from "../../../config";
+import { devsOnly } from "../../../util";
 import { artikkelPreview } from "../presets/artikkel-preview";
-import { oppdateringsvarsel } from "../presets/oppdateringsvarsel";
 import { editorField } from "../presets/editors";
 import { groups } from "../presets/groups";
 import { hiddenFields } from "../presets/hidden-fields";
+import { oppdateringsvarsel } from "../presets/oppdateringsvarsel";
 import { SEOFields } from "../presets/seo";
 import { kategoriSlug } from "../presets/slug";
 import { titleField } from "../presets/title-field";
@@ -92,6 +93,14 @@ export const KomponentArtikkel = defineType({
      type: "number",
      group: "settings",
    }),
+    defineField({
+      title: "Ikke vis 'Send innspill'-modul på siden",
+      name: "hide_feedback",
+      type: "boolean",
+      initialValue: false,
+      group: "settings",
+      hidden: devsOnly,
+    }),
    defineField({
      name: "intro",
      type: "intro_komponent",
@@ -1,3 +1,8 @@
+export const devsOnly = ({ currentUser }) =>
+  !currentUser.roles.find(({ name }) =>
+    ["developer", "administrator"].includes(name)
+  );
+
 export const getTemplates = (restTemplates: any[] = []) => {
  const templates = {
    profil: [
@@ -29,7 +29,8 @@
      "@/sanity/config": ["sanity/config.ts"],
      "@/sanity/client.server": ["sanity/interface/client.server.js"],
      "@/sanity/interface": ["sanity/interface/interface.ts"],
-      "@/sanity/queries": ["sanity/interface/queries.js"]
+      "@/sanity/queries": ["sanity/interface/queries.js"],
+      "@/logging": ["components/website-modules/utils/logging/index.ts"]
    }
  },
  "ts-node": {
@@ -15,7 +15,8 @@
      "@/sanity/config": ["sanity/config.ts"],
      "@/sanity/client.server": ["sanity/interface/client.server.js"],
      "@/sanity/interface": ["sanity/interface/interface.ts"],
-      "@/sanity/queries": ["sanity/interface/queries.js"]
+      "@/sanity/queries": ["sanity/interface/queries.js"],
+      "@/logging": ["components/website-modules/utils/logging/index.ts"]
    }
  }
 }
@@ -109,6 +109,7 @@ export interface AkselKomponentDocT
    brukes_til: string[];
    brukes_ikke_til?: string[];
  };
+  hide_feedback?: boolean;
  content: any[];
  kodepakker?: string[];
  figma_link?: string;
@@ -155,6 +156,7 @@ export type ArticleListT = Array<{
    unsafe?: boolean;
    bilde?: any;
  };
+  sidebarindex?: number;
 }>;

 export type LandingPageTypeT<T extends string> = `${T}_landingsside`;
@@ -3415,7 +3415,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@navikt/aksel-icons@^5.7.3, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^5.7.5, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
  dependencies:
@@ -3442,8 +3442,8 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
  dependencies:
-    "@navikt/ds-css": ^5.7.3
-    "@navikt/ds-tokens": ^5.7.3
+    "@navikt/ds-css": ^5.7.5
+    "@navikt/ds-tokens": ^5.7.5
    "@types/jest": ^29.0.0
    concurrently: 7.2.1
    copyfiles: 2.4.1
@@ -3461,7 +3461,7 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@navikt/aksel@workspace:@navikt/aksel"
  dependencies:
-    "@navikt/ds-css": 5.7.3
+    "@navikt/ds-css": 5.7.5
    "@types/inquirer": ^9.0.3
    "@types/jest": ^29.0.0
    axios: 1.3.6
@@ -3485,11 +3485,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-css@*, @navikt/ds-css@5.7.3, @navikt/ds-css@^5.7.3, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@5.7.5, @navikt/ds-css@^5.7.5, @navikt/ds-css@workspace:@navikt/core/css":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-css@workspace:@navikt/core/css"
  dependencies:
-    "@navikt/ds-tokens": ^5.7.3
+    "@navikt/ds-tokens": ^5.7.5
    cssnano: 6.0.0
    fast-glob: 3.2.11
    lodash: 4.17.21
@@ -3502,13 +3502,13 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-react@*, @navikt/ds-react@^5.7.3, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@^5.7.5, @navikt/ds-react@workspace:@navikt/core/react":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-react@workspace:@navikt/core/react"
  dependencies:
    "@floating-ui/react": 0.25.4
-    "@navikt/aksel-icons": ^5.7.3
-    "@navikt/ds-tokens": ^5.7.3
+    "@navikt/aksel-icons": ^5.7.5
+    "@navikt/ds-tokens": ^5.7.5
    "@radix-ui/react-tabs": 1.0.0
    "@radix-ui/react-toggle-group": 1.0.0
    "@testing-library/dom": 8.13.0
@@ -3542,11 +3542,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tailwind@^5.7.3, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^5.7.5, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
  dependencies:
-    "@navikt/ds-tokens": ^5.7.3
+    "@navikt/ds-tokens": ^5.7.5
    "@types/jest": ^29.0.0
    color: 4.2.3
    jest: ^29.0.0
@@ -3557,7 +3557,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tokens@^5.7.3, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^5.7.5, @navikt/ds-tokens@workspace:@navikt/core/tokens":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
  dependencies:
@@ -8410,11 +8410,11 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "aksel.nav.no@workspace:aksel.nav.no"
  dependencies:
-    "@navikt/aksel-icons": ^5.7.3
-    "@navikt/ds-css": ^5.7.3
-    "@navikt/ds-react": ^5.7.3
-    "@navikt/ds-tailwind": ^5.7.3
-    "@navikt/ds-tokens": ^5.7.3
+    "@navikt/aksel-icons": ^5.7.5
+    "@navikt/ds-css": ^5.7.5
+    "@navikt/ds-react": ^5.7.5
+    "@navikt/ds-tailwind": ^5.7.5
+    "@navikt/ds-tokens": ^5.7.5
    prettier-plugin-tailwindcss: ^0.2.3
  languageName: unknown
  linkType: soft
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	0ddb589138	Version Packages (#2408 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-20 17:18:00 +02:00
Ken	1440c99b96	[aksel.nav.no] 📝 Story for Table i aksel (#2406 ) * 📝 Story for Table i aksel * ♻️ Trukket args ut	2023-10-20 17:02:34 +02:00
Ken	f8cf39c906	[aksel.nav.no] Lagt til muligheten til å ikke ha "Send innspill" modul på komponent-artikler (#2407 ) * 🎨 Oversikt blir nå sortert basert på index * 🎨 Kan nå skjule send innspill modul	2023-10-20 16:30:50 +02:00
Ken	158c032436	[aksel.nav.no] Refactor av amplitude-logging (#2396 ) * ♻️ Refaktorert logging * ♻️ Refaktorert logging * 🔥 No need to lazyload hotjar * 🐛 Sjekker nå produrl riktig * ♻️ Bedre import/export av logging * ✨ Batching evets logged pre-init * ♻️ Cleanup av amplitude bruk	2023-10-20 16:05:38 +02:00
Halvor Haugan	6d6e6443dd	💄 Chips.Toggle: Ikon i uvalgt tilstand (#2395 )	2023-10-20 15:54:05 +02:00
Ken	e12ea8694e	✨ Monthpicker eksempel og bug (#2404 )	2023-10-20 12:44:28 +02:00
github-actions[bot]andgithub-actions[bot]	2d4cb67643	Version Packages (#2403 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-10-20 10:52:13 +02:00
Ken	f5533766c8	📝 Oppdatert link og linkpanel med nextjs eksempler	2023-10-20 10:28:24 +02:00
Ken	3d1b0ac204	🎨 Forms-border har nå outside shadow for background-bleed (#2388 )	2023-10-20 09:21:42 +02:00
Ken	a1678d3b19	🐛 Loader hadde legacyRef som ref-prop (#2391 ) * 🐛 Loader hadde legacyRef som ref-prop * Update .changeset/heavy-shoes-pay.md	2023-10-20 09:17:39 +02:00