Version Packages (#1833)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @navikt/ds-codemod
 
+## 2.5.0
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+## 2.3.1
+
 ## 2.3.0
 
 ## 2.2.0

@navikt/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "Aksel codemods for NAVs designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",

@navikt/community/navno/package.json

@@ -39,8 +39,8 @@
     "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.3.0",
-    "@navikt/ds-react": "^2.3.0",
+    "@navikt/ds-icons": "^2.5.0",
+    "@navikt/ds-react": "^2.5.0",
     "clsx": "^1.1.1"
   },
   "devDependencies": {

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @navikt/ds-css
 
+## 2.5.0
+
+## 2.4.3
+
+### Patch Changes
+
+- [`f962bc781`](https://github.com/navikt/aksel/commit/f962bc7816027c24e334d9754c3e07cda951cf56) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset disabled-opacity bug i select for Chrome
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+### Minor Changes
+
+- [#1807](https://github.com/navikt/aksel/pull/1807) [`70eeb24b3`](https://github.com/navikt/aksel/commit/70eeb24b38ac871c7f2e31e1621b949669c401b6) Thanks [@kschieren](https://github.com/kschieren)! - Added List component
+
+## 2.3.1
+
+### Patch Changes
+
+- [`241b2e678`](https://github.com/navikt/aksel/commit/241b2e678f1f40909e2d36fe095dcbce8673f174) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset feil bruk av fallback-tokens i textarea, timeline
+
 ## 2.3.0
 
 ### Minor Changes

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

@@ -49,9 +49,21 @@
   border-color: var(--ac-select-error-border, var(--a-surface-danger));
 }
 
+/**
+  Disabled
+*/
 .navds-select__input:disabled {
   background-color: var(--ac-select-bg, var(--a-surface-default));
   border: 1px solid var(--ac-select-border, var(--a-border-default));
   box-shadow: none;
   cursor: not-allowed;
+
+  /* Chrome-fix */
+  opacity: 1;
+  color: var(--a-text-default);
+}
+
+/* Chrome-fix */
+.navds-select__input:disabled > option {
+  color: var(--a-text-default);
 }

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

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

@navikt/core/css/index.css

@@ -26,3 +26,4 @@
 @import "stepper.css";
 @import "table.css";
 @import "tabs.css";
+@import "list.css";

@navikt/core/css/list.css

@@ -0,0 +1,66 @@
+.navds-list ul,
+.navds-list ol {
+  padding: 0;
+}
+
+.navds-list--nested {
+  margin: var(--a-spacing-4) 0 var(--a-spacing-8) 0;
+}
+
+.navds-list li:not(.navds-list__item--noMargin) {
+  margin-bottom: var(--a-spacing-5);
+}
+
+.navds-list:last-child > ul > li:last-child,
+.navds-list:last-child > ol > li:last-child {
+  margin-bottom: 0;
+}
+
+.navds-list ul .navds-list__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--a-spacing-3);
+  padding-left: 0;
+}
+
+.navds-list ul .navds-list__item::marker {
+  content: none;
+}
+
+.navds-list ol .navds-list__item-marker--icon {
+  grid-column: 1 / 2;
+  display: flex;
+}
+
+.navds-list .navds-list__item-marker--bullet {
+  display: flex;
+  margin-top: 6px;
+  grid-column: 1 / 2;
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.navds-list__item-marker--icon {
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}
+
+.navds-list ul .navds-list__item-content {
+  grid-column: 2 / 3;
+}
+
+.navds-list ol {
+  padding-left: var(--a-spacing-2);
+}
+
+.navds-list ol li {
+  padding-left: var(--a-spacing-1);
+  margin-left: var(--a-spacing-2);
+}
+
+.navds-list ol li::marker {
+  font-weight: var(--a-font-weight-bold);
+  font-size: var(--a-font-size-medium);
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
+}

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -20,7 +20,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.3.0",
+    "@navikt/ds-tokens": "^2.5.0",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.0",
     "postcss-cli": "^9.0.0",

@navikt/core/css/tokens.json

@@ -129,6 +129,12 @@
     "--ac-link-active-bg": "--a-border-focus",
     "--ac-link-active-border": "--a-border-focus"
   },
+  "list": {
+    "--ac-list-marker-ul-color": "--ac-list-marker-color",
+    "--ac-list-marker-icon-color": "--ac-list-marker-color",
+    "--ac-list-marker-ol-color": "--ac-list-marker-color",
+    "--ac-list-marker-color": "--a-icon-default"
+  },
   "loader": {
     "--ac-loader-stroke": "--a-border-default",
     "--ac-loader-stroke-bg": "--a-surface-active",
@@ -324,7 +330,7 @@
     "--ac-textarea-placeholder": "--a-text-subtle",
     "--ac-textarea-hover-border": "--a-border-action",
     "--ac-textarea-counter-text": "--a-text-subtle",
-    "--ac-textarea-counter-error-text": "--a-surface-danger",
+    "--ac-textarea-counter-error-text": "--a-text-danger",
     "--ac-textarea-error-border": "--a-border-danger"
   }
 }

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @navikt/ds-react
 
+## 2.5.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.5.0
+
+## 2.4.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+- Updated dependencies [[`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8)]:
+  - @navikt/ds-icons@2.4.2
+
+## 2.4.1
+
+### Patch Changes
+
+- [#1827](https://github.com/navikt/aksel/pull/1827) [`98c06b0be`](https://github.com/navikt/aksel/commit/98c06b0be20debff9969af874d5239ec920fa401) Thanks [@kschieren](https://github.com/kschieren)! - Added fixedWeeks prop to standalone datepicker
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.4.1
+
+## 2.4.0
+
+### Minor Changes
+
+- [#1807](https://github.com/navikt/aksel/pull/1807) [`70eeb24b3`](https://github.com/navikt/aksel/commit/70eeb24b38ac871c7f2e31e1621b949669c401b6) Thanks [@kschieren](https://github.com/kschieren)! - Added List component
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.4.0
+
+## 2.3.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.3.1
+
 ## 2.3.0
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
-    "@navikt/ds-icons": "^2.3.0",
+    "@navikt/ds-icons": "^2.5.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

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

@@ -148,7 +148,8 @@ export const Loading = {
     </div>
   ),
 
-  args: { chromatic: { delay: 300 } },
+  args: { chromatic: { disableSnapshot: true } },
+  chromatic: { disableSnapshot: true },
 };
 
 export const Icon = () => (
@@ -274,5 +275,6 @@ export const LoadingWithAs = {
     </div>
   ),
 
-  args: { chromatic: { delay: 300 } },
+  args: { chromatic: { disableSnapshot: true } },
+  chromatic: { disableSnapshot: true },
 };

@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx

@@ -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"])}
         />

@navikt/core/react/src/index.ts

@@ -1,27 +1,28 @@
 export * from "./accordion";
 export * from "./alert";
-export * from "./provider";
 export * from "./button";
+export * from "./chat";
+export * from "./chips";
 export * from "./date";
 export * from "./form";
 export * from "./grid";
-export * from "./help-text";
 export * from "./guide-panel";
+export * from "./help-text";
 export * from "./link";
 export * from "./link-panel";
+export * from "./list";
 export * from "./loader";
 export * from "./modal";
 export * from "./pagination";
 export * from "./panel";
 export * from "./popover";
+export * from "./provider";
 export * from "./read-more";
-export * from "./chat";
-export * from "./chips";
 export * from "./stepper";
-export * from "./tag";
-export * from "./toggle-group";
 export * from "./table";
 export * from "./tabs";
+export * from "./tag";
+export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";

@navikt/core/react/src/list/List.tsx

@@ -0,0 +1,97 @@
+import cl from "clsx";
+import React, { createContext, forwardRef, useContext } from "react";
+import { BodyShort, Heading } from "../typography";
+import { useId } from "../util/useId";
+import { ListItem, ListItemContext, ListItemType } from "./ListItem";
+
+export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * HTML list element to render
+   * @default "ul"
+   */
+  as?: "ul" | "ol";
+  /**
+   * List heading title
+   */
+  title?: string;
+  /**
+   * List heading description
+   */
+  description?: string;
+  /**
+   * Allows setting a different HTML h-tag
+   * @default "h3"
+   */
+  headingTag?: React.ElementType<any>;
+}
+
+export interface ListComponent
+  extends React.ForwardRefExoticComponent<ListProps> {
+  Item: ListItemType;
+  componentType: string;
+}
+
+interface ListContextProps {
+  listType: "ul" | "ol";
+}
+
+export const ListContext = createContext<ListContextProps>({
+  listType: "ul",
+});
+
+export const List = forwardRef<HTMLDivElement, ListProps>(
+  (
+    {
+      children,
+      className,
+      as: ListTag = "ul",
+      title,
+      description,
+      headingTag = "h3",
+      ...rest
+    },
+    ref
+  ) => {
+    const ariaId = useId();
+
+    const { isNested } = useContext(ListItemContext);
+
+
+    return (
+      <ListContext.Provider
+        value={{
+          listType: ListTag,
+        }}
+      >
+        <div
+          {...rest}
+          ref={ref}
+          className={cl("navds-list", className, {
+            "navds-list--nested": isNested,
+          })}
+        >
+          {title && (
+            <Heading id={`tittel-${ariaId}`} size="small" as={headingTag}>
+              {title}
+            </Heading>
+          )}
+          {description && (
+            <BodyShort id={`description-${ariaId}`}>{description}</BodyShort>
+          )}
+          <ListTag
+            aria-labelledby={title && `tittel-${ariaId}`}
+            aria-describedby={description && `description-${ariaId}`}
+          >
+            {children}
+          </ListTag>
+        </div>
+      </ListContext.Provider>
+    );
+  }
+) as ListComponent;
+
+List.Item = ListItem;
+List.componentType = "list";
+
+export default List;

