Version Packages (#1876 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🌐 Textarea-tekster (#1875 )
2026-10-13 01:02:02 +00:00 · 2023-03-23 13:04:48 +01:00 · 2023-03-23 13:01:49 +01:00 · 2023-03-21 14:36:39 +01:00 · 2023-03-21 14:22:57 +01:00 · 2023-03-21 14:20:30 +01:00
148 changed files with 3592 additions and 1616 deletions
@@ -5,9 +5,6 @@ on:
    branches:
      - next

-env:
-  IMAGE: ghcr.io/navikt/aksel
-
 jobs:
  snyk-monitor:
    name: monitor dependencies
@@ -57,6 +54,10 @@ jobs:
          echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
          echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env

+      - name: Hide page from search engines
+        run: |
+          echo "User-agent: *\nDisallow: /" > aksel.nav.no/website/public/robots.txt
+
      - name: Restore cache
        uses: actions/cache@v3
        with:
@@ -80,21 +81,17 @@ jobs:
          source: ./aksel.nav.no/website/.next/static
          destination: "/website/_next"

-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
      - name: Get complete tag
        run: echo "TAG=DEV-$( date +%s )" >> $GITHUB_ENV
-      - name: Create docker image tags
-        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: Push docker image
-        run: |
-          docker push ${{ env.DOCKER_TAG }}
+
+      - uses: nais/docker-build-push@v0
+        id: docker-push
+        with:
+          team: designsystem
+          push_image: true
+          dockerfile: aksel.nav.no/Dockerfile
+          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
+          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}

      - name: Deploy to dev-gcp
        uses: nais/deploy/actions/deploy@master
@@ -102,4 +99,4 @@ jobs:
          APIKEY: ${{ secrets.NAIS_DEPLOY_APIKEY }}
          RESOURCE: aksel.nav.no/nais-dev.yaml
          CLUSTER: dev-gcp
-          IMAGE: ${{ env.DOCKER_TAG }}
+          IMAGE: ${{ steps.docker-push.outputs.image }}
@@ -116,18 +116,18 @@ jobs:
          source: ./aksel.nav.no/website/.next/static
          destination: "/website/_next"

-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
      - name: Get complete tag
-        run: echo "TAG=$( date +%s )" >> $GITHUB_ENV
-      - name: Create docker image tags
-        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
+        run: echo "TAG=PROD-$( date +%s )" >> $GITHUB_ENV
+
+      - uses: nais/docker-build-push@v0
+        id: docker-push
+        with:
+          team: designsystem
+          push_image: true
+          dockerfile: aksel.nav.no/Dockerfile
+          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
+          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+
      - name: Wait for e2e-tests to succeed
        uses: lewagon/wait-on-check-action@v1.2.0
        with:
@@ -135,9 +135,6 @@ jobs:
          check-name: "Smoketest Aksel"
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          wait-interval: 10
-      - name: Push docker image
-        run: |
-          docker push ${{ env.DOCKER_TAG }}

      - name: Deploy to prod-gcp
        uses: nais/deploy/actions/deploy@master
@@ -145,4 +142,4 @@ jobs:
          APIKEY: ${{ secrets.NAIS_DEPLOY_APIKEY }}
          RESOURCE: aksel.nav.no/nais-prod.yaml
          CLUSTER: prod-gcp
-          IMAGE: ${{ env.DOCKER_TAG }}
+          IMAGE: ${{ steps.docker-push.outputs.image }}
@@ -23,6 +23,8 @@ module.exports = {
  addons: [
    "@storybook/addon-a11y",
    "@whitespace/storybook-addon-html",
+    "storybook-addon-next-router",
+
    {
      name: "@storybook/addon-storysource",
      options: {
@@ -74,8 +76,31 @@ module.exports = {
              "../aksel.nav.no/website/components"
            ),
          },
+          {
+            find: "@utils",
+            replacement: path.resolve(
+              __dirname,
+              "../aksel.nav.no/website/components/website-modules/utils/index.ts"
+            ),
+          },
+          {
+            find: "@lib",
+            replacement: path.resolve(
+              __dirname,
+              "../aksel.nav.no/website/lib/index.ts"
+            ),
+          },
        ],
      },
    });
  },
 };
+
+/* "@/components": ["components/index.ts"],
+      "@/lib": ["lib/index.ts"],
+      "@/pages/*": ["pages/*"],
+      "@/sanity-block": ["components/SanityBlockContent.tsx"],
+      "@/utils": ["components/website-modules/utils/index.ts"],
+      "@/layout": ["components/layout/index.ts"],
+      "@/error-boundary": ["components/website-modules/ErrorBoundary.tsx"],
+      "@/sanity-client": ["lib/sanity/sanity.server"] */
@@ -1,3 +1,4 @@
+import { RouterContext } from "next/dist/shared/lib/router-context";
 import "@navikt/ds-css/index.css";
 import "@navikt/ds-css-internal/index.css";
 import "./layout.css";
@@ -23,6 +24,9 @@ export const parameters = {
      },
    ],
  },
