Version Packages (#2206)

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

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/aksel-icons
 
+## 5.1.0
+
 ## 5.0.3
 
 ## 5.0.2

@navikt/aksel-icons/README.md

@@ -63,4 +63,4 @@ declare module "*.svg" {
 
 ## License
 
-[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENSE)

@navikt/aksel-icons/package.json

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

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/aksel-stylelint
 
+## 5.1.0
+
 ## 5.0.3
 
 ## 5.0.2

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "5.0.3",
+  "version": "5.1.0",
   "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.0.3",
-    "@navikt/ds-tokens": "^5.0.3",
+    "@navikt/ds-css": "^5.1.0",
+    "@navikt/ds-tokens": "^5.1.0",
     "@types/jest": "^29.0.0",
     "concurrently": "7.2.1",
     "copyfiles": "2.4.1",

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @navikt/aksel
 
+## 5.1.0
+
+### Patch Changes
+
+- Updated dependencies [[`5b78f7188`](https://github.com/navikt/aksel/commit/5b78f71884b65987a175bfdbdd332cc8406cba2d), [`54a43cf92`](https://github.com/navikt/aksel/commit/54a43cf924c63954da8c5abd901a0b8fb4498948)]:
+  - @navikt/ds-css@5.1.0
+
 ## 5.0.3
 
 ### Patch Changes

@navikt/aksel/README.md

@@ -242,4 +242,4 @@ This codemod can only be ran once, since the size-scale will keep decreasing for
 
 ## License
 
-[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENSE)

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "5.0.3",
+  "version": "5.1.0",
   "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.0.3",
+    "@navikt/ds-css": "5.1.0",
     "axios": "1.3.6",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-css
 
+## 5.1.0
+
+### Patch Changes
+
+- :lipstick: Modal: fjern kantlinje ([#2210](https://github.com/navikt/aksel/pull/2210))
+
+- Tokens: Fikset table-token ([#2204](https://github.com/navikt/aksel/pull/2204))
+
 ## 5.0.3
 
 ### Patch Changes

@navikt/core/css/README.md

@@ -40,4 +40,4 @@ But you can import it in a .css-file
 
 ## License
 
-[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENSE)

@navikt/core/css/modal.css

@@ -4,7 +4,7 @@
 
 .navds-modal {
   background-color: var(--ac-modal-bg, var(--a-surface-default));
-  border: 1px solid var(--ac-modal-border, var(--a-border-subtle));
+  border: none;
   border-radius: var(--a-border-radius-large);
   box-shadow: var(--a-shadow-xlarge);
   padding: 0;

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "5.0.3",
+  "version": "5.1.0",
   "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.0.3",
+    "@navikt/ds-tokens": "^5.1.0",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

@navikt/core/css/table.css

@@ -139,7 +139,7 @@
 .navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
 .navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
   background-color: var(--ac-table-sort-button-sorted-bg, var(--a-surface-selected));
-  color: var(--a-table-sort-button-sorted-text, var(--a-text-action-on-action-subtle));
+  color: var(--ac-table-sort-button-sorted-text, var(--a-table-sort-button-sorted-text, var(--a-text-action-on-action-subtle)));
 }
 
 .navds-table__header-cell--align-right .navds-table__sort-button {

@navikt/core/css/tokens.json

@@ -196,7 +196,6 @@
   },
   "modal": {
     "--ac-modal-bg": "--a-surface-default",
-    "--ac-modal-border": "--a-border-subtle",
     "--ac-modal-backdrop": "--a-surface-backdrop",
     "--ac-modal-width-small": "450px",
     "--ac-modal-width-medium": "700px"

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @navikt/ds-react
 
+## 5.1.0
+
+### Minor Changes
+
+- :sparkles: Modal: mulighet for å rendre i portal ([#2209](https://github.com/navikt/aksel/pull/2209))
+
+### Patch Changes
+
+- :white_check_mark: Modal: use polyfill in JSDOM ([#2208](https://github.com/navikt/aksel/pull/2208))
+
+- Datepicker: Input setter ikke nå aria-controls før popover åpnes ([#2213](https://github.com/navikt/aksel/pull/2213))
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@5.1.0
+
 ## 5.0.3
 
 ### Patch Changes

@navikt/core/react/README.md

@@ -33,4 +33,4 @@ function App() {
 
 ## License
 
-[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENSE)

@navikt/core/react/package.json

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

@navikt/core/react/src/date/DateInput.tsx

@@ -107,7 +107,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           {...omit(rest, ["error", "errorId", "size"])}
           {...inputProps}
           autoComplete="off"
-          aria-controls={ariaId}
+          aria-controls={open ? ariaId : undefined}
           readOnly={readOnly}
           className={cl(
             "navds-date__field-input",

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

@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { Button, Modal } from "..";
+import { BODY_CLASS } from "./ModalUtils";
+
+const Test = () => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <Modal open={open}>
+      <Modal.Body>
+        <p>Foobar</p>
+        <Button onClick={() => setOpen(false)}>Close</Button>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+describe("Modal", () => {
+  test("should be visible", () => {
+    render(<Test />);
+    expect(screen.getByText("Foobar")).toBeVisible();
+  });
+
+  test("should be hidden after setting 'open' to false", async () => {
+    render(<Test />);
+    fireEvent.click(screen.getByText("Close"));
+    expect(screen.getByText("Foobar")).not.toBeVisible();
+  });
+
+  test("should toggle body class", async () => {
+    render(<Test />);
+    expect(document.body.classList).toContain(BODY_CLASS);
+
+    fireEvent.click(screen.getByText("Close"));
+    await waitFor(() =>
+      expect(document.body.classList).not.toContain(BODY_CLASS)
+    );
+  });
+
+  test("should toggle body class when using portal", async () => {
+    render(
+      <Modal portal open>
+        <Modal.Header />
+      </Modal>
+    );
+    expect(document.body.classList).toContain(BODY_CLASS);
+
+    fireEvent.click(screen.getByRole("button"));
+    await waitFor(() =>
+      expect(document.body.classList).not.toContain(BODY_CLASS)
+    );
+  });
+});

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

@@ -5,18 +5,17 @@ import React, {
   useMemo,
   useRef,
 } from "react";
+import { createPortal } from "react-dom";
+import { useFloatingPortalNode } from "@floating-ui/react";
 import cl from "clsx";
-import dialogPolyfill from "./dialog-polyfill";
-import { Detail, Heading, mergeRefs, useId } from "..";
+import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
+import { Detail, Heading, mergeRefs, useId, useProvider } from "..";
 import ModalBody from "./ModalBody";
 import ModalHeader from "./ModalHeader";
 import ModalFooter from "./ModalFooter";
 import { getCloseHandler, useBodyScrollLock } from "./ModalUtils";
 import { ModalContext } from "./ModalContext";
 
-const needPolyfill =
-  typeof window !== "undefined" && window.HTMLDialogElement === undefined;
-
 export interface ModalProps
   extends React.DialogHTMLAttributes<HTMLDialogElement> {
   /**
@@ -65,6 +64,11 @@ export interface ModalProps
    * @default fit-content (up to 700px)
    * */
   width?: "medium" | "small" | number | `${number}${string}`;
+  /**
+   * Lets you render the modal into a different part of the DOM.
+   * Will use `rootElement` from `Provider` if defined, otherwise `document.body`.
+   */
+  portal?: boolean;
   /**
    * User defined classname for modal
    */
@@ -141,6 +145,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       onBeforeClose,
       onCancel,
       width,
+      portal,
       className,
       "aria-labelledby": ariaLabelledby,
       style,
@@ -151,35 +156,41 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     const modalRef = useRef<HTMLDialogElement>(null);
     const mergedRef = useMemo(() => mergeRefs([modalRef, ref]), [ref]);
     const ariaLabelId = useId();
+    const rootElement = useProvider()?.rootElement;
+    const portalNode = useFloatingPortalNode({ root: rootElement });
 
     if (useContext(ModalContext)) {
       console.error("Modals should not be nested");
     }
 
     useEffect(() => {
-      if (needPolyfill && modalRef.current) {
+      // If using portal, modalRef.current will not be set before portalNode is set.
+      // If not using portal, modalRef.current is available first.
+      // We check both to avoid activating polyfill twice when not using portal.
+      if (needPolyfill && modalRef.current && portalNode) {
         dialogPolyfill.registerDialog(modalRef.current);
       }
-    }, [modalRef]);
+    }, [modalRef, portalNode]);
 
     useEffect(() => {
       // We need to have this in a useEffect so that the content renders before the modal is displayed,
       // and in case `open` is true initially.
-      if (modalRef.current && open !== undefined) {
+      // We need to check both modalRef.current and portalNode to make sure the polyfill has been activated.
+      if (modalRef.current && portalNode && open !== undefined) {
         if (open && !modalRef.current.open) {
           modalRef.current.showModal();
         } else if (!open && modalRef.current.open) {
           modalRef.current.close();
         }
       }
-    }, [modalRef, open]);
+    }, [modalRef, portalNode, open]);
 
-    useBodyScrollLock(modalRef, "navds-modal__document-body");
+    useBodyScrollLock(modalRef, portalNode);
 
     const isWidthPreset =
       typeof width === "string" && ["small", "medium"].includes(width);
 
-    return (
+    const component = (
       <dialog
         ref={mergedRef}
         className={cl("navds-modal", className, {
@@ -229,6 +240,12 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
         </ModalContext.Provider>
       </dialog>
     );
+
+    if (portal) {
+      if (portalNode) return createPortal(component, portalNode);
+      return null;
+    }
+    return component;
   }
 ) as ModalComponent;
 

@navikt/core/react/src/modal/ModalUtils.ts

@@ -13,17 +13,19 @@ export function getCloseHandler(
   return () => modalRef.current?.close();
 }
 
+export const BODY_CLASS = "navds-modal__document-body";
+
 export function useBodyScrollLock(
   modalRef: React.RefObject<HTMLDialogElement>,
-  bodyClass: string
+  portalNode: HTMLElement | null
 ) {
   React.useEffect(() => {
-    if (!modalRef.current) return;
-    if (modalRef.current.open) document.body.classList.add(bodyClass); // In case `open` is true initially
+    if (!modalRef.current || !portalNode) return; // We check both to avoid running this twice when not using portal
+    if (modalRef.current.open) document.body.classList.add(BODY_CLASS); // In case `open` is true initially
 
     const observer = new MutationObserver(() => {
-      if (modalRef.current?.open) document.body.classList.add(bodyClass);
-      else document.body.classList.remove(bodyClass);
+      if (modalRef.current?.open) document.body.classList.add(BODY_CLASS);
+      else document.body.classList.remove(BODY_CLASS);
     });
     observer.observe(modalRef.current, {
       attributes: true,
@@ -31,7 +33,7 @@ export function useBodyScrollLock(
     });
     return () => {
       observer.disconnect();
-      document.body.classList.remove(bodyClass); // In case modal is unmounted before it's closed
+      document.body.classList.remove(BODY_CLASS); // In case modal is unmounted before it's closed
     };
-  }, [modalRef, bodyClass]);
+  }, [modalRef, portalNode]);
 }

@navikt/core/react/src/modal/dialog-polyfill.ts

@@ -1,5 +1,10 @@
 // @ts-nocheck
 
+export const needPolyfill =
+  typeof window !== "undefined" &&
+  (window.HTMLDialogElement === undefined ||
+    navigator.userAgent.includes("jsdom"));
+
 // Copyright (c) 2013 The Chromium Authors. All rights reserved.
 //
 // Redistribution and use in source and binary forms, with or without
@@ -44,35 +49,6 @@ function safeDispatchEvent(target, event) {
   return target.dispatchEvent(event);
 }
 
-/**
- * @param {Element} el to check for stacking context
- * @return {boolean} whether this el or its parents creates a stacking context
- */
-function createsStackingContext(el) {
-  while (el && el !== document.body) {
-    var s = window.getComputedStyle(el);
-    var invalid = function (k, ok) {
-      return !(s[k] === undefined || s[k] === ok);
-    };
-
-    if (
-      s.opacity < 1 ||
-      invalid("zIndex", "auto") ||
-      invalid("transform", "none") ||
-      invalid("mixBlendMode", "normal") ||
-      invalid("filter", "none") ||
-      invalid("perspective", "none") ||
-      s["isolation"] === "isolate" ||
-      s.position === "fixed" ||
-      s.webkitOverflowScrolling === "touch"
-    ) {
-      return true;
-    }
-    el = el.parentElement;
-  }
-  return false;
-}
-
 /**
  * Finds the nearest <dialog> from the passed element.
  *
@@ -476,14 +452,6 @@ dialogPolyfillInfo.prototype = /** @type {HTMLDialogElement.prototype} */ {
       );
     }
 
-    if (createsStackingContext(this.dialog_.parentElement)) {
-      console.warn(
-        "A dialog is being shown inside a stacking context. " +
-          "This may cause it to be unusable. For more information, see this link: " +
-          "https://github.com/GoogleChrome/dialog-polyfill/#stacking-context"
-      );
-    }
-
     this.setOpen(true);
     this.openAsModal_ = true;
 
@@ -602,7 +570,7 @@ dialogPolyfill.needsCentering = function (dialog) {
  * @param {!Element} element to force upgrade
  */
 dialogPolyfill.forceRegisterDialog = function (element) {
-  if (window.HTMLDialogElement || element.showModal) {
+  if (element.showModal) {
     console.warn(
       "This browser already supports <dialog>, the polyfill " +
         "may not work correctly",
@@ -847,7 +815,7 @@ dialogPolyfill.DialogManager.prototype.removeDialog = function (dpi) {
   this.updateStacking();
 };
 
-if (typeof window !== "undefined" && window.HTMLDialogElement === undefined) {
+if (needPolyfill) {
   dialogPolyfill.dm = new dialogPolyfill.DialogManager();
   dialogPolyfill.formSubmitter = null;
   dialogPolyfill.imagemapUseValue = null;
@@ -857,7 +825,7 @@ if (typeof window !== "undefined" && window.HTMLDialogElement === undefined) {
  * Installs global handlers, such as click listers and native method overrides. These are needed
  * even if a no dialog is registered, as they deal with <form method="dialog">.
  */
-if (typeof window !== "undefined" && window.HTMLDialogElement === undefined) {
+if (needPolyfill) {
   /**
    * If HTMLFormElement translates method="DIALOG" into 'get', then replace the descriptor with
    * one that returns the correct value.

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

@@ -160,8 +160,8 @@ export const Small = () => (
   </Modal>
 );
 
-export const Medium = () => (
-  <Modal open width="medium" header={{ heading: "Simple header" }}>
+export const MediumWithPortal = () => (
+  <Modal open portal width="medium" header={{ heading: "Simple header" }}>
     <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
   </Modal>
 );

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind
 
+## 5.1.0
+
 ## 5.0.3
 
 ## 5.0.2

@navikt/core/tailwind/README.md

@@ -26,4 +26,4 @@ module.exports = {
 
 ## License
 
-[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENSE)

@navikt/core/tailwind/package.json

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

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tokens
 
+## 5.1.0
+
 ## 5.0.3
 
 ### Patch Changes

@navikt/core/tokens/README.md

@@ -33,4 +33,4 @@ backgroundcolor: var(--a-surface-default);
 
 ## License
 
-[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENSE)

@navikt/core/tokens/package.json

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

CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 5.1.0
+
+### @navikt/ds-react
+
+- :sparkles: Modal: mulighet for å rendre i portal ([#2209](https://github.com/navikt/aksel/pull/2209))
+
+<!---->
+
+- :white_check_mark: Modal: use polyfill in JSDOM ([#2208](https://github.com/navikt/aksel/pull/2208))
+
+- Datepicker: Input setter ikke nå aria-controls før popover åpnes ([#2213](https://github.com/navikt/aksel/pull/2213))
+
+### @navikt/ds-css
+
+- :lipstick: Modal: fjern kantlinje ([#2210](https://github.com/navikt/aksel/pull/2210))
+
+- Tokens: Fikset table-token ([#2204](https://github.com/navikt/aksel/pull/2204))
+
 ## 5.0.3
 
 ### @navikt/ds-react

LICENSE

@@ -1,8 +1,4 @@
-Font License
-
-SIL Open Font License (OFL)
-
-# The MIT License
+# MIT License
 
 Copyright 2023 NAV (Arbeids- og velferdsdirektoratet) - The Norwegian Labour and Welfare Administration
 

README.md

@@ -64,7 +64,7 @@ Vi tar gjerne i mot PR-er! [CONTRIBUTING.md](https://github.com/navikt/aksel/blo
 
 ## Lisenser
 
-[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENSE)
 
 ## Codeowners
 

aksel.nav.no/package.json

@@ -15,11 +15,11 @@
     "website"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^5.0.3",
-    "@navikt/ds-css": "^5.0.3",
-    "@navikt/ds-react": "^5.0.3",
-    "@navikt/ds-tailwind": "^5.0.3",
-    "@navikt/ds-tokens": "^5.0.3"
+    "@navikt/aksel-icons": "^5.1.0",
+    "@navikt/ds-css": "^5.1.0",
+    "@navikt/ds-react": "^5.1.0",
+    "@navikt/ds-tailwind": "^5.1.0",
+    "@navikt/ds-tokens": "^5.1.0"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"

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

@@ -102,7 +102,7 @@ function SideLenker() {
           Hva er Aksel?
         </FooterLink>
         <FooterLink href="/side/personvernerklaering">
-          Personvernserklæring
+          Personvernerklæring
         </FooterLink>
         <FooterLink href="/side/tilgjengelighetserklaring-for-aksel">
           Tilgjengelighetserklæring

aksel.nav.no/website/sanity/plugins/structure/index.tsx

@@ -65,24 +65,11 @@ export const structure = async (
 
   const editor = ids.find(({ user_id }) => user_id?.current === currentUser.id);
   const adminOrDev = currentUser.roles.find((x) =>
-    ["developer", "administrator", "editor"].includes(x.name)
+    ["developer", "administrator"].includes(x.name)
   );
   const developer = currentUser.roles.find((x) =>
     ["developer"].includes(x.name)
   );
-  /* const hasBloggerRole = currentUser.roles.find((x) => x.name === "blogger");
-  const hasGrunnleggendeRole = currentUser.roles.find(
-    (x: Role) => x.name === "grunnleggende"
-  );
-  const hasKomponenterRole = currentUser.roles.find(
-    (x: Role) => x.name === "komponenter"
-  );
-  const hasPrinsipperRole = currentUser.roles.find(
-    (x: Role) => x.name === "prinsipper"
-  );
-  const hasGodPraksisForfatterRole = currentUser.roles.find(
-    (x: Role) => x.name === "god-praksis-forfatter"
-  ); */
 
   const feedback = await getClient({ apiVersion: "2021-06-07" }).fetch(
     `*[_type == "aksel_feedback" && $id in doc_ref->contributors[]->user_id.current]{_id, behandlet}`,
@@ -429,7 +416,7 @@ export const defaultDocumentNode = (S, { schemaType }) => {
         .options({
           url: (doc) => resolveProductionUrl(doc),
         })
-        .title("Forhåndsvinsing"),
+        .title("Forhåndsvisning"),
       S.view
         .component(FeedbackView)
         .icon(CommentIcon)

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

@@ -60,12 +60,13 @@ function defaultConfig() {
       },
     },
     document: {
-      newDocumentOptions: (prev, { currentUser }) =>
-        currentUser.roles.find((x) =>
-          ["developer", "administrator", "editor"].includes(x.name)
+      newDocumentOptions: (prev, { currentUser }) => {
+        return currentUser.roles.find((x) =>
+          ["developer", "administrator"].includes(x.name)
         )
-          ? [...getTemplates(currentUser.roles), ...prev]
-          : getTemplates(currentUser.roles),
+          ? [...getTemplates(prev), ...prev]
+          : getTemplates();
+      },
     },
     plugins: [
       deskTool({

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

@@ -3,7 +3,6 @@ import { BodyLong, Heading, Link } from "@navikt/ds-react";
 import { KBD } from "@sanity/ui";
 import { InlineCode } from "components/website-modules/InlineCode";
 import NextLink from "next/link";
-import { Role } from "sanity";
 
 export const toPlainText = (blocks) => {
   if (!blocks || blocks.length === 0) {
@@ -21,7 +20,7 @@ export const toPlainText = (blocks) => {
     .join("\n\n");
 };
 
-export const getTemplates = (roles: Role[]) => {
+export const getTemplates = (restTemplates: any[] = []) => {
   const templates = {
     profil: [
       {
@@ -78,17 +77,10 @@ export const getTemplates = (roles: Role[]) => {
       },
     ],
   };
-  return Object.values(templates).flat();
-  /* return [
-    ...roles
-      .map((role) => {
-        if (templates[role.name.replaceAll("-", "_")]) {
-          return templates[role.name.replaceAll("-", "_")];
-        }
-        return [];
-      })
-      .flat(),
-  ]; */
+
+  return Object.values(templates)
+    .flat()
+    .filter((x) => !restTemplates.find((y) => y.templateId === x.templateId));
 };
 
 export const serializers = {

examples/shadow-dom/main.tsx

@@ -18,7 +18,7 @@ class CustomComponent extends HTMLElement {
     this.attachShadow({ mode: "closed" }).appendChild(rootElement);
 
     ReactDOM.createRoot(appElement).render(
-      <Provider rootElement={rootElement} appElement={appElement}>
+      <Provider rootElement={rootElement}>
         <style>{styles}</style>
         <Button>Click me!</Button>
         <CheckboxGroup legend="Legend" defaultValue={["tekst2"]}>
@@ -41,7 +41,7 @@ const ModalWrapper = () => {
   return (
     <>
       <Button onClick={() => setIsOpen(true)}>Open modal</Button>
-      <Modal open={isOpen} onClose={() => setIsOpen(false)}>
+      <Modal portal open={isOpen} onClose={() => setIsOpen(false)}>
         <Modal.Body>modal content</Modal.Body>
       </Modal>
     </>

examples/shadow-dom/open.tsx

@@ -11,7 +11,7 @@ class CustomComponent extends HTMLElement {
     this.attachShadow({ mode: "open" }).appendChild(rootElement);
 
     ReactDOM.createRoot(appElement).render(
-      <Provider rootElement={rootElement} appElement={appElement}>
+      <Provider rootElement={rootElement}>
         <style>{styles}</style>
         <DateWrapper />
       </Provider>

examples/shadow-dom/package.json

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

fonts/LICENSE

@@ -0,0 +1,3 @@
+# Font License
+
+SIL Open Font License (OFL)

yarn.lock

@@ -3351,7 +3351,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@^5.0.2, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^5.0.3, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
   dependencies:
@@ -3378,8 +3378,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
   dependencies:
-    "@navikt/ds-css": ^5.0.2
-    "@navikt/ds-tokens": ^5.0.2
+    "@navikt/ds-css": ^5.0.3
+    "@navikt/ds-tokens": ^5.0.3
     "@types/jest": ^29.0.0
     concurrently: 7.2.1
     copyfiles: 2.4.1
@@ -3396,7 +3396,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel@workspace:@navikt/aksel"
   dependencies:
-    "@navikt/ds-css": 5.0.2
+    "@navikt/ds-css": 5.0.3
     "@types/inquirer": ^9.0.3
     "@types/jest": ^29.0.0
     axios: 1.3.6
@@ -3420,11 +3420,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@*, @navikt/ds-css@5.0.2, @navikt/ds-css@^5.0.2, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@5.0.3, @navikt/ds-css@^5.0.3, @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": ^5.0.2
+    "@navikt/ds-tokens": ^5.0.3
     cssnano: 6.0.0
     fast-glob: 3.2.11
     lodash: 4.17.21
@@ -3437,12 +3437,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/ds-react@5.0.2, @navikt/ds-react@^5.0.2, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@5.0.3, @navikt/ds-react@^5.0.3, @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": 0.24.1
-    "@navikt/aksel-icons": ^5.0.2
+    "@navikt/aksel-icons": ^5.0.3
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -3476,11 +3476,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^5.0.2, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^5.0.3, @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": ^5.0.2
+    "@navikt/ds-tokens": ^5.0.3
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -3491,7 +3491,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^5.0.2, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^5.0.3, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -8033,11 +8033,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/aksel-icons": ^5.0.2
-    "@navikt/ds-css": ^5.0.2
-    "@navikt/ds-react": ^5.0.2
-    "@navikt/ds-tailwind": ^5.0.2
-    "@navikt/ds-tokens": ^5.0.2
+    "@navikt/aksel-icons": ^5.0.3
+    "@navikt/ds-css": ^5.0.3
+    "@navikt/ds-react": ^5.0.3
+    "@navikt/ds-tailwind": ^5.0.3
+    "@navikt/ds-tokens": ^5.0.3
     prettier-plugin-tailwindcss: ^0.2.3
   languageName: unknown
   linkType: soft
@@ -22026,8 +22026,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "shadow-dom@workspace:examples/shadow-dom"
   dependencies:
-    "@navikt/ds-css": 5.0.2
-    "@navikt/ds-react": 5.0.2
+    "@navikt/ds-css": 5.0.3
+    "@navikt/ds-react": 5.0.3
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": ^3.1.0