feat(Modal): modal component with basic functionality (#2417)

Author: YossiSaadi

packages/core/src/components/ModalNew/Modal/Modal.module.scss

@@ -0,0 +1,12 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(41, 47, 76, 0.7);
+}
+
+.modal {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--primary-background-color);
+}

packages/core/src/components/ModalNew/Modal/Modal.tsx

@@ -0,0 +1,54 @@
+import React, { forwardRef } from "react";
+import cx from "classnames";
+import { getTestId } from "../../../tests/test-ids-utils";
+import { ComponentDefaultTestId } from "../../../tests/constants";
+import styles from "./Modal.module.scss";
+import { ModalProps } from "./Modal.types";
+import ModalTopActions from "../ModalTopActions/ModalTopActions";
+
+const Modal = forwardRef(
+  (
+    {
+      // Would be implemented in a later PR
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      show,
+      // Would be implemented in a later PR
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      size = "medium",
+      renderHeaderAction,
+      closeButtonTheme,
+      closeButtonAriaLabel,
+      onClose,
+      children,
+      className,
+      id,
+      "data-testid": dataTestId
+    }: ModalProps,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) => {
+    return (
+      <div id="overlay" className={styles.overlay}>
+        <div
+          ref={ref}
+          className={cx(styles.modal, className)}
+          id={id}
+          data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL, id)}
+          role="dialog"
+          aria-modal
+          aria-labelledby="TODO" // TODO
+          aria-describedby="TODO" // TODO
+        >
+          <ModalTopActions
+            renderAction={renderHeaderAction}
+            color={closeButtonTheme}
+            closeButtonAriaLabel={closeButtonAriaLabel}
+            onClose={onClose}
+          />
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+export default Modal;

packages/core/src/components/ModalNew/Modal/Modal.types.tsx

@@ -0,0 +1,15 @@
+import { VibeComponentProps } from "../../../types";
+import React from "react";
+import { ModalTopActionsProps } from "../ModalTopActions/ModalTopActions.types";
+
+export type ModalSize = "small" | "medium" | "large";
+
+export interface ModalProps extends VibeComponentProps {
+  show: boolean;
+  size?: ModalSize;
+  closeButtonTheme?: ModalTopActionsProps["color"];
+  closeButtonAriaLabel?: ModalTopActionsProps["closeButtonAriaLabel"];
+  onClose?: ModalTopActionsProps["onClose"];
+  renderHeaderAction?: ModalTopActionsProps["renderAction"];
+  children: React.ReactNode;
+}

packages/core/src/components/ModalNew/Modal/__tests__/Modal.test.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import Modal from "../Modal";
+
+describe("Modal", () => {
+  const closeButtonAriaLabel = "Close modal";
+  const childrenContent = <span>My content</span>;
+
+  it("renders the modal with the correct role", () => {
+    const { getByTestId } = render(
+      <Modal show data-testid="modal">
+        {childrenContent}
+      </Modal>
+    );
+
+    expect(getByTestId("modal")).toHaveAttribute("role", "dialog");
+  });
+
+  it("renders the modal with the correct aria-modal", () => {
+    const { getByTestId } = render(
+      <Modal show data-testid="modal">
+        {childrenContent}
+      </Modal>
+    );
+
+    expect(getByTestId("modal")).toHaveAttribute("aria-modal", "true");
+  });
+
+  it("renders the children content correctly", () => {
+    const { getByText } = render(
+      <Modal show closeButtonAriaLabel={closeButtonAriaLabel}>
+        {childrenContent}
+      </Modal>
+    );
+
+    expect(getByText("My content")).toBeInTheDocument();
+  });
+
+  it("calls onClose when the close button is clicked", () => {
+    const mockOnClose = jest.fn();
+    const { getByLabelText } = render(
+      <Modal show onClose={mockOnClose} closeButtonAriaLabel={closeButtonAriaLabel}>
+        {childrenContent}
+      </Modal>
+    );
+
+    fireEvent.click(getByLabelText(closeButtonAriaLabel));
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it.todo("does not render when 'show' is false");
+
+  it.todo("renders the correct aria-labelledby");
+
+  it.todo("renders the correct aria-describedby");
+});