@purpurds/modal 3.0.0

package/src/modal-content.tsx

@@ -0,0 +1,304 @@
+import React, {
+  ForwardedRef,
+  forwardRef,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { Button, ButtonVariant } from "@purpurds/button";
+import { Heading } from "@purpurds/heading";
+import { IconClose } from "@purpurds/icon";
+import { Paragraph } from "@purpurds/paragraph";
+import { VisuallyHidden } from "@purpurds/visually-hidden";
+import { purpurBreakpointMd } from "@purpurds/tokens";
+import c from "classnames/bind";
+
+import styles from "./modal-content.module.scss";
+
+export const primaryActionVariants = ["primary", "expressive", "destructive"] as const;
+
+export type PrimaryActionVariant = (typeof primaryActionVariants)[number];
+
+export type DefaultProps = {
+  ["data-testid"]?: string;
+  /**
+   * An array of actions to be displayed at the bottom of the modal in the form of buttons. A maximum of 3 buttons will be rendered,
+   * */
+  actions?: Array<{ label: string; onClick: () => void }>;
+  children: ReactNode;
+  className?: string;
+  /**
+   * An optional accessible description to be announced when the dialog is opened.
+   * */
+  description?: string;
+  /**
+   * Prevents the modal from closing on click outside if set to `true`.
+   * */
+  disableCloseOnClickOutside?: boolean;
+  /**
+   * Visually hides the description if set to `true`.
+   * */
+  hideDescription?: boolean;
+  /**
+   * An optional image to be displayed at the top of the modal.
+   * */
+  image?: ReactNode;
+  /**
+   * The variant for the primary action button.
+   * */
+  primaryActionVariant?: PrimaryActionVariant;
+  /**
+   * Determines whether the button group should be fixed at the bottom or scroll with the content.
+   * */
+  stickyButtons?: boolean;
+  /**
+   * An accessible title to be announced when the dialog is opened.
+   * */
+  title: string;
+};
+
+type NoCloseButtonProps = {
+  /**
+   * An accessible label for the close button.
+   * */
+  closeButtonAllyLabel?: never;
+  /**
+   * Shows the close button if set to `true`. Must be used in conjunction with `closeButtonAllyLabel`.
+   * */
+  showCloseButton?: false;
+};
+
+type CloseButtonProps = {
+  /**
+   * An accessible label for the close button.
+   * */
+  closeButtonAllyLabel: string;
+  /**
+   * Shows the close button if set to `true`. Must be used in conjunction with `closeButtonAllyLabel`.
+   * */
+  showCloseButton: true;
+};
+
+export type ModalContentProps = DefaultProps & (CloseButtonProps | NoCloseButtonProps);
+
+const hasCloseButtonProps = (
+  props: CloseButtonProps | NoCloseButtonProps
+): props is CloseButtonProps => (props as CloseButtonProps).showCloseButton === true;
+
+const cx = c.bind(styles);
+const rootClassName = "purpur-modal-content";
+
+export const ModalContent = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestId,
+      actions,
+      children,
+      className,
+      description,
+      disableCloseOnClickOutside,
+      hideDescription,
+      image,
+      primaryActionVariant = "primary",
+      stickyButtons = true,
+      title,
+      ...props
+    }: ModalContentProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const { closeButtonAllyLabel, showCloseButton, ...rest } = props;
+    const [contentOverflow, setContentOverflow] = useState(false);
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const wrapperInnerRef = useRef<HTMLDivElement>(null);
+    const bodyWrapperRef = useRef<HTMLDivElement>(null);
+    const bodyInnerRef = useRef<HTMLDivElement>(null);
+
+    const classes = cx([
+      rootClassName,
+      { [`${rootClassName}--with-image`]: !!image },
+      { [`${rootClassName}--overflow`]: contentOverflow },
+      { [`${rootClassName}--sticky-footer`]: stickyButtons },
+      className,
+    ]);
+
+    const getTestId = (id: string) => (dataTestId ? `${dataTestId} ${id}` : undefined);
+
+    const handlePointerDownOutside = (event: CustomEvent<{ originalEvent: PointerEvent }>) => {
+      if (disableCloseOnClickOutside) {
+        event.preventDefault();
+      }
+    };
+
+    const handleContentOverflow = useCallback(() => {
+      if (
+        !wrapperRef.current ||
+        !wrapperInnerRef.current ||
+        !bodyWrapperRef.current ||
+        !bodyInnerRef.current
+      ) {
+        return;
+      }
+
+      const isMobile = window.innerWidth < parseInt(purpurBreakpointMd);
+
+      const computedStyle = window.getComputedStyle(
+        isMobile ? wrapperRef.current : bodyWrapperRef.current,
+        null
+      );
+      const wrapperHeight = parseFloat(computedStyle.getPropertyValue("height"));
+      const innerHeight = isMobile
+        ? wrapperInnerRef.current.offsetHeight
+        : bodyInnerRef.current.offsetHeight;
+
+      setContentOverflow(wrapperHeight < innerHeight);
+    }, []);
+
+    const handleEscapeKeyDown = (event: KeyboardEvent) => {
+      if (disableCloseOnClickOutside && !showCloseButton) {
+        event.preventDefault();
+      }
+    };
+
+    useEffect(() => {
+      window.addEventListener("resize", handleContentOverflow);
+
+      return () => {
+        window.removeEventListener("resize", handleContentOverflow);
+      };
+    }, []);
+
+    return (
+      <RadixDialog.Portal>
+        <RadixDialog.Overlay className={cx(`${rootClassName}__overlay`)} />
+        <RadixDialog.Content
+          {...rest}
+          className={classes}
+          data-testid={dataTestId}
+          ref={ref}
+          {...(!description && { ["aria-describedby"]: undefined })}
+          onPointerDownOutside={handlePointerDownOutside}
+          onOpenAutoFocus={handleContentOverflow}
+          onEscapeKeyDown={handleEscapeKeyDown}
+        >
+          <div ref={wrapperRef} className={cx(`${rootClassName}__wrapper`)}>
+            {hasCloseButtonProps(props) && closeButtonAllyLabel && image && (
+              <CloseButton
+                allyLabel={closeButtonAllyLabel}
+                hasImage
+                data-testid={getTestId("close-button")}
+              />
+            )}
+            <div ref={wrapperInnerRef} className={cx(`${rootClassName}__wrapper-inner`)}>
+              <div className={cx(`${rootClassName}__header`)}>
+                {hasCloseButtonProps(props) && closeButtonAllyLabel && !image && (
+                  <CloseButton
+                    allyLabel={closeButtonAllyLabel}
+                    data-testid={getTestId("close-button")}
+                  />
+                )}
+                <RadixDialog.Title
+                  asChild
+                  className={cx(`${rootClassName}__title`)}
+                  data-testid={getTestId("title")}
+                >
+                  <Heading tag="h2" variant="title-200">
+                    {title}
+                  </Heading>
+                </RadixDialog.Title>
+              </div>
+              {image && (
+                <div
+                  className={cx(`${rootClassName}__image-wrapper`)}
+                  data-testid={getTestId("image")}
+                >
+                  {image}
+                </div>
+              )}
+              <div ref={bodyWrapperRef} className={cx(`${rootClassName}__body`)}>
+                <div ref={bodyInnerRef} className={cx(`${rootClassName}__body-inner`)}>
+                  {description && (
+                    <>
+                      {hideDescription ? (
+                        <VisuallyHidden asChild>
+                          <RadixDialog.Description data-testid={getTestId("description")}>
+                            {description}
+                          </RadixDialog.Description>
+                        </VisuallyHidden>
+                      ) : (
+                        <RadixDialog.Description
+                          asChild
+                          className={cx(`${rootClassName}__description`)}
+                          data-testid={getTestId("description")}
+                        >
+                          <Paragraph variant="paragraph-100">{description}</Paragraph>
+                        </RadixDialog.Description>
+                      )}
+                    </>
+                  )}
+                  <div>{children}</div>
+                  {!stickyButtons && (
+                    <ModalActions actions={actions} primaryActionVariant={primaryActionVariant} />
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+          {stickyButtons && (
+            <ModalActions actions={actions} primaryActionVariant={primaryActionVariant} />
+          )}
+        </RadixDialog.Content>
+      </RadixDialog.Portal>
+    );
+  }
+);
+
+const CloseButton = ({
+  allyLabel,
+  hasImage,
+  ["data-testid"]: dataTestId,
+}: {
+  allyLabel: string;
+  hasImage?: boolean;
+  ["data-testid"]?: string;
+}) => (
+  <RadixDialog.Close asChild>
+    <Button
+      variant={hasImage ? "primary-negative" : "tertiary-purple"}
+      size="sm"
+      iconOnly
+      aria-label={allyLabel}
+      className={cx(`${rootClassName}__close-button`)}
+      data-testid={dataTestId}
+    >
+      <IconClose />
+    </Button>
+  </RadixDialog.Close>
+);
+
+export const MAX_NUMBER_OF_ACTIONS = 3;
+
+export const ModalActions = ({
+  actions,
+  primaryActionVariant,
+}: Pick<ModalContentProps, "actions" | "primaryActionVariant">) => {
+  const buttonVariants = [primaryActionVariant, "secondary", "text"];
+
+  return actions && actions.length > 0 ? (
+    <div className={cx(`${rootClassName}__actions`)} data-testid="modal actions">
+      {actions.slice(0, MAX_NUMBER_OF_ACTIONS).map(({ label, onClick }, index) => (
+        <Button
+          key={label}
+          data-testid="modal actions button"
+          variant={(buttonVariants[index] as ButtonVariant) || ""}
+          onClick={onClick}
+          className={cx(`${rootClassName}__button`)}
+        >
+          {label}
+        </Button>
+      ))}
+    </div>
+  ) : null;
+};

