@navikt/ds-react 6.0.0 → 6.1.1

package/src/link/stories/link.stories.tsx

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

package/src/link-panel/LinkPanelDescription.tsx

@@ -18,3 +18,5 @@ export const LinkPanelDescription = forwardRef<
     className={cl("navds-link-panel__description", className)}
   />
 ));
+
+export default LinkPanelDescription;

package/src/link-panel/LinkPanelTitle.tsx

@@ -22,3 +22,5 @@ export const LinkPanelTitle: OverridableComponent<
     )}
   />
 ));
+
+export default LinkPanelTitle;

package/src/link-panel/index.ts

@@ -1,2 +1,10 @@
-export { default as LinkPanel } from "./LinkPanel";
-export { type LinkPanelProps } from "./LinkPanel";
+"use client";
+export { default as LinkPanel, type LinkPanelProps } from "./LinkPanel";
+export {
+  default as LinkPanelTitle,
+  type LinkPanelTitleProps,
+} from "./LinkPanelTitle";
+export {
+  default as LinkPanelDescription,
+  type LinkPanelDescriptionProps,
+} from "./LinkPanelDescription";

package/src/list/index.ts

@@ -1,2 +1,4 @@
+"use client";
 export { default as List } from "./List";
 export type { ListProps } from "./types";
+export { default as ListItem, type ListItemProps } from "./ListItem";

package/src/loader/index.ts

@@ -1,2 +1,3 @@
+"use client";
 export { default as Loader } from "./Loader";
 export { type LoaderProps } from "./Loader";

package/src/modal/Modal.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import React, { useState } from "react";
+import { describe, expect, test } from "vitest";
 import { Button, Modal } from "..";
 import { BODY_CLASS } from "./ModalUtils";
 

package/src/modal/Modal.tsx

@@ -3,7 +3,7 @@ import cl from "clsx";
 import React, { forwardRef, useContext, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { DateContext } from "../date/context";
-import { useProvider } from "../provider";
+import { useProvider } from "../provider/Provider";
 import { Detail, Heading } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useId } from "../util/hooks";
@@ -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,
@@ -98,8 +104,8 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     const portalNode = useFloatingPortalNode({ root: rootElement });
 
     const dateContext = useContext(DateContext);
-    const modalContext = useModalContext(false);
-    if (modalContext && !dateContext) {
+    const isNested = useModalContext(false) !== undefined;
+    if (isNested && !dateContext) {
       console.error("Modals should not be nested");
     }
 
@@ -130,7 +136,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       }
     }, [modalRef, portalNode, open]);
 
-    useBodyScrollLock(modalRef, portalNode);
+    useBodyScrollLock(modalRef, portalNode, isNested);
 
     const isWidthPreset =
       typeof width === "string" && ["small", "medium"].includes(width);
@@ -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>) => {
+    const handleModalClick = (
+      endEvent: React.MouseEvent<HTMLDialogElement>,
+    ) => {
+      if (endEvent.target !== modalRef.current) {
+        return;
+      }
+
+      const modalRect = modalRef.current.getBoundingClientRect();
+
       if (
-        closeOnBackdropClick &&
-        !needPolyfill &&
-        event.target === modalRef.current &&
-        (!onBeforeClose || onBeforeClose() !== false)
+        coordsAreInside(mouseClickStart.current, modalRect) ||
+        coordsAreInside(endEvent, modalRect)
       ) {
-        modalRef.current.close();
+        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

package/src/modal/ModalHeader.tsx

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

package/src/modal/ModalUtils.ts

@@ -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"],
@@ -18,8 +32,10 @@ export const BODY_CLASS = "navds-modal__document-body";
 export function useBodyScrollLock(
   modalRef: React.RefObject<HTMLDialogElement>,
   portalNode: HTMLElement | null,
+  isNested: boolean,
 ) {
   React.useEffect(() => {
+    if (isNested) return;
     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
 
@@ -35,5 +51,5 @@ export function useBodyScrollLock(
       observer.disconnect();
       document.body.classList.remove(BODY_CLASS); // In case modal is unmounted before it's closed
     };
-  }, [modalRef, portalNode]);
+  }, [modalRef, portalNode, isNested]);
 }

package/src/modal/index.ts

@@ -1,5 +1,6 @@
+"use client";
 export { default as Modal } from "./Modal";
-export { type ModalBodyProps } from "./ModalBody";
-export { type ModalFooterProps } from "./ModalFooter";
-export { type ModalHeaderProps } from "./ModalHeader";
+export { default as ModalBody, type ModalBodyProps } from "./ModalBody";
+export { default as ModalFooter, type ModalFooterProps } from "./ModalFooter";
+export { default as ModalHeader, type ModalHeaderProps } from "./ModalHeader";
 export { type ModalProps } from "./types";

package/src/modal/modal.stories.tsx

@@ -339,3 +339,57 @@ ChromaticViewportTesting.parameters = {
     },
   },
 };
+
+// For testing TS error messages:
+
+/* const PropTypeTest = () => {
+  return (
+    <>
+      <Modal header={{ heading: "Label" }}>OK</Modal>
+
+      <Modal header={{ heading: "Label" }} aria-label="Label">
+        OK
+      </Modal>
+
+      <Modal header={{ heading: "Label" }} aria-labelledby="Label">
+        OK
+      </Modal>
+
+      <Modal aria-label="Label">OK</Modal>
+
+      <Modal aria-labelledby="Label">OK</Modal>
+
+      <Modal aria-label="Label" open onClose={() => null}>
+        OK
+      </Modal>
+
+      <Modal>Mangler label</Modal>
+
+      <Modal open>Mangler onClose eller label</Modal>
+
+      <Modal open aria-label="Label">
+        Mangler onClose
+      </Modal>
+
+      <Modal open onClose={() => null}>
+        Mangler label
+      </Modal>
+
+      <Modal header={{ heading: "Label" }} open>
+        Mangler onClose
+      </Modal>
+
+      <Modal
+        header={{ heading: "Label" }}
+        aria-label="Label"
+        aria-labelledby="Label"
+      >
+        For mange labels
+      </Modal>
+
+      <Modal aria-label="Label" aria-labelledby="Label">
+        For mange labels
+      </Modal>
+    </>
+  );
+}; */