@navikt/core/react/src/list/ListItem.tsx

@@ -0,0 +1,97 @@
+import cl from "clsx";
+import React, { createContext, forwardRef, useContext } from "react";
+import { BodyShort, Label } from "../typography";
+import { ListContext } from "./List";
+
+export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+  /**
+   * Content for description of the list item
+   */
+  children: React.ReactNode;
+  /**
+   * Title for the list item
+   */
+  title?: string;
+  /*
+   * Icon to be used as list marker for unordered lists.
+   */
+  icon?: React.ReactNode;
+}
+
+export interface ListItemType
+  extends React.ForwardRefExoticComponent<
+    ListItemProps & React.RefAttributes<HTMLLIElement>
+  > {}
+
+interface ListItemContextProps {
+  isNested: boolean;
+}
+
+export const ListItemContext = createContext<ListItemContextProps>({
+  isNested: false,
+});
+
+export const ListItem: ListItemType = forwardRef(
+  ({ className, children, title, icon, ...rest }, ref) => {
+    const { listType } = useContext(ListContext);
+
+    if (listType === "ol" && icon) {
+      console.warn(
+        "<List />: Icon prop is not supported for ordered lists. Please remove the icon prop."
+      );
+    }
+
+    const hasNestedList = React.Children.toArray(children)?.some(
+      (child: any) => child?.type?.componentType === "list"
+    );
+
+    return (
+      <ListItemContext.Provider value={{ isNested: hasNestedList }}>
+        <li
+          {...rest}
+          ref={ref}
+          className={cl("navds-list__item", className, {
+            "navds-list__item--noMargin": hasNestedList,
+          })}
+        >
+          {listType === "ul" && (
+            <div
+              className={cl({
+                "navds-list__item-marker--icon": icon,
+                "navds-list__item-marker--bullet": !icon,
+              })}
+            >
+              {icon ? (
+                icon
+              ) : (
+                <svg
+                  width="6"
+                  height="6"
+                  viewBox="0 0 6 6"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden
+                  focusable={false}
+                  role="img"
+                >
+                  <rect width="6" height="6" rx="3" fill="currentColor" />
+                </svg>
+              )}
+            </div>
+          )}
+
+          <BodyShort as="div" size="small" className="navds-list__item-content">
+            {title && (
+              <Label as="p" size="small">
+                {title}
+              </Label>
+            )}
+            {children}
+          </BodyShort>
+        </li>
+      </ListItemContext.Provider>
+    );
+  }
+);
+
+export default ListItem;

@navikt/core/react/src/list/index.ts

@@ -0,0 +1,2 @@
+export { default as List } from "./List";
+export type { ListProps } from "./List";

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

@@ -0,0 +1,148 @@
+import {
+  BabyChangingRoom,
+  Braille,
+  Cognition,
+  Refresh,
+} from "@navikt/ds-icons";
+import { Meta } from "@storybook/react";
+import React from "react";
+import { List } from "..";
+
+export default {
+  title: "ds-react/List",
+  component: List,
+} as Meta;
+
+export const Default = {
+  render: () => {
+    return (
+      <List>
+        <List.Item title="Lorem Ipsum Dolor Sit Amet">
+          Lorem Ipsum Dolor Sit Amet
+        </List.Item>
+        <List.Item title="Consectetur Adipiscing Elit">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+      </List>
+    );
+  },
+};
+
+export const Ordered = {
+  render: () => {
+    return (
+      <List as="ol">
+        <List.Item title="Lorem Ipsum Dolor Sit Amet">
+          Lorem Ipsum Dolor Sit Amet
+        </List.Item>
+        <List.Item title="Consectetur Adipiscing Elit">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Ut Labore Et Dolore Magna Aliqua">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Enim Ad Minim Veniam">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Quis Nostrud Exercitation Ullamco">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Laboris Nisi Ut Aliquip Ex Ea Commodo">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Duis Aute Irure Dolor In Reprehenderit">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Voluptate Velit Esse Cillum Dolore">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Eu Fugiat Nulla Pariatur">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+      </List>
+    );
+  },
+};
+
+export const WithHeading = {
+  render: () => {
+    return (
+      <List
+        title="Lorem Ipsum Dolor Sit Amet"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+      >
+        <List.Item title="Lorem Ipsum Dolor Sit Amet">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item title="Consectetur Adipiscing Elit">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+      </List>
+    );
+  },
+};
+
+export const Icons = {
+  render: () => {
+    return (
+      <List>
+        <List.Item
+          title="Lorem Ipsum Dolor Sit Amet"
+          icon={<Braille aria-hidden />}
+        >
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item
+          title="Consectetur Adipiscing Elit"
+          icon={<Cognition aria-hidden />}
+        >
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item icon={<BabyChangingRoom aria-hidden />}>
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item icon={<Refresh aria-hidden />}>
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+      </List>
+    );
+  },
+};
+
+export const Nested = {
+  render: () => {
+    return (
+      <List>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          <List>
+            <List.Item title="Lorem Ipsum Dolor Sit Amet">
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+            <List.Item title="Consectetur Adipiscing Elit">
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+            <List.Item>
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+            <List.Item>
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+          </List>
+        </List.Item>
+        <List.Item>
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+      </List>
+    );
+  },
+};

@navikt/core/react/src/util/AnimateHeight.tsx

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

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @navikt/ds-tailwind
 
