Lerna versionbump [ci skip]

- @navikt/ds-css@0.18.27
 - @navikt/ds-react@0.19.21
 - @navikt/ds-react-internal@0.14.22

.storybook/deprecated.stories.mdx

@@ -9,4 +9,4 @@ På sikt vil komponentene under bli flyttet ut av ds-react eller erstattes av an
 - PageHeader -> @navikt/ds-react-navno
 - MicroCard -> @navikt/ds-react-navno
 
-- StepIndicator -> Horisontal `<Stepper />`
+- StepIndicator -> Horizontal `<Stepper />`

.storybook/main.js

@@ -19,6 +19,8 @@ module.exports = {
   addons: [
     "@storybook/addon-docs",
     "@storybook/addon-a11y",
+    "@whitespace/storybook-addon-html",
+    "storybook-addon-css-user-preferences",
     {
       name: "@storybook/addon-storysource",
       options: {

@navikt/codemod/.gitignore

@@ -0,0 +1,6 @@
+*.d.ts
+*.js
+bin/*.js
+*.js.map
+!transforms/**/__testfixtures__/**/*.js
+!jest.config.js

@navikt/codemod/bin/cli.ts

@@ -0,0 +1,191 @@
+/**
+ * Copyright 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+// Based on https://github.com/reactjs/react-codemod/blob/dd8671c9a470a2c342b221ec903c574cf31e9f57/bin/cli.js
+// @next/codemod optional-name-of-transform optional/path/to/src [...options]
+
+import globby from "globby";
+import inquirer from "inquirer";
+import meow from "meow";
+import path from "path";
+import execa from "execa";
+import chalk from "chalk";
+import isGitClean from "is-git-clean";
+
+export const jscodeshiftExecutable = require.resolve(".bin/jscodeshift");
+export const transformerDirectory = path.join(__dirname, "../", "transforms");
+
+export function checkGitStatus(force) {
+  let clean = false;
+  let errorMessage = "Unable to determine if git directory is clean";
+  try {
+    clean = isGitClean.sync(process.cwd());
+    errorMessage = "Git directory is not clean";
+  } catch (err) {
+    if (err && err.stderr && err.stderr.indexOf("Not a git repository") >= 0) {
+      clean = true;
+    }
+  }
+
+  if (!clean) {
+    if (force) {
+      console.log(`WARNING: ${errorMessage}. Forcibly continuing.`);
+    } else {
+      console.log("Thank you for using @@navikt/ds-codemod");
+      console.log(
+        chalk.yellow(
+          "\nBut before we continue, please stash or commit your git changes."
+        )
+      );
+      console.log(
+        "\nYou may use the --force flag to override this safety check."
+      );
+      process.exit(1);
+    }
+  }
+}
+
+export function runTransform({ files, flags, transformer }) {
+  const transformerPath = path.join(transformerDirectory, `${transformer}.js`);
+
+  let args = [];
+
+  const { dry, print, runInBand } = flags;
+
+  if (dry) {
+    args.push("--dry");
+  }
+  if (print) {
+    args.push("--print");
+  }
+  if (runInBand) {
+    args.push("--run-in-band");
+  }
+
+  args.push("--verbose=2");
+
+  args.push("--ignore-pattern=**/node_modules/**");
+
+  args.push("--extensions=tsx,ts,jsx,js");
+  args.push("--parser=tsx");
+
+  args = args.concat(["--transform", transformerPath]);
+
+  if (flags.jscodeshift) {
+    args = args.concat(flags.jscodeshift);
+  }
+
+  args = args.concat(files);
+
+  console.log(`Executing command: jscodeshift ${args.join(" ")}`);
+
+  const result = execa.sync(jscodeshiftExecutable, args, {
+    stdio: "inherit",
+    stripFinalNewline: false,
+  });
+
+  if (result.failed) {
+    throw new Error(`jscodeshift exited with code ${result.exitCode}`);
+  }
+}
+
+const TRANSFORMER_INQUIRER_CHOICES = [
+  {
+    name: "v1.0.0/chat: Fixes breaking API-changes from <SpeechBubble /> (now <Chat/>) component",
+    value: "v1.0.0/chat",
+  },
+];
+
+function expandFilePathsIfNeeded(filesBeforeExpansion) {
+  const shouldExpandFiles = filesBeforeExpansion.some((file) =>
+    file.includes("*")
+  );
+  return shouldExpandFiles
+    ? globby.sync(filesBeforeExpansion)
+    : filesBeforeExpansion;
+}
+
+export function run() {
+  const cli = meow({
+    description: "Codemods for updating @navikt/ds-* packages",
+    help: `
+    Usage
+      $ npx @navikt/codemod <transform> <path> <...options>
+        transform    One of the choices from <link-here>
+        path         Files or directory to transform. Can be a glob like pages/**.js
+    Options
+      --force            Bypass Git safety checks and forcibly run codemods
+      --dry              Dry run (no changes are made to files)
+      --print            Print transformed files to your terminal
+      --jscodeshift  (Advanced) Pass options directly to jscodeshift
+    `,
+    flags: {
+      boolean: ["force", "dry", "print", "help"],
+      string: ["_"],
+      alias: {
+        h: "help",
+      },
+    },
+  } as meow.Options<meow.AnyFlags>);
+
+  if (!cli.flags.dry) {
+    checkGitStatus(cli.flags.force);
+  }
+
+  if (
+    cli.input[0] &&
+    !TRANSFORMER_INQUIRER_CHOICES.find((x) => x.value === cli.input[0])
+  ) {
+    console.error("Invalid transform choice, pick one of:");
+    console.error(
+      TRANSFORMER_INQUIRER_CHOICES.map((x) => "- " + x.value).join("\n")
+    );
+    process.exit(1);
+  }
+
+  inquirer
+    .prompt([
+      {
+        type: "input",
+        name: "files",
+        message: "On which files or directory should the codemods be applied?",
+        when: !cli.input[1],
+        default: ".",
+        // validate: () =>
+        filter: (files) => files.trim(),
+      },
+      {
+        type: "list",
+        name: "transformer",
+        message: "Which transform would you like to apply?",
+        when: !cli.input[0],
+        pageSize: TRANSFORMER_INQUIRER_CHOICES.length,
+        choices: TRANSFORMER_INQUIRER_CHOICES,
+      },
+    ])
+    .then((answers) => {
+      const { files, transformer } = answers;
+
+      const filesBeforeExpansion = cli.input[1] || files;
+      const filesExpanded = expandFilePathsIfNeeded([filesBeforeExpansion]);
+
+      const selectedTransformer = cli.input[0] || transformer;
+
+      if (!filesExpanded.length) {
+        console.log(
+          `No files found matching ${filesBeforeExpansion.join(" ")}`
+        );
+        return null;
+      }
+
+      return runTransform({
+        files: filesExpanded,
+        flags: cli.flags,
+        transformer: selectedTransformer,
+      });
+    });
+}

@navikt/codemod/bin/ds-codemod.ts

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+/**
+ * Copyright 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+// Based on https://github.com/reactjs/react-codemod/blob/dd8671c9a470a2c342b221ec903c574cf31e9f57/bin/react-codemod.js
+// next-codemod optional-name-of-transform optional/path/to/src [...options]
+
+require("./cli").run();

@navikt/codemod/jest.config.js

@@ -0,0 +1,8 @@
+const customJestConfig = {
+  testMatch: ["**/__tests__/**/*.js"],
+  verbose: true,
+  rootDir: "./transforms",
+};
+
+// createJestConfig is exported in this way to ensure that next/jest can load the Next.js config which is async
+module.exports = customJestConfig;

@navikt/codemod/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@navikt/ds-codemod",
+  "version": "1.0.2",
+  "private": true,
+  "description": "NAV designsystem codemods",
+  "author": "NAV Designsystem team",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "codemod",
+    "jscodeshift"
+  ],
+  "files": [
+    "transforms/*.js",
+    "bin/*.js",
+    "lib/**/*.js",
+    "lib/cra-to-next/gitignore"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "dev": "tsc --watch -p tsconfig.json",
+    "test": "jest",
+    "test:watch": "jest --watch"
+  },
+  "bin": "./bin/ds-codemod.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navikt/Designsystemet.git",
+    "directory": "@navikt/codemod"
+  },
+  "homepage": "https://github.com/navikt/Designsystemet/tree/master/@navikt/codemod",
+  "dependencies": {
+    "chalk": "4.1.0",
+    "cheerio": "1.0.0-rc.9",
+    "execa": "4.0.3",
+    "globby": "11.0.1",
+    "inquirer": "7.3.3",
+    "is-git-clean": "1.1.0",
+    "jest": "^27.5.0",
+    "jscodeshift": "0.13.1",
+    "jscodeshift-add-imports": "1.0.10",
+    "meow": "7.0.1"
+  },
+  "devDependencies": {
+    "@types/jscodeshift": "0.11.5",
+    "@types/react": "^18.0.0",
+    "typescript": "^4.7.2"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=12.0.0"
+  }
+}

@navikt/codemod/transforms/__testfixtures__/rename-prop/rename.input.js

@@ -0,0 +1,8 @@
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <SpeechBubble illustration={<Illustration />}>
+      <div />
+    </SpeechBubble>
+  );
+};

@navikt/codemod/transforms/__testfixtures__/rename-prop/rename.output.js

@@ -0,0 +1,8 @@
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <SpeechBubble avatar={<Illustration />}>
+      <div />
+    </SpeechBubble>
+  );
+};

@navikt/codemod/transforms/__tests__/rename-prop.ts

@@ -0,0 +1,24 @@
+export {};
+
+jest.autoMockOff();
+const defineTest = require("jscodeshift/dist/testUtils").defineTest;
+
+const tests = [
+  {
+    fixture: "rename",
+    options: {
+      component: "SpeechBubble",
+      from: "illustration",
+      to: "avatar",
+    },
+  },
+];
+
+for (const test of tests) {
+  defineTest(
+    __dirname,
+    "rename-prop",
+    test.options,
+    `rename-prop/${test.fixture}`
+  );
+}

@navikt/codemod/transforms/rename-prop.ts

@@ -0,0 +1,18 @@
+import renameProps from "./utils/rename-props";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const printOptions = options.printOptions;
+
+  return renameProps({
+    root,
+    componentName: options.component,
+    props: { [options.from]: options.to },
+  }).toSource(printOptions);
+}

@navikt/codemod/transforms/utils/rename-props.ts

@@ -0,0 +1,12 @@
+export default function renameProps({ root, componentName, props }) {
+  return root.findJSXElements(componentName).forEach((path) => {
+    path.node.openingElement.attributes.forEach((node) => {
+      if (
+        node.type === "JSXAttribute" &&
+        Object.keys(props).includes(node.name.name)
+      ) {
+        node.name.name = props[node.name.name];
+      }
+    });
+  });
+}

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/complete.input.js

@@ -0,0 +1,25 @@
+import { SpeechBubble, Button } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <SpeechBubble
+      illustration={<Illustration />}
+      topText="Ola Normann 01.01.21 14:00"
+      backgroundColor="red"
+      illustrationBgColor="blue"
+    >
+      <SpeechBubble.Bubble>
+        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+      </SpeechBubble.Bubble>
+      <SpeechBubble.Bubble>
+        Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+        do.
+      </SpeechBubble.Bubble>
+      <SpeechBubble.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </SpeechBubble.Bubble>
+    </SpeechBubble>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/complete.output.js

@@ -0,0 +1,25 @@
+import { Chat, Button } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <Chat
+      avatar={<Illustration />}
+      name="Ola Normann 01.01.21 14:00"
+      backgroundColor="red"
+      avatarBgColor="blue"
+    >
+      <Chat.Bubble>
+        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+        do.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </Chat.Bubble>
+    </Chat>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/idempotent.input.js

@@ -0,0 +1,25 @@
+import { Chat, Button } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <Chat
+      avatar={<Illustration />}
+      name="Ola Normann 01.01.21 14:00"
+      backgroundColor="red"
+      avatarBgColor="blue"
+    >
+      <Chat.Bubble>
+        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+        do.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </Chat.Bubble>
+    </Chat>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/idempotent.output.js

@@ -0,0 +1,25 @@
+import { Chat, Button } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <Chat
+      avatar={<Illustration />}
+      name="Ola Normann 01.01.21 14:00"
+      backgroundColor="red"
+      avatarBgColor="blue"
+    >
+      <Chat.Bubble>
+        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+        do.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </Chat.Bubble>
+    </Chat>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/props.input.js

@@ -0,0 +1,44 @@
+import { SpeechBubble, Button } from "@navikt/ds-react";
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <div>
+      <SpeechBubble
+        illustration={<Illustration />}
+        topText="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        illustrationBgColor="blue"
+      >
+        <SpeechBubble.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </SpeechBubble.Bubble>
+      </SpeechBubble>
+      <SpeechBubble
+        illustration={<Illustration />}
+        topText="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        illustrationBgColor="blue"
+      >
+        <SpeechBubble.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </SpeechBubble.Bubble>
+      </SpeechBubble>
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/props.output.js

@@ -0,0 +1,44 @@
+import { Chat, Button } from "@navikt/ds-react";
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <div>
+      <Chat
+        avatar={<Illustration />}
+        name="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        avatarBgColor="blue"
+      >
+        <Chat.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </Chat.Bubble>
+        <Chat.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </Chat.Bubble>
+        <Chat.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Chat.Bubble>
+      </Chat>
+      <Chat
+        avatar={<Illustration />}
+        name="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        avatarBgColor="blue"
+      >
+        <Chat.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </Chat.Bubble>
+        <Chat.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </Chat.Bubble>
+        <Chat.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Chat.Bubble>
+      </Chat>
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/renamed.input.js

