📝 Datepicker i modal demo

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-codemod
 
+## 2.0.9
+
+## 2.0.8
+
+## 2.0.7
+
 ## 2.0.6
 
 ## 2.0.5

@navikt/codemod/package.json

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

@navikt/community/navno/package.json

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

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css
 
+## 2.0.9
+
+## 2.0.8
+
+## 2.0.7
+
 ## 2.0.6
 
 ## 2.0.5

@navikt/core/css/package.json

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

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @navikt/ds-react
 
+## 2.0.9
+
+### Patch Changes
+
+- ShouldCloseOnEsc i Modal
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.9
+
+## 2.0.8
+
+### Patch Changes
+
+- Confirmationpanel wrappet med div
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.8
+
+## 2.0.7
+
+### Patch Changes
+
+- :bug: Fikset keyboard-click i monthpicker
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.7
+
 ## 2.0.6
 
 ### Patch Changes

@navikt/core/react/package.json

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

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

@@ -74,7 +74,6 @@ export const MonthButton = ({
           : -1
       }
       onKeyDown={(e) => {
-        e.preventDefault();
         const next = nextEnabled(
           months,
           e.key,

@navikt/core/react/src/form/ConfirmationPanel.tsx

@@ -51,6 +51,7 @@ export const ConfirmationPanel = forwardRef<
             size={props.size}
             className="navds-confirmation-panel__content"
             id={`confirmation-panel-${id}`}
+            as="div"
           >
             {children}
           </BodyLong>

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

@@ -36,6 +36,10 @@ export interface ModalProps {
    * @default true
    */
   closeButton?: boolean;
+  /**
+   *
+   */
+  shouldCloseOnEsc?: boolean;
   /**
    * Allows custom styling of ReactModal, in accordance with their typing
    */
@@ -75,6 +79,7 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
       className,
       overlayClassName,
       shouldCloseOnOverlayClick = true,
+      shouldCloseOnEsc = true,
       closeButton = true,
       "aria-describedby": ariaDescribedBy,
       "aria-labelledby": ariaLabelledBy,
@@ -123,6 +128,7 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
         className={cl("navds-modal", className)}
         overlayClassName={cl("navds-modal__overlay", overlayClassName)}
         shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
+        shouldCloseOnEsc={shouldCloseOnEsc}
         onRequestClose={(e) => onModalCloseRequest(e)}
         aria={{
           describedby: ariaDescribedBy,

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-tailwind
 
+## 2.0.9
+
+## 2.0.8
+
+## 2.0.7
+
 ## 2.0.6
 
 ## 2.0.5

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "2.0.6",
+  "version": "2.0.9",
   "description": "Tailwind config based on @navikt/ds-tokens",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.0.6",
+    "@navikt/ds-tokens": "^2.0.9",
     "@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
 
+## 2.0.9
+
+## 2.0.8
+
+## 2.0.7
+
 ## 2.0.6
 
 ## 2.0.5

@navikt/core/tokens/package.json

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

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-icons
 
+## 2.0.9
+
+## 2.0.8
+
+## 2.0.7
+
 ## 2.0.6
 
 ## 2.0.5

@navikt/icons/package.json

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

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css-internal
 
+## 2.0.9
+
+## 2.0.8
+
+## 2.0.7
+
 ## 2.0.6
 
 ## 2.0.5

@navikt/internal/css/package.json

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

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @navikt/ds-react-internal
 
+## 2.0.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.0.9
+  - @navikt/ds-icons@2.0.9
+
+## 2.0.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.0.8
+  - @navikt/ds-icons@2.0.8
+
+## 2.0.7
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.0.7
+  - @navikt/ds-icons@2.0.7
+
 ## 2.0.6
 
 ### Patch Changes

@navikt/internal/react/package.json

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

aksel.nav.no/package.json

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

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

@@ -1,36 +1,10 @@
 /* eslint-disable @next/next/no-img-element */
 import { SanityT, urlFor } from "@/lib";
-import { Heading, Tag } from "@navikt/ds-react";
+import { Heading } from "@navikt/ds-react";
 import Nextlink from "next/link";
 import cl from "classnames";
 import Image from "next/image";
-
-const getStatus = (status?: SanityT.Schema.komponent_artikkel["status"]) => {
-  switch (status?.tag) {
-    case "beta":
-      return (
-        <Tag variant="alt1" size="small">
-          Beta
-        </Tag>
-      );
-    case "new":
-      return (
-        <Tag variant="info" size="small">
-          New
-        </Tag>
-      );
-    case "ready":
-      return null;
-    case "deprecated":
-      return (
-        <Tag variant="neutral" size="small">
-          Deprecated
-        </Tag>
-      );
-    default:
-      return null;
-  }
-};
+import { StatusTag } from "components/website-modules/StatusTag";
 
 const ComponentOverview = ({
   node,
@@ -39,7 +13,6 @@ const ComponentOverview = ({
     _id: string;
     heading: string;
     slug: { current: string };
-    ingress?: any[];
     status?: SanityT.Schema.komponent_artikkel["status"];
   }[];
 }): JSX.Element => {
@@ -61,52 +34,63 @@ const ComponentOverview = ({
       <ul className="component-card-grid">
         {sorted.map((x) => (
           <li key={x._id}>
-            <div className="shadow-small focus-within:shadow-focus hover:shadow-medium group relative rounded ring-1 ring-gray-900/10">
+            <div className="bg-surface-subtle focus-within:shadow-focus ring-border-subtle hover:shadow-medium group relative h-56 rounded-2xl hover:ring-1">
               <div
                 className={cl(
-                  "flex max-h-64 items-center justify-center overflow-hidden rounded-t bg-gray-50",
-                  {
-                    "p-12":
-                      x.status?.bilde &&
-                      !urlFor(x.status?.bilde)
-                        .auto("format")
-                        .url()
-                        .includes("320x256.svg?auto=format"),
-                  }
+                  "flex max-h-44 items-center justify-center overflow-hidden rounded-t-2xl"
                 )}
               >
                 {x.status?.bilde ? (
                   <Image
                     src={urlFor(x.status?.bilde).auto("format").url()}
                     decoding="async"
-                    width="320px"
-                    height="256px"
+                    width="200px"
+                    height="200px"
                     layout="fixed"
                     objectFit="contain"
                     alt={x?.heading + " thumbnail"}
+                    aria-hidden
                   />
                 ) : (
                   <svg
-                    aria-hidden
+                    width="200"
+                    height="200"
+                    fill="none"
                     xmlns="http://www.w3.org/2000/svg"
-                    viewBox="-11.5 -10.23174 23 20.46348"
-                    className="min-h-40 aspect-[1.25/1] h-auto max-h-64 p-4"
+                    aria-hidden
                   >
-                    <title>React Logo</title>
-                    <circle cx="0" cy="0" r="2.05" fill="var(--a-gray-300)" />
-                    <g stroke="var(--a-gray-300)" strokeWidth="1" fill="none">
-                      <ellipse rx="11" ry="4.2" />
-                      <ellipse rx="11" ry="4.2" transform="rotate(60)" />
-                      <ellipse rx="11" ry="4.2" transform="rotate(120)" />
-                    </g>
+                    <path
+                      fill="#3380A5"
+                      d="M85 75h5v5h-5zM80 80h5v5h-5zM60 65h5v5h-5zM65 60h5v5h-5zM70 60h5v5h-5zM75 60h5v5h-5zM80 60h5v5h-5zM85 60h5v5h-5zM90 60h5v5h-5zM95 60h5v5h-5zM100 60h5v5h-5zM105 60h5v5h-5zM110 60h5v5h-5zM115 60h5v5h-5zM120 60h5v5h-5zM125 60h5v5h-5zM130 60h5v5h-5zM60 70h5v5h-5zM60 75h5v5h-5zM60 80h5v5h-5zM60 85h5v5h-5zM60 90h5v5h-5zM60 95h5v5h-5zM60 100h5v5h-5zM60 105h5v5h-5zM60 110h5v5h-5zM60 115h5v5h-5zM60 120h5v5h-5zM60 125h5v5h-5zM60 130h5v5h-5zM80 85h5v5h-5zM80 90h5v5h-5zM85 80h5v5h-5zM85 85h5v5h-5zM85 90h5v5h-5zM105 80h5v5h-5zM105 85h5v5h-5zM105 90h5v5h-5zM105 95h5v5h-5zM100 95h5v5h-5zM100 100h5v5h-5zM100 105h5v5h-5zM100 115h5v5h-5zM100 120h5v5h-5zM95 100h5v5h-5zM95 105h5v5h-5zM95 115h5v5h-5zM95 120h5v5h-5zM110 80h5v5h-5zM110 85h5v5h-5zM110 90h5v5h-5zM110 95h5v5h-5zM90 75h5v5h-5zM95 75h5v5h-5zM100 75h5v5h-5zM105 75h5v5h-5z"
+                    />
+                    <path
+                      fill="#00243A"
+                      d="M70 70h5v5h-5zM90 80h5v5h-5zM90 85h5v5h-5zM90 90h5v5h-5zM90 95h5v5h-5zM85 95h5v5h-5zM95 80h5v5h-5zM100 80h5v5h-5zM115 85h5v5h-5zM115 90h5v5h-5zM115 95h5v5h-5zM115 100h5v5h-5zM110 100h5v5h-5zM105 100h5v5h-5zM105 105h5v5h-5zM105 110h5v5h-5zM105 120h5v5h-5zM105 125h5v5h-5zM125 125h5v5h-5zM100 125h5v5h-5zM70 125h5v5h-5zM100 110h5v5h-5zM125 70h5v5h-5zM135 65h5v5h-5zM135 70h5v5h-5zM135 75h5v5h-5zM135 80h5v5h-5zM135 85h5v5h-5zM135 90h5v5h-5zM135 95h5v5h-5zM135 100h5v5h-5zM135 105h5v5h-5zM135 110h5v5h-5zM135 115h5v5h-5zM135 120h5v5h-5zM135 125h5v5h-5zM135 130h5v5h-5zM135 135h5v5h-5zM130 135h5v5h-5zM125 135h5v5h-5zM120 135h5v5h-5zM115 135h5v5h-5zM110 135h5v5h-5zM105 135h5v5h-5zM100 135h5v5h-5zM95 135h5v5h-5zM90 135h5v5h-5zM85 135h5v5h-5zM80 135h5v5h-5zM75 135h5v5h-5zM70 135h5v5h-5zM65 135h5v5h-5zM60 135h5v5h-5z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M65 65h70v70H65V65Zm65 5h-5v5h5v-5Zm0 60v-5h-5v5h5Zm-20 0v-10h-5v-5h5v-10h10V85h-5v-5h-5v-5H85v5h-5v15h5v5h10v10h5v5h-5v10h5v5h10Zm-15-30V85h10v10h-5v5h-5ZM75 75v-5h-5v5h5Zm0 55v-5h-5v5h5Z"
+                      fill="url(#a)"
+                    />
+                    <defs>
+                      <linearGradient
+                        id="a"
+                        x1="65"
+                        y1="65"
+                        x2="135"
+                        y2="135"
+                        gradientUnits="userSpaceOnUse"
+                      >
+                        <stop offset=".010417" stopColor="#CCE2F0" />
+                        <stop offset="1" stopColor="#66A3C4" />
+                      </linearGradient>
+                    </defs>
                   </svg>
                 )}
               </div>
-              <div
-                className={cl("grid p-3", {
-                  "pt-3": !!x?.status?.bilde,
-                })}
-              >
+
+              <div className="grid p-6 pt-0">
                 <span className="flex items-center justify-between">
                   <Nextlink href={`/${x?.slug.current}`} passHref>
                     <Heading
@@ -115,9 +99,11 @@ const ComponentOverview = ({
                       className="z-10 before:absolute before:inset-0 focus:outline-none group-hover:underline"
                     >
                       {x.heading}
+                      <span className="absolute top-4 left-4">
+                        <StatusTag status={x?.status?.tag} />
+                      </span>
                     </Heading>
                   </Nextlink>
-                  {getStatus(x.status)}
                 </span>
               </div>
             </div>

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

@@ -0,0 +1,38 @@
+import { Tag } from "@navikt/ds-react";
+
+export const StatusTag = ({
+  status,
+  showStable = false,
+}: {
+  status: string;
+  showStable?: boolean;
+}) => {
+  switch (status) {
+    case "beta":
+      return (
+        <Tag variant="alt1" size="small">
+          Beta
+        </Tag>
+      );
+    case "new":
+      return (
+        <Tag variant="info" size="small">
+          New
+        </Tag>
+      );
+    case "ready":
+      return showStable ? (
+        <Tag variant="success" size="small">
+          Stable
+        </Tag>
+      ) : null;
+    case "deprecated":
+      return (
+        <Tag variant="neutral" size="small">
+          Deprecated
+        </Tag>
+      );
+    default:
+      return null;
+  }
+};

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

@@ -362,3 +362,15 @@ export const akselBloggBySlug = `{
     },
   }
 }`;
+
+export const akselStandaloneBySlug = `{
+  "page": *[slug.current == $slug && _type == "aksel_standalone"] | order(_updatedAt desc)[0]
+  {
+    ...,
+    "slug": slug.current,
+    content[]{
+      ...,
+      ${deRefs}
+    }
+  }
+}`;

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

@@ -111,6 +111,12 @@ const config = () =>
             destination: "https://verktoykasse.sanity.studio",
             permanent: true,
           },
+          {
+            source: "/storybook",
+            destination:
+              "https://master--5f801fb2aea7820022de2936.chromatic.com/",
+            permanent: true,
+          },
           {
             source: "/prinsipper",
             destination: "/",

aksel.nav.no/website/pages/eksempler/datepicker/modal.tsx

@@ -0,0 +1,57 @@
+import {
+  UNSAFE_DatePicker,
+  UNSAFE_useDatepicker,
+  Button,
+  Modal,
+  Heading,
+} from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+import { useEffect, useState } from "react";
+
+const Example = () => {
+  const [open, setOpen] = useState(false);
+
+  const { datepickerProps, inputProps, selectedDay } = UNSAFE_useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    onDateChange: console.log,
+  });
+
+  useEffect(() => {
+    Modal.setAppElement("#__next");
+  }, []);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Åpne modal</Button>
+
+      <Modal
+        open={open}
+        aria-label="Modal demo"
+        onClose={() => setOpen((x) => !x)}
+        shouldCloseOnEsc={!datepickerProps.open}
+        aria-labelledby="modal-heading"
+      >
+        <Modal.Content className="min-w-96 max-w-full">
+          <Heading spacing level="1" size="large" id="modal-heading">
+            Heading
+          </Heading>
+          <div className="min-h-96">
+            <UNSAFE_DatePicker {...datepickerProps} strategy="fixed">
+              <UNSAFE_DatePicker.Input {...inputProps} label="Velg dato" />
+            </UNSAFE_DatePicker>
+            <div className="pt-4">
+              {selectedDay && selectedDay.toDateString()}
+            </div>
+          </div>
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+};
+
+export default withDsExample(Example);
+
+export const args = {
+  index: 10,
+  desc: "Ved bruk av datepicker i Modal er det viktig at 'Escape' ikke lukker selve modalen hvis datepicker er åpen. Bruk 'shouldCloseOnEsc' for å toggle dette når datepicker er åpen.",
+};

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

@@ -0,0 +1,123 @@
+import { Feedback, TableOfContents } from "@/components";
+import { akselStandaloneBySlug, SanityT } from "@/lib";
+import { SanityBlockContent } from "@/sanity-block";
+import { getClient } from "@/sanity-client";
+import { Heading } from "@navikt/ds-react";
+import Footer from "components/layout/footer/Footer";
+import Header from "components/layout/header/AkselHeader";
+import { PreviewSuspense } from "next-sanity/preview";
+import Head from "next/head";
+import { GetServerSideProps } from "next/types";
+import React, { lazy } from "react";
+import NotFotfund from "../404";
+
+const Page = ({
+  page,
+}: {
+  slug?: string;
+  page: SanityT.Schema.aksel_standalone;
+  preview: boolean;
+}): JSX.Element => {
+  if (!page) {
+    return <NotFotfund />;
+  }
+
+  if (!page.content || !page.heading) {
+    return null;
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{`${page?.heading} - Aksel`}</title>
+        <meta
+          property="og:title"
+          content={`${page?.heading} - Aksel`}
+          key="ogtitle"
+        />
+      </Head>
+
+      <Header />
+      <main
+        tabIndex={-1}
+        id="hovedinnhold"
+        className="aksel-artikkel xs:pb-32 bg-gray-50 pt-[8vw] pb-16 focus:outline-none"
+      >
+        <div className="px-4">
+          <div className="dynamic-wrapper-prose">
+            <Heading
+              level="1"
+              size="xlarge"
+              className="algolia-index-lvl1 mt-1"
+            >
+              {page.heading}
+            </Heading>
+          </div>
+        </div>
+        <div className="mt-12">
+          <TableOfContents changedState={page?.content ?? []} hideToc />
+          <div className="mt-8 px-4">
+            <SanityBlockContent
+              className="dynamic-wrapper-prose"
+              blocks={page?.content ?? []}
+              variant="aksel"
+            />
+          </div>
+        </div>
+      </main>
+      <Footer variant="aksel" />
+    </>
+  );
+};
+
+const WithPreview = lazy(() => import("../../components/WithPreview"));
+
+const Wrapper = (props: any): JSX.Element => {
+  if (props?.preview) {
+    return (
+      <PreviewSuspense fallback={<Page {...props} />}>
+        <WithPreview
+          comp={Page}
+          query={akselStandaloneBySlug}
+          props={props}
+          params={{
+            slug: `side/${props.slug}`,
+          }}
+        />
+      </PreviewSuspense>
+    );
+  }
+
+  return <Page {...props} />;
+};
+
+export default Wrapper;
+
+interface StaticProps {
+  props: {
+    page: SanityT.Schema.aksel_standalone;
+    slug: string;
+    preview: boolean;
+    validUser?: boolean;
+    id: string;
+  };
+  notFound: boolean;
+}
+
+export const getServerSideProps: GetServerSideProps = async (
+  context
+): Promise<StaticProps | { notFound: true }> => {
+  const { page } = await getClient().fetch(akselStandaloneBySlug, {
+    slug: `side/${context.params.slug}`,
+  });
+
+  return {
+    props: {
+      page,
+      slug: context.params.slug as string,
+      preview: context.preview ?? false,
+      id: page?._id ?? "",
+    },
+    notFound: !page && !context.preview,
+  };
+};

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

@@ -47,6 +47,11 @@ p.override-text-no-max {
 
 .aksel-artikkel .aksel-list-ol {
   counter-reset: li;
+  list-style: none;
+}
+
+.aksel-artikkel .aksel-list-ul {
+  list-style: none;
 }
 
 .aksel-artikkel .aksel-list-ol li::before {

examples/shadow-dom/package.json

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

yarn.lock

@@ -3519,7 +3519,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/ds-codemod@^2.0.5, @navikt/ds-codemod@workspace:@navikt/codemod":
+"@navikt/ds-codemod@^2.0.6, @navikt/ds-codemod@workspace:@navikt/codemod":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-codemod@workspace:@navikt/codemod"
   dependencies:
@@ -3546,7 +3546,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css-internal@^2.0.5, @navikt/ds-css-internal@workspace:@navikt/internal/css":
+"@navikt/ds-css-internal@^2.0.6, @navikt/ds-css-internal@workspace:@navikt/internal/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css-internal@workspace:@navikt/internal/css"
   dependencies:
@@ -3557,11 +3557,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@2.0.5, @navikt/ds-css@^2.0.5, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@2.0.6, @navikt/ds-css@^2.0.6, @navikt/ds-css@workspace:@navikt/core/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": ^2.0.5
+    "@navikt/ds-tokens": ^2.0.6
     normalize.css: ^8.0.1
     postcss: ^8.4.0
     postcss-cli: ^9.0.0
@@ -3570,7 +3570,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-icons@^2.0.5, @navikt/ds-icons@workspace:@navikt/icons":
+"@navikt/ds-icons@^2.0.6, @navikt/ds-icons@workspace:@navikt/icons":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-icons@workspace:@navikt/icons"
   dependencies:
@@ -3606,8 +3606,8 @@ __metadata:
     "@babel/preset-env": 7.19.4
     "@babel/preset-react": 7.18.6
     "@babel/preset-typescript": 7.18.6
-    "@navikt/ds-icons": ^2.0.5
-    "@navikt/ds-react": ^2.0.5
+    "@navikt/ds-icons": ^2.0.6
+    "@navikt/ds-react": ^2.0.6
     "@rollup/plugin-babel": 6.0.2
     "@rollup/plugin-commonjs": 23.0.2
     "@rollup/plugin-node-resolve": ^15.0.1
@@ -3632,12 +3632,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react-internal@^2.0.5, @navikt/ds-react-internal@workspace:@navikt/internal/react":
+"@navikt/ds-react-internal@^2.0.6, @navikt/ds-react-internal@workspace:@navikt/internal/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react"
   dependencies:
-    "@navikt/ds-icons": ^2.0.5
-    "@navikt/ds-react": ^2.0.5
+    "@navikt/ds-icons": ^2.0.6
+    "@navikt/ds-react": ^2.0.6
     clsx: ^1.1.1
     concurrently: 7.2.1
     copy-to-clipboard: ^3.3.1
@@ -3653,12 +3653,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@2.0.5, @navikt/ds-react@^2.0.5, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@2.0.6, @navikt/ds-react@^2.0.6, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react-dom-interactions": 0.9.2
-    "@navikt/ds-icons": ^2.0.5
+    "@navikt/ds-icons": ^2.0.6
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -3694,11 +3694,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^2.0.5, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^2.0.6, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": ^2.0.5
+    "@navikt/ds-tokens": ^2.0.6
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -3709,7 +3709,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^2.0.5, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^2.0.6, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -8289,14 +8289,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/ds-codemod": ^2.0.5
-    "@navikt/ds-css": ^2.0.5
-    "@navikt/ds-css-internal": ^2.0.5
-    "@navikt/ds-icons": ^2.0.5
-    "@navikt/ds-react": ^2.0.5
-    "@navikt/ds-react-internal": ^2.0.5
-    "@navikt/ds-tailwind": ^2.0.5
-    "@navikt/ds-tokens": ^2.0.5
+    "@navikt/ds-codemod": ^2.0.6
+    "@navikt/ds-css": ^2.0.6
+    "@navikt/ds-css-internal": ^2.0.6
+    "@navikt/ds-icons": ^2.0.6
+    "@navikt/ds-react": ^2.0.6
+    "@navikt/ds-react-internal": ^2.0.6
+    "@navikt/ds-tailwind": ^2.0.6
+    "@navikt/ds-tokens": ^2.0.6
     prettier-plugin-tailwindcss: ^0.1.13
   languageName: unknown
   linkType: soft
@@ -25372,8 +25372,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "shadow-dom@workspace:examples/shadow-dom"
   dependencies:
-    "@navikt/ds-css": 2.0.5
-    "@navikt/ds-react": 2.0.5
+    "@navikt/ds-css": 2.0.6
+    "@navikt/ds-react": 2.0.6
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": ^2.1.0