Version Packages (#2543)

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

.changeset/config.json

@@ -20,7 +20,11 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["aksel.nav.no", "aksel-icons-figma-plugin"],
+  "ignore": [
+    "aksel.nav.no",
+    "aksel-icons-figma-plugin",
+    "eslint-plugin-aksel-local"
+  ],
 
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "updateInternalDependents": "always"

.eslintrc.js

@@ -47,6 +47,7 @@ module.exports = {
       files: ["**/*.test.*", "**/__tests__/*"],
       extends: ["plugin:jest/recommended", "plugin:testing-library/react"],
     },
+
     {
       files: ["aksel.nav.no/website/**"],
       env: {
@@ -78,6 +79,16 @@ module.exports = {
         "jsx-a11y/anchor-is-valid": "off",
       },
     },
+    {
+      files: [
+        "aksel.nav.no/website/pages/eksempler/**/*.tsx",
+        "aksel.nav.no/website/pages/templates/**/*.tsx",
+      ],
+      plugins: ["aksel-local"],
+      rules: {
+        "aksel-local/comment-check": ["error"],
+      },
+    },
   ],
   globals: {
     Locale: "readonly",

.github/workflows/chromatic.yml

@@ -53,6 +53,8 @@ jobs:
           projectToken: x3xqdfgkujg
           exitZeroOnChanges: false
           buildScriptName: "build:storybook"
+          onlyChanged: true
+          externals: \@navikt/core/css/**/*.css
         env:
           STORYBOOK_GITHUB_SHA: ${{ github.sha }}
 

.storybook/main.ts

@@ -1,3 +1,6 @@
+import { mergeConfig } from "vite";
+import turbosnap from "vite-plugin-turbosnap";
+
 module.exports = {
   staticDirs: ["./public"],
 
@@ -42,4 +45,17 @@ module.exports = {
     checkOptions: {},
     reactDocgen: false,
   },
+
+  async viteFinal(config, { configType }) {
+    return mergeConfig(config, {
+      plugins:
+        configType === "PRODUCTION"
+          ? [
+              turbosnap({
+                rootDir: config.root ?? process.cwd(),
+              }),
+            ]
+          : [],
+    });
+  },
 };

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/aksel-icons
 
+## 5.11.4
+
+## 5.11.3
+
+## 5.11.2
+
 ## 5.11.1
 
 ## 5.11.0

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "5.11.1",
+  "version": "5.11.4",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/aksel-stylelint
 
+## 5.11.4
+
+## 5.11.3
+
+## 5.11.2
+
 ## 5.11.1
 
 ## 5.11.0

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "5.11.1",
+  "version": "5.11.4",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -35,8 +35,8 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^5.11.1",
-    "@navikt/ds-tokens": "^5.11.1",
+    "@navikt/ds-css": "^5.11.4",
+    "@navikt/ds-tokens": "^5.11.4",
     "@types/jest": "^29.0.0",
     "concurrently": "7.2.1",
     "copyfiles": "2.4.1",

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @navikt/aksel
 
+## 5.11.4
+
+### Patch Changes
+
+- Updated dependencies [[`65cc6f425`](https://github.com/navikt/aksel/commit/65cc6f425db5972e5f3145e333292ec7b1776f5a)]:
+  - @navikt/ds-css@5.11.4
+
+## 5.11.3
+
+### Patch Changes
+
+- Updated dependencies [[`8dda59082`](https://github.com/navikt/aksel/commit/8dda59082d9e64a81751805e6be5c30e3fb9cfaa), [`363d51e2c`](https://github.com/navikt/aksel/commit/363d51e2c414f619026084698911a99ac6b5e0bf)]:
+  - @navikt/ds-css@5.11.3
+
+## 5.11.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.11.2
+
 ## 5.11.1
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "5.11.1",
+  "version": "5.11.4",
   "description": "Aksel command line interface. Handles css-imports, codemods and more",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -29,7 +29,7 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "5.11.1",
+    "@navikt/ds-css": "5.11.4",
     "axios": "1.6.0",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @navikt/ds-css
 
+## 5.11.4
+
+### Patch Changes
+
+- :bug: Modal: Hindre at elementer med sr-only posisjoneres feil ([#2541](https://github.com/navikt/aksel/pull/2541))
+
+## 5.11.3
+
+### Patch Changes
+
+- :bug: Textarea: Skru av autosize ved manuell resize ([#2518](https://github.com/navikt/aksel/pull/2518))
+
+- Page: La til `md`-bredde (768px) ([#2510](https://github.com/navikt/aksel/pull/2510))
+
+## 5.11.2
+
 ## 5.11.1
 
 ### Patch Changes

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

@@ -21,10 +21,16 @@
 }
 
 .navds-textarea__wrapper {
+  --__ac-textarea-height: initial;
+
   position: relative;
   min-width: 100%;
 }
 
+.navds-textarea__input:first-child {
+  height: var(--__ac-textarea-height);
+}
+
 .navds-textarea__input {
   appearance: none;
   padding: var(--a-spacing-2);

@navikt/core/css/modal.css

@@ -118,6 +118,7 @@
   padding: var(--a-spacing-6);
   overflow: auto;
   overscroll-behavior: contain;
+  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
 }
 
 .navds-modal__header + .navds-modal__body {

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "5.11.1",
+  "version": "5.11.4",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -27,7 +27,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^5.11.1",
+    "@navikt/ds-tokens": "^5.11.4",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

@navikt/core/css/primitives/page.css

@@ -27,6 +27,10 @@
   padding-block-end: var(--a-spacing-8);
 }
 
+.navds-pageblock--md {
+  max-width: 768px;
+}
+
 .navds-pageblock--lg {
   max-width: 1024px;
 }

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @navikt/ds-react
 
+## 5.11.4
+
+### Patch Changes
+
+- Fix issue where clicking in Combobox.FilteredOptions after scrolling selected the wrong element ([#2536](https://github.com/navikt/aksel/pull/2536))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.11.4
+  - @navikt/aksel-icons@5.11.4
+
+## 5.11.3
+
+### Patch Changes
+
+- :bug: Textarea: Skru av autosize ved manuell resize ([#2518](https://github.com/navikt/aksel/pull/2518))
+
+- :bug: Popover: Ikke lukk ved klikk inni når parent er fokuserbar ([#2521](https://github.com/navikt/aksel/pull/2521))
+
+- Page: La til `md`-bredde (768px) ([#2510](https://github.com/navikt/aksel/pull/2510))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.11.3
+  - @navikt/aksel-icons@5.11.3
+
+## 5.11.2
+
+### Patch Changes
+
+- ⬆️ upgrade date-fns version & make it minor-version agnostic ([#2514](https://github.com/navikt/aksel/pull/2514))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.11.2
+  - @navikt/aksel-icons@5.11.2
+
 ## 5.11.1
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.11.1",
+  "version": "5.11.4",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,12 +38,12 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.11.1",
-    "@navikt/ds-tokens": "^5.11.1",
+    "@navikt/aksel-icons": "^5.11.4",
+    "@navikt/ds-tokens": "^5.11.4",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",
-    "date-fns": "2.29.3",
+    "date-fns": "^2.30.0",
     "react-day-picker": "8.3.4"
   },
   "devDependencies": {

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

@@ -3,8 +3,8 @@ import React, { forwardRef, useMemo, useRef, useState } from "react";
 import { Loader } from "../loader";
 import { Label } from "../typography";
 import {
-  mergeRefs,
   OverridableComponent,
+  mergeRefs,
   omit,
   useClientLayoutEffect,
 } from "../util";

@navikt/core/react/src/date/monthpicker/monthpicker.stories.tsx

@@ -168,7 +168,7 @@ export const FollowYear = () => {
   return (
     <div className="min-h-96">
       <MonthPicker {...monthpickerProps} onYearChange={customYearChange}>
-        <MonthPicker.Input {...inputProps} label="Velg månede" />
+        <MonthPicker.Input {...inputProps} label="Velg måned" />
       </MonthPicker>
       {selectedMonth && <div className="pt-4">{selectedMonth.getMonth()}</div>}
     </div>

@navikt/core/react/src/form/combobox/Input/Input.tsx

@@ -168,10 +168,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       [filteredOptions.length, virtualFocus, onChange, toggleIsListOpen]
     );
 
-    const onBlur = () => {
-      virtualFocus.moveFocusToTop();
-    };
-
     return (
       <input
         {...rest}
@@ -181,7 +177,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         onChange={onChangeHandler}
         type="text"
         role="combobox"
-        onBlur={onBlur}
         onKeyUp={handleKeyUp}
         onKeyDown={handleKeyDown}
         aria-controls={filteredOptionsUtil.getFilteredOptionsId(inputProps.id)}

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

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import React, { useState } from "react";
 import { Button } from "../../button";
 import { Textarea } from "../index";
 
@@ -38,11 +38,11 @@ export const Default: StoryObj<typeof Textarea> = {
   },
 };
 
-export const Small = () => {
+export const Small: StoryFn = () => {
   return <Textarea size="small" label="Ipsum enim quis culpa" />;
 };
 
-export const Description = () => {
+export const Description: StoryFn = () => {
   return (
     <div className="colgap">
       <Textarea
@@ -58,7 +58,7 @@ export const Description = () => {
   );
 };
 
-export const Error = () => {
+export const Error: StoryFn = () => {
   return (
     <div className="colgap">
       <Textarea
@@ -89,7 +89,7 @@ export const Error = () => {
   );
 };
 
-export const Disabled = () => {
+export const Disabled: StoryFn = () => {
   return (
     <div className="colgap">
       <Textarea label="Ipsum enim quis culpa" disabled />
@@ -98,19 +98,19 @@ export const Disabled = () => {
   );
 };
 
-export const HideLabel = () => {
+export const HideLabel: StoryFn = () => {
   return <Textarea label="Ipsum enim quis culpa" hideLabel />;
 };
 
-export const MaxLength = () => {
+export const MaxLength: StoryFn = () => {
   return <Textarea maxLength={50} label="Ipsum enim quis culpa" />;
 };
 
-export const MinRows = () => {
+export const MinRows: StoryFn = () => {
   return <Textarea minRows={5} label="Ipsum enim quis culpa" />;
 };
 
-export const MaxRows = () => {
+export const MaxRows: StoryFn = () => {
   return (
     <Textarea
       maxRows={3}
@@ -120,11 +120,23 @@ export const MaxRows = () => {
   );
 };
 
-export const Resize = () => {
+export const Resize: StoryFn = () => {
   return <Textarea resize label="Ipsum enim quis culpa" />;
 };
 
-export const Readonly = () => {
+export const Controlled: StoryFn = () => {
+  const [value, setValue] = useState("");
+  return (
+    <Textarea
+      resize
+      label="Ipsum enim quis culpa"
+      value={value}
+      onChange={(event) => setValue(event.currentTarget.value)}
+    />
+  );
+};
+
+export const Readonly: StoryFn = () => {
   return (
     <div className="colgap">
       <Textarea
@@ -143,7 +155,7 @@ export const Readonly = () => {
   );
 };
 
-export const AutoScrollbar = (props) => (
+export const AutoScrollbar: StoryFn<typeof Textarea> = (props) => (
   <div
     style={{
       border: "1px solid lightGreen",
@@ -156,12 +168,12 @@ export const AutoScrollbar = (props) => (
       <h1>Header</h1>
     </div>
     <Textarea
+      {...props}
       resize
       label="Textarea with autoScrollbar"
       description="Description"
       maxLength={30}
       UNSAFE_autoScrollbar
-      {...props}
     />
     <div style={{ border: "1px dashed gray" }}>
       <Button>Send</Button>

@navikt/core/react/src/layout/page/parts/PageBlock.tsx

@@ -2,12 +2,13 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../../util/OverridableComponent";
 
-export const widths = ["lg", "xl", "2xl"] as const;
+export const widths = ["md", "lg", "xl", "2xl"] as const;
 
 export interface PageBlockProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Predefined max-width
    * @example
+   * md:  768px
    * lg:  1024px
    * xl:  1280px
    * 2xl: 1440px

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

@@ -1,7 +1,9 @@
-import { FileIcon } from "@navikt/aksel-icons";
 import { Meta, StoryFn } from "@storybook/react";
 import React, { useRef, useState } from "react";
+import { FileIcon } from "@navikt/aksel-icons";
 import { BodyLong, Button, Heading, Tooltip } from "..";
+import { Checkbox, CheckboxGroup } from "../form/checkbox";
+import { VStack } from "../layout/stack";
 import Modal from "./Modal";
 
 const meta: Meta<typeof Modal> = {
@@ -203,6 +205,51 @@ export const WithTooltip: StoryFn = () => {
   );
 };
 
+export const WithSrOnlyElement: StoryFn = () => (
+  <Modal open width={300} header={{ heading: "Simple header" }}>
+    <Modal.Body>
+      <VStack gap="16">
+        <BodyLong>
+          The modal body needs to have position:relative to make sr-only
+          elements position themselves correctly when the modal body is
+          overflowing (i.e. has a scrollbar).
+        </BodyLong>
+        <BodyLong>
+          If the modal body (and other parents of the sr-only element inside the
+          modal body) does not have position:relative (or equivalent), the
+          sr-only element is pushed downwards relative to the height of the
+          overflowing content.
+        </BodyLong>
+        <BodyLong>
+          In the most extreme cases, an additional scrollbar appears bc. the
+          dialog element (parent of modal body) starts overflowing. (We have
+          overflow:auto on the dialog element in case you are on a small screen
+          and header/footer has a lot of content.)
+        </BodyLong>
+        <BodyLong>Example: CheckboxGroup with a hidden legend:</BodyLong>
+        <CheckboxGroup legend="What fruits do you like?" hideLegend>
+          <Checkbox>Banana</Checkbox>
+          <Checkbox>Apple</Checkbox>
+          <Checkbox>Orange</Checkbox>
+          <Checkbox>Pear</Checkbox>
+        </CheckboxGroup>
+        <BodyLong>
+          Try to remove position:relative from the modal body and see what
+          happens. (Use DevTools to find the legend element.) You might need to
+          make the viewport shorter to get the full effect (double scrollbar).
+        </BodyLong>
+        <BodyLong>
+          Note: The large amount of gap has been added on purpose to force
+          overflow.
+        </BodyLong>
+      </VStack>
+    </Modal.Body>
+    <Modal.Footer>
+      <Button variant="secondary">Dummy button</Button>
+    </Modal.Footer>
+  </Modal>
+);
+
 export const ChromaticViewportTesting: StoryFn = () => (
   <div id="modal-story-wrapper" style={{ width: "100vw", height: "100vh" }}>
     <style>{`#storybook-root { padding: 0 !important }`}</style>

@navikt/core/react/src/popover/Popover.tsx

@@ -184,9 +184,10 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         (e: FocusEvent) => {
           if (
             e.target instanceof HTMLElement &&
-            ![anchorEl, refs?.floating?.current].some((element) =>
+            ![anchorEl, refs.floating.current].some((element) =>
               element?.contains(e.target as Node)
-            )
+            ) &&
+            !e.target.contains(refs.floating.current)
           ) {
             open && onClose();
           }

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { Popover } from "../index";
 import { Button } from "../button";
+import { Popover } from "../index";
 
 const placements = [
   "top",
@@ -47,9 +47,9 @@ export default {
 
 export const Default = (props: any) => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>();
-  const [open, setOpen] = useState<boolean>(false);
+  const [open, setOpen] = useState(false);
   return (
-    <div>
+    <div tabIndex={-1}>
       <Button ref={(el) => setAnchorEl(el)} onClick={() => setOpen((x) => !x)}>
         Open
       </Button>
@@ -57,10 +57,12 @@ export const Default = (props: any) => {
         {...props}
         open={props.open ?? open}
         anchorEl={anchorEl}
-        onClose={(e) => setOpen(e)}
+        onClose={() => setOpen(false)}
       >
         <Popover.Content>Velit in consequat</Popover.Content>
       </Popover>
+      &nbsp;
+      <Button variant="secondary">Another button</Button>
     </div>
   );
 };

@navikt/core/react/src/react-css.d.ts

@@ -2,7 +2,7 @@ import "react";
 
 declare module "react" {
   interface CSSProperties {
-    [key: `--ac-${string}`]: string | undefined;
-    [key: `--__ac-${string}`]: string | undefined;
+    [key: `--ac-${string}`]: string | number | undefined;
+    [key: `--__ac-${string}`]: string | number | undefined;
   }
 }

@navikt/core/react/src/read-more/ReadMore.tsx

@@ -1,7 +1,7 @@
-import React, { forwardRef, useState } from "react";
 import cl from "clsx";
-import { BodyLong } from "../typography";
+import React, { forwardRef, useState } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { BodyLong } from "../typography";
 
 export interface ReadMoreProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -15,17 +15,17 @@ export interface ReadMoreProps
   header: React.ReactNode;
   /**
    * Opens component if 'true', closes if 'false'
-   * Using this props removes automatic control of open-state
+   * Using this prop removes automatic control of open-state
    */
   open?: boolean;
   /**
-   * Defaults the accordion to opened state
+   * Initially open
    * @default false
    */
   defaultOpen?: boolean;
   /**
    * Changes fontsize for content
-   * @default false
+   * @default medium
    */
   size?: "medium" | "small";
 }

@navikt/core/react/src/table/Table.tsx

@@ -57,7 +57,7 @@ export interface TableType
  *   <Table.Header>
  *     <Table.Row>
  *       <Table.HeaderCell scope="col">Navn</Table.HeaderCell>
- *       <Table.HeaderCell scope="col">Fødseslnr.</Table.HeaderCell>
+ *       <Table.HeaderCell scope="col">Fødselsnr.</Table.HeaderCell>
  *       <Table.HeaderCell scope="col">Start</Table.HeaderCell>
  *     </Table.Row>
  *   </Table.Header>

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

@@ -179,6 +179,15 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
 
       const handleResize = () => {
         renders.current = 0;
+
+        if (inputRef.current?.style.height || inputRef.current?.style.width) {
+          // User has resized manually
+          if (inputRef.current?.style.overflow === "hidden") {
+            setState((oldState) => ({ ...oldState, overflow: false })); // The state update isn't important, we just need to trigger a rerender
+          }
+          return;
+        }
+
         syncHeightWithFlushSync();
       };
 
@@ -223,6 +232,20 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
       }
     };
 
+    const mainStyle: React.CSSProperties = {
+      ["--__ac-textarea-height"]: state.outerHeightStyle + "px",
+      // Need a large enough difference to allow scrolling.
+      // This prevents infinite rendering loop.
+      overflow:
+        state.overflow &&
+        !autoScrollbar &&
+        !inputRef.current?.style.height &&
+        !inputRef.current?.style.width
+          ? "hidden"
+          : undefined,
+      ...style,
+    };
+
     return (
       <>
         <textarea
@@ -231,13 +254,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
           ref={handleRef}
           // Apply the rows prop to get a "correct" first SSR paint
           rows={minRows}
-          style={{
-            height: state.outerHeightStyle,
-            // Need a large enough difference to allow scrolling.
-            // This prevents infinite rendering loop.
-            overflow: state.overflow && !autoScrollbar ? "hidden" : undefined,
-            ...style,
-          }}
+          style={mainStyle}
           {...other}
           className={className}
         />

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-tailwind
 
+## 5.11.4
+
+## 5.11.3
+
+## 5.11.2
+
 ## 5.11.1
 
 ## 5.11.0

@navikt/core/tailwind/package.json

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

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-tokens
 
+## 5.11.4
+
+## 5.11.3
+
+## 5.11.2
+
 ## 5.11.1
 
 ## 5.11.0

@navikt/core/tokens/package.json

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

CHANGELOG.md

@@ -4,16 +4,32 @@
 
 ### @navikt/ds-react
 
-- Switch: Byttet success-farger med action npr checked ([#2511](https://github.com/navikt/aksel/pull/2511))
+- Fix issue where clicking in Combobox.FilteredOptions after scrolling selected the wrong element ([#2536](https://github.com/navikt/aksel/pull/2536))
 
-* :sparkles: Textarea: Mulighet for å sette resize-retning ([#2494](https://github.com/navikt/aksel/pull/2494))
+* :bug: Textarea: Skru av autosize ved manuell resize ([#2518](https://github.com/navikt/aksel/pull/2518))
 
-* :sparkles: Textarea: Eksperimentell støtte for automatisk scrollbar ([#2457](https://github.com/navikt/aksel/pull/2457))
+* :bug: Popover: Ikke lukk ved klikk inni når parent er fokuserbar ([#2521](https://github.com/navikt/aksel/pull/2521))
 
-- :wheelchair: Textarea: Forsinkelse ved live-opplesning av gjenstående tegn ([#2502](https://github.com/navikt/aksel/pull/2502))
+* Page: La til `md`-bredde (768px) ([#2510](https://github.com/navikt/aksel/pull/2510))
+
+- ⬆️ upgrade date-fns version & make it minor-version agnostic ([#2514](https://github.com/navikt/aksel/pull/2514))
+
+* Switch: Byttet success-farger med action npr checked ([#2511](https://github.com/navikt/aksel/pull/2511))
+
+- :sparkles: Textarea: Mulighet for å sette resize-retning ([#2494](https://github.com/navikt/aksel/pull/2494))
+
+- :sparkles: Textarea: Eksperimentell støtte for automatisk scrollbar ([#2457](https://github.com/navikt/aksel/pull/2457))
+
+* :wheelchair: Textarea: Forsinkelse ved live-opplesning av gjenstående tegn ([#2502](https://github.com/navikt/aksel/pull/2502))
 
 ### @navikt/ds-css
 
+- :bug: Modal: Hindre at elementer med sr-only posisjoneres feil ([#2541](https://github.com/navikt/aksel/pull/2541))
+
+* :bug: Textarea: Skru av autosize ved manuell resize ([#2518](https://github.com/navikt/aksel/pull/2518))
+
+* Page: La til `md`-bredde (768px) ([#2510](https://github.com/navikt/aksel/pull/2510))
+
 - Switch: Byttet success-farger med action npr checked ([#2511](https://github.com/navikt/aksel/pull/2511))
 
 * :sparkles: Textarea: Mulighet for å sette resize-retning ([#2494](https://github.com/navikt/aksel/pull/2494))

README.md

@@ -35,7 +35,8 @@
 
 aksel.nav.no/
 ├── website # NEXT.JS app (v13)
-└── website/sanity # Sanity CMS-app (v3)
+├── website/sanity # Sanity CMS-app (v3)
+└── playroom # aksel.nav.no/sandbox
 
 ```
 

aksel.nav.no/package.json

@@ -16,11 +16,11 @@
     "playroom"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^5.11.1",
-    "@navikt/ds-css": "^5.11.1",
-    "@navikt/ds-react": "^5.11.1",
-    "@navikt/ds-tailwind": "^5.11.1",
-    "@navikt/ds-tokens": "^5.11.1"
+    "@navikt/aksel-icons": "^5.11.4",
+    "@navikt/ds-css": "^5.11.4",
+    "@navikt/ds-react": "^5.11.4",
+    "@navikt/ds-tailwind": "^5.11.4",
+    "@navikt/ds-tokens": "^5.11.4"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"

aksel.nav.no/website/components/assets/Icons.tsx

@@ -200,16 +200,16 @@ export const StorybookIcon = ({ ...props }) => (
   </svg>
 );
 
-export const CodeSandboxLogo = ({ ...props }) => (
+export const CodeSandboxLogo = ({ title, ...props }) => (
   <svg
     width="24"
     height="24"
     fill="none"
     viewBox="8 3 24 24"
-    aria-hidden="true"
     focusable="false"
     {...props}
   >
+    <title>{title}</title>
     <path
       fill="currentColor"
       d="M20.54 25a.681.681 0 00.158-.074l6.174-3.69c.734-.438 1.128-.885 1.128-2.084v-6.444c0-.248-.016-.447-.063-.629l-7.397 4.434zm-8.477-12.921l7.397 4.434V25a.514.514 0 01-.15-.074l-6.182-3.69c-.726-.438-1.128-.885-1.128-2.084v-6.444c0-.248.016-.447.063-.629zM20.004 7c.443 0 .9.143 1.359.406l.068.04 5.567 3.326c.155.088.284.177.394.282l.04.04-7.428 4.426-7.436-4.425c.11-.109.233-.198.378-.286l.063-.037 4.07-2.442h.002l1.488-.883c.434-.262.868-.415 1.296-.443l.071-.003z"

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

@@ -1,5 +1,5 @@
-import { getKey } from "@/sb-util";
 import type { Meta, StoryObj } from "@storybook/react";
+import { getKey } from "@/sb-util";
 import CodeExample from "./CodeExamples";
 
 const meta = {
@@ -29,6 +29,7 @@ export const Designsystem: Story = {
             title: "title",
             index: 1,
             sandboxBase64: "fakebase64",
+            sandboxEnabled: true,
           },
           {
             _key: getKey(),

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

@@ -1,40 +1,43 @@
-import SnippetLazy from "@/cms/code-snippet/SnippetLazy";
-import ErrorBoundary from "@/error-boundary";
-import { CodeExamplesT } from "@/types";
-import { capitalize } from "@/utils";
+import cl from "clsx";
+import { useRouter } from "next/router";
+import { useEffect, useRef, useState } from "react";
 import {
+  CodeIcon,
   ExternalLinkIcon,
   LaptopIcon,
   MobileSmallIcon,
 } from "@navikt/aksel-icons";
 import { BodyLong, Button, Chips, HStack } from "@navikt/ds-react";
-import cl from "clsx";
-import { useRouter } from "next/router";
-import { useEffect, useRef, useState } from "react";
-import { Sandbox } from "./parts/Sandbox";
+import SnippetLazy from "@/cms/code-snippet/SnippetLazy";
+import ErrorBoundary from "@/error-boundary";
+import { CodeExamplesT } from "@/types";
 import { CodeSandbox } from "./parts/CodeSandbox";
+import { Sandbox } from "./parts/Sandbox";
 
-const iframePadding = 192;
-const iframeId = "example-iframe";
+const iframePaddingNormal = 192;
+const iframePaddingCompact = 60;
 
 type CodeExamplesProps = {
   node: CodeExamplesT;
 };
 
 const ComponentExamples = ({ node }: CodeExamplesProps) => {
-  const [activeExample, setActiveExample] = useState(null);
+  const [activeExample, setActiveExample] = useState("");
   const [frameState, setFrameState] = useState(300);
   const [unloaded, setUnloaded] = useState(true);
+  const [showCode, setShowCode] = useState(!node.compact);
+
   const router = useRouter();
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
   const handleExampleLoad = () => {
+    const iframePadding = node.compact
+      ? iframePaddingCompact
+      : iframePaddingNormal;
     let attempts = 0;
+
     const waitForExampleContentToRender = setInterval(() => {
-      const exampleIframe = document.getElementById(
-        iframeId
-      ) as HTMLIFrameElement;
-      const exampleIframeDOM = exampleIframe?.contentDocument;
+      const exampleIframeDOM = iframeRef.current?.contentDocument;
 
       let exampleWrapper: HTMLElement;
 
@@ -62,46 +65,34 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
   };
 
   useEffect(() => {
-    node?.dir?.filer?.[0]?.navn && setActiveExample(node.dir.filer[0].navn);
+    node.dir?.filer?.[0]?.navn && setActiveExample(node.dir.filer[0].navn);
   }, [node]);
 
   useEffect(() => {
-    const hash = router.asPath.split("#")[1];
+    const hash = router.asPath.split("#")[1] || "";
+    const prefix = `${node.dir.title.toLowerCase()}demo-`;
+    const navn = hash.replace(prefix, "");
     if (
-      hash &&
-      hash.startsWith(`${node.dir.title.toLowerCase()}demo-`) &&
-      node.dir.filer.some(
-        (f) =>
-          f.navn === hash.replace(`${node.dir.title.toLowerCase()}demo-`, "")
-      )
+      hash.startsWith(prefix) &&
+      node.dir.filer.some((f) => f.navn === navn)
     ) {
-      setActiveExample(
-        hash.replace(`${node.dir.title.toLowerCase()}demo-`, "") as string
-      );
+      setActiveExample(navn);
     }
   }, [router, node]);
 
-  const fixName = (str: string) =>
-    capitalize(
-      str
-        .replace(/[^\wæøå]|_/g, " ")
-        .replace(/\s+/g, " ")
-        .trim()
-    ) ?? str;
-
   if (!node.dir?.filer || node.dir.filer.length === 0) {
     return null;
   }
 
-  const active = activeExample ?? node?.dir?.filer?.[0]?.navn;
+  const active = activeExample || node.dir?.filer?.[0]?.navn;
   const demoVariant = node.dir?.variant;
 
   return (
     <div>
-      <div className="mb-5 max-w-xl">
-        <Chips>
-          {node.dir.filer.map((fil) => {
-            return (
+      {node.dir.filer.length > 1 && (
+        <div className="mb-5 max-w-xl">
+          <Chips>
+            {node.dir.filer.map((fil) => (
               <Chips.Toggle
                 checkmark={false}
                 key={fil._key}
@@ -117,121 +108,123 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
                   );
                 }}
               >
-                {fixName(fil.title)}
+                {fil.title}
               </Chips.Toggle>
-            );
+            ))}
+          </Chips>
+        </div>
+      )}
+      {node.dir.filer.map((fil) => (
+        <div
+          key={fil._key}
+          className={cl({
+            visible: active === fil.navn,
+            hidden: active !== fil.navn,
           })}
-        </Chips>
-      </div>
-      {node.dir.filer.map((fil) => {
-        return (
-          <div
-            key={fil._key}
-            className={cl({
-              visible: active === fil.navn,
-              hidden: active !== fil.navn,
-            })}
-          >
-            {fil?.description && (
-              <BodyLong className="mb-2">{fil.description}</BodyLong>
-            )}
+        >
+          {fil?.description && (
+            <BodyLong className="mb-2">{fil.description}</BodyLong>
+          )}
 
-            {active === fil.navn && (
-              <>
-                <div
+          {active === fil.navn && (
+            <>
+              <div
+                className={cl(
+                  "overflow-hidden rounded-t-lg border border-b-0 border-gray-300",
+                  {
+                    "relative animate-pulse": unloaded,
+                    "bg-gray-50": !unloaded,
+                  }
+                )}
+              >
+                <iframe
+                  ref={iframeRef}
+                  src={`/${demoVariant}/${node.dir.title}/${fil.navn}`}
+                  height={frameState}
+                  onLoad={handleExampleLoad}
+                  aria-label={`${node.dir?.title} ${fil.title} eksempel`}
+                  title="Demo"
                   className={cl(
-                    "overflow-hidden rounded-t-lg border border-b-0 border-gray-300 ",
+                    "min-w-80 block w-full max-w-full resize-x bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
                     {
-                      "relative animate-pulse": unloaded,
-                      "bg-gray-50": !unloaded,
+                      invisible: unloaded,
                     }
                   )}
-                >
-                  <iframe
-                    src={`/${demoVariant}/${node.dir.title}/${fil.navn.replace(
-                      ".tsx",
-                      ""
-                    )}`}
-                    height={frameState}
-                    onLoad={() => handleExampleLoad()}
-                    id={iframeId}
-                    aria-label={`${node?.dir?.title} ${fil.navn} eksempel`}
-                    className={cl(
-                      "min-w-80 block w-full max-w-full resize-x bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
-                      {
-                        invisible: unloaded,
-                      }
-                    )}
-                    title="Kode-eksempler"
-                    ref={iframeRef}
-                  />
-                  {unloaded && (
-                    <div className="absolute inset-0 mx-auto flex flex-col items-center justify-center gap-2">
-                      <div className="grid w-3/5 gap-2">
-                        <div className="bg-surface-neutral-subtle h-6 w-2/3 rounded-xl" />
-                        <div className="bg-surface-neutral-subtle h-16 w-full rounded-xl" />
-                      </div>
+                />
+                {unloaded && (
+                  <div className="absolute inset-0 mx-auto flex flex-col items-center justify-center gap-2">
+                    <div className="grid w-3/5 gap-2">
+                      <div className="bg-surface-neutral-subtle h-6 w-2/3 rounded-xl" />
+                      <div className="bg-surface-neutral-subtle h-16 w-full rounded-xl" />
                     </div>
-                  )}
-                </div>
-                <div className="mb-2 rounded-b-lg border border-gray-300 p-1">
-                  <HStack gap="4" justify="space-between">
-                    <div className="hidden sm:block">
-                      <HStack gap="2">
-                        <Button
-                          variant="tertiary-neutral"
-                          size="small"
-                          icon={
-                            <MobileSmallIcon title="Sett eksempel til mobilbredde" />
-                          }
-                          onClick={() =>
-                            (iframeRef.current.style.width = "360px")
-                          }
-                        />
-
-                        <Button
-                          variant="tertiary-neutral"
-                          size="small"
-                          icon={
-                            <LaptopIcon title="Sett eksempel til desktopbredde" />
-                          }
-                          onClick={() => (iframeRef.current.style.width = "")}
-                        />
-                      </HStack>
-                    </div>
-
+                  </div>
+                )}
+              </div>
+              <div className="mb-2 rounded-b-lg border border-gray-300 p-1">
+                <HStack gap="4" justify="space-between">
+                  <div className="hidden sm:block">
                     <HStack gap="2">
-                      {fil?.sandboxEnabled && (
-                        <Sandbox code={fil?.sandboxBase64} />
-                      )}
-                      <CodeSandbox code={fil.innhold.trim()} />
                       <Button
                         variant="tertiary-neutral"
                         size="small"
                         icon={
-                          <ExternalLinkIcon title="Åpne eksempel i nytt vindu" />
+                          <MobileSmallIcon title="Sett eksempel til mobilbredde" />
                         }
-                        target="_blank"
-                        className="si-ignore"
-                        as="a"
-                        href={`/${demoVariant}/${
-                          node.dir.title
-                        }/${fil.navn.replace(".tsx", "")}`}
+                        onClick={() =>
+                          (iframeRef.current.style.width = "360px")
+                        }
+                      />
+
+                      <Button
+                        variant="tertiary-neutral"
+                        size="small"
+                        icon={
+                          <LaptopIcon title="Sett eksempel til desktopbredde" />
+                        }
+                        onClick={() => (iframeRef.current.style.width = "")}
                       />
                     </HStack>
-                  </HStack>
-                </div>
+                  </div>
 
+                  <HStack gap="2">
+                    <Button
+                      variant="tertiary-neutral"
+                      size="small"
+                      icon={<CodeIcon aria-hidden />}
+                      onClick={() => setShowCode(!showCode)}
+                    >
+                      {showCode ? "Skjul" : "Vis"} kode
+                    </Button>
+                    {fil.sandboxEnabled && <Sandbox code={fil.sandboxBase64} />}
+                    <CodeSandbox code={fil.innhold.trim()} />
+                    <Button
+                      variant="tertiary-neutral"
+                      size="small"
+                      icon={
+                        <ExternalLinkIcon title="Åpne eksempel i nytt vindu" />
+                      }
+                      target="_blank"
+                      className="si-ignore"
+                      as="a"
+                      href={`/${demoVariant}/${
+                        node.dir.title
+                      }/${fil.navn.replace(".tsx", "")}`}
+                    />
+                  </HStack>
+                </HStack>
+              </div>
+
+              {showCode && (
                 <SnippetLazy
                   node={{
                     code: { code: fil.innhold.trim(), language: "tsx" },
                   }}
                 />
-              </>
-            )}
-          </div>
-        );
-      })}
+              )}
+            </>
+          )}
+        </div>
+      ))}
     </div>
   );
 };

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

@@ -1,6 +1,6 @@
-import { CodeSandboxLogo } from "@/assets/Icons";
-import { Button } from "@navikt/ds-react";
 import { getParameters } from "codesandbox/lib/api/define";
+import { Button } from "@navikt/ds-react";
+import { CodeSandboxLogo } from "@/assets/Icons";
 
 const indexTsx = `import React from 'react';
 import ReactDOM from 'react-dom/client';
@@ -20,6 +20,7 @@ export const CodeSandbox = ({ code }: { code: string }) => {
   const parameters = getParameters({
     files: {
       "package.json": {
+        // @ts-expect-error
         content: {
           dependencies: {
             react: "latest",
@@ -28,7 +29,7 @@ export const CodeSandbox = ({ code }: { code: string }) => {
             "@navikt/ds-css": "latest",
             "@navikt/aksel-icons": "latest",
           },
-        } as any,
+        },
         isBinary: false,
       },
       "App.tsx": {
@@ -58,9 +59,8 @@ export const CodeSandbox = ({ code }: { code: string }) => {
       <Button
         variant="tertiary-neutral"
         size="small"
-        aria-label="Codesandbox"
         type="submit"
-        icon={<CodeSandboxLogo aria-hidden />}
+        icon={<CodeSandboxLogo title="CodeSandbox" />}
       />
     </form>
   );

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

@@ -1,7 +1,10 @@
 import { PencilIcon } from "@navikt/aksel-icons";
 import { Button } from "@navikt/ds-react";
+import { useMedia } from "@/hooks/useMedia";
 
 export const Sandbox = ({ code }: { code: string }) => {
+  const showLabel = useMedia("(min-width: 1024px)");
+
   return (
     <Button
       href={`/sandbox/index.html?code=${code}`}
@@ -10,9 +13,11 @@ export const Sandbox = ({ code }: { code: string }) => {
       as="a"
       variant="tertiary-neutral"
       size="small"
-      icon={<PencilIcon aria-hidden fontSize="1.5rem" />}
+      icon={
+        <PencilIcon aria-hidden={showLabel} title={!showLabel && "Sandbox"} />
+      }
     >
-      Sandbox
+      {showLabel && "Sandbox"}
     </Button>
   );
 };

aksel.nav.no/website/components/sanity-modules/code-snippet/Snippet.tsx

@@ -1,9 +1,9 @@
-import ErrorBoundary from "@/error-boundary";
-import { CodeSnippetT } from "@/types";
-import { ChevronRightIcon, TerminalIcon } from "@navikt/aksel-icons";
-import { CopyButton, Label } from "@navikt/ds-react";
 import cl from "clsx";
 import { Highlight, Language } from "prism-react-renderer";
+import { ChevronRightIcon, TerminalIcon } from "@navikt/aksel-icons";
+import { CopyButton, Label } from "@navikt/ds-react";
+import ErrorBoundary from "@/error-boundary";
+import { CodeSnippetT } from "@/types";
 import theme from "./theme";
 
 type CodeSnippetProps = {

aksel.nav.no/website/components/types/sanity-schema.ts

@@ -340,6 +340,7 @@ export interface CodeExamplesT {
     metadata?: CodeExampleSchemaT["metadata"];
     variant: CodeExampleSchemaT["variant"];
   };
+  compact?: boolean;
 }
 
 export type PropTableT = ArrayObjectT<{

aksel.nav.no/website/components/website-modules/preview/parts/resolvers.ts

@@ -18,11 +18,14 @@ export function runResolvers({
   }
 
   return resolvers.reduce((acc, resolver) => {
+    /* Not allowed to edit accumulators directly as its readonly*/
+    const _acc = { ...acc };
     const dataFromKeys = resolver.dataKeys.map((key) =>
-      getNestedProperty(acc, key)
+      getNestedProperty(_acc, key)
     );
-    acc[resolver.key] = resolver.cb(dataFromKeys);
-    return acc;
+
+    _acc[resolver.key] = resolver.cb(dataFromKeys);
+    return _acc;
   }, data);
 }
 

aksel.nav.no/website/e2e/sandbox.e2e.ts

@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 import { getDirectories } from "../scripts/update-examples/parts/get-directories";
 import { parseCodeFiles } from "../scripts/update-examples/parts/parse-code-files";
 
@@ -26,7 +26,7 @@ test.describe("sandbox examples (all)", () => {
     }
   });
 
-  test.describe("templates", () => {
+  /* test.describe("templates", () => {
     const subdirs = getDirectories("templates");
 
     for (const subdir of subdirs) {
@@ -47,5 +47,5 @@ test.describe("sandbox examples (all)", () => {
         });
       }
     }
-  });
+  }); */
 });

aksel.nav.no/website/e2e/smoketest.test.ts

@@ -1,7 +1,7 @@
-import { test, expect } from "@playwright/test";
-import urls from "./test-urls.json";
+import { expect, test } from "@playwright/test";
 import { getDirectories } from "../scripts/update-examples/parts/get-directories";
 import { parseCodeFiles } from "../scripts/update-examples/parts/parse-code-files";
+import urls from "./test-urls.json";
 
 test.describe("Smoketest all pages", () => {
   for (const url of urls) {
@@ -28,9 +28,8 @@ test.describe("Smoketest all pages", () => {
 
   test.describe("sandbox examples (just a few)", () => {
     const examples = getDirectories("eksempler");
-    const templates = getDirectories("templates");
 
-    const folders = [...examples, ...templates];
+    const folders = [...examples];
 
     const randomFolders = [folders[0], folders[20], folders[50]];
 

aksel.nav.no/website/package.json

@@ -29,7 +29,7 @@
     "playwright": "playwright test",
     "test:watch": "jest --watch --config ./config/jest.config.js",
     "backup": "ts-node scripts/backup.js",
-    "watch:tw": "yarn tailwindcss -i ./styles/index.css -o ./dist/tw.css --watch"
+    "watch:tw": "yarn tailwindcss -i ./components/styles/index.css -o ./dist/tw.css --watch"
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^2.2.3",
@@ -43,7 +43,7 @@
     "boring-avatars": "1.10.1",
     "clsx": "^1.2.1",
     "codesandbox": "^2.2.3",
-    "date-fns": "2.29.3",
+    "date-fns": "^2.30.0",
     "fuse.js": "^6.6.2",
     "jscodeshift": "^0.15.1",
     "lodash": "^4.17.21",

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

@@ -1,9 +1,18 @@
-import { AmplitudeEvents, amplitude } from "@/logging";
-import { AkselCubeStatic } from "@/web/aksel-cube/AkselCube";
-import { BodyLong, Heading } from "@navikt/ds-react";
 import { useEffect } from "react";
+import {
+  BodyShort,
+  Box,
+  Heading,
+  Link,
+  List,
+  Page,
+  VStack,
+} from "@navikt/ds-react";
+import Footer from "@/layout/footer/Footer";
+import Header from "@/layout/header/Header";
+import { AmplitudeEvents, amplitude } from "@/logging";
 
-function Page() {
+function ErrorPage({ statusCode }) {
   useEffect(() => {
     amplitude.track(AmplitudeEvents.error, {
       side: window.location.pathname,
@@ -11,21 +20,66 @@ function Page() {
   }, []);
 
   return (
-    <div
-      id="vk-notFoundId"
-      className="relative flex h-screen w-screen items-center justify-center gap-8 overflow-hidden"
-    >
-      <AkselCubeStatic className="text-deepblue-300 opacity-10" />
-      <div>
-        <Heading spacing level="1" size="large">
-          500 - Internal Server Error
-        </Heading>
-        <BodyLong className="mb-2">
-          Det oppstod en feil ved lasting av side. Prøv å laste side på nytt.
-        </BodyLong>
-      </div>
-    </div>
+    <Page data-aksel-template="500-v1" footer={<Footer />} id="vk-notFoundId">
+      <Header />
+      <Page.Block as="main" width="xl" gutters>
+        <Box paddingBlock="20 8">
+          <VStack gap="16">
+            <VStack gap="12" align="start">
+              <div>
+                {statusCode && (
+                  <BodyShort textColor="subtle" size="small">
+                    Statuskode {statusCode}
+                  </BodyShort>
+                )}
+                <Heading level="1" size="large" spacing>
+                  Beklager, noe gikk galt.
+                </Heading>
+                <BodyShort spacing>
+                  En teknisk feil på våre servere gjør at siden er
+                  utilgjengelig. Dette skyldes ikke noe du gjorde.
+                </BodyShort>
+                <BodyShort>Du kan prøve å</BodyShort>
+                <List>
+                  <List.Item>
+                    vente noen minutter og laste siden på nytt
+                  </List.Item>
+                  <List.Item>gå tilbake til forrige side</List.Item>
+                </List>
+                <BodyShort>
+                  Hvis problemet vedvarer, kan du{" "}
+                  <Link
+                    href="https://github.com/navikt/aksel/issues/new?assignees=&labels=bug+%F0%9F%90%9B&projects=&template=bug-report.md&title=[Aksel.nav.no%20-%20500]"
+                    target="_blank"
+                  >
+                    kontakte oss (åpnes i ny fane)
+                  </Link>
+                  .
+                </BodyShort>
+              </div>
+            </VStack>
+            <div>
+              <Heading level="1" size="large" spacing>
+                Something went wrong
+              </Heading>
+              <BodyShort spacing>
+                This was caused by a technical fault on our servers. Please
+                refresh this page or try again in a few minutes.{" "}
+              </BodyShort>
+              <BodyShort>
+                <Link
+                  target="_blank"
+                  href="https://github.com/navikt/aksel/issues/new?assignees=&labels=bug+%F0%9F%90%9B&projects=&template=bug-report.md&title=[Aksel.nav.no%20-%20500]"
+                >
+                  Contact us (opens in new tab)
+                </Link>{" "}
+                if the problem persists.
+              </BodyShort>
+            </div>
+          </VStack>
+        </Box>
+      </Page.Block>
+    </Page>
   );
 }
-
-export default Page;
+export default ErrorPage;

aksel.nav.no/website/pages/_error.js

@@ -1,24 +1,85 @@
-import { AkselCubeStatic } from "@/web/aksel-cube/AkselCube";
-import { BodyLong, Heading } from "@navikt/ds-react";
-import React from "react";
+import { useEffect } from "react";
+import {
+  BodyShort,
+  Box,
+  Heading,
+  Link,
+  List,
+  Page,
+  VStack,
+} from "@navikt/ds-react";
+import Footer from "@/layout/footer/Footer";
+import Header from "@/layout/header/Header";
+import { AmplitudeEvents, amplitude } from "@/logging";
+
+function ErrorPage({ statusCode }) {
+  useEffect(() => {
+    amplitude.track(AmplitudeEvents.error, {
+      side: window.location.pathname,
+    });
+  }, []);
 
-const MyError = ({ statusCode }) => {
   return (
-    <div
-      id="vk-notFoundId"
-      className="relative flex h-screen w-screen items-center justify-center gap-8 overflow-hidden"
-    >
-      <AkselCubeStatic className="text-deepblue-300 opacity-10" />
-      <div>
-        <Heading spacing level="1" size="large">
-          {statusCode} - Det oppstod en feil!
-        </Heading>
-        <BodyLong className="mb-2">
-          Det oppstod en feil ved lasting av side. Prøv å laste side på nytt.
-        </BodyLong>
-      </div>
-    </div>
+    <Page data-aksel-template="500-v1" footer={<Footer />} id="vk-notFoundId">
+      <Header />
+      <Page.Block as="main" width="xl" gutters>
+        <Box paddingBlock="20 8">
+          <VStack gap="16">
+            <VStack gap="12" align="start">
+              <div>
+                {statusCode && (
+                  <BodyShort textColor="subtle" size="small">
+                    Statuskode {statusCode}
+                  </BodyShort>
+                )}
+                <Heading level="1" size="large" spacing>
+                  Beklager, noe gikk galt.
+                </Heading>
+                <BodyShort spacing>
+                  En teknisk feil på våre servere gjør at siden er
+                  utilgjengelig. Dette skyldes ikke noe du gjorde.
+                </BodyShort>
+                <BodyShort>Du kan prøve å</BodyShort>
+                <List>
+                  <List.Item>
+                    vente noen minutter og laste siden på nytt
+                  </List.Item>
+                  <List.Item>gå tilbake til forrige side</List.Item>
+                </List>
+                <BodyShort>
+                  Hvis problemet vedvarer, kan du{" "}
+                  <Link
+                    href="https://github.com/navikt/aksel/issues/new?assignees=&labels=bug+%F0%9F%90%9B&projects=&template=bug-report.md&title=[Aksel.nav.no%20-%20500]"
+                    target="_blank"
+                  >
+                    kontakte oss (åpnes i ny fane)
+                  </Link>
+                  .
+                </BodyShort>
+              </div>
+            </VStack>
+            <div>
+              <Heading level="1" size="large" spacing>
+                Something went wrong
+              </Heading>
+              <BodyShort spacing>
+                This was caused by a technical fault on our servers. Please
+                refresh this page or try again in a few minutes.{" "}
+              </BodyShort>
+              <BodyShort>
+                <Link
+                  target="_blank"
+                  href="https://github.com/navikt/aksel/issues/new?assignees=&labels=bug+%F0%9F%90%9B&projects=&template=bug-report.md&title=[Aksel.nav.no%20-%20500]"
+                >
+                  Contact us (opens in new tab)
+                </Link>{" "}
+                if the problem persists.
+              </BodyShort>
+            </div>
+          </VStack>
+        </Box>
+      </Page.Block>
+    </Page>
   );
-};
-
-export default MyError;
+}
+export default ErrorPage;

aksel.nav.no/website/pages/eksempler/README.md

@@ -10,7 +10,7 @@ Eksempler må ligge under `eksempler/[gruppe]/[eksempel].tsx`
 
 ### Kode
 
-Alle linjer som inneholder `withDsExample` + alt under `export default withDsExample(Example);` blir automatisk fjernet fra kode-snippet.
+Alle linjer som inneholder `examples/withDsExample` + alt under `// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE` blir automatisk fjernet fra kode-snippet.
 
 Demo-komponent må ha navn `Example` for at CodeSandbox-knapp skal fungere riktig.
 
@@ -28,10 +28,11 @@ const Example = () => {
   return <Button>Primary</Button>;
 };
 
-export default withDsExample(Example); <- Alt under denne linjen fjernes fra vist kode
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default withDsExample(Example);
 
 export const args = {
   index: 0,
-  desc: "Primærknapp brukes til xyz"
+  desc: "Primærknapp brukes til xyz",
 };
 ```

aksel.nav.no/website/pages/eksempler/accordion/controlled-state.tsx

@@ -1,6 +1,6 @@
-import { withDsExample } from "@/web/examples/withDsExample";
-import { Accordion, Button } from "@navikt/ds-react";
 import { useState } from "react";
+import { Accordion, Button } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const [open, setOpen] = useState(false);
@@ -33,6 +33,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "static" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/accordion/default-open.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Accordion } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -32,6 +32,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "static" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/accordion/default.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Accordion } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -32,6 +32,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "static" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/accordion/size.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Accordion } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -51,6 +51,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "static" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/accordion/variant-neutral.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Accordion } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -32,6 +32,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "static" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/alert/default.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -18,6 +18,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/alert/error.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -7,6 +7,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/alert/fullwidth.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -22,6 +22,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/alert/info.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -11,6 +11,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/alert/inline.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -22,6 +22,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/alert/med-aria-roles.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -24,6 +24,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/alert/med-heading.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert, Heading } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -14,6 +14,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/alert/med-lukkeknapp.tsx

@@ -1,6 +1,6 @@
-import { withDsExample } from "@/web/examples/withDsExample";
-import { Alert, AlertProps } from "@navikt/ds-react";
 import React from "react";
+import { Alert, AlertProps } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -41,6 +41,7 @@ const AlertWithCloseButton = ({
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/alert/small.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -14,6 +14,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/alert/success.tsx

@@ -1,10 +1,11 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return <Alert variant="success">Søknad er sendt inn!</Alert>;
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/alert/warning.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Alert } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -9,6 +9,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/bodylong/align.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyLong, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const lorem =
@@ -33,6 +33,7 @@ function Divider() {
   return <hr className="border-border-subtle" />;
 }
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/bodylong/colors.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyLong, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const lorem =
@@ -28,6 +28,7 @@ function Divider() {
   return <hr className="border-border-subtle" />;
 }
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/bodylong/large.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyLong, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const lorem =
@@ -34,6 +34,7 @@ function Divider() {
   return <hr className="border-border-subtle" />;
 }
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/bodylong/medium.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyLong, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const lorem =
@@ -30,6 +30,7 @@ function Divider() {
   return <hr className="border-border-subtle" />;
 }
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/bodylong/override-tag.tsx

@@ -1,10 +1,11 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyLong } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return <BodyLong as="span">Dette er nå en span!</BodyLong>;
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/bodylong/small.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyLong, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const lorem =
@@ -34,6 +34,7 @@ function Divider() {
   return <hr className="border-border-subtle" />;
 }
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/bodylong/spacing-large.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyLong } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const lorem =
@@ -17,6 +17,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/bodylong/spacing-medium.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyLong } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const lorem =
@@ -13,6 +13,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/bodylong/spacing-small.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyLong } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const lorem =
@@ -17,6 +17,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/bodyshort/align.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyShort, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
@@ -32,6 +32,7 @@ function Divider() {
   return <hr className="border-border-subtle" />;
 }
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/bodyshort/colors.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyShort, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
@@ -27,6 +27,7 @@ function Divider() {
   return <hr className="border-border-subtle" />;
 }
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/bodyshort/large.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyShort, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
@@ -33,6 +33,7 @@ function Divider() {
   return <hr className="border-border-subtle" />;
 }
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/bodyshort/medium.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyShort, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
@@ -29,6 +29,7 @@ function Divider() {
   return <hr className="border-border-subtle" />;
 }
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/bodyshort/override-tag.tsx

@@ -1,10 +1,11 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyShort } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return <BodyShort as="span">Dette er nå en span!</BodyShort>;
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/bodyshort/small.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyShort, VStack } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
@@ -33,6 +33,7 @@ function Divider() {
   return <hr className="border-border-subtle" />;
 }
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/bodyshort/spacing-large.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyShort } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
@@ -16,6 +16,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/bodyshort/spacing-medium.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyShort } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
@@ -12,6 +12,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/bodyshort/spacing-small.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { BodyShort } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
@@ -16,6 +16,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "full" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/button/default.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Button } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -12,6 +12,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/button/disabled.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Button } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -20,6 +20,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/button/icon.tsx

@@ -1,6 +1,6 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { PencilIcon } from "@navikt/aksel-icons";
 import { Button } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -14,6 +14,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/button/loading.tsx

@@ -1,10 +1,11 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Button } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return <Button loading>Loading</Button>;
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/button/neutral.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Button } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -11,6 +11,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

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

@@ -1,6 +1,6 @@
-import { withDsExample } from "@/web/examples/withDsExample";
-import { Button } from "@navikt/ds-react";
 import Link from "next/link";
+import { Button } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -10,6 +10,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/button/small.tsx

@@ -1,6 +1,6 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { PencilIcon } from "@navikt/aksel-icons";
 import { Button } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -21,6 +21,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/button/xsmall.tsx

@@ -1,6 +1,6 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { PencilIcon } from "@navikt/aksel-icons";
 import { Button } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -21,6 +21,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/chat/avatar.tsx

@@ -1,6 +1,6 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { PersonHeadsetIcon, PersonIcon } from "@navikt/aksel-icons";
 import { Chat } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -28,6 +28,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/chat/colors.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Chat } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -23,6 +23,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, { variant: "subtle" });
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/chat/default.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Chat } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -23,6 +23,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/chat/small.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Chat } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -24,6 +24,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/chat/toptextPosition.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Chat } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
@@ -23,6 +23,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/checkbox/checkbox-description.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Checkbox, CheckboxGroup } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const handleChange = (val: any[]) => console.log(val);
@@ -18,6 +18,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/checkbox/controlled.tsx

@@ -1,6 +1,6 @@
-import { withDsExample } from "@/web/examples/withDsExample";
-import { Checkbox, CheckboxGroup } from "@navikt/ds-react";
 import { useState } from "react";
+import { Checkbox, CheckboxGroup } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const [state, setState] = useState(["Midterst"]);
@@ -18,6 +18,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/checkbox/default.tsx

@@ -1,5 +1,5 @@
-import { withDsExample } from "@/web/examples/withDsExample";
 import { Checkbox, CheckboxGroup } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const handleChange = (val: any[]) => console.log(val);
@@ -16,6 +16,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */