🐛 Button submittet form i table

@navikt/codemod/CHANGELOG.md

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

@navikt/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "2.0.7",
+  "version": "2.0.10",
   "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.7",
-    "@navikt/ds-react": "^2.0.7",
+    "@navikt/ds-icons": "^2.0.10",
+    "@navikt/ds-react": "^2.0.10",
     "clsx": "^1.1.1"
   },
   "devDependencies": {

@navikt/core/css/CHANGELOG.md

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

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "2.0.7",
+  "version": "2.0.10",
   "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.7",
+    "@navikt/ds-tokens": "^2.0.10",
     "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.10
+
+### Patch Changes
+
+- Button submittet form i table
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.0.10
+
+## 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

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.0.7",
+  "version": "2.0.10",
   "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.7",
+    "@navikt/ds-icons": "^2.0.10",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@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/react/src/table/ColumnHeader.tsx

@@ -44,6 +44,7 @@ export const ColumnHeader: ColumnHeaderType = forwardRef(
       >
         {sortable ? (
           <button
+            type="button"
             className="navds-table__sort-button"
             onClick={
               sortable && sortKey

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

@@ -85,6 +85,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
           >
             {!expansionDisabled && (
               <button
+                type="button"
                 className="navds-table__toggle-expand-button"
                 aria-controls={id}
                 aria-expanded={isOpen}

@navikt/core/tailwind/CHANGELOG.md

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

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "2.0.7",
+  "version": "2.0.10",
   "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.7",
+    "@navikt/ds-tokens": "^2.0.10",
     "@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.10
+
+## 2.0.9
+
+## 2.0.8
+
 ## 2.0.7
 
 ## 2.0.6

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "2.0.7",
+  "version": "2.0.10",
   "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.10
+
+## 2.0.9
+
+## 2.0.8
+
 ## 2.0.7
 
 ## 2.0.6

@navikt/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "2.0.7",
+  "version": "2.0.10",
   "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.10
+
+## 2.0.9
+
+## 2.0.8
+
 ## 2.0.7
 
 ## 2.0.6

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "2.0.7",
+  "version": "2.0.10",
   "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.10
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.0.10
+  - @navikt/ds-icons@2.0.10
+
+## 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

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "2.0.7",
+  "version": "2.0.10",
   "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.7",
-    "@navikt/ds-react": "^2.0.7",
+    "@navikt/ds-icons": "^2.0.10",
+    "@navikt/ds-react": "^2.0.10",
     "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.7",
-    "@navikt/ds-css": "^2.0.7",
-    "@navikt/ds-css-internal": "^2.0.7",
-    "@navikt/ds-icons": "^2.0.7",
-    "@navikt/ds-react": "^2.0.7",
-    "@navikt/ds-react-internal": "^2.0.7",
-    "@navikt/ds-tailwind": "^2.0.7",
-    "@navikt/ds-tokens": "^2.0.7"
+    "@navikt/ds-codemod": "^2.0.10",
+    "@navikt/ds-css": "^2.0.10",
+    "@navikt/ds-css-internal": "^2.0.10",
+    "@navikt/ds-icons": "^2.0.10",
+    "@navikt/ds-react": "^2.0.10",
+    "@navikt/ds-react-internal": "^2.0.10",
+    "@navikt/ds-tailwind": "^2.0.10",
+    "@navikt/ds-tokens": "^2.0.10"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.1.13"

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

@@ -31,34 +31,33 @@ const RelatertInnhold = ({
       )}
     >
       {node.lenker.map((x) => (
-        <div
-          key={x._key}
-          className="relatert-kort algolia-ignore-index shadow-small focus-within:border-focus hover:shadow-medium group relative cursor-pointer rounded border-2 border-transparent bg-white px-4 py-3 ring-1 ring-gray-900/10 only-of-type:col-span-2 focus-within:outline-none"
-        >
-          <NextLink href={getHref(x)} passHref>
+        <NextLink href={getHref(x)} passHref key={x._key}>
+          <a
+            onClick={(e) =>
+              logNav(
+                "relatert-innhold",
+                window.location.pathname,
+                e.currentTarget.getAttribute("href")
+              )
+            }
+            className="algolia-ignore-index shadow-small focus-visible:shadow-focus bg-surface-default ring-border-subtle group grid rounded border-2 border-transparent px-4 py-3 ring-1 only-of-type:col-span-2 focus:outline-none"
+          >
             <Heading
+              as="span"
               size="xsmall"
-              as="a"
-              onClick={(e) =>
-                logNav(
-                  "relatert-innhold",
-                  window.location.pathname,
-                  e.currentTarget.getAttribute("href")
-                )
-              }
-              className="focus:text-text-action group-hover:text-text-action underline after:absolute after:inset-0 focus:outline-none group-hover:no-underline group-focus:no-underline"
+              className="underline group-hover:no-underline"
             >
               {x.title}
             </Heading>
-          </NextLink>
-
-          <BodyShort
-            size="small"
-            className="text-text-subtle mt-1 self-end break-words"
-          >
-            {x.ekstern_domene ? <>{getTag(x)}</> : `aksel.nav.no`}
-          </BodyShort>
-        </div>
+            <BodyShort
+              size="small"
+              className="text-text-subtle mt-1 self-end break-words"
+              as="span"
+            >
+              {x.ekstern_domene ? <>{getTag(x)}</> : `aksel.nav.no`}
+            </BodyShort>
+          </a>
+        </NextLink>
       ))}
     </div>
   );

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/e2e/icon-search.e2e.ts

@@ -1,155 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test("Icon-search", async ({ page }) => {
-  await page.goto("http://localhost:3000/designsystem/side/ikoner");
-
-  await page.getByRole("button", { name: "Braille Braille" }).click();
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner?icon=Braille"
-  );
-
-  await page
-    .getByText(
-      /\/\/\s+Reactimport\s+\{\s+Braille\s+\}\s+from\s+"@navikt\/ds-icons";\s+\/\/\s+SVGimport\s+Braille\s+from\s+"@/
-    )
-    .click();
-
-  await page.getByRole("heading", { name: "Braille" }).click();
-
-  await page.getByRole("button", { name: "Lukk modalvindu" }).click();
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner"
-  );
-
-  await page.getByRole("button", { name: "Disability Disability" }).click();
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner?icon=Disability"
-  );
-
-  await page
-    .locator(
-      'div[role="dialog"]:has-text("DisabilityAccessibilityLast nedlast nedSVGImport// Reactimport { Disability } fr")'
-    )
-    .press("Escape");
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner"
-  );
-
-  await page.getByRole("button", { name: "Eye Eye" }).click();
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner?icon=Eye"
-  );
-
-  await page.getByRole("dialog").press("Escape");
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner"
-  );
-
-  await page.getByRole("button", { name: "Sight Sight" }).click();
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner?icon=Sight"
-  );
-
-  await page.getByRole("dialog").press("Escape");
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner"
-  );
-
-  await page.getByLabel("Søk i alle NAV-ikoner").click();
-
-  await page.getByLabel("Søk i alle NAV-ikoner").fill("arrow");
-
-  await page.getByRole("button", { name: "Cancel Cancel" }).click();
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner?icon=Cancel"
-  );
-
-  await page.getByRole("dialog").press("Escape");
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner"
-  );
-
-  await page.getByRole("button", { name: "Forward Forward" }).click();
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner?icon=Forward"
-  );
-
-  await page
-    .locator(
-      'div[role="dialog"]:has-text("ForwardArrowsforward, videresendLast nedlast nedSVGImport// Reactimport { Forwar")'
-    )
-    .press("Escape");
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner"
-  );
-
-  await page.getByLabel("Søk i alle NAV-ikoner").click();
-
-  await page.getByLabel("Søk i alle NAV-ikoner").fill("office");
-
-  await page.getByRole("button", { name: "Office1 Office1" }).click();
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner?icon=Office1"
-  );
-
-  await page.getByRole("dialog").press("Escape");
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner"
-  );
-
-  await page.getByRole("button", { name: "Office2 Office2" }).click();
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner?icon=Office2"
-  );
-
-  await page.getByRole("dialog").press("Escape");
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner"
-  );
-
-  await page.getByRole("heading", { name: "Buildings" }).click();
-
-  await page.getByRole("radio", { name: "Filled" }).click();
-
-  await page.getByRole("button", { name: "Office1Filled Office1" }).click();
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner?icon=Office1Filled"
-  );
-
-  await page
-    .locator(
-      'div[role="dialog"]:has-text("Office1FilledBuildingsLast nedlast nedSVGImport// Reactimport { Office1Filled } ")'
-    )
-    .press("Escape");
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner"
-  );
-
-  await page.getByRole("button", { name: "Office2Filled Office2" }).click();
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner?icon=Office2Filled"
-  );
-
-  await page
-    .locator(
-      'div[role="dialog"]:has-text("Office2FilledBuildingsLast nedlast nedSVGImport// Reactimport { Office2Filled } ")'
-    )
-    .press("Escape");
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner"
-  );
-
-  await page.getByRole("radio", { name: "Nye ikoner" }).click();
-
-  await page.getByRole("button", { name: "Ny! Table Table" }).click();
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner?icon=Table"
-  );
-
-  await page.getByRole("dialog").press("Escape");
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/ikoner"
-  );
-
-  await page.getByRole("button", { name: "Tøm" }).click();
-});

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

@@ -1,43 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test("Go to /designsystem and navigate sidebar", async ({ page }) => {
-  await page.goto(
-    "http://localhost:3000/designsystem/side/oversikt-komponenter"
-  );
-  await expect(page).toHaveURL(
-    "http://localhost:3000/designsystem/side/oversikt-komponenter"
-  );
-
-  await expect(page.getByRole("button", { name: "Core" })).toHaveAttribute(
-    "aria-expanded",
-    "true"
-  );
-
-  await page.getByRole("button", { name: "Core" }).click();
-  await expect(page.getByRole("button", { name: "Core" })).toHaveAttribute(
-    "aria-expanded",
-    "false"
-  );
-
-  await page.getByRole("button", { name: "Core" }).click();
-  await expect(page.getByRole("button", { name: "Core" })).toHaveAttribute(
-    "aria-expanded",
-    "true"
-  );
-
-  await expect(page.getByRole("button", { name: "Internal" })).toHaveAttribute(
-    "aria-expanded",
-    "true"
-  );
-  await page.getByRole("button", { name: "Internal" }).click();
-  await expect(page.getByRole("button", { name: "Internal" })).toHaveAttribute(
-    "aria-expanded",
-    "false"
-  );
-
-  await page.getByRole("button", { name: "Internal" }).click();
-  await expect(page.getByRole("button", { name: "Internal" })).toHaveAttribute(
-    "aria-expanded",
-    "true"
-  );
-});