+  nextRouter: {
+    Provider: RouterContext.Provider,
+  },
 };

 export const globalTypes = {
@@ -1,5 +1,40 @@
 # @navikt/aksel-icons

+## 2.8.3
+
+## 2.8.2
+
+## 2.8.1
+
+## 2.8.0
+
+## 2.7.8
+
+## 2.7.7
+
+### Patch Changes
+
+- [`a22ac3eb7`](https://github.com/navikt/aksel/commit/a22ac3eb78135bf93d4771802475396849809c03) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :Sparkles: Nye ikoner
+
+  - :tada: CaretUpDownFilledDown
+  - :tada: CaretUpDownFilledUp
+  - :tada: CloudDown
+  - :tada: CloudDownFill
+  - :tada: CloudUp
+  - :tada: CloudUpFill
+  - :tada: HddDown
+  - :tada: HddDownFill
+  - :tada: HddUp
+  - :tada: HddUpFill
+  - :tada: Inbox
+  - :tada: InboxDown
+  - :tada: InboxDownFill
+  - :tada: InboxFill
+  - :tada: InboxUp
+  - :tada: InboxUpFill
+  - :tada: ShoppingBasket
+  - :tada: ShoppingBasketFill
+
 ## 2.7.6

 ## 2.7.5
@@ -42,6 +42,7 @@ export const fetchIcon = async (url) => {
  return await fetch(url)
    .then((x) => x.text())
    .catch((e) => {
+      console.log("Error fetching icon: ", e.message);
      throw e.message;
    });
 };
@@ -34,7 +34,11 @@ async function main() {
  console.log(`Laster ned ${Object.keys(images).length} ikoner`);

  for (const [key, value] of Object.entries(images)) {
-    const icon = await fetchIcon(value);
+    const icon = await fetchIcon(value).catch((e) => {
+      throw e;
+    });
+    await new Promise((r) => setTimeout(r, 20));
+
    icon &&
      writeFileSync(
        resolve(iconFolder, resolveName(icons.find((x) => x.node_id === key))),
@@ -2,6 +2,7 @@ name: BellDot
 category: Status
 sub_category: Notification
 keywords:
+  - alert
  - message
  - update
  - reminder
@@ -12,5 +13,5 @@ keywords:
  - påminnelse
  - notifikasjon
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 10.03.2023
 created_at: 07.03.2023
@@ -2,6 +2,7 @@ name: BellDotFill
 category: Status
 sub_category: Notification
 keywords:
+  - alert
  - message
  - update
  - reminder
@@ -12,5 +13,5 @@ keywords:
  - påminnelse
  - notifikasjon
 variant: Fill
-updated_at: 08.03.2023
+updated_at: 10.03.2023
 created_at: 07.03.2023
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.46967 11.4696C4.17678 11.7625 4.17678 12.2374 4.46967 12.5303L7.96967 16.0303C8.18417 16.2448 8.50676 16.309 8.78701 16.1929C9.06727 16.0768 9.25 15.8033 9.25 15.5L9.25 8.49998C9.25 8.19663 9.06727 7.92315 8.78701 7.80707C8.50676 7.69098 8.18417 7.75515 7.96967 7.96965L4.46967 11.4696ZM6.06066 12L7.75 10.3106L7.75 13.6893L6.06066 12ZM14.75 15.5C14.75 15.8033 14.9327 16.0768 15.213 16.1929C15.4932 16.309 15.8158 16.2448 16.0303 16.0303L19.5303 12.5303C19.8232 12.2374 19.8232 11.7625 19.5303 11.4696L16.0303 7.96965C15.8158 7.75515 15.4932 7.69098 15.213 7.80707C14.9327 7.92315 14.75 8.19663 14.75 8.49998L14.75 15.5ZM17.9393 12L16.25 13.6893L16.25 10.3106L17.9393 12Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0303 7.96968C15.8158 7.75518 15.4932 7.69101 15.213 7.8071C14.9327 7.92318 14.75 8.19666 14.75 8.50001V15.5C14.75 15.8034 14.9327 16.0768 15.213 16.1929C15.4932 16.309 15.8158 16.2448 16.0303 16.0303L19.5303 12.5303C19.671 12.3897 19.75 12.1989 19.75 12C19.75 11.8011 19.671 11.6103 19.5303 11.4697L16.0303 7.96968ZM17.9393 12L16.25 13.6893V10.3107L17.9393 12ZM9.25 8.50001C9.25 8.19666 9.06727 7.92318 8.78701 7.8071C8.50676 7.69101 8.18417 7.75518 7.96967 7.96968L4.46967 11.4697C4.17678 11.7626 4.17678 12.2374 4.46967 12.5303L7.96967 16.0303C8.18417 16.2448 8.50676 16.309 8.78701 16.1929C9.06727 16.0768 9.25 15.8034 9.25 15.5L9.25 8.50001ZM7.75 13.6893L6.06066 12L7.75 10.3107V13.6893Z" fill="#262626"/>
 </svg>
@@ -2,12 +2,11 @@ name: CaretLeftRight
 category: Arrows
 sub_category: Caret
 keywords:
-  - Expand/collapse
-  - show/hide
-  - toggle
-  - Utvide/skjule
-  - vise/skjule
-  - bytte
+  - widen
+  - bredde
+  - åpne
+  - expand
+  - utvide
 variant: Stroke
-updated_at: 10.03.2023
+updated_at: 13.03.2023
 created_at: 10.03.2023
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.4697 12.5303C4.17681 12.2374 4.17681 11.7626 4.4697 11.4697L7.9697 7.96968C8.1842 7.75518 8.50679 7.69101 8.78704 7.8071C9.0673 7.92318 9.25003 8.19666 9.25003 8.50001L9.25003 15.5C9.25003 15.8034 9.0673 16.0768 8.78704 16.1929C8.50679 16.309 8.1842 16.2448 7.9697 16.0303L4.4697 12.5303ZM15.213 16.1929C14.9328 16.0768 14.75 15.8034 14.75 15.5L14.75 8.50001C14.75 8.19666 14.9328 7.92318 15.213 7.8071C15.4933 7.69101 15.8159 7.75518 16.0304 7.96968L19.5304 11.4697C19.8233 11.7626 19.8233 12.2374 19.5304 12.5303L16.0304 16.0303C15.8159 16.2448 15.4933 16.309 15.213 16.1929Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.213 16.1929C14.9328 16.0768 14.75 15.8034 14.75 15.5V8.50001C14.75 8.19666 14.9328 7.92318 15.213 7.8071C15.4933 7.69101 15.8159 7.75518 16.0304 7.96968L19.5304 11.4697C19.8233 11.7626 19.8233 12.2374 19.5304 12.5303L16.0304 16.0303C15.8159 16.2448 15.4933 16.309 15.213 16.1929ZM4.4697 12.5303C4.17681 12.2374 4.17681 11.7626 4.4697 11.4697L7.9697 7.96968C8.1842 7.75518 8.50679 7.69101 8.78704 7.8071C9.0673 7.92318 9.25003 8.19666 9.25003 8.50001L9.25003 15.5C9.25003 15.8034 9.0673 16.0768 8.78704 16.1929C8.50679 16.309 8.1842 16.2448 7.9697 16.0303L4.4697 12.5303Z" fill="#262626"/>
 </svg>
@@ -2,12 +2,11 @@ name: CaretLeftRightFill
 category: Arrows
 sub_category: Caret
 keywords:
-  - Expand/collapse
-  - show/hide
-  - toggle
-  - Utvide/skjule
-  - vise/skjule
-  - bytte
+  - widen
+  - bredde
+  - åpne
+  - expand
+  - utvide
 variant: Fill
-updated_at: 10.03.2023
+updated_at: 13.03.2023
 created_at: 10.03.2023
@@ -8,6 +8,8 @@ keywords:
  - Utvide/skjule
  - vise/skjule
  - bytte
+  - sort
+  - sorter
 variant: Stroke
-updated_at: 10.03.2023
+updated_at: 13.03.2023
 created_at: 07.03.2023
@@ -8,6 +8,8 @@ keywords:
  - Utvide/skjule
  - vise/skjule
  - bytte
+  - sort
+  - sorter
 variant: Fill
-updated_at: 10.03.2023
+updated_at: 13.03.2023
 created_at: 10.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 4.46967C12.2374 4.17678 11.7626 4.17678 11.4697 4.46967L7.96966 7.96967C7.75516 8.18417 7.691 8.50676 7.80708 8.78701C7.92317 9.06727 8.19664 9.25 8.49999 9.25H15.5C15.8033 9.25 16.0768 9.06727 16.1929 8.78701C16.309 8.50676 16.2448 8.18417 16.0303 7.96967L12.5303 4.46967ZM12 6.06066L13.6893 7.75H10.3107L12 6.06066ZM8.49999 14.75C8.19664 14.75 7.92317 14.9327 7.80708 15.213C7.691 15.4932 7.75516 15.8158 7.96966 16.0303L11.4697 19.5303C11.7626 19.8232 12.2374 19.8232 12.5303 19.5303L16.0303 16.0303C16.2448 15.8158 16.309 15.4932 16.1929 15.213C16.0768 14.9327 15.8033 14.75 15.5 14.75H8.49999Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,15 @@
+name: CaretUpDownFilledDown
+category: Arrows
+sub_category: Caret
+keywords:
+  - Expand/collapse
+  - show/hide
+  - toggle
+  - Utvide/skjule
+  - vise/skjule
+  - bytte
+  - sort
+  - sorter
+variant: Stroke
+updated_at: 13.03.2023
+created_at: 13.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 4.46967C12.2374 4.17678 11.7626 4.17678 11.4697 4.46967L7.96966 7.96967C7.75516 8.18417 7.691 8.50676 7.80708 8.78701C7.92317 9.06727 8.19664 9.25 8.49999 9.25H15.5C15.8033 9.25 16.0768 9.06727 16.1929 8.78701C16.309 8.50676 16.2448 8.18417 16.0303 7.96967L12.5303 4.46967ZM8.49999 14.75C8.19664 14.75 7.92317 14.9327 7.80708 15.213C7.691 15.4932 7.75516 15.8158 7.96966 16.0303L11.4697 19.5303C11.7626 19.8232 12.2374 19.8232 12.5303 19.5303L16.0303 16.0303C16.2448 15.8158 16.309 15.4932 16.1929 15.213C16.0768 14.9327 15.8033 14.75 15.5 14.75H8.49999ZM12 17.9393L10.3107 16.25H13.6893L12 17.9393Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,15 @@
+name: CaretUpDownFilledUp
+category: Arrows
+sub_category: Caret
+keywords:
+  - Expand/collapse
+  - show/hide
+  - toggle
+  - Utvide/skjule
+  - vise/skjule
+  - bytte
+  - sort
+  - sorter
+variant: Stroke
+updated_at: 13.03.2023
+created_at: 13.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2.25C7.82436 2.25 5.25 4.82436 5.25 8C5.25 8.05204 5.23332 8.10074 5.17648 8.15677C5.11189 8.22043 4.99963 8.28479 4.8508 8.315C3.36703 8.61619 2.25 9.92681 2.25 11.5C2.25 13.2949 3.70507 14.75 5.5 14.75H9C9.41421 14.75 9.75 14.4142 9.75 14C9.75 13.5858 9.41421 13.25 9 13.25H5.5C4.5335 13.25 3.75 12.4665 3.75 11.5C3.75 10.6542 4.35073 9.9471 5.1492 9.78502C5.89549 9.63353 6.75 9.03827 6.75 8C6.75 5.65279 8.65279 3.75 11 3.75C12.487 3.75 13.7961 4.51307 14.5567 5.6725C14.6561 5.82399 14.746 5.98213 14.8256 6.14608C15.1136 6.73916 15.7216 7.25 16.5052 7.25H17.25C18.9069 7.25 20.25 8.59315 20.25 10.25C20.25 11.9069 18.9069 13.25 17.25 13.25H15C14.5858 13.25 14.25 13.5858 14.25 14C14.25 14.4142 14.5858 14.75 15 14.75H17.25C19.7353 14.75 21.75 12.7353 21.75 10.25C21.75 7.76472 19.7353 5.75 17.25 5.75H16.5052C16.415 5.75 16.2685 5.68362 16.1749 5.49078C16.067 5.26867 15.9453 5.05462 15.8109 4.84976C14.7849 3.28562 13.0136 2.25 11 2.25ZM12 10.25C12.4142 10.25 12.75 10.5858 12.75 11V18.6893L14.9697 16.4697C15.2626 16.1768 15.7374 16.1768 16.0303 16.4697C16.3232 16.7626 16.3232 17.2374 16.0303 17.5303L12.5303 21.0303C12.4584 21.1022 12.3755 21.1565 12.2871 21.1931C12.1987 21.2298 12.1017 21.25 12 21.25C11.9871 21.25 11.9742 21.2497 11.9614 21.249C11.8738 21.2446 11.7901 21.2251 11.7129 21.1931C11.6245 21.1565 11.5416 21.1022 11.4697 21.0303L7.96967 17.5303C7.67678 17.2374 7.67678 16.7626 7.96967 16.4697C8.26256 16.1768 8.73744 16.1768 9.03033 16.4697L11.25 18.6893V11C11.25 10.5858 11.5858 10.25 12 10.25Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,11 @@
+name: CloudDown
+category: Files and application
+sub_category: Data transfer
+keywords:
+  - Sky
+  - download
+  - nedlasting
+  - last ned
+variant: Stroke
+updated_at: 13.03.2023
+created_at: 13.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 8C5.25 4.82436 7.82436 2.25 11 2.25C13.0136 2.25 14.7849 3.28562 15.8109 4.84976C15.9453 5.05462 16.067 5.26867 16.1749 5.49078C16.2685 5.68362 16.415 5.75 16.5052 5.75H17.25C19.7353 5.75 21.75 7.76472 21.75 10.25C21.75 12.7353 19.7353 14.75 17.25 14.75H14.5C14.3619 14.75 14.25 14.6381 14.25 14.5V11C14.25 9.75736 13.2426 8.75 12 8.75C10.7574 8.75 9.75 9.75736 9.75 11V14.5C9.75 14.6381 9.63807 14.75 9.5 14.75H5.5C3.70507 14.75 2.25 13.2949 2.25 11.5C2.25 9.92681 3.36703 8.61619 4.8508 8.315C4.99963 8.28479 5.11189 8.22043 5.17648 8.15677C5.23332 8.10074 5.25 8.05204 5.25 8ZM12 10.25C12.4142 10.25 12.75 10.5858 12.75 11V18.6893L14.9697 16.4697C15.2626 16.1768 15.7374 16.1768 16.0303 16.4697C16.3232 16.7626 16.3232 17.2374 16.0303 17.5303L12.5303 21.0303C12.4584 21.1022 12.3755 21.1565 12.2871 21.1931C12.1987 21.2298 12.1017 21.25 12 21.25C11.9871 21.25 11.9742 21.2497 11.9614 21.249C11.8738 21.2446 11.7901 21.2251 11.7129 21.1931C11.6245 21.1565 11.5416 21.1022 11.4697 21.0303L7.96967 17.5303C7.67678 17.2374 7.67678 16.7626 7.96967 16.4697C8.26256 16.1768 8.73744 16.1768 9.03033 16.4697L11.25 18.6893V11C11.25 10.5858 11.5858 10.25 12 10.25Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,11 @@
+name: CloudDownFill
+category: Files and application
+sub_category: Data transfer
+keywords:
+  - Sky
+  - download
+  - nedlasting
+  - last ned
+variant: Fill
+updated_at: 13.03.2023
+created_at: 13.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2.25C7.82436 2.25 5.25 4.82436 5.25 8C5.25 8.05204 5.23332 8.10074 5.17648 8.15677C5.11189 8.22043 4.99963 8.28479 4.8508 8.315C3.36703 8.61619 2.25 9.92681 2.25 11.5C2.25 13.2949 3.70507 14.75 5.5 14.75C5.91421 14.75 6.25 14.4142 6.25 14C6.25 13.5858 5.91421 13.25 5.5 13.25C4.5335 13.25 3.75 12.4665 3.75 11.5C3.75 10.6542 4.35073 9.9471 5.1492 9.78502C5.89549 9.63353 6.75 9.03827 6.75 8C6.75 5.65279 8.65279 3.75 11 3.75C12.487 3.75 13.7961 4.51307 14.5567 5.6725C14.6561 5.82399 14.746 5.98213 14.8256 6.14608C15.1136 6.73916 15.7216 7.25 16.5052 7.25H17.25C18.9069 7.25 20.25 8.59315 20.25 10.25C20.25 11.555 19.4163 12.6673 18.2501 13.0795C17.8595 13.2175 17.6548 13.646 17.7929 14.0366C17.9309 14.4271 18.3594 14.6318 18.7499 14.4937C20.4967 13.8764 21.75 12.2105 21.75 10.25C21.75 7.76472 19.7353 5.75 17.25 5.75H16.5052C16.415 5.75 16.2685 5.68362 16.1749 5.49078C16.067 5.26867 15.9453 5.05462 15.8109 4.84976C14.7849 3.28562 13.0136 2.25 11 2.25ZM11.4697 10.4697C11.5416 10.3978 11.6245 10.3435 11.7129 10.3069C11.8013 10.2702 11.8983 10.25 12 10.25C12.1017 10.25 12.1987 10.2702 12.2871 10.3069C12.3755 10.3435 12.4584 10.3978 12.5303 10.4697L16.0303 13.9697C16.3232 14.2626 16.3232 14.7374 16.0303 15.0303C15.7374 15.3232 15.2626 15.3232 14.9697 15.0303L12.75 12.8107V20.5C12.75 20.9142 12.4142 21.25 12 21.25C11.5858 21.25 11.25 20.9142 11.25 20.5V12.8107L9.03033 15.0303C8.73744 15.3232 8.26256 15.3232 7.96967 15.0303C7.67678 14.7374 7.67678 14.2626 7.96967 13.9697L11.4697 10.4697Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,11 @@
+name: CloudUp
+category: Files and application
+sub_category: Data transfer
+keywords:
+  - sky
+  - upload
+  - opplasting
+  - last opp
+variant: Stroke
+updated_at: 13.03.2023
+created_at: 13.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 8C5.25 4.82436 7.82436 2.25 11 2.25C13.0136 2.25 14.7849 3.28562 15.8109 4.84976C15.9453 5.05462 16.067 5.26867 16.1749 5.49078C16.2685 5.68362 16.415 5.75 16.5052 5.75H17.25C19.7353 5.75 21.75 7.76472 21.75 10.25C21.75 12.4644 20.1505 14.3053 18.0438 14.6802C17.8876 14.708 17.7543 14.5749 17.7484 14.4163C17.7282 13.8687 17.509 13.3271 17.091 12.909L13.591 9.40901C12.7123 8.53033 11.2877 8.53033 10.409 9.40901L6.90901 12.909C6.477 13.341 6.25739 13.905 6.25018 14.4712C6.24829 14.6202 6.13353 14.75 5.98452 14.75H5.5C3.70507 14.75 2.25 13.2949 2.25 11.5C2.25 9.92681 3.36703 8.61619 4.8508 8.315C4.99963 8.28479 5.11189 8.22043 5.17648 8.15677C5.23332 8.10074 5.25 8.05204 5.25 8ZM11.4697 10.4697C11.5416 10.3978 11.6245 10.3435 11.7129 10.3069C11.8013 10.2702 11.8983 10.25 12 10.25C12.1017 10.25 12.1987 10.2702 12.2871 10.3069C12.3755 10.3435 12.4584 10.3978 12.5303 10.4697L16.0303 13.9697C16.3232 14.2626 16.3232 14.7374 16.0303 15.0303C15.7374 15.3232 15.2626 15.3232 14.9697 15.0303L12.75 12.8107V20.5C12.75 20.9142 12.4142 21.25 12 21.25C11.5858 21.25 11.25 20.9142 11.25 20.5V12.8107L9.03033 15.0303C8.73744 15.3232 8.26256 15.3232 7.96967 15.0303C7.67678 14.7374 7.67678 14.2626 7.96967 13.9697L11.4697 10.4697Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,11 @@
+name: CloudUpFill
+category: Files and application
+sub_category: Data transfer
+keywords:
+  - sky
+  - upload
+  - opplasting
+  - last opp
+variant: Fill
+updated_at: 13.03.2023
+created_at: 13.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.00001 3.25C3.5858 3.25 3.25001 3.58579 3.25001 4L3.25 12.5C3.25 12.6989 3.32902 12.8897 3.46967 13.0303C3.61032 13.171 3.80109 13.25 4 13.25H9C9.41421 13.25 9.75 12.9142 9.75 12.5C9.75 12.0858 9.41421 11.75 9 11.75H4.75L4.75001 4.75L19.25 4.75L19.25 11.75H15C14.5858 11.75 14.25 12.0858 14.25 12.5C14.25 12.9142 14.5858 13.25 15 13.25H20C20.4142 13.25 20.75 12.9142 20.75 12.5L20.75 4C20.75 3.80109 20.671 3.61032 20.5303 3.46967C20.3897 3.32902 20.1989 3.25 20 3.25H4.00001ZM15.5 6.25C15.0858 6.25 14.75 6.58579 14.75 7C14.75 7.41421 15.0858 7.75 15.5 7.75H17C17.4142 7.75 17.75 7.41421 17.75 7C17.75 6.58579 17.4142 6.25 17 6.25H15.5ZM12 10.25C12.4142 10.25 12.75 10.5858 12.75 11V18.6893L14.9697 16.4697C15.2626 16.1768 15.7374 16.1768 16.0303 16.4697C16.3232 16.7626 16.3232 17.2374 16.0303 17.5303L12.5303 21.0303C12.4584 21.1022 12.3755 21.1565 12.2871 21.1931C12.1987 21.2298 12.1017 21.25 12 21.25C11.9871 21.25 11.9742 21.2497 11.9614 21.249C11.8738 21.2446 11.7901 21.2251 11.7129 21.1931C11.6245 21.1565 11.5416 21.1022 11.4697 21.0303L7.96967 17.5303C7.67678 17.2374 7.67678 16.7626 7.96967 16.4697C8.26256 16.1768 8.73744 16.1768 9.03033 16.4697L11.25 18.6893V11C11.25 10.5858 11.5858 10.25 12 10.25ZM14.75 9.5C14.75 9.08579 15.0858 8.75 15.5 8.75H17C17.4142 8.75 17.75 9.08579 17.75 9.5C17.75 9.91421 17.4142 10.25 17 10.25H15.5C15.0858 10.25 14.75 9.91421 14.75 9.5Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,12 @@
+name: HddDown
+category: Files and application
+sub_category: Data transfer
+keywords:
+  - lagring
+  - hardisk
+  - download
+  - nedlasting
+  - last ned
+variant: Stroke
+updated_at: 13.03.2023
+created_at: 13.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.25001 4C3.25001 3.58579 3.5858 3.25 4.00001 3.25H20C20.1989 3.25 20.3897 3.32902 20.5303 3.46967C20.671 3.61032 20.75 3.80109 20.75 4L20.75 12.5C20.75 12.9142 20.4142 13.25 20 13.25H14.5C14.3619 13.25 14.25 13.1381 14.25 13V11C14.25 9.75736 13.2426 8.75 12 8.75C10.7574 8.75 9.75 9.75736 9.75 11V13C9.75 13.1381 9.63807 13.25 9.5 13.25H4C3.80109 13.25 3.61032 13.171 3.46967 13.0303C3.32902 12.8897 3.25 12.6989 3.25 12.5L3.25001 4ZM16.5 6.25C16.0858 6.25 15.75 6.58579 15.75 7C15.75 7.41421 16.0858 7.75 16.5 7.75H18C18.4142 7.75 18.75 7.41421 18.75 7C18.75 6.58579 18.4142 6.25 18 6.25H16.5ZM15.75 9.5C15.75 9.08579 16.0858 8.75 16.5 8.75H18C18.4142 8.75 18.75 9.08579 18.75 9.5C18.75 9.91421 18.4142 10.25 18 10.25H16.5C16.0858 10.25 15.75 9.91421 15.75 9.5ZM12 10.25C12.4142 10.25 12.75 10.5858 12.75 11V18.6893L14.9697 16.4697C15.2626 16.1768 15.7374 16.1768 16.0303 16.4697C16.3232 16.7626 16.3232 17.2374 16.0303 17.5303L12.5303 21.0303C12.4584 21.1022 12.3755 21.1565 12.2871 21.1931C12.1987 21.2298 12.1017 21.25 12 21.25C11.9871 21.25 11.9742 21.2497 11.9614 21.249C11.8738 21.2446 11.7901 21.2251 11.7129 21.1931C11.6245 21.1565 11.5416 21.1022 11.4697 21.0303L7.96967 17.5303C7.67678 17.2374 7.67678 16.7626 7.96967 16.4697C8.26256 16.1768 8.73744 16.1768 9.03033 16.4697L11.25 18.6893V11C11.25 10.5858 11.5858 10.25 12 10.25Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,12 @@
+name: HddDownFill
+category: Files and application
+sub_category: Data transfer
+keywords:
+  - lagring
+  - hardisk
+  - download
+  - nedlasting
+  - last ned
+variant: Fill
+updated_at: 13.03.2023
+created_at: 13.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.00001 3.25C3.5858 3.25 3.25001 3.58579 3.25001 4L3.25 12.5C3.25 12.6989 3.32902 12.8897 3.46967 13.0303C3.61032 13.171 3.80109 13.25 4 13.25H6C6.41421 13.25 6.75 12.9142 6.75 12.5C6.75 12.0858 6.41421 11.75 6 11.75H4.75L4.75001 4.75L19.25 4.75L19.25 11.75H18C17.5858 11.75 17.25 12.0858 17.25 12.5C17.25 12.9142 17.5858 13.25 18 13.25H20C20.4142 13.25 20.75 12.9142 20.75 12.5L20.75 4C20.75 3.80109 20.671 3.61032 20.5303 3.46967C20.3897 3.32902 20.1989 3.25 20 3.25H4.00001ZM15.5 6.25C15.0858 6.25 14.75 6.58579 14.75 7C14.75 7.41421 15.0858 7.75 15.5 7.75H17C17.4142 7.75 17.75 7.41421 17.75 7C17.75 6.58579 17.4142 6.25 17 6.25H15.5ZM11.4697 10.4697C11.5416 10.3978 11.6245 10.3435 11.7129 10.3069C11.8013 10.2702 11.8983 10.25 12 10.25C12.1017 10.25 12.1987 10.2702 12.2871 10.3069C12.3755 10.3435 12.4584 10.3978 12.5303 10.4697L16.0303 13.9697C16.3232 14.2626 16.3232 14.7374 16.0303 15.0303C15.7374 15.3232 15.2626 15.3232 14.9697 15.0303L12.75 12.8107V20.5C12.75 20.9142 12.4142 21.25 12 21.25C11.5858 21.25 11.25 20.9142 11.25 20.5V12.8107L9.03033 15.0303C8.73744 15.3232 8.26256 15.3232 7.96967 15.0303C7.67678 14.7374 7.67678 14.2626 7.96967 13.9697L11.4697 10.4697ZM14.75 9.5C14.75 9.08579 15.0858 8.75 15.5 8.75H17C17.4142 8.75 17.75 9.08579 17.75 9.5C17.75 9.91421 17.4142 10.25 17 10.25H15.5C15.0858 10.25 14.75 9.91421 14.75 9.5Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,12 @@
+name: HddUp
+category: Files and application
+sub_category: Data transfer
+keywords:
+  - lagring
+  - hardisk
+  - upload
+  - opplasting
+  - last opp
+variant: Stroke
+updated_at: 13.03.2023
+created_at: 13.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.25001 4C3.25001 3.58579 3.5858 3.25 4.00001 3.25H20C20.1989 3.25 20.3897 3.32902 20.5303 3.46967C20.671 3.61032 20.75 3.80109 20.75 4L20.75 12.5C20.75 12.9142 20.4142 13.25 20 13.25H17.5048C17.4214 13.25 17.3443 13.2078 17.2938 13.1414C17.2324 13.0605 17.1648 12.9828 17.091 12.909L13.591 9.40901C12.7123 8.53033 11.2877 8.53033 10.409 9.40901L6.90901 12.909C6.8352 12.9828 6.76758 13.0605 6.70617 13.1414C6.65572 13.2078 6.57859 13.25 6.49518 13.25H4C3.80109 13.25 3.61032 13.171 3.46967 13.0303C3.32902 12.8897 3.25 12.6989 3.25 12.5L3.25001 4ZM16.5 6.25C16.0858 6.25 15.75 6.58579 15.75 7C15.75 7.41421 16.0858 7.75 16.5 7.75H18C18.4142 7.75 18.75 7.41421 18.75 7C18.75 6.58579 18.4142 6.25 18 6.25H16.5ZM15.75 9.5C15.75 9.08579 16.0858 8.75 16.5 8.75H18C18.4142 8.75 18.75 9.08579 18.75 9.5C18.75 9.91421 18.4142 10.25 18 10.25H16.5C16.0858 10.25 15.75 9.91421 15.75 9.5ZM11.4697 10.4697C11.5416 10.3978 11.6245 10.3435 11.7129 10.3069C11.8013 10.2702 11.8983 10.25 12 10.25C12.1017 10.25 12.1987 10.2702 12.2871 10.3069C12.3755 10.3435 12.4584 10.3978 12.5303 10.4697L16.0303 13.9697C16.3232 14.2626 16.3232 14.7374 16.0303 15.0303C15.7374 15.3232 15.2626 15.3232 14.9697 15.0303L12.75 12.8107V20.5C12.75 20.9142 12.4142 21.25 12 21.25C11.5858 21.25 11.25 20.9142 11.25 20.5V12.8107L9.03033 15.0303C8.73744 15.3232 8.26256 15.3232 7.96967 15.0303C7.67678 14.7374 7.67678 14.2626 7.96967 13.9697L11.4697 10.4697Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,12 @@
+name: HddUpFill
+category: Files and application
+sub_category: Data transfer
+keywords:
+  - lagring
+  - hardisk
+  - upload
+  - opplasting
+  - last opp
+variant: Fill
+updated_at: 13.03.2023
+created_at: 13.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.99999 4.25C5.69331 4.25 5.41753 4.43671 5.30363 4.72146L2.30995 12.2057C2.28926 12.2541 2.27353 12.3051 2.26338 12.3582C2.25311 12.4112 2.24877 12.4644 2.24999 12.517V19C2.24999 19.4142 2.58577 19.75 2.99999 19.75H21C21.4142 19.75 21.75 19.4142 21.75 19V12.517C21.7512 12.4643 21.7469 12.4111 21.7366 12.358C21.7264 12.3051 21.7107 12.2541 21.69 12.2057L18.6963 4.72146C18.5824 4.43671 18.3067 4.25 18 4.25H5.99999ZM19.8922 11.75L17.4922 5.75H6.50776L4.10776 11.75H6.88195C7.5448 11.75 8.15076 12.1245 8.4472 12.7174L9.39441 14.6118C9.43676 14.6965 9.52333 14.75 9.61802 14.75H14.382C14.4766 14.75 14.5632 14.6965 14.6056 14.6118L15.5528 12.7174C15.8492 12.1245 16.4552 11.75 17.118 11.75H19.8922ZM3.74999 18.25V13.25H6.88195C6.97664 13.25 7.06321 13.3035 7.10556 13.3882L8.05277 15.2826C8.34921 15.8755 8.95517 16.25 9.61802 16.25H14.382C15.0448 16.25 15.6508 15.8755 15.9472 15.2826L16.8944 13.3882C16.9368 13.3035 17.0233 13.25 17.118 13.25H20.25V18.25H3.74999Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,10 @@
+name: Inbox
+category: Interface
+sub_category: Communication
+keywords:
+  - innboks
+  - email
+  - e-post
+variant: Stroke
+updated_at: 13.03.2023
+created_at: 13.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.25C12.4142 3.25 12.75 3.58579 12.75 4V9.68934L14.9697 7.46967C15.2625 7.17678 15.7374 7.17678 16.0303 7.46967C16.3232 7.76256 16.3232 8.23744 16.0303 8.53033L12.5303 12.0303C12.2374 12.3232 11.7625 12.3232 11.4697 12.0303L7.96966 8.53033C7.67676 8.23744 7.67676 7.76256 7.96966 7.46967C8.26255 7.17678 8.73742 7.17678 9.03032 7.46967L11.25 9.68934V4C11.25 3.58579 11.5858 3.25 12 3.25ZM5.99999 4.25C5.69331 4.25 5.41753 4.43671 5.30363 4.72146L2.31015 12.2052C2.28856 12.2556 2.27234 12.3089 2.26222 12.3643C2.25283 12.415 2.24885 12.466 2.24997 12.5164V19C2.24997 19.4142 2.58576 19.75 2.99997 19.75H21C21.4142 19.75 21.75 19.4142 21.75 19V12.5169C21.7512 12.4645 21.7469 12.4116 21.7367 12.3588C21.7266 12.3055 21.7108 12.2542 21.69 12.2056L18.6963 4.72146C18.5824 4.43671 18.3067 4.25 18 4.25H15C14.5858 4.25 14.25 4.58579 14.25 5C14.25 5.41421 14.5858 5.75 15 5.75H17.4922L19.8922 11.75H17.118C16.4552 11.75 15.8492 12.1245 15.5528 12.7174L14.6055 14.6118C14.5632 14.6965 14.4766 14.75 14.3819 14.75H9.61801C9.52331 14.75 9.43675 14.6965 9.3944 14.6118L8.44719 12.7174C8.15075 12.1245 7.54479 11.75 6.88194 11.75H4.10776L6.50776 5.75H8.99999C9.4142 5.75 9.74999 5.41421 9.74999 5C9.74999 4.58579 9.4142 4.25 8.99999 4.25H5.99999ZM3.74997 13.25V18.25H20.25V13.25H17.118C17.0233 13.25 16.9367 13.3035 16.8944 13.3882L15.9472 15.2826C15.6507 15.8755 15.0448 16.25 14.3819 16.25H9.61801C8.95515 16.25 8.34919 15.8755 8.05276 15.2826L7.10554 13.3882C7.0632 13.3035 6.97663 13.25 6.88194 13.25H3.74997Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,12 @@
+name: InboxDown
+category: Interface
+sub_category: Communication
+keywords:
+  - innboks
+  - email
+  - e-post
+  - motta
+  - receive
+variant: Stroke
+updated_at: 13.03.2023
+created_at: 13.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.25C12.4142 3.25 12.75 3.58579 12.75 4V9.68934L14.9697 7.46967C15.2626 7.17678 15.7374 7.17678 16.0303 7.46967C16.3232 7.76256 16.3232 8.23744 16.0303 8.53033L12.5303 12.0303C12.2374 12.3232 11.7626 12.3232 11.4697 12.0303L7.96967 8.53033C7.67678 8.23744 7.67678 7.76256 7.96967 7.46967C8.26256 7.17678 8.73744 7.17678 9.03033 7.46967L11.25 9.68934V4C11.25 3.58579 11.5858 3.25 12 3.25ZM5.99999 4.25C5.69331 4.25 5.41753 4.43671 5.30363 4.72146L2.30973 12.2062C2.28996 12.2526 2.27473 12.3014 2.2646 12.352C2.25342 12.4072 2.24869 12.4627 2.25 12.5176V19C2.25 19.4142 2.58579 19.75 3 19.75H21C21.4142 19.75 21.75 19.4142 21.75 19V12.517C21.7512 12.4636 21.7467 12.4096 21.7362 12.3558C21.726 12.3037 21.7104 12.2534 21.69 12.2057L18.6964 4.72146C18.5825 4.43671 18.3067 4.25 18 4.25H15C14.5858 4.25 14.25 4.58579 14.25 5C14.25 5.41421 14.5858 5.75 15 5.75H17.4922L19.8922 11.75H17.118C16.4552 11.75 15.8492 12.1245 15.5528 12.7174L14.6056 14.6118C14.5632 14.6965 14.4767 14.75 14.382 14.75H9.61803C9.52334 14.75 9.43678 14.6965 9.39443 14.6118L8.44721 12.7174C8.15078 12.1245 7.54482 11.75 6.88197 11.75H4.10776L6.50776 5.75H8.99999C9.4142 5.75 9.74999 5.41421 9.74999 5C9.74999 4.58579 9.4142 4.25 8.99999 4.25H5.99999Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,12 @@
+name: InboxDownFill
+category: Interface
+sub_category: Communication
+keywords:
+  - innboks
+  - email
+  - e-post
+  - motta
+  - receive
+variant: Fill
+updated_at: 13.03.2023
+created_at: 13.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.99999 4.25C5.69331 4.25 5.41753 4.43671 5.30363 4.72146L2.30973 12.2062C2.28996 12.2526 2.27473 12.3014 2.2646 12.352C2.25342 12.4072 2.24869 12.4627 2.25 12.5176V19C2.25 19.4142 2.58579 19.75 3 19.75H21C21.4142 19.75 21.75 19.4142 21.75 19V12.5164C21.7511 12.4659 21.7471 12.4148 21.7377 12.3639C21.7275 12.3086 21.7114 12.2555 21.6898 12.2052L18.6963 4.72146C18.5824 4.43671 18.3067 4.25 18 4.25H5.99999ZM19.8922 11.75L17.4922 5.75H6.50776L4.10776 11.75H6.88197C7.54482 11.75 8.15078 12.1245 8.44721 12.7174L9.39443 14.6118C9.43678 14.6965 9.52334 14.75 9.61803 14.75H14.382C14.4767 14.75 14.5632 14.6965 14.6056 14.6118L15.5528 12.7174C15.8492 12.1245 16.4552 11.75 17.118 11.75H19.8922Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,10 @@
+name: InboxFill
+category: Interface
+sub_category: Communication
+keywords:
+  - innboks
+  - email
+  - e-post
+variant: Fill
+updated_at: 13.03.2023
+created_at: 13.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 3.46967C12.2374 3.17678 11.7625 3.17678 11.4697 3.46967L7.96966 6.96967C7.67676 7.26256 7.67676 7.73744 7.96966 8.03033C8.26255 8.32322 8.73742 8.32322 9.03032 8.03033L11.25 5.81066V11.5C11.25 11.9142 11.5858 12.25 12 12.25C12.4142 12.25 12.75 11.9142 12.75 11.5V5.81066L14.9697 8.03033C15.2625 8.32322 15.7374 8.32322 16.0303 8.03033C16.3232 7.73744 16.3232 7.26256 16.0303 6.96967L12.5303 3.46967ZM5.99999 4.25C5.69331 4.25 5.41753 4.43671 5.30363 4.72146L2.31015 12.2052C2.28856 12.2556 2.27234 12.3089 2.26222 12.3643C2.25283 12.415 2.24885 12.466 2.24997 12.5164V19C2.24997 19.4142 2.58576 19.75 2.99997 19.75H21C21.4142 19.75 21.75 19.4142 21.75 19V12.5169C21.7512 12.4645 21.7469 12.4116 21.7367 12.3588C21.7266 12.3055 21.7108 12.2542 21.69 12.2056L18.6963 4.72146C18.5824 4.43671 18.3067 4.25 18 4.25H17C16.5858 4.25 16.25 4.58579 16.25 5C16.25 5.41421 16.5858 5.75 17 5.75H17.4922L19.8922 11.75H17.118C16.4552 11.75 15.8492 12.1245 15.5528 12.7174L14.6055 14.6118C14.5632 14.6965 14.4766 14.75 14.3819 14.75H9.61801C9.52331 14.75 9.43675 14.6965 9.3944 14.6118L8.44719 12.7174C8.15075 12.1245 7.54479 11.75 6.88194 11.75H4.10776L6.50776 5.75H6.99999C7.4142 5.75 7.74999 5.41421 7.74999 5C7.74999 4.58579 7.4142 4.25 6.99999 4.25H5.99999ZM3.74997 13.25V18.25H20.25V13.25H17.118C17.0233 13.25 16.9367 13.3035 16.8944 13.3882L15.9472 15.2826C15.6507 15.8755 15.0448 16.25 14.3819 16.25H9.61801C8.95515 16.25 8.34919 15.8755 8.05276 15.2826L7.10554 13.3882C7.0632 13.3035 6.97663 13.25 6.88194 13.25H3.74997Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,11 @@
+name: InboxUp
+category: Interface
+sub_category: Communication
+keywords:
+  - innboks
+  - email
+  - e-post
+  - send
+variant: Stroke
+updated_at: 13.03.2023
+created_at: 13.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 3.46967C12.2374 3.17678 11.7626 3.17678 11.4697 3.46967L7.96967 6.96967C7.67678 7.26256 7.67678 7.73744 7.96967 8.03033C8.26256 8.32322 8.73744 8.32322 9.03033 8.03033L11.25 5.81066V11.5C11.25 11.9142 11.5858 12.25 12 12.25C12.4142 12.25 12.75 11.9142 12.75 11.5V5.81066L14.9697 8.03033C15.2626 8.32322 15.7374 8.32322 16.0303 8.03033C16.3232 7.73744 16.3232 7.26256 16.0303 6.96967L12.5303 3.46967ZM6.00002 4.25C5.69334 4.25 5.41756 4.43671 5.30366 4.72146L2.31021 12.2051C2.28848 12.2558 2.27218 12.3095 2.26206 12.3653C2.25281 12.4157 2.24889 12.4663 2.25 12.5163V19C2.25 19.4142 2.58579 19.75 3 19.75H21C21.4142 19.75 21.75 19.4142 21.75 19V12.517C21.7512 12.4636 21.7467 12.4096 21.7362 12.3558C21.726 12.3037 21.7104 12.2534 21.69 12.2057L18.6964 4.72146C18.5825 4.43671 18.3067 4.25 18 4.25H17C16.5858 4.25 16.25 4.58579 16.25 5C16.25 5.41421 16.5858 5.75 17 5.75H17.4922L19.8922 11.75H17.118C16.4552 11.75 15.8492 12.1245 15.5528 12.7174L14.6056 14.6118C14.5632 14.6965 14.4767 14.75 14.382 14.75H9.61803C9.52334 14.75 9.43678 14.6965 9.39443 14.6118L8.44721 12.7174C8.15078 12.1245 7.54482 11.75 6.88197 11.75H4.10779L6.50779 5.75H7.00002C7.41423 5.75 7.75002 5.41421 7.75002 5C7.75002 4.58579 7.41423 4.25 7.00002 4.25H6.00002Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,11 @@
+name: InboxUpFill
+category: Interface
+sub_category: Communication
+keywords:
+  - innboks
+  - email
+  - e-post
+  - send
+variant: Fill
+updated_at: 13.03.2023
+created_at: 13.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.25C5.58579 3.25 5.25 3.58579 5.25 4V8.25H4C3.58579 8.25 3.25 8.58579 3.25 9V12C3.25 12.4142 3.58579 12.75 4 12.75H4.33791L5.25579 20.093C5.30271 20.4683 5.62176 20.75 6 20.75H18C18.3782 20.75 18.6973 20.4683 18.7442 20.093L19.6621 12.75H20C20.4142 12.75 20.75 12.4142 20.75 12V9C20.75 8.58579 20.4142 8.25 20 8.25H18.75V4C18.75 3.58579 18.4142 3.25 18 3.25H6ZM17.25 8.25V4.75H6.75V8.25H17.25ZM6 9.75H4.75V11.25H4.99006C4.99733 11.2499 5.00459 11.2499 5.01182 11.25H18.9882C18.9954 11.2499 19.0027 11.2499 19.0099 11.25H19.25V9.75H18H6ZM5.84959 12.75H18.1504L17.3379 19.25H6.66209L5.84959 12.75ZM12 13.75C12.4142 13.75 12.75 14.0858 12.75 14.5V17.5C12.75 17.9142 12.4142 18.25 12 18.25C11.5858 18.25 11.25 17.9142 11.25 17.5V14.5C11.25 14.0858 11.5858 13.75 12 13.75ZM9.58909 14.4298C9.54579 14.0179 9.17675 13.719 8.7648 13.7623C8.35286 13.8056 8.05401 14.1747 8.09731 14.5866L8.41089 17.5702C8.45419 17.9821 8.82324 18.281 9.23518 18.2377C9.64713 18.1944 9.94597 17.8253 9.90268 17.4134L9.58909 14.4298ZM15.2352 13.7623C15.6471 13.8056 15.946 14.1747 15.9027 14.5866L15.5891 17.5702C15.5458 17.9821 15.1768 18.281 14.7648 18.2377C14.3529 18.1944 14.054 17.8253 14.0973 17.4134L14.4109 14.4298C14.4542 14.0179 14.8233 13.719 15.2352 13.7623Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,8 @@
+name: ShoppingBasket
+category: Money
+sub_category: Payment
+keywords:
+  - handlekurv
+variant: Stroke
+updated_at: 13.03.2023
+created_at: 13.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.25C5.58579 3.25 5.25 3.58579 5.25 4V8.25H4C3.58579 8.25 3.25 8.58579 3.25 9V12C3.25 12.4142 3.58579 12.75 4 12.75H20C20.4142 12.75 20.75 12.4142 20.75 12V9C20.75 8.58579 20.4142 8.25 20 8.25H18.75V4C18.75 3.58579 18.4142 3.25 18 3.25H6ZM17.25 8.25V4.75H6.75V8.25H17.25ZM4.74612 13.75C4.59574 13.75 4.47939 13.8818 4.49805 14.031L5.2558 20.093C5.30271 20.4683 5.62176 20.75 6.00001 20.75H18C18.3782 20.75 18.6973 20.4683 18.7442 20.093L19.502 14.031C19.5206 13.8818 19.4043 13.75 19.2539 13.75H4.74612ZM12 14.75C12.4142 14.75 12.75 15.0858 12.75 15.5V18.5C12.75 18.9142 12.4142 19.25 12 19.25C11.5858 19.25 11.25 18.9142 11.25 18.5V15.5C11.25 15.0858 11.5858 14.75 12 14.75ZM9.58909 15.4298C9.54579 15.0179 9.17675 14.719 8.7648 14.7623C8.35286 14.8056 8.05401 15.1747 8.09731 15.5866L8.41089 18.5702C8.45419 18.9821 8.82324 19.281 9.23518 19.2377C9.64713 19.1944 9.94597 18.8253 9.90268 18.4134L9.58909 15.4298ZM15.2352 14.7623C15.6471 14.8056 15.946 15.1747 15.9027 15.5866L15.5891 18.5702C15.5458 18.9821 15.1768 19.281 14.7648 19.2377C14.3529 19.1944 14.054 18.8253 14.0973 18.4134L14.4109 15.4298C14.4542 15.0179 14.8233 14.719 15.2352 14.7623Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,8 @@
+name: ShoppingBasketFill
+category: Money
+sub_category: Payment
+keywords:
+  - handlekurv
+variant: Fill
+updated_at: 13.03.2023
+created_at: 13.03.2023
@@ -12,6 +12,8 @@ keywords:
  - varsel
  - problem
  - feil
+  - stop
+  - stopp
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 12.03.2023
 created_at: 07.03.2023
@@ -12,6 +12,8 @@ keywords:
  - varsel
  - problem
  - feil
+  - stop
+  - stopp
 variant: Fill
-updated_at: 08.03.2023
+updated_at: 12.03.2023
 created_at: 07.03.2023
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "2.7.6",
+  "version": "2.8.3",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -53,9 +53,9 @@
    "create-icons": "svgr --silent --index-template config/index-template.js --out-dir src icons",
    "copy-util": "copyfiles util/* src",
    "copy-svg": "copyfiles -f icons/*.svg dist/svg/",
+    "copy": "yarn copy-util && yarn copy-svg",
    "update-metadata": "node config/metadata.js",
-    "build": "yarn copy-util && yarn copy-svg && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && node config/cleanTypes.js && yarn update-metadata",
-    "build:old": "copyfiles util/* src && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && node cleanTypes.js && yarn create-package-json-pointers-to-esm",
+    "build": "yarn copy && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && node config/cleanTypes.js && yarn update-metadata",
    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
    "fetch-new:icons": "node config/figma/index.mjs",
    "zip:icons": "node config/zip.js"
@@ -1,5 +1,17 @@
 # @navikt/ds-codemod

+## 2.8.3
+
+## 2.8.2
+
+## 2.8.1
+
+## 2.8.0
+
+## 2.7.8
+
+## 2.7.7
+
 ## 2.7.6

 ## 2.7.5
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-codemod",
-  "version": "2.7.6",
+  "version": "2.8.3",
  "description": "Aksel codemods for NAVs designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -39,8 +39,8 @@
    "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.7.6",
-    "@navikt/ds-react": "^2.7.6",
+    "@navikt/ds-icons": "^2.8.3",
+    "@navikt/ds-react": "^2.8.3",
    "clsx": "^1.1.1"
  },
  "devDependencies": {
@@ -1,4 +1,3 @@
-import React from "react";
 import { PageHeader } from ".";

 export default {
@@ -14,11 +13,3 @@ export default {
    },
  },
 };
-
-export const Default = {
-  render: (props) => <PageHeader>{props.children}</PageHeader>,
-
-  args: {
-    children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
-  },
-};
@@ -1,5 +1,29 @@
 # @navikt/ds-css

+## 2.8.3
+
+## 2.8.2
+
+### Patch Changes
+
+- [#1870](https://github.com/navikt/aksel/pull/1870) [`9c495cf50`](https://github.com/navikt/aksel/commit/9c495cf5037a7453e51e273ab93e4232576f4958) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert typografi for ExpansioCard
+
+## 2.8.1
+
+## 2.8.0
+
+### Minor Changes
+
+- [#1820](https://github.com/navikt/aksel/pull/1820) [`c6d51a019`](https://github.com/navikt/aksel/commit/c6d51a01902e4fd7916a422e17ed175f39acd458) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Ny komponent! ExpansionCard. Oppfølger fra gammel Ekspanderbartpanel.
+
+## 2.7.8
+
+### Patch Changes
+
+- [#1863](https://github.com/navikt/aksel/pull/1863) [`7ace69f21`](https://github.com/navikt/aksel/commit/7ace69f215760bbb5bf997670c897403d8ee558d) Thanks [@it-vegard](https://github.com/it-vegard)! - Added focus indicator for tabpanel
+
+## 2.7.7
+
 ## 2.7.6

 ## 2.7.5
@@ -0,0 +1,194 @@
+.navds-expansioncard {
+  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
+  --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
+  --__ac-expansioncard-border-width: 1px;
+
+  border-radius: var(--__ac-expansioncard-border-radius);
+  background-color: var(--ac-expansioncard-bg, var(--a-surface-default));
+  height: fit-content;
+}
+
+.navds-expansioncard--open {
+  --__ac-expansioncard-border-color: var(
+    --ac-expansioncard-border-open-color,
+    var(--ac-expansioncard-border-color, var(--a-border-default))
+  );
+}
+
+.navds-expansioncard:hover {
+  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
+}
+
+:where(.navds-expansioncard.navds-expansioncard--open):hover {
+  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
+}
+
+/*************************
+ * Header *
+ *************************/
+.navds-expansioncard__header {
+  width: 100%;
+  display: flex;
+  gap: var(--a-spacing-4);
+  padding: var(--a-spacing-4) var(--a-spacing-6);
+  border-radius: var(--__ac-expansioncard-border-radius);
+  background-color: var(--ac-expansioncard-header-bg, var(--a-surface-transparent));
+  position: relative;
+  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
+  justify-content: space-between;
+}
+
+.navds-expansioncard--small > :where(.navds-expansioncard__header) {
+  padding: var(--a-spacing-3) var(--a-spacing-4);
+}
+
+.navds-expansioncard__header:hover {
+  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
+  box-shadow: 0 0 0 1px var(--__ac-expansioncard-border-color);
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
+  border-bottom: none;
+  background-color: var(--ac-expansioncard-header-open-bg, var(--a-surface-transparent));
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
+  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
+  box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
+    0 -1px 0 0 var(--__ac-expansioncard-border-color);
+}
+
+/*************************
+ * Header/Typography *
+ *************************/
+
+.navds-expansioncard__title--small {
+  margin-top: 10px;
+}
+
+.navds-expansioncard__title--medium {
+  margin-top: var(--a-spacing-2);
+}
+
+.navds-expansioncard__title--large {
+  margin-top: var(--a-spacing-1);
+}
+
+.navds-expansioncard--small :where(.navds-expansioncard__title--small) {
+  margin-top: var(--a-spacing-05);
+}
+
+.navds-expansioncard--small :where(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
+  margin-top: 0;
+}
+
+/*************************
+ * Header/Button *
+ *************************/
+.navds-expansioncard__header-button {
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  margin: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--ac-expansioncard-button-border-radius, var(--a-border-radius-medium));
+  min-height: 3rem;
+  min-width: 3rem;
+  font-size: 1.5rem;
+  align-self: flex-start;
+}
+
+.navds-expansioncard--small > :where(.navds-expansioncard__header) > :where(.navds-expansioncard__header-button) {
+  min-height: 2rem;
+  min-width: 2rem;
+}
+
+:where(.navds-expansioncard__header):hover > :where(.navds-expansioncard__header-button) {
+  background-color: var(--a-surface-hover);
+}
+
+.navds-expansioncard__header-chevron {
+  transition: transform 150ms ease-in-out;
+}
+
+.navds-expansioncard--open :where(.navds-expansioncard__header-chevron) {
+  transform: translateY(0) rotate(180deg);
+}
+
+.navds-expansioncard__header-button:hover > :where(.navds-expansioncard__header-chevron) {
+  transform: translateY(1px);
+}
+
+.navds-expansioncard__header-button:focus {
+  outline: none;
+}
+
+.navds-expansioncard__header-button:focus-visible {
+  box-shadow: var(--a-shadow-focus);
+}
+
+.navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {
+  transform: translateY(-1px) rotate(180deg);
+}
+
+.navds-expansioncard__header-button::after {
+  inset: 0;
+  z-index: 1;
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+}
+
+/*************************
+ * Content *
+ *************************/
+.navds-expansioncard__content {
+  border-end-end-radius: var(--__ac-expansioncard-border-radius);
+  border-end-start-radius: var(--__ac-expansioncard-border-radius);
+  padding: var(--a-spacing-3) var(--a-spacing-6) var(--a-spacing-6);
+  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
+  border-top: none;
+}
+
+.navds-expansioncard--small > :where(.navds-expansioncard__content) {
+  padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-4);
+}
+
+.navds-expansioncard__content--closed {
+  display: none;
+}
+
+:where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
+  box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
+    0 1px 0 0 var(--__ac-expansioncard-border-color);
+}
+
+.navds-expansioncard__content-inner {
+  animation: fadeExpansionCard 250ms ease;
+}
+
+.navds-expansioncard--no-fade :where(.navds-expansioncard__content-inner) {
+  animation: none;
+}
+
+@keyframes fadeExpansionCard {
+  0% {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+
+  40% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
@@ -8,6 +8,7 @@
@import "content-container.css";
@import "chat.css";
@import "chips.css";
+@import "expansioncard.css";
@import "guide-panel.css";
@import "form/index.css";
@import "help-text.css";
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "2.7.6",
+  "version": "2.8.3",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -20,7 +20,7 @@
    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^2.7.6",
+    "@navikt/ds-tokens": "^2.8.3",
    "normalize.css": "^8.0.1",
    "postcss": "^8.4.0",
    "postcss-cli": "^9.0.0",
@@ -108,6 +108,7 @@
  font-size: 1.5rem;
 }

-.navds-tabs__tabpanel:focus {
+.navds-tabs__tabpanel:focus-visible {
  outline: none;
+  box-shadow: inset 0 0 0 2px var(--a-border-focus);
 }
@@ -106,6 +106,17 @@
    "--ac-date-input-error-border": "--a-border-danger",
    "--ac-date-input-button-text": "--a-text-default"
  },
+  "expansioncard": {
+    "--ac-expansioncard-bg": "--a-surface-default",
+    "--ac-expansioncard-header-bg": "--a-surface-transparent",
+    "--ac-expansioncard-header-bg-hover": "--a-surface-hover",
+    "--ac-expansioncard-header-open-bg": "--a-surface-transparent",
+    "--ac-expansioncard-border-color": "--a-border-default",
+    "--ac-expansioncard-border-open-color": "--a-border-default",
+    "--ac-expansioncard-border-radius": "--a-border-radius-large",
+    "--ac-expansioncard-button-border-radius": "--a-border-radius-medium",
+    "--ac-expansioncard-border-hover-color": "--a-border-strong"
+  },
  "guidepanel": {
    "--ac-guide-panel-bg": "--a-surface-default",
    "--ac-guide-panel-border": "--a-border-action",
@@ -1,5 +1,61 @@
 # @navikt/ds-react

+## 2.8.3
+
+### Patch Changes
+
+- [#1875](https://github.com/navikt/aksel/pull/1875) [`f862aa9c2`](https://github.com/navikt/aksel/commit/f862aa9c2ec71ffdb295708dc6dad6b77af9519e) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Textarea har oppdatert counter-tekst + mulighet for lokalisering
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.3
+  - @navikt/ds-icons@2.8.3
+
+## 2.8.2
+
+### Patch Changes
+
+- [#1870](https://github.com/navikt/aksel/pull/1870) [`9c495cf50`](https://github.com/navikt/aksel/commit/9c495cf5037a7453e51e273ab93e4232576f4958) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert typografi for ExpansioCard
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.2
+  - @navikt/ds-icons@2.8.2
+
+## 2.8.1
+
+### Patch Changes
+
+- [`1276b4d7e`](https://github.com/navikt/aksel/commit/1276b4d7efd831d20345292dbb21a11d100a0ddd) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Endret default title-size til medium for ExpansionCard
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.1
+  - @navikt/ds-icons@2.8.1
+
+## 2.8.0
+
+### Minor Changes
+
+- [#1820](https://github.com/navikt/aksel/pull/1820) [`c6d51a019`](https://github.com/navikt/aksel/commit/c6d51a01902e4fd7916a422e17ed175f39acd458) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Ny komponent! ExpansionCard. Oppfølger fra gammel Ekspanderbartpanel.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.0
+  - @navikt/ds-icons@2.8.0
+
+## 2.7.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.7.8
+
+## 2.7.7
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.7.7
+
 ## 2.7.6

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "2.7.6",
+  "version": "2.8.3",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -37,7 +37,8 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.17.0",
-    "@navikt/ds-icons": "^2.7.6",
+    "@navikt/aksel-icons": "^2.8.3",
+    "@navikt/ds-icons": "^2.8.3",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -0,0 +1,121 @@
+import cl from "clsx";
+import React, { createContext, forwardRef, useRef, useState } from "react";
+import ExpansionCardContent, {
+  ExpansionCardContentType,
+} from "./ExpansionCardContent";
+import {
+  ExpansionCardDescription,
+  ExpansionCardDescriptionType,
+} from "./ExpansionCardDescription";
+import ExpansionCardHeader, {
+  ExpansionCardHeaderType,
+} from "./ExpansionCardHeader";
+import {
+  ExpansionCardTitle,
+  ExpansionCardTitleType,
+} from "./ExpansionCardTitle";
+
+interface ExpansionCardComponent
+  extends React.ForwardRefExoticComponent<
+    ExpansionCardProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Header: ExpansionCardHeaderType;
+  Title: ExpansionCardTitleType;
+  Description: ExpansionCardDescriptionType;
+  Content: ExpansionCardContentType;
+}
+
+export interface ExpansionCardProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * Callback for when Card is toggled open/closed
+   */
+  onToggle?: (open: boolean) => void;
+  /**
+   * Controlled open-state
+   * Using this removes automatic control of open-state
+   */
+  open?: boolean;
+  /**
+   * Defaults to open if not controlled
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+  /**
+   * Since ExpansionCard is a section-element, accessible name is required.
+   */
+  ["aria-label"]: string;
+}
+
+export type ExpansionCardContextProps = {
+  open: boolean;
+  toggleOpen: () => void;
+  size: "medium" | "small";
+};
+
+export const ExpansionCardContext = createContext<ExpansionCardContextProps>({
+  open: false,
+  toggleOpen: () => {},
+  size: "medium",
+});
+
+export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
+  (
+    {
+      className,
+      onToggle,
+      open,
+      defaultOpen = false,
+      size = "medium",
+      ...rest
+    },
+    ref
+  ) => {
+    const [_open, _setOpen] = useState(defaultOpen);
+
+    const shouldFade = useRef<boolean>(!(Boolean(open) || defaultOpen));
+
+    const handleOpen = () => {
+      if (open === undefined) {
+        const newOpen = !_open;
+        _setOpen(newOpen);
+        onToggle?.(newOpen);
+      } else {
+        onToggle?.(!open);
+      }
+      shouldFade.current = true;
+    };
+
+    return (
+      <ExpansionCardContext.Provider
+        value={{ open: open ?? _open, toggleOpen: handleOpen, size }}
+      >
+        <section
+          {...rest}
+          className={cl(
+            "navds-expansioncard",
+            className,
+            `navds-expansioncard--${size}`,
+            {
+              "navds-expansioncard--open": open ?? _open,
+              "navds-expansioncard--no-fade": !shouldFade.current,
+            }
+          )}
+          ref={ref}
+        />
+      </ExpansionCardContext.Provider>
+    );
+  }
+) as ExpansionCardComponent;
+
+ExpansionCard.Header = ExpansionCardHeader;
+ExpansionCard.Content = ExpansionCardContent;
+ExpansionCard.Title = ExpansionCardTitle;
+ExpansionCard.Description = ExpansionCardDescription;
+
+export default ExpansionCard;
@@ -0,0 +1,43 @@
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
+import { BodyLong } from "../typography/BodyLong";
+import { ExpansionCardContext } from "./ExpansionCard";
+
+export interface ExpansionCardContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export type ExpansionCardContentType = React.ForwardRefExoticComponent<
+  ExpansionCardContentProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const ExpansionCardContent: ExpansionCardContentType = forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    const panelContext = useContext(ExpansionCardContext);
+
+    if (panelContext === null) {
+      console.error(
+        "<ExpansionCard.Content> has to be used within an <ExpansionCard>"
+      );
+      return null;
+    }
+
+    return (
+      <BodyLong
+        {...rest}
+        ref={ref}
+        as="div"
+        className={cl("navds-expansioncard__content", {
+          "navds-expansioncard__content--closed": !panelContext.open,
+        })}
+        aria-hidden={!panelContext.open}
+        size={panelContext.size}
+      >
+        <div className="navds-expansioncard__content-inner">{children}</div>
+      </BodyLong>
+    );
+  }
+);
+
+export default ExpansionCardContent;
@@ -0,0 +1,35 @@
+import React, { forwardRef, useContext } from "react";
+import cl from "clsx";
+import { BodyLong } from "../typography/BodyLong";
+import { ExpansionCardContext } from "./ExpansionCard";
+
+interface ExpansionCardDescriptionProps
+  extends React.HTMLAttributes<HTMLParagraphElement> {
+  children: React.ReactNode;
+}
+
+export type ExpansionCardDescriptionType = React.ForwardRefExoticComponent<
+  ExpansionCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>
+>;
+
+export const ExpansionCardDescription: ExpansionCardDescriptionType =
+  forwardRef(({ className, ...rest }, ref) => {
+    const panelContext = useContext(ExpansionCardContext);
+
+    if (panelContext === null) {
+      console.error(
+        "<ExpansionCard.Header> has to be used within an <ExpansionCard>"
+      );
+      return null;
+    }
+
+    return (
+      <BodyLong
+        {...rest}
+        as="p"
+        ref={ref}
+        className={cl("navds-link-panel__description", className)}
+        size={panelContext.size}
+      />
+    );
+  });
@@ -0,0 +1,50 @@
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
+import { ExpansionCardContext } from "./ExpansionCard";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
+
+export interface ExpansionCardHeaderProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export type ExpansionCardHeaderType = React.ForwardRefExoticComponent<
+  ExpansionCardHeaderProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const ExpansionCardHeader: ExpansionCardHeaderType = forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    const panelContext = useContext(ExpansionCardContext);
+
+    if (panelContext === null) {
+      console.error(
+        "<ExpansionCard.Header> has to be used within an <ExpansionCard>"
+      );
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        {...rest}
+        className={cl("navds-expansioncard__header", className)}
+      >
+        <div className="navds-expansioncard__header-content">{children}</div>
+
+        <button
+          className="navds-expansioncard__header-button"
+          onClick={() => panelContext.toggleOpen()}
+          type="button"
+          aria-expanded={panelContext.open}
+        >
+          <ChevronDownIcon
+            className="navds-expansioncard__header-chevron"
+            title="Vis mer"
+          />
+        </button>
+      </div>
+    );
+  }
+);
+
+export default ExpansionCardHeader;
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+import { OverridableComponent } from "../util/OverridableComponent";
+
+interface ExpansionCardTitleProps
+  extends React.HTMLAttributes<HTMLHeadingElement> {
+  children: React.ReactNode;
+  /**
+   * Changes text-sizing
+   * @default medium
+   */
+  size?: "large" | "medium" | "small";
+}
+
+export type ExpansionCardTitleType = OverridableComponent<
+  ExpansionCardTitleProps,
+  HTMLHeadingElement
+>;
+
+export const ExpansionCardTitle: ExpansionCardTitleType = forwardRef(
+  ({ className, as: Component = "h3", size = "medium", ...rest }, ref) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl(
+        "navds-expansioncard__title",
+        `navds-expansioncard__title--${size}`,
+        "navds-heading",
+        `navds-heading--${size}`,
+        className
+      )}
+    />
+  )
+);
@@ -0,0 +1,269 @@
+import { PlantIcon } from "@navikt/aksel-icons";
+import React, { useState } from "react";
+import { ExpansionCard } from ".";
+import { BodyLong } from "../typography";
+import ExpansionCardContent from "./ExpansionCardContent";
+import ExpansionCardHeader from "./ExpansionCardHeader";
+
+export default {
+  title: "ds-react/ExpansionCard",
+  component: ExpansionCard,
+  subcomponents: [ExpansionCardHeader, ExpansionCardContent],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: "600px",
+          minHeight: "100vh",
+          padding: "10rem 0",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+const Content = () => (
+  <ExpansionCard.Content>
+    <BodyLong spacing>
+      På ditt faste arbeidssted vil du ha yrkesskadedekning også i hvilepauser,
+      lunsjpauser, trimaktiviteter og lignende i arbeidstiden.
+    </BodyLong>
+    <BodyLong spacing>
+      Som hovedregel er du som arbeidstaker ikke yrkesskadedekket på veien til
+      og fra arbeid eller første og siste oppdragssted. Du er heller ikke
+      yrkesskadedekket på fritiden eller under private gjøremål i arbeidstiden.
+    </BodyLong>
+    <BodyLong spacing>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga suscipit
+      voluptatum expedita earum id, aperiam deleniti molestiae eveniet
+      doloremque explicabo perspiciatis quasi repellendus! Est dolore a nemo
+      aspernatur obcaecati dicta.
+    </BodyLong>
+    <BodyLong spacing>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga suscipit
+      voluptatum expedita earum id, aperiam deleniti molestiae eveniet
+      doloremque explicabo perspiciatis quasi repellendus! Est dolore a nemo
+      aspernatur obcaecati dicta.
+    </BodyLong>
+    <BodyLong>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga suscipit
+      voluptatum expedita earum id, aperiam deleniti molestiae eveniet
+      doloremque explicabo perspiciatis quasi repellendus! Est dolore a nemo
+      aspernatur obcaecati dicta.
+    </BodyLong>
+  </ExpansionCard.Content>
+);
+
+export const Default = {
+  render: (props) => {
+    return (
+      <ExpansionCard
+        {...props}
+        open={props?.open || undefined}
+        size={props.size}
+        aria-label="default-demo"
+      >
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+          {props.description && (
+            <ExpansionCard.Description>
+              For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+              til tid, sted og arbeidsoppgaver
+            </ExpansionCard.Description>
+          )}
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+    );
+  },
+  args: {
+    open: false,
+    size: "medium",
+    description: false,
+    variant: "neutral",
+  },
+  argTypes: {
+    size: { control: "select", options: ["medium", "small"] },
+  },
+};
+
+export const Description = {
+  render: () => (
+    <ExpansionCard aria-label="bare description">
+      <ExpansionCard.Header>
+        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+        <ExpansionCard.Description>
+          For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
+          tid, sted og arbeidsoppgaver
+        </ExpansionCard.Description>
+      </ExpansionCard.Header>
+      <Content />
+    </ExpansionCard>
+  ),
+};
+
+export const Sizes = {
+  render: () => (
+    <>
+      <h2>Medium</h2>
+      <ExpansionCard aria-label="Demo med description">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+          <ExpansionCard.Description>
+            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+            til tid, sted og arbeidsoppgaver
+          </ExpansionCard.Description>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+      <ExpansionCard aria-label="Demo">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+      <h2>Small</h2>
+      <ExpansionCard size="small" aria-label="small-demo">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+          <ExpansionCard.Description>
+            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+            til tid, sted og arbeidsoppgaver
+          </ExpansionCard.Description>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+      <ExpansionCard
+        size="small"
+        aria-label="small-demo med avatar uten description"
+      >
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+    </>
+  ),
+};
+
+export const HeadingSizing = {
+  render: () => (
+    <>
+      {(["large", "medium", "small"] as const).map((x) => (
+        <ExpansionCard aria-label={`demo-${x}`}>
+          <ExpansionCard.Header key={x}>
+            <ExpansionCard.Title size={x}>{x}</ExpansionCard.Title>
+            <ExpansionCard.Description>
+              For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+              til tid, sted og arbeidsoppgaver
+            </ExpansionCard.Description>
+          </ExpansionCard.Header>
+          <Content />
+        </ExpansionCard>
+      ))}
+    </>
+  ),
+};
+
+export const DefaultOpen = {
+  render: () => (
+    <ExpansionCard defaultOpen aria-label="defaultOpen demo">
+      <ExpansionCard.Header>
+        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+        <ExpansionCard.Description>
+          For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
+          tid, sted og arbeidsoppgaver
+        </ExpansionCard.Description>
+      </ExpansionCard.Header>
+      <Content />
+    </ExpansionCard>
+  ),
+};
+
+export const ControlledState = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [open, setOpen] = useState(false);
+    return (
+      <ExpansionCard
+        open={open}
+        onToggle={setOpen}
+        aria-label="Controlled-state demo"
+      >
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+          <ExpansionCard.Description>
+            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+            til tid, sted og arbeidsoppgaver
+          </ExpansionCard.Description>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+    );
+  },
+};
+
+export const Customization = {
+  render: () => (
+    <div className="subtle-card">
+      <ExpansionCard aria-label="custom-styling demo">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+          <ExpansionCard.Description>
+            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+            til tid, sted og arbeidsoppgaver
+          </ExpansionCard.Description>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+
+      <style>{`
+        .subtle-card {
+          --ac-expansioncard-bg: var(--a-surface-subtle);
+          --ac-expansioncard-border-open-color: var(--a-border-alt-3);
+        }`}</style>
+    </div>
+  ),
+};
+
+export const Icon = {
+  render: () => (
+    <div>
+      <ExpansionCard aria-label="custom-styling demo">
+        <ExpansionCard.Header>
+          <div className="with-icon">
+            <div className="icon">
+              <PlantIcon aria-hidden />
+            </div>
+            <div>
+              <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+              <ExpansionCard.Description>
+                For at yrkesskadedekningen skal gjelde, er det som hovedregel
+                krav til tid, sted og arbeidsoppgaver
+              </ExpansionCard.Description>
+            </div>
+          </div>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+
+      <style>{`
+        .with-icon {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+        }
+        .icon {
+          font-size: 3rem;
+          flex-shrink: 0;
+          display: grid;
+          place-content: center;
+        }`}</style>
+    </div>
+  ),
+};
@@ -0,0 +1,4 @@
+export {
+  type ExpansionCardProps,
+  default as ExpansionCard,
+} from "./ExpansionCard";
@@ -45,6 +45,15 @@ export interface TextareaProps
   * Enables resizing of field
   */
  resize?: boolean;
