@windstream/react-shared-components 0.1.93 → 0.1.94

package/src/contentful/blocks/modal/index.test.tsx

@@ -0,0 +1,209 @@
+import React from "react";
+import { Modal } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+jest.mock("framer-motion", () => ({
+  motion: {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    div: ({ children, className, ...rest }: any) => (
+      <div className={className}>{children}</div>
+    ),
+  },
+}));
+
+jest.mock("@radix-ui/react-dialog", () => ({
+  Root: ({ open, onOpenChange, children }: any) => (
+    <div
+      data-testid="dialog-root"
+      data-open={open}
+      onClick={() => open && onOpenChange?.()}
+    >
+      {children}
+    </div>
+  ),
+  Portal: ({ children }: any) => (
+    <div data-testid="dialog-portal">{children}</div>
+  ),
+  Overlay: () => <div data-testid="dialog-overlay" />,
+  Content: ({ children, className, style, onOpenAutoFocus }: any) => {
+    // Call onOpenAutoFocus to cover that branch
+    if (onOpenAutoFocus) {
+      const mockEvent = { preventDefault: jest.fn() };
+      onOpenAutoFocus(mockEvent);
+    }
+    return (
+      <div data-testid="dialog-content" className={className} style={style}>
+        {children}
+      </div>
+    );
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Close: ({ children, asChild }: any) => (
+    <div data-testid="dialog-close">{children}</div>
+  ),
+}));
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name }: any) => (
+    <span data-testid="material-icon">{name}</span>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("@shared/contentful/blocks/button", () => ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Button: ({ children, buttonClassName, showButtonAs }: any) => (
+    <button data-testid="close-button" className={buttonClassName}>
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("Modal", () => {
+  const defaultProps = { isOpen: true, onRequestClose: jest.fn() };
+
+  beforeEach(() => jest.clearAllMocks());
+
+  describe("Rendering", () => {
+    it("renders dialog root with open state", () => {
+      render(<Modal {...defaultProps} />);
+      expect(screen.getByTestId("dialog-root")).toHaveAttribute(
+        "data-open",
+        "true"
+      );
+    });
+
+    it("renders close button with MaterialIcon", () => {
+      render(<Modal {...defaultProps} />);
+      expect(screen.getByTestId("close-button")).toBeInTheDocument();
+      expect(screen.getByText("close")).toBeInTheDocument();
+    });
+
+    it("renders title as h2 when provided", () => {
+      render(<Modal {...defaultProps} title="My Title" />);
+      expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent(
+        "My Title"
+      );
+    });
+
+    it("does not render title when not provided", () => {
+      render(<Modal {...defaultProps} />);
+      expect(screen.queryByRole("heading")).not.toBeInTheDocument();
+    });
+
+    it("renders description when provided", () => {
+      render(<Modal {...defaultProps} description="Some desc" />);
+      expect(screen.getByText("Some desc")).toBeInTheDocument();
+    });
+
+    it("does not render description when not provided", () => {
+      const { container } = render(<Modal {...defaultProps} />);
+      expect(container.querySelector(".mb-8")).not.toBeInTheDocument();
+    });
+
+    it("renders content", () => {
+      render(
+        <Modal
+          {...defaultProps}
+          content={<div data-testid="content">Content</div>}
+        />
+      );
+      expect(screen.getByTestId("content")).toBeInTheDocument();
+    });
+
+    it("renders children", () => {
+      render(
+        <Modal {...defaultProps}>
+          <span data-testid="child">Child</span>
+        </Modal>
+      );
+      expect(screen.getByTestId("child")).toBeInTheDocument();
+    });
+
+    it("does not render children placeholder when not provided", () => {
+      const { container } = render(<Modal {...defaultProps} />);
+      expect(container.innerHTML).not.toContain("null");
+    });
+  });
+
+  describe("Size", () => {
+    it("applies lg maxWidth by default", () => {
+      render(<Modal {...defaultProps} />);
+      expect(screen.getByTestId("dialog-content").style.maxWidth).toBe(
+        "1024px"
+      );
+    });
+
+    it("applies sm maxWidth", () => {
+      render(<Modal {...defaultProps} size="sm" />);
+      expect(screen.getByTestId("dialog-content").style.maxWidth).toBe("640px");
+    });
+
+    it("applies xl maxWidth", () => {
+      render(<Modal {...defaultProps} size="xl" />);
+      expect(screen.getByTestId("dialog-content").style.maxWidth).toBe(
+        "1280px"
+      );
+    });
+  });
+
+  describe("Props", () => {
+    it("applies bodyClassName to content", () => {
+      render(<Modal {...defaultProps} bodyClassName="custom-body" />);
+      expect(screen.getByTestId("dialog-content").className).toContain(
+        "custom-body"
+      );
+    });
+
+    it("applies type and index as data attributes", () => {
+      render(<Modal {...defaultProps} type="tabmodal" index={2} />);
+      const section = screen
+        .getByTestId("dialog-content")
+        .querySelector("[data-section-type]");
+      expect(section).toHaveAttribute("data-section-type", "tabmodal");
+      expect(section).toHaveAttribute("data-section-index", "2");
+    });
+
+    it("defaults type to modal and index to 0", () => {
+      render(<Modal {...defaultProps} />);
+      const section = screen
+        .getByTestId("dialog-content")
+        .querySelector("[data-section-type]");
+      expect(section).toHaveAttribute("data-section-type", "modal");
+      expect(section).toHaveAttribute("data-section-index", "0");
+    });
+  });
+
+  describe("Close behavior", () => {
+    it("calls onRequestClose when dialog onOpenChange triggers while open", () => {
+      render(<Modal {...defaultProps} />);
+      fireEvent.click(screen.getByTestId("dialog-root"));
+      expect(defaultProps.onRequestClose).toHaveBeenCalled();
+    });
+
+    it("does not call onRequestClose when isOpen is false", () => {
+      render(
+        <Modal isOpen={false} onRequestClose={defaultProps.onRequestClose} />
+      );
+      fireEvent.click(screen.getByTestId("dialog-root"));
+      expect(defaultProps.onRequestClose).not.toHaveBeenCalled();
+    });
+
+    it("handles missing onRequestClose gracefully", () => {
+      expect(() => {
+        render(<Modal isOpen={true} />);
+        fireEvent.click(screen.getByTestId("dialog-root"));
+      }).not.toThrow();
+    });
+  });
+});

package/src/contentful/blocks/modal/index.tsx

@@ -1,108 +1,108 @@
-"use client";
-
-import React from "react";
-import {
-  backdropAnimationVariants,
-  contentAnimationVariants,
-  sizeToPixel,
-} from "./constants";
-import { ModalProps } from "./types";
-import { motion } from "framer-motion";
-
-import * as Dialog from "@radix-ui/react-dialog";
-import { MaterialIcon } from "@shared/components/material-icon";
-import { Text } from "@shared/components/text";
-import { Button } from "@shared/contentful/blocks/button";
-import { cx } from "@shared/utils";
-
-type ExtendedModalProps = ModalProps & {
-  type?: string;
-  index?: number;
-};
-export const Modal: React.FC<ExtendedModalProps> = props => {
-  const {
-    isOpen,
-    onRequestClose,
-    size,
-    title,
-    content,
-    description,
-    children,
-    bodyClassName,
-    type = "modal",
-    index = 0,
-  } = props;
-
-  return (
-    <Dialog.Root
-      open={isOpen}
-      onOpenChange={() => isOpen && onRequestClose?.()}
-    >
-      <Dialog.Portal>
-        <motion.div
-          initial="closed"
-          animate={isOpen ? "open" : "closed"}
-          variants={backdropAnimationVariants}
-          transition={{ type: "tween", duration: 0.2, ease: "easeInOut" }}
-          className="fixed inset-0 z-[1000] bg-scrim-bg-modal"
-        >
-          <Dialog.Overlay />
-        </motion.div>
-        <div className="pointer-events-none fixed inset-0 z-[1001] flex items-center justify-center">
-          <motion.div
-            initial="closed"
-            animate={isOpen ? "open" : "closed"}
-            variants={contentAnimationVariants}
-            transition={{ type: "tween", duration: 0.3, ease: "easeInOut" }}
-            className="pointer-events-auto w-[calc(100vw-10px)] focus:outline-none sm:w-[calc(100vw-90px)]"
-          >
-            <Dialog.Content
-              onOpenAutoFocus={e => e.preventDefault()}
-              className={cx(
-                "relative mx-auto w-full rounded-modal bg-bg p-[25px] shadow-drop focus:outline-none",
-                bodyClassName
-              )}
-              style={{ maxWidth: sizeToPixel[size || "lg"] }}
-            >
-              <div data-section-type={type} data-section-index={index}>
-                <Dialog.Close asChild={true}>
-                  <Button
-                    showButtonAs="unstyled"
-                    buttonClassName="absolute right-0 top-0 mr-2 mt-2 bg-bg"
-                  >
-                    <MaterialIcon name="close" />
-                  </Button>
-                </Dialog.Close>
-                <div className="custom-modal-body max-h-[85vh] overflow-visible">
-                  {title ? (
-                    <Text
-                      className={cx(
-                        "mb-3 mt-5 w-full pr-8 text-center sm:pr-0",
-                        "heading5 md:pt-0",
-                        "mb-4 md:mb-[60px]"
-                      )}
-                      as="h2"
-                    >
-                      {title}
-                    </Text>
-                  ) : null}
-
-                  {description ? (
-                    <Text as="div" className="mb-8 sm:mb-5">
-                      {description}
-                    </Text>
-                  ) : null}
-
-                  <div className="flex flex-col gap-4 sm:gap-5">
-                    {content}
-                    {children ? children : null}
-                  </div>
-                </div>
-              </div>
-            </Dialog.Content>
-          </motion.div>
-        </div>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};
+"use client";
+
+import React from "react";
+import {
+  backdropAnimationVariants,
+  contentAnimationVariants,
+  sizeToPixel,
+} from "./constants";
+import { ModalProps } from "./types";
+import { motion } from "framer-motion";
+
+import * as Dialog from "@radix-ui/react-dialog";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Text } from "@shared/components/text";
+import { Button } from "@shared/contentful/blocks/button";
+import { cx } from "@shared/utils";
+
+type ExtendedModalProps = ModalProps & {
+  type?: string;
+  index?: number;
+};
+export const Modal: React.FC<ExtendedModalProps> = props => {
+  const {
+    isOpen,
+    onRequestClose,
+    size,
+    title,
+    content,
+    description,
+    children,
+    bodyClassName,
+    type = "modal",
+    index = 0,
+  } = props;
+
+  return (
+    <Dialog.Root
+      open={isOpen}
+      onOpenChange={() => isOpen && onRequestClose?.()}
+    >
+      <Dialog.Portal>
+        <motion.div
+          initial="closed"
+          animate={isOpen ? "open" : "closed"}
+          variants={backdropAnimationVariants}
+          transition={{ type: "tween", duration: 0.2, ease: "easeInOut" }}
+          className="fixed inset-0 z-[1000] bg-scrim-bg-modal"
+        >
+          <Dialog.Overlay />
+        </motion.div>
+        <div className="pointer-events-none fixed inset-0 z-[1001] flex items-center justify-center">
+          <motion.div
+            initial="closed"
+            animate={isOpen ? "open" : "closed"}
+            variants={contentAnimationVariants}
+            transition={{ type: "tween", duration: 0.3, ease: "easeInOut" }}
+            className="pointer-events-auto w-[calc(100vw-10px)] focus:outline-none sm:w-[calc(100vw-90px)]"
+          >
+            <Dialog.Content
+              onOpenAutoFocus={e => e.preventDefault()}
+              className={cx(
+                "relative mx-auto w-full rounded-modal bg-bg p-[25px] shadow-drop focus:outline-none",
+                bodyClassName
+              )}
+              style={{ maxWidth: sizeToPixel[size || "lg"] }}
+            >
+              <div data-section-type={type} data-section-index={index}>
+                <Dialog.Close asChild={true}>
+                  <Button
+                    showButtonAs="unstyled"
+                    buttonClassName="absolute right-0 top-0 mr-2 mt-2 bg-bg"
+                  >
+                    <MaterialIcon name="close" />
+                  </Button>
+                </Dialog.Close>
+                <div className="custom-modal-body max-h-[85vh] overflow-visible">
+                  {title ? (
+                    <Text
+                      className={cx(
+                        "mb-3 mt-5 w-full pr-8 text-center sm:pr-0",
+                        "heading5 md:pt-0",
+                        "mb-4 md:mb-[60px]"
+                      )}
+                      as="h2"
+                    >
+                      {title}
+                    </Text>
+                  ) : null}
+
+                  {description ? (
+                    <Text as="div" className="mb-8 sm:mb-5">
+                      {description}
+                    </Text>
+                  ) : null}
+
+                  <div className="flex flex-col gap-4 sm:gap-5">
+                    {content}
+                    {children ? children : null}
+                  </div>
+                </div>
+              </div>
+            </Dialog.Content>
+          </motion.div>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};

package/src/contentful/blocks/modal/types.ts

@@ -1,12 +1,12 @@
-import React from "react";
-
-export type ModalProps = {
-  isOpen: boolean;
-  onRequestClose?: () => void;
-  size?: "lg" | "md" | "sm" | "xl" | "xs";
-  title?: string;
-  description?: React.ReactNode;
-  content?: React.ReactNode;
-  children?: React.ReactNode;
-  bodyClassName?: string;
-};
+import React from "react";
+
+export type ModalProps = {
+  isOpen: boolean;
+  onRequestClose?: () => void;
+  size?: "lg" | "md" | "sm" | "xl" | "xs";
+  title?: string;
+  description?: React.ReactNode;
+  content?: React.ReactNode;
+  children?: React.ReactNode;
+  bodyClassName?: string;
+};

package/src/contentful/blocks/navigation/Navigation.stories.mocks.tsx

@@ -1,78 +1,78 @@
-export const PRIMARY_LINKS: any = [
-  {
-    __typename: "ComponentButton",
-    buttonLabel: "Home",
-    href: "/",
-    preserveQueryParameters: false,
-  },
-  {
-    __typename: "ComponentButton",
-    buttonLabel: "Products",
-    href: "/products",
-    preserveQueryParameters: false,
-  },
-  {
-    __typename: "ComponentButtonGroup",
-    title: "Services",
-    items: {
-      items: [
-        {
-          __typename: "ComponentButton",
-          buttonLabel: "Internet",
-          href: "/internet",
-        },
-        {
-          __typename: "ComponentButton",
-          buttonLabel: "Phone",
-          href: "/phone",
-        },
-      ],
-    },
-  },
-];
-
-export const UTILITY_LINKS: any = [
-   {
-    __typename: "ComponentButton",
-    buttonLabel: "Residential",
-    href: "/residential",
-  },
-  {
-    __typename: "ComponentButton",
-    buttonLabel: "Business",
-    href: "/business",
-  },
- 
-];
-
-export const ACCOUNT_LINKS: any = [
-  {
-    __typename: "ComponentButtonGroup",
-    title: "My Account",
-    items: {
-      items: [
-        {
-          __typename: "ComponentButton",
-          buttonLabel: "Profile",
-          href: "/profile",
-        },
-      ],
-    },
-  },
-];
-
-export const SUPPORT_LINKS: any = [
-  {
-    __typename: "ComponentButtonGroup",
-    title: "Support",
-    items: {
-      items: [
-        {
-          __typename: "ComponentButton",
-          buttonLabel: "Help",
-          href: "/help",
-        },
-      ],
-    },
-  },
-];
+export const PRIMARY_LINKS: any = [
+  {
+    __typename: "ComponentButton",
+    buttonLabel: "Home",
+    href: "/",
+    preserveQueryParameters: false,
+  },
+  {
+    __typename: "ComponentButton",
+    buttonLabel: "Products",
+    href: "/products",
+    preserveQueryParameters: false,
+  },
+  {
+    __typename: "ComponentButtonGroup",
+    title: "Services",
+    items: {
+      items: [
+        {
+          __typename: "ComponentButton",
+          buttonLabel: "Internet",
+          href: "/internet",
+        },
+        {
+          __typename: "ComponentButton",
+          buttonLabel: "Phone",
+          href: "/phone",
+        },
+      ],
+    },
+  },
+];
+
+export const UTILITY_LINKS: any = [
+   {
+    __typename: "ComponentButton",
+    buttonLabel: "Residential",
+    href: "/residential",
+  },
+  {
+    __typename: "ComponentButton",
+    buttonLabel: "Business",
+    href: "/business",
+  },
+ 
+];
+
+export const ACCOUNT_LINKS: any = [
+  {
+    __typename: "ComponentButtonGroup",
+    title: "My Account",
+    items: {
+      items: [
+        {
+          __typename: "ComponentButton",
+          buttonLabel: "Profile",
+          href: "/profile",
+        },
+      ],
+    },
+  },
+];
+
+export const SUPPORT_LINKS: any = [
+  {
+    __typename: "ComponentButtonGroup",
+    title: "Support",
+    items: {
+      items: [
+        {
+          __typename: "ComponentButton",
+          buttonLabel: "Help",
+          href: "/help",
+        },
+      ],
+    },
+  },
+];