+## 2.5.0
+
+### Minor Changes
+
+- [#1832](https://github.com/navikt/aksel/pull/1832) [`8893b5c82`](https://github.com/navikt/aksel/commit/8893b5c82daf7c23897019fda912e702a1f05eaa) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Breakpoint-tokens for ds-tokens og ds-tailwind
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+## 2.3.1
+
 ## 2.3.0
 
 ## 2.2.0

@navikt/core/tailwind/package.json

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

@navikt/core/tailwind/src/getBreakpoints.ts

@@ -0,0 +1,11 @@
+import Reducer from "./reducer";
+
+export const getBreakpoints = (tokens: { [key: string]: string | number }) => {
+  const breakpoints = Reducer(tokens, ["breakpoint"]);
+
+  return Object.keys(breakpoints)
+    .filter((key) => !key.includes("xs") && !key.includes("-down"))
+    .reduce((cur, key) => {
+      return Object.assign(cur, { [key]: breakpoints[key] });
+    }, {});
+};

@navikt/core/tailwind/src/index.ts

@@ -2,6 +2,7 @@
 import * as TokensBuild from "@navikt/ds-tokens/dist/tokens";
 import { writeFileSync } from "fs";
 import { getColors } from "./colors";
+import { getBreakpoints } from "./getBreakpoints";
 import kebabCase from "./kebabCase";
 import Reducer from "./reducer";
 
@@ -16,6 +17,7 @@ const tokens = Object.entries(TokensBuild).reduce(
 const config = {
   theme: {
     colors: getColors(tokens),
+    screen: getBreakpoints(tokens),
     extend: {
       spacing: Reducer(tokens, ["spacing"]),
       zIndex: Reducer(tokens, ["z-index"]),

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @navikt/ds-tokens
 
+## 2.5.0
+
+### Minor Changes
+
+- [#1832](https://github.com/navikt/aksel/pull/1832) [`8893b5c82`](https://github.com/navikt/aksel/commit/8893b5c82daf7c23897019fda912e702a1f05eaa) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Breakpoint-tokens for ds-tokens og ds-tailwind
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+## 2.3.1
+
 ## 2.3.0
 
 ## 2.2.0

@navikt/core/tokens/docs.json

@@ -1,4 +1,47 @@
 {
+  "breakpoints": [
+    { "name": "--a-breakpoint-xs", "value": "0" },
+    {
+      "name": "--a-breakpoint-sm",
+      "value": "480px",
+      "description": "@media (min-width: 480px)"
+    },
+    {
+      "name": "--a-breakpoint-sm-down",
+      "value": "479px",
+      "description": "@media (max-width: 479px)"
+    },
+    {
+      "name": "--a-breakpoint-md",
+      "value": "768px",
+      "description": "@media (min-width: 768px)"
+    },
+    {
+      "name": "--a-breakpoint-md-down",
+      "value": "767px",
+      "description": "@media (max-width: 767px)"
+    },
+    {
+      "name": "--a-breakpoint-lg",
+      "value": "1024px",
+      "description": "@media (min-width: 1024px)"
+    },
+    {
+      "name": "--a-breakpoint-lg-down",
+      "value": "1023px",
+      "description": "@media (max-width: 1023px)"
+    },
+    {
+      "name": "--a-breakpoint-xl",
+      "value": "1280px",
+      "description": "@media (min-width: 1280px)"
+    },
+    {
+      "name": "--a-breakpoint-xl-down",
+      "value": "1279px",
+      "description": "@media (max-width: 1279px)"
+    }
+  ],
   "font": [
     {
       "name": "--a-font-family",

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/core/tokens/src/index.js

@@ -3,6 +3,17 @@ const getFontSize = (size) => `${size / baseFontSize}rem`;
 
 module.exports = {
   a: {
+    breakpoint: {
+      xs: { value: "0" },
+      sm: { value: "480px" },
+      "sm-down": { value: "479px" },
+      md: { value: "768px" },
+      "md-down": { value: "767px" },
+      lg: { value: "1024px" },
+      "lg-down": { value: "1023px" },
+      xl: { value: "1280px" },
+      "xl-down": { value: "1279px" },
+    },
     font: {
       family: { value: '"Source Sans Pro", Arial, sans-serif' },
       line: {

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @navikt/ds-icons
 
+## 2.5.0
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+## 2.3.1
+
 ## 2.3.0
 
 ## 2.2.0

@navikt/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "Aksel icons for NAV",
   "author": "Aksel | NAV designsystem team",
   "repository": {

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @navikt/ds-css-internal
 
+## 2.5.0
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+## 2.4.1
+
+## 2.4.0
+
+## 2.3.1
+
+### Patch Changes
+
+- [`241b2e678`](https://github.com/navikt/aksel/commit/241b2e678f1f40909e2d36fe095dcbce8673f174) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset feil bruk av fallback-tokens i textarea, timeline
+
 ## 2.3.0
 
 ## 2.2.0

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "CSS for NAV internal Designsystem-components",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/internal/css/timeline.css

@@ -246,7 +246,7 @@
 }
 
 .navdsi-timeline__zoom-button:not([aria-pressed="true"]):hover {
-  background: var(--ac-timeline-zoom-hover, var(--a-surface-action-subtle-hover));
+  background: var(--ac-timeline-zoom-bg-hover, var(--a-surface-action-subtle-hover));
 }
 
 .navdsi-timeline__zoom-button[aria-pressed="true"] {

@navikt/internal/css/tokens.json

@@ -40,7 +40,7 @@
     "--ac-timeline-pin-bg-hover": "--a-surface-danger-hover",
     "--ac-timeline-zoom-border": "--a-border-default",
     "--ac-timeline-zoom-bg": "--a-surface-default",
-    "--ac-timeline-zoom-hover": "--a-surface-action-subtle-hover",
+    "--ac-timeline-zoom-bg-hover": "--a-surface-action-subtle-hover",
     "--ac-timeline-zoom-selected-bg": "--a-surface-inverted",
     "--ac-timeline-zoom-selected-text": "--a-text-on-inverted",
     "--ac-timeline-axislabel-text": "--a-text-subtle"

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @navikt/ds-react-internal
 
+## 2.5.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.5.0
+  - @navikt/ds-icons@2.5.0
+
+## 2.4.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.4.3
+  - @navikt/ds-icons@2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+- Updated dependencies [[`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8)]:
+  - @navikt/ds-react@2.4.2
+  - @navikt/ds-icons@2.4.2
+
+## 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
+
+- Updated dependencies [[`70eeb24b3`](https://github.com/navikt/aksel/commit/70eeb24b38ac871c7f2e31e1621b949669c401b6)]:
+  - @navikt/ds-react@2.4.0
+  - @navikt/ds-icons@2.4.0
+
+## 2.3.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.3.1
+  - @navikt/ds-icons@2.3.1
+
 ## 2.3.0
 
 ### Patch Changes

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "Aksel react components for internal UIs in NAV",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "watch": "tsc --watch -p tsconfig.esm.json"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.3.0",
-    "@navikt/ds-react": "^2.3.0",
+    "@navikt/ds-icons": "^2.5.0",
+    "@navikt/ds-react": "^2.5.0",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1"
   },

aksel.nav.no/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16.15.0-alpine3.14
+FROM node:18.1-alpine3.14
 RUN apk add --no-cache libc6-compat
 
 ENV NODE_ENV production

aksel.nav.no/package.json

@@ -15,16 +15,16 @@
     "website"
   ],
   "dependencies": {
-    "@navikt/ds-codemod": "^2.3.0",
-    "@navikt/ds-css": "^2.3.0",
-    "@navikt/ds-css-internal": "^2.3.0",
-    "@navikt/ds-icons": "^2.3.0",
-    "@navikt/ds-react": "^2.3.0",
-    "@navikt/ds-react-internal": "^2.3.0",
-    "@navikt/ds-tailwind": "^2.3.0",
-    "@navikt/ds-tokens": "^2.3.0"
+    "@navikt/ds-codemod": "^2.5.0",
+    "@navikt/ds-css": "^2.5.0",
+    "@navikt/ds-css-internal": "^2.5.0",
+    "@navikt/ds-icons": "^2.5.0",
+    "@navikt/ds-react": "^2.5.0",
+    "@navikt/ds-react-internal": "^2.5.0",
+    "@navikt/ds-tailwind": "^2.5.0",
+    "@navikt/ds-tokens": "^2.5.0"
   },
   "devDependencies": {
-    "prettier-plugin-tailwindcss": "^0.1.13"
+    "prettier-plugin-tailwindcss": "^0.2.3"
   }
 }

aksel.nav.no/website/components/SanityBlockContent.tsx

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

aksel.nav.no/website/components/layout/footer/Footer.tsx

@@ -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; 2022 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>
+            &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>

aksel.nav.no/website/components/layout/header/Hamburger.tsx

@@ -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>
   );
@@ -63,7 +63,7 @@ export const Hamburger = () => {
           aria={{ modal: true }}
           overlayClassName="header-modal__overlay"
           contentLabel="Meny"
-          className="bg-surface-default xs:max-w-[90%] xs:right-6 xs:left-auto xs:w-96 absolute left-4 top-0 right-4 block rounded py-14 px-11 md:hidden"
+          className="bg-surface-default absolute left-4 top-0 right-4 block rounded py-14 px-11 sm:right-6 sm:left-auto sm:w-96 sm:max-w-[90%] md:hidden"
         >
           <nav aria-label="hovedmeny">
             <ul>

aksel.nav.no/website/components/layout/header/Header.tsx

@@ -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>
   );
@@ -55,21 +55,21 @@ 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>
+          <div className="flex h-11 items-center pr-4 pl-4 sm:pr-6 sm:pl-4">
+            <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

aksel.nav.no/website/components/layout/header/search/Hit.tsx

@@ -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"}

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

@@ -154,6 +154,7 @@ const AkselArtikkelTemplate = ({
                     key={title}
                     href={`/god-praksis/${slug.current}`}
                     passHref
+                    legacyBehavior
                   >
                     <BodyShort
                       size="small"

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

@@ -73,7 +73,7 @@ const AkselPrinsippTemplate = ({
       >
         <article className="overflow-x-clip">
           <div
-            className={cl("max-w-aksel xs:w-[90%] mx-auto px-4", {
+            className={cl("max-w-aksel mx-auto px-4 sm:w-[90%]", {
               "pb-32": mainPage,
             })}
           >
@@ -123,7 +123,7 @@ const AkselPrinsippTemplate = ({
               "bg-gray-100": mainPage,
             })}
           >
-            <div className="max-w-aksel xs:w-[90%] mx-auto px-4">
+            <div className="max-w-aksel mx-auto px-4 sm:w-[90%]">
               <div className="pb-16 md:pb-32">
                 <div className="relative mx-auto mt-4 max-w-prose lg:ml-0 lg:grid lg:max-w-none lg:grid-flow-row-dense lg:grid-cols-3 lg:items-start lg:gap-x-12">
                   <TableOfContents
@@ -135,7 +135,7 @@ const AkselPrinsippTemplate = ({
                     {data?.hero_bilde && (
                       <Bilde
                         node={data.hero_bilde as any}
-                        className="xs:-mt-72 -mt-36 mb-10"
+                        className="-mt-36 mb-10 sm:-mt-72"
                       />
                     )}
                     <SanityBlockContent

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

@@ -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 }) => (
@@ -77,7 +77,7 @@ export const WithSidebar = ({
             <main
               tabIndex={-1}
               id="hovedinnhold"
-              className="min-h-screen-header md:max-w-screen-sidebar xs:pl-6 xs:pr-6 relative w-full px-4 focus:outline-none md:pl-0"
+              className="min-h-screen-header md:max-w-screen-sidebar relative w-full px-4 focus:outline-none sm:pl-6 sm:pr-6 md:pl-0"
             >
               <div
                 className={cl(
@@ -96,6 +96,7 @@ export const WithSidebar = ({
                       <NextLink
                         href={`/${pageType.type.toLowerCase()}`}
                         passHref
+                        legacyBehavior
                       >
                         <Link className="text-text-default">
                           {capitalize(pageType.type)}
@@ -144,12 +145,12 @@ export const WithSidebar = ({
                   </div>
                 )}
                 {variant === "landingPage" && (
-                  <div className="xs:block pointer-events-none absolute top-0 right-0 hidden">
+                  <div className="pointer-events-none absolute top-0 right-0 hidden sm:block">
                     <HeaderCube className="text-deepblue-300 z-0 max-h-full" />
                   </div>
                 )}
               </div>
-              <div className={cl("xs:px-6 md:px-10", { flex: withToc })}>
+              <div className={cl("sm:px-6 md:px-10", { flex: withToc })}>
                 {withToc && (
                   <TableOfContentsv2
                     changedState={pageProps["content"]}

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

@@ -19,7 +19,7 @@ export const NoSidebarLayout = ({
         id="hovedinnhold"
         className="aksel-artikkel bg-gray-50 pt-4 focus:outline-none"
       >
-        <div className="max-w-aksel xs:w-[90%] mx-auto px-4">
+        <div className="max-w-aksel mx-auto px-4 sm:w-[90%]">
           <article className="pt-12 pb-16 md:pb-32">{children}</article>
         </div>
         {aside}

aksel.nav.no/website/components/layout/sidebar/Sidebar.tsx

@@ -31,7 +31,7 @@ const NavItem = ({
         }
       )}
     >
-      <Link href={`/${link.slug}`} passHref>
+      <Link href={`/${link.slug}`} passHref legacyBehavior>
         <BodyShort
           as="a"
           size="small"

aksel.nav.no/website/components/sanity-modules/DoDont.tsx

@@ -43,7 +43,7 @@ const Element = ({
   return (
     <figure
       className={cl(
-        "flex min-w-full flex-1 flex-col rounded-t sm:min-w-[440px]",
+        "flex min-w-full flex-1 flex-col rounded-t sm:min-w-[320px]",
         {
           "basis-full": block?.fullwidth,
           "max-w-sm": !block?.fullwidth,

aksel.nav.no/website/components/sanity-modules/IntroSeksjon.tsx

@@ -23,7 +23,7 @@ const Intro = ({
       <div>
         <>
           <Label as="p" className="mb-3">
-            Egnet til å:
+            Egnet til:
           </Label>
           <ul className="mb-7 list-disc">
             {node.brukes_til.map((x) => (
@@ -39,7 +39,7 @@ const Intro = ({
         {node?.brukes_ikke_til && (
           <>
             <Label as="p" className="mb-3">
-              Vurder noe annet:
+              Uegnet til:
             </Label>
             <ul className="list-disc">
               {node.brukes_ikke_til.map((x) => (

aksel.nav.no/website/components/sanity-modules/TokenTable.tsx

@@ -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>{" "}

aksel.nav.no/website/components/sanity-modules/bilde/Bilde.tsx

@@ -28,7 +28,7 @@ const Bilde = ({
     <>
       <figure
         className={cl("m-0 mb-8 flex flex-col", style.figure, className, {
-          "sm:max-w-text": node?.small,
+          "md:max-w-text": node?.small,
         })}
       >
         <div
@@ -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>
                   </>

aksel.nav.no/website/components/sanity-modules/cards/ArtikkelCard.tsx

@@ -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" ? (

aksel.nav.no/website/components/sanity-modules/cards/BloggCard.tsx

@@ -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) =>

aksel.nav.no/website/components/sanity-modules/cards/GodPraksisCard.tsx

@@ -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">

aksel.nav.no/website/components/sanity-modules/cards/InnholdsKort.tsx

@@ -15,7 +15,7 @@ const InnholdsKort = ({
   }
 
   return (
-    <article className="shadow-small last-of-type:mb-18 focus-within:ring-border-focus hover:shadow-medium xs:p-8 group relative mb-7 rounded-lg bg-white p-4 ring-1 ring-gray-900/10 focus-within:ring">
+    <article className="shadow-small last-of-type:mb-18 focus-within:ring-border-focus hover:shadow-medium group relative mb-7 rounded-lg bg-white p-4 ring-1 ring-gray-900/10 focus-within:ring sm:p-8">
       <Heading
         spacing
         size="small"
@@ -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 />

aksel.nav.no/website/components/sanity-modules/cards/RelatertInnhold.tsx

@@ -27,36 +27,37 @@ const RelatertInnhold = ({
       className={cl(
         "relatedCard",
         "mb-8 max-w-4xl gap-4",
-        "xs:grid-cols-2 grid w-full"
+        "grid w-full sm:grid-cols-2"
       )}
     >
       {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>

aksel.nav.no/website/components/sanity-modules/code-examples/Examples.tsx

@@ -109,21 +109,21 @@ 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)]"
                     )}
                     title="Kode-eksempler"
                   />
                 </div>
-                <div className="xs:justify-end mb-2 flex justify-center gap-2 rounded-b border border-gray-300 px-2 py-1 text-base ">
+                <div className="mb-2 flex justify-center gap-2 rounded-b border border-gray-300 px-2 py-1 text-base sm:justify-end ">
                   <CodeSandbox code={fil.innhold.trim()} />
                   <Link
                     href={`/eksempler/${node.dir.title}/${fil.navn.replace(
                       ".tsx",
                       ""
                     )}`}
-                    className="text-gray-900"
+                    className="si-ignore text-gray-900"
                     target="_blank"
                   >
                     Åpne i nytt vindu

aksel.nav.no/website/components/sanity-modules/component-overview/index.tsx

@@ -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"

aksel.nav.no/website/components/sanity-modules/icon-search/Filter.tsx

@@ -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>

aksel.nav.no/website/components/sanity-modules/icon-search/ModalContent.tsx

@@ -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,
@@ -74,7 +74,7 @@ import ${icon} from "@navikt/ds-icons/svg/${icon}.svg";`,
 
   return (
     <div className="flex min-w-[300px] max-w-xl shrink flex-col">
-      <div className="xs:flex-row mr-16 inline-flex flex-col justify-between gap-4">
+      <div className="mr-16 inline-flex flex-col justify-between gap-4 sm:flex-row">
         <div>
           <Heading
             spacing
@@ -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"}

aksel.nav.no/website/components/sanity-modules/tips/index.tsx

@@ -17,7 +17,7 @@ const Tips = ({ node }: { node: SanityT.Schema.tips }): JSX.Element => {
       <div
         className={cl(
           style.tips,
-          "linear xs:px-8 my-8 max-w-2xl rounded-r border-l-[6px] border-l-green-200 bg-white px-4 py-4"
+          "linear my-8 max-w-2xl rounded-r border-l-[6px] border-l-green-200 bg-white px-4 py-4 sm:px-8"
         )}
       >
         <Detail
@@ -71,7 +71,7 @@ const Tips = ({ node }: { node: SanityT.Schema.tips }): JSX.Element => {
     <div
       className={cl(
         style.tips,
-        "xs:px-6 my-7 max-w-2xl px-4 py-3 shadow-[inset_5px_0_0_0_var(--a-gray-500),inset_0_0_0_1px_var(--a-gray-200)]"
+        "my-7 max-w-2xl px-4 py-3 shadow-[inset_5px_0_0_0_var(--a-gray-500),inset_0_0_0_1px_var(--a-gray-200)] sm:px-6"
       )}
     >
       <Detail

aksel.nav.no/website/components/sanity-modules/token-view/Frame.tsx

@@ -7,7 +7,7 @@ export const Frame = ({
   element: Element,
 }: {
   tokens: { name: string; value: string; description?: string }[];
-  styles: string;
+  styles?: string;
   element?: ({ token, name }: { token: string; name?: string }) => JSX.Element;
 }) => {
   const hasDescription = !!tokens.find((x) => x?.description);

aksel.nav.no/website/components/sanity-modules/token-view/categories/Breakpoints.tsx

@@ -0,0 +1,128 @@
+import docs from "@navikt/ds-tokens/docs.json";
+import { Frame } from "../Frame";
+
+export const BreakpointsView = ({ cat }: { cat: string }) => {
+  const breakpoints = docs[cat];
+
+  return (
+    <Frame
+      tokens={breakpoints}
+      element={({ name }: { token: string; name?: string }) => {
+        const Svg = getSvg(name);
+        return (
+          <div
+            className="min-h-16 bg-surface-default flex h-full w-full items-center justify-start rounded-md px-4 text-5xl font-semibold"
+            aria-hidden
+          >
+            {Svg}
+          </div>
+        );
+      }}
+    />
+  );
+};
+
+function getSvg(token: string) {
+  switch (true) {
+    case token.includes("xs"):
+      return (
+        <svg
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable={false}
+          aria-hidden
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7.75 5.77778C7.75 5.16382 8.20527 4.75 8.66667 4.75H15.3333C15.7947 4.75 16.25 5.16382 16.25 5.77778V18.2222C16.25 18.8362 15.7947 19.25 15.3333 19.25H8.66667C8.20527 19.25 7.75 18.8362 7.75 18.2222V5.77778ZM8.66667 3.25C7.28712 3.25 6.25 4.42806 6.25 5.77778V18.2222C6.25 19.5719 7.28712 20.75 8.66667 20.75H15.3333C16.7129 20.75 17.75 19.5719 17.75 18.2222V5.77778C17.75 4.42806 16.7129 3.25 15.3333 3.25H8.66667ZM12 16.75C11.5858 16.75 11.25 17.0858 11.25 17.5C11.25 17.9142 11.5858 18.25 12 18.25H12.01C12.4242 18.25 12.76 17.9142 12.76 17.5C12.76 17.0858 12.4242 16.75 12.01 16.75H12Z"
+            fill="#262626"
+          />
+        </svg>
+      );
+    case token.includes("sm"):
+      return (
+        <svg
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable={false}
+          aria-hidden
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.75 5C6.75 4.30964 7.30964 3.75 8 3.75H16C16.6904 3.75 17.25 4.30964 17.25 5V19C17.25 19.6904 16.6904 20.25 16 20.25H8C7.30964 20.25 6.75 19.6904 6.75 19V5ZM8 2.25C6.48122 2.25 5.25 3.48122 5.25 5V19C5.25 20.5188 6.48122 21.75 8 21.75H16C17.5188 21.75 18.75 20.5188 18.75 19V5C18.75 3.48122 17.5188 2.25 16 2.25H8ZM11.5 4.75C11.0858 4.75 10.75 5.08579 10.75 5.5C10.75 5.91421 11.0858 6.25 11.5 6.25H12.5C12.9142 6.25 13.25 5.91421 13.25 5.5C13.25 5.08579 12.9142 4.75 12.5 4.75H11.5Z"
+            fill="#262626"
+          />
+        </svg>
+      );
+
+    case token.includes("md"):
+      return (
+        <svg
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable={false}
+          aria-hidden
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.75 6C3.75 5.30964 4.30964 4.75 5 4.75H19C19.6904 4.75 20.25 5.30964 20.25 6V18C20.25 18.6904 19.6904 19.25 19 19.25H5C4.30964 19.25 3.75 18.6904 3.75 18V6ZM5 3.25C3.48122 3.25 2.25 4.48122 2.25 6V18C2.25 19.5188 3.48122 20.75 5 20.75H19C20.5188 20.75 21.75 19.5188 21.75 18V6C21.75 4.48122 20.5188 3.25 19 3.25H5ZM10.5 5.75C10.0858 5.75 9.75 6.08579 9.75 6.5C9.75 6.91421 10.0858 7.25 10.5 7.25H13.5C13.9142 7.25 14.25 6.91421 14.25 6.5C14.25 6.08579 13.9142 5.75 13.5 5.75H10.5Z"
+            fill="#262626"
+          />
+        </svg>
+      );
+
+    case token.includes("lg"):
+      return (
+        <svg
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable={false}
+          aria-hidden
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M5.5 4.25C4.5335 4.25 3.75 5.0335 3.75 6V15C3.75 15.9665 4.5335 16.75 5.5 16.75H18.5C19.4665 16.75 20.25 15.9665 20.25 15V6C20.25 5.0335 19.4665 4.25 18.5 4.25H5.5ZM5.25 6C5.25 5.86193 5.36193 5.75 5.5 5.75H18.5C18.6381 5.75 18.75 5.86193 18.75 6V15C18.75 15.1381 18.6381 15.25 18.5 15.25H5.5C5.36193 15.25 5.25 15.1381 5.25 15V6ZM3 18.25C2.58579 18.25 2.25 18.5858 2.25 19C2.25 19.4142 2.58579 19.75 3 19.75H21C21.4142 19.75 21.75 19.4142 21.75 19C21.75 18.5858 21.4142 18.25 21 18.25H3Z"
+            fill="#262626"
+          />
+        </svg>
+      );
+    case token.includes("xl"):
+      return (
+        <svg
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable={false}
+          aria-hidden
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2.25 4.5C2.25 3.80964 2.80964 3.25 3.5 3.25H20.5C21.1904 3.25 21.75 3.80964 21.75 4.5V15.5C21.75 16.1904 21.1904 16.75 20.5 16.75H12.75V19.25H19C19.4142 19.25 19.75 19.5858 19.75 20C19.75 20.4142 19.4142 20.75 19 20.75H6C5.58579 20.75 5.25 20.4142 5.25 20C5.25 19.5858 5.58579 19.25 6 19.25H11.25V16.75H3.5C2.80964 16.75 2.25 16.1904 2.25 15.5V4.5ZM3.75 4.75V15.25H20.25V4.75H3.75Z"
+            fill="#262626"
+          />
+        </svg>
+      );
+
+    default:
+      return null;
+  }
+}

aksel.nav.no/website/components/sanity-modules/token-view/index.tsx

@@ -1,4 +1,5 @@
 import { withErrorBoundary } from "@/error-boundary";
+import { BreakpointsView } from "components/sanity-modules/token-view/categories/Breakpoints";
 import { FontView } from "./categories/Font";
 import { GlobalView } from "./categories/Global";
 import { SemanticView } from "./categories/Semantic";
@@ -27,6 +28,8 @@ const TokenView = ({
       return <SpacingView cat={token.title} />;
     case token.title === "z-index":
       return <ZindexView cat={token.title} />;
+    case token.title === "breakpoints":
+      return <BreakpointsView cat={token.title} />;
     default:
       return null;
   }

aksel.nav.no/website/components/website-modules/AkselLink.tsx

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

aksel.nav.no/website/components/website-modules/BloggAd.tsx

@@ -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>

aksel.nav.no/website/components/website-modules/BreadCrumbs.tsx

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

aksel.nav.no/website/components/website-modules/LatestBloggs.tsx

@@ -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"

aksel.nav.no/website/components/website-modules/PreviewBanner.tsx

@@ -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>
       </>

aksel.nav.no/website/components/website-modules/TOCv2.tsx

@@ -131,7 +131,7 @@ export function TableOfContentsv2({
   return (
     <aside
       className={cl(
-        "algolia-ignore-index xs:-mr-6 sticky top-20 z-[1] order-1 my-0 ml-6 mb-16 mr-auto h-full w-full max-w-[160px] flex-col items-start md:-mr-10",
+        "algolia-ignore-index sticky top-20 z-[1] order-1 my-0 ml-6 mb-16 mr-auto h-full w-full max-w-[160px] flex-col items-start sm:-mr-6 md:-mr-10",
         {
           hidden: !renderToc,
           "hidden xl:flex": renderToc,

aksel.nav.no/website/components/website-modules/ToolsCard.tsx

@@ -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) =>

aksel.nav.no/website/lib/sanity/queries.js

@@ -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}
   }

aksel.nav.no/website/next.config.js

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

aksel.nav.no/website/package.json

@@ -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",

aksel.nav.no/website/pages/404.tsx

@@ -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>

aksel.nav.no/website/pages/api/log-page-view.ts

@@ -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,

aksel.nav.no/website/pages/eksempler/button/nextjs-link.tsx

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

aksel.nav.no/website/pages/eksempler/list/icons.tsx

@@ -0,0 +1,40 @@
+import {
+  BabyChangingRoom,
+  Braille,
+  Cognition,
+  Refresh,
+} from "@navikt/ds-icons";
+import { List } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <List>
+      <List.Item icon={<Braille aria-hidden />}>
+        Blinkende innhold. Vi vil ikke gi brukerne våre anfall.
+      </List.Item>
+      <List.Item icon={<Cognition aria-hidden />}>
+        Kritiske problemer og problemer med høye barrierer på innhold med høy
+        effekt.
+      </List.Item>
+      <List.Item icon={<BabyChangingRoom aria-hidden />}>
+        Middels barrierer på innhold med høy effekt.
+      </List.Item>
+      <List.Item icon={<Refresh aria-hidden />}>
+        Middels barrierer på innhold med middels effekt.
+      </List.Item>
+    </List>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 2,
+  desc: "Husk å sette aria-hidden på ikonet.",
+};

aksel.nav.no/website/pages/eksempler/list/nested.tsx

@@ -0,0 +1,44 @@
+import { List } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <List>
+      <List.Item title="Kritiske">
+        disse er problemer som må løses så fort som mulig—de hindrer folk i å
+        bruke siden i det hele tatt og kan være direkte farlig.
+      </List.Item>
+      <List.Item title="Høy">
+        brukere er forhindret i å forstå innholdet eller utføre kritiske
+        oppgaver, og det finnes ingen forsvarsstrategier eller alternative
+        løsninger.
+        <List>
+          <List.Item>
+            Rammeverket, inkludert navigasjon, påloggings- og søkefunksjoner
+          </List.Item>
+          <List.Item>Gjenbrukbare komponenter</List.Item>
+          <List.Item>Nøkkelstier gjennom nettstedet</List.Item>
+        </List>
+      </List.Item>
+      <List.Item title="Medium">
+        det er vanskelig, tidkrevende eller frustrerende for brukere å få
+        tilgang til innhold eller funksjonalitet.
+      </List.Item>
+      <List.Item title="Lav">
+        brukeren få tilgang til alt innhold og funksjonalitet, men
+        brukeropplevelsen er dårlig.
+      </List.Item>
+    </List>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 4,
+};

aksel.nav.no/website/pages/eksempler/list/ordered.tsx

@@ -0,0 +1,33 @@
+import { List } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <List as="ol" title="Vi bør fikse uu-issues i følgende rekkefølge:">
+      <List.Item>
+        Blinkende innhold. Vi vil ikke gi brukerne våre anfall.
+      </List.Item>
+      <List.Item>
+        Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+      </List.Item>
+      <List.Item>
+        Kritiske problemer og problemer med høye barrierer på innhold med høy
+        effekt.
+      </List.Item>
+      <List.Item>Middels barrierer på innhold med høy effekt.</List.Item>
+      <List.Item>Middels barrierer på innhold med middels effekt.</List.Item>
+    </List>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 1,
+  desc: "Husk å sette riktig nivå/tag på List elementet hvis du bruker en tittel.",
+};

aksel.nav.no/website/pages/eksempler/list/title.tsx

@@ -0,0 +1,37 @@
+import { List } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <List as="ul">
+      <List.Item title="Kritiske">
+        disse er problemer som må løses så fort som mulig—de hindrer folk i å
+        bruke siden i det hele tatt og kan være direkte farlig.
+      </List.Item>
+      <List.Item title="Høy">
+        brukere er forhindret i å forstå innholdet eller utføre kritiske
+        oppgaver, og det finnes ingen forsvarsstrategier eller alternative
+        løsninger.
+      </List.Item>
+      <List.Item title="Medium">
+        det er vanskelig, tidkrevende eller frustrerende for brukere å få
+        tilgang til innhold eller funksjonalitet.
+      </List.Item>
+      <List.Item title="Lav">
+        brukeren få tilgang til alt innhold og funksjonalitet, men
+        brukeropplevelsen er dårlig.
+      </List.Item>
+    </List>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 3,
+};

aksel.nav.no/website/pages/eksempler/list/unordered.tsx

@@ -0,0 +1,25 @@
+import { List } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <List as="ul" title="Vi bør fikse uu-issues i følgende rekkefølge:">
+      <List.Item>
+        Rammeverket, inkludert navigasjon, påloggings- og søkefunksjoner
+      </List.Item>
+      <List.Item>Gjenbrukbare komponenter</List.Item>
+      <List.Item>Nøkkelstier gjennom nettstedet</List.Item>
+    </List>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};

aksel.nav.no/website/pages/god-praksis/[slug].tsx

@@ -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
@@ -115,7 +115,7 @@ const Page = ({ tema: page }: PageProps): JSX.Element => {
                 />
                 <div
                   className={cl(
-                    "max-w xs:w-96 relative z-10 mb-2 h-fit xl:mt-[10px]",
+                    "max-w relative z-10 mb-2 h-fit sm:w-96 xl:mt-[10px]",
                     { invisible: !hasAnsvarlig }
                   )}
                   aria-hidden={!hasAnsvarlig}

aksel.nav.no/website/pages/index.tsx

@@ -3,14 +3,8 @@ import { Footer } from "@/layout";
 import { akselForsideQuery, SanityT, urlFor } from "@/lib";
 import { getClient } from "@/sanity-client";
 import { BodyLong, Heading } from "@navikt/ds-react";
-import { logNav } from "../components";
-import {
-  ComponentIcon,
-  DownloadIcon,
-  PauseIcon,
-  PlayIcon,
-  TokenIcon,
-} from "@sanity/icons";
+import { ComponentIcon, PauseIcon, PlayIcon } from "@sanity/icons";
+import cl from "clsx";
 import { Header } from "components/layout/header/Header";
 import ArtikkelCard from "components/sanity-modules/cards/ArtikkelCard";
 import GodPraksisCard from "components/sanity-modules/cards/GodPraksisCard";
@@ -22,7 +16,7 @@ import { PreviewSuspense } from "next-sanity/preview";
 import Head from "next/head";
 import Link from "next/link";
 import { lazy, useEffect, useState } from "react";
-import cl from "clsx";
+import { logNav } from "../components";
 
 function getPrefersReducedMotion() {
   const QUERY = "(prefers-reduced-motion: no-preference)";
@@ -117,28 +111,28 @@ const introcards = [
 
 const IntroCards = () => {
   return (
-    <ul className="centered-layout xs:mb-36 mb-40 grid w-full max-w-screen-md grid-cols-2 gap-4 md:gap-6">
+    <ul className="centered-layout mb-40 grid w-full max-w-screen-md grid-cols-2 gap-4 sm:mb-36 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="items-center gap-2 sm:flex">
+              <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>
       ))}
@@ -181,7 +175,7 @@ const GetStarted = ({
         style={{
           gridTemplateColumns: `repeat(${links.length}, minmax(0, 1fr))`,
         }}
-        className="xs:grid mx-auto mt-6 flex w-fit flex-col place-items-center justify-evenly gap-4 md:gap-8"
+        className="mx-auto mt-6 flex w-fit flex-col place-items-center justify-evenly gap-4 sm:grid md:gap-8"
       >
         {links.map((x) => (
           <li key={x.title}>
@@ -276,11 +270,11 @@ const Forside = ({
 
         <main tabIndex={-1} id="hovedinnhold" className="focus:outline-none">
           <div className="z-20 pb-8">
-            <div className="centered-layout xs:mt-36 xs:mb-18 xs:max-w-screen-xs relative mb-16 mt-20 grid max-w-xs place-items-center text-center">
+            <div className="centered-layout sm:mb-18 sm:max-w-screen-xs relative mb-16 mt-20 grid max-w-xs place-items-center text-center sm:mt-36">
               <Heading
                 level="1"
                 size="xlarge"
-                className="text-deepblue-800 xs:text-[3.5rem] leading-[1.2]"
+                className="text-deepblue-800 leading-[1.2] sm:text-[3.5rem]"
               >
                 {page.title}
               </Heading>
@@ -297,7 +291,7 @@ const Forside = ({
                 <Heading
                   level="2"
                   size="xlarge"
-                  className="text-deepblue-800 xs:text-[3.25rem] mb-8 text-center"
+                  className="text-deepblue-800 mb-8 text-center sm:text-[3.25rem]"
                 >
                   God praksis
                 </Heading>
@@ -314,7 +308,7 @@ const Forside = ({
               </ul>
               <div className="mx-auto mt-8">
                 <AkselLink href="/god-praksis">
-                  {`Utforsk alle ${temaCount} god praksis tema`}
+                  {`Utforsk alle ${temaCount} tema i god praksis`}
                 </AkselLink>
               </div>
               <div className="mt-20">
@@ -332,7 +326,7 @@ const Forside = ({
                   ))}
                 </div>
                 <AkselLink href="/god-praksis/artikler">
-                  Se alle artikler i god praksis
+                  Utforsk alle artikler i god praksis
                 </AkselLink>
               </div>
             </div>

aksel.nav.no/website/pages/komponenter/index.tsx

@@ -1,8 +1,15 @@
 import { komponentLandingQuery, SanityT, SidebarT, urlFor } from "@/lib";
 import { SanityBlockContent } from "@/sanity-block";
 import { getClient } from "@/sanity-client";
-import { Heading, Ingress } from "@navikt/ds-react";
+import { logAmplitudeEvent } from "@/utils";
+import { BodyShort, Heading, Ingress } from "@navikt/ds-react";
 import cl from "clsx";
+import {
+  GithubIcon,
+  YarnIcon,
+  FigmaIcon,
+  ChangelogIcon,
+} from "components/assets";
 import { WithSidebar } from "components/layout/page-templates/WithSidebar";
 import ComponentOverview from "components/sanity-modules/component-overview";
 import { SuggestionBlock } from "components/website-modules/suggestionblock";
@@ -11,6 +18,76 @@ import Head from "next/head";
 import { lazy } from "react";
 import { komponentKategorier } from "../../sanity/config";
 
+function Links() {
+  return (
+    <BodyShort
+      as="span"
+      size="small"
+      className="text-text-subtle mb-6 flex flex-wrap gap-4"
+    >
+      <a
+        target="_blank"
+        rel="noreferrer noopener"
+        href="https://github.com/navikt/aksel/tree/main/%40navikt"
+        className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
+        onClick={() =>
+          logAmplitudeEvent("link", {
+            kilde: "intro-lenker ikonside",
+            til: "github",
+          })
+        }
+      >
+        <GithubIcon /> Github
+      </a>
+      <a
+        target="_blank"
+        rel="noreferrer noopener"
+        href="https://yarnpkg.com/package/@navikt/ds-react"
+        className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
+        onClick={() =>
+          logAmplitudeEvent("link", {
+            kilde: "intro-lenker ikonside",
+            til: "yarn",
+          })
+        }
+      >
+        <YarnIcon />
+        Yarn
+      </a>
+      <a
+        target="_blank"
+        rel="noreferrer noopener"
+        href="/grunnleggende/kode/endringslogg"
+        className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
+        onClick={() =>
+          logAmplitudeEvent("link", {
+            kilde: "intro-lenker komponenter",
+            til: "endringslogg",
+          })
+        }
+      >
+        <ChangelogIcon />
+        Endringslogg
+      </a>
+
+      <a
+        target="_blank"
+        rel="noreferrer noopener"
+        href="https://www.figma.com/@nav_aksel"
+        className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
+        onClick={() =>
+          logAmplitudeEvent("link", {
+            kilde: "intro-lenker ikonside",
+            til: "figma",
+          })
+        }
+      >
+        <FigmaIcon /> Figma
+      </a>
+    </BodyShort>
+  );
+}
+
 const Page = ({
   page,
   sidebar,
@@ -58,6 +135,7 @@ const Page = ({
         intro={<Ingress className="text-text-on-action">{page?.intro}</Ingress>}
         pageProps={page}
       >
+        <Links />
         <SuggestionBlock variant="komponenter" />
         {komponentKategorier
           .filter(

aksel.nav.no/website/pages/produktbloggen/[slug].tsx

@@ -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";
@@ -88,7 +88,7 @@ const Page = ({
       <main
         tabIndex={-1}
         id="hovedinnhold"
-        className="aksel-artikkel xs:pb-32 #FEFCE9 overflow-hidden bg-[#FEFCE9] pt-[8vw] pb-16 focus:outline-none"
+        className="aksel-artikkel #FEFCE9 overflow-hidden bg-[#FEFCE9] pt-[8vw] pb-16 focus:outline-none sm:pb-32"
       >
         <div className="px-4">
           <div className="dynamic-wrapper-prose text-center">
@@ -195,7 +195,7 @@ const Page = ({
               <Heading level="2" size="large">
                 Flere blogginnlegg
               </Heading>
-              <ul className="mt-12 grid gap-x-6 gap-y-6 sm:grid-cols-2 sm:gap-y-10 md:gap-x-6 lg:grid-cols-3">
+              <ul className="mt-12 grid gap-x-6 gap-y-6 md:grid-cols-2 md:gap-y-10 md:gap-x-6 lg:grid-cols-3">
                 {morePosts.map((post) => (
                   <BloggCard key={post._id} blog={post} />
                 ))}

aksel.nav.no/website/pages/produktbloggen/index.tsx

@@ -72,7 +72,7 @@ const Page = (props: PageProps): JSX.Element => {
                 <Heading level="2" size="xlarge" className="text-deepblue-800">
                   Flere blogginnlegg
                 </Heading>
-                <ul className="mt-12 grid gap-x-3 gap-y-6 sm:grid-cols-2 sm:gap-y-10 md:gap-x-6 lg:grid-cols-3">
+                <ul className="mt-12 grid gap-x-3 gap-y-6 md:grid-cols-2 md:gap-y-10 md:gap-x-6 lg:grid-cols-3">
                   {remainingPosts.map((blog) => (
                     <BloggCard key={blog._id} blog={blog} />
                   ))}

aksel.nav.no/website/pages/side/[slug].tsx

@@ -41,7 +41,7 @@ const Page = ({
       <main
         tabIndex={-1}
         id="hovedinnhold"
-        className="aksel-artikkel xs:pb-32 bg-gray-50 pt-[8vw] pb-16 focus:outline-none"
+        className="aksel-artikkel bg-gray-50 pt-[8vw] pb-16 focus:outline-none sm:pb-32"
       >
         <div className="px-4">
           <div className="dynamic-wrapper-prose">
@@ -110,7 +110,6 @@ export const getServerSideProps: GetServerSideProps = async (
   const { page } = await getClient().fetch(akselStandaloneBySlug, {
     slug: `side/${context.params.slug}`,
   });
-  console.log(page);
 
   return {
     props: {

aksel.nav.no/website/sanity/schema/objects/komponent/intro.tsx

@@ -17,14 +17,14 @@ export const KomponentIntro = defineType({
     defineField({
       type: "array",
       name: "brukes_til",
-      title: "Egnet til å:",
+      title: "Egnet til:",
       of: [{ type: "string" }],
       validation: (Rule) => Rule.required().min(1),
     }),
     defineField({
       type: "array",
       name: "brukes_ikke_til",
-      title: "Vurder noe annet: (optional)",
+      title: "Uegnet til: (optional)",
       of: [{ type: "string" }],
     }),
   ],

aksel.nav.no/website/sanity/util.tsx

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

aksel.nav.no/website/styles/layout.css

@@ -7,13 +7,13 @@
 }
 
 .content-box {
-  @apply max-w-content-w-padding xs:mx-auto xs:px-6 w-full px-4 pb-4 md:mx-0 md:mr-auto md:px-12;
+  @apply max-w-content-w-padding w-full px-4 pb-4 sm:mx-auto sm:px-6 md:mx-0 md:mr-auto md:px-12;
 }
 
 .content-box--full {
-  @apply xs:mx-auto xs:px-6 w-full px-4 pb-4 md:mx-0 md:mr-auto md:px-12;
+  @apply w-full px-4 pb-4 sm:mx-auto sm:px-6 md:mx-0 md:mr-auto md:px-12;
 }
 
 .centered-layout {
-  @apply xs:px-6 mx-auto w-full px-4;
+  @apply mx-auto w-full px-4 sm:px-6;
 }

aksel.nav.no/website/styles/utilities.css

@@ -15,23 +15,23 @@ p.override-text-no-max {
 }
 
 .dynamic-wrapper {
-  @apply max-w-aksel xs:w-[90%] mx-auto;
+  @apply max-w-aksel mx-auto sm:w-[90%];
 }
 
 .dynamic-wrapper-prose {
-  @apply xs:w-[90%] mx-auto max-w-prose;
+  @apply mx-auto max-w-prose sm:w-[90%];
 }
 
 .dynamic-wrapper-left {
-  @apply xs:w-[90%] max-w-prose;
+  @apply max-w-prose sm:w-[90%];
 }
 
 .dynamic-wrapper-2xl {
-  @apply xs:w-[90%] mx-auto max-w-2xl;
+  @apply mx-auto max-w-2xl sm:w-[90%];
 }
 
 .card-grid-3-1 {
-  @apply grid gap-3 sm:grid-cols-2 md:gap-6 lg:grid-cols-3;
+  @apply grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3;
 }
 
 .card-grid-2-1 {

aksel.nav.no/website/tailwind.config.js

@@ -8,15 +8,6 @@ module.exports = {
     "./stories/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    /* Flytt ut fra extend og refactor bruk av screen */
-    screens: {
-      xs: "480px",
-      sm: "648px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1280px",
-      "2xl": "1440px",
-    },
     extend: {
       colors: {
         pink: {

examples/shadow-dom/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@navikt/ds-css": "2.3.0",
-    "@navikt/ds-react": "2.3.0",
+    "@navikt/ds-css": "2.5.0",
+    "@navikt/ds-react": "2.5.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

package.json

@@ -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",