@windstream/react-shared-components 0.1.92 → 0.1.94

package/src/contentful/blocks/cart-retention-banner/index.tsx

@@ -1,109 +1,109 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import type { TypeCartRetentionBannerFields } from "./types";
-
-import { Text } from "@shared/components/text";
-import { Button } from "@shared/contentful/blocks/button";
-import { Modal } from "@shared/contentful/blocks/modal";
-import { renderContentfulRichText } from "@shared/hooks/contentful/use-contentful-rich-text";
-import { toDocument } from "@shared/utils/contentful/to-document";
-
-const CartRetentionBanner: React.FC<{
-  fields: TypeCartRetentionBannerFields;
-  sys?: any;
-  isInPopupContainer?: boolean;
-  onClose?: () => void;
-  onContinueCheckout?: () => void;
-  checkShouldShowBanner?: () => boolean;
-  onBannerShown?: () => void;
-}> = ({
-  fields,
-  isInPopupContainer = false,
-  onClose,
-  onContinueCheckout,
-  checkShouldShowBanner,
-  onBannerShown,
-}) => {
-  const { anchorId, mainHeading, description, cta } = fields;
-
-  const [modalOpen, setModalOpen] = useState<boolean>(false);
-
-  useEffect(() => {
-    const checkRetentionCookie = () => {
-      if (checkShouldShowBanner?.() && !modalOpen) {
-        setModalOpen(true);
-        onBannerShown?.();
-      }
-    };
-    checkRetentionCookie();
-    const timeoutId = setTimeout(checkRetentionCookie, 100);
-    return () => clearTimeout(timeoutId);
-  }, []);
-
-  const handleClose = () => {
-    onClose?.();
-    setModalOpen(false);
-  };
-
-  const continueCheckout = () => {
-    onContinueCheckout?.();
-  };
-
-  if (isInPopupContainer) {
-    return (
-      <div
-        className="pop-up-body mb-5 mt-10 w-full"
-        data-section-type={"cart-retention-banner"}
-        data-section-index={"0"}
-      >
-        <Text className="heading5 text-center lg:heading3">
-          {mainHeading || "Welcome back. Let’s finish your order"}
-        </Text>
-        {description &&
-          renderContentfulRichText(
-            toDocument(description?.json),
-            false,
-            "body1 my-4 text-center"
-          )}
-        <div className="flex w-full justify-center">
-          <Button
-            onClick={continueCheckout}
-            buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
-          />
-        </div>
-      </div>
-    );
-  }
-  return (
-    <section id={anchorId} data-testid="cart-retention-banner">
-      <Modal
-        size="sm"
-        isOpen={modalOpen}
-        onRequestClose={handleClose}
-        bodyClassName="flex items-center justify-center"
-        type="cart-retention-banner"
-      >
-        <div className="pop-up-body mb-5 mt-10 w-full">
-          <Text className="heading5 text-center lg:heading3">
-            {mainHeading || "Welcome back. Let&apos;s finish your order"}
-          </Text>
-          {description &&
-            renderContentfulRichText(
-              toDocument(description?.json),
-              false,
-              "body1 my-4 text-center"
-            )}
-          <div className="flex w-full justify-center">
-          <Button
-            onClick={continueCheckout}
-            buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
-          />
-          </div>
-        </div>
-      </Modal>
-    </section>
-  );
-};
-
-export default CartRetentionBanner;
+"use client";
+
+import { useEffect, useState } from "react";
+import type { TypeCartRetentionBannerFields } from "./types";
+
+import { Text } from "@shared/components/text";
+import { Button } from "@shared/contentful/blocks/button";
+import { Modal } from "@shared/contentful/blocks/modal";
+import { renderContentfulRichText } from "@shared/hooks/contentful/use-contentful-rich-text";
+import { toDocument } from "@shared/utils/contentful/to-document";
+
+const CartRetentionBanner: React.FC<{
+  fields: TypeCartRetentionBannerFields;
+  sys?: any;
+  isInPopupContainer?: boolean;
+  onClose?: () => void;
+  onContinueCheckout?: () => void;
+  checkShouldShowBanner?: () => boolean;
+  onBannerShown?: () => void;
+}> = ({
+  fields,
+  isInPopupContainer = false,
+  onClose,
+  onContinueCheckout,
+  checkShouldShowBanner,
+  onBannerShown,
+}) => {
+  const { anchorId, mainHeading, description, cta } = fields;
+
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    const checkRetentionCookie = () => {
+      if (checkShouldShowBanner?.() && !modalOpen) {
+        setModalOpen(true);
+        onBannerShown?.();
+      }
+    };
+    checkRetentionCookie();
+    const timeoutId = setTimeout(checkRetentionCookie, 100);
+    return () => clearTimeout(timeoutId);
+  }, []);
+
+  const handleClose = () => {
+    onClose?.();
+    setModalOpen(false);
+  };
+
+  const continueCheckout = () => {
+    onContinueCheckout?.();
+  };
+
+  if (isInPopupContainer) {
+    return (
+      <div
+        className="pop-up-body mb-5 mt-10 w-full"
+        data-section-type={"cart-retention-banner"}
+        data-section-index={"0"}
+      >
+        <Text className="heading5 text-center lg:heading3">
+          {mainHeading || "Welcome back. Let’s finish your order"}
+        </Text>
+        {description &&
+          renderContentfulRichText(
+            toDocument(description?.json),
+            false,
+            "body1 my-4 text-center"
+          )}
+        <div className="flex w-full justify-center">
+          <Button
+            onClick={continueCheckout}
+            buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
+          />
+        </div>
+      </div>
+    );
+  }
+  return (
+    <section id={anchorId} data-testid="cart-retention-banner">
+      <Modal
+        size="sm"
+        isOpen={modalOpen}
+        onRequestClose={handleClose}
+        bodyClassName="flex items-center justify-center"
+        type="cart-retention-banner"
+      >
+        <div className="pop-up-body mb-5 mt-10 w-full">
+          <Text className="heading5 text-center lg:heading3">
+            {mainHeading || "Welcome back. Let&apos;s finish your order"}
+          </Text>
+          {description &&
+            renderContentfulRichText(
+              toDocument(description?.json),
+              false,
+              "body1 my-4 text-center"
+            )}
+          <div className="flex w-full justify-center">
+            <Button
+              onClick={continueCheckout}
+              buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
+            />
+          </div>
+        </div>
+      </Modal>
+    </section>
+  );
+};
+
+export default CartRetentionBanner;