package/src/modal-trigger.tsx

@@ -0,0 +1,27 @@
+import React, { ForwardedRef, forwardRef, ReactNode } from "react";
+import * as RadixDialog from "@radix-ui/react-dialog";
+
+export type ModalTriggerProps = {
+  ["data-testid"]?: string;
+  children: ReactNode;
+  className?: string;
+};
+
+export const ModalTrigger = forwardRef(
+  (
+    { ["data-testid"]: dataTestId, children, className, ...props }: ModalTriggerProps,
+    ref: ForwardedRef<HTMLButtonElement>
+  ) => {
+    return (
+      <RadixDialog.Trigger
+        asChild
+        ref={ref}
+        data-testid={dataTestId}
+        className={className}
+        {...props}
+      >
+        {children}
+      </RadixDialog.Trigger>
+    );
+  }
+);

package/src/modal.stories.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "@purpurds/button";
+import { Paragraph } from "@purpurds/paragraph";
+import { TextSpacing } from "@purpurds/text-spacing";
+
+import { Modal } from "./modal";
+
+import "@purpurds/button/styles";
+import "@purpurds/icon/styles";
+import "@purpurds/text-spacing/styles";
+
+const meta: Meta<typeof Modal> = {
+  title: "Components/Modal",
+  component: Modal,
+};
+
+export default meta;
+type Story = StoryObj<typeof Modal>;
+
+export const Showcase: Story = {
+  parameters: {
+    design: [
+      {
+        name: "Modal",
+        type: "figma",
+        url: "https://www.figma.com/file/TggtRkYyKpwgKTU0LxuYFN/Modal-redesign?type=design&node-id=104-731&mode=design&t=sm44NPLlG3tjpFQb-0",
+      },
+    ],
+  },
+  render: () => {
+    const cookieActions = [
+      { label: "I accept cookies", onClick: () => {} },
+      { label: "Settings", onClick: () => {} },
+      { label: "Reject all", onClick: () => {} },
+    ];
+
+    const privacyPolicyActions = [
+      { label: "Agree", onClick: () => {} },
+      { label: "Disagree", onClick: () => {} },
+    ];
+
+    const subscriptionActions = [
+      { label: "End main subscription", onClick: () => {} },
+      { label: "Cancel", onClick: () => {} },
+    ];
+
+    return (
+      <div style={{ display: "flex", gap: "var(--purpur-spacing-200)" }}>
+        <Modal>
+          <Modal.Trigger>
+            <Button variant="primary">Open cookie consent</Button>
+          </Modal.Trigger>
+          <Modal.Content title="We use cookies" actions={cookieActions}>
+            <Paragraph variant="paragraph-100">
+              By clicking "I accept cookies" you consent to the storage of cookies on your device to
+              improve website navigation, analyze website usage and assist in our marketing efforts.
+            </Paragraph>
+          </Modal.Content>
+        </Modal>
+
+        <Modal>
+          <Modal.Trigger>
+            <Button variant="secondary">Open privacy policy</Button>
+          </Modal.Trigger>
+          <Modal.Content title="Privacy policy for Telia Sverige AB" actions={privacyPolicyActions}>
+            <TextSpacing>
+              <Paragraph variant="paragraph-100">
+                We are Telia Sverige AB (org. nr 556430-0142), (hereafter ‘Telia’). In this Privacy
+                policy we describe how we, as the controller, process and protect your personal data
+                (hereafter ‘data’). Telia recognizes that the protection of your personal data is
+                extremely important. Therefore, we protect the privacy of every data subject with
+                the utmost responsibility and care. When processing personal data, we comply with
+                the General Data Protection Regulation (GDPR), the Data Protection Act 2018:2181 ,
+                The Electronic Communications Act 2022:
+              </Paragraph>
+              <Paragraph variant="paragraph-100">
+                This Privacy policy applies to the processing of personal data of individuals,
+                regardless of whether you are a consumer or business customer. In addition, Telia
+                may have service-specific privacy policys, which describe the processing of personal
+                data in the context of a specific service. These can be found along with the
+                specific services that we provide.
+              </Paragraph>
+              <Paragraph variant="paragraph-100">This Privacy policy sets out:</Paragraph>
+              <ul>
+                <li>how we collect personal data</li>
+                <li>what personal data we process</li>
+                <li>for what purposes</li>
+                <li>based on which legal grounds and for how long we process personal data</li>
+                <li>how we protect and safeguard personal data</li>
+                <li>to whom we disclose personal data</li>
+                <li>
+                  what rights you have regarding the processing of your personal data and how you
+                  can execute these rights.
+                </li>
+              </ul>
+              <Paragraph variant="paragraph-100">
+                This Privacy policy does not apply to the processing of personal data processed by
+                other companies when you are using their services or websites, even if they were
+                accessed through Telia's communications network or services.
+              </Paragraph>
+            </TextSpacing>
+          </Modal.Content>
+        </Modal>
+
+        <Modal>
+          <Modal.Trigger>
+            <Button variant="destructive">End main subscription</Button>
+          </Modal.Trigger>
+          <Modal.Content
+            title="Do you want to cancel the main subscription?"
+            actions={subscriptionActions}
+            primaryActionVariant="destructive"
+          >
+            <Paragraph variant="paragraph-100">
+              Upon termination of the main subscription, all related data sims and e-sims are
+              terminated. The notice period may vary.
+            </Paragraph>
+          </Modal.Content>
+        </Modal>
+      </div>
+    );
+  },
+};

