Version Packages (#2519)

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

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/aksel-icons
 
+## 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.3",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/aksel-stylelint
 
+## 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.3",
   "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.3",
+    "@navikt/ds-tokens": "^5.11.3",
     "@types/jest": "^29.0.0",
     "concurrently": "7.2.1",
     "copyfiles": "2.4.1",

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/aksel
 
+## 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.3",
   "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.3",
     "axios": "1.6.0",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/ds-css
 
+## 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "5.11.1",
+  "version": "5.11.3",
   "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.3",
     "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,29 @@
 # @navikt/ds-react
 
+## 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.3",
   "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.3",
+    "@navikt/ds-tokens": "^5.11.3",
     "@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/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/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/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,9 @@
 # @navikt/ds-tailwind
 
+## 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.3",
   "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.3",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-tokens
 
+## 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.3",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

CHANGELOG.md

@@ -4,6 +4,14 @@
 
 ### @navikt/ds-react
 
+- :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))
+
+* ⬆️ 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))
@@ -14,13 +22,17 @@
 
 ### @navikt/ds-css
 
-- Switch: Byttet success-farger med action npr checked ([#2511](https://github.com/navikt/aksel/pull/2511))
+- :bug: Textarea: Skru av autosize ved manuell resize ([#2518](https://github.com/navikt/aksel/pull/2518))
 
-* :sparkles: Textarea: Mulighet for å sette resize-retning ([#2494](https://github.com/navikt/aksel/pull/2494))
+- Page: La til `md`-bredde (768px) ([#2510](https://github.com/navikt/aksel/pull/2510))
 
-* :sparkles: Textarea: Eksperimentell støtte for automatisk scrollbar ([#2457](https://github.com/navikt/aksel/pull/2457))
+* Switch: Byttet success-farger med action npr checked ([#2511](https://github.com/navikt/aksel/pull/2511))
 
-- :wheelchair: Textarea: Forsinkelse ved live-opplesning av gjenstående tegn ([#2502](https://github.com/navikt/aksel/pull/2502))
+- :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/aksel-icons
 

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.3",
+    "@navikt/ds-css": "^5.11.3",
+    "@navikt/ds-react": "^5.11.3",
+    "@navikt/ds-tailwind": "^5.11.3",
+    "@navikt/ds-tokens": "^5.11.3"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"

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

@@ -11,8 +11,8 @@ 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 { CodeSandbox } from "./parts/CodeSandbox";
+import { Sandbox } from "./parts/Sandbox";
 
 const iframePadding = 192;
 const iframeId = "example-iframe";
@@ -98,10 +98,10 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
 
   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}
@@ -119,119 +119,117 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
               >
                 {fixName(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
+                  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(
-                    "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>
+                  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>
-                  )}
-                </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>
 
-                <SnippetLazy
-                  node={{
-                    code: { code: fil.innhold.trim(), language: "tsx" },
-                  }}
-                />
-              </>
-            )}
-          </div>
-        );
-      })}
+                  <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" />
+                      }
+                      target="_blank"
+                      className="si-ignore"
+                      as="a"
+                      href={`/${demoVariant}/${
+                        node.dir.title
+                      }/${fil.navn.replace(".tsx", "")}`}
+                    />
+                  </HStack>
+                </HStack>
+              </div>
+
+              <SnippetLazy
+                node={{
+                  code: { code: fil.innhold.trim(), language: "tsx" },
+                }}
+              />
+            </>
+          )}
+        </div>
+      ))}
     </div>
   );
 };

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 Footer from "@/layout/footer/Footer";
+import Header from "@/layout/header/Header";
 import { AmplitudeEvents, amplitude } from "@/logging";
-import { AkselCubeStatic } from "@/web/aksel-cube/AkselCube";
-import { BodyLong, Heading } from "@navikt/ds-react";
+import {
+  BodyShort,
+  Box,
+  Heading,
+  Link,
+  List,
+  Page,
+  VStack,
+} from "@navikt/ds-react";
 import { useEffect } from "react";
 
-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 Footer from "@/layout/footer/Footer";
+import Header from "@/layout/header/Header";
+import { AmplitudeEvents, amplitude } from "@/logging";
+import {
+  BodyShort,
+  Box,
+  Heading,
+  Link,
+  List,
+  Page,
+  VStack,
+} from "@navikt/ds-react";
+import { useEffect } from "react";
+
+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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -5,6 +5,7 @@ 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

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

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

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

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

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

@@ -5,6 +5,7 @@ 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

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

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

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

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

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

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

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

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

@@ -5,6 +5,7 @@ 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

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

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

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

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

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

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

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

@@ -5,6 +5,7 @@ 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

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

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

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

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

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

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

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

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

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

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

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

@@ -16,6 +16,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

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

@@ -17,6 +17,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

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

@@ -17,6 +17,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/checkbox/group-error.tsx

@@ -17,6 +17,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/checkbox/hide-labels.tsx

@@ -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/checkbox/hide-legend.tsx

@@ -17,6 +17,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

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

@@ -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/readonly.tsx

@@ -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/single-error.tsx

@@ -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/small.tsx

@@ -17,6 +17,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/chips/removable-neutral.tsx

@@ -35,6 +35,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/chips/removable.tsx

@@ -35,6 +35,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

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

@@ -54,6 +54,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/chips/toggle-neutral.tsx

@@ -38,6 +38,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/chips/toggle-no-checkmark.tsx

@@ -32,6 +32,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */

aksel.nav.no/website/pages/eksempler/chips/toggle.tsx

@@ -37,6 +37,7 @@ const Example = () => {
   );
 };
 
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example);
 
 /* Storybook story */