package/src/contentful/blocks/cart-retention-banner/types.ts

@@ -1,11 +1,11 @@
-export interface TypeCartRetentionBannerFields {
-  entryTitle?: string;
-  anchorId?: string;
-  mainHeading?: string;
-  description?: {
-    json: any;
-  };
-  cta?: { buttonLabel?: string; [key: string]: any };
-}
-
-export type TypeCartRetentionBanner = TypeCartRetentionBannerFields;
+export interface TypeCartRetentionBannerFields {
+  entryTitle?: string;
+  anchorId?: string;
+  mainHeading?: string;
+  description?: {
+    json: any;
+  };
+  cta?: { buttonLabel?: string; [key: string]: any };
+}
+
+export type TypeCartRetentionBanner = TypeCartRetentionBannerFields;

package/src/contentful/blocks/comparison-table/index.test.tsx

@@ -0,0 +1,114 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { ComparisonTable } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ children, as, ...props }: any) => {
+    const Tag = as || "span";
+    return <Tag {...props}>{children}</Tag>;
+  },
+}));
+
+describe("ComparisonTable", () => {
+  const defaultProps = {
+    title: "Compare Plans",
+    disclaimer: <span>* Terms and conditions apply</span>,
+    table: (
+      <table data-testid="comparison-table-content">
+        <thead>
+          <tr>
+            <th>Feature</th>
+            <th>Basic</th>
+            <th>Pro</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Speed</td>
+            <td>100 Mbps</td>
+            <td>500 Mbps</td>
+          </tr>
+        </tbody>
+      </table>
+    ),
+  };
+
+  it("renders the component container", () => {
+    const { container } = render(<ComparisonTable {...defaultProps} />);
+    expect(container.querySelector(".component-container")).toBeInTheDocument();
+  });
+
+  it("renders the title as h2", () => {
+    render(<ComparisonTable {...defaultProps} />);
+    const title = screen.getByText("Compare Plans");
+    expect(title.tagName).toBe("H2");
+  });
+
+  it("renders the table content", () => {
+    render(<ComparisonTable {...defaultProps} />);
+    expect(screen.getByTestId("comparison-table-content")).toBeInTheDocument();
+  });
+
+  it("renders the disclaimer text", () => {
+    render(<ComparisonTable {...defaultProps} />);
+    expect(
+      screen.getByText("* Terms and conditions apply")
+    ).toBeInTheDocument();
+  });
+
+  it("applies max-w-120 class when maxWidth is true (default)", () => {
+    const { container } = render(<ComparisonTable {...defaultProps} />);
+    const inner = container.querySelector(".component-container > div");
+    expect(inner?.className).toContain("max-w-120");
+    expect(inner?.className).toContain("xl:mx-auto");
+  });
+
+  it("does not apply max-w-120 class when maxWidth is false", () => {
+    const { container } = render(
+      <ComparisonTable {...defaultProps} maxWidth={false} />
+    );
+    const inner = container.querySelector(".component-container > div");
+    expect(inner?.className).not.toContain("max-w-120");
+    expect(inner?.className).not.toContain("xl:mx-auto");
+  });
+
+  it("renders comparison-table-container", () => {
+    const { container } = render(<ComparisonTable {...defaultProps} />);
+    expect(
+      container.querySelector(".comparison-table-container")
+    ).toBeInTheDocument();
+  });
+
+  it("renders without title", () => {
+    const { container } = render(
+      <ComparisonTable {...defaultProps} title={undefined} />
+    );
+    expect(container.querySelector(".component-container")).toBeInTheDocument();
+    expect(screen.queryByText("Compare Plans")).not.toBeInTheDocument();
+  });
+
+  it("renders without disclaimer", () => {
+    const { container } = render(
+      <ComparisonTable {...defaultProps} disclaimer={undefined} />
+    );
+    expect(container.querySelector(".component-container")).toBeInTheDocument();
+  });
+
+  it("renders table as a ReactNode", () => {
+    const customTable = <div data-testid="custom-table">Custom content</div>;
+    render(<ComparisonTable {...defaultProps} table={customTable} />);
+    expect(screen.getByTestId("custom-table")).toBeInTheDocument();
+  });
+
+  it("renders with correct CSS structure", () => {
+    const { container } = render(<ComparisonTable {...defaultProps} />);
+    const tableContainer = container.querySelector(
+      ".comparison-table-container"
+    );
+    expect(tableContainer?.className).toContain("mt-5");
+    expect(tableContainer?.className).toContain("p-5");
+  });
+});

