Oppdater stories for Link (#2770 )

💄 UXTweaks-hero på forside bruker Amber-farger
Designer ønsket å gjøre hero mer tydelig da dagens 'violet' forsvant mellom elementene
2026-10-15 10:12:03 +00:00 · 2024-03-01 20:00:18 +01:00 · 2024-02-29 19:33:30 +01:00 · 2024-02-29 12:21:22 +01:00 · 2024-02-28 15:18:25 +01:00 · 2024-02-27 15:02:02 +01:00
55 changed files with 34919 additions and 34388 deletions
@@ -72,7 +72,6 @@ module.exports = {
          "error",
          "aksel.nav.no/website/pages/",
        ],
-        "@typescript-eslint/ban-ts-comment": "off", // Temporary
      },
    },
    {
@@ -29,6 +29,7 @@ export default {
        },
      },
    },
+    "storybook-addon-pseudo-states",
  ],
  framework: {
    name: "@storybook/react-vite",
@@ -1,5 +1,7 @@
 # @navikt/aksel-icons

+## 6.1.1
+
 ## 6.1.0

 ## 6.0.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "6.1.0",
+  "version": "6.1.1",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,7 @@
 # @navikt/aksel-stylelint

+## 6.1.1
+
 ## 6.1.0

 ## 6.0.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "6.1.0",
+  "version": "6.1.1",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,10 +35,9 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^6.1.0",
-    "@navikt/ds-tokens": "^6.1.0",
+    "@navikt/ds-css": "^6.1.1",
+    "@navikt/ds-tokens": "^6.1.1",
    "concurrently": "7.2.1",
-    "copyfiles": "2.4.1",
    "postcss-selector-parser": "^6.0.13",
    "postcss-value-parser": "^4.2.0",
    "stylelint": "^14.8.5",
@@ -1,5 +1,12 @@
 # @navikt/aksel

+## 6.1.1
+
+### Patch Changes
+
+- Updated dependencies [[`9510327ab`](https://github.com/navikt/aksel/commit/9510327abe96142943c6e92bd7c7da93a9721fd5), [`3d2eab4fd`](https://github.com/navikt/aksel/commit/3d2eab4fda07cac8071822e1f8e8fc5f69e7d234)]:
+  - @navikt/ds-css@6.1.1
+
 ## 6.1.0

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "6.1.0",
+  "version": "6.1.1",
  "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": "6.1.0",
+    "@navikt/ds-css": "6.1.1",
    "axios": "1.6.0",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,13 @@
 # @navikt/ds-css

+## 6.1.1
+
+### Patch Changes
+
+- Link: Fjern hover-farge ([#2767](https://github.com/navikt/aksel/pull/2767))
+
+- Modal: Får nå fokus når åpnes i Safari ([#2688](https://github.com/navikt/aksel/pull/2688))
+
 ## 6.1.0

 ## 6.0.0
@@ -20,7 +20,6 @@

 .navds-link:hover {
  text-decoration: none;
-  color: var(--ac-link-hover-text, var(--a-text-action-hover));
 }

 .navds-link.navds-link--remove-underline {
@@ -146,7 +146,7 @@

@keyframes akselModalFadeIn {
  from {
-    opacity: 0;
+    opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
    transform: translate3d(0, calc(5% + 4px), 0);
  }

@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "6.1.0",
+  "version": "6.1.1",
  "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": "^6.1.0",
+    "@navikt/ds-tokens": "^6.1.1",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -174,7 +174,6 @@
  },
  "link": {
    "--ac-link-text": "--a-text-action",
-    "--ac-link-hover-text": "--a-text-action-hover",
    "--ac-link-focus-text": "--a-text-on-action",
    "--ac-link-focus-bg": "--a-border-focus",
    "--ac-link-focus-border": "--a-border-focus",
@@ -1,5 +1,17 @@
 # @navikt/ds-react

+## 6.1.1
+
+### Patch Changes
+
+- Modal: Fikser uønsket lukking ved klikk-og-dra mellom backdrop og modal (f.eks. ved markering av tekst) dersom `closeOnBackdropClick` er `true`. ([#2752](https://github.com/navikt/aksel/pull/2752))
+
+- Modal: Endre title på lukkeknapp til bare 'Lukk' ([#2688](https://github.com/navikt/aksel/pull/2688))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@6.1.1
+  - @navikt/aksel-icons@6.1.1
+
 ## 6.1.0

 ### Minor Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "6.1.0",
+  "version": "6.1.1",
  "description": "React components from the Norwegian Labour and Welfare Administration.",
  "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
  "license": "MIT",
@@ -552,8 +552,8 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^6.1.0",
-    "@navikt/ds-tokens": "^6.1.0",
+    "@navikt/aksel-icons": "^6.1.1",
+    "@navikt/ds-tokens": "^6.1.1",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^2.1.0",
@@ -567,7 +567,6 @@
    "@testing-library/user-event": "^14.2.0",
    "@types/faker": "5.5.8",
    "concurrently": "7.2.1",
-    "copyfiles": "^2.4.1",
    "faker": "5.5.3",
    "fast-glob": "3.2.11",
    "jsdom": "24.0.0",
@@ -1,15 +1,22 @@
+import { Meta } from "@storybook/react";
 import React from "react";
 import { PlusCircleFillIcon } from "@navikt/aksel-icons";
 import { Alert } from "../../alert";
 import { ConfirmationPanel } from "../../form/confirmation-panel";
+import { Box } from "../../layout/box";
+import { VStack } from "../../layout/stack";
 import { BodyLong } from "../../typography";
 import Link from "../Link";
 import { RandomIcon } from "./RandomIcon";

-export default {
+const meta: Meta<typeof Link> = {
  title: "ds-react/Link",
  component: Link,
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
+export default meta;

 const LinkWrapper = ({
  children = "Ex aliqua incididunt",
@@ -27,53 +34,38 @@ const LinkWrapper = ({
      variant={variant as "action" | "neutral" | "subtle"}
      inlineText={inlineText}
    >
-      {iconLeft && (
-        <>
-          <RandomIcon />{" "}
-        </>
-      )}
+      {iconLeft && <RandomIcon />}
      {children}
-      {iconRight && (
-        <>
-          {" "}
-          <RandomIcon />
-        </>
-      )}
+      {iconRight && <RandomIcon />}
    </Link>{" "}
  </>
 );

 export const Default = {
-  render: ({ icon, inline }) => {
+  render: ({ icon, inline, underline }) => {
    const LinkD = () => (
-      <>
-        {" "}
-        <Link href="#" underline={!inline} inlineText={inline}>
-          {icon && <PlusCircleFillIcon />}Ex aliqua incididunt
-          {icon && <PlusCircleFillIcon />}
-        </Link>{" "}
-      </>
+      <Link href="#" underline={underline} inlineText={inline}>
+        {icon && <PlusCircleFillIcon />}Ex aliqua incididunt
+        {icon && <PlusCircleFillIcon />}
+      </Link>
    );

    if (inline) {
      return (
-        <div
-          className="colgap"
-          style={{
-            width: "800px",
-            border: "1px solid black",
-            borderRadius: "8px",
-          }}
+        <Box
+          borderWidth="1"
+          borderRadius="large"
+          padding="4"
+          style={{ maxWidth: "800px" }}
        >
          <BodyLong>
-            Incididunt laborum nisi nisi Lorem
-            <LinkD />
-            in. Laborum aute fugiat officia adipisicing non veniam dolor nulla
-            non ex consectetur fugiat eiusmod aute. Culpa sit aute est duis
-            minim in in voluptate velit fugiat. Laboris est id deserunt ut ea
-            Lorem eu. Esse elit laboris aute commodo sint laborum fugiat aliqua.
+            Incididunt laborum nisi nisi Lorem <LinkD /> in. Laborum aute fugiat
+            officia adipisicing non veniam dolor nulla non ex consectetur fugiat
+            eiusmod aute. Culpa sit aute est duis minim in in voluptate velit
+            fugiat. Laboris est id deserunt ut ea Lorem eu. Esse elit laboris
+            aute commodo sint laborum fugiat aliqua.
          </BodyLong>
-        </div>
+        </Box>
      );
    }
    return <LinkD />;
@@ -82,22 +74,21 @@ export const Default = {
  args: {
    icon: false,
    inline: false,
+    underline: true,
  },
 };

 export const InlineInsideBodyLong = {
  render: ({ iconLeft, iconRight }) => {
    return (
-      <div
-        className="colgap"
-        style={{
-          width: "800px",
-          border: "1px solid black",
-          borderRadius: "8px",
-        }}
+      <Box
+        borderWidth="1"
+        borderRadius="large"
+        padding="4"
+        style={{ width: "800px" }}
      >
        <style>{`.storybook-custom-spacing { white-space: pre;}`}</style>
-        <BodyLong>
+        <BodyLong spacing>
          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight} />
          Eiusmod aute.
          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight} />
@@ -119,7 +110,7 @@ export const InlineInsideBodyLong = {
          </LinkWrapper>
          {"     "}spacing.
        </BodyLong>
-      </div>
+      </Box>
    );
  },
  args: {
@@ -128,86 +119,186 @@ export const InlineInsideBodyLong = {
  },
 };

-const DemoLink = () => (
+export const Varianter = {
+  render: ({ iconLeft, iconRight }) => {
+    return (
+      <VStack gap="3">
+        {["action", "neutral", "subtle"].map((variant) => (
+          <div key={variant}>
+            <LinkWrapper
+              iconLeft={iconLeft}
+              iconRight={iconRight}
+              variant={variant}
+            />
+          </div>
+        ))}
+      </VStack>
+    );
+  },
+  args: {
+    iconLeft: false,
+    iconRight: false,
+  },
+};
+
+const LinkWithIcon = () => (
  <Link href="#">
-    <PlusCircleFillIcon aria-hidden /> Ex aliqua incididunt{" "}
+    <PlusCircleFillIcon aria-hidden />
+    Ex aliqua incididunt
    <PlusCircleFillIcon aria-hidden />
  </Link>
 );

-export const Icon = () => <DemoLink />;
+export const Icon = () => <LinkWithIcon />;

-export const InAlert = () => {
-  return (
-    <div className="colgap">
-      <Alert variant="info">
-        <DemoLink />
-      </Alert>
-      <Alert variant="success">
-        <DemoLink />
-      </Alert>
-      <Alert variant="warning">
-        <DemoLink />
-      </Alert>
-      <Alert variant="error">
-        <DemoLink />
-      </Alert>
-    </div>
-  );
-};
-
-export const InConfirmationPanel = () => {
-  return (
-    <div className="colgap">
-      <ConfirmationPanel label="demo">
-        <DemoLink />
-      </ConfirmationPanel>
-      <ConfirmationPanel checked label="demo">
-        <DemoLink />
-      </ConfirmationPanel>
-      <ConfirmationPanel error="demo" label="demo">
-        <DemoLink />
-      </ConfirmationPanel>
-    </div>
-  );
-};
-
-export const Variants = {
-  render: ({ iconLeft, iconRight }) => {
-    return (
-      <div className="colgap">
-        {["action", "neutral", "subtle"].map((variant) => (
-          <>
-            <div>
-              <LinkWrapper
-                iconLeft={iconLeft}
-                iconRight={iconRight}
-                variant={variant}
-              />
-            </div>
-          </>
-        ))}
+const Variants = () => (
+  <VStack gap="3">
+    {["action", "neutral", "subtle"].map((variant) => (
+      <div key={variant}>
+        <LinkWrapper variant={variant} />
      </div>
-    );
-  },
-  args: {
-    iconLeft: false,
-    iconRight: false,
-  },
-};
+    ))}
+  </VStack>
+);

-export const InlineLink = {
-  render: () => (
-    <BodyLong>
-      Officia incididunt Culpa sit aute est duis minim in in voluptate velit
-      Incididunt laborum nisi nisi Lorem officia adipisicing non veniam{" "}
-      <Link href="#" inlineText={true}>
-        lenke til ny side
+export const Chromatic = () => (
+  <>
+    <h2>Default</h2>
+    <Link href="#">Ex aliqua incididunt</Link>
+
+    <h2>With icon</h2>
+    <LinkWithIcon />
+
+    <h2>Variants (no underline)</h2>
+    <Variants />
+
+    <h2>Inline</h2>
+    <BodyLong style={{ width: 500 }}>
+      Culpa sit aute est duis minim in in voluptate{" "}
+      <Link href="#" inlineText>
+        dette er en veldig lang lenke som brekker over flere linjer
        <PlusCircleFillIcon aria-hidden />
      </Link>{" "}
      Culpa sit aute est duis minim in in voluptate velit Incididunt laborum
-      nisi nisi Lorem officia adipisicing non veniam occaecat commodo id ad
-      aliquip.
+      nisi nisi{" "}
+      <Link href="#" inlineText>
+        dette er en veldig lang lenke som brekker over flere linjer
+      </Link>{" "}
+      Lorem officia adipisicing non veniam occaecat commodo id ad aliquip.
    </BodyLong>
-  ),
+
+    <h2>In Alert</h2>
+    <div className="colgap">
+      <Alert variant="info">
+        <LinkWithIcon />
+      </Alert>
+      <Alert variant="success">
+        <LinkWithIcon />
+      </Alert>
+      <Alert variant="warning">
+        <LinkWithIcon />
+      </Alert>
+      <Alert variant="error">
+        <LinkWithIcon />
+      </Alert>
+    </div>
+
+    <h2>In ConfirmationPanel</h2>
+    <div className="colgap">
+      <ConfirmationPanel label="demo">
+        <LinkWithIcon />
+      </ConfirmationPanel>
+      <ConfirmationPanel checked label="demo">
+        <LinkWithIcon />
+      </ConfirmationPanel>
+      <ConfirmationPanel error="demo" label="demo">
+        <LinkWithIcon />
+      </ConfirmationPanel>
+    </div>
+  </>
+);
+Chromatic.parameters = { chromatic: { disable: false } };
+
+export const ChromaticHover = () => (
+  <>
+    <h2>With icon</h2>
+    <LinkWithIcon />
+
+    <h2>Variants (no underline)</h2>
+    <Variants />
+
+    <h2>In Alert</h2>
+    <div className="colgap">
+      <Alert variant="info">
+        <LinkWithIcon />
+      </Alert>
+    </div>
+
+    <h2>In ConfirmationPanel</h2>
+    <div className="colgap">
+      <ConfirmationPanel checked label="demo">
+        <LinkWithIcon />
+      </ConfirmationPanel>
+    </div>
+  </>
+);
+ChromaticHover.parameters = {
+  chromatic: { disable: false },
+  pseudo: { hover: true },
+};
+
+export const ChromaticFocusVisible = () => (
+  <>
+    <h2>With icon</h2>
+    <LinkWithIcon />
+
+    <h2>Variants (no underline)</h2>
+    <Variants />
+
+    <h2>In Alert</h2>
+    <div className="colgap">
+      <Alert variant="info">
+        <LinkWithIcon />
+      </Alert>
+    </div>
+
+    <h2>In ConfirmationPanel</h2>
+    <div className="colgap">
+      <ConfirmationPanel checked label="demo">
+        <LinkWithIcon />
+      </ConfirmationPanel>
+    </div>
+  </>
+);
+ChromaticFocusVisible.parameters = {
+  chromatic: { disable: false },
+  pseudo: { focusVisible: true },
+};
+
+export const ChromaticActive = () => (
+  <>
+    <h2>With icon</h2>
+    <LinkWithIcon />
+
+    <h2>Variants (no underline)</h2>
+    <Variants />
+
+    <h2>In Alert</h2>
+    <div className="colgap">
+      <Alert variant="info">
+        <LinkWithIcon />
+      </Alert>
+    </div>
+
+    <h2>In ConfirmationPanel</h2>
+    <div className="colgap">
+      <ConfirmationPanel checked label="demo">
+        <LinkWithIcon />
+      </ConfirmationPanel>
+    </div>
+  </>
+);
+ChromaticActive.parameters = {
+  chromatic: { disable: false },
+  pseudo: { active: true },
 };
@@ -12,7 +12,12 @@ import { ModalContextProvider, useModalContext } from "./Modal.context";
 import ModalBody from "./ModalBody";
 import ModalFooter from "./ModalFooter";
 import ModalHeader from "./ModalHeader";
-import { getCloseHandler, useBodyScrollLock } from "./ModalUtils";
+import {
+  MouseCoordinates,
+  coordsAreInside,
+  getCloseHandler,
+  useBodyScrollLock,
+} from "./ModalUtils";
 import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
 import { ModalProps } from "./types";

@@ -86,6 +91,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
      "aria-labelledby": ariaLabelledby,
      style,
      onClick,
+      onMouseDown,
      ...rest
    }: ModalProps,
    ref,
@@ -146,18 +152,42 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
      ...(!isWidthPreset ? { width } : {}),
    };

+    const mouseClickStart = useRef<MouseCoordinates>({
+      clientX: 0,
+      clientY: 0,
+    });
+    const handleModalMouseDown: React.MouseEventHandler<HTMLDialogElement> = (
+      event,
+    ) => {
+      mouseClickStart.current = event;
+    };
+
+    const shouldHandleModalClick = closeOnBackdropClick && !needPolyfill;
+
    /**
     * @note `closeOnBackdropClick` has issues on polyfill when nesting modals (DatePicker)
     */
-    const handleModalClick = (event: React.MouseEvent<HTMLDialogElement>) => {
-      if (
-        closeOnBackdropClick &&
-        !needPolyfill &&
-        event.target === modalRef.current &&
-        (!onBeforeClose || onBeforeClose() !== false)
-      ) {
-        modalRef.current.close();
+    const handleModalClick = (
+      endEvent: React.MouseEvent<HTMLDialogElement>,
+    ) => {
+      if (endEvent.target !== modalRef.current) {
+        return;
      }
+
+      const modalRect = modalRef.current.getBoundingClientRect();
+
+      if (
+        coordsAreInside(mouseClickStart.current, modalRect) ||
+        coordsAreInside(endEvent, modalRect)
+      ) {
+        return;
+      }
+
+      if (onBeforeClose !== undefined && onBeforeClose() === false) {
+        return;
+      }
+
+      modalRef.current.close();
    };

    /**
@@ -182,7 +212,16 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
        className={mergedClassName}
        style={mergedStyle}
        onCancel={composeEventHandlers(onCancel, handleModalCancel)}
-        onClick={composeEventHandlers(onClick, handleModalClick)}
+        onClick={
+          shouldHandleModalClick
+            ? composeEventHandlers(onClick, handleModalClick)
+            : onClick
+        }
+        onMouseDown={
+          shouldHandleModalClick
+            ? composeEventHandlers(onMouseDown, handleModalMouseDown)
+            : onMouseDown
+        }
        aria-labelledby={mergedAriaLabelledBy}
      >
        <ModalContextProvider
@@ -26,7 +26,7 @@ const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
            size="small"
            variant="tertiary-neutral"
            onClick={context.closeHandler}
-            icon={<XMarkIcon title="Lukk modalvindu" />}
+            icon={<XMarkIcon title="Lukk" />}
          />
        )}
        {children}
@@ -1,6 +1,20 @@
 import React from "react";
 import type { ModalProps } from "./types";

+export interface MouseCoordinates {
+  clientX: number;
+  clientY: number;
+}
+
+export const coordsAreInside = (
+  { clientX, clientY }: MouseCoordinates,
+  { left, top, right, bottom }: DOMRect,
+) => {
+  if (clientX < left || clientY < top) return false;
+  if (clientX > right || clientY > bottom) return false;
+  return true;
+};
+
 export function getCloseHandler(
  modalRef: React.RefObject<HTMLDialogElement>,
  header: ModalProps["header"],
@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind

+## 6.1.1
+
 ## 6.1.0

 ## 6.0.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "6.1.0",
+  "version": "6.1.1",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -25,7 +25,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^6.1.0",
+    "@navikt/ds-tokens": "^6.1.1",
    "color": "4.2.3",
    "lodash": "^4.17.21",
    "tailwindcss": "^3.3.3",
@@ -1,5 +1,7 @@
 # @navikt/ds-tokens

+## 6.1.1
+
 ## 6.1.0

 ## 6.0.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "6.1.0",
+  "version": "6.1.1",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -2,13 +2,23 @@

 ## 6.1

+### @navikt/ds-css
+
+- Link: Fjern hover-farge ([#2767](https://github.com/navikt/aksel/pull/2767))
+
+- Modal: Får nå fokus når åpnes i Safari ([#2688](https://github.com/navikt/aksel/pull/2688))
+
 ### @navikt/ds-react

- Komponenter støtter nå lokal import `@navikt/ds-react/Button`, [Dokumentasjon](https://aksel.nav.no/grunnleggende/kode/nextjs). ([#2745](https://github.com/navikt/aksel/pull/2745))
+- Modal: Fikser uønsket lukking ved klikk-og-dra mellom backdrop og modal (f.eks. ved markering av tekst) dersom `closeOnBackdropClick` er `true`. ([#2752](https://github.com/navikt/aksel/pull/2752))

-* Modal: Bedre feilmeldinger ved feil bruk av props ([#2744](https://github.com/navikt/aksel/pull/2744))
+- Modal: Endre title på lukkeknapp til bare 'Lukk' ([#2688](https://github.com/navikt/aksel/pull/2688))

-* Modal: Ikke opphev scroll lock ved lukking av nesta modal (DatePicker) ([#2743](https://github.com/navikt/aksel/pull/2743))
+* Komponenter støtter nå lokal import `@navikt/ds-react/Button`, [Dokumentasjon](https://aksel.nav.no/grunnleggende/kode/nextjs). ([#2745](https://github.com/navikt/aksel/pull/2745))
+
+- Modal: Bedre feilmeldinger ved feil bruk av props ([#2744](https://github.com/navikt/aksel/pull/2744))
+
+- Modal: Ikke opphev scroll lock ved lukking av nesta modal (DatePicker) ([#2743](https://github.com/navikt/aksel/pull/2743))

 ## 6.0

@@ -15,10 +15,10 @@
    "playroom"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^6.1.0",
-    "@navikt/ds-css": "^6.1.0",
-    "@navikt/ds-react": "^6.1.0",
-    "@navikt/ds-tailwind": "^6.1.0",
-    "@navikt/ds-tokens": "^6.1.0"
+    "@navikt/aksel-icons": "^6.1.1",
+    "@navikt/ds-css": "^6.1.1",
+    "@navikt/ds-react": "^6.1.1",
+    "@navikt/ds-tailwind": "^6.1.1",
+    "@navikt/ds-tokens": "^6.1.1"
  }
 }
@@ -8,7 +8,7 @@ const path = require("path");
 module.exports = {
  baseUrl: "./",
  components: path.resolve("./src/components.ts"),
-  outputPath: path.resolve("./dist"),
+  outputPath: path.resolve("./dist/sandbox"),
  // Optional:
  title: "Aksel Sandbox",
  snippets: path.resolve("./src/snippets.ts"),
@@ -20,7 +20,7 @@ export const CodeSandbox = ({ code }: { code: string }) => {
  const parameters = getParameters({
    files: {
      "package.json": {
-        // @ts-expect-error
+        // @ts-expect-error https://github.com/codesandbox/codesandbox-importers/issues/137
        content: {
          dependencies: {
            react: "latest",
@@ -7,20 +7,7 @@
  --ac-accordion-item-bg-open: var(--a-deepblue-800);
 }

-/* Override bug i sanity-ui */
-/* stylelint-disable-next-line aksel/no-class-override */
-#sanity-wrapper
-  .navds-accordion
-  svg.navds-accordion__expand-icon--filled:not([data-ui="Popover__arrow"]):not([data-ui="Tooltip__arrow"]) {
-  display: none;
-}
-
-/* stylelint-disable-next-line aksel/no-class-override */
-.aksel-admin.aksel-admin svg[focusable="false"] {
-  font-size: calc(30 / 16 * 1em);
-}
-
-/* stylelint-disable-next-line aksel/no-class-override */
-.aksel-admin.aksel-admin :where(.navds-button, .navds-copybutton) svg[focusable="false"] {
-  font-size: inherit;
+/* Scales use of custom icon-use to same size as sanity-native icons */
+.aksel-admin svg:not([data-sanity-icon]) {
+  font-size: calc(21 / 16 * 1em);
 }
@@ -6,6 +6,7 @@ const KBD = (props: React.HTMLAttributes<HTMLElement>) => (
      "mx-05 my-0 inline-block min-w-[2rem] rounded-md px-2 py-[1px] text-center font-mono text-sm text-gray-900 ring-1 ring-inset ring-border-subtle",
      "bg-gradient-to-b from-surface-default via-surface-default to-surface-neutral-subtle",
      "group-active:from-gray-700 group-active:via-gray-700 group-active:to-gray-900 group-active:text-text-on-inverted group-active:ring-grayalpha-400",
+      "via-gray-800 to-gray-700 dark:from-gray-800 dark:text-white",
    )}
  >
    <span className="kbd">{props.children}</span>
@@ -19,9 +19,7 @@ export const UxTweaks = ({ href, length, ...rest }: UxTweaksProps) => {
      <Box
        padding="6"
        borderRadius="xlarge"
-        borderWidth="1"
-        borderColor="border-subtle"
-        className="space-y-3 bg-violet-50"
+        className="space-y-3 bg-amber-200 ring-1 ring-amber-700"
        as="aside"
        role="presentation"
      >
@@ -9,12 +9,12 @@
    "build:old": "next build",
    "build": "yarn workspace playroom build:playroom && next build && yarn update:searchindex && yarn update:rss && yarn cp:assets",
    "start": "cd .next/standalone/aksel.nav.no/website && PORT=3000 HOSTNAME=0.0.0.0 node server.js",
-    "cp:playroom": "cross-env mkdir -p public/sandbox && cross-env cp -R ../playroom/dist/* public/sandbox",
-    "cp:static": "cross-env cp -R .next/static .next/standalone/aksel.nav.no/website/.next/static",
-    "cp:public": "cross-env cp -R public .next/standalone/aksel.nav.no/website/",
+    "cp:playroom": "copyfiles -E -u 3 '../playroom/dist/sandbox/**' public/",
+    "cp:static": "copyfiles -E -u 1 '.next/static/**' .next/standalone/aksel.nav.no/website/.next/",
+    "cp:public": "copyfiles -E 'public/**' .next/standalone/aksel.nav.no/website/",
    "cp:assets": "yarn cp:playroom && yarn cp:public && yarn cp:static",
    "update:searchindex": "ts-node --project tsconfig.json ./scripts/create-index",
-    "e2e": "yarn build && yarn start-server-and-test start http://localhost:3000 playwright",
+    "e2e": "yarn build && yarn start-server-and-test 'yarn start' http://localhost:3000 'yarn playwright'",
    "e2e:full": "yarn build && ts-node ./e2e/genUrls.ts && FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
    "e2e:ci-full": "ts-node ./e2e/genUrls.ts && FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
    "update:rss": "ts-node --project tsconfig.tsnode.json ./scripts/generate-rss-feed",
@@ -33,12 +33,13 @@
  "dependencies": {
    "@amplitude/analytics-browser": "^2.2.3",
    "@portabletext/react": "^3.0.11",
-    "@sanity/client": "^6.8.6",
-    "@sanity/code-input": "4.1.1",
+    "@sanity/client": "^6.13.3",
+    "@sanity/code-input": "4.1.2",
    "@sanity/color-input": "^3.1.0",
    "@sanity/image-url": "1.0.2",
-    "@sanity/table": "1.0.1",
-    "@sanity/vision": "3.20.0",
+    "@sanity/locale-nb-no": "^1.1.0",
+    "@sanity/table": "1.1.2",
+    "@sanity/vision": "3.29.1",
    "boring-avatars": "1.10.1",
    "clsx": "^2.1.0",
    "codesandbox": "^2.2.3",
@@ -55,10 +56,10 @@
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-responsive-masonry": "^2.1.7",
-    "sanity": "3.20.0",
+    "sanity": "3.29.1",
    "sanity-plugin-asset-source-unsplash": "^1.1.2",
-    "sanity-plugin-media": "^2.2.4",
-    "sanity-plugin-utils": "^1.6.2",
+    "sanity-plugin-media": "^2.2.5",
+    "sanity-plugin-utils": "^1.6.4",
    "sharp": "0.32.6",
    "styled-components": "^6.0.0",
    "swr": "^1.1.2",
@@ -71,12 +72,13 @@
    "@next/bundle-analyzer": "14.1.1-canary.57",
    "@next/eslint-plugin-next": "14.1.1-canary.57",
    "@playwright/test": "1.35.1",
-    "@sanity/block-tools": "^3.20.0",
-    "@sanity/schema": "^3.20.0",
+    "@sanity/block-tools": "^3.29.1",
+    "@sanity/schema": "^3.29.1",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "autoprefixer": "^10.4.0",
    "babel-loader": "^8.2.0",
+    "copyfiles": "^2.4.1",
    "cross-env": "^7.0.0",
    "dotenv": "^10.0.0",
    "jsdom": "^22.1.0",
@@ -87,7 +89,7 @@
    "postcss-loader": "7.0.0",
    "rss": "^1.2.2",
    "showdown": "^2.1.0",
-    "start-server-and-test": "^1.14.0",
+    "start-server-and-test": "^2.0.3",
    "ts-node": "^10.9.1",
    "typescript": "^5.1.6",
    "vitest": "^1.2.2"
@@ -15,4 +15,5 @@ export const Demo = {

 export const args = {
  index: 3,
+  desc: "Label må være meningsfull selv om den skjules, siden den fortsatt leses av skjermlesere.",
 };
@@ -15,4 +15,5 @@ export const Demo = {

 export const args = {
  index: 98,
+  desc: "Readonly-attributtet gjør at verdien ikke kan endres, men brukere vil fortsatt kunne markere og kopiere fra feltet. Til forskjell fra disabled-felter vil brukere også kunne tabbe til det, og feltet vil inkluderes når skjemaet sendes inn.",
 };
@@ -15,4 +15,5 @@ export const Demo = {

 export const args = {
  index: 1,
+  desc: "Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.",
 };
@@ -1,5 +1,5 @@
 import { definePlugin } from "sanity";
-import { deskTool } from "sanity/desk";
+import { structureTool } from "sanity/structure";
 import { publicationFlow } from "../publication-flow";
 import innholdsType from "./documents/innholdstype";
 import tema from "./documents/tema";
@@ -47,7 +47,7 @@ export const godPraksisTaxonomy = definePlugin(() => {
      ],
    },
    plugins: [
-      deskTool({
+      structureTool({
        name: "aksel_taxonomy",
        title: "Aksel Taxonomy",
        structure,
@@ -1,5 +1,8 @@
 import { CurrentUser } from "sanity";
-import { DefaultDocumentNodeResolver, StructureResolver } from "sanity/desk";
+import {
+  DefaultDocumentNodeResolver,
+  StructureResolver,
+} from "sanity/structure";
 import { SANITY_API_VERSION } from "@/sanity/config";

 const adminOrDev = (user: CurrentUser) =>
@@ -1,4 +1,4 @@
-import { StructureBuilder } from "sanity/desk";
+import { StructureBuilder } from "sanity/structure";
 import { FileXMarkIcon, TagIcon } from "@navikt/aksel-icons";
 import { SANITY_API_VERSION } from "@/sanity/config";

@@ -1,5 +1,5 @@
 import { differenceInMonths } from "date-fns";
-import { StructureResolver } from "sanity/desk";
+import { StructureResolver } from "sanity/structure";
 import {
  CircleSlashIcon,
  ComponentIcon,
@@ -1,11 +1,12 @@
 import { codeInput } from "@sanity/code-input";
 import { colorInput } from "@sanity/color-input";
+import { nbNOLocale } from "@sanity/locale-nb-no";
 import { table } from "@sanity/table";
 import { visionTool } from "@sanity/vision";
 import { defineConfig } from "sanity";
 import { unsplashImageAsset } from "sanity-plugin-asset-source-unsplash";
 import { media } from "sanity-plugin-media";
-import { deskTool } from "sanity/desk";
+import { structureTool } from "sanity/structure";
 import { DatabaseIcon, TestFlaskIcon } from "@navikt/aksel-icons";
 import { SANITY_API_VERSION, SANITY_PROJECT_ID } from "./config";
 import { defaultDocumentNode, publicationFlow, structure } from "./plugins";
@@ -74,12 +75,9 @@ function defaultConfig() {
        }
        return prev;
      },
-      unstable_comments: {
-        enabled: true,
-      },
    },
    plugins: [
-      deskTool({
+      structureTool({
        title: "Editor",
        structure,
        defaultDocumentNode,
@@ -93,6 +91,7 @@ function defaultConfig() {
      visionTool(),
      unsplashImageAsset(),
      colorInput(),
+      nbNOLocale(),
    ],
  };
 }
@@ -48,13 +48,13 @@ const DocumentList = ({
              <IntentButton
                intent="edit"
                mode="bleed"
-                padding={1}
-                radius={2}
+                paddingY={1}
                params={{
                  type,
                  id: getPublishedId(x._id),
                }}
                style={{ width: "100%" }}
+                tooltipProps={{ content: "Rediger artikkel" }}
              >
                <Preview schemaType={schemaType} value={x} key={x._id} />
              </IntentButton>
@@ -95,13 +95,13 @@ const OutDatedList = ({ data }: { data: any[] }) => {
              <IntentButton
                intent="edit"
                mode="ghost"
-                padding={1}
-                radius={0}
+                paddingY={1}
                params={{
                  type: x._type,
                  id: getPublishedId(x._id),
                }}
                style={{ width: "100%" }}
+                tooltipProps={{ content: "Rediger artikkel" }}
              >
                <Preview
                  layout="default"
@@ -136,13 +136,13 @@ const DraftList = ({ data }: { data: any[] }) => {
              <IntentButton
                intent="edit"
                mode="ghost"
-                padding={1}
-                radius={0}
+                paddingY={1}
                params={{
                  type: x._type,
                  id: getPublishedId(x._id),
                }}
                style={{ width: "100%" }}
+                tooltipProps={{ content: "Rediger artikkel" }}
              >
                <Preview
                  layout="default"
@@ -13,7 +13,7 @@ export function InputWithCounter(
    <VStack gap="1">
      {props.renderDefault(props)}
      <Counter
-        // @ts-ignore
+        // @ts-expect-error - maxLength is a custom prop not officially supported
        maxLength={schemaType?.options?.maxLength}
        currentLength={value?.length ?? 0}
      />
@@ -48,13 +48,13 @@ export function TemaView() {
          key={x._id}
          intent="edit"
          mode="ghost"
-          padding={1}
-          radius={0}
+          paddingY={1}
          params={{
            type: "aksel_artikkel",
            id: getPublishedId(x._id),
          }}
          style={{ width: "100%" }}
+          tooltipProps={{ content: "Rediger artikkel" }}
        >
          <Preview layout="default" schemaType={type} value={x} key={x._id} />
        </IntentButton>
@@ -29,7 +29,7 @@ export const Tema = defineType({
      group: "innhold",

      options: {
-        // @ts-expect-error
+        // @ts-expect-error - maxLength is a custom prop not officially supported
        maxLength: 130,
      },
      validation: (Rule) =>
@@ -31,9 +31,9 @@ export const artikkelPreview = (_type: string) => {
            }`,
            media: () =>
              isAfter(updateInfo) ? (
-                <FileResetIcon aria-hidden style={{ fontSize: "4rem" }} />
+                <FileResetIcon aria-hidden />
              ) : (
-                <FileTextIcon />
+                <FileTextIcon aria-hidden />
              ),
          };
        }
@@ -13,7 +13,7 @@ export const ingressField = defineField({
      .max(210)
      .error("Side må ha en ingress og kortere enn 210 tegn."),
  options: {
-    //@ts-ignore
+    //@ts-expect-error - maxLength is a custom prop not officially supported
    maxLength: 210,
  },
 });
@@ -26,7 +26,7 @@ const BaseSEOPreset = {
      description: "Erstatter ingress som OG-description og meta-tag",
      rows: 3,
      options: {
-        // @ts-expect-error
+        // @ts-expect-error - maxLength is a custom prop not officially supported
        maxLength: 160,
      },
    }),
@@ -12,7 +12,7 @@ export const titleField = defineField({
    Rule.max(60).error("Sidetittel kan ikke være over 60 tegn"),
  ],
  options: {
-    //@ts-ignore
+    //@ts-expect-error - maxLength is a custom prop not officially supported
    maxLength: 60,
  },
 });
@@ -14,7 +14,6 @@ export const Publiseringsflyt = defineType({
      of: [
        {
          ...block,
-          // @ts-expect-error
          styles: [...headingStyles],
        },
      ],
@@ -28,7 +27,6 @@ export const Publiseringsflyt = defineType({
      of: [
        {
          ...block,
-          // @ts-expect-error
          styles: [...headingStyles],
        },
      ],
@@ -42,7 +40,6 @@ export const Publiseringsflyt = defineType({
      of: [
        {
          ...block,
-          // @ts-expect-error
          styles: [...headingStyles],
        },
      ],
@@ -14,7 +14,6 @@ export const Skrivehjelp = defineType({
      of: [
        {
          ...block,
-          // @ts-expect-error
          styles: [...headingStyles],
        },
      ],
@@ -24,7 +24,7 @@ export const styles = [

 export const block = {
  title: "Block",
-  type: "block",
+  type: "block" as const,
  styles: [...styles],
  lists: [
    {
@@ -183,6 +183,7 @@
    "react-dom": "^18.0.0",
    "react-syntax-highlighter": "^15.5.0",
    "storybook": "^7.6.7",
+    "storybook-addon-pseudo-states": "^2.1.2",
    "stylelint": "^14.8.5",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-standard": "^25.0.0",
Author	SHA1	Message	Date
Halvor Haugan	2b6e9c8798	Oppdater stories for Link (#2770 )	2024-03-01 20:00:18 +01:00
Ken	4065ee3987	💄 UXTweaks-hero på forside bruker Amber-farger Designer ønsket å gjøre hero mer tydelig da dagens 'violet' forsvant mellom elementene	2024-02-29 19:33:30 +01:00
github-actions[bot]andgithub-actions[bot]	59756f32f7	Version Packages (#2764 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-02-29 12:21:22 +01:00
Halvor Haugan	9510327abe	Link: Fjern hover-farge (#2767 )	2024-02-28 15:18:25 +01:00
Christian Skrøvseth	356119e074	Modal: Fiks lukking ved slipp av museknapp på backdrop (#2752 )	2024-02-27 15:02:02 +01:00
Halvor Haugan	3d2eab4fda	Modal: fiks fokus bug i Safari + endre title på lukkeknappen (#2688 )	2024-02-27 09:48:26 +01:00
Halvor Haugan	299c5f1db4	[aksel.nav.no] 🔨 Bytt ut cp med copyfiles (#2753 )	2024-02-26 13:28:46 +01:00
Halvor Haugan	6267d0c7fb	[aksel.nav.no] 🆙 Oppgradert start-server-and-test (#2759 )	2024-02-26 13:26:59 +01:00
Halvor Haugan	44ba2ef7e8	[aksel.nav.no] 🚨 Ikke tillat @ts-ignore (#2758 )	2024-02-26 13:07:30 +01:00
Ken	002f6a1b9e	[Sanity] Oppdatert sanity minor (#2733 ) * 🎉 Oppdatert sanity * 🐛 Oppdatert import av deprecated desktool i sanity * ⬆️ yarn sync * 🐛 IntentButton var oppdatert i ny sanity-versjon	2024-02-26 10:43:00 +01:00
Halvor Haugan	124c28eb0e	Oppdatering av eksempler på TextField (#2754 )	2024-02-26 10:05:46 +01:00
Halvor Haugan	ae7d4d5f07	Oppgradering av deps (#2756 )	2024-02-26 09:07:11 +01:00