+  /**
+   * i18n-translations for counter-text
+   */
+  i18n?: {
+    /** @default Antall tegn igjen */
+    counterLeft?: string;
+    /** @default tegn for mye */
+    counterTooMuch?: string;
+  };
 }

 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
@@ -65,6 +74,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
      maxLength,
      hideLabel = false,
      resize,
+      i18n,
      ...rest
    } = props;

@@ -166,6 +176,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
                maxLength={maxLength}
                currentLength={props.value?.length ?? controlledValue?.length}
                size={size}
+                i18n={i18n}
              />
            </>
          )}
@@ -185,7 +196,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
  }
 );

-export const Counter = ({ maxLength, currentLength, size }) => {
+export const Counter = ({ maxLength, currentLength, size, i18n }) => {
  const difference = maxLength - currentLength;

  return (
@@ -197,8 +208,8 @@ export const Counter = ({ maxLength, currentLength, size }) => {
      size={size}
    >
      {difference < 0
-        ? `Antall tegn for mye ${Math.abs(difference)}`
-        : `Antall tegn igjen ${difference}`}
+        ? `${Math.abs(difference)} ${i18n?.counterLeft ?? "tegn for mye"}`
+        : `${difference} ${i18n?.counterTooMuch ?? "tegn igjen"}`}
    </BodyShort>
  );
 };
@@ -5,6 +5,7 @@ export * from "./chat";
 export * from "./chips";
 export * from "./date";
 export * from "./form";
+export * from "./expansion-card";
 export * from "./grid";
 export * from "./guide-panel";
 export * from "./help-text";
@@ -3,9 +3,6 @@ import cl from "clsx";

 export interface PopoverContentProps
  extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Modal.Content content
-   */
  children: React.ReactNode;
 }

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