package/src/contentful/blocks/comparison-table/index.tsx

@@ -1,29 +1,29 @@
-import React from "react";
-import { ComparisonTableProps } from "./types";
-
-import { Text } from "@shared/components/text";
-
-export const ComparisonTable: React.FC<ComparisonTableProps> = ({
-  title,
-  disclaimer,
-  table,
-  maxWidth = true,
-}) => {
-  return (
-    <div className="component-container">
-      <div
-        className={`mx-5 mb-5 mt-8 md:mt-18 ${maxWidth ? "max-w-120 xl:mx-auto" : ""}`}
-      >
-        <Text as="h2" className="heading2 md:heading1 md:text-center">
-          {title}
-        </Text>
-        <div className="comparison-table-container mt-5 p-5 pt-0 md:mt-10 md:px-10 md:py-9">
-          {table}
-        </div>
-        <Text as="div" className="micro mt-8 text-center">
-          {disclaimer}
-        </Text>
-      </div>
-    </div>
-  );
-};
+import React from "react";
+import { ComparisonTableProps } from "./types";
+
+import { Text } from "@shared/components/text";
+
+export const ComparisonTable: React.FC<ComparisonTableProps> = ({
+  title,
+  disclaimer,
+  table,
+  maxWidth = true,
+}) => {
+  return (
+    <div className="component-container">
+      <div
+        className={`mx-5 mb-5 mt-8 md:mt-18 ${maxWidth ? "max-w-120 xl:mx-auto" : ""}`}
+      >
+        <Text as="h2" className="heading2 md:heading1 md:text-center">
+          {title}
+        </Text>
+        <div className="comparison-table-container mt-5 p-5 pt-0 md:mt-10 md:px-10 md:py-9">
+          {table}
+        </div>
+        <Text as="div" className="micro mt-8 text-center">
+          {disclaimer}
+        </Text>
+      </div>
+    </div>
+  );
+};

package/src/contentful/blocks/comparison-table/types.ts

@@ -1,6 +1,6 @@
-export type ComparisonTableProps = {
-  title?: string;
-  disclaimer?: React.ReactNode;
-  table: React.ReactNode;
-  maxWidth?: boolean;
-};
+export type ComparisonTableProps = {
+  title?: string;
+  disclaimer?: React.ReactNode;
+  table: React.ReactNode;
+  maxWidth?: boolean;
+};