Version Packages (#1828 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
♿ Fikset siteimprove feilmeldinger for kode-eksempler
2026-10-13 01:02:02 +00:00 · 2023-02-28 14:03:10 +01:00 · 2023-02-28 13:36:40 +01:00 · 2023-02-28 13:30:28 +01:00 · 2023-02-28 12:24:30 +01:00 · 2023-02-24 11:30:56 +01:00
58 changed files with 1503 additions and 1041 deletions
@@ -1,5 +1,7 @@
 # @navikt/ds-codemod

+## 2.4.1
+
 ## 2.4.0

 ## 2.3.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-codemod",
-  "version": "2.4.0",
+  "version": "2.4.1",
  "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.4.0",
-    "@navikt/ds-react": "^2.4.0",
+    "@navikt/ds-icons": "^2.4.1",
+    "@navikt/ds-react": "^2.4.1",
    "clsx": "^1.1.1"
  },
  "devDependencies": {
@@ -1,5 +1,7 @@
 # @navikt/ds-css

+## 2.4.1
+
 ## 2.4.0

 ### Minor Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "2.4.0",
+  "version": "2.4.1",
  "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.4.0",
+    "@navikt/ds-tokens": "^2.4.1",
    "normalize.css": "^8.0.1",
    "postcss": "^8.4.0",
    "postcss-cli": "^9.0.0",
@@ -1,5 +1,14 @@
 # @navikt/ds-react

+## 2.4.1
+
+### Patch Changes
+
+- [#1827](https://github.com/navikt/aksel/pull/1827) [`98c06b0be`](https://github.com/navikt/aksel/commit/98c06b0be20debff9969af874d5239ec920fa401) Thanks [@kschieren](https://github.com/kschieren)! - Added fixedWeeks prop to standalone datepicker
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.4.1
+
 ## 2.4.0

 ### Minor Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "2.4.0",
+  "version": "2.4.1",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -37,7 +37,7 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.17.0",
-    "@navikt/ds-icons": "^2.4.0",
+    "@navikt/ds-icons": "^2.4.1",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -24,6 +24,11 @@ interface DatePickerStandaloneDefaultProps
   * Datepicker classname
   */
  className?: string;
+  /**
+   * If datepicker should be fixed to 6 weeks, regardless of actual weeks in month
+   * @default true
+   */
+  fixedWeeks?: boolean;
 }

 export type DatePickerStandaloneProps = DatePickerStandaloneDefaultProps &
@@ -50,6 +55,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
      id,
      defaultSelected,
      onSelect,
+      fixedWeeks = true,
      ...rest
    },
    ref
@@ -113,7 +119,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
            weekend: "rdp-day__weekend",
          }}
          showWeekNumber={showWeekNumber}
-          fixedWeeks
+          fixedWeeks={fixedWeeks}
          showOutsideDays
          {...omit(rest, ["onSelect"])}
        />