+## 2.8.3
+
+## 2.8.2
+
+## 2.8.1
+
+## 2.8.0
+
+## 2.7.8
+
+## 2.7.7
+
 ## 2.7.6

 ## 2.7.5
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "2.7.6",
+  "version": "2.8.3",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -22,7 +22,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^2.7.6",
+    "@navikt/ds-tokens": "^2.8.3",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,17 @@
 # @navikt/ds-tokens

+## 2.8.3
+
+## 2.8.2
+
+## 2.8.1
+
+## 2.8.0
+
+## 2.7.8
+
+## 2.7.7
+
 ## 2.7.6

 ## 2.7.5
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "2.7.6",
+  "version": "2.8.3",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,17 @@
 # @navikt/ds-icons

+## 2.8.3
+
+## 2.8.2
+
+## 2.8.1
+
+## 2.8.0
+
+## 2.7.8
+
+## 2.7.7
+
 ## 2.7.6

 ## 2.7.5
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "2.7.6",
+  "version": "2.8.3",
  "description": "Aksel icons for NAV",
  "author": "Aksel | NAV designsystem team",
  "repository": {
@@ -1,5 +1,17 @@
 # @navikt/ds-css-internal

+## 2.8.3
+
+## 2.8.2
+
+## 2.8.1
+
+## 2.8.0
+
+## 2.7.8
+
+## 2.7.7
+
 ## 2.7.6

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css-internal",
-  "version": "2.7.6",
+  "version": "2.8.3",
  "description": "CSS for NAV internal Designsystem-components",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,53 @@
 # @navikt/ds-react-internal

+## 2.8.3
+
+### Patch Changes
+
+- Updated dependencies [[`f862aa9c2`](https://github.com/navikt/aksel/commit/f862aa9c2ec71ffdb295708dc6dad6b77af9519e)]:
+  - @navikt/ds-react@2.8.3
+  - @navikt/ds-icons@2.8.3
+
+## 2.8.2
+
+### Patch Changes
+
+- Updated dependencies [[`9c495cf50`](https://github.com/navikt/aksel/commit/9c495cf5037a7453e51e273ab93e4232576f4958)]:
+  - @navikt/ds-react@2.8.2
+  - @navikt/ds-icons@2.8.2
+
+## 2.8.1
+
+### Patch Changes
+
+- Updated dependencies [[`1276b4d7e`](https://github.com/navikt/aksel/commit/1276b4d7efd831d20345292dbb21a11d100a0ddd)]:
+  - @navikt/ds-react@2.8.1
+  - @navikt/ds-icons@2.8.1
+
+## 2.8.0
+
+### Patch Changes
+
+- Updated dependencies [[`c6d51a019`](https://github.com/navikt/aksel/commit/c6d51a01902e4fd7916a422e17ed175f39acd458)]:
+  - @navikt/ds-react@2.8.0
+  - @navikt/ds-icons@2.8.0
+
+## 2.7.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.7.8
+  - @navikt/ds-icons@2.7.8
+
+## 2.7.7
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.7.7
+  - @navikt/ds-icons@2.7.7
+
 ## 2.7.6

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "2.7.6",
+  "version": "2.8.3",
  "description": "Aksel react components for internal UIs in NAV",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -35,8 +35,8 @@
    "watch": "tsc --watch -p tsconfig.esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.7.6",
-    "@navikt/ds-react": "^2.7.6",
+    "@navikt/ds-icons": "^2.8.3",
+    "@navikt/ds-react": "^2.8.3",
    "clsx": "^1.1.1",
    "copy-to-clipboard": "^3.3.1"
  },
@@ -15,15 +15,15 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^2.7.6",
-    "@navikt/ds-codemod": "^2.7.6",
-    "@navikt/ds-css": "^2.7.6",
-    "@navikt/ds-css-internal": "^2.7.6",
-    "@navikt/ds-icons": "^2.7.6",
-    "@navikt/ds-react": "^2.7.6",
-    "@navikt/ds-react-internal": "^2.7.6",
-    "@navikt/ds-tailwind": "^2.7.6",
-    "@navikt/ds-tokens": "^2.7.6"
+    "@navikt/aksel-icons": "^2.8.3",
+    "@navikt/ds-codemod": "^2.8.3",
+    "@navikt/ds-css": "^2.8.3",
+    "@navikt/ds-css-internal": "^2.8.3",
+    "@navikt/ds-icons": "^2.8.3",
+    "@navikt/ds-react": "^2.8.3",
+    "@navikt/ds-react-internal": "^2.8.3",
+    "@navikt/ds-tailwind": "^2.8.3",
+    "@navikt/ds-tokens": "^2.8.3"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -3,6 +3,7 @@ import { BodyLong, Detail, Heading, Ingress, Link } from "@navikt/ds-react";
 import BlockContent from "@sanity/block-content-to-react";
 import cl from "clsx";
 import InnholdsKort from "components/sanity-modules/cards/InnholdsKort";
+import ExpansionCard from "components/sanity-modules/ExpansionCard";
 import NextLink from "next/link";
 import React, { createContext, useContext } from "react";
 import {
@@ -49,6 +50,7 @@ const serializers = {
    do_dont: ({ node }) => <DoDont node={node} />,
    bilde: ({ node }) => <Bilde node={node} />,
    alert: ({ node }) => <Alert node={node} />,
+    expansioncard: ({ node }) => <ExpansionCard node={node} />,
    kode: ({ node }) => <Kode node={node} />,
    tabell_v2: ({ node }) => <Tabell node={node} />,
    accordion: ({ node }) => <Accordion node={node} />,
@@ -83,6 +83,52 @@ export const GithubIcon = ({ ...props }) => (
  </svg>
 );

+export const SlackIcon = ({ ...props }) => (
+  <svg
+    width="20"
+    height="21"
+    viewBox="0 0 20 21"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    focusable={false}
+    aria-hidden
+    {...props}
+  >
+    <path
+      d="M4.92656 12.8086C4.92625 13.1721 4.81818 13.5274 4.616 13.8295C4.41382 14.1316 4.12661 14.3669 3.79068 14.5058C3.45475 14.6447 3.08518 14.6809 2.72869 14.6098C2.37221 14.5387 2.0448 14.3635 1.78787 14.1063C1.53094 13.8492 1.35601 13.5216 1.28521 13.1651C1.2144 12.8085 1.2509 12.439 1.39008 12.1032C1.52926 11.7674 1.76488 11.4804 2.06715 11.2784C2.36942 11.0765 2.72477 10.9688 3.08828 10.9688H4.92656V12.8086Z"
+      fill="currentColor"
+    />
+    <path
+      d="M5.85303 12.8086C5.85303 12.3211 6.0467 11.8535 6.39145 11.5088C6.73619 11.164 7.20377 10.9703 7.69131 10.9703C8.17885 10.9703 8.64643 11.164 8.99117 11.5088C9.33591 11.8535 9.52959 12.3211 9.52959 12.8086V17.4117C9.52959 17.8993 9.33591 18.3669 8.99117 18.7116C8.64643 19.0563 8.17885 19.25 7.69131 19.25C7.20377 19.25 6.73619 19.0563 6.39145 18.7116C6.0467 18.3669 5.85303 17.8993 5.85303 17.4117V12.8086Z"
+      fill="currentColor"
+    />
+    <path
+      d="M7.69146 5.42656C7.32794 5.42625 6.97269 5.31818 6.67059 5.116C6.36849 4.91382 6.13312 4.62661 5.99422 4.29068C5.85532 3.95475 5.81914 3.58518 5.89025 3.22869C5.96136 2.87221 6.13656 2.5448 6.39371 2.28787C6.65086 2.03094 6.97841 1.85601 7.33496 1.78521C7.69151 1.7144 8.06105 1.7509 8.39686 1.89008C8.73267 2.02926 9.01968 2.26488 9.2216 2.56715C9.42353 2.86942 9.5313 3.22477 9.5313 3.58828V5.42656H7.69146Z"
+      fill="currentColor"
+    />
+    <path
+      d="M7.69141 6.35315C8.17895 6.35315 8.64652 6.54682 8.99127 6.89157C9.33601 7.23631 9.52969 7.70389 9.52969 8.19143C9.52969 8.67897 9.33601 9.14655 8.99127 9.49129C8.64652 9.83604 8.17895 10.0297 7.69141 10.0297H3.08828C2.60074 10.0297 2.13316 9.83604 1.78842 9.49129C1.44368 9.14655 1.25 8.67897 1.25 8.19143C1.25 7.70389 1.44368 7.23631 1.78842 6.89157C2.13316 6.54682 2.60074 6.35315 3.08828 6.35315H7.69141Z"
+      fill="currentColor"
+    />
+    <path
+      d="M15.0735 8.19139C15.0738 7.82788 15.1819 7.47263 15.3841 7.17053C15.5862 6.86843 15.8734 6.63305 16.2094 6.49416C16.5453 6.35526 16.9149 6.31908 17.2714 6.39019C17.6278 6.4613 17.9552 6.6365 18.2122 6.89365C18.4691 7.1508 18.644 7.47835 18.7148 7.8349C18.7856 8.19145 18.7491 8.56099 18.61 8.8968C18.4708 9.23261 18.2352 9.51962 17.9329 9.72154C17.6306 9.92346 17.2753 10.0312 16.9118 10.0312H15.0735V8.19139Z"
+      fill="currentColor"
+    />
+    <path
+      d="M14.1468 8.19141C14.1468 8.67895 13.9531 9.14652 13.6084 9.49127C13.2636 9.83601 12.796 10.0297 12.3085 10.0297C11.821 10.0297 11.3534 9.83601 11.0086 9.49127C10.6639 9.14652 10.4702 8.67895 10.4702 8.19141V3.58828C10.4702 3.10074 10.6639 2.63316 11.0086 2.28842C11.3534 1.94368 11.821 1.75 12.3085 1.75C12.796 1.75 13.2636 1.94368 13.6084 2.28842C13.9531 2.63316 14.1468 3.10074 14.1468 3.58828V8.19141Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12.3086 15.5734C12.6721 15.5737 13.0274 15.6818 13.3295 15.884C13.6316 16.0862 13.8669 16.3734 14.0058 16.7093C14.1447 17.0452 14.1809 17.4148 14.1098 17.7713C14.0387 18.1278 13.8635 18.4552 13.6063 18.7121C13.3492 18.9691 13.0216 19.144 12.6651 19.2148C12.3085 19.2856 11.939 19.2491 11.6032 19.1099C11.2674 18.9707 10.9804 18.7351 10.7784 18.4328C10.5765 18.1306 10.4688 17.7752 10.4688 17.4117V15.5734H12.3086Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12.3085 14.6469C11.821 14.6469 11.3534 14.4532 11.0086 14.1085C10.6639 13.7637 10.4702 13.2962 10.4702 12.8086C10.4702 12.3211 10.6639 11.8535 11.0086 11.5088C11.3534 11.164 11.821 10.9703 12.3085 10.9703H16.9116C17.3992 10.9703 17.8667 11.164 18.2115 11.5088C18.5562 11.8535 18.7499 12.3211 18.7499 12.8086C18.7499 13.2962 18.5562 13.7637 18.2115 14.1085C17.8667 14.4532 17.3992 14.6469 16.9116 14.6469H12.3085Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
 export const YarnIcon = () => (
  <svg
    width="20"
@@ -128,23 +174,26 @@ export const StorybookIcon = ({ ...props }) => (
      <g id="storybook-icon" transform="translate(1.000000, 1.000000)">
        <path
          id="Combined-Shape"
-          fill="var(--a-gray-600)"
+          fill="currentColor"
          fillRule="nonzero"
          d="M50.2729096,2.92285771 C50.2769973,2.98759391 50.2790429,3.05244063 50.2790429,3.11730315 L50.2790429,58.8828028 C50.2790429,60.6043831 48.8689636,62 47.1295431,62 C47.0824212,62 47.0353056,61.9989534 46.9882313,61.9968606 L4.94876437,60.1280997 C3.31149338,60.0553189 2.00425692,58.751918 1.94279175,57.1309472 L0.0022554267,5.95476663 C-0.0618328758,4.26461814 1.24754196,2.83223697 2.95307926,2.72673418 L37.427,0.594 L37.1272753,7.62078766 C37.1238721,7.70179664 37.1419373,7.78178731 37.179031,7.85305525 L37.2223772,7.92113026 C37.3791917,8.12573637 37.6738999,8.16578288 37.880626,8.0105767 L37.880626,8.0105767 L40.6382617,5.94019678 L42.9673936,7.75618537 C43.0546693,7.82423279 43.1634862,7.85946584 43.2745216,7.85562813 C43.5338374,7.84666553 43.7367132,7.6313391 43.7276576,7.37468316 L43.7276576,7.37468316 L43.467,0.22 L46.9330824,0.00617628491 C48.6691159,-0.10121296 50.1644074,1.2046298 50.2729096,2.92285771 Z"
+          className="group-focus:text-surface-inverted text-surface-default"
        />
        <path
          id="S"
-          fill="#fff"
+          fill="currentColor"
          fillRule="nonzero"
          d="M29.4029796,23.368648 C29.4029796,24.58142 37.6567008,24.00017 38.7646901,23.1482813 C38.7646901,14.8895929 34.2873503,10.5497821 26.0885852,10.5497821 C17.88982,10.5497821 13.2961856,14.9571143 13.2961856,21.5681161 C13.2961856,33.0822778 28.9959487,33.3026444 28.9959487,39.5830962 C28.9959487,41.3460299 28.1237396,42.3927719 26.2048797,42.3927719 C23.7045471,42.3927719 22.7160434,41.1289316 22.832338,36.8317805 C22.832338,35.8995698 13.2961856,35.6089448 13.0054493,36.8317805 C12.2651161,47.2453073 18.8201763,50.248968 26.3211742,50.248968 C33.5895831,50.248968 39.2880157,46.4144645 39.2880157,39.4729126 C39.2880157,27.132376 23.3556634,27.4629261 23.3556634,21.3477494 C23.3556634,18.8686237 25.2163761,18.5380737 26.3211742,18.5380737 C27.4841196,18.5380737 29.5774214,18.7409467 29.4029796,23.368648 Z"
          mask="url(#mask-2)"
+          className="text-deepblue-700 group-focus:text-text-on-inverted"
        />
        <path
          id="bookmark"
-          fill="#fff"
+          fill="currentColor"
          fillRule="nonzero"
          d="M37.1272753,7.62078766 L37.4276823,0.591583333 L43.4674595,0.218291667 L43.7276576,7.37468316 C43.7367132,7.6313391 43.5338374,7.84666553 43.2745216,7.85562813 C43.1634862,7.85946584 43.0546693,7.82423279 42.9673936,7.75618537 L40.6382617,5.94019678 L37.880626,8.0105767 C37.6738999,8.16578288 37.3791917,8.12573637 37.2223772,7.92113026 C37.1563661,7.83500129 37.1227378,7.72879963 37.1272753,7.62078766 Z"
          mask="url(#mask-2)"
+          className="text-deepblue-700 group-focus:text-text-on-inverted"
        />
      </g>
    </g>
@@ -13,33 +13,33 @@ const Logo = (props): JSX.Element => (
  >
    <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"
+      fill="currentColor"
    />
    <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"
+      fill="currentColor"
    />
    <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"
+      fill="currentColor"
    />
    <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"
+      fill="currentColor"
    />
    <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"
+      fill="currentColor"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      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"
+      fill="currentColor"
    />
    <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"
+      fill="currentColor"
    />
  </svg>
 );
@@ -1,7 +1,8 @@
 import { BodyShort, Heading, Link } from "@navikt/ds-react";
-
-import NextLink from "next/link";
-import { EditButton, ScrollTop } from "../..";
+import { FigmaIcon, GithubIcon, SlackIcon } from "components/assets";
+import Logo from "components/assets/Logo";
+import { logNav } from "components/website-modules/utils/amplitude";
+import { EditButton } from "../..";
 import FooterForm from "./FooterForm";

 const Footer = () => {
@@ -12,164 +13,109 @@ const Footer = () => {
      data-theme="dark"
      className="toc-ignore text-text-on-inverted bg-deepblue-800 relative flex w-full justify-center"
    >
-      <div className="relative z-10 mx-auto grid w-full max-w-screen-2xl gap-16 px-4 pt-12 pb-16 md:px-6">
-        <div className="grid gap-12 xl:grid-cols-3 xl:gap-6">
-          <ScrollTop />
-          <div>
-            <Heading level="2" size="small">
-              Aksel
-            </Heading>
-            <BodyShort as="ul" className="mt-5 grid gap-2">
-              <li>
-                <NextLink
-                  href="/god-praksis/artikler/om-aksel"
-                  passHref
-                  legacyBehavior
-                >
-                  <Link className="text-text-on-inverted focus:shadow-focus focus:text-text-default focus:bg-blue-200 focus:shadow-blue-200">
-                    Om Aksel
-                  </Link>
-                </NextLink>
-              </li>
-              <li>
-                <NextLink
-                  href="/god-praksis/artikler/skriv-for-aksel"
-                  passHref
-                  legacyBehavior
-                >
-                  <Link className="text-text-on-inverted focus:shadow-focus focus:text-text-default focus:bg-blue-200 focus:shadow-blue-200">
-                    Skriv for Aksel
-                  </Link>
-                </NextLink>
-              </li>
-              <li>
-                <Link
-                  className="text-text-on-inverted focus:shadow-focus focus:text-text-default focus:bg-blue-200 focus:shadow-blue-200"
-                  href="https://nav-it.slack.com/archives/C7NE7A8UF"
-                >
-                  #Aksel-designsystemet på Slack
-                </Link>
-              </li>
-              <li>
-                <Link
-                  className="text-text-on-inverted focus:shadow-focus focus:text-text-default focus:bg-blue-200 focus:shadow-blue-200"
-                  href="/prinsipper/brukeropplevelse"
-                >
-                  Prinsipper for brukeropplevelse
-                </Link>
-              </li>
-              <li>
-                <Link
-                  className="text-text-on-inverted focus:shadow-focus focus:text-text-default focus:bg-blue-200 focus:shadow-blue-200"
-                  href="/side/tilgjengelighetserklaring-for-aksel"
-                >
-                  Tilgjengelighet
-                </Link>
-              </li>
-              {/* <li>
-                  <Link
-                    className="text-text-on-inverted focus:shadow-focus focus:text-text-default focus:bg-blue-200 focus:shadow-blue-200"
-                    href="https://nav-it.slack.com/archives/C7NE7A8UF"
-                  >
-                    Designsystemet på Slack
-                  </Link>
-                </li> */}
-            </BodyShort>
-          </div>
-          <FooterForm />
-        </div>
-        <div className="grid xl:grid-cols-3 xl:gap-6">
-          <div className="mb-4 grid gap-2 xl:mb-0">
-            <svg
-              width="64"
-              height="20"
-              viewBox="0 0 64 20"
-              fill="none"
-              aria-hidden
-              focusable="false"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <g clipPath="url(#clip0_2259_53938)">
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M63.4798 1H56.8198C56.8198 1 56.3608 1 56.1988 1.406L52.5138 12.693L48.8318 1.406C48.6688 1.001 48.2078 1.001 48.2078 1.001H35.4038C35.2694 1.00203 35.1407 1.05569 35.0454 1.15046C34.9501 1.24523 34.8956 1.37359 34.8938 1.508V5.341C34.8938 2.301 31.6608 1.001 29.7668 1.001C25.5268 1.001 22.6888 3.795 21.8048 8.044C21.7568 5.225 21.5228 4.215 20.7638 3.181C20.4148 2.674 19.9118 2.249 19.3638 1.896C18.2338 1.234 17.2188 1.001 15.0398 1.001H12.4798C12.4798 1.001 12.0178 1.001 11.8548 1.406L9.52582 7.18V1.508C9.52452 1.37411 9.47082 1.24606 9.37624 1.15128C9.28165 1.05651 9.15371 1.00256 9.01982 1.001H3.09682C3.09682 1.001 2.63982 1.001 2.47282 1.406L0.0528186 7.41C0.0528186 7.41 -0.189181 8.01 0.362819 8.01H2.63982V19.45C2.63982 19.734 2.86282 19.96 3.14782 19.96H9.01782C9.08466 19.9599 9.15082 19.9466 9.21253 19.9209C9.27423 19.8952 9.33027 19.8576 9.37744 19.8102C9.42462 19.7629 9.462 19.7067 9.48746 19.6449C9.51291 19.5831 9.52595 19.5168 9.52582 19.45V8.01H11.8148C13.1278 8.01 13.4048 8.046 13.9158 8.284C14.2238 8.401 14.5008 8.636 14.6528 8.907C14.9628 9.49 15.0398 10.19 15.0398 12.255V19.45C15.0398 19.734 15.2678 19.96 15.5498 19.96H21.1758C21.1758 19.96 21.8118 19.96 22.0628 19.33L23.3098 16.247C24.9678 18.571 27.6968 19.959 31.0888 19.959H31.8298C31.8298 19.959 32.4698 19.959 32.7228 19.331L34.8948 13.95V19.45C34.8948 19.5853 34.9485 19.715 35.0442 19.8106C35.1398 19.9063 35.2696 19.96 35.4048 19.96H41.1478C41.1478 19.96 41.7818 19.96 42.0358 19.33C42.0358 19.33 44.3328 13.625 44.3418 13.582H44.3458C44.4338 13.107 43.8348 13.107 43.8348 13.107H41.7848V3.316L48.2348 19.331C48.4858 19.959 49.1208 19.959 49.1208 19.959H55.9068C55.9068 19.959 56.5448 19.959 56.7968 19.331L63.9478 1.615C64.1948 1.001 63.4788 1.001 63.4788 1.001L63.4798 1ZM34.8928 13.108H31.0348C30.2962 13.108 29.5878 12.8146 29.0655 12.2923C28.5432 11.77 28.2498 11.0616 28.2498 10.323C28.2498 9.58437 28.5432 8.876 29.0655 8.35371C29.5878 7.83142 30.2962 7.538 31.0348 7.538H32.1138C32.8517 7.54012 33.5586 7.83465 34.0797 8.35706C34.6008 8.87946 34.8936 9.58713 34.8938 10.325V13.108H34.8928Z"
-                  fill="white"
-                />
-              </g>
-              <defs>
-                <clipPath id="clip0_2259_53938">
-                  <rect width="63.9997" height="20" fill="white" />
-                </clipPath>
-              </defs>
-            </svg>
-            Arbeids- og velferdsetaten
-          </div>
-          <span className="mb-1 self-end xl:mb-0" />
-          <div className="hidden self-end xl:block">
-            <p>&copy; {new Date().getFullYear()} NAV</p>
-            <NextLink
-              href="/side/personvernerklaering"
-              className="focus:bg-border-focus-on-inverted focus:text-text-default focus:ring-border-focus-on-inverted outline-none hover:underline focus:no-underline focus:ring"
-            >
-              Personvernerklæring og informasjonskapsler
-            </NextLink>
-          </div>
-          <div className="block self-end xl:hidden">
-            &copy; {new Date().getFullYear()} NAV |{" "}
-            <NextLink
-              href="/side/personvernerklaering"
-              className="focus:bg-border-focus-on-inverted focus:ring-border-focus-on-inverted outline-none hover:underline focus:no-underline focus:ring"
-            >
-              Personvernerklæring og informasjonskapsler
-            </NextLink>
-          </div>
-        </div>
+      <div className="relative z-10 mx-auto grid w-full max-w-screen-2xl gap-12 px-4 pt-12 pb-16 md:grid-cols-2 md:px-6 lg:grid-cols-4 xl:grid-cols-5 xl:gap-6">
+        <LogoBlock />
+        <Snarveier />
+        <SideLenker />
+        <Kontakt />
+        <FooterForm />
      </div>
+
      <EditButton />
-      <svg
-        width="548"
-        height="422"
-        viewBox="0 0 548 422"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className="absolute right-0 bottom-0 z-0"
-        aria-hidden
-        focusable={false}
-      >
-        <path
-          d="M664.991 350.212L431.631 116.852L664.64 116.852L898 350.212L664.991 350.212Z"
-          stroke="#004367"
-          strokeWidth="2.9687"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M625.456 156.037L392.097 389.396L625.456 622.756L858.816 389.396L625.456 156.037Z"
-          stroke="#004367"
-          strokeWidth="2.9687"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M353.262 195.222L119.903 428.581H352.912L586.271 195.222H353.262Z"
-          stroke="#004367"
-          strokeWidth="2.9687"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M314.076 234.407L80.7169 467.767L314.076 701.126L547.436 467.767L314.076 234.407Z"
-          stroke="#004367"
-          strokeWidth="2.9687"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M508.251 506.951L274.892 740.31H507.901L741.261 506.951H508.251Z"
-          stroke="#004367"
-          strokeWidth="2.9687"
-          strokeLinejoin="round"
-        />
-      </svg>
    </footer>
  );
 };

+function LogoBlock() {
+  return (
+    <div>
+      <Logo className="fill-white" />
+      <p className="mt-4">&copy; {new Date().getFullYear()} NAV</p>
+      <p>Arbeids- og velferdsetaten</p>
+    </div>
+  );
+}
+
+function Snarveier() {
+  return (
+    <div>
+      <Heading level="2" size="xsmall">
+        Snarveier
+      </Heading>
+      <BodyShort as="ul" className="mt-3 grid gap-3">
+        <FooterLink href="/god-praksis/artikler/om-aksel">
+          Hva er Aksel?
+        </FooterLink>
+        <FooterLink href="/god-praksis/artikler/skriv-for-aksel">
+          Skriv for Aksel
+        </FooterLink>
+        <FooterLink href="/prinsipper/brukeropplevelse">
+          Prinsipper for brukeropplevelse
+        </FooterLink>
+      </BodyShort>
+    </div>
+  );
+}
+
+function Kontakt() {
+  return (
+    <div>
+      <Heading level="2" size="xsmall">
+        Finn oss
+      </Heading>
+      <BodyShort as="ul" className="mt-3 grid gap-3">
+        <FooterLink href="https://www.figma.com/@nav_aksel">
+          <FigmaIcon />
+          Figma
+        </FooterLink>
+        <FooterLink href="https://github.com/navikt/aksel">
+          <GithubIcon />
+          Github
+        </FooterLink>
+        <FooterLink href="https://nav-it.slack.com/archives/C7NE7A8UF">
+          <SlackIcon />
+          Slack
+        </FooterLink>
+      </BodyShort>
+    </div>
+  );
+}
+function SideLenker() {
+  return (
+    <div>
+      <Heading level="2" size="xsmall">
+        Om nettstedet
+      </Heading>
+      <BodyShort as="ul" className="mt-3 grid gap-3">
+        <FooterLink href="/side/personvernerklaering">
+          Personvernserklæring
+        </FooterLink>
+        <FooterLink href="/side/tilgjengelighetserklaring-for-aksel">
+          Tilgjengelighetserklæring
+        </FooterLink>
+      </BodyShort>
+    </div>
+  );
+}
+
+function FooterLink({ children, href }) {
+  return (
+    <li>
+      <Link
+        className="text-text-on-inverted focus:shadow-focus focus:text-text-default flex w-fit items-center gap-1 no-underline hover:underline focus:bg-blue-200 focus:shadow-blue-200"
+        href={href}
+        onClick={(e) =>
+          logNav(
+            "footer",
+            window.location.pathname,
+            e.currentTarget.getAttribute("href")
+          )
+        }
+      >
+        {children}
+      </Link>
+    </li>
+  );
+}
+
 export default Footer;
@@ -1,6 +1,6 @@
-import { FeedbackT } from "@/lib";
-import { IdContext } from "@/utils";
-import { Button, Heading, Label, Textarea } from "@navikt/ds-react";
+import { Button, Label, Textarea } from "@navikt/ds-react";
+import { IdContext } from "components/website-modules/utils/contexts/id-context";
+import { FeedbackT } from "lib/types/types";
 import { useRouter } from "next/router";
 import { useContext, useEffect, useState } from "react";

@@ -55,7 +55,10 @@ const FooterForm = () => {

  return (
    <>
-      <div className="flex w-full max-w-md flex-col gap-8" data-theme="dark">
+      <div
+        className="flex w-full max-w-md flex-col lg:col-span-2 xl:col-span-1"
+        data-theme="dark"
+      >
        <div aria-live="polite">
          {sent.status && (
            <Label spacing as="p">
@@ -65,15 +68,12 @@ const FooterForm = () => {
        </div>
        {!sent.status && (
          <form onSubmit={(e) => handleSubmit(e)} className="w-full">
-            <div className="mb-4 flex flex-col gap-4">
-              <Heading level="2" size="small">
-                Gi en tilbakemelding
-              </Heading>
+            <div className="mb-3 flex flex-col gap-4">
              <Textarea
                className="textarea-override"
                error={contentError.content}
                autoComplete="off"
-                label="Melding"
+                label="Gi oss en tilbakemelding"
                value={contactForm.content}
                onChange={(e) => {
                  setContactForm({
@@ -85,13 +85,14 @@ const FooterForm = () => {
                    e.target.value.trim().length !== 0 &&
                    setContentError({ ...contentError, content: "" });
                }}
-                description="Ikke skriv inn navn eller andre personopplysninger"
+                description="Ikke skriv inn personopplysninger"
                minRows={2}
              />
            </div>
-            {contactForm.hasWritten && <Button>Send melding</Button>}
+            <Button size="small">Send melding</Button>
            <style>{`.textarea-override {
-              --ac-textarea-bg: var(--a-deepblue-800);
+              --ac-textarea-bg: var(--a-surface-default);
+              --ac-textarea-text: var(--a-text-default);
            }`}</style>
          </form>
        )}
@@ -0,0 +1,31 @@
+import Footer from "./Footer";
+import { Meta } from "@storybook/react";
+import { NextDecorator } from "../../StoryDecorator";
+
+const MetaData: Meta = {
+  component: Footer,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <NextDecorator>
+        <Story />
+      </NextDecorator>
+    ),
+  ],
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default MetaData;
+
+export const FooterDemo = {
+  render: () => <Footer />,
+  nextRouter: {
+    path: "/profile/[id]",
+    asPath: "/profile/lifeiscontent",
+    query: {
+      id: "lifeiscontent",
+    },
+  },
+};
@@ -72,7 +72,7 @@ export const Header = ({
              }
              className="focus-visible:shadow-focus grid h-full place-items-center rounded px-2 focus:outline-none"
            >
-              <Logo />
+              <Logo className="text-deepblue-800" />
              <span className="sr-only">Aksel</span>
            </Link>
          </div>
@@ -104,7 +104,6 @@ export const GlobalSearch = () => {
      )
        .then((x) => x.json())
        .then((res) => {
-          console.log(res);
          setResults(res);
          logSearchAttempt(res?.hits?.totalHits ?? 0, "standard");
          setLoading(false);
@@ -193,7 +192,7 @@ export const GlobalSearch = () => {
    <div className="z-[1050] mr-4 ml-auto flex justify-center lg:mr-0 lg:ml-0">
      <Button
        variant="primary"
-        className="hover:bg-deepblue-600 bg-deepblue-500 focus-visible:shadow-focus-gap h-11 focus:shadow-none"
+        className="hover:bg-deepblue-700 bg-deepblue-600 focus-visible:shadow-focus-gap h-11 focus:shadow-none"
        aria-keyshortcuts="Control+b"
        icon={
          <SearchIcon
@@ -124,7 +124,7 @@ const AkselArtikkelTemplate = ({
            {data.heading}
          </Heading>
          {data?.ingress && (
-            <Ingress className="override-text-700 mt-5 text-2xl">
+            <Ingress className="override-text-700 mt-4 text-2xl">
              {data?.ingress}
            </Ingress>
          )}
@@ -57,7 +57,6 @@ const ComponentOverview = ({
                {x.status?.bilde ? (
                  <Image
                    src={urlFor(x.status?.bilde).auto("format").url()}
-                    decoding="async"
                    width="200"
                    height="200"
                    layout="fixed"
@@ -42,16 +42,13 @@ const Element = ({
  if (!block.picture) return null;
  return (
    <figure
-      className={cl(
-        "flex min-w-full flex-1 flex-col rounded-t sm:min-w-[320px]",
-        {
-          "basis-full": block?.fullwidth,
-          "max-w-sm": !block?.fullwidth,
-        }
-      )}
+      className={cl("sm:min-w-80 flex min-w-full flex-1 flex-col rounded-t", {
+        "basis-full": block?.fullwidth,
+        "max-w-sm": !block?.fullwidth,
+      })}
    >
      <img
-        className="rounded-t bg-gray-50 shadow-[0_0_0_1px_var(--a-border-divider)]"
+        className="ring-border-subtle rounded-t bg-gray-50 ring-1"
        alt={block.alt}
        loading="lazy"
        decoding="async"
@@ -61,9 +58,9 @@ const Element = ({
        className={cl(
          "z-10 -ml-[1px] w-[calc(100%_+_2px)] rounded-b border-t-8",
          {
-            "border-t-green-400": block.variant === "do",
-            "border-t-red-400": block.variant === "dont",
-            "border-t-orange-500": block.variant === "warning",
+            "border-t-border-success": block.variant === "do",
+            "border-t-border-danger": block.variant === "dont",
+            "border-t-border-warning": block.variant === "warning",
          }
        )}
      />
@@ -87,7 +84,7 @@ const DoDont = ({ node }: { node: SanityT.Schema.do_dont }) => {
  return (
    <div className="mb-8 last:mb-0">
      {node?.blokker?.length > 0 && (
-        <div className="last flex flex-wrap justify-start gap-8">
+        <div className="last flex flex-wrap justify-start gap-6">
          {node.blokker.map((x) => (
            <Element key={x._key} block={x} />
          ))}
@@ -0,0 +1,41 @@
+import { SanityBlockContent } from "@/sanity-block";
+import { ExpansionCard as DsExpansionCard } from "@navikt/ds-react";
+import { withErrorBoundary } from "@/error-boundary";
+
+const ExpansionCard = ({
+  node,
+}: {
+  node: {
+    heading: string;
+    heading_level: "h3" | "h4";
+    description?: string;
+    body: any[];
+  };
+}): JSX.Element => {
+  if (!node.heading || !node.body || !node.heading_level) {
+    return null;
+  }
+
+  return (
+    <DsExpansionCard className="mb-7 max-w-2xl" aria-label={node.heading}>
+      <DsExpansionCard.Header>
+        <DsExpansionCard.Title
+          as={node.heading_level}
+          size={node.heading_level === "h3" ? "medium" : "small"}
+        >
+          {node.heading}
+        </DsExpansionCard.Title>
+        {node?.description && (
+          <DsExpansionCard.Description>
+            {node.description}
+          </DsExpansionCard.Description>
+        )}
+      </DsExpansionCard.Header>
+      <DsExpansionCard.Content>
+        <SanityBlockContent blocks={node.body} noLastMargin />
+      </DsExpansionCard.Content>
+    </DsExpansionCard>
+  );
+};
+
+export default withErrorBoundary(ExpansionCard, "ExpansionCard");
@@ -33,7 +33,7 @@ const ArtikkelCard = ({
    : _updatedAt;

  return (
-    <div className="hover:shadow-small focus-within:ring-border-focus bg-surface-default ring-border-subtle group relative rounded-lg p-5 pb-16 ring-1 focus-within:ring-[3px]">
+    <div className="hover:shadow-small focus-within:ring-border-focus bg-surface-default ring-border-subtle group relative rounded-lg p-3 pb-16 ring-1 focus-within:ring-[3px] sm:p-5 sm:pb-16">
      <NextLink
        href={{
          pathname: `/${slug}`,
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	1609604073	Version Packages (#1876 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-23 13:04:48 +01:00
Ken	f862aa9c2e	🌐 Textarea-tekster (#1875 )	2023-03-23 13:01:49 +01:00
Ken	8fce648c79	🔥 Fjernet unødvendig kommentar	2023-03-21 14:36:39 +01:00
github-actions[bot]andgithub-actions[bot]	34f421835c	Version Packages (#1871 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-21 14:22:57 +01:00
Ken	9c495cf503	💄 Dynamisk typografi for Expansioncard, flere token-muligheter (#1870 ) Resolves #1869	2023-03-21 14:20:30 +01:00
Ken	b5666ed040	⬆️ Oppdatert storybook til rc.5 (#1867 )	2023-03-21 10:25:20 +01:00
github-actions[bot]andgithub-actions[bot]	be4a951962	Version Packages (#1866 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-17 14:53:51 +01:00
Ken	1276b4d7ef	🐛 ExpansionCard hadde feil default-title size	2023-03-17 14:49:50 +01:00
Ken	8880b0dfb5	🎨 Expansioncard-modul	2023-03-17 14:37:15 +01:00
github-actions[bot]andgithub-actions[bot]	bfe60a9a62	Version Packages (#1865 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-17 14:03:13 +01:00
Ken	33aef230b0	💄 Bedre grid-break i footer	2023-03-17 13:11:29 +01:00
Ken	88243f76de	💄 God-praksis header aligner med tema-liste på forside	2023-03-17 12:09:19 +01:00
Ken	c00112e3e6	♿ Accessible ExpansionCard-icon	2023-03-17 11:59:24 +01:00
Ken	3c66b00c24	♻️ Refaktorert ExpansionCard før release 💄 Mer spacing-bottom for content i small expansioncard 🔥 Fjernet clickarea-prop 🔥 Fjernet avatar-prop 💄 Header-title margin 💄 Chevron-alignment til toppen 📝 Fikset nextjs demoer	2023-03-17 11:49:17 +01:00
Ken	db8303af42	📝 Justert beta-tekster	2023-03-17 10:07:55 +01:00
Ken	5fbd2e1814	🎨 Kan nå tagge beta som unsafe	2023-03-17 09:46:41 +01:00
Ken	85697be305	🐛 Fikset demo-bug for expansioncard	2023-03-16 21:03:22 +01:00
Ken	36fb35533d	♻️ Bedre ikoner for expansioncard	2023-03-16 20:45:14 +01:00
Ken	3709e432bb	📝 Oppdatert ExpansionCard til å bruke bare section-element	2023-03-16 16:12:43 +01:00
Ken	c6077a03fa	🎨 Suggestion-lenker åpnes nå i ny fane	2023-03-16 15:42:02 +01:00
Ken	c6d51a0190	[Ny komponent] ExpansionCard (#1820 )	2023-03-16 15:40:30 +01:00
github-actions[bot]andgithub-actions[bot]	777d94b3d4	Version Packages (#1864 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-16 15:03:50 +01:00
Vegard Haugstvedt	7ace69f215	Bugfix/missing focus indicator for tabpanel (#1863 ) * Add focus-visible for tabpanel * Set focus-indicator width to 2px instead of 3px. This is a change that will probably be applied throughout the design system in time. * New version for DS-CSS adding focus indicator to tabpanels	2023-03-16 14:53:49 +01:00
Ken	6724bb8f71	💄 Fikset header-logo farge	2023-03-16 10:24:40 +01:00
Ken	59253e992f	📝 Datepicker description	2023-03-16 09:59:32 +01:00
Ken	91b6e0be18	🔥 Fjernet ekstra console.log	2023-03-16 09:12:53 +01:00
Ken	02f5c29723	Oppdatert forside, footer (#1858 )	2023-03-15 14:24:56 +01:00
Ken	859d5d6407	🐛 Pageheader-story manglet default export	2023-03-14 10:11:42 +01:00
github-actions[bot]andgithub-actions[bot]	3e7beb6765	Version Packages (#1855 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-13 17:15:32 +01:00
Ken	a22ac3eb78	🎉 Nye ikoner i aksel-icons	2023-03-13 17:07:55 +01:00
Ken	224d894488	🔥 Fjernet placeholder-story	2023-03-13 13:12:44 +01:00
Ken	b265dcaa42	💚 Prod bruker ny doocker-image host	2023-03-13 09:21:57 +01:00
Ken	dbb35fa10f	Merge branch 'next'	2023-03-13 09:18:43 +01:00
Ken	a8956bfe0d	💚 Image sync lasting	2023-03-13 09:17:21 +01:00
Ken	7065175d84	🐛 dev-image hadde feil format	2023-03-10 20:15:30 +01:00
Ken	34eb101902	🐛 dev-image hadde feil format	2023-03-10 20:05:23 +01:00
Ken	d31ed4cb6c	🐛 Riktig image-env	2023-03-10 17:04:02 +01:00
Ken	7f21fd7700	🐛 Fikset image-taggp	2023-03-10 16:27:11 +01:00
Ken	082765df58	⚗️ Tester ny deploy-action	2023-03-10 16:17:52 +01:00
Ken	b0fd72ebfc	🔊 Logger sidetitler	2023-03-10 16:05:00 +01:00
Ken	13afd5da41	Merge branch 'main' into next	2023-03-10 15:11:48 +01:00
Ken	31bc51ac01	💄 Justert ingress-marginer	2023-03-10 12:50:19 +01:00
Ken	2ee29881a5	Merge branch 'main' into next	2023-03-10 12:25:42 +01:00
Ken	8b84c24610	🐛 Fiket maksbredde tailwind	2023-03-10 10:53:08 +01:00
Ken	52a37f949f	Merge branch 'main' into next	2023-03-10 10:45:34 +01:00
Ken	a11aa34bf9	💄 Justert ikonside	2023-03-09 21:20:22 +01:00