Version Packages (#1829 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
New/list (#1823 )
2026-10-13 01:02:02 +00:00 · 2023-02-28 15:47:06 +01:00 · 2023-02-28 15:44:13 +01:00 · 2023-02-28 14:59:28 +01:00 · 2023-02-28 14:23:44 +01:00 · 2023-02-28 14:03:10 +01:00
572 changed files with 10562 additions and 28933 deletions
@@ -1,9 +1,6 @@
 {
  "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json",
-  "changelog": [
-    "@changesets/changelog-github",
-    { "repo": "navikt/Designsystemet" }
-  ],
+  "changelog": ["@changesets/changelog-github", { "repo": "navikt/aksel" }],
  "commit": false,
  "fixed": [
    [
@@ -19,7 +16,7 @@
  ],
  "linked": [],
  "access": "public",
-  "baseBranch": "master",
+  "baseBranch": "main",
  "updateInternalDependencies": "patch",
  "ignore": ["shadow-dom", "aksel.nav.no", "@navikt/ds-navno"],

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

 env:
-  IMAGE: ghcr.io/navikt/designsystemet
+  IMAGE: ghcr.io/navikt/aksel

 jobs:
+  snyk-monitor:
+    name: monitor dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Run Snyk to check for vulnerabilities
+        continue-on-error: true
+        uses: snyk/actions/node@master
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
+        with:
+          command: monitor
+          args: --org=designsystemet --severity-threshold=high
+  snyk-test:
+    name: analyze dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Run Snyk to check for vulnerabilities
+        uses: snyk/actions/node@master
+        continue-on-error: true
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
+        with:
+          command: test
+          args: --org=designsystemet --severity-threshold=high
  build_and_deploy:
    name: Build and deploy to dev-gcp
    runs-on: ubuntu-20.04
    steps:
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
        with:
-          node-version: "14"
-      - uses: actions/checkout@v2
-        with:
-          ref: "next"
+          node-version: "16"
+      - uses: actions/checkout@v3
      - name: add tokens to .env
        run: |
          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
@@ -40,11 +66,10 @@ jobs:
      - name: Build application
        run: |
          yarn boot
-          yarn docgen
          yarn workspace aksel.nav.no build:next

      - name: Login to GitHub Container Registry
-        uses: docker/login-action@ab80d026d4753220c4243394c07c7d80f9638d06 # Use commit-sha1 instead of tag for security concerns
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
@@ -2,22 +2,81 @@ name: Deploy aksel.nav.no
 on:
  push:
    branches:
-      - master
+      - main
    paths:
      - "aksel.nav.no/**"

 env:
-  IMAGE: ghcr.io/navikt/designsystemet
+  IMAGE: ghcr.io/navikt/aksel

 jobs:
+  snyk-monitor:
+    name: monitor dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Run Snyk to check for vulnerabilities
+        continue-on-error: true
+        uses: snyk/actions/node@master
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
+        with:
+          command: monitor
+          args: --org=designsystemet --severity-threshold=high
+  snyk-test:
+    name: analyze dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Run Snyk to check for vulnerabilities
+        uses: snyk/actions/node@master
+        continue-on-error: true
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
+        with:
+          command: test
+          args: --org=designsystemet --severity-threshold=high
+  sync_data_with_sanity:
+    name: Update component data
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+      - uses: actions/checkout@v3
+      - name: add tokens to .env
+        run: |
+          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-prod-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-prod-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Run docgen
+        run: |
+          yarn boot
+          yarn docgen
+
+      - name: Update sanity sync
+        run: yarn workspace aksel.nav.no sanity:update
+
  build_and_deploy:
    name: Build and deploy to prod-gcp
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
    steps:
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
        with:
-          node-version: "14"
-      - uses: actions/checkout@v2
+          node-version: "16"
+      - uses: actions/checkout@v3
      - name: add tokens to .env
        run: |
          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
@@ -36,25 +95,17 @@ jobs:
      - name: Install dependencies
        run: yarn

-      - name: build packages
-        run: |
-          yarn boot
-          yarn docgen
+      - name: Build packages
+        run: yarn boot

      - name: Tests
        run: yarn workspace aksel.nav.no test

-      - name: E2E
-        run: NEXT_PUBLIC_TEST=true yarn workspace website e2e
-
-      - name: Update sanity sync
-        run: yarn workspace aksel.nav.no sanity:update
-
      - name: Build application
        run: yarn workspace aksel.nav.no build:next

      - name: Login to GitHub Container Registry
-        uses: docker/login-action@ab80d026d4753220c4243394c07c7d80f9638d06 # Use commit-sha1 instead of tag for security concerns
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
@@ -65,6 +116,13 @@ jobs:
        run: echo "DOCKER_TAG=${{ env.IMAGE }}:${{ env.TAG }}" >> $GITHUB_ENV
      - name: Build docker image
        run: docker build -t ${{ env.DOCKER_TAG }} . -f aksel.nav.no/Dockerfile
+      - name: Wait for e2e-tests to succeed
+        uses: lewagon/wait-on-check-action@v1.2.0
+        with:
+          ref: ${{ github.ref }}
+          check-name: "Smoketest Aksel"
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          wait-interval: 10
      - name: Push docker image
        run: |
          docker push ${{ env.DOCKER_TAG }}
@@ -12,19 +12,19 @@ on:
        default: "false"

 env:
-  IMAGE: ghcr.io/navikt/designsystemet
+  IMAGE: ghcr.io/navikt/aksel

 jobs:
  redeploy:
    name: Redeploy image
    runs-on: ubuntu-20.04
    steps:
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
        with:
-          node-version: "14"
-      - uses: actions/checkout@v2
+          node-version: "16"
+      - uses: actions/checkout@v3
      - name: Login to GitHub Container Registry
-        uses: docker/login-action@ab80d026d4753220c4243394c07c7d80f9638d06 # Use commit-sha1 instead of tag for security concerns
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
@@ -8,10 +8,10 @@ jobs:
  execute:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
        with:
          fetch-depth: 0 # Required to retrieve git history
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
        with:
          node-version: 14

@@ -3,11 +3,11 @@ name: Visual Regression Tests
 on:
  push:
    branches:
-      - "master"
+      - "main"
    paths:
      - "@navikt/**"
  pull_request:
-    branches: [master, next]
+    branches: [main, next]
    paths:
      - "@navikt/**"

@@ -44,10 +44,11 @@ jobs:
        id: chromatic_tests
        continue-on-error: true
        with:
-          autoAcceptChanges: "master"
+          autoAcceptChanges: "main"
          token: ${{ secrets.GITHUB_TOKEN }}
          projectToken: x3xqdfgkujg
          exitZeroOnChanges: false
+          buildScriptName: "build:storybook"
        env:
          STORYBOOK_GITHUB_SHA: ${{ github.sha }}

@@ -74,7 +75,7 @@ jobs:
        with:
          issue-number: ${{ github.event.pull_request.number }}
          comment-author: "github-actions[bot]"
-          body-includes: Chromatic build-output
+          body-includes: github-comment-finder

      - name: Create or update comment
        if: steps.chromatic_tests.outcome == 'success' && !contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'
@@ -83,13 +84,9 @@ jobs:
          comment-id: ${{ steps.fc.outputs.comment-id }}
          issue-number: ${{ github.event.pull_request.number }}
          body: |
-            Chromatic build-output:
+            ### [<img id="github-comment-finder" src="https://raw.githubusercontent.com/storybookjs/brand/main/logo/logo-storybook-inverse.svg" height="32"/>](${{steps.storybook_url.outputs.replaced}})

-            - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
-            - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
-            - :white_check_mark: No changes detected :white_check_mark:
-
-            commit: `${{ steps.vars.outputs.sha_short }}`
+            [${{ steps.vars.outputs.sha_short }}](https://github.com/navikt/aksel/commit/${{ steps.vars.outputs.sha_short }}) | ${{steps.chromatic_tests.outputs.componentCount}} komponenter | ${{steps.chromatic_tests.outputs.specCount}} stories
          edit-mode: replace

      - name: Create or update failed comment
@@ -99,11 +96,9 @@ jobs:
          comment-id: ${{ steps.fc.outputs.comment-id }}
          issue-number: ${{ github.event.pull_request.number }}
          body: |
-            **Chromatic build-output**:
+            ### [<img id="github-comment-finder" src="https://raw.githubusercontent.com/storybookjs/brand/main/logo/logo-storybook-inverse.svg" height="32"/>](${{steps.storybook_url.outputs.replaced}})

-            - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
-            - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
-            - :no_entry_sign: Changes detected :no_entry_sign:, review endringer.
+            ### [Endringer til review](${{steps.chromatic_tests.outputs.url}}): ${{steps.chromatic_tests.outputs.changeCount}}

-            commit: `${{ steps.vars.outputs.sha_short }}`
+            [${{ steps.vars.outputs.sha_short }}](https://github.com/navikt/aksel/commit/${{ steps.vars.outputs.sha_short }}) | ${{steps.chromatic_tests.outputs.componentCount}} komponenter | ${{steps.chromatic_tests.outputs.specCount}} stories
          edit-mode: replace
@@ -3,7 +3,7 @@ name: CI
 on:
  push:
    branches:
-      - master
+      - main
      - next
  pull_request:
  workflow_dispatch:
@@ -13,10 +13,10 @@ name: "CodeQL"

 on:
  push:
-    branches: [master, next]
+    branches: [main, next]
  pull_request:
    # The branches below must be a subset of the branches above
-    branches: [master]
+    branches: [main]
  schedule:
    - cron: "41 8 * * 6"

@@ -1,17 +1,19 @@
 name: E2E / Playwright Tests
 on:
  push:
-    branches: [master, next]
+    branches: [main, next]
    paths:
      - "aksel.nav.no/**"
  pull_request:
-    branches: [master, next]
+    branches: [main, next]
    paths:
      - "aksel.nav.no/**"

 jobs:
  playwright:
    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.30.0-focal
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
@@ -36,15 +38,15 @@ jobs:
      - name: Install dependencies
        run: yarn

-      - name: build packages
+      - name: Build packages
        run: |
          yarn boot
-          yarn docgen

-      - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
+      - name: Build application
+        run: yarn workspace aksel.nav.no build:next
+
      - name: Run Playwright tests
-        run: yarn workspace website e2e:full
+        run: yarn workspace website e2e:ci-full
      - uses: actions/upload-artifact@v3
        if: always()
        with:
@@ -4,7 +4,7 @@ on:
  workflow_dispatch:
  push:
    branches:
-      - "master"
+      - "main"
    paths:
      - "fonts/**"

@@ -3,7 +3,7 @@ name: Release
 on:
  push:
    branches:
-      - master
+      - main
  workflow_dispatch:

 concurrency: ${{ github.workflow }}-${{ github.ref }}
@@ -0,0 +1,49 @@
+name: Smoketest aksel.nav.no
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "aksel.nav.no/**"
+
+env:
+  IMAGE: ghcr.io/navikt/aksel
+
+jobs:
+  smoketest:
+    name: Smoketest Aksel
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.30.0-focal
+    steps:
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+      - uses: actions/checkout@v3
+      - name: add tokens to .env
+        run: |
+          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
+          echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
+          echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-prod-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-prod-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: build packages
+        run: |
+          yarn boot
+
+      - name: Build application
+        run: yarn workspace aksel.nav.no build:next
+
+      - name: E2E smoketest
+        run: yarn workspace website e2e:ci
@@ -0,0 +1,33 @@
+import { loadCsf } from "@storybook/csf-tools";
+import { readFileSync } from "fs";
+
+module.exports = (indexers) => {
+  const csfIndexer = async (fileName: string, opts) => {
+    const code = readFileSync(fileName, "utf-8").toString();
+    return loadCsf(code, { ...opts, fileName }).parse();
+  };
+
+  const exampleIndexer = async (fileName: string, opts) => {
+    let code = readFileSync(fileName, "utf-8").toString();
+
+    code = code.replace("export const args =", "const args =");
+
+    code += `\nexport default { title: "Eksempler/${fileName
+      .split("pages/eksempler/")[1]
+      .replace(".tsx", "")}"  };\n`;
+
+    return loadCsf(code, { ...opts, fileName }).parse();
+  };
+
+  return [
+    ...(indexers || []),
+    {
+      test: /(stories|story)\.[tj]sx?$/,
+      indexer: csfIndexer,
+    },
+    {
+      test: /pages\/eksempler\/|(".+")|(.+.tsx)$/,
+      indexer: exampleIndexer,
+    },
+  ];
+};
@@ -1,15 +1,12 @@
 import { Meta, Canvas } from "@storybook/addon-docs";

-<Meta title="Intro/Velkommen" />
+<Meta title="Intro" />

 # Aksel, NAVs designsystem

- [Dokumentasjon](https://aksel.nav.no/designsystem)
- [Komponenter](https://aksel.nav.no/designsystem/side/oversikt-komponenter)
+- [Dokumentasjon](https://aksel.nav.no/komponenter)

-## Kom i gang
-
-### Kjernepakke
+### Core

 ```bash
 yarn add @navikt/ds-react @navikt/ds-css
@@ -21,7 +18,7 @@ yarn add @navikt/ds-react @navikt/ds-css
 yarn add @navikt/ds-react-internal @navikt/ds-css-internal
 ```

-### Ikonpakke
+### Ikoner

 ```bash
 yarn add @navikt/ds-icons
@@ -19,3 +19,13 @@
 .rowgap-wrap {
  flex-wrap: wrap;
 }
+
+.css-warning {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  border-radius: 6px;
+  padding: 1.5rem;
+  background-color: var(--a-surface-warning-subtle);
+  border: 1px solid var(--a-border-warning);
+}
@@ -0,0 +1,81 @@
+const storyIndexers = require("./indexer");
+
+const path = require("path");
+const { mergeConfig } = require("vite");
+
+module.exports = {
+  storyIndexers,
+  devServer: {
+    stats: "errors-only",
+  },
+  staticDirs: ["./public"],
+
+  stories: () => [
+    "../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+    "./*.stories.mdx",
+    ...(process.env.STORYBOOK_STORIES === "all"
+      ? [
+          "../aksel.nav.no/website/components/**/*.stories.tsx",
+          "../aksel.nav.no/website/pages/eksempler/**/*.tsx",
+        ]
+      : []),
+  ],
+  addons: [
+    "@storybook/addon-a11y",
+    "@whitespace/storybook-addon-html",
+    {
+      name: "@storybook/addon-storysource",
+      options: {
+        loaderOptions: {
+          injectStoryParameters: false,
+        },
+      },
+    },
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        actions: false,
+        controls: {
+          hideNoControlsWarning: true,
+        },
+      },
+    },
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  features: {
+    storyStoreV7: true,
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: false,
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      define: { "process.env": {} },
+      resolve: {
+        alias: [
+          /*
+          // Example
+          {
+            find: "@components",
+            replacement: path.resolve(__dirname, "./src/components"),
+          }, */
+          {
+            find: "components",
+            replacement: path.resolve(
+              __dirname,
+              "../aksel.nav.no/website/components"
+            ),
+          },
+        ],
+      },
+    });
+  },
+};
@@ -1,58 +0,0 @@
-const getStories = () => {
-  return process.env.stories
-    ? [`../@navikt/**/${process.env.stories}.stories.@(js|jsx|ts|tsx|mdx)`]
-    : ["../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)"];
-};
-
-module.exports = {
-  webpackFinal: async (config, { configType }) => {
-    config.devServer = {
-      stats: "errors-only",
-    };
-    return config;
-  },
-  staticDirs: ["./public"],
-  devServer: {
-    stats: "errors-only",
-  },
-  stories: () => [...getStories(), "./*.stories.mdx"],
-  addons: [
-    "@storybook/addon-a11y",
-    "@whitespace/storybook-addon-html",
-    {
-      name: "@storybook/addon-storysource",
-      options: {
-        loaderOptions: {
-          injectStoryParameters: false,
-        },
-      },
-    },
-    {
-      name: "@storybook/addon-essentials",
-      options: {
-        actions: false,
-        controls: {
-          hideNoControlsWarning: true,
-        },
-      },
-    },
-  ],
-  features: {
-    storyStoreV7: true,
-  },
-  core: {
-    builder: {
-      name: "webpack5",
-      options: {
-        lazyCompilation: false,
-        fsCache: true,
-      },
-    },
-  },
-  framework: "@storybook/react",
-  typescript: {
-    check: false,
-    checkOptions: {},
-    reactDocgen: false,
-  },
-};
@@ -1,12 +1,6 @@
 import { addons } from "@storybook/addons";
-import NavTheme from "./theme.js";
-/* import logoUrl from "./public/logo.svg"; */
+import AkselTheme from "./theme.js";

 addons.setConfig({
-  theme: NavTheme,
+  theme: AkselTheme,
 });
-
-/* const link = document.createElement("link");
-link.setAttribute("rel", "shortcut icon");
-link.setAttribute("href", logoUrl);
-document.head.appendChild(link); */
@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>
@@ -3,18 +3,15 @@ import "@navikt/ds-css-internal/index.css";
 import "./layout.css";

 export const parameters = {
-  /* actions: { argTypesRegex: "^on[A-Z].*" }, */
  options: {
    storySort: {
      method: "",
-      order: ["Intro", "ds-icons", "ds-react", ["form"], ["Default"]],
+      order: ["Intro", "ds-react", ["form"], ["Default"], "ds-icons"],
      locales: "",
    },
  },
-  viewMode: "docs",
  layout: "centered",
  backgrounds: {
-    default: "Canvas",
    values: [
      {
        name: "Canvas",
@@ -32,7 +29,6 @@ export const globalTypes = {
  theme: {
    name: "Theme",
    description: "Global theme for components",
-    defaultValue: "light",
    toolbar: {
      icon: "circlehollow",
      items: [
@@ -44,10 +40,24 @@ export const globalTypes = {
  },
 };

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

 export const decorators = [withTheme];
@@ -1,20 +1,38 @@
 <svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="44"
-  height="44"
+  width="119"
+  height="26"
+  viewBox="0 0 119 26"
  fill="none"
-  viewBox="0 0 44 44"
+  xmlns="http://www.w3.org/2000/svg"
 >
  <path
-    fill="rgba(153, 196, 221, 1)"
-    fill-rule="evenodd"
-    d="M9.07 3.03A10.33 10.33 0 0 1 16.37 0h17.3C39.37 0 44 4.62 44 10.33v17.3c0 2.73-1.09 5.36-3.03 7.3l-6.04 6.04a10.33 10.33 0 0 1-7.3 3.03h-17.3C4.63 44 0 39.38 0 33.67v-17.3c0-2.73 1.09-5.36 3.03-7.3l6.04-6.04Z"
-    clip-rule="evenodd"
-  ></path>
+    d="M56.9682 23.3413L48.1959 1.94542C47.9106 1.30354 47.2687 0.839966 46.5199 0.839966C45.8067 0.839966 45.1292 1.30354 44.8795 1.94542L36.1072 23.3413C36.0359 23.5196 36.0002 23.6623 36.0002 23.7692C36.0002 24.3398 36.4638 24.839 37.07 24.839C37.498 24.839 37.9259 24.5537 38.0685 24.1615L40.1724 18.8838H52.903L55.0069 24.1615C55.1496 24.5537 55.5418 24.839 56.0054 24.839C56.6116 24.839 57.0752 24.3398 57.0752 23.7692C57.0752 23.5909 57.0039 23.4483 56.9682 23.3413ZM40.9213 17.0295L46.5199 2.9439L52.1541 17.0295H40.9213Z"
+    fill="#004367"
+  />
+  <path
+    d="M75.0623 23.2343L68.1086 15.3179L74.884 8.93474C75.0623 8.75645 75.1693 8.50683 75.1693 8.29287C75.1693 7.82929 74.8127 7.40137 74.3135 7.40137C74.0995 7.40137 73.8855 7.47269 73.7072 7.61533L63.4729 17.3148V1.76712C63.4729 1.26788 63.045 0.839966 62.5457 0.839966C62.0465 0.839966 61.6186 1.26788 61.6186 1.76712V23.9119C61.6186 24.4111 62.0465 24.839 62.5457 24.839C63.045 24.839 63.4729 24.4111 63.4729 23.9119V19.5614L66.6823 16.5303L73.6003 24.5181C73.7786 24.732 74.0282 24.839 74.3491 24.839C74.884 24.839 75.2763 24.4111 75.2763 23.8762C75.2763 23.6266 75.205 23.4126 75.0623 23.2343Z"
+    fill="#004367"
+  />
+  <path
+    d="M79.0353 22.9491C80.747 24.5181 82.6726 25.16 85.1331 25.16C89.448 25.16 91.5876 22.8777 91.5876 20.0963C91.5876 16.4233 88.2712 15.6031 85.3114 14.8543C82.9222 14.2481 80.7113 13.7132 80.7113 11.7519C80.7113 9.96888 82.3517 8.64947 85.0262 8.64947C86.9518 8.64947 88.5565 9.327 89.6619 10.3968C89.7689 10.5038 89.9829 10.6108 90.1612 10.6108C90.6247 10.6108 90.9813 10.2185 90.9813 9.79058C90.9813 9.5053 90.8744 9.327 90.6961 9.1487C89.4123 7.93627 87.5937 7.08043 85.0262 7.08043C81.1392 7.08043 78.8927 9.22002 78.8927 11.8589C78.8927 15.2109 82.0664 15.9597 84.9548 16.6729C87.4154 17.3148 89.7689 17.9567 89.7689 20.1676C89.7689 22.1645 88.0572 23.5909 85.1688 23.5909C83.0649 23.5909 81.3532 22.7708 80.1408 21.6296C79.9981 21.487 79.8198 21.4157 79.6059 21.4157C79.1066 21.4157 78.7144 21.8079 78.7144 22.3072C78.7144 22.5568 78.857 22.8064 79.0353 22.9491Z"
+    fill="#004367"
+  />
+  <path
+    d="M95.2069 16.1024C95.2069 21.4157 98.8086 25.16 103.837 25.16C106.404 25.16 108.365 24.3398 110.077 22.8421C110.255 22.6638 110.362 22.4855 110.362 22.2359C110.362 21.7723 110.041 21.4513 109.614 21.4513C109.435 21.4513 109.257 21.487 109.15 21.594C107.688 22.9134 105.941 23.5553 103.979 23.5553C99.914 23.5553 97.4179 20.4529 97.2396 16.7086H110.541C111.254 16.7086 111.646 16.3163 111.646 15.6745C111.646 11.2526 108.758 7.08043 103.516 7.08043C98.7373 7.08043 95.2069 11.11 95.2069 16.1024ZM103.48 8.68513C107.795 8.68513 109.72 12.3224 109.756 15.2465H97.2396C97.3822 12.2511 99.4148 8.68513 103.48 8.68513Z"
+    fill="#004367"
+  />
+  <path
+    d="M117.365 24.839C117.865 24.839 118.293 24.4111 118.293 23.9119V1.76712C118.293 1.26788 117.865 0.839966 117.365 0.839966C116.866 0.839966 116.438 1.26788 116.438 1.76712V23.9119C116.438 24.4111 116.866 24.839 117.365 24.839Z"
+    fill="#004367"
+  />
  <path
-    fill="rgba(0, 36, 58, 1)"
    fill-rule="evenodd"
-    d="M12.96 6.92a4.82 4.82 0 0 1 3.42-1.42h17.29a4.83 4.83 0 0 1 4.83 4.83v17.29a4.8 4.8 0 0 1-1.42 3.42l-.37.37-6.65 6.65a1.5 1.5 0 1 1-2.12-2.12l6.64-6.64v-.01c.72-.72.72-1.87 0-2.59L17.3 9.42a1.83 1.83 0 0 0-2.6 0l-6.64 6.64a1.5 1.5 0 1 1-2.12-2.12l7.02-7.02Zm22.54 3.41v13.05L20.62 8.5h13.05c1 0 1.83.82 1.83 1.83ZM20.06 26.06a1.5 1.5 0 0 0-2.12-2.12l-11 11a1.5 1.5 0 1 0 2.12 2.12l11-11Z"
    clip-rule="evenodd"
-  ></path>
+    d="M0.292684 8.54331C-0.0977248 8.15267 -0.0975372 7.5195 0.293103 7.1291L5.44967 1.97558C5.47463 1.95063 5.4999 1.92606 5.52546 1.90187L5.52289 1.8993C6.03155 1.39065 6.65771 1.07111 7.314 0.9407C7.59976 0.874273 7.89433 0.839967 8.19243 0.839967L20.12 0.839966C22.2629 0.839967 24 2.5771 24 4.71997V16.6435C24 16.9198 23.9705 17.1931 23.9133 17.4591C23.7914 18.1347 23.4693 18.7813 22.9471 19.3035L22.9458 19.3022C22.9189 19.3309 22.8915 19.3592 22.8636 19.3871L17.7071 24.5435C17.3166 24.934 16.6834 24.934 16.2929 24.5435C15.9024 24.153 15.9024 23.5198 16.2929 23.1293L21.4494 17.9728C21.6986 17.7236 21.8706 17.4116 21.9501 17.074C22.0233 16.6182 21.8843 16.1349 21.5329 15.7835L9.06289 3.31352C8.70098 2.95161 8.20044 2.81283 7.73221 2.89716C7.40619 2.97949 7.10531 3.14852 6.86347 3.39021L1.7069 8.54373C1.31626 8.93414 0.683092 8.93395 0.292684 8.54331ZM11.4178 2.83997L22 13.4222V4.71997C22 3.68167 21.1583 2.83997 20.12 2.83997L11.4178 2.83997Z"
+    fill="#004367"
+  />
+  <path
+    d="M0.292893 24.5435C-0.0976311 24.153 -0.0976311 23.5198 0.292893 23.1293L9.29289 14.1293C9.68342 13.7388 10.3166 13.7388 10.7071 14.1293C11.0976 14.5198 11.0976 15.153 10.7071 15.5435L1.70711 24.5435C1.31658 24.934 0.683417 24.934 0.292893 24.5435Z"
+    fill="#004367"
+  />
 </svg>
@@ -1,8 +1,8 @@
 import { create } from "@storybook/theming";
-/* import logoUrl from "./public/logo.svg"; */
+import logoUrl from "./public/logo.svg";

 export default create({
-  /* brandImage: process.env.NODE_ENV === "production" ? logoUrl : "/logo.svg", */
+  brandImage: logoUrl,
  base: "light",
  // Typography
  fontBase: '"Source Sans Pro", sans-serif',
@@ -1,25 +0,0 @@
-const path = require("path");
-
-module.exports = (baseConfig) => {
-  baseConfig.config.module.rules.push({
-    test: /\.css$/,
-    use: ["style-loader", "css-loader"],
-    include: [
-      path.resolve(__dirname, "../node_modules/@navikt/core/css/index.css"),
-      path.resolve(__dirname, "../node_modules/@navikt/internal/css/index.css"),
-    ],
-  });
-  baseConfig.config.resolve.alias = {
-    ...baseConfig.config.resolve.alias,
-    "./normalize.css": path.resolve(
-      __dirname,
-      "../node_modules/normalize.css/normalize.css"
-    ),
-    "./@navikt/ds-tokens": path.resolve(
-      __dirname,
-      "../node_modules/@navikt/ds-tokens/dist/tokens.css"
-    ),
-  };
-
-  return baseConfig.config;
-};
@@ -1,5 +1,25 @@
 # @navikt/ds-codemod

+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+## 2.3.1
+
+## 2.3.0
+
+## 2.2.0
+
+## 2.1.7
+
+## 2.1.6
+
 ## 2.1.5

 ## 2.1.4
@@ -52,7 +72,7 @@

 ### Major Changes

- [`6b96e4833`](https://github.com/navikt/Designsystemet/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
+- [`6b96e4833`](https://github.com/navikt/aksel/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading

 ## 1.5.10

@@ -90,6 +110,6 @@

 ### Patch Changes

- [`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
+- [`40f0b3340`](https://github.com/navikt/aksel/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag

 ## 1.3.38
@@ -160,7 +160,7 @@ This codemod should only be ran once, since the size-scale will keep decreasing

 ## License

-[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)

 #

@@ -6,7 +6,7 @@ export const cliConfig = createCLIConfig({
    {
      name: "migration",
      description:
-        "One of the choices from https://github.com/navikt/Designsystemet/blob/master/%40navikt/codemod/README.md",
+        "One of the choices from https://github.com/navikt/aksel/blob/main/%40navikt/codemod/README.md",
    },
    {
      name: "path",
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-codemod",
-  "version": "2.1.5",
+  "version": "2.4.2",
  "description": "Aksel codemods for NAVs designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -28,10 +28,10 @@
  "bin": "./bin/ds-codemod.js",
  "repository": {
    "type": "git",
-    "url": "git+https://github.com/navikt/Designsystemet.git",
+    "url": "git+https://github.com/navikt/aksel.git",
    "directory": "@navikt/codemod"
  },
-  "homepage": "https://github.com/navikt/Designsystemet/tree/master/@navikt/codemod",
+  "homepage": "https://github.com/navikt/aksel/tree/main/@navikt/codemod",
  "dependencies": {
    "chalk": "4.1.0",
    "cheerio": "1.0.0-rc.9",
@@ -29,10 +29,9 @@ function App() {

 ## Learn more

- [Designsystem documentation](https://aksel.nav.no/designsystem)
- [Component-docs](https://aksel.nav.no/designsystem/side/oversikt-komponenter)
- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/)
+- [Docs](https://aksel.nav.no/komponenter)
+- [Storybook](https://aksel.nav.no/storybook/)

 ## License

-[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
@@ -12,7 +12,7 @@
  ],
  "repository": {
    "type": "git",
-    "url": "git+https://github.com/navikt/Designsystemet.git"
+    "url": "git+https://github.com/navikt/aksel.git"
  },
  "sideEffects": false,
  "main": "./cjs/index.js",
@@ -39,8 +39,8 @@
    "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.1.5",
-    "@navikt/ds-react": "^2.1.5",
+    "@navikt/ds-icons": "^2.4.2",
+    "@navikt/ds-react": "^2.4.2",
    "clsx": "^1.1.1"
  },
  "devDependencies": {
@@ -15,8 +15,10 @@ export default {
  },
 };

-export const Default = (props) => <PageHeader>{props.children}</PageHeader>;
+export const Default = {
+  render: (props) => <PageHeader>{props.children}</PageHeader>,

-Default.args = {
-  children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+  args: {
+    children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+  },
 };
@@ -1,5 +1,45 @@
 # @navikt/ds-css

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

 ## 2.1.4
@@ -10,7 +50,7 @@

 ### Patch Changes

- [`62f36da5e`](https://github.com/navikt/Designsystemet/commit/62f36da5e74fc7f53414d42b310c3b57597795bc) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Small textfield har nå 8px horisontal padding (4px før)
+- [`62f36da5e`](https://github.com/navikt/aksel/commit/62f36da5e74fc7f53414d42b310c3b57597795bc) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Small textfield har nå 8px horisontal padding (4px før)

 ## 2.1.1

@@ -26,7 +66,7 @@

 ### Patch Changes

- [#1748](https://github.com/navikt/Designsystemet/pull/1748) [`22dfd8e60`](https://github.com/navikt/Designsystemet/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
+- [#1748](https://github.com/navikt/aksel/pull/1748) [`22dfd8e60`](https://github.com/navikt/aksel/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.

 ## 2.0.14

@@ -36,7 +76,7 @@

 ### Patch Changes

- [#1737](https://github.com/navikt/Designsystemet/pull/1737) [`8a1ef5e7e`](https://github.com/navikt/Designsystemet/commit/8a1ef5e7e2c066cb80c13e14329e1585e2c427f8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset default visuell error-state for radio
+- [#1737](https://github.com/navikt/aksel/pull/1737) [`8a1ef5e7e`](https://github.com/navikt/aksel/commit/8a1ef5e7e2c066cb80c13e14329e1585e2c427f8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset default visuell error-state for radio

 ## 2.0.11

@@ -66,13 +106,13 @@

 ### Patch Changes

- [`e8007328d`](https://github.com/navikt/Designsystemet/commit/e8007328db3f6d5be696cf24f03304c79be0f3f7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bugfixer ved bruk av tokens
+- [`e8007328d`](https://github.com/navikt/aksel/commit/e8007328db3f6d5be696cf24f03304c79be0f3f7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bugfixer ved bruk av tokens

 ## 2.0.0

 ### Major Changes

- [`6b96e4833`](https://github.com/navikt/Designsystemet/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
+- [`6b96e4833`](https://github.com/navikt/aksel/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading

 ## 1.5.10

@@ -94,7 +134,7 @@

 ### Patch Changes

- [#1709](https://github.com/navikt/Designsystemet/pull/1709) [`77302a30b`](https://github.com/navikt/Designsystemet/commit/77302a30b8eef8dc00b2d2e9c904a3f57da81a11) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner
+- [#1709](https://github.com/navikt/aksel/pull/1709) [`77302a30b`](https://github.com/navikt/aksel/commit/77302a30b8eef8dc00b2d2e9c904a3f57da81a11) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner

 ## 1.5.3

@@ -118,9 +158,9 @@

 ### Minor Changes

- [#1684](https://github.com/navikt/Designsystemet/pull/1684) [`e19bf67b3`](https://github.com/navikt/Designsystemet/commit/e19bf67b337dea39989c68b5e9c2591cf0d5b40f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Oppdaterte tag-varianter
+- [#1684](https://github.com/navikt/aksel/pull/1684) [`e19bf67b3`](https://github.com/navikt/aksel/commit/e19bf67b337dea39989c68b5e9c2591cf0d5b40f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Oppdaterte tag-varianter

- [#1668](https://github.com/navikt/Designsystemet/pull/1668) [`97c5f60e9`](https://github.com/navikt/Designsystemet/commit/97c5f60e9111da7e08f55c8d0aa29581f0a9b1ca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Chips komponent :sparkles:
+- [#1668](https://github.com/navikt/aksel/pull/1668) [`97c5f60e9`](https://github.com/navikt/aksel/commit/97c5f60e9111da7e08f55c8d0aa29581f0a9b1ca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Chips komponent :sparkles:

 ## 1.4.4

@@ -136,7 +176,7 @@

 ### Patch Changes

- [`3c08651df`](https://github.com/navikt/Designsystemet/commit/3c08651df28c3e19dd8c8a7a1d0032200bec473d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Date-komponenter følger språkrådets dato-formatering for måneder.
+- [`3c08651df`](https://github.com/navikt/aksel/commit/3c08651df28c3e19dd8c8a7a1d0032200bec473d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Date-komponenter følger språkrådets dato-formatering for måneder.

 ## 1.4.0

@@ -144,6 +184,6 @@

 ### Patch Changes

- [`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
+- [`40f0b3340`](https://github.com/navikt/aksel/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag

 ## 1.3.38
@@ -34,10 +34,10 @@ But you can import it in a .css-file

 ## Learn more

- [Designsystem documentation](https://aksel.nav.no/designsystem)
- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/)
- [ds-react README](https://github.com/navikt/Designsystemet/blob/master/%40navikt/core/react/README.md)
+- [Docs](https://aksel.nav.no/komponenter)
+- [Storybook](https://aksel.nav.no/storybook/)
+- [ds-react README](https://github.com/navikt/aksel/blob/main/%40navikt/core/react/README.md)

 ## License

-[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
@@ -14,7 +14,7 @@
  background: transparent;
  cursor: pointer;
  border: none;
-  border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-strong));
+  border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-divider));
 }

 .navds-accordion__header:focus {
@@ -24,7 +24,7 @@

 .navds-accordion__header:hover {
  color: var(--ac-accordion-header-text-hover, var(--a-text-action-on-action-subtle));
-  border-color: var(--ac-accordion-header-border-hover, var(--a-border-strong));
+  border-color: var(--ac-accordion-header-border-hover, var(--a-border-default));
 }

 .navds-accordion__header-content {
@@ -39,11 +39,11 @@

 .navds-accordion__content {
  padding: var(--a-spacing-3) var(--a-spacing-3) 18px;
-  border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-strong));
+  border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-divider));
 }

 .navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
-  border-color: var(--ac-accordion-content-border-open, var(--a-border-strong));
+  border-color: var(--ac-accordion-content-border-open, var(--a-border-default));
 }

 .navds-accordion__expand-icon {
@@ -24,6 +24,7 @@
  font-size: 1.5rem;
  align-self: flex-start;
  height: var(--a-font-line-height-xlarge);
+  background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
 }

 .navds-alert--small > .navds-alert__icon {
@@ -41,6 +42,10 @@
  background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
 }

+.navds-alert--warning > .navds-alert__icon {
+  background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 32%, 0, transparent);
+}
+
 .navds-alert--info {
  border-color: var(--ac-alert-info-border, var(--a-border-info));
  background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));
@@ -112,13 +112,39 @@
  background-color: var(--ac-button-primary-bg, var(--a-surface-action));
 }

+/*************************
+ * .navds-button--primary-neutral *
+ *************************/
+
+.navds-button--primary-neutral {
+  background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
+  color: var(--ac-button-primary-neutral-text, var(--a-text-on-neutral));
+}
+
+.navds-button--primary-neutral:hover {
+  background-color: var(--ac-button-primary-neutral-hover-bg, var(--a-surface-neutral-hover));
+}
+
+.navds-button--primary-neutral:active {
+  background-color: var(--ac-button-primary-neutral-active-bg, var(--a-surface-neutral-active));
+}
+
+.navds-button--primary-neutral:focus {
+  box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+}
+
+.navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
+}
+
 /**************************
 * .navds-button--secondary *
 **************************/

 .navds-button--secondary {
  color: var(--ac-button-secondary-text, var(--a-text-action));
-  background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
+  background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
 }

@@ -144,10 +170,47 @@
 .navds-button--secondary:where(:disabled, .navds-button--disabled),
 .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
  color: var(--ac-button-secondary-text, var(--a-text-action));
-  background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
+  background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
 }

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

+/****************************
+ * .navds-button--tertiary-neutral *
+ ****************************/
+
+.navds-button--tertiary-neutral {
+  color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
+}
+
+.navds-button--tertiary-neutral:hover {
+  color: var(--ac-button-tertiary-neutral-hover-text, var(--a-text-default));
+  background-color: var(--ac-button-tertiary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-button--tertiary-neutral:focus {
+  box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+}
+
+.navds-button--tertiary-neutral:active {
+  color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
+  background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
+  box-shadow: inset 0 0 0 1px var(--a-surface-default);
+}
+
+.navds-button--tertiary-neutral:active:hover {
+  background-color: var(--ac-button-tertiary-neutral-active-hover-bg, var(--a-surface-neutral-active));
+}
+
+.navds-button--tertiary-neutral:active:focus {
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+}
+
+.navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
+  background: none;
+  box-shadow: none;
+}
+
 /*************************
 * .navds-button--danger *
 *************************/
@@ -28,7 +28,7 @@
 .navds-radio__label::before {
  content: "";
  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-strong));
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--a-border-radius-medium);
@@ -67,7 +67,7 @@

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

 .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
@@ -2,7 +2,7 @@
  appearance: none;
  background-color: var(--ac-select-bg, var(--a-surface-default));
  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-select-border, var(--a-border-strong));
+  border: 1px solid var(--ac-select-border, var(--a-border-default));
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
@@ -25,7 +25,6 @@
  position: relative;
  display: flex;
  width: 100%;
-  align-items: center;
  color: var(--a-text-default);
 }

@@ -34,12 +33,12 @@
  font-size: 1rem;
  right: 0.5rem;
  pointer-events: none;
+  align-self: center;
 }

 .navds-form-field--small .navds-select__input {
  min-height: 32px;
-  padding: 0.25rem;
-  padding-right: 2rem;
+  padding: 0 2rem 0 0.25rem;
 }

 /**
@@ -52,7 +51,7 @@

 .navds-select__input:disabled {
  background-color: var(--ac-select-bg, var(--a-surface-default));
-  border: 1px solid var(--ac-select-border, var(--a-border-strong));
+  border: 1px solid var(--ac-select-border, var(--a-border-default));
  box-shadow: none;
  cursor: not-allowed;
 }
@@ -63,7 +63,7 @@
 }

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

 .navds-textarea--resize .navds-textarea__input {
@@ -26,3 +26,4 @@
@import "stepper.css";
@import "table.css";
@import "tabs.css";
+@import "list.css";
@@ -6,12 +6,8 @@
  gap: var(--a-spacing-1);
 }

-.navds-alert--info .navds-link {
-  color: var(--a-text-default);
-}
-
-.navds-alert--error .navds-link,
-.navds-confirmation-panel--error .navds-link {
+.navds-alert .navds-link,
+.navds-confirmation-panel .navds-link {
  color: var(--a-text-default);
 }

@@ -0,0 +1,66 @@
+.navds-list ul,
+.navds-list ol {
+  padding: 0;
+}
+
+.navds-list--nested {
+  margin: var(--a-spacing-4) 0 var(--a-spacing-8) 0;
+}
+
+.navds-list li:not(.navds-list__item--noMargin) {
+  margin-bottom: var(--a-spacing-5);
+}
+
+.navds-list:last-child > ul > li:last-child,
+.navds-list:last-child > ol > li:last-child {
+  margin-bottom: 0;
+}
+
+.navds-list ul .navds-list__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--a-spacing-3);
+  padding-left: 0;
+}
+
+.navds-list ul .navds-list__item::marker {
+  content: none;
+}
+
+.navds-list ol .navds-list__item-marker--icon {
+  grid-column: 1 / 2;
+  display: flex;
+}
+
+.navds-list .navds-list__item-marker--bullet {
+  display: flex;
+  margin-top: 6px;
+  grid-column: 1 / 2;
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.navds-list__item-marker--icon {
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.navds-list ul .navds-list__item-content {
+  grid-column: 2 / 3;
+}
+
+.navds-list ol {
+  padding-left: var(--a-spacing-2);
+}
+
+.navds-list ol li {
+  padding-left: var(--a-spacing-1);
+  margin-left: var(--a-spacing-2);
+}
+
+.navds-list ol li::marker {
+  font-weight: var(--a-font-weight-bold);
+  font-size: var(--a-font-size-medium);
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "2.1.5",
+  "version": "2.4.2",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -12,7 +12,7 @@
  },
  "repository": {
    "type": "git",
-    "url": "git+https://github.com/navikt/Designsystemet.git"
+    "url": "git+https://github.com/navikt/aksel.git"
  },
  "main": "./dist/index.css",
  "scripts": {
@@ -20,7 +20,7 @@
    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^2.1.5",
+    "@navikt/ds-tokens": "^2.4.2",
    "normalize.css": "^8.0.1",
    "postcss": "^8.4.0",
    "postcss-cli": "^9.0.0",
@@ -6,7 +6,7 @@

 .navds-toggle-group {
  border-radius: 9px;
-  background-color: var(--ac-toggle-group-bg, var(--a-surface-default));
+  background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
  padding: calc(var(--a-spacing-1) + 1px);
  gap: var(--a-spacing-1);
@@ -15,6 +15,11 @@
  grid-auto-columns: 1fr;
 }

+.navds-toggle-group--neutral {
+  background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
+}
+
 .navds-toggle-group__button {
  display: inline-flex;
  align-items: center;
@@ -23,17 +28,27 @@
  min-height: 48px;
  border: none;
  cursor: pointer;
-  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-default));
+  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
  color: var(--ac-toggle-group-button-text, var(--a-text-default));
  border-radius: var(--a-border-radius-medium);
  min-width: fit-content;
 }

+.navds-toggle-group--neutral > .navds-toggle-group__button {
+  background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent));
+  color: var(--ac-toggle-group-button-neutral-text, var(c));
+}
+
 .navds-toggle-group__button:hover {
  background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
  color: var(--ac-toggle-group-button-hover-text, var(--a-text-action-on-action-subtle));
 }

+.navds-toggle-group--neutral > .navds-toggle-group__button:hover {
+  background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+  color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
+}
+
 .navds-toggle-group__button:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
@@ -43,6 +58,11 @@
  box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
 }

+.navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
+  box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
+    0 0 0 4px var(--a-border-focus);
+}
+
 .navds-toggle-group__button-inner {
  display: flex;
  align-items: center;
@@ -59,6 +79,12 @@
  color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
 }

+.navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
+.navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
+  background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral));
+  color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
+}
+
 .navds-toggle-group--small > .navds-toggle-group__button {
  padding: 0.375rem;
  min-height: 32px;
@@ -10,13 +10,13 @@
    "--ac-alert-success-bg": "--a-surface-success-subtle"
  },
  "accordion": {
-    "--ac-accordion-header-border": "--a-border-strong",
+    "--ac-accordion-header-border": "--a-border-divider",
    "--ac-accordion-header-text-hover": "--a-text-action-on-action-subtle",
-    "--ac-accordion-header-border-hover": "--a-border-strong",
+    "--ac-accordion-header-border-hover": "--a-border-default",
    "--ac-accordion-item-bg-open": "--a-surface-action-subtle",
    "--ac-accordion-item-border-open": "--a-surface-action-subtle",
-    "--ac-accordion-content-border": "--a-border-strong",
-    "--ac-accordion-content-border-open": "--a-border-strong"
+    "--ac-accordion-content-border": "--a-border-divider",
+    "--ac-accordion-content-border-open": "--a-border-default"
  },
  "button": {
    "--ac-button-primary-bg": "--a-surface-action",
@@ -25,7 +25,7 @@
    "--ac-button-primary-active-bg": "--a-surface-action-active",
    "--ac-button-primary-focus-border": "--a-surface-default",
    "--ac-button-secondary-text": "--a-text-action",
-    "--ac-button-secondary-bg": "--a-surface-default",
+    "--ac-button-secondary-bg": "--a-surface-transparent",
    "--ac-button-secondary-border": "--a-border-action",
    "--ac-button-secondary-hover-text": "--a-text-action-on-action-subtle",
    "--ac-button-secondary-hover-bg": "--a-surface-action-subtle-hover",
@@ -45,7 +45,27 @@
    "--ac-button-danger-hover-bg": "--a-surface-danger-hover",
    "--ac-button-danger-active-bg": "--a-surface-danger-active",
    "--ac-button-loader-stroke": "currentColor",
-    "--ac-button-primary-loader-stroke-bg": "rgb(255 255 255 / 0.3)"
+    "--ac-button-primary-loader-stroke-bg": "rgb(255 255 255 / 0.3)",
+    "--ac-button-primary-neutral-bg": "--a-surface-neutral",
+    "--ac-button-primary-neutral-text": "--a-text-on-neutral",
+    "--ac-button-primary-neutral-hover-bg": "--a-surface-neutral-hover",
+    "--ac-button-primary-neutral-active-bg": "--a-surface-neutral-active",
+    "--ac-button-primary-neutral-focus-border": "--a-surface-default",
+    "--ac-button-secondary-neutral-text": "--a-text-default",
+    "--ac-button-secondary-neutral-bg": "--a-surface-transparent",
+    "--ac-button-secondary-neutral-border": "--a-border-strong",
+    "--ac-button-secondary-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-button-secondary-neutral-focus-border": "--a-border-stron",
+    "--ac-button-secondary-neutral-active-text": "--a-text-on-neutral",
+    "--ac-button-secondary-neutral-active-bg": "--a-surface-neutral-active",
+    "--ac-button-secondary-neutral-active-focus-border": "--a-surface-default",
+    "--ac-button-tertiary-neutral-text": "--a-text-default",
+    "--ac-button-tertiary-neutral-hover-text": "--a-text-default",
+    "--ac-button-tertiary-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-button-tertiary-neutral-focus-border": "--a-border-stron",
+    "--ac-button-tertiary-neutral-active-text": "--a-text-on-neutral",
+    "--ac-button-tertiary-neutral-active-bg": "--a-surface-neutral-active",
+    "--ac-button-tertiary-neutral-active-hover-bg": "--a-surface-neutral-active"
  },
  "chat": {
    "--ac-chat-avatar-bg": "--a-bg-subtle",
@@ -109,6 +129,12 @@
    "--ac-link-active-bg": "--a-border-focus",
    "--ac-link-active-border": "--a-border-focus"
  },
+  "list": {
+    "--ac-list-marker-ul-color": "--ac-list-marker-color",
+    "--ac-list-marker-icon-color": "--ac-list-marker-color",
+    "--ac-list-marker-ol-color": "--ac-list-marker-color",
+    "--ac-list-marker-color": "--a-icon-default"
+  },
  "loader": {
    "--ac-loader-stroke": "--a-border-default",
    "--ac-loader-stroke-bg": "--a-surface-active",
@@ -221,14 +247,20 @@
    "--ac-tag-alt-3-filled-text": "--a-text-on-alt-3"
  },
  "togglegroup": {
-    "--ac-toggle-group-bg": "--a-surface-default",
+    "--ac-toggle-group-bg": "--a-surface-transparent",
    "--ac-toggle-group-border": "--a-border-default",
-    "--ac-toggle-group-button-bg": "--a-surface-default",
+    "--ac-toggle-group-button-bg": "--a-surface-transparent",
    "--ac-toggle-group-button-text": "--a-text-default",
    "--ac-toggle-group-button-hover-bg": "--a-surface-action-subtle",
    "--ac-toggle-group-button-hover-text": "--a-text-action-on-action-subtle",
    "--ac-toggle-group-selected-bg": "--a-surface-action-selected",
-    "--ac-toggle-group-selected-text": "--a-text-on-action"
+    "--ac-toggle-group-selected-text": "--a-text-on-action",
+    "--ac-toggle-group-button-neutral-bg": "--a-surface-transparent",
+    "--ac-toggle-group-button-neutral-text": "--ac-toggle-group-button-neutral-text",
+    "--ac-toggle-group-button-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-toggle-group-button-neutral-hover-text": "--a-text-default",
+    "--ac-toggle-group-neutral-selected-bg": "--a-surface-neutral",
+    "--ac-toggle-group-neutral-selected-text": "--a-text-on-neutral"
  },
  "tooltip": {
    "--ac-tooltip-bg": "--a-surface-inverted",
@@ -253,7 +285,7 @@
  },
  "checkbox-radio": {
    "--ac-radio-checkbox-bg": "--a-surface-default",
-    "--ac-radio-checkbox-border": "--a-border-strong",
+    "--ac-radio-checkbox-border": "--a-border-default",
    "--ac-radio-checkbox-action": "--a-surface-action",
    "--ac-radio-checkbox-action-hover-bg": "--a-surface-action-subtle",
    "--ac-radio-checkbox-error-border": "--a-border-danger",
@@ -269,7 +301,7 @@
  },
  "select": {
    "--ac-select-bg": "--a-surface-default",
-    "--ac-select-border": "--a-border-strong",
+    "--ac-select-border": "--a-border-default",
    "--ac-select-hover-bg": "--a-border-action",
    "--ac-select-error-border": "--a-surface-danger"
  },
@@ -298,7 +330,7 @@
    "--ac-textarea-placeholder": "--a-text-subtle",
    "--ac-textarea-hover-border": "--a-border-action",
    "--ac-textarea-counter-text": "--a-text-subtle",
-    "--ac-textarea-counter-error-text": "--a-surface-danger",
+    "--ac-textarea-counter-error-text": "--a-text-danger",
    "--ac-textarea-error-border": "--a-border-danger"
  }
 }
@@ -1,5 +1,77 @@
 # @navikt/ds-react

+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+- Updated dependencies [[`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8)]:
+  - @navikt/ds-icons@2.4.2
+
+## 2.4.1
+
+### Patch Changes
+
+- [#1827](https://github.com/navikt/aksel/pull/1827) [`98c06b0be`](https://github.com/navikt/aksel/commit/98c06b0be20debff9969af874d5239ec920fa401) Thanks [@kschieren](https://github.com/kschieren)! - Added fixedWeeks prop to standalone datepicker
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.4.1
+
+## 2.4.0
+
+### Minor Changes
+
+- [#1807](https://github.com/navikt/aksel/pull/1807) [`70eeb24b3`](https://github.com/navikt/aksel/commit/70eeb24b38ac871c7f2e31e1621b949669c401b6) Thanks [@kschieren](https://github.com/kschieren)! - Added List component
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.4.0
+
+## 2.3.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.3.1
+
+## 2.3.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.3.0
+
+## 2.2.0
+
+### Minor Changes
+
+- [#1789](https://github.com/navikt/aksel/pull/1789) [`c0929a534`](https://github.com/navikt/aksel/commit/c0929a534dc8effece5435f8be550cb7931a52b1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Button og ToggleGroup har nå en neutral-variant, oppdatert neutral-tokens
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.2.0
+
+## 2.1.7
+
+### Patch Changes
+
+- [`6ac97aeb3`](https://github.com/navikt/aksel/commit/6ac97aeb34735020e5a2083e51e836877abaefa3) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset rekkefølge på onValidate og onRangeChange i useRangepicker-hook
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.1.7
+
+## 2.1.6
+
+### Patch Changes
+
+- [#1777](https://github.com/navikt/aksel/pull/1777) [`cd1c93f9d`](https://github.com/navikt/aksel/commit/cd1c93f9d471fbbc38215d788a73f21b5b216c5b) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Datepicker og monthpicker kan nå bestemme om popover skal dukke opp ved fokus
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.1.6
+
 ## 2.1.5

 ### Patch Changes
@@ -13,7 +85,7 @@

 ### Patch Changes

- [`87f194c1d`](https://github.com/navikt/Designsystemet/commit/87f194c1dc29b10a604de676b358d117e2dbf52f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset edgecase i useRangepicker der valg av startdato etter sluttdato ga feil output
+- [`87f194c1d`](https://github.com/navikt/aksel/commit/87f194c1dc29b10a604de676b358d117e2dbf52f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset edgecase i useRangepicker der valg av startdato etter sluttdato ga feil output

 - Updated dependencies []:
  - @navikt/ds-icons@2.1.4
@@ -22,7 +94,7 @@

 ### Patch Changes

- [#1771](https://github.com/navikt/Designsystemet/pull/1771) [`494566e60`](https://github.com/navikt/Designsystemet/commit/494566e604e958363f75ebfa2adbc1669397636a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Monthpicker håndterer nå visning av År riktig
+- [#1771](https://github.com/navikt/aksel/pull/1771) [`494566e60`](https://github.com/navikt/aksel/commit/494566e604e958363f75ebfa2adbc1669397636a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Monthpicker håndterer nå visning av År riktig

 - Updated dependencies []:
  - @navikt/ds-icons@2.1.3
@@ -38,16 +110,16 @@

 ### Patch Changes

- [#1759](https://github.com/navikt/Designsystemet/pull/1759) [`dcf5cfc06`](https://github.com/navikt/Designsystemet/commit/dcf5cfc06b751341559ef30085bd974820531e57) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset @types/react v18 feil introdusert i v2.0.6
+- [#1759](https://github.com/navikt/aksel/pull/1759) [`dcf5cfc06`](https://github.com/navikt/aksel/commit/dcf5cfc06b751341559ef30085bd974820531e57) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset @types/react v18 feil introdusert i v2.0.6

- Updated dependencies [[`dcf5cfc06`](https://github.com/navikt/Designsystemet/commit/dcf5cfc06b751341559ef30085bd974820531e57)]:
+- Updated dependencies [[`dcf5cfc06`](https://github.com/navikt/aksel/commit/dcf5cfc06b751341559ef30085bd974820531e57)]:
  - @navikt/ds-icons@2.1.1

 ## 2.1.0

 ### Minor Changes

- [`0873fe652`](https://github.com/navikt/Designsystemet/commit/0873fe6520e817e462197c162b49c05826da4838) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Datepicker/Monthpicker støtter nå år med 2 siffer i input
+- [`0873fe652`](https://github.com/navikt/aksel/commit/0873fe6520e817e462197c162b49c05826da4838) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Datepicker/Monthpicker støtter nå år med 2 siffer i input

 ### Patch Changes

@@ -58,7 +130,7 @@

 ### Patch Changes

- [`98177d0cd`](https://github.com/navikt/Designsystemet/commit/98177d0cd3802029dcf398ce93c1767d3b0860c5) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bedre typer for ref i datepicker
+- [`98177d0cd`](https://github.com/navikt/aksel/commit/98177d0cd3802029dcf398ce93c1767d3b0860c5) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bedre typer for ref i datepicker

 - Updated dependencies []:
  - @navikt/ds-icons@2.0.18
@@ -67,21 +139,21 @@

 ### Patch Changes

- Updated dependencies [[`27e3dfee0`](https://github.com/navikt/Designsystemet/commit/27e3dfee07e135893e9f62cd32f80ed83a3510de)]:
+- Updated dependencies [[`27e3dfee0`](https://github.com/navikt/aksel/commit/27e3dfee07e135893e9f62cd32f80ed83a3510de)]:
  - @navikt/ds-icons@2.0.17

 ## 2.0.16

 ### Patch Changes

- Updated dependencies [[`54f8b0795`](https://github.com/navikt/Designsystemet/commit/54f8b07956bbfb7de51f6682a5fc64903bfd1bdf)]:
+- Updated dependencies [[`54f8b0795`](https://github.com/navikt/aksel/commit/54f8b07956bbfb7de51f6682a5fc64903bfd1bdf)]:
  - @navikt/ds-icons@2.0.16

 ## 2.0.15

 ### Patch Changes

- [#1748](https://github.com/navikt/Designsystemet/pull/1748) [`22dfd8e60`](https://github.com/navikt/Designsystemet/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
+- [#1748](https://github.com/navikt/aksel/pull/1748) [`22dfd8e60`](https://github.com/navikt/aksel/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.

 - Updated dependencies []:
  - @navikt/ds-icons@2.0.15
@@ -90,7 +162,7 @@

 ### Patch Changes

- [`8e5c55443`](https://github.com/navikt/Designsystemet/commit/8e5c554431c98b1b658c5054c0b3cf08b8a65e52) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bumpet @floating-ui/react
+- [`8e5c55443`](https://github.com/navikt/aksel/commit/8e5c554431c98b1b658c5054c0b3cf08b8a65e52) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bumpet @floating-ui/react

 - Updated dependencies []:
  - @navikt/ds-icons@2.0.14
@@ -99,7 +171,7 @@

 ### Patch Changes

- Updated dependencies [[`a6c339123`](https://github.com/navikt/Designsystemet/commit/a6c3391237f13394063e4c004ac9efb1875fc944)]:
+- Updated dependencies [[`a6c339123`](https://github.com/navikt/aksel/commit/a6c3391237f13394063e4c004ac9efb1875fc944)]:
  - @navikt/ds-icons@2.0.13

 ## 2.0.12
@@ -172,7 +244,7 @@

 ### Patch Changes

- Updated dependencies [[`e4b6237e1`](https://github.com/navikt/Designsystemet/commit/e4b6237e1bbf13b1ce5415845d558831b47caf7c)]:
+- Updated dependencies [[`e4b6237e1`](https://github.com/navikt/aksel/commit/e4b6237e1bbf13b1ce5415845d558831b47caf7c)]:
  - @navikt/ds-icons@2.0.4

 ## 2.0.3
@@ -204,13 +276,13 @@

 ### Major Changes

- [`6b96e4833`](https://github.com/navikt/Designsystemet/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
+- [`6b96e4833`](https://github.com/navikt/aksel/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading

 ## 1.5.10

 ### Patch Changes

- [#1717](https://github.com/navikt/Designsystemet/pull/1717) [`d9352982d`](https://github.com/navikt/Designsystemet/commit/d9352982d42d5d12a9c5fc345e546f57c753738d) Thanks [@vebnor](https://github.com/vebnor)! - Fikset parentSelector prop i Modal
+- [#1717](https://github.com/navikt/aksel/pull/1717) [`d9352982d`](https://github.com/navikt/aksel/commit/d9352982d42d5d12a9c5fc345e546f57c753738d) Thanks [@vebnor](https://github.com/vebnor)! - Fikset parentSelector prop i Modal

 - Updated dependencies []:
  - @navikt/ds-icons@1.5.10
@@ -260,7 +332,7 @@

 ### Patch Changes

- Updated dependencies [[`77302a30b`](https://github.com/navikt/Designsystemet/commit/77302a30b8eef8dc00b2d2e9c904a3f57da81a11)]:
+- Updated dependencies [[`77302a30b`](https://github.com/navikt/aksel/commit/77302a30b8eef8dc00b2d2e9c904a3f57da81a11)]:
  - @navikt/ds-icons@1.5.4

 ## 1.5.3
@@ -292,9 +364,9 @@

 ### Minor Changes

- [#1684](https://github.com/navikt/Designsystemet/pull/1684) [`e19bf67b3`](https://github.com/navikt/Designsystemet/commit/e19bf67b337dea39989c68b5e9c2591cf0d5b40f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Oppdaterte tag-varianter
+- [#1684](https://github.com/navikt/aksel/pull/1684) [`e19bf67b3`](https://github.com/navikt/aksel/commit/e19bf67b337dea39989c68b5e9c2591cf0d5b40f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Oppdaterte tag-varianter

- [#1668](https://github.com/navikt/Designsystemet/pull/1668) [`97c5f60e9`](https://github.com/navikt/Designsystemet/commit/97c5f60e9111da7e08f55c8d0aa29581f0a9b1ca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Chips komponent :sparkles:
+- [#1668](https://github.com/navikt/aksel/pull/1668) [`97c5f60e9`](https://github.com/navikt/aksel/commit/97c5f60e9111da7e08f55c8d0aa29581f0a9b1ca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Chips komponent :sparkles:

 ### Patch Changes

@@ -330,7 +402,7 @@

 ### Patch Changes

- [`3c08651df`](https://github.com/navikt/Designsystemet/commit/3c08651df28c3e19dd8c8a7a1d0032200bec473d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Date-komponenter følger språkrådets dato-formatering for måneder.
+- [`3c08651df`](https://github.com/navikt/aksel/commit/3c08651df28c3e19dd8c8a7a1d0032200bec473d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Date-komponenter følger språkrådets dato-formatering for måneder.

 - Updated dependencies []:
  - @navikt/ds-icons@1.4.1
@@ -339,7 +411,7 @@

 ### Minor Changes

- [`1bdb7e377`](https://github.com/navikt/Designsystemet/commit/1bdb7e3777ece28d153991b78dbdd289366fca57) Thanks [@KenAJoh](https://github.com/KenAJoh)! - [#1702](https://github.com/navikt/Designsystemet/pull/1702) [`20bcc28cb`](https://github.com/navikt/Designsystemet/commit/20bcc28cb0a886aa40d2c1b042fb2706a144c014) Thanks [@andnorda](https://github.com/andnorda)! - Global Provider komponent for håndtering av global config
+- [`1bdb7e377`](https://github.com/navikt/aksel/commit/1bdb7e3777ece28d153991b78dbdd289366fca57) Thanks [@KenAJoh](https://github.com/KenAJoh)! - [#1702](https://github.com/navikt/aksel/pull/1702) [`20bcc28cb`](https://github.com/navikt/aksel/commit/20bcc28cb0a886aa40d2c1b042fb2706a144c014) Thanks [@andnorda](https://github.com/andnorda)! - Global Provider komponent for håndtering av global config

 ### Patch Changes

@@ -350,14 +422,14 @@

 ### Patch Changes

- [`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
+- [`40f0b3340`](https://github.com/navikt/aksel/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag

- Updated dependencies [[`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1)]:
+- Updated dependencies [[`40f0b3340`](https://github.com/navikt/aksel/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1)]:
  - @navikt/ds-icons@1.3.39

 ## 1.3.38

 ### Patch Changes

- Updated dependencies [[`aa506975b`](https://github.com/navikt/Designsystemet/commit/aa506975b4466d4daa79c75f5f9faa255b7fae42)]:
+- Updated dependencies [[`aa506975b`](https://github.com/navikt/aksel/commit/aa506975b4466d4daa79c75f5f9faa255b7fae42)]:
  - @navikt/ds-icons@1.3.38
@@ -27,11 +27,10 @@ function App() {

 ## Learn more

- [Designsystem documentation](https://aksel.nav.no/designsystem)
- [Component-docs](https://aksel.nav.no/designsystem/side/oversikt-komponenter)
- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/)
- [ds-css README](https://github.com/navikt/Designsystemet/blob/master/%40navikt/core/css/README.md)
+- [Docs](https://aksel.nav.no/komponenter)
+- [Storybook](https://aksel.nav.no/storybook/)
+- [ds-css README](https://github.com/navikt/aksel/blob/main/%40navikt/core/css/README.md)

 ## License

-[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "2.1.5",
+  "version": "2.4.2",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -11,7 +11,7 @@
  ],
  "repository": {
    "type": "git",
-    "url": "git+https://github.com/navikt/Designsystemet.git"
+    "url": "git+https://github.com/navikt/aksel.git"
  },
  "sideEffects": false,
  "main": "./cjs/index.js",
@@ -37,7 +37,7 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.17.0",
-    "@navikt/ds-icons": "^2.1.5",
+    "@navikt/ds-icons": "^2.4.2",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import AnimateHeight from "../util/AnimateHeight";
-import { BodyLong } from "../typography";
+import { BodyLong } from "../typography/BodyLong";
 import { AccordionItemContext } from "./AccordionItem";

 export interface AccordionContentProps
@@ -1,7 +1,7 @@
 import { Expand, ExpandFilled } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { Heading } from "..";
+import { Heading } from "../typography/Heading";
 import { AccordionItemContext } from "./AccordionItem";

 export interface AccordionHeaderProps
@@ -50,21 +50,23 @@ const Item = (props) => {
  );
 };

-export const Default = (props) => {
-  return (
-    <div style={{ width: 500 }}>
-      <Accordion>
-        {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
-          <Item key={y} {...props} />
-        ))}
-      </Accordion>
-    </div>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <div style={{ width: 500 }}>
+        <Accordion>
+          {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
+            <Item key={y} {...props} />
+          ))}
+        </Accordion>
+      </div>
+    );
+  },

-Default.args = {
-  controlled: false,
-  nItems: 2,
+  args: {
+    controlled: false,
+    nItems: 2,
+  },
 };

 export const Controlled = () => {
@@ -1 +1 @@
-export { AccordionProps, default as Accordion } from "./Accordion";
+export { type AccordionProps, default as Accordion } from "./Accordion";
@@ -6,7 +6,7 @@ import {
 } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { BodyLong } from "..";
+import { BodyLong } from "../typography/BodyLong";

 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
@@ -1,27 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Alert } from ".";
-import { BodyLong, Heading as DsHeading } from "..";
+import { BodyLong, Heading as DsHeading, Link } from "..";

-export default {
+const meta: Meta<typeof Alert> = {
  title: "ds-react/Alert",
  component: Alert,
-  argTypes: {
-    variant: {
-      defaultValue: "info",
-      control: {
-        type: "radio",
-        options: ["error", "warning", "info", "success"],
-      },
-    },
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-  },
 };

+export default meta;
+
+type Story = StoryObj<typeof Alert>;
+
 const variants: Array<"error" | "warning" | "info" | "success"> = [
  "error",
  "warning",
@@ -29,20 +19,38 @@ const variants: Array<"error" | "warning" | "info" | "success"> = [
  "success",
 ];

-export const Default = (props) => (
-  <Alert
-    variant={props.variant}
-    size={props.size}
-    fullWidth={props.fullWidth}
-    inline={props.inline}
-  >
-    {props.children}
-  </Alert>
-);
+export const Default: Story = {
+  render: (props) => (
+    <Alert
+      variant={props.variant}
+      size={props.size}
+      fullWidth={props.fullWidth}
+      inline={props.inline}
+    >
+      {props.children}
+    </Alert>
+  ),

-Default.args = {
-  children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
-  fullWidth: false,
+  args: {
+    children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+    fullWidth: false,
+    variant: "info",
+    size: "medium",
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: "radio",
+      },
+      options: ["info", "error", "warning", "success"],
+    },
+    size: {
+      control: {
+        type: "radio",
+      },
+      options: ["medium", "small"],
+    },
+  },
 };

 export const Small = () => {
@@ -127,3 +135,15 @@ export const Heading = () => {
    </div>
  );
 };
+
+export const Links = () => {
+  return (
+    <div className="colgap">
+      {variants.map((variant, i) => (
+        <Alert key={variant} variant={variant}>
+          <Link href="#">Id elit esse enim reprehenderit</Link>
+        </Alert>
+      ))}
+    </div>
+  );
+};
@@ -1,2 +1,2 @@
 export { default as Alert } from "./Alert";
-export { AlertProps } from "./Alert";
+export { type AlertProps } from "./Alert";
@@ -13,7 +13,14 @@ export interface ButtonProps
   * Changes design and interaction-visuals
   * @default "primary"
   */
-  variant?: "primary" | "secondary" | "tertiary" | "danger";
+  variant?:
+    | "primary"
+    | "primary-neutral"
+    | "secondary"
+    | "secondary-neutral"
+    | "tertiary"
+    | "tertiary-neutral"
+    | "danger";
  /**
   * Changes padding, height and font-size
   * @default medium
@@ -8,11 +8,72 @@ export default {
  parameters: {
    chromatic: { delay: 600 },
  },
+};
+
+const variants: Array<
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "primary-neutral"
+  | "secondary-neutral"
+  | "tertiary-neutral"
+  | "danger"
+> = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "danger",
+  "primary-neutral",
+  "secondary-neutral",
+  "tertiary-neutral",
+];
+
+const varSwitch = {
+  primary: "Primary",
+  secondary: "Secondary",
+  tertiary: "Tertiary",
+  danger: "Danger",
+  "primary-neutral": "Primary",
+  "secondary-neutral": "Secondary",
+  "tertiary-neutral": "Tertiary",
+};
+
+export const Default = {
+  render: (props) => {
+    return (
+      <Button
+        variant={props.variant}
+        size={props.size}
+        loading={props.loading}
+        icon={props.icon ? <Star /> : undefined}
+        iconPosition={props.iconPosition}
+      >
+        {props.children}
+      </Button>
+    );
+  },
+
+  args: {
+    icon: false,
+    loading: false,
+    iconPosition: "left",
+    children: "Knapp",
+    variant: "primary",
+    size: "medium",
+  },
  argTypes: {
    variant: {
      control: {
        type: "radio",
-        options: ["primary", "secondary", "tertiary", "danger"],
+        options: [
+          "primary",
+          "secondary",
+          "tertiary",
+          "danger",
+          "primary-neutral",
+          "secondary-neutral",
+          "tertiary-neutral",
+        ],
      },
    },
    size: {
@@ -30,41 +91,6 @@ export default {
  },
 };

-const variants: Array<"primary" | "secondary" | "tertiary" | "danger"> = [
-  "primary",
-  "secondary",
-  "tertiary",
-  "danger",
-];
-
-const varSwitch = {
-  primary: "Primary",
-  secondary: "Secondary",
-  tertiary: "Tertiary",
-  danger: "Danger",
-};
-
-export const Default = (props) => {
-  return (
-    <Button
-      variant={props.variant}
-      size={props.size}
-      loading={props.loading}
-      icon={props.icon ? <Star /> : undefined}
-      iconPosition={props.iconPosition}
-    >
-      {props.children}
-    </Button>
-  );
-};
-
-Default.args = {
-  icon: false,
-  loading: false,
-  iconPosition: "left",
-  children: "Knapp",
-};
-
 export const Small = () => (
  <div className="rowgap">
    {variants.map((variant) => (
@@ -95,31 +121,35 @@ export const Link = () => (
  </div>
 );

-export const Loading = () => (
-  <div className="colgap">
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} loading>
-          {varSwitch[variant]}
-        </Button>
-      ))}
+export const Loading = {
+  render: () => (
+    <div className="colgap">
+      <div className="rowgap">
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} loading>
+            {varSwitch[variant]}
+          </Button>
+        ))}
+      </div>
+      <div className="rowgap">
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} loading size="small">
+            {varSwitch[variant]}
+          </Button>
+        ))}
+      </div>
+      <div className="rowgap">
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} loading size="xsmall">
+            {varSwitch[variant]}
+          </Button>
+        ))}
+      </div>
    </div>
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} loading size="small">
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} loading size="xsmall">
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-  </div>
-);
+  ),
+
+  args: { chromatic: { delay: 300 } },
+};

 export const Icon = () => (
  <div className="colgap">
@@ -217,28 +247,32 @@ export const Disabled = () => (
  </div>
 );

-export const LoadingWithAs = () => (
-  <div className="colgap">
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} loading size="small">
-          {varSwitch[variant]}
-        </Button>
-      ))}
+export const LoadingWithAs = {
+  render: () => (
+    <div className="colgap">
+      <div className="rowgap">
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} loading size="small">
+            {varSwitch[variant]}
+          </Button>
+        ))}
+      </div>
+      <div className="rowgap">
+        {variants.map((variant) => (
+          <Button
+            key={variant}
+            variant={variant}
+            loading
+            size="small"
+            as="a"
+            href="#"
+          >
+            {varSwitch[variant]}
+          </Button>
+        ))}
+      </div>
    </div>
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button
-          key={variant}
-          variant={variant}
-          loading
-          size="small"
-          as="a"
-          href="#"
-        >
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-  </div>
-);
+  ),
+
+  args: { chromatic: { delay: 300 } },
+};
@@ -1,2 +1,2 @@
 export { default as Button } from "./Button";
-export { ButtonProps } from "./Button";
+export { type ButtonProps } from "./Button";
@@ -1,7 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
 import Bubble, { BubbleType } from "./Bubble";
-import { BodyLong, BodyShort } from "..";
+import { BodyLong, BodyShort } from "../typography";

 export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
  /**
@@ -1,6 +1,6 @@
 import React from "react";
 import { Chat } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";

 export default {
  title: "ds-react/Chat",
@@ -19,31 +19,33 @@ export default {
  },
 } as Meta;

-export const Default = (props) => {
-  return (
-    <Chat
-      avatar={props?.avatar ?? "ON"}
-      name={props?.name ?? "Ola Normann"}
-      timestamp={props?.timestamp ?? "01.01.21 14:00"}
-      avatarBgColor={props?.avatarBgColor}
-      backgroundColor={props?.backgroundColor}
-    >
-      <Chat.Bubble>
-        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-      </Chat.Bubble>
-      <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
-      <Chat.Bubble>
-        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-        labore nisi ut.
-      </Chat.Bubble>
-    </Chat>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <Chat
+        avatar={props?.avatar ?? "ON"}
+        name={props?.name ?? "Ola Normann"}
+        timestamp={props?.timestamp ?? "01.01.21 14:00"}
+        avatarBgColor={props?.avatarBgColor}
+        backgroundColor={props?.backgroundColor}
+      >
+        <Chat.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </Chat.Bubble>
+        <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+        <Chat.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Chat.Bubble>
+      </Chat>
+    );
+  },

-Default.args = {
-  name: "Ola Normann",
-  timestamp: "01.01.21 14:00",
-  avatar: "ON",
+  args: {
+    name: "Ola Normann",
+    timestamp: "01.01.21 14:00",
+    avatar: "ON",
+  },
 };

 export const Farger = () => {
@@ -1 +1 @@
-export { default as Chat, ChatProps } from "./Chat";
+export { default as Chat, type ChatProps } from "./Chat";
@@ -1,7 +1,7 @@
 import { Close } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "..";
+import { OverridableComponent } from "../util/OverridableComponent";

 export interface RemovableChipsProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -1,7 +1,7 @@
 import { SuccessStroke } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "..";
+import { OverridableComponent } from "../util/OverridableComponent";

 export interface ToggleChipsProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import React, { useState } from "react";
 import { Chips } from ".";

@@ -22,44 +23,46 @@ export default {

 const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];

-export const Default = (props) => {
-  const [selected, setSelected] = useState(["Dansk", "Svensk"]);
-  const [filter, setFilter] = useState(options);
+export const Default = {
+  render: (props) => {
+    const [selected, setSelected] = useState(["Dansk", "Svensk"]);
+    const [filter, setFilter] = useState(options);
+
+    if (props.type === "toggle") {
+      return (
+        <Chips size={props.size ?? "medium"}>
+          {options.map((c) => (
+            <Chips.Toggle
+              selected={selected.includes(c)}
+              key={c}
+              onClick={() =>
+                setSelected(
+                  selected.includes(c)
+                    ? selected.filter((x) => x !== c)
+                    : [...selected, c]
+                )
+              }
+            >
+              {c}
+            </Chips.Toggle>
+          ))}
+        </Chips>
+      );
+    }

-  if (props.type === "toggle") {
    return (
      <Chips size={props.size ?? "medium"}>
-        {options.map((c) => (
-          <Chips.Toggle
-            selected={selected.includes(c)}
+        {filter.map((c) => (
+          <Chips.Removable
            key={c}
-            onClick={() =>
-              setSelected(
-                selected.includes(c)
-                  ? selected.filter((x) => x !== c)
-                  : [...selected, c]
-              )
-            }
+            onClick={() => setFilter((x) => x.filter((y) => y !== c))}
          >
            {c}
-          </Chips.Toggle>
+          </Chips.Removable>
        ))}
      </Chips>
    );
-  }
-
-  return (
-    <Chips size={props.size ?? "medium"}>
-      {filter.map((c) => (
-        <Chips.Removable
-          key={c}
-          onClick={() => setFilter((x) => x.filter((y) => y !== c))}
-        >
-          {c}
-        </Chips.Removable>
-      ))}
-    </Chips>
-  );
+  },
 };

 export const Toggle = () => {
@@ -1 +1 @@
-export { default as Chips, ChipsProps } from "./Chips";
+export { default as Chips, type ChipsProps } from "./Chips";
@@ -24,6 +24,11 @@ interface DatePickerStandaloneDefaultProps
   * Datepicker classname
   */
  className?: string;
+  /**
+   * If datepicker should be fixed to 6 weeks, regardless of actual weeks in month
+   * @default true
+   */
+  fixedWeeks?: boolean;
 }

 export type DatePickerStandaloneProps = DatePickerStandaloneDefaultProps &
@@ -50,6 +55,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
      id,
      defaultSelected,
      onSelect,
+      fixedWeeks = true,
      ...rest
    },
    ref
@@ -113,7 +119,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
            weekend: "rdp-day__weekend",
          }}
          showWeekNumber={showWeekNumber}
-          fixedWeeks
+          fixedWeeks={fixedWeeks}
          showOutsideDays
          {...omit(rest, ["onSelect"])}
        />
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import React, { useId, useState } from "react";
 import { UNSAFE_useDatepicker, UNSAFE_useRangeDatepicker } from "..";
 import { Button } from "../..";
@@ -34,93 +35,95 @@ export default {
  },
 };

-export const Default = (props) => {
-  const [open, setOpen] = useState(false);
+export const Default = {
+  render: (props) => {
+    const [open, setOpen] = useState(false);

-  const rangeCtx = UNSAFE_useRangeDatepicker({
-    fromDate: new Date("Aug 23 2020"),
-    toDate: new Date("Aug 23 2023"),
-  });
+    const rangeCtx = UNSAFE_useRangeDatepicker({
+      fromDate: new Date("Aug 23 2020"),
+      toDate: new Date("Aug 23 2023"),
+    });

-  const singleCtx = UNSAFE_useDatepicker({
-    fromDate: new Date("Aug 23 2020"),
-    toDate: new Date("Aug 23 2023"),
-  });
+    const singleCtx = UNSAFE_useDatepicker({
+      fromDate: new Date("Aug 23 2020"),
+      toDate: new Date("Aug 23 2023"),
+    });

-  const newProps = {
-    ...(!props.inputfield || props.mode === "multiple"
-      ? {
-          open,
-          onClose: () => setOpen(false),
-          fromDate: new Date("Aug 23 2020"),
-          toDate: new Date("Aug 23 2023"),
-        }
-      : {}),
-  };
+    const newProps = {
+      ...(!props.inputfield || props.mode === "multiple"
+        ? {
+            open,
+            onClose: () => setOpen(false),
+            fromDate: new Date("Aug 23 2020"),
+            toDate: new Date("Aug 23 2023"),
+          }
+        : {}),
+    };

-  const Comp = !props.standalone ? DatePicker : DatePicker.Standalone;
+    const Comp = !props.standalone ? DatePicker : DatePicker.Standalone;

-  return (
-    <div>
-      <Comp
-        locale={props?.locale}
-        dropdownCaption={props?.dropdownCaption}
-        disableWeekends={props?.disableWeekends}
-        showWeekNumber={props.showWeekNumber}
-        mode={props.mode}
-        {...(props.mode === "single"
-          ? singleCtx.datepickerProps
-          : props.mode === "range"
-          ? rangeCtx.datepickerProps
-          : {})}
-        {...newProps}
-      >
-        {!props.standalone && (
-          <>
-            {props.inputfield && props.mode !== "multiple" ? (
-              <>
-                {props.mode === "range" ? (
-                  <div style={{ display: "flex", gap: "1rem" }}>
-                    <DatePicker.Input
-                      label="Fra"
-                      size={props?.size}
-                      {...rangeCtx.fromInputProps}
-                    />
-                    <DatePicker.Input
-                      label="Til"
-                      size={props?.size}
-                      {...rangeCtx.toInputProps}
-                    />
-                  </div>
-                ) : (
-                  <>
-                    <DatePicker.Input
-                      label="Velg dato"
-                      size={props?.size}
-                      {...singleCtx.inputProps}
-                    />
-                  </>
-                )}
-              </>
-            ) : (
-              <Button onClick={() => setOpen((x) => !x)}>
-                Åpne datovelger
-              </Button>
-            )}
-          </>
-        )}
-      </Comp>
-    </div>
-  );
-};
+    return (
+      <div>
+        <Comp
+          locale={props?.locale}
+          dropdownCaption={props?.dropdownCaption}
+          disableWeekends={props?.disableWeekends}
+          showWeekNumber={props.showWeekNumber}
+          mode={props.mode}
+          {...(props.mode === "single"
+            ? singleCtx.datepickerProps
+            : props.mode === "range"
+            ? rangeCtx.datepickerProps
+            : {})}
+          {...newProps}
+        >
+          {!props.standalone && (
+            <>
+              {props.inputfield && props.mode !== "multiple" ? (
+                <>
+                  {props.mode === "range" ? (
+                    <div style={{ display: "flex", gap: "1rem" }}>
+                      <DatePicker.Input
+                        label="Fra"
+                        size={props?.size}
+                        {...rangeCtx.fromInputProps}
+                      />
+                      <DatePicker.Input
+                        label="Til"
+                        size={props?.size}
+                        {...rangeCtx.toInputProps}
+                      />
+                    </div>
+                  ) : (
+                    <>
+                      <DatePicker.Input
+                        label="Velg dato"
+                        size={props?.size}
+                        {...singleCtx.inputProps}
+                      />
+                    </>
+                  )}
+                </>
+              ) : (
+                <Button onClick={() => setOpen((x) => !x)}>
+                  Åpne datovelger
+                </Button>
+              )}
+            </>
+          )}
+        </Comp>
+      </div>
+    );
+  },

-Default.args = {
-  dropdownCaption: false,
-  disableWeekends: false,
-  showWeekNumber: false,
-  inputfield: true,
-  standalone: false,
-  openOnFocus: true,
+  args: {
+    dropdownCaption: false,
+    disableWeekends: false,
+    showWeekNumber: false,
+    inputfield: true,
+    standalone: false,
+    openOnFocus: true,
+  },
 };

 export const DropdownCaption = () => (
@@ -148,6 +151,7 @@ export const UseDatepicker = () => {
    fromDate: new Date("Aug 23 2019"),
    onDateChange: console.log,
    locale: "en",
+    openOnFocus: false,
  });

  return (
@@ -179,12 +183,29 @@ export const UseRangedDatepicker = () => {
  );
 };

+export const OpenOnFocus = () => {
+  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+    onDateChange: console.log,
+    openOnFocus: false,
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps}>
+        <DatePicker.Input {...inputProps} label="Velg dato" />
+      </DatePicker>
+    </div>
+  );
+};
+
 export const NB = () => (
  <DatePicker.Standalone locale="nb" today={new Date("2006-07-01")} />
 );
+
 export const NN = () => (
  <DatePicker.Standalone locale="nn" today={new Date("2006-07-01")} />
 );
+
 export const EN = () => (
  <DatePicker.Standalone locale="en" today={new Date("2006-07-01")} />
 );
@@ -196,6 +217,7 @@ export const Standalone = () => (
 export const StandaloneRange = () => (
  <DatePicker.Standalone mode="range" today={new Date("2006-07-01")} />
 );
+
 export const StandaloneMultiple = () => (
  <DatePicker.Standalone mode="multiple" today={new Date("2006-07-01")} />
 );
@@ -56,6 +56,11 @@ export interface UseDatepickerOptions
   * In 2023 this equals to 1943 - 2042
   */
  allowTwoDigitYear?: boolean;
+  /**
+   * Opens datepicker on input-focus
+   * @default true
+   */
+  openOnFocus?: boolean;
 }

 interface UseDatepickerValue {
@@ -123,6 +128,7 @@ export const useDatepicker = (
    onValidate,
    defaultMonth,
    allowTwoDigitYear = true,
+    openOnFocus = true,
  } = opt;

  const locale = getLocaleFromString(_locale);
@@ -198,7 +204,7 @@ export const useDatepicker = (
  };

  const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
-    !open && setOpen(true);
+    !open && openOnFocus && setOpen(true);
    let day = parseDate(
      e.target.value,
      today,
@@ -42,6 +42,11 @@ export interface UseMonthPickerOptions
   * In 2023 this equals to 1943 - 2042
   */
  allowTwoDigitYear?: boolean;
+  /**
+   * Opens datepicker on input-focus
+   * @default true
+   */
+  openOnFocus?: boolean;
 }

 interface UseMonthPickerValue {
@@ -104,6 +109,7 @@ export const useMonthpicker = (
    onValidate,
    defaultYear,
    allowTwoDigitYear = true,
+    openOnFocus = true,
  } = opt;

  const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
@@ -180,7 +186,7 @@ export const useMonthpicker = (
  };

  const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
-    !open && setOpen(true);
+    !open && openOnFocus && setOpen(true);
    let day = parseDate(
      e.target.value,
      today,
@@ -204,6 +204,7 @@ export const useRangeDatepicker = (
    onValidate,
    defaultMonth,
    allowTwoDigitYear = true,
+    openOnFocus = true,
  } = opt;

  const locale = getLocaleFromString(_locale);
@@ -323,7 +324,7 @@ export const useRangeDatepicker = (
  };

  const handleFocus = (e, src: RangeT) => {
-    !open && setOpen(true);
+    !open && openOnFocus && setOpen(true);
    let day = parseDate(
      e.target.value,
      today,
@@ -387,11 +388,11 @@ export const useRangeDatepicker = (
          formatDateForInput(prevToRange, locale, "date", inputFormat)
        )
      : setToInputValue("");
+    updateRange({ from: range?.from, to: resetTo ? undefined : prevToRange });
    updateValidation(
      { isValidDate: !!range?.from, isEmpty: !range?.from },
      { isValidDate: !!range?.to, isEmpty: !prevToRange || resetTo }
    );
-    updateRange({ from: range?.from, to: resetTo ? undefined : prevToRange });
  };

  const fromChange = (
@@ -1,19 +1,19 @@
-export { DateInputProps } from "./DateInput";
+export { type DateInputProps } from "./DateInput";
 export {
-  DatePickerProps,
+  type DatePickerProps,
  default as UNSAFE_DatePicker,
 } from "./datepicker/DatePicker";
-export { DatePickerStandaloneProps } from "./datepicker/DatePickerStandalone";
-export { MonthPickerStandaloneProps } from "./monthpicker/MonthPickerStandalone";
+export { type DatePickerStandaloneProps } from "./datepicker/DatePickerStandalone";
+export { type MonthPickerStandaloneProps } from "./monthpicker/MonthPickerStandalone";
 export {
  UNSAFE_useDatepicker,
  UNSAFE_useMonthpicker,
  UNSAFE_useRangeDatepicker,
-  RangeValidationT,
-  DateValidationT,
-  MonthValidationT,
+  type RangeValidationT,
+  type DateValidationT,
+  type MonthValidationT,
 } from "./hooks";
 export {
  default as UNSAFE_MonthPicker,
-  MonthPickerProps,
+  type MonthPickerProps,
 } from "./monthpicker/MonthPicker";
@@ -54,17 +54,19 @@ export const NB = () => <MonthPicker.Standalone locale="nb" />;
 export const NN = () => <MonthPicker.Standalone locale="nn" />;
 export const EN = () => <MonthPicker.Standalone locale="en" />;

-export const DisabledMonths = (props) => {
-  return (
-    <MonthPicker.Standalone
-      disabled={[
-        { from: new Date("Jan 1 2022"), to: new Date("Jul  6 2022") },
-        { from: new Date("Apr 2 2023"), to: new Date("Dec 4 2023") },
-        new Date("Sep 5 2022"),
-        new Date("Jan 5 2023"),
-      ]}
-    />
-  );
+export const DisabledMonths = {
+  render: (props) => {
+    return (
+      <MonthPicker.Standalone
+        disabled={[
+          { from: new Date("Jan 1 2022"), to: new Date("Jul  6 2022") },
+          { from: new Date("Apr 2 2023"), to: new Date("Dec 4 2023") },
+          new Date("Sep 5 2022"),
+          new Date("Jan 5 2023"),
+        ]}
+      />
+    );
+  },
 };

 export const Standalone = () => {
@@ -17,5 +17,5 @@ export { disableDate } from "./dates-disabled";

 export { dateIsInCurrentMonth, isValidDate, hasNextYear } from "./check-dates";
 export { getInitialYear } from "./get-initial-year";
-export { isMatch, isDateInRange, Matcher } from "./is-match";
+export { isMatch, isDateInRange, type Matcher } from "./is-match";
 export { nextEnabled } from "./navigation";
@@ -1,5 +1,5 @@
 export {
  default as Fieldset,
-  FieldsetProps,
+  type FieldsetProps,
  FieldsetContext,
 } from "./Fieldset";
@@ -1,9 +1,10 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import React, { useState } from "react";
 import { Checkbox, CheckboxGroup } from "../../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";

 export default {
-  title: "ds-react/Form/Checkbox",
+  title: "ds-react/Checkbox",
  component: Checkbox,
  subcomponents: {
    CheckboxGroup,
@@ -13,69 +14,73 @@ export default {
  },
 } as Meta;

-export const Default = (props) => {
-  const [state, setState] = useState(["checkbox1"]);
+export const Default = {
+  render: (props) => {
+    const [state, setState] = useState(["checkbox1"]);

-  return (
-    <div>
-      <CheckboxGroup
-        legend={props.legend}
-        description={props.description}
-        value={props.controlled ? state : undefined}
-        onChange={props.controlled ? setState : undefined}
-        hideLegend={props.hideLegend}
-        error={props.errorGroup ? "Errormelding for checkboxgruppe" : undefined}
-        size={props?.size}
-      >
-        <Checkbox
-          value="checkbox1"
-          indeterminate={props.indeterminate}
-          hideLabel={props.hideLabel}
-        >
-          {props.children || "Apple"}
-        </Checkbox>
-        <Checkbox
-          value="checkbox2"
-          error={props.errorSingle}
-          description={
-            props.checkboxDescription
-              ? "Quis laborum culpa enim amet cillum veniam."
-              : undefined
+    return (
+      <div>
+        <CheckboxGroup
+          legend={props.legend}
+          description={props.description}
+          value={props.controlled ? state : undefined}
+          onChange={props.controlled ? setState : undefined}
+          hideLegend={props.hideLegend}
+          error={
+            props.errorGroup ? "Errormelding for checkboxgruppe" : undefined
          }
-          indeterminate={props.indeterminate}
-          hideLabel={props.hideLabel}
+          size={props?.size}
        >
-          {props.children || "Orange"}
-        </Checkbox>
-        <Checkbox
-          value="checkbox3"
-          indeterminate={props.indeterminate}
-          hideLabel={props.hideLabel}
-        >
-          {props.children || "Banana"}
-        </Checkbox>
-        <Checkbox
-          value="checkbox4"
-          indeterminate={props.indeterminate}
-          hideLabel={props.hideLabel}
-        >
-          {props.children || "Melon"}
-        </Checkbox>
-      </CheckboxGroup>
-    </div>
-  );
-};
+          <Checkbox
+            value="checkbox1"
+            indeterminate={props.indeterminate}
+            hideLabel={props.hideLabel}
+          >
+            {props.children || "Apple"}
+          </Checkbox>
+          <Checkbox
+            value="checkbox2"
+            error={props.errorSingle}
+            description={
+              props.checkboxDescription
+                ? "Quis laborum culpa enim amet cillum veniam."
+                : undefined
+            }
+            indeterminate={props.indeterminate}
+            hideLabel={props.hideLabel}
+          >
+            {props.children || "Orange"}
+          </Checkbox>
+          <Checkbox
+            value="checkbox3"
+            indeterminate={props.indeterminate}
+            hideLabel={props.hideLabel}
+          >
+            {props.children || "Banana"}
+          </Checkbox>
+          <Checkbox
+            value="checkbox4"
+            indeterminate={props.indeterminate}
+            hideLabel={props.hideLabel}
+          >
+            {props.children || "Melon"}
+          </Checkbox>
+        </CheckboxGroup>
+      </div>
+    );
+  },

-Default.args = {
-  controlled: false,
-  legend: "Legend-tekst",
-  checkboxDescription: false,
-  hideLabel: false,
-  hideLegend: false,
-  errorSingle: false,
-  errorGroup: false,
-  children: "",
-  description: "",
+  args: {
+    controlled: false,
+    legend: "Legend-tekst",
+    checkboxDescription: false,
+    hideLabel: false,
+    hideLegend: false,
+    errorSingle: false,
+    errorGroup: false,
+    children: "",
+    description: "",
+  },
 };

 export const Group = () => (
@@ -1,2 +1,5 @@
-export { default as Checkbox, CheckboxProps } from "./Checkbox";
-export { default as CheckboxGroup, CheckboxGroupProps } from "./CheckboxGroup";
+export { default as Checkbox, type CheckboxProps } from "./Checkbox";
+export {
+  default as CheckboxGroup,
+  type CheckboxGroupProps,
+} from "./CheckboxGroup";
@@ -1,8 +1,8 @@
 import React from "react";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import { ErrorSummary } from "..";
 export default {
-  title: "ds-react/Form/Errorsummary",
+  title: "ds-react/Errorsummary",
  component: ErrorSummary,
  argTypes: {
    headingTag: {
@@ -19,18 +19,20 @@ export default {
  },
 } as Meta;

-export const Default = (props) => (
-  <ErrorSummary
-    heading="Feiloppsummering komponent"
-    headingTag={props.headingTag || "h2"}
-    size={props.size ?? undefined}
-  >
-    <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
-    <ErrorSummary.Item href="#2">
-      Tekstfeltet må ha en godkjent e-mail
-    </ErrorSummary.Item>
-  </ErrorSummary>
-);
+export const Default = {
+  render: (props) => (
+    <ErrorSummary
+      heading="Feiloppsummering komponent"
+      headingTag={props.headingTag || "h2"}
+      size={props.size ?? undefined}
+    >
+      <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+      <ErrorSummary.Item href="#2">
+        Tekstfeltet må ha en godkjent e-mail
+      </ErrorSummary.Item>
+    </ErrorSummary>
+  ),
+};

 export const Small = () => (
  <ErrorSummary heading="Feiloppsummering komponent" size="small">
@@ -1,2 +1,2 @@
 export { default as ErrorSummary } from "./ErrorSummary";
-export { ErrorSummaryProps } from "./ErrorSummary";
+export { type ErrorSummaryProps } from "./ErrorSummary";
@@ -1,18 +1,23 @@
 export {
  Checkbox,
  CheckboxGroup,
-  CheckboxGroupProps,
-  CheckboxProps,
+  type CheckboxGroupProps,
+  type CheckboxProps,
 } from "./checkbox";
 export {
-  ConfirmationPanelProps,
+  type ConfirmationPanelProps,
  default as ConfirmationPanel,
 } from "./ConfirmationPanel";
-export { ErrorSummary, ErrorSummaryProps } from "./error-summary";
-export { Fieldset, FieldsetContext, FieldsetProps } from "./Fieldset";
-export { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio";
-export { Search, SearchClearEvent, SearchProps } from "./search";
-export { default as Select, SelectProps } from "./Select";
-export { default as Switch, SwitchProps } from "./Switch";
-export { Counter, default as Textarea, TextareaProps } from "./Textarea";
-export { default as TextField, TextFieldProps } from "./TextField";
+export { ErrorSummary, type ErrorSummaryProps } from "./error-summary";
+export { Fieldset, FieldsetContext, type FieldsetProps } from "./Fieldset";
+export {
+  Radio,
+  RadioGroup,
+  type RadioGroupProps,
+  type RadioProps,
+} from "./radio";
+export { Search, type SearchClearEvent, type SearchProps } from "./search";
+export { default as Select, type SelectProps } from "./Select";
+export { default as Switch, type SwitchProps } from "./Switch";
+export { Counter, default as Textarea, type TextareaProps } from "./Textarea";
+export { default as TextField, type TextFieldProps } from "./TextField";
@@ -1,2 +1,2 @@
-export { default as Radio, RadioProps } from "./Radio";
-export { default as RadioGroup, RadioGroupProps } from "./RadioGroup";
+export { default as Radio, type RadioProps } from "./Radio";
+export { default as RadioGroup, type RadioGroupProps } from "./RadioGroup";
@@ -1,9 +1,10 @@
-import { Meta } from "@storybook/react/types-6-0";
+/* eslint-disable react-hooks/rules-of-hooks */
+import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { Radio, RadioGroup } from "../../index";

 export default {
-  title: "ds-react/Form/Radio",
+  title: "ds-react/Radio",
  component: Radio,
  subcomponents: {
    RadioGroup,
@@ -13,41 +14,45 @@ export default {
  },
 } as Meta;

-export const Default = (props) => {
-  const [state, setState] = useState("radio1");
+export const Default = {
+  render: (props) => {
+    const [state, setState] = useState("radio1");

-  return (
-    <RadioGroup
-      legend={props.legend}
-      description={props.description}
-      value={props.controlled ? state : undefined}
-      onChange={props.controlled ? setState : undefined}
-      hideLegend={props.hideLegend}
-      error={props.error ? "Errormelding" : undefined}
-      size={props?.size}
-    >
-      <Radio value="radio1">{props.children || "Apple"}</Radio>
-      <Radio
-        value="radio2"
-        description={props.radioDescription ? "Orange description" : undefined}
+    return (
+      <RadioGroup
+        legend={props.legend}
+        description={props.description}
+        value={props.controlled ? state : undefined}
+        onChange={props.controlled ? setState : undefined}
+        hideLegend={props.hideLegend}
+        error={props.error ? "Errormelding" : undefined}
+        size={props?.size}
      >
-        {props.children || "Orange"}
-      </Radio>
-      <Radio value="radio3">{props.children || "Banana"}</Radio>
-      <Radio value="radio4">{props.children || "Melon"}</Radio>
-    </RadioGroup>
-  );
-};
+        <Radio value="radio1">{props.children || "Apple"}</Radio>
+        <Radio
+          value="radio2"
+          description={
+            props.radioDescription ? "Orange description" : undefined
+          }
+        >
+          {props.children || "Orange"}
+        </Radio>
+        <Radio value="radio3">{props.children || "Banana"}</Radio>
+        <Radio value="radio4">{props.children || "Melon"}</Radio>
+      </RadioGroup>
+    );
+  },

-Default.args = {
-  controlled: false,
-  error: false,
-  size: "medium",
-  legend: "Legend-tekst",
-  radioDescription: false,
-  hideLegend: false,
-  children: "",
-  description: "",
+  args: {
+    controlled: false,
+    error: false,
+    size: "medium",
+    legend: "Legend-tekst",
+    radioDescription: false,
+    hideLegend: false,
+    children: "",
+    description: "",
+  },
 };

 export const Group = () => (
@@ -1 +1,5 @@
-export { default as Search, SearchProps, SearchClearEvent } from "./Search";
+export {
+  default as Search,
+  type SearchProps,
+  type SearchClearEvent,
+} from "./Search";
@@ -1,9 +1,10 @@
-import { Meta } from "@storybook/react/types-6-0";
+/* eslint-disable react-hooks/rules-of-hooks */
+import { Meta } from "@storybook/react";
 import React, { useState } from "react";

 import { Search } from "../index";
 export default {
-  title: "ds-react/Form/Search",
+  title: "ds-react/Search",
  component: Search,
  argTypes: {
    clearButton: {
@@ -31,28 +32,30 @@ export default {
  },
 } as Meta;

-export const Default = (props) => {
-  const [state, setState] = useState("");
-  return (
-    <div data-theme={props.darkmode ? "dark" : "light"}>
-      <Search
-        value={props.controlled ? state : undefined}
-        onChange={props.controlled ? setState : null}
-        label="Søk"
-        size={props.size}
-        clearButton={props.clearButton}
-        variant={props.variant}
-        hideLabel={props.hideLabel}
-        error={props.error}
-      />
-    </div>
-  );
-};
+export const Default = {
+  render: (props) => {
+    const [state, setState] = useState("");
+    return (
+      <div data-theme={props.darkmode ? "dark" : "light"}>
+        <Search
+          value={props.controlled ? state : undefined}
+          onChange={props.controlled ? setState : undefined}
+          label="Søk"
+          size={props.size}
+          clearButton={props.clearButton}
+          variant={props.variant}
+          hideLabel={props.hideLabel}
+          error={props.error}
+        />
+      </div>
+    );
+  },

-Default.args = {
-  controlled: false,
-  darkmode: false,
-  hideLabel: true,
+  args: {
+    controlled: false,
+    darkmode: false,
+    hideLabel: true,
+  },
 };

 export const Small = () => (
@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { ConfirmationPanel } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import { Link } from "../..";
 export default {
-  title: "ds-react/form/ConfirmationPanel",
+  title: "ds-react/ConfirmationPanel",
  component: ConfirmationPanel,
  argTypes: {
    size: {
@@ -25,22 +25,24 @@ const content = (
  </>
 );

-export const Default = (props) => {
-  return (
-    <ConfirmationPanel
-      error={props?.error}
-      size={props?.size}
-      checked={props?.checked ?? undefined}
-      label={props?.label ?? "Checkbox label text"}
-    >
-      {content}
-    </ConfirmationPanel>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <ConfirmationPanel
+        error={props?.error}
+        size={props?.size}
+        checked={props?.checked ?? undefined}
+        label={props?.label ?? "Checkbox label text"}
+      >
+        {content}
+      </ConfirmationPanel>
+    );
+  },

-Default.args = {
-  label: "Checkbox label text",
-  checked: false,
+  args: {
+    label: "Checkbox label text",
+    checked: false,
+  },
 };

 export const Small = () => {
@@ -1,9 +1,9 @@
 import React from "react";
 import { Fieldset } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import { TextField } from "../../index";
 export default {
-  title: "ds-react/form/Fieldset",
+  title: "ds-react/Fieldset",
  component: Fieldset,
  argTypes: {
    size: {
@@ -34,16 +34,18 @@ const content = (
  </>
 );

-export const Default = (props) => {
-  return (
-    <Fieldset legend="Mollit eiusmod" {...props}>
-      {content}
-    </Fieldset>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <Fieldset legend="Mollit eiusmod" {...props}>
+        {content}
+      </Fieldset>
+    );
+  },

-Default.args = {
-  errorPropagation: true,
+  args: {
+    errorPropagation: true,
+  },
 };

 export const Small = () => (
@@ -1,8 +1,8 @@
 import React from "react";
 import { Select } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 export default {
-  title: "ds-react/form/Select",
+  title: "ds-react/Select",
  component: Select,
  argTypes: {
    size: {
@@ -34,15 +34,17 @@ const content = (
  </>
 );

-export const Default = (props) => {
-  return (
-    <Select {...props} label="Ipsum enim quis culpa">
-      {content}
-    </Select>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <Select {...props} label="Ipsum enim quis culpa">
+        {content}
+      </Select>
+    );
+  },

-Default.args = {};
+  args: {},
+};

 export const Small = () => {
  return (
@@ -1,9 +1,9 @@
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import React from "react";
 import { Switch } from "../index";

 export default {
-  title: "ds-react/form/Switch",
+  title: "ds-react/Switch",
  component: Switch,
  argTypes: {
    size: {
@@ -33,12 +33,14 @@ export default {
  },
 } as Meta;

-export const Default = (props) => {
-  return <Switch {...props}>Label text</Switch>;
-};
+export const Default = {
+  render: (props) => {
+    return <Switch {...props}>Label text</Switch>;
+  },

-Default.args = {
-  position: "right",
+  args: {
+    position: "right",
+  },
 };

 export const Small = () => {
@@ -1,8 +1,8 @@
 import React from "react";
 import { TextField } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 export default {
-  title: "ds-react/form/TextField",
+  title: "ds-react/TextField",
  component: TextField,
  argTypes: {
    size: {
@@ -26,11 +26,13 @@ export default {
  },
 } as Meta;

-export const Default = (props) => {
-  return <TextField {...props} label="Ipsum enim quis culpa" />;
-};
+export const Default = {
+  render: (props) => {
+    return <TextField {...props} label="Ipsum enim quis culpa" />;
+  },

-Default.args = {};
+  args: {},
+};

 export const Small = () => {
  return <TextField size="small" label="Ipsum enim quis culpa" />;
@@ -1,8 +1,8 @@
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import React from "react";
 import { Textarea } from "../index";
 export default {
-  title: "ds-react/form/Textarea",
+  title: "ds-react/Textarea",
  component: Textarea,
  argTypes: {
    size: {
@@ -32,19 +32,21 @@ export default {
  },
 } as Meta;

-export const Default = (props) => {
-  return (
-    <Textarea
-      {...props}
-      maxLength={props?.maxLength ?? 100}
-      label="Ipsum enim quis culpa"
-    />
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <Textarea
+        {...props}
+        maxLength={props?.maxLength ?? 100}
+        label="Ipsum enim quis culpa"
+      />
+    );
+  },

-Default.args = {
-  maxLength: 100,
-  resize: false,
+  args: {
+    maxLength: 100,
+    resize: false,
+  },
 };

 export const Small = () => {
@@ -1,6 +1,6 @@
-export { default as Cell, CellProps } from "./Cell";
-export { default as Grid, GridProps } from "./Grid";
+export { default as Cell, type CellProps } from "./Cell";
+export { default as Grid, type GridProps } from "./Grid";
 export {
  default as ContentContainer,
-  ContentContainerProps,
+  type ContentContainerProps,
 } from "./ContentContainer";
@@ -1,6 +1,6 @@
 import React from "react";
 import { BodyLong, GuidePanel } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 export default {
  title: "ds-react/GuidePanel",
  component: GuidePanel,
@@ -11,26 +11,28 @@ adipisicing proident. Tempor ipsum ea cupidatat qui esse do veniam
 cupidatat. Excepteur irure reprehenderit esse tempor nisi duis qui ea
 enim id.`;

-export const Default = (props) => {
-  const newProps = props?.colorOverride
-    ? {
-        style: {
-          ["--ac-guide-panel-illustration-bg" as any]: "var(--a-purple-200)",
-          ["--ac-guide-panel-border" as any]: "var(--a-purple-400)",
-        },
-      }
-    : {};
+export const Default = {
+  render: (props) => {
+    const newProps = props?.colorOverride
+      ? {
+          style: {
+            ["--ac-guide-panel-illustration-bg" as any]: "var(--a-purple-200)",
+            ["--ac-guide-panel-border" as any]: "var(--a-purple-400)",
+          },
+        }
+      : {};

-  return (
-    <GuidePanel {...newProps} poster={props?.poster}>
-      {panelText}
-    </GuidePanel>
-  );
-};
+    return (
+      <GuidePanel {...newProps} poster={props?.poster}>
+        {panelText}
+      </GuidePanel>
+    );
+  },

-Default.args = {
-  poster: false,
-  colorOverride: false,
+  args: {
+    poster: false,
+    colorOverride: false,
+  },
 };

 export const Poster = () => <GuidePanel poster>{panelText}</GuidePanel>;
@@ -1,3 +1,3 @@
-export { default as GuidePanel, GuidePanelProps } from "./GuidePanel";
-export { GuideProps } from "./Guide";
+export { default as GuidePanel, type GuidePanelProps } from "./GuidePanel";
+export { type GuideProps } from "./Guide";
 export { DefaultIllustration as GuideDefaultIllustration } from "./Illustration";
@@ -36,16 +36,18 @@ export default {
  },
 };

-export const Default = (props: any) => {
-  return (
-    <HelpText title="show tooltip" strategy="fixed" {...props}>
-      Id ullamco excepteur elit fugiat labore.
-    </HelpText>
-  );
-};
+export const Default = {
+  render: (props: any) => {
+    return (
+      <HelpText title="show tooltip" strategy="fixed" {...props}>
+        Id ullamco excepteur elit fugiat labore.
+      </HelpText>
+    );
+  },

-Default.args = {
-  title: "show tooltip",
+  args: {
+    title: "show tooltip",
+  },
 };

 export const Open = () => {
@@ -1,2 +1,2 @@
 export { default as HelpText } from "./HelpText";
-export { HelpTextProps } from "./HelpText";
+export { type HelpTextProps } from "./HelpText";
@@ -1,27 +1,28 @@
 export * from "./accordion";
 export * from "./alert";
-export * from "./provider";
 export * from "./button";
+export * from "./chat";
+export * from "./chips";
 export * from "./date";
 export * from "./form";
 export * from "./grid";
-export * from "./help-text";
 export * from "./guide-panel";
+export * from "./help-text";
 export * from "./link";
 export * from "./link-panel";
+export * from "./list";
 export * from "./loader";
 export * from "./modal";
 export * from "./pagination";
 export * from "./panel";
 export * from "./popover";
+export * from "./provider";
 export * from "./read-more";
-export * from "./chat";
-export * from "./chips";
 export * from "./stepper";
-export * from "./tag";
-export * from "./toggle-group";
 export * from "./table";
 export * from "./tabs";
+export * from "./tag";
+export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import cl from "clsx";
-import { OverridableComponent } from "..";
+import { OverridableComponent } from "../util/OverridableComponent";

 interface LinkPanelTitleProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
@@ -1,2 +1,2 @@
 export { default as LinkPanel } from "./LinkPanel";
-export { LinkPanelProps } from "./LinkPanel";
+export { type LinkPanelProps } from "./LinkPanel";
@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import React from "react";
 import { LinkPanel } from "..";

@@ -14,23 +14,25 @@ export default {
  },
 } as Meta;

-export const Default = (props: any) => {
-  return (
-    <LinkPanel href="#" border={props?.border}>
-      <LinkPanel.Title>
-        Consectetur eu duis aliqua eu irure fugiat fugiat eu.
-      </LinkPanel.Title>
-      {props.description && (
-        <LinkPanel.Description>
-          Aliqua id aliquip Lorem esse
-        </LinkPanel.Description>
-      )}
-    </LinkPanel>
-  );
-};
+export const Default = {
+  render: (props: any) => {
+    return (
+      <LinkPanel href="#" border={props?.border}>
+        <LinkPanel.Title>
+          Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+        </LinkPanel.Title>
+        {props.description && (
+          <LinkPanel.Description>
+            Aliqua id aliquip Lorem esse
+          </LinkPanel.Description>
+        )}
+      </LinkPanel>
+    );
+  },

-Default.args = {
-  description: false,
+  args: {
+    description: false,
+  },
 };

 export const Description = () => {
@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import cl from "clsx";
-import { OverridableComponent } from "..";
+import { OverridableComponent } from "../util/OverridableComponent";

 export interface LinkProps
  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -1,2 +1,2 @@
 export { default as Link } from "./Link";
-export { LinkProps } from "./Link";
+export { type LinkProps } from "./Link";
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	0cba7a93b8	Version Packages (#1829 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-28 15:47:06 +01:00
Kai Erik Schieren Ken Ken github-actions[bot]Ken github-actions[bot]Snyk bot	a7ce61f840	New/list (#1823 ) * 🎉 setup * 💄 add stylesheet * 🎨 conditional type * 🎨 add listitem * 🎨 add title + desc + refactor * 🎨 added title and description * ♿ add aria labels * 🎨 add headingTag prop * 🎨 add stories * 🎨 update ListItem API * 💄 ul markers * 🎨 update markers * 🎨 add icons story * 🎨 ordered markers * 🎨 update stories * 🎨 tweak list props * 💄 update classes * 💄 update classes again * 🎨 remove icon if ol * 🎨 update stories * 🎨 use default counter for ol * 🎨 h4 > span * 🎨 use bodyshort default * 🎨 update stories * 🎨 tweaks * 🎨 Css-tokens * 🎨 update aria Co-authored-by: Ken <KenAJoh@users.noreply.github.com> * 🎨 refactor css and remove test story co authored by OleJørgen and Ken * 🎨 add examples * 🎨 update examples * Update @navikt/core/css/list.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/list.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * 🎨 La til tokens-doc * 🔖 changeset * 🎨 add console warn * 💄 tweak margin to support nested list * 🎨 nested story * 🎨 add nested example * 🚧 detect nested lists * 💄 change margins for nested lists * 💄 tweak margins * Update @navikt/core/react/src/list/List.tsx * ⬆️ Storybook beta 45 -> 54 * ✨ add fixedWeeks option to standalone (#1827) * ✨ add fixedWeeks option to standalone * 🔖 changeset * ♿ Fikset siteimprove feilmeldinger for kode-eksempler * Version Packages (#1828) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * 🔥 Fjernet redundant console.log * [Snyk] Security upgrade node from 16.13.1-alpine3.14 to 18.1-alpine3.14 (#1826) * 🔖 changeset --------- Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: Ken <KenAJoh@users.noreply.github.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Snyk bot <snyk-bot@snyk.io>	2023-02-28 15:44:13 +01:00
Snyk bot	35e8da7811	[Snyk] Security upgrade node from 16.13.1-alpine3.14 to 18.1-alpine3.14 (#1826 )	2023-02-28 14:59:28 +01:00
Ken	8953185f80	🔥 Fjernet redundant console.log	2023-02-28 14:23:44 +01:00
github-actions[bot]andgithub-actions[bot]	43b0301d7c	Version Packages (#1828 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-28 14:03:10 +01:00
Ken	d77b766a56	♿ Fikset siteimprove feilmeldinger for kode-eksempler	2023-02-28 13:36:40 +01:00
Kai Erik Schieren	98c06b0be2	✨ add fixedWeeks option to standalone (#1827 ) * ✨ add fixedWeeks option to standalone * 🔖 changeset	2023-02-28 13:30:28 +01:00
Ken	61b84e14fb	⬆️ Storybook beta 45 -> 54	2023-02-28 12:24:30 +01:00
KenandKai Erik Schieren	edbbc53cdb	[Website] Oppdatert next 12 -> 13.2, sanity 3.2 -> 3.5 (#1822 ) Co-authored-by: Kai Erik Schieren <kai.schieren@soprasteria.com>	2023-02-24 11:30:56 +01:00
github-actions[bot]andgithub-actions[bot]	5c78776941	Version Packages (#1819 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-23 12:10:28 +01:00
Kai Erik Schieren Ken Ken Ken	70eeb24b38	List komponent (#1807 ) * 🎉 setup * 💄 add stylesheet * 🎨 conditional type * 🎨 add listitem * 🎨 add title + desc + refactor * 🎨 added title and description * ♿ add aria labels * 🎨 add headingTag prop * 🎨 add stories * 🎨 update ListItem API * 💄 ul markers * 🎨 update markers * 🎨 add icons story * 🎨 ordered markers * 🎨 update stories * 🎨 tweak list props * 💄 update classes * 💄 update classes again * 🎨 remove icon if ol * 🎨 update stories * 🎨 use default counter for ol * 🎨 h4 > span * 🎨 use bodyshort default * 🎨 update stories * 🎨 tweaks * 🎨 Css-tokens * 🎨 update aria Co-authored-by: Ken <KenAJoh@users.noreply.github.com> * 🎨 refactor css and remove test story co authored by OleJørgen and Ken * 🎨 add examples * 🎨 update examples * Update @navikt/core/css/list.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/list.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * 🎨 La til tokens-doc * 🔖 changeset --------- Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: Ken <KenAJoh@users.noreply.github.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2023-02-23 12:04:05 +01:00
Ken	2b98dd9c15	📝 Forbedret tekster på forside	2023-02-22 14:34:38 +01:00
Ken	84946d4d4d	🎨 Kode-lenker på /komponenter	2023-02-22 14:32:30 +01:00
Ken	ce7af9dd13	🐛 Fikset CC-år i footer	2023-02-22 14:26:13 +01:00
github-actions[bot]andgithub-actions[bot]	b769d21d7c	Version Packages (#1818 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-22 13:54:03 +01:00
Ken	241b2e678f	🐛 Fikset feil bruk av fallback-tokens i textarea, timeline	2023-02-22 13:48:15 +01:00
Ken	c3e7bc0ada	📝 Linter	2023-02-22 13:43:56 +01:00
github-actions[bot]andgithub-actions[bot]	90ae03a7fc	Version Packages (#1816 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-21 23:24:25 +01:00
Ken	51b62cca7b	📝 Changeset	2023-02-21 23:05:08 +01:00
Ken	b2213e934f	💄 Fikset select-small høyde 34px -> 32px	2023-02-21 23:03:30 +01:00
Ingrid Fosså	7702c65275	Fiksar midtstilling av tekst i Select for Firefox (#1813 )	2023-02-21 22:59:06 +01:00
Ken	176e78bc56	📝 Endre eksempel-tekst for button	2023-02-17 12:03:53 +01:00
Ken	4f510eaade	📄	2023-02-17 11:27:45 +01:00
Ken	2e712e77fa	🏷️ Fikset skrivefeil	2023-02-16 15:14:20 +01:00
Ken	30fca8acdd	🎨 Send-forslag knapp nå default button secondary neutral	2023-02-16 14:29:44 +01:00
Ken	8119d93ca9	🚚 Flyttet netural-varianter ut til egne demoer	2023-02-16 14:26:17 +01:00
github-actions[bot]andgithub-actions[bot]	d81e67c374	Version Packages (#1809 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-16 13:49:07 +01:00
Ken	43463444b8	💄 Justering semantiske farger, tokens (#1787 )	2023-02-16 13:42:02 +01:00
Ken	c0929a534d	💄 Neutral-variant av Button og ToggleGroup (#1789 )	2023-02-16 13:23:53 +01:00
Ken	859eac8ccb	🎨 Oppdatert feedback-visning i sanity	2023-02-15 15:36:44 +01:00
Ken	34a1e090e2	♿ Fikset siteimprove feilmeldinge relatert til ikke-justerbar tekst	2023-02-15 09:34:07 +01:00
Ken	37e195d8b1	⚡ Allokert mer ressurser for testing av raskere søk	2023-02-14 20:55:48 +01:00
Ken	df5c36012b	🎨 Oppdatert dato for copyright	2023-02-14 19:16:28 +01:00
Ken	abdc99850c	🎨 Liten forbedring feedback	2023-02-14 19:15:16 +01:00
Ken	fa90f48e83	📝 Nettside Readme	2023-02-14 15:10:18 +01:00
Ken	90ad65d6d7	🐛 Storybook build brakk, som da brakk chromatic	2023-02-14 14:13:56 +01:00
Ken	1a34754be1	💄 Bedre visning av popover-demo for placement	2023-02-14 14:11:19 +01:00
Ken	15f056cc27	🎨 Oppdatert forsidelenker til å gå direkte til mest relevante sider	2023-02-14 14:05:50 +01:00
Ken	f15312a9d7	✅ Fikset feilet test etter refactor av eksemplel-generings script	2023-02-14 12:12:40 +01:00
Ken	c23cb8445a	🎨 Fikset kodeeksempler, fjernet storybook-snippet fra publisert kode 🎨 Oppdatert kodedemo for popover	2023-02-14 11:57:48 +01:00
Martin Berglund	3c97e0f1ea	Legger til støtte for kyrillisk alfabet i Source Sans 3 (#1805 )	2023-02-13 12:33:13 +01:00
Ken	abdeb6f0fe	Merge branch 'main' of https://github.com/navikt/aksel	2023-02-10 17:06:28 +01:00
Ken	9e940aa91a	🎨 La til cross-env for storybook-dev	2023-02-10 17:06:21 +01:00
Ken	b92fe88d3f	✨ Eksempler på aksel.nav.no blir nå lastet i Storybook for dev (#1803 )	2023-02-10 16:41:50 +01:00
Ken	4d9ddc3a73	🔧 Storybook-redirect ikke lenger permanent	2023-02-10 14:42:41 +01:00
Ken	c565f3ca91	✨ Satt opp story-rendering for next-appen (#1796 )	2023-02-09 15:45:07 +01:00
Ole Jørgen Bakken Ole Jørgen Ken	5f1fb0a4a1	Ikon label og tekstendringer (#1798 ) Co-authored-by: Ole Jørgen <olejorgenbakken@icloud.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2023-02-09 14:29:23 +01:00
github-actions[bot]andgithub-actions[bot]	b6d98c557c	Version Packages (#1797 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-09 13:01:06 +01:00
Ken	6ac97aeb34	🐛 Fikset rekkefølge på onValidate og onRangeChange i useRangepicker-hook	2023-02-09 12:58:35 +01:00
Ken	94e69ea7a8	🐛 Fikset chromatic-visning i PR	2023-02-09 11:21:31 +01:00
Ken	c0dc296073	🐛 Fikset chromatic-visning i PR	2023-02-09 11:12:46 +01:00
Ken	28954f8ce6	👷 Oppdatert visning av chormatic-melding i PR-er	2023-02-09 10:52:03 +01:00
Ken	6976156c1a	Oppdatert til storybook 7, webpack -> vite (#1795 )	2023-02-09 10:15:03 +01:00
Ken	0303d5f1d4	📝 Readmes lenker	2023-02-08 15:17:34 +01:00
Ken	bd320ca815	👷 Oppdatert versjoner brukt i workflows (#1792 )	2023-02-08 15:09:19 +01:00
Ken	11c0cf3771	🎨 Ignorerer button-stories	2023-02-08 15:01:53 +01:00
Kai Erik Schieren	e395c113af	🚚 Designsystemet > aksel	2023-02-08 13:50:23 +01:00
Kai Erik Schieren	da0a5f409b	💚 update IMAGE	2023-02-08 13:37:18 +01:00
Kai Erik Schieren	81ff1098ab	master > main	2023-02-08 13:01:16 +01:00
Ken	79773ff44b	Merge branch 'next'	2023-02-07 15:45:39 +01:00
Ken	1e7633e692	Merge branch 'master' into next	2023-02-07 15:13:39 +01:00
Martin Berglund	ba22ba7b70	Source Sans 3 Latin Extended (#1791 )	2023-02-07 15:12:37 +01:00
Ken	ccedba0132	🐛 Fikset e2e-tester for uu	2023-02-07 14:00:12 +01:00
Vegard Haugstvedt	2dbc5125d6	Unpublished articles crash in preview mode, because the page does not exist (#1788 )	2023-02-07 11:59:46 +01:00
Ken	bdf83d447f	♿ Disable animasjon for safari-brukere (voiceover-problem)	2023-02-07 09:43:09 +01:00
Ken	da9445389e	📝 Readmes	2023-02-06 16:37:36 +01:00
Ken	c0601bb510	🐛 prod-deploy workflow har å riktige .env nøkler	2023-02-06 16:35:39 +01:00
Ken	e20df992ec	🎨 Bruker defaults readiness og readiness i dev	2023-02-06 16:26:23 +01:00
Ken	d42200b61f	👷 Flyttet sanity-synk ut i egen GHA-job	2023-02-06 16:24:44 +01:00
Ken	4e5f422693	👷 Oppdatert docker/login action for node 16 support	2023-02-06 16:01:32 +01:00
Ken	2c77e103f9	⚡ Bruker default nais resouces	2023-02-06 15:47:56 +01:00
Ken	45e9e5f564	👷 Prod-workflow venter nå på smoketest før deploy	2023-02-06 15:44:52 +01:00
Kai Erik Schieren	6b1f9f1560	👷 add snyk to prod workflow	2023-02-06 15:40:28 +01:00
Ken	eb50604788	👷 Tester alle sider med playwright	2023-02-06 15:25:08 +01:00
Ken	5ca140d4f7	Oppdatert isProduction-testing (#1786 )	2023-02-06 15:21:18 +01:00
Kai Erik Schieren	7943489380	👷 test root only	2023-02-06 14:16:33 +01:00
Kai Erik Schieren	82cdd68d00	👷 snyk continue-on-error	2023-02-06 14:08:52 +01:00
Kai Erik Schieren	76af311b63	👷 snyk ignore out of sync	2023-02-06 14:02:56 +01:00
Kai Erik Schieren	b624bff400	🎨 --all-projects > --yarn-workspaces	2023-02-06 13:58:34 +01:00
Kai Erik Schieren	d5ab822973	👷 change snyk org name	2023-02-06 13:40:35 +01:00
Kai Erik Schieren	c8b230fc1c	Snyk workflow (#1785 ) * ✨ add snyk workflow to dev * 🎨 add all-projects arg	2023-02-06 13:36:49 +01:00
Ken	d35f7326d7	⬆️ Yarn.lock sync	2023-02-06 12:58:14 +01:00
Ken	eb07f63d12	⬆️ Yarn.lock sync	2023-02-06 09:45:35 +01:00
Ken	df42875d41	♿ Bedre aria for search-shortcut, shortcut fungerer nå ikke ved shift	2023-02-06 09:29:30 +01:00
Ken	404274003c	👷 Ignore scripts-dir ved nextjs build	2023-02-05 18:53:50 +01:00
Ken	fc9c5170b9	👷 Fjernet docgen og ubrukt fil i dockerfile	2023-02-05 18:42:12 +01:00
Ken	dc2f1958ff	👷 Dev-miljø støtter flere branches	2023-02-05 18:23:53 +01:00
Ken	fc9196ad6f	📝 Oppdatert nextjs-config	2023-02-04 21:17:53 +01:00
Ken	9cfc03fe6b	🔥 Fjernet ubrukte scripts og imports for slettet sanity-løsning	2023-02-04 21:08:46 +01:00
Ken	9b8ed2d985	📝 readmes	2023-02-04 21:02:45 +01:00
Ken	728dd2ead3	⚰️ Fjernet gammel sanity-v2 løsning	2023-02-04 21:02:18 +01:00
Ken	71fbe7d7f2	✨ Sanity cli fungerer nå i /website	2023-02-04 15:06:30 +01:00
Ken	2a4447b6e7	Merge branch 'master' of https://github.com/navikt/Designsystemet	2023-02-04 15:02:55 +01:00
Vegard Haugstvedt	aaad005455	Publish accessibility statement for Aksel.nav.no (#1782 )	2023-02-03 16:30:48 +01:00
Ken	3bb4a2e36f	🎨 visning av standalone-sider	2023-02-03 16:14:16 +01:00
Ken	f346a4694c	🎨 Cacher resultater fra sanity	2023-02-03 16:09:20 +01:00
Ken	51c0883255	Merge branch 'next'	2023-02-03 14:00:31 +01:00
Ken	45e67d5b50	🎨 Logging av success søk	2023-02-03 13:58:20 +01:00
Ken	6739d29074	🔥 Fjernet console.log	2023-02-03 13:19:44 +01:00
Ken	189858a9d7	🎨 Logging av standard og feilet søk	2023-02-03 13:19:18 +01:00
Kai Erik Schieren	f1731730fa	Usage metrics (#1740 )	2023-02-03 12:09:08 +01:00
Ken	1b37aad4dc	🐛 Fikset onClick på lenker i sanityblockcontent	2023-02-03 12:05:36 +01:00
Ken	323018a935	🐛 Opacity-endring brakk alle token visninger	2023-02-03 12:03:18 +01:00
Ken	7b6e5f2e60	🎨 uu-feedback for standalone sider	2023-02-03 12:00:43 +01:00
Ken	5557fc2ef0	🎨 uu-feedback modul sanity	2023-02-03 10:46:11 +01:00
Ken	6c07afe963	🎨 Oppdatert hotkey for søk	2023-02-03 10:39:10 +01:00
Ken	ac217adaa6	🎨 Fikset aria-status opplesing	2023-02-03 10:32:29 +01:00
Ken	5c50658036	🎨 Søk støtter visning og søk på kode-eksempler	2023-02-02 16:10:09 +01:00
Ken	8ab100dfb3	Merge branch 'next' of https://github.com/navikt/Designsystemet into next	2023-02-02 13:42:31 +01:00
Ken	3ac20c695c	🎨 Tagger basert på status på søketreff	2023-02-02 13:40:35 +01:00
github-actions[bot]andgithub-actions[bot]	218707905e	Version Packages (#1778 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-02 13:28:59 +01:00
Kai Erik Schieren	72f1ab0c85	🎨 fix frontpage tema preview (#1779 )	2023-02-02 13:28:20 +01:00
Ken	2c57117098	📱 Tilpasset header for mobil	2023-02-02 13:25:22 +01:00
Ken	f6ba5e1219	🎨 Justert header for riktig høyde	2023-02-02 13:12:16 +01:00
Ken	1c53160a2a	♿ Aria-hidden på åpne-søk knapp	2023-02-02 13:05:56 +01:00
Ken	22527c073f	🎨 Fikset href for søk	2023-02-02 12:54:29 +01:00
Ken	5b41ecac4c	💄 Fikset margin-top ved tom beskrivelse	2023-02-02 12:53:07 +01:00
Ken	14e07e4ca6	🔥 Fjernet ubrukt funksjonsvariabel	2023-02-02 12:49:57 +01:00
Ken	cd1c93f9d4	openOnFocus-prop for useDatepicker/useMonthpicker (#1777 )	2023-02-02 12:42:17 +01:00
Ken	545864553f	🎨 Bedre lasting og visning av ikoner	2023-02-02 12:40:13 +01:00
Ken	3b2f10fb91	🎨 Ikonsøk i søket	2023-02-02 11:43:32 +01:00
Ken	bec7d5945f	🎨 Visning for ikoner	2023-02-02 11:17:54 +01:00
Ken	f32bd408a2	🎨 Bedre highlighting basert på multiword string	2023-02-02 02:02:06 +01:00
Ken	7ba8c466f4	🎨 Lagt til github for image-providing	2023-02-02 00:07:42 +01:00
Ken	bede18133c	🎨 Clamping på komponent-description	2023-02-01 23:46:23 +01:00
Ken	81e65cc0ab	🎨 Fikset z-level stacking ved bruk av flere modaler	2023-02-01 23:24:35 +01:00
Ken	5acdbe33c1	🎨 Loading-state funker nå ved søk med samme query	2023-02-01 23:19:15 +01:00
Ken	727999ba72	🎨 Redusert api-fetch reponse size 20x	2023-02-01 19:40:40 +01:00
Ken	7ad82450b4	🎨 Refaktorert API-respons for søk	2023-02-01 19:06:51 +01:00
Ken	a72e965785	🏷️ Flyttet typer ut til lib	2023-02-01 18:43:24 +01:00
Ken	e3fd48728b	🚚 Flyttet Hit og Group ut i egen fil	2023-02-01 18:30:37 +01:00
Ken	89c3603765	🎨 Bedre staehandling for lukking av search	2023-02-01 16:27:18 +01:00
Ken	03f7034fca	📝 Skrivefeil options	2023-02-01 16:11:37 +01:00
Ken	527ba00287	Update GlobalSearch.tsx	2023-02-01 16:11:00 +01:00
Ken	b3831f0b1c	🎨 Fikset build	2023-02-01 16:08:57 +01:00
Ken	0549ad19b6	🎨 Oppdaterert og åpner søk basert på url-queries	2023-02-01 14:12:00 +01:00
Ken	7d1095fd96	📝 Todos	2023-02-01 13:18:35 +01:00
Ken	acb1d0b955	♿ Oppdatert semantikk for skjermleser i søk	2023-02-01 13:11:22 +01:00
Ken	4fc51e00b5	Merge branch 'master' into sanity-search	2023-02-01 12:04:00 +01:00
Ken	796bb5225f	🔊 Oppdatert logging av lenker	2023-02-01 10:06:44 +01:00
Ken	9ff2830297	⬆️ Oppdatert Sanity	2023-02-01 09:36:29 +01:00
Ken	d40939458a	🐛 Disable dev-workspace in sanity	2023-01-31 16:11:14 +01:00
Kai Erik Schieren	310974b3c3	🎨 filter states & filter hit count	2023-01-31 15:43:49 +01:00
Ken	73b30a8ea7	🐛 Fikset onClick button	2023-01-31 13:46:29 +01:00
Ken	790e70a90d	💄 Redesign header og søkeknapp	2023-01-31 13:29:43 +01:00
Ken	4114cecd93	💄 Oppdatert markering av treff	2023-01-31 12:12:04 +01:00
Ken	797f48a9fb	🎨 Tags på god-praksis i søk	2023-01-31 12:04:03 +01:00
Ken	13d3007293	Merge branch 'master' into sanity-search	2023-01-31 11:18:00 +01:00
Ken	c0cb5a02b3	Merge master	2023-01-31 10:59:10 +01:00
Ken	66badd5df5	🎨 Filter	2023-01-30 18:06:47 +01:00
Ken	7360426aef	🎨 Modal funker nå på desktop	2023-01-30 16:15:19 +01:00
Ken	b71d407396	🎨 scroll active element into view	2023-01-30 15:11:50 +01:00
Ken	ca7c4964a2	🎨 Z-stacking for header-menyer	2023-01-30 13:50:41 +01:00
Ken	5e078db3fd	🎨 Struktur hamburgermeny og søk i header	2023-01-30 13:33:13 +01:00
Ken	eb32b0a80b	🎨 Rename search-navn	2023-01-30 13:18:25 +01:00
Ken	b56f83bf50	Merge branch 'master' into sanity-search	2023-01-30 13:15:05 +01:00
Ken	b55bfac1c3	🎨 Eventlisteners ved keyboard-navigering	2023-01-30 11:19:51 +01:00
Ken	de2dcdcc15	🎨 Søk i modal og header	2023-01-27 19:59:32 +01:00
Ken	12e95d063a	💄 Loader size	2023-01-27 19:25:08 +01:00
Ken	643ae3bc15	🎨 Temp-lagring av sanity-data	2023-01-27 19:24:02 +01:00
Ken	73f5f9fbfd	🎨 Loader ved empty-state	2023-01-27 14:04:58 +01:00
Ken	527fe4f0c1	🎨 Justert søketreff-config	2023-01-27 13:56:32 +01:00
Ken	1a9214e328	⬆️ yarn lock	2023-01-27 13:24:50 +01:00
Ken	8c0b2363e0	Merge branch 'master' into sanity-search	2023-01-27 13:23:15 +01:00
Ken	6d38b7bbdd	♿ ul > li for søketreff	2023-01-26 11:42:05 +01:00
Ken	936e794e2f	🎨 Juster søk-config for bedre komponent-treff	2023-01-26 10:37:27 +01:00
Ken	500eecc43d	📝 todos	2023-01-26 09:24:20 +01:00
Ken	2ac73a7812	📝 todos	2023-01-26 09:17:32 +01:00
Ken	451dacb14a	📝 todos	2023-01-26 09:15:00 +01:00
Ken	e6228c103d	🎨 Thumbnail-bilde preview	2023-01-25 22:32:00 +01:00
Ken	572d913718	🎨 La til hr-element som divider	2023-01-25 22:19:57 +01:00
Ken	c0cd0dd66f	🎨 Bedre comparisons med lowercase i highlighting	2023-01-25 18:39:02 +01:00
Ken	613e20eb12	📝 Lagt til todos	2023-01-25 15:53:43 +01:00
Ken	4bf0506362	💄 Stylet search-hit	2023-01-25 15:50:37 +01:00
Ken	5997db2b38	🎨 Oppdatert tailwind config med nye farger	2023-01-25 15:03:58 +01:00
Ken	9f18063fe5	🎨 La data fra søkeresultat inn i 'item'-key	2023-01-25 14:52:11 +01:00
Vegard Haugstvedt	b037114863	🎨 Convert const arrow functions to regular functions	2023-01-25 14:12:44 +01:00
Vegard Haugstvedt	e47521d6e5	🎨 Refaktorert kode for å håndtere docQuery verdier for Søk	2023-01-25 14:03:26 +01:00
Vegard Haugstvedt	61357fb40a	🎨 Endre options-format til objekt, og legg inn støtte for flere tags i fetch-kall	2023-01-25 13:36:02 +01:00
Ken	5678d4cf10	🎨 Fikset highlighting	2023-01-25 13:02:57 +01:00
Ken	d403c09b1a	🎨 Prototype med highlighting	2023-01-25 13:02:37 +01:00
Ken	deff5b25b2	🔥 Fjernet console.log	2023-01-24 13:58:18 +01:00
Ken	31e60deea8	🎨 Selektiv visning av grupper basert på tags	2023-01-24 13:55:23 +01:00
Ken	847142dc72	🎨 Search-gruppering og visning	2023-01-24 13:19:19 +01:00
Ken	a5b3ad81a7	🎨 Throttled-search	2023-01-24 12:36:07 +01:00
Ken	fe1ac779bf	🎨 Bedre initial-search	2023-01-24 11:47:12 +01:00
Ken	064b2fc612	Merge branch 'master' into sanity-search	2023-01-24 11:39:35 +01:00
Ken	5d57586dc1	🎨 Chips oppdaterer nyeste artikler visning	2022-12-29 19:49:19 +01:00
Ken	e8d012b82d	🎨 Fuse-search	2022-12-28 15:12:24 +01:00
Ken	4e90102efd	🎨 Bedre fine-grained query	2022-12-27 16:01:21 +01:00
Ken	02c55aaa0f	🎨 query	2022-12-27 14:22:06 +01:00
Ken	8d4ee29d78	🎉 Nytt søk	2022-12-27 14:08:45 +01:00