package/src/modal.test.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { Modal } from "./modal";
+
+expect.extend(matchers);
+
+describe("Modal", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render Trigger and Content as children", () => {
+    render(
+      <Modal open>
+        <Modal.Trigger data-testid="modal trigger">
+          <button type="button">Open</button>
+        </Modal.Trigger>
+        <Modal.Content data-testid="modal content" title="Title">
+          Some content
+        </Modal.Content>
+      </Modal>
+    );
+
+    expect(screen.getByTestId("modal trigger")).toBeInTheDocument();
+    expect(screen.getByTestId("modal content")).toBeInTheDocument();
+  });
+
+  it("should only render Content when modal is open", () => {
+    render(
+      <Modal>
+        <Modal.Trigger data-testid="modal trigger">
+          <button type="button">Open</button>
+        </Modal.Trigger>
+        <Modal.Content data-testid="modal content" title="Title">
+          Some content
+        </Modal.Content>
+      </Modal>
+    );
+
+    const trigger = screen.getByTestId("modal trigger");
+
+    expect(screen.queryByTestId("modal content")).not.toBeInTheDocument();
+
+    fireEvent.click(trigger);
+
+    expect(screen.getByTestId("modal content")).toBeInTheDocument();
+  });
+
+  it("should trigger `onOpenChange` callback on trigger click", () => {
+    const onOpenChangeMock = vi.fn();
+
+    render(
+      <Modal open={false} onOpenChange={onOpenChangeMock}>
+        <Modal.Trigger data-testid="modal trigger">
+          <button type="button">Open</button>
+        </Modal.Trigger>
+        <Modal.Content data-testid="modal content" title="Title">
+          Some content
+        </Modal.Content>
+      </Modal>
+    );
+
+    const trigger = screen.getByTestId("modal trigger");
+
+    expect(onOpenChangeMock).not.toHaveBeenCalled();
+
+    fireEvent.click(trigger);
+
+    expect(onOpenChangeMock).toHaveBeenCalledWith(true);
+  });
+});

package/src/modal.tsx

@@ -0,0 +1,36 @@
+import React, { ReactElement } from "react";
+import * as RadixDialog from "@radix-ui/react-dialog";
+
+import { ModalContent } from "./modal-content";
+import { ModalTrigger } from "./modal-trigger";
+
+export type ModalProps = {
+  ["data-testid"]?: string;
+  children: Array<ReactElement<typeof ModalTrigger | typeof ModalContent>>;
+  /**
+   * Event handler called when the open state of the dialog changes.
+   * */
+  onOpenChange?: (value: boolean) => void;
+  /**
+   * The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.
+   * */
+  open?: boolean;
+};
+
+export const Modal = ({
+  ["data-testid"]: dataTestId,
+  children,
+  open,
+  onOpenChange,
+}: ModalProps) => {
+  return (
+    <RadixDialog.Root open={open} onOpenChange={onOpenChange} data-testid={dataTestId}>
+      {children}
+    </RadixDialog.Root>
+  );
+};
+
+Modal.Trigger = ModalTrigger;
+Modal.Content = ModalContent;
+
+Modal.displayName = "Modal";