aksel.nav.no/website/e2e/test-urls.json

@@ -3,9 +3,6 @@
   "/designsystem",
   "/god-praksis",
   "/produktbloggen",
-  "/designsystem/komponenter/tag",
-  "/designsystem/side/migrering",
-  "/designsystem/side/ikoner",
   "/god-praksis/innholdsarbeid",
   "/god-praksis/brukerinnsikt",
   "/god-praksis/universell-utforming",

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

@@ -17,7 +17,7 @@ const ContentSecurityPolicy = `
   connect-src 'self' wss://hnbe3yhs.api.sanity.io cdn.sanity.io *.api.sanity.io https://amplitude.nav.no https://sentry.gc.nav.no https://*.algolia.net https://*.algolianet.com https://in2.taskanalytics.com/03346;
   frame-ancestors localhost:3333 'self' localhost:3000 https://verktoykasse.sanity.studio/;
   media-src 'self' cdn.sanity.io;
-  frame-src 'self' https://web.microsoftstream.com localhost:3000;
+  frame-src 'self' https://web.microsoftstream.com localhost:3000 https://aksel.dev.nav.no/;
 `;
 
 const securityHeaders = [
@@ -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.7",
-    "@navikt/ds-react": "2.0.7",
+    "@navikt/ds-css": "2.0.10",
+    "@navikt/ds-react": "2.0.10",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },