Version Packages (#1809)

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

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css
 
+## 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;
@@ -52,7 +52,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "2.1.7",
+  "version": "2.2.0",
   "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.2.0",
     "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",
@@ -221,14 +241,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 +279,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 +295,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"
   },

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @navikt/ds-react
 
+## 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.2.0",
   "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.2.0",
     "@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/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/tailwind/CHANGELOG.md

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

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-tokens
 
+## 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.2.0",
   "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,7 @@
 # @navikt/ds-icons
 
+## 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.2.0",
   "description": "Aksel icons for NAV",
   "author": "Aksel | NAV designsystem team",
   "repository": {

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-css-internal
 
+## 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.2.0",
   "description": "CSS for NAV internal Designsystem-components",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-react-internal
 
+## 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.2.0",
   "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.2.0",
+    "@navikt/ds-react": "^2.2.0",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1"
   },

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

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

@@ -102,7 +102,7 @@ const Footer = () => {
             Redaktør: Eidar Grande Vollan
           </BodyShort> */}
           <div className="hidden self-end xl:block">
-            <p>&copy; 2022 NAV</p>
+            <p>&copy; {new Date().getFullYear()} 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

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

@@ -196,10 +196,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/sanity-modules/icon-search/ModalContent.tsx

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

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/suggestionblock/index.tsx

@@ -55,7 +55,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",
@@ -114,7 +114,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/next.config.js

@@ -72,6 +72,12 @@ const config = () =>
           },
         ];
       },
+      rewrites: async () => [
+        {
+          source: "/sitemap.xml",
+          destination: "/api/sitemap",
+        },
+      ],
       async redirects() {
         return [
           {
@@ -83,7 +89,7 @@ const config = () =>
             source: "/storybook",
             destination:
               "https://main--5f801fb2aea7820022de2936.chromatic.com/",
-            permanent: true,
+            permanent: false,
           },
           {
             source: "/prinsipper",

aksel.nav.no/website/package.json

@@ -20,7 +20,8 @@
     "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",

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,
 };

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

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

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

@@ -15,6 +15,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/bodylong/small.tsx

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

aksel.nav.no/website/pages/eksempler/bodylong/spacing.tsx

@@ -20,6 +20,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/bodyshort/default.tsx

@@ -7,6 +7,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/bodyshort/small.tsx

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

aksel.nav.no/website/pages/eksempler/bodyshort/spacing.tsx

@@ -12,6 +12,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/button/danger.tsx

@@ -7,6 +7,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/button/disabled.tsx

@@ -7,6 +7,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/button/icon-right.tsx

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

aksel.nav.no/website/pages/eksempler/button/icon.tsx

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

aksel.nav.no/website/pages/eksempler/button/loading.tsx

@@ -7,6 +7,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/button/nextjs-link.tsx

@@ -12,6 +12,11 @@ const Example = () => {
 
 export default withDsExample(Example);
 
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
 export const args = {
   index: 10,
   desc: "OverridableComponent lar deg endre hvilken html-tag komponenten rendres med.",

aksel.nav.no/website/pages/eksempler/button/primary.tsx

@@ -2,11 +2,22 @@ import { Button } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 
 const Example = () => {
-  return <Button>Primary</Button>;
+  return (
+    <div className="flex gap-2">
+      <Button>Primary</Button>
+      <Button variant="primary-neutral">Primary</Button>
+    </div>
+  );
 };
 
 export default withDsExample(Example);
 
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
 export const args = {
   index: 0,
+  desc: "Brukes som primærhandling i løsningen. Som regel ønsker man å ha kun én primærknapp per side.",
 };

aksel.nav.no/website/pages/eksempler/button/secondary.tsx

@@ -2,11 +2,22 @@ import { Button } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 
 const Example = () => {
-  return <Button variant="secondary">Secondary</Button>;
+  return (
+    <div className="flex gap-2">
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="secondary-neutral">Secondary</Button>
+    </div>
+  );
 };
 
 export default withDsExample(Example);
 
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
 export const args = {
   index: 1,
+  desc: "De fleste knapper i løsninger vil bruke denne varianten.",
 };

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

@@ -7,6 +7,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/button/tertiary.tsx

@@ -2,11 +2,21 @@ import { Button } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 
 const Example = () => {
-  return <Button variant="tertiary">Tertiary</Button>;
+  return (
+    <div className="flex gap-2">
+      <Button variant="tertiary">Tertiary</Button>
+      <Button variant="tertiary-neutral">Tertiary</Button>
+    </div>
+  );
 };
 
 export default withDsExample(Example);
 
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
 export const args = {
   index: 2,
 };

aksel.nav.no/website/pages/eksempler/button/xsmall.tsx

@@ -7,6 +7,11 @@ const Example = () => {
 
 export default withDsExample(Example);
 
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
 export const args = {
   index: 5,
   desc: "Varianten xsmall er tilgjengelig for bruk i tabell eller interne løsninger. Bør brukes sparsomt om mulig da klikkflaten kan være problematisk, spesielt på mobil.",

aksel.nav.no/website/pages/eksempler/chat/avatar.tsx

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

aksel.nav.no/website/pages/eksempler/chat/colors.tsx

@@ -33,6 +33,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/chat/default.tsx

@@ -25,6 +25,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/chat/toptextPosition.tsx

@@ -26,6 +26,11 @@ const Example = () => {
 
 export default withDsExample(Example);
 
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
 export const args = {
   index: 3,
   desc: "Noen ganger ønsker man mer fleksibilitet for plassering av navn + tid i chatboblen.",

aksel.nav.no/website/pages/eksempler/checkbox/controlled.tsx

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

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

@@ -18,6 +18,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/checkbox/description.tsx

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

aksel.nav.no/website/pages/eksempler/checkbox/disabled.tsx

@@ -19,6 +19,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/checkbox/group-error.tsx

@@ -19,6 +19,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/checkbox/hide-labels.tsx

@@ -24,6 +24,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/checkbox/hide-legend.tsx

@@ -19,6 +19,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/checkbox/indeterminate.tsx

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

aksel.nav.no/website/pages/eksempler/checkbox/single-error.tsx

@@ -20,6 +20,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/checkbox/small.tsx

@@ -19,6 +19,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/chips/default.tsx

@@ -47,6 +47,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/chips/removable.tsx

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

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

@@ -47,6 +47,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/chips/toggle.tsx

@@ -30,6 +30,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/confirmationpanel/default.tsx

@@ -18,6 +18,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/confirmationpanel/error.tsx

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