@@ -42,7 +42,13 @@ function showContent(element: HTMLDivElement | null, height: Height) {
 // ------------------ Component

 interface AnimateHeightProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * @default 250ms
+   */
  duration?: number;
+  /**
+   * @default ease
+   */
  easing?: string;
  height: Height;
  innerClassName?: string;
@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind

+## 2.4.1
+
 ## 2.4.0

 ## 2.3.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "2.4.0",
+  "version": "2.4.1",
  "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.4.0",
+    "@navikt/ds-tokens": "^2.4.1",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,7 @@
 # @navikt/ds-tokens

+## 2.4.1
+
 ## 2.4.0

 ## 2.3.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "2.4.0",
+  "version": "2.4.1",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,7 @@
 # @navikt/ds-icons

+## 2.4.1
+
 ## 2.4.0

 ## 2.3.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "2.4.0",
+  "version": "2.4.1",
  "description": "Aksel icons for NAV",
  "author": "Aksel | NAV designsystem team",
  "repository": {
@@ -1,5 +1,7 @@
 # @navikt/ds-css-internal

+## 2.4.1
+
 ## 2.4.0

 ## 2.3.1
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css-internal",
-  "version": "2.4.0",
+  "version": "2.4.1",
  "description": "CSS for NAV internal Designsystem-components",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,13 @@
 # @navikt/ds-react-internal

+## 2.4.1
+
+### Patch Changes
+
+- Updated dependencies [[`98c06b0be`](https://github.com/navikt/aksel/commit/98c06b0be20debff9969af874d5239ec920fa401)]:
+  - @navikt/ds-react@2.4.1
+  - @navikt/ds-icons@2.4.1
+
 ## 2.4.0

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "2.4.0",
+  "version": "2.4.1",
  "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.4.0",
-    "@navikt/ds-react": "^2.4.0",
+    "@navikt/ds-icons": "^2.4.1",
+    "@navikt/ds-react": "^2.4.1",
    "clsx": "^1.1.1",
    "copy-to-clipboard": "^3.3.1"
  },
@@ -15,16 +15,16 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/ds-codemod": "^2.4.0",
-    "@navikt/ds-css": "^2.4.0",
-    "@navikt/ds-css-internal": "^2.4.0",
-    "@navikt/ds-icons": "^2.4.0",
-    "@navikt/ds-react": "^2.4.0",
-    "@navikt/ds-react-internal": "^2.4.0",
-    "@navikt/ds-tailwind": "^2.4.0",
-    "@navikt/ds-tokens": "^2.4.0"
+    "@navikt/ds-codemod": "^2.4.1",
+    "@navikt/ds-css": "^2.4.1",
+    "@navikt/ds-css-internal": "^2.4.1",
+    "@navikt/ds-icons": "^2.4.1",
+    "@navikt/ds-react": "^2.4.1",
+    "@navikt/ds-react-internal": "^2.4.1",
+    "@navikt/ds-tailwind": "^2.4.1",
+    "@navikt/ds-tokens": "^2.4.1"
  },
  "devDependencies": {
-    "prettier-plugin-tailwindcss": "^0.1.13"
+    "prettier-plugin-tailwindcss": "^0.2.3"
  }
 }
@@ -190,7 +190,7 @@ const serializers = {
      }
      if (href && href.startsWith("mailto:")) {
        return (
-          <NextLink href={href} passHref>
+          <NextLink href={href} passHref legacyBehavior>
            <Link
              onClick={(e) =>
                logNav(
@@ -222,7 +222,7 @@ const serializers = {
          {children} <ExternalLink title="åpner lenken i ny fane" />
        </Link>
      ) : (
-        <NextLink href={href} passHref>
+        <NextLink href={href} passHref legacyBehavior>
          <Link
            onClick={(e) =>
              logNav(
@@ -244,7 +244,7 @@ const serializers = {

      const href = `/${slug?.current}`;
      return (
-        <NextLink href={href} passHref>
+        <NextLink href={href} passHref legacyBehavior>
          <Link
            onClick={(e) =>
              logNav(
@@ -21,14 +21,22 @@ const Footer = () => {
            </Heading>
            <BodyShort as="ul" className="mt-5 grid gap-2">
              <li>
-                <NextLink href="/god-praksis/artikler/om-aksel" passHref>
+                <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>
+                <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>
@@ -98,23 +106,22 @@ const Footer = () => {
            Arbeids- og velferdsetaten
          </div>
          <span className="mb-1 self-end xl:mb-0" />
-          {/* <BodyShort className="mb-1 self-end xl:mb-0">
-            Redaktør: Eidar Grande Vollan
-          </BodyShort> */}
          <div className="hidden self-end xl:block">
            <p>&copy; {new Date().getFullYear()} NAV</p>
-            <NextLink href="/side/personvernerklaering" passHref>
-              <a className="focus:bg-border-focus-on-inverted focus:text-text-default focus:ring-border-focus-on-inverted outline-none hover:underline focus:no-underline focus:ring">
-                Personvernerklæring og informasjonskapsler
-              </a>
+            <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" passHref>
-              <a 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
-              </a>
+            <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>
@@ -11,27 +11,27 @@ const LinkElement = ({ name, href, onClick }) => {
  const { asPath } = useRouter();
  return (
    <li className="flex h-11 items-center">
-      <Link href={href} passHref>
-        <a
-          className={cl(
-            "hover:bg-surface-action-subtle-hover focus-visible:shadow-focus-inset relative flex h-full w-full items-center rounded px-2 focus:outline-none",
-            {
-              "before:bg-surface-action-selected pl-4 font-semibold before:absolute before:left-0 before:h-6 before:w-1 before:rounded-full":
-                asPath.startsWith(href),
-              "": !asPath.startsWith(href),
-            }
-          )}
-          onClick={(e) => {
-            logNav(
-              "header",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            );
-            onClick();
-          }}
-        >
-          {name}
-        </a>
+      <Link
+        href={href}
+        passHref
+        className={cl(
+          "hover:bg-surface-action-subtle-hover focus-visible:shadow-focus-inset relative flex h-full w-full items-center rounded px-2 focus:outline-none",
+          {
+            "before:bg-surface-action-selected pl-4 font-semibold before:absolute before:left-0 before:h-6 before:w-1 before:rounded-full":
+              asPath.startsWith(href),
+            "": !asPath.startsWith(href),
+          }
+        )}
+        onClick={(e) => {
+          logNav(
+            "header",
+            window.location.pathname,
+            e.currentTarget.getAttribute("href")
+          );
+          onClick();
+        }}
+      >
+        {name}
      </Link>
    </li>
  );
@@ -10,27 +10,27 @@ const LinkElement = ({ name, href }) => {
  const { asPath } = useRouter();
  return (
    <li>
-      <Link href={href} passHref>
-        <a
-          className={cl(
-            "text-deepblue-800 focus-visible:shadow-focus relative grid h-full place-items-center rounded px-2 focus:outline-none",
-            {
-              "before:bg-border-action-selected font-semibold before:absolute before:bottom-[1px] before:z-10 before:h-1 before:w-[calc(100%_-_16px)] before:rounded-full":
-                asPath.startsWith(href),
-              "hover:before:bg-border-subtle-hover before:absolute before:bottom-[1px] before:z-10 before:h-1 before:w-[calc(100%_-_16px)] before:rounded-full":
-                !asPath.startsWith(href),
-            }
-          )}
-          onClick={(e) =>
-            logNav(
-              "header",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
+      <Link
+        href={href}
+        passHref
+        className={cl(
+          "text-deepblue-800 focus-visible:shadow-focus relative grid h-full place-items-center rounded px-2 focus:outline-none",
+          {
+            "before:bg-border-action-selected font-semibold before:absolute before:bottom-[1px] before:z-10 before:h-1 before:w-[calc(100%_-_16px)] before:rounded-full":
+              asPath.startsWith(href),
+            "hover:before:bg-border-subtle-hover before:absolute before:bottom-[1px] before:z-10 before:h-1 before:w-[calc(100%_-_16px)] before:rounded-full":
+              !asPath.startsWith(href),
          }
-        >
-          {name}
-        </a>
+        )}
+        onClick={(e) =>
+          logNav(
+            "header",
+            window.location.pathname,
+            e.currentTarget.getAttribute("href")
+          )
+        }
+      >
+        {name}
      </Link>
    </li>
  );
@@ -56,20 +56,20 @@ export const Header = ({
      >
        <div className="mx-auto flex h-full max-w-screen-2xl items-center  pr-4 pt-3 lg:pr-6">
          <div className="xs:pr-6 xs:pl-4 flex h-11 items-center pr-4 pl-4">
-            <Link href="/" passHref>
-              <a
-                onClick={(e) =>
-                  logNav(
-                    "header",
-                    window.location.pathname,
-                    e.currentTarget.getAttribute("href")
-                  )
-                }
-                className="focus-visible:shadow-focus grid h-full place-items-center rounded px-2 focus:outline-none"
-              >
-                <Logo />
-                <span className="sr-only">Aksel</span>
-              </a>
+            <Link
+              href="/"
+              passHref
+              onClick={(e) =>
+                logNav(
+                  "header",
+                  window.location.pathname,
+                  e.currentTarget.getAttribute("href")
+                )
+              }
+              className="focus-visible:shadow-focus grid h-full place-items-center rounded px-2 focus:outline-none"
+            >
+              <Logo />
+              <span className="sr-only">Aksel</span>
            </Link>
          </div>
          <nav
@@ -2,9 +2,9 @@ import { urlFor } from "@/lib";
 import { isNew } from "@/utils";
 import { Tag } from "@navikt/ds-react";
 import cl from "classnames";
+import Image from "next/legacy/image";
 import { StatusTag } from "components/website-modules/StatusTag";
 import { SearchHit } from "lib/types/search";
-import Image from "next/image";
 import NextLink from "next/link";

 export function Hit({
@@ -29,16 +29,16 @@ export function Hit({
      )}
    >
      <div className="px-2 py-6">
-        <NextLink href={`/${hit.item.slug}`} passHref>
-          <a
-            onClick={() => logSuccess(index, `/${(hit.item as any).slug}`)}
-            className="flex items-center gap-2 text-xl font-semibold after:absolute after:inset-0 focus:outline-none"
-          >
-            <span className="group-hover:underline">
-              {highlightStr(hit.item.heading, query)}
-            </span>
-            <StatusTag status={hit?.item?.status?.tag} aria-hidden />
-          </a>
+        <NextLink
+          href={`/${hit.item.slug}`}
+          passHref
+          onClick={() => logSuccess(index, `/${(hit.item as any).slug}`)}
+          className="flex items-center gap-2 text-xl font-semibold after:absolute after:inset-0 focus:outline-none"
+        >
+          <span className="group-hover:underline">
+            {highlightStr(hit.item.heading, query)}
+          </span>
+          <StatusTag status={hit?.item?.status?.tag} aria-hidden />
        </NextLink>
        <span className="font-regular text-text-subtle text-lg" aria-hidden>
          {hit.highlight.shouldHightlight ? (
@@ -62,8 +62,8 @@ export function Hit({
          <Image
            src={urlFor(hit.item.status.bilde).auto("format").url()}
            decoding="sync"
-            width="96px"
-            height="96px"
+            width="96"
+            height="96"
            layout="fixed"
            objectFit="contain"
            alt={hit.item?.heading + " thumbnail"}
@@ -100,20 +100,17 @@ export function IconHit({
        <NextLink
          href={`/grunnleggende/staesj/ikoner?icon=${hit.item.name}`}
          passHref
+          onClick={() => logSuccess(index, `/${(hit.item as any).name}`)}
+          className="flex items-center gap-2 text-xl font-semibold after:absolute after:inset-0 focus:outline-none"
        >
-          <a
-            onClick={() => logSuccess(index, `/${(hit.item as any).name}`)}
-            className="flex items-center gap-2 text-xl font-semibold after:absolute after:inset-0 focus:outline-none"
-          >
-            <span className="group-hover:underline">
-              {highlightStr(hit.item.name, query)}
-            </span>
-            {isNew(hit.item?.created_at ?? "") && (
-              <Tag variant="info" size="small" aria-hidden>
-                Ny
-              </Tag>
-            )}
-          </a>
+          <span className="group-hover:underline">
+            {highlightStr(hit.item.name, query)}
+          </span>
+          {isNew(hit.item?.created_at ?? "") && (
+            <Tag variant="info" size="small" aria-hidden>
+              Ny
+            </Tag>
+          )}
        </NextLink>
      </div>

@@ -121,8 +118,8 @@ export function IconHit({
        <Image
          src={`https://raw.githubusercontent.com/navikt/aksel/main/%40navikt/icons/svg/${hit.item.name}.svg`}
          decoding="sync"
-          width="24px"
-          height="24px"
+          width="24"
+          height="24"
          layout="fixed"
          objectFit="contain"
          alt={hit.item.name + " thumbnail"}
@@ -154,6 +154,7 @@ const AkselArtikkelTemplate = ({
                    key={title}
                    href={`/god-praksis/${slug.current}`}
                    passHref
+                    legacyBehavior
                  >
                    <BodyShort
                      size="small"
@@ -8,7 +8,7 @@ import { ReactNode } from "react";
 import cl from "clsx";
 import NextLink from "next/link";
 import { capitalize } from "@/utils";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { TableOfContentsv2 } from "components/website-modules/TOCv2";

 const HeaderCube = ({ ...props }) => (
@@ -96,6 +96,7 @@ export const WithSidebar = ({
                      <NextLink
                        href={`/${pageType.type.toLowerCase()}`}
                        passHref
+                        legacyBehavior
                      >
                        <Link className="text-text-default">
                          {capitalize(pageType.type)}
@@ -31,7 +31,7 @@ const NavItem = ({
        }
      )}
    >
-      <Link href={`/${link.slug}`} passHref>
+      <Link href={`/${link.slug}`} passHref legacyBehavior>
        <BodyShort
          as="a"
          size="small"
@@ -102,6 +102,7 @@ const TokenTable = ({ node }: { node: SanityT.Schema.token_kategori }) => {
              <NextLink
                href="https://aksel.nav.no/grunnleggende/styling/design-tokens#hec62d38bc813"
                passHref
+                legacyBehavior
              >
                <Link>guiden vår</Link>
              </NextLink>{" "}
@@ -58,7 +58,7 @@ const Bilde = ({
                {node?.kilde?.link ? (
                  <>
                    {`${node?.kilde?.prefix}: `}
-                    <NextLink href={node.kilde.link} passHref>
+                    <NextLink href={node.kilde.link} passHref legacyBehavior>
                      <Link className="break-normal">{node?.kilde?.tekst}</Link>
                    </NextLink>
                  </>
@@ -42,25 +42,22 @@ const ArtikkelCard = ({
          },
        }}
        passHref
+        className="after:absolute after:inset-0 after:z-10 after:rounded-lg focus:outline-none"
+        onClick={(e) =>
+          logNav(
+            "artikkel-kort",
+            window.location.pathname,
+            e.currentTarget.getAttribute("href")
+          )
+        }
      >
-        <a
-          className="after:absolute after:inset-0 after:z-10 after:rounded-lg focus:outline-none"
-          onClick={(e) =>
-            logNav(
-              "artikkel-kort",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
-          }
+        <Heading
+          level={level}
+          size="small"
+          className="text-deepblue-700 group-hover:underline"
        >
-          <Heading
-            level={level}
-            size="small"
-            className="text-deepblue-700 group-hover:underline"
-          >
-            {heading}
-          </Heading>
-        </a>
+          {heading}
+        </Heading>
      </NextLink>
      {ingress && <BodyShort className="mt-2">{ingress}</BodyShort>}
      {variant === "god-praksis" ? (
@@ -20,7 +20,7 @@ const BloggCard = ({
  return (
    <li key={blog._id} className="border-b-border-subtle h-fit border-b pb-8">
      <Heading size="medium" as="div">
-        <NextLink href={`/${blog.slug}`} passHref>
+        <NextLink href={`/${blog.slug}`} passHref legacyBehavior>
          <Link
            className="text-deepblue-500 no-underline hover:underline"
            onClick={(e) =>
@@ -2,7 +2,7 @@ import { withErrorBoundary } from "@/error-boundary";
 import { BodyShort } from "@navikt/ds-react";
 import cl from "clsx";
 import NextLink from "next/link";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { logNav } from "@/utils";
 import { SanityT, urlFor } from "@/lib";

@@ -32,19 +32,19 @@ const GodPraksisCard = ({ node }: { node: AkselTemaT }) => {
          priority
        />
      </div>
-      <NextLink href={`/god-praksis/${node.slug.current}`} passHref>
-        <a
-          onClick={(e) =>
-            logNav(
-              "card",
-              window.location.pathname,
-              e.currentTarget.getAttribute("href")
-            )
-          }
-          className="navds-heading--medium text-deepblue-700 navds-heading  mb-4 no-underline after:absolute after:inset-0 after:rounded-lg focus:outline-none group-hover:underline"
-        >
-          {node.title}
-        </a>
+      <NextLink
+        href={`/god-praksis/${node.slug.current}`}
+        passHref
+        onClick={(e) =>
+          logNav(
+            "card",
+            window.location.pathname,
+            e.currentTarget.getAttribute("href")
+          )
+        }
+        className="navds-heading--medium text-deepblue-700 navds-heading  mb-4 no-underline after:absolute after:inset-0 after:rounded-lg focus:outline-none group-hover:underline"
+      >
+        {node.title}
      </NextLink>
      <BodyShort className={cl("mb-2 lg:mb-6")}>{node.oppsummering}</BodyShort>
      <BodyShort size="small" className="text-text-subtle">
@@ -23,19 +23,19 @@ const InnholdsKort = ({
        id={node._key}
        className="algolia-index-lvl3 text-deepblue-500 scroll-mt-28 focus:outline-none group-hover:underline"
      >
-        <NextLink href={`/${node?.lenke}`} passHref>
-          <a
-            onClick={(e) =>
-              logNav(
-                "prinsipp-kort",
-                window.location.pathname,
-                e.currentTarget.getAttribute("href")
-              )
-            }
-            className="z-10 before:absolute before:inset-0 focus:outline-none"
-          >
-            {node.title}
-          </a>
+        <NextLink
+          href={`/${node?.lenke}`}
+          passHref
+          onClick={(e) =>
+            logNav(
+              "prinsipp-kort",
+              window.location.pathname,
+              e.currentTarget.getAttribute("href")
+            )
+          }
+          className="z-10 before:absolute before:inset-0 focus:outline-none"
+        >
+          {node.title}
        </NextLink>
      </Heading>
      <SanityBlockContent blocks={node.body} noLastMargin />
@@ -31,32 +31,33 @@ const RelatertInnhold = ({
      )}
    >
      {node.lenker.map((x) => (
-        <NextLink href={getHref(x)} passHref key={x._key}>
-          <a
-            onClick={(e) =>
-              logNav(
-                "relatert-innhold",
-                window.location.pathname,
-                e.currentTarget.getAttribute("href")
-              )
-            }
-            className="algolia-ignore-index shadow-small focus-visible:shadow-focus bg-surface-default ring-border-subtle group grid rounded border-2 border-transparent px-4 py-3 ring-1 focus:outline-none"
+        <NextLink
+          href={getHref(x)}
+          passHref
+          key={x._key}
+          onClick={(e) =>
+            logNav(
+              "relatert-innhold",
+              window.location.pathname,
+              e.currentTarget.getAttribute("href")
+            )
+          }
+          className="algolia-ignore-index shadow-small focus-visible:shadow-focus bg-surface-default ring-border-subtle group grid rounded border-2 border-transparent px-4 py-3 ring-1 focus:outline-none"
+        >
+          <Heading
+            as="span"
+            size="xsmall"
+            className="underline group-hover:no-underline"
          >
-            <Heading
-              as="span"
-              size="xsmall"
-              className="underline group-hover:no-underline"
-            >
-              {x.title}
-            </Heading>
-            <BodyShort
-              size="small"
-              className="text-text-subtle mt-1 self-end break-words"
-              as="span"
-            >
-              {x.ekstern_domene ? <>{getTag(x)}</> : `aksel.nav.no`}
-            </BodyShort>
-          </a>
+            {x.title}
+          </Heading>
+          <BodyShort
+            size="small"
+            className="text-text-subtle mt-1 self-end break-words"
+            as="span"
+          >
+            {x.ekstern_domene ? <>{getTag(x)}</> : `aksel.nav.no`}
+          </BodyShort>
        </NextLink>
      ))}
    </div>
@@ -109,7 +109,7 @@ const ComponentExamples = ({
                    height={frameState}
                    onLoad={() => handleExampleLoad()}
                    id={iframeId}
-                    aria-label="Komponent eksempler"
+                    aria-label={`${node?.dir?.title} ${fil.navn} eksempel`}
                    className={cl(
                      "min-w-80 block w-full max-w-full resize-x overflow-auto bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]"
                    )}
@@ -123,7 +123,7 @@ const ComponentExamples = ({
                      ".tsx",
                      ""
                    )}`}
-                    className="text-gray-900"
+                    className="si-ignore text-gray-900"
                    target="_blank"
                  >
                    Åpne i nytt vindu
@@ -3,7 +3,7 @@ import { SanityT, urlFor } from "@/lib";
 import { Heading } from "@navikt/ds-react";
 import Nextlink from "next/link";
 import cl from "clsx";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { StatusTag } from "components/website-modules/StatusTag";

 const ComponentOverview = ({
@@ -58,8 +58,8 @@ const ComponentOverview = ({
                  <Image
                    src={urlFor(x.status?.bilde).auto("format").url()}
                    decoding="async"
-                    width="200px"
-                    height="200px"
+                    width="200"
+                    height="200"
                    layout="fixed"
                    objectFit="contain"
                    alt={x?.heading + " thumbnail"}
@@ -106,7 +106,11 @@ const ComponentOverview = ({

              <div className="grid p-6 pt-0">
                <span className="flex items-center justify-between">
-                  <Nextlink href={`/${x?.slug.current}`} passHref>
+                  <Nextlink
+                    href={`/${x?.slug.current}`}
+                    passHref
+                    legacyBehavior
+                  >
                    <Heading
                      as="a"
                      size="small"
@@ -62,6 +62,7 @@ const Filter = ({
        }}
        size="small"
        defaultValue="outline"
+        variant="neutral"
      >
        <ToggleGroup.Item value="outline">Outline</ToggleGroup.Item>
        <ToggleGroup.Item value="filled">Filled</ToggleGroup.Item>
@@ -1,7 +1,7 @@
 import meta from "@navikt/ds-icons/meta.json";
 import { BodyShort, Button, Detail, Heading } from "@navikt/ds-react";
-import Image from "next/image";
 import { useEffect, useState } from "react";
+import Image from "next/legacy/image";

 import {
  AmplitudeEvents,
@@ -136,8 +136,8 @@ import ${icon} from "@navikt/ds-icons/svg/${icon}.svg";`,
          <Image
            src={`https://raw.githubusercontent.com/navikt/aksel/main/%40navikt/icons/svg/${icon}.svg`}
            decoding="sync"
-            width="96px"
-            height="96px"
+            width="96"
+            height="96"
            layout="fixed"
            objectFit="contain"
            alt={icon + "eksempel lyst"}
@@ -149,8 +149,8 @@ import ${icon} from "@navikt/ds-icons/svg/${icon}.svg";`,
            src={`https://raw.githubusercontent.com/navikt/aksel/main/%40navikt/icons/svg/${icon}.svg`}
            decoding="sync"
            className="invert"
-            width="96px"
-            height="96px"
+            width="96"
+            height="96"
            layout="fixed"
            objectFit="contain"
            alt={icon + " eksempel mørk bakgrunn"}
@@ -16,49 +16,45 @@ const AkselLink = ({
  className?: string;
 }) => {
  return (
-    <Link href={href} passHref>
-      <a
+    <Link
+      href={href}
+      passHref
+      className={cl("group relative w-fit pr-5 focus:outline-none", className, {
+        "white focus-visible:text-text-default focus-visible:bg-blue-200 focus-visible:shadow-[0_0_0_3px_var(--a-blue-200)]":
+          inverted,
+        "text-deepblue-500 focus-visible:text-text-on-action group-hover:text-deepblue-800 focus-visible:bg-blue-800 focus-visible:shadow-[0_0_0_3px_var(--a-blue-800)]":
+          !inverted,
+      })}
+      onClick={(e) =>
+        logNav(
+          "link",
+          window.location.pathname,
+          e.currentTarget.getAttribute("href")
+        )
+      }
+    >
+      {children}
+      <svg
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
        className={cl(
-          "group relative w-fit pr-5 focus:outline-none",
-          className,
-          {
-            "white focus-visible:text-text-default focus-visible:bg-blue-200 focus-visible:shadow-[0_0_0_3px_var(--a-blue-200)]":
-              inverted,
-            "text-deepblue-500 focus-visible:text-text-on-action group-hover:text-deepblue-800 focus-visible:bg-blue-800 focus-visible:shadow-[0_0_0_3px_var(--a-blue-800)]":
-              !inverted,
-          }
+          "ml-2 h-[20px] w-[10px] scale-[0.85] transition-[width,right] group-hover:w-[16px]",
+          "absolute right-[5px] top-1/2 -translate-y-1/2 rotate-180 group-hover:right-0"
        )}
-        onClick={(e) =>
-          logNav(
-            "link",
-            window.location.pathname,
-            e.currentTarget.getAttribute("href")
-          )
-        }
+        aria-hidden
      >
-        {children}
-        <svg
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          className={cl(
-            "ml-2 h-[20px] w-[10px] scale-[0.85] transition-[width,right] group-hover:w-[16px]",
-            "absolute right-[5px] top-1/2 -translate-y-1/2 rotate-180 group-hover:right-0"
-          )}
-          aria-hidden
-        >
-          <path
-            d="M8 17.5L2.12132 11.6213C0.949744 10.4497 0.949746 8.55025 2.12132 7.37868L8 1.5"
-            stroke="currentColor"
-            strokeWidth="1.5"
-          />
-          <path
-            d="M16 9.72266L8 9.72266"
-            strokeWidth="1.5"
-            stroke="currentColor"
-            className="hidden group-hover:block"
-          />
-        </svg>
-      </a>
+        <path
+          d="M8 17.5L2.12132 11.6213C0.949744 10.4497 0.949746 8.55025 2.12132 7.37868L8 1.5"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        />
+        <path
+          d="M16 9.72266L8 9.72266"
+          strokeWidth="1.5"
+          stroke="currentColor"
+          className="hidden group-hover:block"
+        />
+      </svg>
    </Link>
  );
 };
@@ -69,7 +69,11 @@ export const BloggAd = () => {
        </BodyLong>
        <BodyLong>
          Ta kontakt med{" "}
-          <NextLink href="https://nav-it.slack.com/archives/C7NE7A8UF" passHref>
+          <NextLink
+            href="https://nav-it.slack.com/archives/C7NE7A8UF"
+            passHref
+            legacyBehavior
+          >
            <Link className="font-semibold text-[#831843]">
              #Aksel-designsystemet
            </Link>
@@ -18,34 +18,35 @@ export const BreadCrumbs = ({
  }

  return (
-    <NextLink href={href ?? `/god-praksis/${router.query.tema}`} passHref>
-      <a className="text-deepblue-500 hover:text-deepblue-800 group mb-1 flex w-fit items-center justify-start focus:underline focus:outline-none">
-        <svg
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          className={cl(
-            "transition-width text-deepblue-500 group-hover:text-deepblue-800 mr-2 h-[20px] w-[10px] group-hover:w-[16px]"
-          )}
-          aria-hidden
-        >
-          <path
-            d="M8 17.5L2.12132 11.6213C0.949744 10.4497 0.949746 8.55025 2.12132 7.37868L8 1.5"
-            stroke="currentColor"
-            strokeWidth="1.5"
-          />
-          <path
-            d="M16 9.72266L8 9.72266"
-            strokeWidth="1.5"
-            stroke="currentColor"
-            className="hidden group-hover:block"
-          />
-        </svg>
-
-        {text ??
-          (router.query.tema as string).replace(/(^\w|\s\w)/g, (m) =>
-            m.toUpperCase()
-          )}
-      </a>
+    <NextLink
+      href={href ?? `/god-praksis/${router.query.tema}`}
+      passHref
+      className="text-deepblue-500 hover:text-deepblue-800 group mb-1 flex w-fit items-center justify-start focus:underline focus:outline-none"
+    >
+      <svg
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={cl(
+          "transition-width text-deepblue-500 group-hover:text-deepblue-800 mr-2 h-[20px] w-[10px] group-hover:w-[16px]"
+        )}
+        aria-hidden
+      >
+        <path
+          d="M8 17.5L2.12132 11.6213C0.949744 10.4497 0.949746 8.55025 2.12132 7.37868L8 1.5"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        />
+        <path
+          d="M16 9.72266L8 9.72266"
+          strokeWidth="1.5"
+          stroke="currentColor"
+          className="hidden group-hover:block"
+        />
+      </svg>
+      {text ??
+        (router.query.tema as string).replace(/(^\w|\s\w)/g, (m) =>
+          m.toUpperCase()
+        )}
    </NextLink>
  );
 };
@@ -1,4 +1,4 @@
-import Image from "next/image";
+import Image from "next/legacy/image";
 import NextLink from "next/link";
 import { dateStr } from "@/utils";
 import { BodyLong, BodyShort, Heading, Link } from "@navikt/ds-react";
@@ -98,7 +98,7 @@ export const LatestBloggposts = ({
              />
            )}
          </div>
-          <NextLink href={`/${bloggs[0].slug}`} passHref>
+          <NextLink href={`/${bloggs[0].slug}`} passHref legacyBehavior>
            <Link className="text-deepblue-500 no-underline hover:underline">
              <Heading
                size="large"
@@ -163,7 +163,7 @@ export const LatestBloggposts = ({
                  </div>
                )}
                <div>
-                  <NextLink href={`/${blog.slug}`} passHref>
+                  <NextLink href={`/${blog.slug}`} passHref legacyBehavior>
                    <Link className="text-deepblue-500 no-underline hover:underline">
                      <Heading
                        size="small"
@@ -236,7 +236,7 @@ export const LatestBloggposts = ({
              />
            )}
          </div>
-          <NextLink href={`/${bloggs[0].slug}`} passHref>
+          <NextLink href={`/${bloggs[0].slug}`} passHref legacyBehavior>
            <Link className="text-deepblue-500 no-underline hover:underline">
              <Heading
                size="large"
@@ -295,7 +295,7 @@ export const LatestBloggposts = ({
                </div>
              )}
              <div>
-                <NextLink href={`/${blog.slug}`} passHref>
+                <NextLink href={`/${blog.slug}`} passHref legacyBehavior>
                  <Link className="text-deepblue-500 no-underline hover:underline">
                    <Heading
                      size="small"
@@ -41,8 +41,9 @@ function PreviewBanner(): JSX.Element {
          <Link
            href="https://aksel.nav.no/god-praksis/artikler/ny-redaktor-i-aksel"
            passHref
+            className="underline"
          >
-            <a className="underline">Les mer om hvordan du får tilgang</a>
+            Les mer om hvordan du får tilgang
          </Link>
        </div>
      </>
@@ -77,7 +77,7 @@ export const ToolCard = () => {
            <div className="-rotate-45">{t.icon}</div>
          </div>
          <div>
-            <NextLink href={t.href} passHref>
+            <NextLink href={t.href} passHref legacyBehavior>
              <Link
                className="text-text-default mb-1 font-semibold"
                onClick={(e) =>
@@ -196,7 +196,12 @@ const contributorsSingle = `contributors[0]->{
 export const akselBloggPosts = `*[_type == "blogg_landingsside"][0]{
  "page": {..., intro[]{...,${deRefs}}},
  "bloggposts": *[_type == "aksel_blogg"] | order(_createdAt desc){
-    ...,
+    seo,
+    heading,
+    ingress,
+    publishedAt,
+    _createdAt,
+    _id,
    "slug": slug.current,
    ${contributorsAll}
  }
@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable no-undef */

-const withTM = require("next-transpile-modules")(["@navikt/ds-tokens"]);
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
 });
@@ -51,81 +50,72 @@ const securityHeaders = [
 ];

 const config = () =>
-  withBundleAnalyzer(
-    withTM({
-      serverRuntimeConfig: {
-        // Will only be available on the server side
-        azureAppClientId: process.env.AZURE_APP_CLIENT_ID,
-        azureJwksUri: process.env.AZURE_OPENID_CONFIG_JWKS_URI,
-        azureAppIssuer: process.env.AZURE_OPENID_CONFIG_ISSUER,
-        azureAppWellKnownUrl: process.env.AZURE_APP_WELL_KNOWN_URL,
-        azureAppJWK: process.env.AZURE_APP_JWK,
-      },
-      publicRuntimeConfig: {
-        NEXT_PUBLIC_TEST: process.env.NEXT_PUBLIC_TEST,
-      },
-      async headers() {
-        return [
-          {
-            source: "/:path*",
-            headers: securityHeaders,
-          },
-        ];
-      },
-      rewrites: async () => [
+  withBundleAnalyzer({
+    transpilePackages: ["@navikt/ds-tokens"],
+    serverRuntimeConfig: {
+      // Will only be available on the server side
+      azureAppClientId: process.env.AZURE_APP_CLIENT_ID,
+      azureJwksUri: process.env.AZURE_OPENID_CONFIG_JWKS_URI,
+      azureAppIssuer: process.env.AZURE_OPENID_CONFIG_ISSUER,
+      azureAppWellKnownUrl: process.env.AZURE_APP_WELL_KNOWN_URL,
+      azureAppJWK: process.env.AZURE_APP_JWK,
+    },
+    publicRuntimeConfig: {
+      NEXT_PUBLIC_TEST: process.env.NEXT_PUBLIC_TEST,
+    },
+    async headers() {
+      return [
        {
-          source: "/sitemap.xml",
-          destination: "/api/sitemap",
+          source: "/:path*",
+          headers: securityHeaders,
        },
-      ],
-      async redirects() {
-        return [
-          {
-            source: "/studio",
-            destination: "/admin",
-            permanent: true,
-          },
-          {
-            source: "/storybook",
-            destination:
-              "https://main--5f801fb2aea7820022de2936.chromatic.com/",
-            permanent: false,
-          },
-          {
-            source: "/prinsipper",
-            destination: "/",
-            permanent: false,
-          },
-          {
-            source: "/preview/:slug*",
-            destination: "/api/preview?slug=:slug*",
-            permanent: true,
-          },
-        ];
+      ];
+    },
+    rewrites: async () => [
+      {
+        source: "/sitemap.xml",
+        destination: "/api/sitemap",
      },
+    ],
+    async redirects() {
+      return [
+        {
+          source: "/studio",
+          destination: "/admin",
+          permanent: true,
+        },
+        {
+          source: "/storybook",
+          destination: "https://main--5f801fb2aea7820022de2936.chromatic.com/",
+          permanent: false,
+        },
+        {
+          source: "/prinsipper",
+          destination: "/",
+          permanent: false,
+        },
+        {
+          source: "/preview/:slug*",
+          destination: "/api/preview?slug=:slug*",
+          permanent: true,
+        },
+      ];
+    },
+    webpack(config) {
+      config.module.rules.push({
+        test: /\.svg$/,
+        use: ["@svgr/webpack"],
+      });

-      webpack(config) {
-        config.module.rules.push({
-          test: /\.svg$/,
-          use: ["@svgr/webpack"],
-        });
-
-        return config;
-      },
-      images: {
-        domains: ["cdn.sanity.io", "raw.githubusercontent.com"],
-        dangerouslyAllowSVG: true,
-      },
-      /* swcMinify: true,
-      httpAgentOptions: {
-        keepAlive: false,
-      }, */
-    })
-  );
+      return config;
+    },
+    images: {
+      domains: ["cdn.sanity.io", "raw.githubusercontent.com"],
+      dangerouslyAllowSVG: true,
+    },
+  });

 if (process.env.NODE_ENV === "production") {
-  /* console.log("sentry is enabled");
-  module.exports = withSentryConfig(config(), { silent: true }); */
  module.exports = config();
 } else {
  module.exports = config();
@@ -25,17 +25,17 @@
  },
  "dependencies": {
    "@sanity/block-content-to-react": "^3.0.0",
-    "@sanity/client": "^4.0.1",
+    "@sanity/client": "^5.2.2",
    "@sanity/code-input": "4.0.0",
    "@sanity/color-input": "^3.0.2",
    "@sanity/icons": "2.2.2",
    "@sanity/image-url": "1.0.2",
-    "@sanity/preview-kit": "^1.3.2",
+    "@sanity/preview-kit": "^1.3.4",
    "@sanity/table": "1.0.1",
-    "@sanity/ui": "^1.2.0",
-    "@sanity/vision": "3.2.6",
+    "@sanity/ui": "^1.2.5",
+    "@sanity/vision": "3.5.0",
    "@svgr/webpack": "^5.5.0",
-    "amplitude-js": "^8.8.0",
+    "amplitude-js": "^8.21.5",
    "boring-avatars": "1.7.0",
    "clsx": "^1.2.1",
    "codesandbox": "^2.2.3",
@@ -46,7 +46,7 @@
    "jose": "4.10.0",
    "jwt-decode": "3.1.2",
    "lodash": "^4.17.21",
-    "next": "^12.2.0",
+    "next": "^13.2.1",
    "next-sanity": "^4.1.2",
    "prettier": "2.7.1",
    "prism-react-renderer": "^1.3.0",
@@ -55,10 +55,10 @@
    "react-dom": "^18.0.0",
    "react-modal": "3.15.1",
    "recharts": "^2.2.0",
-    "sanity": "3.2.6",
+    "sanity": "3.5.0",
    "sanity-plugin-asset-source-unsplash": "^1.0.6",
    "sanity-plugin-iframe-pane": "^2.1.1",
-    "sanity-plugin-media": "^2.0.4",
+    "sanity-plugin-media": "^2.0.5",
    "sitemap": "^7.0.0",
    "styled-components": "^5.2",
    "swr": "^1.1.2",
@@ -83,7 +83,6 @@
    "jest": "^29.0.0",
    "jest-environment-jsdom": "^29.0.0",
    "json5": "2.2.1",
-    "next-transpile-modules": "^9.0.0",
    "postcss": "^8.4.0",
    "postcss-import": "^14.1.0",
    "postcss-loader": "7.0.0",
@@ -24,7 +24,7 @@ function Page() {
        <BodyLong className="mb-2">
          Vi fant ikke siden du var ute etter{" "}
        </BodyLong>
-        <NextLink href="/" passHref>
+        <NextLink href="/" passHref legacyBehavior>
          <Link>Tilbake til forsiden</Link>
        </NextLink>
      </div>
@@ -85,7 +85,7 @@ export default async function logPageView(
    // If last week is not same as current week, add new week
    await client
      .patch(metrics._id)
-      .prepend("weekObj.weeks", [
+      .prepend("weeksObj.weeks", [
        {
          week: format(new Date(), "yyyy-MM-dd"),
          views: 1,
@@ -4,7 +4,7 @@ import Link from "next/link";

 const Example = () => {
  return (
-    <Link href="#" passHref>
+    <Link href="#" passHref legacyBehavior>
      <Button as="a">Lenke</Button>
    </Link>
  );
@@ -10,7 +10,7 @@ import ArtikkelCard from "components/sanity-modules/cards/ArtikkelCard";
 import { AkselCubeStatic } from "components/website-modules/cube";
 import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { lazy } from "react";
 import NotFotfund from "../404";

@@ -84,8 +84,8 @@ const Page = ({ tema: page }: PageProps): JSX.Element => {
              <Image
                src={urlFor(page.pictogram.url).auto("format").url()}
                decoding="sync"
-                width="72px"
-                height="72px"
+                width="72"
+                height="72"
                layout="fixed"
                priority
                aria-hidden
@@ -114,25 +114,25 @@ const IntroCards = () => {
    <ul className="centered-layout xs:mb-36 mb-40 grid w-full max-w-screen-md grid-cols-2 gap-4 md:gap-6">
      {introcards.map(({ icon: Icon, title, desc, href }) => (
        <li key={title} className="grid">
-          <Link href={href} passHref>
-            <a
-              className="focus-visible:shadow-focus bg-surface-default hover:shadow-small hover:ring-border-subtle group z-10 rounded-lg p-4 hover:ring-1 focus:outline-none"
-              onClick={(e) =>
-                logNav(
-                  "intro-kort",
-                  window.location.pathname,
-                  e.currentTarget.getAttribute("href")
-                )
-              }
-            >
-              <span className="xs:flex items-center gap-2">
-                <Icon aria-hidden className="shrink-0 text-2xl" role="img" />
-                <span className="text-xl font-semibold group-hover:underline">
-                  {title}
-                </span>
+          <Link
+            href={href}
+            passHref
+            className="focus-visible:shadow-focus bg-surface-default hover:shadow-small hover:ring-border-subtle group z-10 rounded-lg p-4 hover:ring-1 focus:outline-none"
+            onClick={(e) =>
+              logNav(
+                "intro-kort",
+                window.location.pathname,
+                e.currentTarget.getAttribute("href")
+              )
+            }
+          >
+            <span className="xs:flex items-center gap-2">
+              <Icon aria-hidden className="shrink-0 text-2xl" role="img" />
+              <span className="text-xl font-semibold group-hover:underline">
+                {title}
              </span>
-              <div className="text-text-subtle mt-2">{desc}</div>
-            </a>
+            </span>
+            <div className="text-text-subtle mt-2">{desc}</div>
          </Link>
        </li>
      ))}
@@ -13,7 +13,7 @@ import TableOfContents from "components/website-modules/TOC";
 import { getImage } from "components/website-modules/utils/get-image";
 import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { GetServerSideProps } from "next/types";
 import { lazy } from "react";
 import NotFotfund from "../404";
@@ -187,7 +187,7 @@ export const serializers = {
    }) => {
      if (href && href.startsWith("mailto:")) {
        return (
-          <NextLink href={href} passHref>
+          <NextLink href={href} passHref legacyBehavior>
            <Link className="inline">{children}</Link>
          </NextLink>
        );
@@ -197,7 +197,7 @@ export const serializers = {
          {children} <ExternalLink title="åpner lenken i ny fane" />
        </Link>
      ) : (
-        <NextLink href={href} passHref>
+        <NextLink href={href} passHref legacyBehavior>
          <Link className="inline">{children}</Link>
        </NextLink>
      );
@@ -209,7 +209,7 @@ export const serializers = {

      const href = `/${slug?.current}`;
      return (
-        <NextLink href={href} passHref>
+        <NextLink href={href} passHref legacyBehavior>
          <Link>{children}</Link>
        </NextLink>
      );
@@ -10,8 +10,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@navikt/ds-css": "2.4.0",
-    "@navikt/ds-react": "2.4.0",
+    "@navikt/ds-css": "2.4.1",
+    "@navikt/ds-react": "2.4.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
@@ -190,15 +190,15 @@
  "devDependencies": {
    "@changesets/changelog-github": "0.4.7",
    "@changesets/cli": "2.25.0",
-    "@storybook/addon-a11y": "7.0.0-beta.45",
-    "@storybook/addon-actions": "7.0.0-beta.45",
-    "@storybook/addon-essentials": "7.0.0-beta.45",
-    "@storybook/addon-storysource": "7.0.0-beta.45",
-    "@storybook/addons": "7.0.0-beta.45",
-    "@storybook/csf-tools": "7.0.0-beta.45",
-    "@storybook/react": "7.0.0-beta.45",
-    "@storybook/react-vite": "7.0.0-beta.45",
-    "@storybook/theming": "7.0.0-beta.45",
+    "@storybook/addon-a11y": "7.0.0-beta.54",
+    "@storybook/addon-actions": "7.0.0-beta.54",
+    "@storybook/addon-essentials": "7.0.0-beta.54",
+    "@storybook/addon-storysource": "7.0.0-beta.54",
+    "@storybook/addons": "7.0.0-beta.54",
+    "@storybook/csf-tools": "7.0.0-beta.54",
+    "@storybook/react": "7.0.0-beta.54",
+    "@storybook/react-vite": "7.0.0-beta.54",
+    "@storybook/theming": "7.0.0-beta.54",
    "@typescript-eslint/parser": "^5.41.0",
    "@whitespace/storybook-addon-html": "^5.0.3",
    "chromatic": "6.5.4",
@@ -219,7 +219,7 @@
    "react": "^18.0.0",
    "react-docgen-typescript": "2.2.2",
    "react-dom": "^18.0.0",
-    "storybook": "7.0.0-beta.45",
+    "storybook": "7.0.0-beta.54",
    "stylelint": "^14.8.5",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-standard": "^25.0.0",
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	43b0301d7c	Version Packages (#1828 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-28 14:03:10 +01:00
Ken	d77b766a56	♿ Fikset siteimprove feilmeldinger for kode-eksempler	2023-02-28 13:36:40 +01:00
Kai Erik Schieren	98c06b0be2	✨ add fixedWeeks option to standalone (#1827 ) * ✨ add fixedWeeks option to standalone * 🔖 changeset	2023-02-28 13:30:28 +01:00
Ken	61b84e14fb	⬆️ Storybook beta 45 -> 54	2023-02-28 12:24:30 +01:00
KenandKai Erik Schieren	edbbc53cdb	[Website] Oppdatert next 12 -> 13.2, sanity 3.2 -> 3.5 (#1822 ) Co-authored-by: Kai Erik Schieren <kai.schieren@soprasteria.com>	2023-02-24 11:30:56 +01:00