@@ -0,0 +1,44 @@
+import { SpeechBubble as DsBubble, Button } from "@navikt/ds-react";
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <div>
+      <DsBubble
+        illustration={<Illustration />}
+        topText="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        illustrationBgColor="blue"
+      >
+        <DsBubble.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </DsBubble.Bubble>
+      </DsBubble>
+      <DsBubble
+        illustration={<Illustration />}
+        topText="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        illustrationBgColor="blue"
+      >
+        <DsBubble.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </DsBubble.Bubble>
+      </DsBubble>
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/renamed.output.js

@@ -0,0 +1,44 @@
+import { Chat as DsBubble, Button } from "@navikt/ds-react";
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <div>
+      <DsBubble
+        avatar={<Illustration />}
+        name="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        avatarBgColor="blue"
+      >
+        <DsBubble.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </DsBubble.Bubble>
+      </DsBubble>
+      <DsBubble
+        avatar={<Illustration />}
+        name="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        avatarBgColor="blue"
+      >
+        <DsBubble.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </DsBubble.Bubble>
+      </DsBubble>
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/idempotent.input.js

@@ -0,0 +1,11 @@
+import { Pagination, Button } from "@navikt/ds-react";
+
+export const Demo = () => {
+  return (
+    <div>
+      <Pagination size="small" onPageChange={setPage} data-version="v1" />
+      <Pagination size="small" onPageChange={setPage} data-version="v1" />
+      <Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/idempotent.output.js

@@ -0,0 +1,11 @@
+import { Pagination, Button } from "@navikt/ds-react";
+
+export const Demo = () => {
+  return (
+    <div>
+      <Pagination size="small" onPageChange={setPage} data-version="v1" />
+      <Pagination size="small" onPageChange={setPage} data-version="v1" />
+      <Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/import.input.js

@@ -0,0 +1,11 @@
+import { Pagination as DsPagination, Button } from "@navikt/ds-react";
+
+export const Demo = () => {
+  return (
+    <div>
+      <DsPagination onPageChange={setPage} />
+      <DsPagination size="medium" onPageChange={setPage} />
+      <DsPagination size="small" onPageChange={setPage} />
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/import.output.js

@@ -0,0 +1,11 @@
+import { Pagination as DsPagination, Button } from "@navikt/ds-react";
+
+export const Demo = () => {
+  return (
+    <div>
+      <DsPagination size="small" onPageChange={setPage} />
+      <DsPagination size="small" onPageChange={setPage} />
+      <DsPagination size="xsmall" onPageChange={setPage} />
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/size.input.js

@@ -0,0 +1,11 @@
+import { Pagination, Button } from "@navikt/ds-react";
+
+export const Demo = () => {
+  return (
+    <div>
+      <Pagination onPageChange={setPage} />
+      <Pagination size="medium" onPageChange={setPage} />
+      <Pagination size="small" onPageChange={setPage} />
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/size.output.js

@@ -0,0 +1,11 @@
+import { Pagination, Button } from "@navikt/ds-react";
+
+export const Demo = () => {
+  return (
+    <div>
+      <Pagination size="small" onPageChange={setPage} />
+      <Pagination size="small" onPageChange={setPage} />
+      <Pagination size="xsmall" onPageChange={setPage} />
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/tabs/complete.input.js

@@ -0,0 +1,25 @@
+import { Tabs } from "@navikt/ds-react";
+
+const TabComp = () => {
+  return (
+    /* prettier-ignore */
+    <div>
+      <Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
+        <Tabs.List loop={false}>
+          <Tabs.Tab value="logg" iconPosition={props.left} label="logg" />
+          <Tabs.Tab value="logg2" iconPosition="top" label="logg2medlangtekst" />
+        </Tabs.List>
+        <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+        <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+      </Tabs>
+      <Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
+        <Tabs.List>
+          <Tabs.Tab value="logg" label="logg" />
+          <Tabs.Tab value="logg2" label="logg2medlangtekst" />
+        </Tabs.List>
+        <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+        <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+      </Tabs>
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/tabs/complete.output.js

@@ -0,0 +1,29 @@
+import { Tabs } from "@navikt/ds-react";
+
+const TabComp = () => {
+  return (
+    /* prettier-ignore */
+    <div>
+      <Tabs
+        defaultValue="logg"
+        onChange={(x) => console.log(x)}
+        loop={false}
+        iconPosition={props.left}>
+        <Tabs.List>
+          <Tabs.Tab value="logg" label="logg" />
+          <Tabs.Tab value="logg2" label="logg2medlangtekst" />
+        </Tabs.List>
+        <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+        <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+      </Tabs>
+      <Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
+        <Tabs.List>
+          <Tabs.Tab value="logg" label="logg" />
+          <Tabs.Tab value="logg2" label="logg2medlangtekst" />
+        </Tabs.List>
+        <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+        <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+      </Tabs>
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/tabs/idempotent.input.js

@@ -0,0 +1,19 @@
+import { Tabs } from "@navikt/ds-react";
+
+const TabComp = () => {
+  return (
+    /* prettier-ignore */
+    <Tabs
+      defaultValue="logg"
+      onChange={(x) => console.log(x)}
+      loop
+      iconPosition="left">
+      <Tabs.List>
+        <Tabs.Tab value="logg" label="logg" />
+        <Tabs.Tab value="logg2" label="logg2medlangtekst" />
+      </Tabs.List>
+      <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+      <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+    </Tabs>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/tabs/idempotent.output.js

@@ -0,0 +1,19 @@
+import { Tabs } from "@navikt/ds-react";
+
+const TabComp = () => {
+  return (
+    /* prettier-ignore */
+    <Tabs
+      defaultValue="logg"
+      onChange={(x) => console.log(x)}
+      loop
+      iconPosition="left">
+      <Tabs.List>
+        <Tabs.Tab value="logg" label="logg" />
+        <Tabs.Tab value="logg2" label="logg2medlangtekst" />
+      </Tabs.List>
+      <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+      <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+    </Tabs>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/tabs/props.input.js

@@ -0,0 +1,15 @@
+import { Tabs } from "@navikt/ds-react";
+
+const TabComp = () => {
+  return (
+    /* prettier-ignore */
+    <Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
+      <Tabs.List loop>
+        <Tabs.Tab value="logg" iconPosition="left" label="logg" />
+        <Tabs.Tab value="logg2" iconPosition="top" label="logg2medlangtekst" />
+      </Tabs.List>
+      <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+      <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+    </Tabs>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/tabs/props.output.js

@@ -0,0 +1,19 @@
+import { Tabs } from "@navikt/ds-react";
+
+const TabComp = () => {
+  return (
+    /* prettier-ignore */
+    <Tabs
+      defaultValue="logg"
+      onChange={(x) => console.log(x)}
+      loop
+      iconPosition="left">
+      <Tabs.List>
+        <Tabs.Tab value="logg" label="logg" />
+        <Tabs.Tab value="logg2" label="logg2medlangtekst" />
+      </Tabs.List>
+      <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+      <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+    </Tabs>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__tests__/chat.test.ts

@@ -0,0 +1,10 @@
+export {};
+
+jest.autoMockOff();
+const defineTest = require("jscodeshift/dist/testUtils").defineTest;
+
+const tests = ["props", "complete", "idempotent", "renamed"];
+
+for (const test of tests) {
+  defineTest(__dirname, "chat", null, `chat/${test}`);
+}

@navikt/codemod/transforms/v1.0.0/__tests__/pagination.test.ts

@@ -0,0 +1,10 @@
+export {};
+
+jest.autoMockOff();
+const defineTest = require("jscodeshift/dist/testUtils").defineTest;
+
+const tests = ["size", "import", "idempotent"];
+
+for (const test of tests) {
+  defineTest(__dirname, "pagination", null, `pagination/${test}`);
+}

@navikt/codemod/transforms/v1.0.0/__tests__/tabs.test.ts

@@ -0,0 +1,10 @@
+export {};
+
+jest.autoMockOff();
+const defineTest = require("jscodeshift/dist/testUtils").defineTest;
+
+const tests = ["props", "idempotent", "complete"];
+
+for (const test of tests) {
+  defineTest(__dirname, "tabs", null, `tabs/${test}`);
+}

@navikt/codemod/transforms/v1.0.0/chat.ts

@@ -0,0 +1,68 @@
+import renameProps from "../utils/rename-props";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  let localName = "SpeechBubble";
+
+  const root = j(file.source);
+
+  /* Finds and replaces import from SpeechBubble -> Chat */
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === "@navikt/ds-react")
+    .forEach((imp) => {
+      imp.value.specifiers.forEach((x) => {
+        if (x.imported.name === "SpeechBubble") {
+          if (x.local.name !== x.imported.name) {
+            localName = x.local.name;
+            x.imported.name = "Chat";
+          } else {
+            x.imported.name = "Chat";
+            x.local.name = "Chat";
+          }
+        }
+      });
+    });
+
+  if (!!j(file.source).findJSXElements(localName)) {
+    renameProps({
+      root,
+      componentName: localName,
+      props: {
+        illustrationBgColor: "avatarBgColor",
+        illustration: "avatar",
+        topText: "name",
+      },
+    });
+
+    /* Find and replace name of all <SpeechBubble />*/
+    const compRoot = root.find(j.JSXElement, {
+      openingElement: { name: { name: localName } },
+    });
+
+    compRoot.forEach((x) => {
+      if (localName !== "SpeechBubble") return;
+      x.node.openingElement.name.name = "Chat";
+      x.node.closingElement.name.name = "Chat";
+    });
+
+    /* Need to handle dot-notations differently */
+    const child = root.find(j.JSXElement);
+
+    child.forEach((x) => {
+      if (
+        x.value.openingElement.name.type === "JSXMemberExpression" &&
+        x.value.openingElement.name.object.name === "SpeechBubble"
+      ) {
+        x.value.openingElement.name.object.name = "Chat";
+        x.value.closingElement.name.object.name = "Chat";
+      }
+    });
+  }
+
+  return root.toSource(options.printOptions);
+}

@navikt/codemod/transforms/v1.0.0/pagination.ts

@@ -0,0 +1,60 @@
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  let localName = "Pagination";
+
+  const root = j(file.source);
+
+  /* https://github.com/mui/material-ui/blob/master/packages/mui-codemod/src/v5.0.0/variant-prop.js */
+  function addExplicitStandardProp(node) {
+    const attributes = node.openingElement.attributes;
+    const variant = attributes.find(
+      (node) => node.type === "JSXAttribute" && node.name.name === "size"
+    );
+
+    if (!variant) {
+      attributes.unshift(
+        j.jsxAttribute(j.jsxIdentifier("size"), j.literal("small"))
+      );
+    }
+  }
+
+  /* Finds locally used name for Pagination */
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === "@navikt/ds-react")
+    .forEach((imp) => {
+      imp.value.specifiers.forEach((x) => {
+        if (
+          x.imported.name === "Pagination" &&
+          x.local.name !== x.imported.name
+        ) {
+          localName = x.local.name;
+        }
+      });
+    });
+
+  if (!!j(file.source).findJSXElements(localName)) {
+    root.findJSXElements(`${localName}`).forEach((parent) => {
+      const skip = !!parent.value.openingElement?.attributes.find(
+        (x) => x.name.name === "data-version" && x.value.value === "v1"
+      );
+      parent.value.openingElement?.attributes.forEach((x, index) => {
+        if (x.name?.name === "size" && x.type === "JSXAttribute" && !skip) {
+          /* addExplicitStandardProp */
+          if (x.value.value === "medium") {
+            x.value = j.literal("small");
+          } else if (x.value.value === "small") {
+            x.value = j.literal("xsmall");
+          }
+        }
+      });
+      addExplicitStandardProp(parent.value);
+    });
+  }
+
+  return root.toSource(options.printOptions);
+}

@navikt/codemod/transforms/v1.0.0/tabs.ts

@@ -0,0 +1,83 @@
+import renameProps from "../utils/rename-props";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  let localName = "Tabs";
+  let iconPositionProp = null;
+
+  const root = j(file.source);
+
+  /* Finds used name for Tabs component */
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === "@navikt/ds-react")
+    .forEach((imp) => {
+      imp.value.specifiers.forEach((x) => {
+        if (x.imported.name === "Tabs" && x.local.name !== x.imported.name) {
+          localName = x.local.name;
+        }
+      });
+    });
+
+  if (!!j(file.source).findJSXElements(localName)) {
+    renameProps({
+      root,
+      componentName: `${localName}.List`,
+      props: {
+        loop: "null",
+      },
+    });
+
+    root.findJSXElements(`${localName}`).forEach((parent) => {
+      parent.value.children.forEach((el) => {
+        const openingEl = el.openingElement;
+        if (openingEl?.name && openingEl.name.type === "JSXMemberExpression") {
+          if (
+            openingEl.name.object.name === localName &&
+            openingEl.name.property.name === "List"
+          ) {
+            /* Move loop-prop */
+            el.openingElement.attributes.forEach((x, index) => {
+              if (x.name?.name === "loop" && x.type === "JSXAttribute") {
+                parent.value.openingElement.attributes.push(x);
+                delete el.openingElement.attributes[index];
+              }
+            });
+
+            /* Find and move iconPosition-prop to <Tabs/> */
+            el.children.forEach((tab) => {
+              const tabEl = tab.openingElement;
+              if (tabEl?.name && tabEl.name.type === "JSXMemberExpression") {
+                if (
+                  tabEl.name.object.name === localName &&
+                  tabEl.name.property.name === "Tab"
+                ) {
+                  tabEl?.attributes.forEach((x, index) => {
+                    if (
+                      x.name?.name === "iconPosition" &&
+                      x.type === "JSXAttribute"
+                    ) {
+                      if (!iconPositionProp) {
+                        iconPositionProp = x;
+                      }
+                      delete tabEl.attributes[index];
+                    }
+                  });
+                }
+              }
+            });
+          }
+        }
+      });
+      iconPositionProp &&
+        parent.value.openingElement.attributes.push(iconPositionProp);
+      iconPositionProp = null;
+    });
+  }
+
+  return root.toSource(options.printOptions);
+}

@navikt/codemod/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "sourceMap": false,
+    "esModuleInterop": true,
+    "target": "es2015",
+    "downlevelIteration": true,
+    "preserveWatchOutput": true,
+    "declaration": false,
+    "types": ["@types/jscodeshift", "node", "jest"]
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules", "dist", "jest.config.js"]
+}

@navikt/core/css/accordion.css

@@ -1,15 +1,9 @@
 :root {
-  --navds-accordion-color-text: var(--navds-semantic-color-text);
-  --navds-accordion-color-background: var(
-    ---navds-semantic-color-component-background-light
-  );
-  --navds-accordion-color-text-hover: var(--navds-semantic-color-link);
-  --navds-accordion-color-border: var(--navds-semantic-color-border-muted);
-  --navds-accordion-color-border-hover: var(
+  --navds-accordion-color-text-hover: var(
     --navds-semantic-color-interaction-primary
   );
-  --navds-accordion-color-text-open: var(--navds-semantic-color-text);
-  --navds-accordion-color-text-open-hover: var(
+  --navds-accordion-color-border: var(--navds-semantic-color-border);
+  --navds-accordion-color-border-hover: var(
     --navds-semantic-color-interaction-primary
   );
   --navds-accordion-color-background-open: var(
@@ -21,10 +15,6 @@
   transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.navds-accordion {
-  background: var(--navds-accordion-color-background);
-}
-
 .navds-accordion__item:focus-within {
   position: relative;
 }
@@ -33,9 +23,9 @@
   width: 100%;
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  gap: var(--navds-spacing-4);
-  padding: var(--navds-spacing-4) var(--navds-spacing-3);
+  align-items: flex-start;
+  gap: var(--navds-spacing-2);
+  padding: 14px var(--navds-spacing-3) var(--navds-spacing-3);
   margin: 0;
   text-align: left;
   background: transparent;
@@ -54,20 +44,18 @@
   border-color: var(--navds-accordion-color-border-hover);
 }
 
-.navds-accordion__item--open > .navds-accordion__header {
-  background-color: var(--navds-accordion-color-background-open);
-  color: var(--navds-accordion-color-text-open);
-  border-color: transparent;
+.navds-accordion__header-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.navds-accordion__item--open > .navds-accordion__header:hover {
-  border-color: transparent;
-  color: var(--navds-accordion-color-text-open-hover);
+.navds-accordion__item--open > .navds-accordion__header {
+  background-color: var(--navds-accordion-color-background-open);
+  border-color: var(--navds-accordion-color-background-open);
 }
 
 .navds-accordion__content {
-  color: var(--navds-accordion-color-text);
-  padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
+  padding: var(--navds-spacing-3) var(--navds-spacing-3) 18px;
   border-bottom: 2px solid var(--navds-accordion-color-border);
 }
 
@@ -79,12 +67,12 @@
 }
 
 .navds-accordion__expand-icon {
-  width: 1.5rem;
-  height: 1.5rem;
+  font-size: 1.5rem;
+  height: 1.75rem;
   flex-shrink: 0;
 }
 
-.navds-accordion__expand-icon--flip {
+.navds-accordion__item--open .navds-accordion__expand-icon {
   transform: rotateZ(180deg);
 }
 

@navikt/core/css/alert.css

@@ -33,8 +33,8 @@
 }
 
 .navds-alert--small {
-  padding: var(--navds-spacing-2);
-  gap: var(--navds-spacing-2);
+  padding: var(--navds-spacing-2) var(--navds-spacing-4);
+  gap: var(--navds-spacing-3);
 }
 
 .navds-alert--full-width {
@@ -80,6 +80,6 @@
 
 .navds-alert--inline {
   background-color: transparent;
-  border-color: transparent;
+  border: none;
   padding: 0;
 }

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

@@ -43,6 +43,10 @@ a {
   color: var(--navds-semantic-color-link);
 }
 
+button {
+  color: inherit;
+}
+
 /* https://web.dev/prefers-reduced-motion/ */
 @media (prefers-reduced-motion: reduce) {
   *:not(.navds-loader *):not(.navds-loader),

@navikt/core/css/button.css

@@ -94,11 +94,9 @@
   );
 
   /* Secondary */
-  --navds-button-color-secondary-text: var(--navds-global-color-blue-200);
-  --navds-button-color-secondary-text-hover: var(--navds-global-color-blue-200);
-  --navds-button-color-secondary-text-active: var(
-    --navds-global-color-blue-200
-  );
+  --navds-button-color-secondary-text: var(--navds-global-color-white);
+  --navds-button-color-secondary-text-hover: var(--navds-global-color-white);
+  --navds-button-color-secondary-text-active: var(--navds-global-color-white);
   --navds-button-color-secondary-border: var(--navds-global-color-blue-200);
   --navds-button-color-secondary-border-focus-active-hover: var(
     --navds-semantic-color-text
@@ -107,10 +105,10 @@
     --navds-semantic-color-component-background-inverted
   );
   --navds-button-color-secondary-background-hover: var(
-    --navds-global-color-blue-900
+    --navds-global-color-gray-800
   );
   --navds-button-color-secondary-background-active: var(
-    --navds-global-color-blue-800
+    --navds-global-color-gray-700
   );
 }
 

@navikt/core/css/form/confirmation-panel.css

@@ -28,6 +28,7 @@
   border: 1px solid var(--navds-confirmation-panel-color-border);
   background-color: var(--navds-confirmation-panel-color-background);
   transition: background-color linear 100ms;
+  justify-self: stretch;
 }
 
 .navds-confirmation-panel__content {

@navikt/core/css/form/error-summary.css

@@ -28,6 +28,7 @@
   flex-direction: column;
   gap: var(--navds-spacing-3);
   padding-left: var(--navds-spacing-6);
+  list-style: inherit;
 }
 
 .navds-error-summary__list > * {

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

@@ -1,12 +1,11 @@
-.navds-form-field > :not(:first-child):not(:empty),
-.navds-form-field > input:not(:first-child) {
-  margin-top: var(--navds-spacing-2);
+.navds-form-field {
+  display: grid;
+  justify-items: start;
+  gap: var(--navds-spacing-2);
 }
 
-/* Applied when hideLabel is applied to form-element */
-.navds-form-field > .navds-sr-only + :not(:first-child):not(:empty),
-.navds-form-field > .navds-sr-only + input:not(:first-child) {
-  margin-top: 0;
+.navds-form-field__description {
+  margin-top: -4px;
 }
 
 .navds-form-field .navds-error-message,
@@ -19,3 +18,12 @@
 .navds-fieldset .navds-error-message::before {
   content: "•";
 }
+
+.navds-form-field--disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.navds-form-field__error:empty {
+  display: none;
+}

@navikt/core/css/form/search.css

@@ -6,6 +6,7 @@
     --navds-semantic-color-interaction-primary
   );
   --navds-search-color-clear-hover: var(--navds-global-color-blue-500);
+  --navds-search-color-border-error: var(--navds-global-color-red-500);
 }
 
 [data-theme="dark"] {
@@ -13,6 +14,7 @@
   --navds-search-color-border: var(--navds-semantic-color-border-inverted);
   --navds-search-color-border-hover: var(--navds-global-color-blue-200);
   --navds-search-color-clear-hover: var(--navds-global-color-blue-200);
+  --navds-search-color-border-error: var(--navds-global-color-red-300);
 }
 
 .navds-search {
@@ -150,6 +152,17 @@
   box-shadow: 0 0 0 1px white inset, var(--navds-shadow-focus);
 }
 
+/* Error-handling */
+.navds-search--error .navds-search__input:not(:hover):not(:disabled) {
+  border-color: var(--navds-search-color-border-error);
+  box-shadow: inset 0 0 0 1px var(--navds-search-color-border-error);
+}
+
+.navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
+  box-shadow: inset 0 0 0 1px var(--navds-search-color-border-error),
+    var(--navds-shadow-focus);
+}
+
 /* Focus layering */
 .navds-search__input:focus,
 .navds-search__button-clear,

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

@@ -70,13 +70,6 @@
   border-color: var(--navds-select-color-border-error);
 }
 
-/*
-  Disabled handling
- */
-.navds-select--disabled {
-  opacity: 0.3;
-}
-
 .navds-select__input:disabled {
   background-color: var(--navds-select-color-background);
   border-color: var(--navds-select-color-border);

@navikt/core/css/form/text-field.css

@@ -27,7 +27,7 @@
 [data-theme="dark"] {
   --navds-text-field-color-text: var(--navds-semantic-color-text-inverted);
   --navds-text-field-color-background: var(
-    --navds-semantic-color-component-background-dark
+    --navds-semantic-color-component-background-inverted
   );
   --navds-text-field-color-border: var(--navds-semantic-color-border-inverted);
   --navds-text-field-color-border-hover: var(--navds-global-color-blue-200);
@@ -45,6 +45,10 @@
   color: var(--navds-text-field-color-text);
 }
 
+.navds-text-field__input[size] {
+  width: auto;
+}
+
 .navds-text-field__input::placeholder {
   color: var(--navds-text-field-color-placeholder-text);
 }
@@ -54,10 +58,6 @@
   min-height: 32px;
 }
 
-.navds-form-field--small > .navds-text-field__description:not(:empty) {
-  margin-top: var(--navds-spacing-1);
-}
-
 .navds-text-field__input:hover {
   border-color: var(--navds-text-field-color-border-hover);
 }
@@ -87,7 +87,6 @@
   border-color: var(--navds-text-field-color-border);
   box-shadow: none;
   cursor: not-allowed;
-  opacity: 0.3;
 }
 
 .navds-text-field__input[readonly] {
@@ -97,11 +96,6 @@
   cursor: not-allowed;
 }
 
-.navds-text-field--disabled > .navds-text-field__label,
-.navds-text-field--disabled > .navds-text-field__description {
-  opacity: 0.3;
-}
-
 /**
   * Removes default search icon
   */

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

@@ -38,6 +38,7 @@
   width: 100%;
   display: block;
   min-height: 48px;
+  color: var(--navds-text-field-color-text);
 }
 
 .navds-textarea--counter {
@@ -89,13 +90,6 @@
   border-color: var(--navds-textarea-color-border-error);
 }
 
-/*
-  Disabled handling
- */
-.navds-textarea--disabled {
-  opacity: 0.3;
-}
-
 .navds-textarea__input:disabled {
   background-color: var(--navds-textarea-color-background);
   border-color: var(--navds-textarea-color-border);

@navikt/core/css/link-panel.css

@@ -12,7 +12,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--navds-spacing-2);
+  gap: var(--navds-spacing-4);
 }
 
 .navds-link-panel:hover .navds-link-panel__title {
@@ -21,7 +21,7 @@
 }
 
 .navds-link-panel:hover {
-  box-shadow: var(--navds-shadow-card);
+  box-shadow: var(--navds-shadow-medium);
   border-color: var(--navds-link-panel-color-border-hover);
 }
 
@@ -42,5 +42,5 @@
 }
 
 .navds-link-panel__description {
-  margin-top: var(--navds-spacing-2);
+  margin-top: var(--navds-spacing-1);
 }

@navikt/core/css/loader.css

@@ -1,16 +1,12 @@
 :root {
   --navds-loader-color-foreground: var(--navds-global-color-gray-400);
-  --navds-loader-color-background: var(
-    --navds-semantic-color-component-background-alternate
-  );
+  --navds-loader-color-background: rgb(0 0 0 / 0.05);
   --navds-loader-color-neutral-foreground: var(--navds-global-color-gray-400);
   --navds-loader-color-interaction-foreground: var(
-    --navds-semantic-color-interaction-primary
+    --navds-global-color-blue-500
   );
-  --navds-loader-color-inverted-foreground: var(
-    --navds-semantic-color-component-background-light
-  );
-  --navds-loader-color-inverted-background: var(--navds-global-color-gray-600);
+  --navds-loader-color-inverted-foreground: var(--navds-global-color-white);
+  --navds-loader-color-inverted-background: rgb(255 255 255 / 0.25);
   --navds-loader-color-transparent-background: transparent;
 }
 

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.18.12",
+  "version": "0.18.27",
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
   "keywords": [
@@ -20,7 +20,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.9.5",
+    "@navikt/ds-tokens": "^0.9.7",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",

@navikt/core/css/popover.css

@@ -8,7 +8,7 @@
 .navds-popover {
   z-index: var(--navds-z-index-popover);
   background-color: var(--navds-popover-color-background);
-  box-shadow: var(--navds-shadow-popover);
+  box-shadow: var(--navds-shadow-medium);
   border: 1px solid;
   border-color: var(--navds-popover-color-border);
   border-radius: var(--navds-border-radius-medium);

@navikt/core/css/read-more.css

@@ -32,7 +32,7 @@
 
 .navds-read-more + .ReactCollapse--collapse {
   transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  padding-top: var(--navds-spacing-2);
+  padding-top: var(--navds-spacing-1);
 }
 
 .navds-read-more:not(.navds-read-more--open) + .ReactCollapse--collapse {
@@ -40,19 +40,9 @@
 }
 
 .navds-read-more__content {
-  display: flex;
-  align-items: stretch;
-  gap: 10px;
-  padding: 0 var(--navds-spacing-1);
-}
-
-.navds-read-more__content::before {
-  content: "";
-  display: block;
-  width: 2px;
-  background-color: rgba(38 38 38 / 0.36);
-  margin: 0 7px;
-  flex-shrink: 0;
+  border-left: 2px solid rgba(38 38 38 / 0.36);
+  margin-left: 11px;
+  padding-left: 15px;
 }
 
 .navds-read-more__expand-icon {

@navikt/core/css/speech-bubble.css

@@ -55,7 +55,7 @@
 
 .navds-speechbubble__bubble {
   padding: 1rem;
-  box-shadow: var(--navds-shadow-popover);
+  box-shadow: var(--navds-shadow-small);
   width: fit-content;
   max-width: 37.5rem;
   background-color: var(--navds-speechbubble-color-background);

@navikt/core/css/stepper.css

@@ -1,99 +1,180 @@
 .navds-stepper {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
+  --navds-stepper-circle-size: 1.75rem;
+  --navds-stepper-border-width: 2px;
+  --navds-stepper-line-length: 1rem;
 
-/* Step */
-.navds-stepper__step {
-  position: relative;
-  cursor: pointer;
-  padding: calc(2.25rem / 2) 0;
-  display: flex;
-  background: none;
-  border: none;
-  appearance: none;
-  width: 100%;
-  color: var(--navds-semantic-color-text);
-  text-decoration: none;
-  flex-shrink: 0;
-}
-
-.navds-stepper__step-number {
-  flex-shrink: 0;
-  display: flex;
-  width: 28px;
-  height: 28px;
-  margin: 0;
-  margin-right: var(--navds-spacing-3);
-  border-radius: var(--navds-border-radius-full);
-  align-items: center;
-  justify-content: center;
   color: var(--navds-semantic-color-interaction-primary);
-  box-shadow: inset 0 0 0 2px var(--navds-semantic-color-interaction-primary);
-  background-color: var(--navds-semantic-color-component-background-light);
+  font-weight: 600;
+  line-height: 1;
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
 }
 
-/* Step-states: focus, active, hover */
-.navds-stepper__step-wrapper:hover
-  > .navds-stepper__step
-  > .navds-stepper__step-number {
+.navds-stepper--horizontal {
+  display: flex;
+  align-items: flex-start;
+  text-align: center;
+}
+
+.navds-stepper__item {
+  display: grid;
+  grid-template-rows:
+    [line-1] auto [step-start] var(--navds-stepper-circle-size)
+    [line-2 step-end] auto;
+  grid-template-columns: var(--navds-stepper-circle-size) auto;
+  justify-items: flex-start;
+  gap: 0.5rem;
+}
+
+.navds-stepper__line {
+  background-color: var(--navds-semantic-color-border-muted);
+  width: var(--navds-stepper-border-width);
+  height: 100%;
+  min-height: var(--navds-stepper-line-length);
+  justify-self: center;
+  grid-column: 1;
+}
+
+.navds-stepper__line--1 {
+  grid-row: line-1;
+  display: none;
+}
+
+.navds-stepper__line--2 {
+  grid-row: line-2;
+}
+
+:where(.navds-stepper__item:last-of-type) .navds-stepper__line--2 {
+  display: none;
+}
+
+.navds-stepper__step {
+  grid-row: 2 / -1;
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: [circle] var(--navds-stepper-circle-size) [content] auto;
+  gap: var(--navds-spacing-2);
+  align-items: baseline;
+  justify-content: flex-start;
+  text-decoration: none;
+  cursor: pointer;
+  padding: var(--navds-stepper-border-width);
+  margin: calc(var(--navds-stepper-border-width) * -1)
+    calc(var(--navds-stepper-border-width) * -1) 1.75rem;
+}
+
+button.navds-stepper__step {
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+}
+
+:where(.navds-stepper__step):focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+  isolation: isolate;
+}
+
+.navds-stepper__circle {
+  grid-column: circle;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: var(--navds-stepper-circle-size);
+  height: var(--navds-stepper-circle-size);
+  border: var(--navds-stepper-border-width) solid currentColor;
+  border-radius: var(--navds-border-radius-full);
+  line-height: 1;
+}
+
+.navds-stepper__content {
+  min-width: fit-content;
+  line-height: 1.5;
+  grid-column: content;
+}
+
+/* Horizontal */
+:where(.navds-stepper--horizontal) .navds-stepper__item {
+  flex: 1 1 100%;
+  grid-template-columns:
+    [line-1-start] 1fr [step-start] auto [line-1-end] var(
+      --navds-stepper-circle-size
+    )
+    [line-2-start] auto [step-end] 1fr [line-2-end];
+  grid-template-rows: var(--navds-stepper-circle-size) auto;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__line {
+  height: var(--navds-stepper-border-width);
+  width: 100%;
+  min-height: auto;
+  grid-row: 1;
+  display: block;
+  align-self: center;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__line--1 {
+  grid-column: line-1;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__line--2 {
+  grid-column: line-2;
+}
+
+:where(.navds-stepper--horizontal .navds-stepper__item:first-of-type)
+  .navds-stepper__line--1,
+:where(.navds-stepper--horizontal .navds-stepper__item:last-of-type)
+  .navds-stepper__line--2 {
+  visibility: hidden;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__step {
+  grid-row: 1 / -1;
+  grid-column: step;
+  display: grid;
+  grid-template-rows: [circle] var(--navds-stepper-circle-size) [content] auto;
+  grid-template-columns:
+    [content-start] auto [circle] var(--navds-stepper-circle-size)
+    [content-end] auto;
+  justify-items: center;
+  align-items: center;
+  margin-bottom: 0;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__circle {
+  grid-row: circle;
+  grid-column: 2;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__content {
+  grid-row: content;
+  grid-column: 1 / -1;
+  max-width: 24ch;
+}
+
+/* Active step */
+:where(.navds-stepper__step--active) .navds-stepper__content {
+  color: var(--navds-semantic-color-interaction-primary-selected);
+}
+
+:where(.navds-stepper__step:not(.navds-stepper__step--active):hover)
+  .navds-stepper__content {
+  text-decoration: underline;
+}
+
+:where(.navds-stepper__step--active) .navds-stepper__circle {
+  background-color: var(--navds-semantic-color-interaction-primary-selected);
+  border-color: var(--navds-semantic-color-interaction-primary-selected);
+  color: var(--navds-semantic-color-text-inverted);
+}
+
+:where(.navds-stepper__step:not(.navds-stepper__step--active):hover)
+  .navds-stepper__circle {
   background-color: var(
     --navds-semantic-color-interaction-primary-hover-subtle
   );
 }
-
-.navds-stepper__step--active > .navds-stepper__step-number,
-.navds-stepper__step-wrapper:hover
-  > .navds-stepper__step--active
-  > .navds-stepper__step-number {
-  color: var(--navds-semantic-color-text-inverted);
-  background-color: var(--navds-semantic-color-interaction-primary-selected);
-  box-shadow: inset 0 0 0 2px
-    var(--navds-semantic-color-interaction-primary-selected);
-}
-
-.navds-stepper__step:focus {
-  box-shadow: var(--navds-shadow-focus);
-  outline: none;
-}
-
-.navds-stepper__step--active {
-  cursor: default;
-}
-
-/* Step label */
-.navds-stepper__step-label {
-  margin-top: 2px;
-  color: var(--navds-semantic-color-interaction-primary);
-  text-align: left;
-}
-
-.navds-stepper__step:hover > .navds-stepper__step-label {
-  text-decoration: underline;
-}
-
-.navds-stepper__step--active > .navds-stepper__step-label {
-  color: black;
-}
-
-.navds-stepper__step--active:hover > .navds-stepper__step-label {
-  text-decoration: none;
-}
-
-/* Step Horizontal Lines */
-
-.navds-stepper__step-wrapper:not(:last-child) > .navds-stepper__step::after {
-  content: "";
-  position: absolute;
-  top: calc(28px + 8px + (2.25rem / 2));
-  left: 13px;
-  height: calc(100% - 2.75rem);
-  display: block;
-  border-left: 2px solid var(--navds-semantic-color-border-muted);
-  border-radius: var(--navds-border-radius-medium);
-  pointer-events: none;
-  z-index: 1;
-}

@navikt/core/css/table.css

@@ -148,7 +148,7 @@
 }
 
 .navds-table__header-cell--align-right .navds-table__sort-button {
-  justify-content: end;
+  justify-content: flex-end;
 }
 
 .navds-table__header-cell--align-center .navds-table__sort-button {

@navikt/core/css/typography.css

@@ -1,9 +1,14 @@
-:root {
+:root,
+[data-theme="light"] {
   --navds-error-message-color-text: var(
     --navds-semantic-color-feedback-danger-text
   );
 }
 
+[data-theme="dark"] {
+  --navds-error-message-color-text: var(--navds-global-color-red-300);
+}
+
 /* Heading */
 .navds-heading {
   font-weight: var(--navds-font-weight-bold);

@navikt/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.8.17",
+  "version": "0.8.18",
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {
     "type": "git",

@navikt/core/icons/svg/Dialog.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 13.5179L4.60216 12H6V11C6 8.79086 7.79086 7 10 7H16V4C16 2.89543 15.1046 2 14 2H4C2.89543 2 2 2.89543 2 4V13.5179ZM5.14286 14H6V17C6 19.2091 7.79086 21 10 21H18.8571L24 24V11C24 8.79086 22.2091 7 20 7H18V4C18 1.79086 16.2091 0 14 0H4C1.79086 0 0 1.79086 0 4V17L5.14286 14ZM19.3978 19L22 20.5179V11C22 9.89543 21.1046 9 20 9H10C8.89543 9 8 9.89543 8 11V17C8 18.1046 8.89543 19 10 19H19.3978ZM11 15C11.5523 15 12 14.5523 12 14C12 13.4477 11.5523 13 11 13C10.4477 13 10 13.4477 10 14C10 14.5523 10.4477 15 11 15ZM16 14C16 14.5523 15.5523 15 15 15C14.4477 15 14 14.5523 14 14C14 13.4477 14.4477 13 15 13C15.5523 13 16 13.4477 16 14ZM19 15C19.5523 15 20 14.5523 20 14C20 13.4477 19.5523 13 19 13C18.4477 13 18 13.4477 18 14C18 14.5523 18.4477 15 19 15Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 4C18 2.89543 17.1046 2 16 2H4C2.89543 2 2 2.89543 2 4V16.7896L6 14.328V18C6 19.1046 6.89543 20 8 20H16.4471L22 22.5629L22 16.5714V10C22 8.89543 21.1046 8 20 8H18V4ZM6 10V12H5.96696L4 13.2104V4L16 4V8H8C6.89543 8 6 8.89543 6 10ZM20 18.5714V10H8V18H16.8864L20 19.4371L20 18.5714ZM11 15C11.5523 15 12 14.5523 12 14C12 13.4477 11.5523 13 11 13C10.4477 13 10 13.4477 10 14C10 14.5523 10.4477 15 11 15ZM15 14C15 14.5523 14.5523 15 14 15C13.4477 15 13 14.5523 13 14C13 13.4477 13.4477 13 14 13C14.5523 13 15 13.4477 15 14ZM17 15C17.5523 15 18 14.5523 18 14C18 13.4477 17.5523 13 17 13C16.4477 13 16 13.4477 16 14C16 14.5523 16.4477 15 17 15Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/DialogFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 0C16.2091 0 18 1.79086 18 4V5H10C6.68629 5 4 7.68629 4 11V14.6667L0 17V10V4C0 1.79086 1.79086 0 4 0H14ZM10 7C7.79086 7 6 8.79086 6 11V17C6 19.2091 7.79086 21 10 21H18.8571L24 24V17V11C24 8.79086 22.2091 7 20 7H10ZM12 14C12 14.5523 11.5523 15 11 15C10.4477 15 10 14.5523 10 14C10 13.4477 10.4477 13 11 13C11.5523 13 12 13.4477 12 14ZM15 15C15.5523 15 16 14.5523 16 14C16 13.4477 15.5523 13 15 13C14.4477 13 14 13.4477 14 14C14 14.5523 14.4477 15 15 15ZM20 14C20 14.5523 19.5523 15 19 15C18.4477 15 18 14.5523 18 14C18 13.4477 18.4477 13 19 13C19.5523 13 20 13.4477 20 14Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 2C17.1046 2 18 2.89543 18 4V6H7C5.34315 6 4 7.34315 4 9V15.5588L2 16.7896V4C2 2.89543 2.89543 2 4 2H16ZM8 8C6.89543 8 6 8.89543 6 10V18C6 19.1046 6.89543 20 8 20H16.4471L22 22.5629L22 16.5714V10C22 8.89543 21.1046 8 20 8H8ZM12 14C12 14.5523 11.5523 15 11 15C10.4477 15 10 14.5523 10 14C10 13.4477 10.4477 13 11 13C11.5523 13 12 13.4477 12 14ZM14 15C14.5523 15 15 14.5523 15 14C15 13.4477 14.5523 13 14 13C13.4477 13 13 13.4477 13 14C13 14.5523 13.4477 15 14 15ZM18 14C18 14.5523 17.5523 15 17 15C16.4477 15 16 14.5523 16 14C16 13.4477 16.4477 13 17 13C17.5523 13 18 13.4477 18 14Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/DivideFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 12V0.0410728C4.84047 0.549224 0 5.70934 0 12C0 18.6274 5.37258 24 12 24C14.9922 24 17.7286 22.9048 19.8303 21.0935L11 12ZM24 12C24 12.9017 23.9005 13.7802 23.712 14.6252C23.297 16.4847 22.4505 18.1814 21.2831 19.6048L13 11V0.0410728C18.2766 0.476382 22.5852 4.32556 23.712 9.37484C23.9005 10.2198 24 11.0983 24 12Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 12V0.0410728C4.84047 0.549224 0 5.70934 0 12C0 18.6274 5.37258 24 12 24C14.9922 24 17.7286 22.9048 19.8303 21.0935L11 12ZM24 12C24 12.9017 23.9005 13.7802 23.712 14.6252C23.297 16.4847 22.4505 18.1814 21.2831 19.6048L13 11V0.0410728C18.2766 0.476383 22.5852 4.32556 23.712 9.37484C23.9005 10.2198 24 11.0983 24 12Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Down.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13 0V20.295L20.5455 13L22 14.3746L12 24L2 14.3746L3.45455 13L11 20.295V0H13Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22L4.2929 14.2929L5.70711 12.8787L11 18.1716L11 1.58579L13 1.58579L13 18.1716L18.2929 12.8787L19.7071 14.2929L12 22Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/HandsHeartFilled.svg

@@ -1,3 +1,3 @@
 <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00966 7.69902L10.4929 3.17357C10.7697 2.81386 11.0777 2.49229 11.41 2.20971C8.17802 0.018759 3.5804 0.85612 1.36332 4.29804C-0.845834 7.72765 -0.334697 12.287 2.63896 15.1058L10.178 22.2522C11.2736 23.2908 13.0078 23.2414 14.0421 22.1422C14.431 21.7289 14.6631 21.2275 14.7436 20.7084C15.3376 20.6483 15.9128 20.3764 16.3457 19.8968C16.6899 19.5156 16.895 19.057 16.9637 18.5837C17.4775 18.5068 17.9704 18.2651 18.357 17.861L18.401 17.8149C18.7399 17.4607 18.951 17.0321 19.0368 16.5853C19.6275 16.5392 20.2054 16.2938 20.6616 15.8497C21.1381 15.3859 21.4259 14.8774 21.4474 14.1754C21.4689 13.4734 21.0626 13.0359 21.0626 13.0359L17.5861 9.06919L16.375 7.71875L13.5162 10.7833C12.4104 11.9687 10.5628 12.0612 9.34409 10.992L7.14262 9.06068C6.74616 8.71287 6.68797 8.11695 7.00966 7.69902ZM11.8334 3.67844L9.00765 7.43908C8.70103 7.84714 8.75094 8.42061 9.12342 8.76958L9.97504 9.56741C10.7823 10.3237 12.05 10.2811 12.8047 9.47234L16.4531 5.5625L22.0625 12.1875C24.8854 9.47881 24.5841 4.87943 21.4319 2.5622L21.0946 2.31429C18.1555 0.153665 14.0247 0.762115 11.8334 3.67844Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00966 7.69902L10.4929 3.17357C10.7697 2.81386 11.0777 2.49229 11.41 2.20971C8.17802 0.0187588 3.5804 0.85612 1.36332 4.29804C-0.845834 7.72765 -0.334697 12.287 2.63896 15.1058L10.178 22.2522C11.2736 23.2908 13.0078 23.2414 14.0421 22.1422C14.431 21.7289 14.6631 21.2275 14.7436 20.7084C15.3376 20.6483 15.9128 20.3764 16.3457 19.8968C16.6899 19.5156 16.895 19.057 16.9637 18.5837C17.4775 18.5068 17.9704 18.2651 18.357 17.861L18.401 17.8149C18.7399 17.4607 18.951 17.0321 19.0368 16.5853C19.6275 16.5392 20.2054 16.2938 20.6616 15.8497C21.1381 15.3859 21.4259 14.8774 21.4474 14.1754C21.4689 13.4734 21.0626 13.0359 21.0626 13.0359L17.5861 9.06919L16.375 7.71875L13.5162 10.7833C12.4104 11.9687 10.5628 12.0612 9.34409 10.992L7.14262 9.06068C6.74616 8.71287 6.68797 8.11695 7.00966 7.69902ZM11.8334 3.67844L9.00765 7.43908C8.70103 7.84714 8.75094 8.42061 9.12342 8.76958L9.97504 9.56741C10.7823 10.3237 12.05 10.2811 12.8047 9.47234L16.4531 5.5625L22.0625 12.1875C24.8854 9.47881 24.5841 4.87943 21.4319 2.5622L21.0946 2.31429C18.1555 0.153665 14.0247 0.762115 11.8334 3.67844Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/HearingImpairedFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8802 0.0490061C8.83055 -0.399484 5.22544 2.28056 4.25537 6.03027C7.40915 9.49288 8.20399 15.9871 4.4137 20.1558C4.41524 20.1597 4.41679 20.1636 4.41834 20.1675L2.29297 22.2929L3.70718 23.7071L22.7072 4.70711L21.293 3.29289L19.4654 5.12045C18.4352 2.45838 16.0017 0.394705 12.8802 0.0490061ZM8.00002 7.99316C8.01821 5.33167 10.5876 3.42413 13.1415 4.19043C14.4429 4.58094 15.3943 5.57501 15.7875 6.76713C15.9605 7.29162 15.6755 7.85705 15.151 8.03005C14.6266 8.20305 14.0611 7.91811 13.8881 7.39362C13.6903 6.79398 13.2152 6.30064 12.5667 6.10605C11.2962 5.72482 10.0111 6.67315 10 8.00375V8.9101C10.1442 9.01061 10.3009 9.13664 10.4571 9.29289C11.007 9.8428 11.5 10.7174 11.5 12C11.5 12.5523 11.0523 13 10.5 13C9.94771 13 9.5 12.5523 9.5 12C9.5 11.2826 9.24298 10.9072 9.04289 10.7071C8.93332 10.5975 8.82478 10.5258 8.74873 10.4835C8.71122 10.4627 8.68357 10.4501 8.67053 10.4445L8.66761 10.4433L8 10.2208V9.5V8V7.99316H8.00002ZM10.1974 22.8827C13.5 23.5 15.6802 21.9767 16.5712 19.3261L19 11L8 22C8 22 9 22.5 10.1974 22.8827Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8802 0.0490061C8.83055 -0.399484 5.22544 2.28056 4.25537 6.03027C7.40915 9.49288 8.20399 15.9871 4.4137 20.1558C4.41524 20.1597 4.41679 20.1636 4.41834 20.1675L2.29297 22.2929L3.70718 23.7071L22.7072 4.70711L21.293 3.29289L19.4654 5.12045C18.4352 2.45838 16.0017 0.394705 12.8802 0.0490061ZM8.00002 7.99316C8.01821 5.33167 10.5876 3.42413 13.1415 4.19043C14.4429 4.58094 15.3943 5.57501 15.7875 6.76713C15.9605 7.29162 15.6755 7.85705 15.151 8.03005C14.6266 8.20305 14.0611 7.91811 13.8881 7.39362C13.6903 6.79398 13.2152 6.30064 12.5667 6.10605C11.2962 5.72482 10.0111 6.67315 10 8.00375V8.9101C10.1442 9.01061 10.3009 9.13664 10.4571 9.29289C11.007 9.8428 11.5 10.7174 11.5 12C11.5 12.5523 11.0523 13 10.5 13C9.94771 13 9.5 12.5523 9.5 12C9.5 11.2826 9.24298 10.9072 9.04289 10.7071C8.93332 10.5975 8.82478 10.5258 8.74873 10.4835C8.71122 10.4627 8.68357 10.4501 8.67053 10.4445L8.66761 10.4433L8 10.2208V9.5V8V7.99316L8.00002 7.99316ZM10.1974 22.8827C13.5 23.5 15.6802 21.9767 16.5712 19.3261L19 11L8 22C8 22 9 22.5 10.1974 22.8827Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Left.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24 13L3.705 13L11 20.5455L9.62545 22L0 12L9.62545 2L11 3.45455L3.705 11L24 11V13Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.79291 11.7929L9.50001 4.08579L10.9142 5.5L5.62133 10.7929L22.2071 10.7929L22.2071 12.7929L5.62133 12.7929L10.9142 18.0858L9.50001 19.5L1.79291 11.7929Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/PensionBagFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.34 1.37199C17.6296 0.648119 17.0162 -0.113964 16.2472 0.0142072L13.3152 0.502868C12.4444 0.647999 11.5556 0.647999 10.6848 0.502868L7.75286 0.0142072C6.98384 -0.113964 6.37044 0.64812 6.65999 1.37199L7.78083 4.1741C9.05144 3.4271 10.5305 3 12.105 3C13.6079 3 15.0257 3.38961 16.2583 4.07643L17.34 1.37199ZM12.105 5C7.56144 5 3.81281 8.55652 3.57401 13.0938L3.31389 18.036C2.50685 18.7679 2 19.8247 2 21C2 22.6569 3.34315 24 5 24H5.2381H19H19.152C19.4482 24 19.7296 23.9409 19.9858 23.8343C21.1584 23.4265 22 22.3115 22 21C22 20.0184 21.6464 19.1194 21.0597 18.4234L20.6214 12.8705C20.2706 8.42698 16.5624 5 12.105 5ZM9 20V9.568H12.084C12.66 9.568 13.1987 9.62667 13.7 9.744C14.1421 9.83806 14.3571 9.99431 14.6577 10.2128C14.698 10.2421 14.7399 10.2725 14.784 10.304C15.1573 10.56 15.4507 10.9067 15.664 11.344C15.888 11.7707 16 12.2987 16 12.928C16 13.536 15.888 14.064 15.664 14.512C15.4507 14.96 15.1573 15.328 14.784 15.616C14.7219 15.6639 14.6645 15.7097 14.6097 15.7535C14.3349 15.9729 14.1251 16.1404 13.716 16.256C13.2253 16.3947 12.7027 16.464 12.148 16.464H11V20H9ZM11 14.592H12.004C13.284 14.592 13.924 14.0373 13.924 12.928C13.924 12.384 13.7533 12 13.412 11.776C13.0707 11.552 12.58 11.44 11.94 11.44H11V14.592Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.34 1.37199C17.6296 0.648119 17.0162 -0.113964 16.2472 0.0142072L13.3152 0.502868C12.4444 0.647999 11.5556 0.647999 10.6848 0.502868L7.75286 0.0142072C6.98384 -0.113964 6.37044 0.64812 6.65999 1.37199L7.78083 4.1741C9.05144 3.4271 10.5305 3 12.105 3C13.6079 3 15.0257 3.38961 16.2583 4.07643L17.34 1.37199ZM12.105 5C7.56144 5 3.81281 8.55652 3.57401 13.0938L3.31389 18.036C2.50685 18.7679 2 19.8247 2 21C2 22.6569 3.34315 24 5 24H5.2381H19H19.152C19.4482 24 19.7296 23.9409 19.9858 23.8343C21.1584 23.4265 22 22.3115 22 21C22 20.0184 21.6464 19.1194 21.0597 18.4234L20.6214 12.8705C20.2706 8.42698 16.5624 5 12.105 5ZM9 20V9.568H12.084C12.66 9.568 13.1987 9.62667 13.7 9.744C14.1421 9.83806 14.3571 9.99431 14.6577 10.2128L14.6577 10.2128C14.698 10.2421 14.7399 10.2725 14.784 10.304C15.1573 10.56 15.4507 10.9067 15.664 11.344C15.888 11.7707 16 12.2987 16 12.928C16 13.536 15.888 14.064 15.664 14.512C15.4507 14.96 15.1573 15.328 14.784 15.616C14.7219 15.6639 14.6645 15.7097 14.6097 15.7535C14.3349 15.9729 14.1251 16.1404 13.716 16.256C13.2253 16.3947 12.7027 16.464 12.148 16.464H11V20H9ZM11 14.592H12.004C13.284 14.592 13.924 14.0373 13.924 12.928C13.924 12.384 13.7533 12 13.412 11.776C13.0707 11.552 12.58 11.44 11.94 11.44H11V14.592Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Place.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C16.4183 0 20 3.59678 20 8.03364L19.9986 8.656C19.9877 10.2346 19.8889 11.2222 19 13L18.8404 13.3053L18.5471 13.8277C17.5369 15.5774 15.3545 18.9682 12 24L9.75465 20.6111L8.17389 18.1892C6.47226 15.5583 5.4143 13.8286 5 13C4 11 4 10 4 8.03364C4 3.59678 7.58172 0 12 0ZM12 2C8.68817 2 6 4.69948 6 8.03364L6.00688 9.018L6.01942 9.41306C6.03322 9.70541 6.05606 9.91825 6.09297 10.1462C6.18594 10.7203 6.38301 11.2939 6.78885 12.1056L6.89278 12.3061L7.09598 12.6738C7.68769 13.7162 8.83368 15.5431 10.5167 18.124L12 20.383L13.7046 17.7844L14.7372 16.1859C15.8756 14.4094 16.6504 13.1445 17.0521 12.4081L17.2111 12.1056C17.617 11.2939 17.8141 10.7203 17.907 10.1462L17.9465 9.85997L17.9656 9.65726C17.9931 9.30283 18 8.8482 18 8.03364C18 4.69948 15.3118 2 12 2ZM12 4C14.2091 4 16 5.79086 16 8C16 10.2091 14.2091 12 12 12C9.79086 12 8 10.2091 8 8C8 5.79086 9.79086 4 12 4ZM12 6C10.8954 6 10 6.89543 10 8C10 9.10457 10.8954 10 12 10C13.1046 10 14 9.10457 14 8C14 6.89543 13.1046 6 12 6Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.24622 13.437C4.25896 9.59623 6.99599 4 11.8617 4C16.7274 4 19.4644 9.59623 16.4772 13.437L11.8617 19.3712L7.24622 13.437ZM11.8617 2C5.33169 2 1.65848 9.5104 5.66752 14.6649L11.8617 22.6288L18.0559 14.6649C22.0649 9.51039 18.3917 2 11.8617 2ZM9.86169 10C9.86169 8.89543 10.7571 8 11.8617 8C12.9663 8 13.8617 8.89543 13.8617 10C13.8617 11.1046 12.9663 12 11.8617 12C10.7571 12 9.86169 11.1046 9.86169 10ZM11.8617 6C9.65256 6 7.86169 7.79086 7.86169 10C7.86169 12.2091 9.65256 14 11.8617 14C14.0708 14 15.8617 12.2091 15.8617 10C15.8617 7.79086 14.0708 6 11.8617 6Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/PlaceFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C16.4183 0 20 3.59678 20 8.03364L19.9986 8.656C19.9877 10.2346 19.8889 11.2222 19 13L18.8404 13.3053L18.5471 13.8277C17.5369 15.5774 15.3545 18.9682 12 24L9.75465 20.6111L8.17389 18.1892C6.47226 15.5583 5.4143 13.8286 5 13C4 11 4 10 4 8.03364C4 3.59678 7.58172 0 12 0ZM12 4C14.2091 4 16 5.79086 16 8C16 10.2091 14.2091 12 12 12C9.79086 12 8 10.2091 8 8C8 5.79086 9.79086 4 12 4Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.66752 14.6649C1.65848 9.5104 5.33169 2 11.8617 2C18.3917 2 22.0649 9.51039 18.0559 14.6649L11.8617 22.6288L5.66752 14.6649ZM11.8617 13C13.5185 13 14.8617 11.6569 14.8617 10C14.8617 8.34315 13.5185 7 11.8617 7C10.2048 7 8.86169 8.34315 8.86169 10C8.86169 11.6569 10.2048 13 11.8617 13Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Right.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13L20.295 13L13 20.5455L14.3746 22L24 12L14.3746 2L13 3.45455L20.295 11L0 11L0 13Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.2071 11.7929L14.5 19.5L13.0858 18.0858L18.3787 12.7929L1.79288 12.7929L1.79288 10.7929L18.3787 10.7929L13.0858 5.5L14.5 4.08579L22.2071 11.7929Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/SelfServiceFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2C0 0.895431 0.895431 0 2 0H22C23.1046 0 24 0.895431 24 2V9C24 10.1046 23.1046 11 22 11H15.873V7.97321C15.873 5.71449 13.9976 4 11.8306 4C9.66355 4 7.78822 5.71449 7.78822 7.97321V11H2C0.89543 11 0 10.1046 0 9V2ZM13.8729 7.97321C13.8729 6.88344 12.9585 6 11.8305 6C10.7025 6 9.78815 6.88344 9.78815 7.97321V15.7649L8.33449 14.8968C7.59156 14.4545 6.42256 14.3456 5.63601 15.1071C4.81668 15.9004 4.81492 17.0483 5.48153 17.8753L10 24H18.5L19.9914 16.9368C20.1172 15.1979 18.8538 13.6637 17.1118 13.4398L13.8729 13.1339V7.97321Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2C0 0.895431 0.895431 0 2 0H22C23.1046 0 24 0.895431 24 2V9C24 10.1046 23.1046 11 22 11H15.873V7.97321C15.873 5.71449 13.9976 4 11.8306 4C9.66355 4 7.78822 5.71449 7.78822 7.97321V11H2C0.89543 11 0 10.1046 0 9V2ZM13.8729 7.97321C13.8729 6.88344 12.9585 6 11.8305 6C10.7025 6 9.78814 6.88344 9.78814 7.97321V15.7649L8.33449 14.8968C7.59156 14.4545 6.42256 14.3456 5.63601 15.1071C4.81668 15.9004 4.81492 17.0483 5.48153 17.8753L10 24H18.5L19.9914 16.9368C20.1172 15.1979 18.8538 13.6637 17.1118 13.4398L13.8729 13.1339V7.97321Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Send.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1L24 12L0 23L3 12L0 1ZM3.055 4.6L4.8 11H13V13H4.8L3.055 19.399L19.199 12L3.055 4.6Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.4622 12L1.53259 2.2535L3.96922 12L1.53259 21.7465L23.4622 12ZM5.78077 11L4.46739 5.7465L18.5378 12L4.46739 18.2535L5.78077 13H12V11H5.78077Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/SendFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12L0 1L2.72727 11H14V13H2.72727L0 23L24 12Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.53259 2.25351L23.4622 12L1.53259 21.7465L3.71922 13H12V11H3.71922L1.53259 2.25351Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Telephone.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.24466 0.874004L12.1931 5.07052C12.8444 5.99759 12.6183 7.27536 11.6881 7.92451L10.846 8.51219C10.3809 8.83676 10.2678 9.47565 10.5935 9.93918L13.5419 14.1357C13.8676 14.5992 14.5086 14.7119 14.9737 14.3873L15.8159 13.7996C16.7461 13.1505 18.0282 13.3758 18.6796 14.3029L21.628 18.4994C22.2793 19.4265 22.0532 20.7042 21.123 21.3534L18.3926 23.2588C16.849 24.336 14.7683 24.2297 13.3433 23.001C11.478 21.3927 9.45947 19.0431 7.2878 15.9521C4.97451 12.6596 3.30417 9.68836 2.27676 7.03843C1.59506 5.28015 2.20463 3.2852 3.75394 2.20403L6.381 0.37077C7.31121 -0.278371 8.59332 -0.0530659 9.24466 0.874004ZM7.56036 2.04938L4.93331 3.88264C4.15865 4.42322 3.85386 5.4207 4.19471 6.29983C5.15627 8.77992 6.74756 11.6105 8.9721 14.7768C11.0543 17.7403 12.9673 19.9672 14.6886 21.4513C15.3566 22.0273 16.3127 22.1099 17.0655 21.6742L17.2132 21.5802L19.9437 19.6748L16.9953 15.4782L16.1531 16.0659C14.8115 17.0022 12.9818 16.7257 11.9745 15.4668L11.8576 15.3111L8.9092 11.1146C7.96976 9.77744 8.24715 7.95395 9.51032 6.95004L9.66661 6.83358L10.5088 6.2459L7.56036 2.04938Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.09973 2.00078C5.8806 1.21926 7.14722 1.2189 7.92853 1.99999L11.6213 5.69167C12.4023 6.47246 12.4026 7.73849 11.6221 8.51972L10.3132 9.82967L14.5675 14.0833L15.8755 12.7742C16.6564 11.9927 17.923 11.9923 18.7043 12.7734L22 16.0681C22.781 16.8489 22.7813 18.1149 22.0008 18.8962L19.8207 21.0781C18.5424 22.3574 16.5745 22.6429 14.9854 21.7796C9.58794 18.8475 5.15423 14.4144 2.22072 9.01778C1.35734 7.42948 1.64136 5.46201 2.91931 4.18299L5.09973 2.00078ZM10.2073 7.10609L6.51452 3.4144L4.33411 5.59662C3.68246 6.24881 3.53746 7.25237 3.97789 8.06261C6.72701 13.12 10.8821 17.2744 15.9401 20.0222C16.7505 20.4625 17.754 20.3169 18.4059 19.6645L20.586 17.4825L17.2903 14.1878L14.5682 16.9122L7.48524 9.83036L10.2073 7.10609Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/TelephoneFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.24466 0.874004L12.1931 5.07052C12.8444 5.99759 12.6183 7.27536 11.6881 7.92451L10.846 8.51219C10.3809 8.83676 10.2678 9.47565 10.5935 9.93918L13.5419 14.1357C13.8676 14.5992 14.5086 14.7119 14.9737 14.3873L15.8159 13.7996C16.7461 13.1505 18.0282 13.3758 18.6796 14.3029L21.628 18.4994C22.2793 19.4265 22.0532 20.7042 21.123 21.3534L18.3926 23.2588C16.849 24.336 14.7683 24.2297 13.3433 23.001C11.478 21.3927 9.45947 19.0431 7.2878 15.9521C4.97451 12.6596 3.30417 9.68836 2.27676 7.03843C1.59506 5.28015 2.20463 3.2852 3.75394 2.20403L6.381 0.37077C7.31121 -0.278371 8.59332 -0.0530659 9.24466 0.874004Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.37475 2.58637C6.15562 1.80485 7.42225 1.8045 8.20356 2.58558L11.8963 6.27727C12.6773 7.05805 12.6777 8.32409 11.8971 9.10531L10.5882 10.4153L14.8425 14.6689L16.1505 13.3598C16.9314 12.5783 18.198 12.5779 18.9793 13.359L22.275 16.6537C23.056 17.4345 23.0564 18.7005 22.2758 19.4818L20.0957 21.6637C18.8174 22.943 16.8496 23.2285 15.2604 22.3652C9.86297 19.4331 5.42925 14.9999 2.49575 9.60337C1.63237 8.01507 1.91638 6.0476 3.19434 4.76859L5.37475 2.58637Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Up.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13 24V3.705L20.5455 11L22 9.62545L12 0L2 9.62545L3.45455 11L11 3.705V24H13Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.58579L19.7071 9.29289L18.2929 10.7071L13 5.41421V22H11V5.41421L5.70711 10.7071L4.29289 9.29289L12 1.58579Z" fill="#262626"/>
 </svg>

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.19.12",
+  "version": "0.19.21",
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -37,7 +37,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "0.6.0",
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.8.17",
+    "@navikt/ds-icons": "^0.8.18",
     "@popperjs/core": "^2.10.1",
     "@radix-ui/react-tabs": "0.1.5",
     "@radix-ui/react-toggle-group": "0.1.5",

@navikt/core/react/src/accordion/AccordionContent.tsx

@@ -1,6 +1,7 @@
 import cl from "classnames";
 import React, { forwardRef, useContext } from "react";
 import { Collapse, UnmountClosed } from "react-collapse";
+import { BodyLong } from "../typography";
 import { AccordionItemContext } from "./AccordionItem";
 
 export interface AccordionContentProps
@@ -35,9 +36,12 @@ const AccordionContent: AccordionContentType = forwardRef(
     return (
       <div ref={ref} aria-labelledby={context.buttonId} {...rest}>
         <CollapseComponent isOpened={context.open}>
-          <div className={cl("navds-accordion__content", className)}>
+          <BodyLong
+            as="div"
+            className={cl("navds-accordion__content", className)}
+          >
             {children}
-          </div>
+          </BodyLong>
         </CollapseComponent>
       </div>
     );

@navikt/core/react/src/accordion/AccordionHeader.tsx

@@ -52,25 +52,15 @@ const AccordionHeader: AccordionHeaderType = forwardRef(
           "navds-heading",
           "navds-heading--small"
         )}
+        type="button"
         onClick={handleClick}
         aria-expanded={context.open}
       >
-        {children}
-        <Expand
-          aria-hidden
-          className={cl("navds-accordion__expand-icon", {
-            "navds-accordion__expand-icon--flip": context.open,
-          })}
-        />
+        <span className="navds-accordion__header-content">{children}</span>
+        <Expand aria-hidden className="navds-accordion__expand-icon" />
         <ExpandFilled
           aria-hidden
-          className={cl(
-            "navds-accordion__expand-icon",
-            "navds-accordion__expand-icon--filled",
-            {
-              "navds-accordion__expand-icon--flip": context.open,
-            }
-          )}
+          className="navds-accordion__expand-icon navds-accordion__expand-icon--filled"
         />
       </button>
     );

@navikt/core/react/src/accordion/AccordionItem.tsx

@@ -37,9 +37,8 @@ export interface AccordionItemContextProps {
   renderContentWhenClosed: boolean;
 }
 
-export const AccordionItemContext = createContext<AccordionItemContextProps | null>(
-  null
-);
+export const AccordionItemContext =
+  createContext<AccordionItemContextProps | null>(null);
 
 const AccordionItem: AccordionItemType = forwardRef(
   (

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

@@ -32,70 +32,70 @@ export interface ButtonProps
   loading?: boolean;
 }
 
-export const Button: OverridableComponent<
-  ButtonProps,
-  HTMLButtonElement
-> = forwardRef(
-  (
-    {
-      as: Component = "button",
-      variant = "primary",
-      className,
-      children,
-      size = "medium",
-      loading = false,
-      disabled,
-      style,
-      ...rest
-    },
-    ref
-  ) => {
-    const buttonRef = useRef<HTMLButtonElement | null>(null);
-    const mergedRef = mergeRefs([buttonRef, ref]);
-    const [widthOverride, setWidthOverride] = useState<number>();
+export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
+  forwardRef(
+    (
+      {
+        as: Component = "button",
+        variant = "primary",
+        className,
+        children,
+        size = "medium",
+        loading = false,
+        disabled,
+        style,
+        ...rest
+      },
+      ref
+    ) => {
+      const buttonRef = useRef<HTMLButtonElement | null>(null);
+      const mergedRef = mergeRefs([buttonRef, ref]);
+      const [widthOverride, setWidthOverride] = useState<number>();
 
-    useClientLayoutEffect(() => {
-      if (loading) {
-        const requestID = window.requestAnimationFrame(() => {
-          setWidthOverride(buttonRef?.current?.getBoundingClientRect()?.width);
-        });
-        return () => {
-          setWidthOverride(undefined);
-          cancelAnimationFrame(requestID);
-        };
-      }
-    }, [loading, children]);
+      useClientLayoutEffect(() => {
+        if (loading) {
+          const requestID = window.requestAnimationFrame(() => {
+            setWidthOverride(
+              buttonRef?.current?.getBoundingClientRect()?.width
+            );
+          });
+          return () => {
+            setWidthOverride(undefined);
+            cancelAnimationFrame(requestID);
+          };
+        }
+      }, [loading, children]);
 
-    return (
-      <Component
-        {...rest}
-        ref={mergedRef}
-        className={cl(
-          className,
-          "navds-button",
-          `navds-button--${variant}`,
-          `navds-button--${size}`,
-          {
-            "navds-button--loading": widthOverride,
-          }
-        )}
-        style={{
-          ...style,
-          width: widthOverride,
-        }}
-        disabled={disabled ?? widthOverride ? true : undefined}
-      >
-        <BodyShort
-          as="span"
-          className="navds-button__inner"
-          size={size === "medium" ? "medium" : "small"}
-          aria-live="polite"
+      return (
+        <Component
+          {...rest}
+          ref={mergedRef}
+          className={cl(
+            className,
+            "navds-button",
+            `navds-button--${variant}`,
+            `navds-button--${size}`,
+            {
+              "navds-button--loading": widthOverride,
+            }
+          )}
+          style={{
+            ...style,
+            width: widthOverride,
+          }}
+          disabled={disabled ?? widthOverride ? true : undefined}
         >
-          {widthOverride ? <Loader size={size} /> : children}
-        </BodyShort>
-      </Component>
-    );
-  }
-);
+          <BodyShort
+            as="span"
+            className="navds-button__inner"
+            size={size === "medium" ? "medium" : "small"}
+            aria-live="polite"
+          >
+            {widthOverride ? <Loader size={size} /> : children}
+          </BodyShort>
+        </Component>
+      );
+    }
+  );
 
 export default Button;

@navikt/core/react/src/form/ConfirmationPanel.test.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import faker from "faker";
+import { ConfirmationPanel } from ".";
+
+test("omits error id from input", async () => {
+  const label = faker.datatype.string();
+
+  const { getByLabelText } = render(
+    <ConfirmationPanel label={label} errorId="wat"></ConfirmationPanel>
+  );
+
+  expect(getByLabelText(label).getAttribute("errorid")).toBeNull();
+});

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

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "classnames";
+import React, { forwardRef } from "react";
 import { BodyLong, Checkbox, CheckboxProps, ErrorMessage } from "..";
 import { useFormField } from "./useFormField";
 
@@ -57,7 +57,12 @@ export const ConfirmationPanel = forwardRef<
           {label}
         </Checkbox>
       </div>
-      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+      <div
+        className="navds-form-field__error"
+        id={errorId}
+        aria-relevant="additions removals"
+        aria-live="polite"
+      >
         {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
       </div>
     </div>

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, SelectHTMLAttributes } from "react";
 import cl from "classnames";
 import { Expand } from "@navikt/ds-icons";
-import { BodyShort, Label, ErrorMessage, omit } from "..";
+import { BodyShort, Label, ErrorMessage, omit, Detail } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 
 export interface SelectProps
@@ -23,6 +23,10 @@ export interface SelectProps
    * If enabled shows the label and description for screenreaders only
    */
   hideLabel?: boolean;
+  /**
+   * Sets inline-style on select wrapper
+   */
+  style?: React.CSSProperties;
 }
 
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(
@@ -43,6 +47,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
       description,
       htmlSize,
       hideLabel = false,
+      style,
       ...rest
     } = props;
 
@@ -53,8 +58,8 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           "navds-form-field",
           `navds-form-field--${size}`,
           {
+            "navds-form-field--disabled": !!inputProps.disabled,
             "navds-select--error": hasError,
-            "navds-select--disabled": !!inputProps.disabled,
           }
         )}
       >
@@ -62,25 +67,40 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           htmlFor={inputProps.id}
           size={size}
           as="label"
-          className={cl("navds-select__label", {
+          className={cl("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
           {label}
         </Label>
         {!!description && (
-          <BodyShort
-            as="div"
-            className={cl("navds-select__description", {
-              "navds-sr-only": hideLabel,
-            })}
-            id={inputDescriptionId}
-            size={size}
-          >
-            {description}
-          </BodyShort>
+          <>
+            {size === "medium" ? (
+              <BodyShort
+                className={cl("navds-form-field__description", {
+                  "navds-sr-only": hideLabel,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {description}
+              </BodyShort>
+            ) : (
+              <Detail
+                className={cl("navds-form-field__description", {
+                  "navds-sr-only": hideLabel,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {description}
+              </Detail>
+            )}
+          </>
         )}
-        <div className="navds-select__container">
+        <div className="navds-select__container" style={style}>
           <select
             {...omit(rest, ["error", "errorId", "size"])}
             {...inputProps}
@@ -96,7 +116,12 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           </select>
           <Expand className="navds-select__chevron" aria-hidden />
         </div>
-        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+        <div
+          className="navds-form-field__error"
+          id={errorId}
+          aria-relevant="additions removals"
+          aria-live="polite"
+        >
           {showErrorMsg && (
             <ErrorMessage size={size}>{props.error}</ErrorMessage>
           )}

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

@@ -63,6 +63,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           {
             "navds-text-field--error": hasError,
             "navds-text-field--disabled": !!inputProps.disabled,
+            "navds-form-field--disabled": !!inputProps.disabled,
           }
         )}
       >
@@ -70,7 +71,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           htmlFor={inputProps.id}
           size={size}
           as="label"
-          className={cl("navds-text-field__label", {
+          className={cl("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
@@ -81,7 +82,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           <>
             {size === "medium" ? (
               <BodyShort
-                className={cl("navds-text-field__description", {
+                className={cl("navds-form-field__description", {
                   "navds-sr-only": hideLabel,
                 })}
                 id={inputDescriptionId}
@@ -92,7 +93,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
               </BodyShort>
             ) : (
               <Detail
-                className={cl("navds-text-field__description", {
+                className={cl("navds-form-field__description", {
                   "navds-sr-only": hideLabel,
                 })}
                 id={inputDescriptionId}
@@ -116,7 +117,12 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           )}
           size={htmlSize}
         />
-        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+        <div
+          className="navds-form-field__error"
+          id={errorId}
+          aria-relevant="additions removals"
+          aria-live="polite"
+        >
           {showErrorMsg && (
             <ErrorMessage size={size}>{props.error}</ErrorMessage>
           )}

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, useState } from "react";
 import cl from "classnames";
 import TextareaAutosize from "@material-ui/core/TextareaAutosize";
-import { BodyShort, Label, ErrorMessage, omit } from "..";
+import { BodyShort, Label, ErrorMessage, omit, Detail } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 import { useId } from "..";
 
@@ -90,8 +90,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           "navds-form-field",
           `navds-form-field--${size}`,
           {
+            "navds-form-field--disabled": !!inputProps.disabled,
             "navds-textarea--error": hasError,
-            "navds-textarea--disabled": !!inputProps.disabled,
             "navds-textarea--resize": resize,
           }
         )}
@@ -100,23 +100,38 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           htmlFor={inputProps.id}
           size={size}
           as="label"
-          className={cl("navds-textarea__label", {
+          className={cl("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
           {label}
         </Label>
         {!!description && (
-          <BodyShort
-            as="div"
-            className={cl("navds-textarea__description", {
-              "navds-sr-only": hideLabel,
-            })}
-            id={inputDescriptionId}
-            size={size}
-          >
-            {description}
-          </BodyShort>
+          <>
+            {size === "medium" ? (
+              <BodyShort
+                className={cl("navds-form-field__description", {
+                  "navds-sr-only": hideLabel,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {description}
+              </BodyShort>
+            ) : (
+              <Detail
+                className={cl("navds-form-field__description", {
+                  "navds-sr-only": hideLabel,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {description}
+              </Detail>
+            )}
+          </>
         )}
         <div className="navds-textarea__wrapper">
           <TextareaAutosize
@@ -144,8 +159,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           {hasMaxLength && (
             <>
               <span id={maxLengthId} className="navds-sr-only">
-                Tekstområde med plass til {maxLength} tegn., Textarea can have{" "}
-                {maxLength} signs.
+                Tekstområde med plass til {maxLength} tegn.
               </span>
               <Counter
                 maxLength={maxLength}
@@ -155,7 +169,12 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             </>
           )}
         </div>
-        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+        <div
+          className="navds-form-field__error"
+          id={errorId}
+          aria-relevant="additions removals"
+          aria-live="polite"
+        >
           {showErrorMsg && (
             <ErrorMessage size={size}>{props.error}</ErrorMessage>
           )}

@navikt/core/react/src/form/checkbox/Checkbox.test.tsx

@@ -6,6 +6,10 @@ import { Checkbox, CheckboxGroup } from ".";
 
 const firstArgumentOfFirstCall = (fn: jest.Mock) => fn.mock.calls[0][0];
 
+test("checkbox with error id does not give type error", () => {
+  <Checkbox errorId="wat">child</Checkbox>;
+});
+
 test("checkbox group chains onChange calls", async () => {
   const onGroupChange = jest.fn();
   const onChange = jest.fn();

@navikt/core/react/src/form/checkbox/Checkbox.tsx

@@ -5,13 +5,17 @@ import { FormFieldProps } from "../useFormField";
 import { BodyShort, Detail, omit } from "../..";
 
 export interface CheckboxProps
-  extends Omit<FormFieldProps, "errorId">,
+  extends FormFieldProps,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
   /**
    * Adds error indication on checkbox
    * @default false
    */
   error?: boolean;
+  /**
+   * Id for error resulting in checkbox having error
+   */
+  errorId?: string;
   /**
    * Checkbox label
    */
@@ -61,6 +65,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             "description",
             "hideLabel",
             "indeterminate",
+            "errorId",
           ])}
           {...inputProps}
           type="checkbox"

@navikt/core/react/src/form/radio/RadioGroup.tsx

@@ -11,9 +11,8 @@ export interface RadioGroupContextProps {
   required?: boolean;
 }
 
-export const RadioGroupContext = React.createContext<RadioGroupContextProps | null>(
-  null
-);
+export const RadioGroupContext =
+  React.createContext<RadioGroupContextProps | null>(null);
 
 export interface RadioGroupProps
   extends Omit<

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

@@ -8,10 +8,9 @@ import React, {
   useState,
 } from "react";
 import mergeRefs from "react-merge-refs";
-import { BodyShort, Label, omit, useEventListener } from "../..";
-import { FormFieldProps } from "../useFormField";
+import { BodyShort, ErrorMessage, Label, omit, useEventListener } from "../..";
+import { FormFieldProps, useFormField } from "../useFormField";
 import SearchButton, { SearchButtonType } from "./SearchButton";
-import { useSearch } from "./useSearch";
 
 export type SearchClearEvent =
   | {
@@ -21,7 +20,7 @@ export type SearchClearEvent =
   | { trigger: "Escape"; event: React.KeyboardEvent<HTMLDivElement> };
 
 export interface SearchProps
-  extends Omit<FormFieldProps, "error" | "errorId">,
+  extends FormFieldProps,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
   children?: React.ReactNode;
   /**
@@ -78,10 +77,14 @@ export const SearchContext = React.createContext<SearchContextProps | null>(
 
 export const Search = forwardRef<HTMLInputElement, SearchProps>(
   (props, ref) => {
-    const { inputProps, size = "medium", inputDescriptionId } = useSearch(
-      props,
-      "searchfield"
-    );
+    const {
+      inputProps,
+      size = "medium",
+      inputDescriptionId,
+      errorId,
+      showErrorMsg,
+      hasError,
+    } = useFormField(props, "searchfield");
 
     const {
       className,
@@ -145,6 +148,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           `navds-form-field--${size}`,
           "navds-search",
           {
+            "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
           }
         )}
@@ -153,7 +157,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           htmlFor={inputProps.id}
           size={size}
           as="label"
-          className={cl("navds-text-field__label", {
+          className={cl("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
@@ -162,7 +166,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         {!!description && (
           <BodyShort
             as="div"
-            className={cl("navds-text-field__description", {
+            className={cl("navds-form-field__description", {
               "navds-sr-only": hideLabel,
             })}
             id={inputDescriptionId}
@@ -178,7 +182,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             )}
             <input
               ref={mergedRef}
-              {...omit(rest, ["size"])}
+              {...omit(rest, ["error", "errorId", "size"])}
               {...inputProps}
               value={value ?? internalValue}
               onChange={(e) => handleChange(e.target.value)}
@@ -216,6 +220,16 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             {children ? children : variant !== "simple" && <SearchButton />}
           </SearchContext.Provider>
         </div>
+        <div
+          className="navds-form-field__error"
+          id={errorId}
+          aria-relevant="additions removals"
+          aria-live="polite"
+        >
+          {showErrorMsg && (
+            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+          )}
+        </div>
       </div>
     );
   }

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

@@ -23,6 +23,11 @@ export default {
         options: ["primary", "secondary", "simple"],
       },
     },
+    error: {
+      control: {
+        type: "text",
+      },
+    },
   },
 } as Meta;
 
@@ -38,6 +43,7 @@ export const Default = (props) => {
         clearButton={props.clearButton}
         variant={props.variant}
         hideLabel={props.hideLabel}
+        error={props.error}
       />
     </div>
   );
@@ -79,6 +85,21 @@ export const Variants = () => (
   </div>
 );
 
+export const ErrorVariants = () => (
+  <div className="rowgap">
+    <div className="colgap">
+      <Search error="errormsg" label="Søk" />
+      <Search error="errormsg" label="Søk" variant="secondary" />
+      <Search error="errormsg" label="Søk" variant="simple" />
+    </div>
+    <div className="colgap" data-theme="dark">
+      <Search error="errormsg" label="Søk" />
+      <Search error="errormsg" label="Søk" variant="secondary" />
+      <Search error="errormsg" label="Søk" variant="simple" />
+    </div>
+  </div>
+);
+
 export const Placeholder = () => (
   <div className="rowgap">
     <div className="colgap">

@navikt/core/react/src/form/search/useSearch.ts

@@ -1,31 +0,0 @@
-import cl from "classnames";
-import { useContext } from "react";
-import { useId } from "../../index";
-import { FieldsetContext } from "../index";
-import { FormFieldProps } from "../useFormField";
-
-export const useSearch = (props: FormFieldProps, prefix: string) => {
-  const { size } = props;
-
-  const fieldset = useContext(FieldsetContext);
-
-  const genId = useId();
-
-  const id = props.id ?? `${prefix}-${genId}`;
-  const inputDescriptionId = `${prefix}-description-${genId}`;
-
-  const disabled = fieldset?.disabled || props.disabled;
-
-  return {
-    inputDescriptionId,
-    size: size ?? fieldset?.size ?? "medium",
-    inputProps: {
-      id,
-      "aria-describedby":
-        cl(props["aria-describedby"], {
-          [inputDescriptionId]: !!props?.description,
-        }) || undefined,
-      disabled,
-    },
-  };
-};

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

@@ -61,8 +61,14 @@ export const Description = () => (
     legend="Mollit eiusmod"
     description="Esse cupidatat reprehenderit est culpa consectetur sit dolor esse."
   >
-    <TextField label="Textfield label" hideLabel />
-    <TextField label="Textfield label" hideLabel />
+    <TextField
+      label="Textfield label"
+      description="Amet quis cillum incididunt "
+    />
+    <TextField
+      label="Textfield label"
+      description="Enim et occaecat voluptate labore sit do exercitation laborum non "
+    />
   </Fieldset>
 );
 

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

@@ -44,6 +44,7 @@ export const Default = (props) => {
 
 Default.args = {
   maxLength: 100,
+  resize: false,
 };
 
 export const Small = () => {

@navikt/core/react/src/link/Link.tsx

@@ -10,11 +10,9 @@ export interface LinkProps
   children: React.ReactNode;
 }
 
-export const Link: OverridableComponent<
-  LinkProps,
-  HTMLAnchorElement
-> = forwardRef(({ as: Component = "a", className, ...rest }, ref) => (
-  <Component {...rest} ref={ref} className={cl("navds-link", className)} />
-));
+export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
+  forwardRef(({ as: Component = "a", className, ...rest }, ref) => (
+    <Component {...rest} ref={ref} className={cl("navds-link", className)} />
+  ));
 
 export default Link;

@navikt/core/react/src/read-more/readmore.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { ReadMore } from ".";
+import { BodyShort } from "..";
 
 export default {
   title: "ds-react/ReadMore",
@@ -24,8 +25,14 @@ export const Default = (props) => {
       header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg"
       {...props}
     >
-      Command station, this is ST 321. Code Clearance Blue. We're starting our
-      approach. Deactivate the security shield.
+      <BodyShort>
+        Command station, this is ST 321. Code Clearance Blue. We're starting our
+        approach. Deactivate the security shield.
+      </BodyShort>
+      <BodyShort>
+        Command station, this is ST 321. Code Clearance Blue. We're starting our
+        approach. Deactivate the security shield.
+      </BodyShort>
     </ReadMore>
   );
 };

@navikt/core/react/src/stepper/Step.tsx

@@ -10,10 +10,10 @@ export interface StepperStepProps
    */
   children: string;
   /**
-   * Handled by Stepper
+   * Handled by Stepper, overwriting may break component logic
    * @private
    */
-  index?: number;
+  unsafe_index?: number;
 }
 
 export interface StepperStepType
@@ -23,33 +23,36 @@ export const StepComponent: OverridableComponent<
   StepperStepProps,
   HTMLAnchorElement
 > = forwardRef(
-  ({ className, children, as: Component = "a", index = 0, ...rest }, ref) => {
+  (
+    { className, children, as: Component = "a", unsafe_index = 0, ...rest },
+    ref
+  ) => {
     const context = useContext(StepperContext);
     if (context === null) {
-      console.error(
-        "<StepIndicator.Step> has to be used within an <StepIndicator>"
-      );
+      console.error("<Stepper.Step> has to be used within <Stepper>");
       return null;
     }
-    const activeStep = context.activeStep === index;
+    const { activeStep } = context;
 
     return (
       <Component
         {...rest}
-        aria-current={Boolean(activeStep)}
+        aria-current={activeStep === unsafe_index}
         ref={ref}
         className={cl("navds-stepper__step", className, {
-          "navds-stepper__step--active": activeStep,
+          "navds-stepper__step--active": activeStep === unsafe_index,
         })}
         onClick={(e) => {
-          context.onStepChange(index);
+          context.onStepChange(unsafe_index + 1);
           rest?.onClick?.(e);
         }}
       >
-        <Label className="navds-stepper__step-number" as="span">
-          {activeStep ? `${index + 1}` : index + 1}
+        <Label className="navds-stepper__circle" as="span" aria-hidden="true">
+          {unsafe_index + 1}
+        </Label>
+        <Label as="span" className="navds-stepper__content">
+          {children}
         </Label>
-        <Label className="navds-stepper__step-label">{children}</Label>
       </Component>
     );
   }

@navikt/core/react/src/stepper/Stepper.tsx

@@ -8,15 +8,18 @@ export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
    */
   children: React.ReactNode;
   /**
-   * Adds classname to wrapper
+   * The direction the component grows.
+   * @default "vertical"
    */
-  className?: string;
+  orientation?: "horizontal" | "vertical";
   /**
-   * Current active step index
+   * Current active step.
+   * @note Stepper index starts at 1, not 0
    */
   activeStep: number;
   /**
-   * Callback for clicked step index
+   * Callback for next activeStep
+   * @note Stepper index starts at 1, not 0
    */
   onStepChange?: (step: number) => void;
 }
@@ -32,6 +35,7 @@ interface StepperContextProps {
   activeStep: number;
   onStepChange: (step: number) => void;
   lastIndex: number;
+  orientation: "horizontal" | "vertical";
 }
 
 export const StepperContext = createContext<StepperContextProps | null>(null);
@@ -41,27 +45,49 @@ export const Stepper: StepperComponent = forwardRef<
   StepperProps
 >(
   (
-    { children, className, activeStep, onStepChange = () => {}, ...rest },
+    {
+      children,
+      className,
+      activeStep,
+      orientation = "vertical",
+      onStepChange = () => {},
+      ...rest
+    },
     ref
   ) => {
+    activeStep = activeStep - 1;
     return (
-      <ol {...rest} ref={ref} className={cl("navds-stepper", className)}>
+      <ol
+        {...rest}
+        ref={ref}
+        className={cl(
+          "navds-stepper",
+          orientation === "horizontal" ? "navds-stepper--horizontal" : "",
+          className
+        )}
+      >
         <StepperContext.Provider
           value={{
             activeStep,
             onStepChange,
             lastIndex: React.Children.count(children),
+            orientation,
           }}
         >
           {React.Children.map(children, (step, index) => {
             return (
               <li
-                className={cl("navds-stepper__step-wrapper")}
+                className={cl("navds-stepper__item")}
                 key={index + (children?.toString?.() ?? "")}
               >
+                <span className="navds-stepper__line navds-stepper__line--1" />
                 {React.isValidElement<StepperStepProps>(step)
-                  ? React.cloneElement(step, { ...step.props, index })
+                  ? React.cloneElement(step, {
+                      ...step.props,
+                      unsafe_index: index,
+                    })
                   : step}
+                <span className="navds-stepper__line navds-stepper__line--2" />
               </li>
             );
           })}

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

@@ -0,0 +1,133 @@
+import { Meta } from "@storybook/react/types-6-0";
+import React, { useState } from "react";
+import Stepper from "./Stepper";
+import { BodyLong } from "..";
+
+export default {
+  title: "ds-react/Stepper",
+  component: Stepper,
+  argTypes: {
+    orientation: {
+      control: {
+        type: "radio",
+        options: ["horizontal", "vertical"],
+      },
+    },
+  },
+} as Meta;
+
+const storyTexts = [
+  "Minimize backwards overflow agile. Horsehead offer commitment to the cause nor copy and paste from stack overflow problem territories, innovation is hot right now for can you slack it to me?. High touch client table the discussion , and get buy-in so manage expectations loop back, please advise soonest. We need a paradigm shift dogpile that, and i need to pee and then go to another meeting for let's prioritize the low-hanging fruit.",
+  "Customer centric sorry i didn't get your email proceduralize, and first-order optimal strategies. I dont care if you got some copy, why you dont use officeipsumcom or something like that ? wheelhouse. Viral engagement new economy, this proposal is a win-win situation which will cause a stellar paradigm shift, and produce a multi-fold increase in deliverables Bob called an all-hands this afternoon. Fire up your browser touch base innovation is hot right now so this medium needs to be more dynamic.",
+  "Touch base define the underlying principles that drive decisions and strategy for your design language. I have zero cycles for this. Cadence social currency, for low engagement execute . Deliverables rehydrate the team or let's circle back to that those options are already baked in with this model teams were able to drive adoption and awareness we need to start advertising on social media circle back. Through the lens of face time.",
+  "Take five, punch the tree, and come back in here with a clear head those options are already baked in with this model ultimate measure of success and we need to crystallize a plan yet open door policy who's responsible for the ask for this request? what do you feel you would bring to the table if you were hired for this position. Wiggle room guerrilla marketing shelfware. Code feature creep can we parallel path lose client to 10:00 meeting hire the best manage expectations root-and-branch review.",
+  "Curate downselect tread it daily cc me on that due diligence, or close the loop. All hands on deck my supervisor didn't like the latest revision you gave me can you switch back to the first revision? ping me or game-plan, yet make it a priority, on this journey win-win. Our competitors are jumping the shark we need to build it so that it scales post launch future-proof can we align on lunch orders. Deliverables message the initiative.",
+  "Out of scope poop, so pre launch. I just wanted to give you a heads-up wiggle room cc me on that I have been doing some research this morning and we need to better, nor dog and pony show prioritize these line items so UX. Big data upstream selling circle back, in an ideal world. Get all your ducks in a row land it in region so code so one-sheet. Action item we need to think big start small and scale fast to energize our clients. Cta due diligence, for this vendor is incompetent nor forcing function and circle back and low engagement.",
+  "Move the needle a loss a day will keep you focus yet can you put it into a banner that is not alarming, but eye catching and not too giant or strategic fit, nor it is all exactly as i said, but i don't like it or streamline. We've bootstrapped the model. This proposal is a win-win situation which will cause a stellar paradigm shift, and produce a multi-fold increase in deliverables the horse is out of the barn usabiltiy, for going forward but going forward.",
+];
+
+export const Default = ({ asButton, ...props }) => {
+  const [activeStep, setActiveStep] = useState(1);
+
+  const newProps = {
+    onClick: (e) => e.preventDefault(),
+    ...(asButton ? { as: "button" } : { href: "#" }),
+  };
+
+  return (
+    <div style={{ display: "flex", gap: "10rem", flexDirection: "column" }}>
+      <Stepper
+        aria-labelledby="stepper-heading"
+        activeStep={activeStep}
+        onStepChange={setActiveStep}
+        orientation="horizontal"
+        {...props}
+      >
+        <Stepper.Step {...newProps}>Start søknad</Stepper.Step>
+        <Stepper.Step {...newProps}>Personopplysninger</Stepper.Step>
+        <Stepper.Step {...newProps}>Saksopplysninger</Stepper.Step>
+        <Stepper.Step {...newProps}>
+          Søknadstekst for en veldig spesifikk prosess i NAV som må beskrives og
+          forklares i sitt fulle i denne labelen
+        </Stepper.Step>
+        <Stepper.Step {...newProps}>Vedlegg</Stepper.Step>
+        <Stepper.Step {...newProps}>Oppsummering</Stepper.Step>
+        <Stepper.Step {...newProps}>Innsending</Stepper.Step>
+      </Stepper>
+      <BodyLong style={{ marginTop: "5rem" }}>
+        {storyTexts[activeStep]}
+      </BodyLong>
+    </div>
+  );
+};
+
+Default.args = {
+  asButton: false,
+};
+
+export const Horizontal = () => {
+  const [activeStep, setActiveStep] = useState(2);
+  const props = { onClick: (e) => e.preventDefault(), href: "#" };
+  return (
+    <Stepper
+      aria-labelledby="stepper-heading"
+      activeStep={activeStep}
+      onStepChange={setActiveStep}
+      orientation="horizontal"
+    >
+      <Stepper.Step {...props}>Start søknad</Stepper.Step>
+      <Stepper.Step {...props}>Personopplysninger</Stepper.Step>
+      <Stepper.Step {...props}>Saksopplysninger</Stepper.Step>
+      <Stepper.Step {...props}>
+        Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
+      </Stepper.Step>
+      <Stepper.Step {...props}>Vedlegg</Stepper.Step>
+      <Stepper.Step {...props}>Oppsummering</Stepper.Step>
+      <Stepper.Step {...props}>Innsending</Stepper.Step>
+    </Stepper>
+  );
+};
+
+export const Vertical = () => {
+  const [activeStep, setActiveStep] = useState(2);
+  const props = { onClick: (e) => e.preventDefault(), href: "#" };
+  return (
+    <Stepper
+      aria-labelledby="stepper-heading"
+      activeStep={activeStep}
+      onStepChange={setActiveStep}
+      orientation="vertical"
+    >
+      <Stepper.Step {...props}>Start søknad</Stepper.Step>
+      <Stepper.Step {...props}>Personopplysninger</Stepper.Step>
+      <Stepper.Step {...props}>Saksopplysninger</Stepper.Step>
+      <Stepper.Step {...props}>
+        Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
+      </Stepper.Step>
+      <Stepper.Step {...props}>Vedlegg</Stepper.Step>
+      <Stepper.Step {...props}>Oppsummering</Stepper.Step>
+      <Stepper.Step {...props}>Innsending</Stepper.Step>
+    </Stepper>
+  );
+};
+
+export const DisplayOnly = () => {
+  const props = { as: "div" };
+  return (
+    <Stepper
+      aria-labelledby="stepper-heading"
+      activeStep={2}
+      orientation="vertical"
+    >
+      <Stepper.Step {...props}>Start søknad</Stepper.Step>
+      <Stepper.Step {...props}>Personopplysninger</Stepper.Step>
+      <Stepper.Step {...props}>Saksopplysninger</Stepper.Step>
+      <Stepper.Step {...props}>
+        Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
+      </Stepper.Step>
+      <Stepper.Step {...props}>Vedlegg</Stepper.Step>
+      <Stepper.Step {...props}>Oppsummering</Stepper.Step>
+      <Stepper.Step {...props}>Innsending</Stepper.Step>
+    </Stepper>
+  );
+};