@windstream/react-shared-components 0.1.94 → 0.1.96

package/src/contentful/blocks/cta-callout/index.test.tsx

@@ -1,244 +1,244 @@
-import "@testing-library/jest-dom";
-
-import React from "react";
-import { CtaCallout } from "./index";
-import { CtaCalloutProps } from "./types";
-
-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>;
-  },
-}));
-
-jest.mock("@shared/contentful/blocks/button", () => ({
-  Button: (props: any) => (
-    <button
-      data-testid="cta-button"
-      data-size={JSON.stringify(props.size)}
-      data-href={props.href}
-    >
-      {props.buttonLabel || props.children}
-    </button>
-  ),
-}));
-
-describe("CtaCallout", () => {
-  const defaultProps: CtaCalloutProps = {
-    title: "Get Started Today",
-    subTitle: "Best Internet Plans",
-    description: <p>Choose the plan that works for you.</p>,
-    button: { buttonLabel: "Shop Now", href: "/shop" },
-    background: "white",
-    color: "dark",
-    contentAlignment: "center",
-    descriptionAlignment: "center",
-  };
-
-  it("renders the component", () => {
-    const { container } = render(<CtaCallout {...defaultProps} />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  it("renders title as h2 by default", () => {
-    render(<CtaCallout {...defaultProps} />);
-    const title = screen.getByText("Get Started Today");
-    expect(title.tagName).toBe("H2");
-  });
-
-  it("renders title as h1 when enableHeading is true", () => {
-    render(<CtaCallout {...defaultProps} enableHeading={true} />);
-    const title = screen.getByText("Get Started Today");
-    expect(title.tagName).toBe("H1");
-  });
-
-  it("renders subtitle as h3", () => {
-    render(<CtaCallout {...defaultProps} />);
-    const subtitle = screen.getByText("Best Internet Plans");
-    expect(subtitle.tagName).toBe("H3");
-  });
-
-  it("renders description", () => {
-    render(<CtaCallout {...defaultProps} />);
-    expect(
-      screen.getByText("Choose the plan that works for you.")
-    ).toBeInTheDocument();
-  });
-
-  it("renders the button", () => {
-    render(<CtaCallout {...defaultProps} />);
-    expect(screen.getByTestId("cta-button")).toBeInTheDocument();
-  });
-
-  it("does not render title when not provided", () => {
-    render(<CtaCallout {...defaultProps} title={undefined} />);
-    expect(screen.queryByText("Get Started Today")).not.toBeInTheDocument();
-  });
-
-  it("does not render subtitle when not provided", () => {
-    render(<CtaCallout {...defaultProps} subTitle={undefined} />);
-    expect(screen.queryByText("Best Internet Plans")).not.toBeInTheDocument();
-  });
-
-  it("does not render description when not provided", () => {
-    render(<CtaCallout {...defaultProps} description={undefined} />);
-    expect(
-      screen.queryByText("Choose the plan that works for you.")
-    ).not.toBeInTheDocument();
-  });
-
-  describe("background colors", () => {
-    it("applies white background class", () => {
-      const { container } = render(
-        <CtaCallout {...defaultProps} background="white" />
-      );
-      expect(container.firstChild).toHaveClass("bg-bg");
-    });
-
-    it("applies navy background class", () => {
-      const { container } = render(
-        <CtaCallout {...defaultProps} background="navy" />
-      );
-      expect(container.firstChild).toHaveClass("bg-bg-fill-inverse");
-    });
-
-    it("applies blue background class", () => {
-      const { container } = render(
-        <CtaCallout {...defaultProps} background="blue" />
-      );
-      expect(container.firstChild).toHaveClass("bg-bg-fill-brand");
-    });
-
-    it("applies green background class", () => {
-      const { container } = render(
-        <CtaCallout {...defaultProps} background="green" />
-      );
-      expect(container.firstChild).toHaveClass("bg-bg-fill-success");
-    });
-
-    it("applies purple background class", () => {
-      const { container } = render(
-        <CtaCallout {...defaultProps} background="purple" />
-      );
-      expect(container.firstChild).toHaveClass("bg-bg-fill-brand-tertiary");
-    });
-
-    it("applies yellow background class", () => {
-      const { container } = render(
-        <CtaCallout {...defaultProps} background="yellow" />
-      );
-      expect(container.firstChild).toHaveClass("bg-bg-fill-brand-accent");
-    });
-  });
-
-  describe("text colors", () => {
-    it("applies dark text color", () => {
-      const { container } = render(
-        <CtaCallout {...defaultProps} color="dark" />
-      );
-      const inner = container.querySelector(".flex.flex-col");
-      expect(inner?.className).toContain("text-text");
-    });
-
-    it("applies light text color", () => {
-      const { container } = render(
-        <CtaCallout {...defaultProps} color="light" />
-      );
-      const inner = container.querySelector(".flex.flex-col");
-      expect(inner?.className).toContain("text-text-inverse");
-    });
-  });
-
-  describe("alignment", () => {
-    it("applies content alignment to title", () => {
-      render(<CtaCallout {...defaultProps} contentAlignment="left" />);
-      const title = screen.getByText("Get Started Today");
-      expect(title.className).toContain("text-left");
-    });
-
-    it("applies content alignment to subtitle", () => {
-      render(<CtaCallout {...defaultProps} contentAlignment="right" />);
-      const subtitle = screen.getByText("Best Internet Plans");
-      expect(subtitle.className).toContain("text-right");
-    });
-
-    it("applies description alignment", () => {
-      render(<CtaCallout {...defaultProps} descriptionAlignment="left" />);
-      const descWrapper = screen
-        .getByText("Choose the plan that works for you.")
-        .closest("div");
-      expect(descWrapper?.className).toContain("text-left");
-    });
-  });
-
-  describe("maxWidth", () => {
-    it("applies max-w-120 when maxWidth is true (default)", () => {
-      const { container } = render(<CtaCallout {...defaultProps} />);
-      const inner = container.querySelector(".flex.flex-col");
-      expect(inner?.className).toContain("max-w-120");
-      expect(inner?.className).toContain("mx-auto");
-    });
-
-    it("does not apply max-w-120 when maxWidth is false", () => {
-      const { container } = render(
-        <CtaCallout {...defaultProps} maxWidth={false} />
-      );
-      const inner = container.querySelector(".flex.flex-col");
-      expect(inner?.className).not.toContain("max-w-120");
-    });
-  });
-
-  describe("button props", () => {
-    it("passes button props to Button component", () => {
-      render(<CtaCallout {...defaultProps} />);
-      const button = screen.getByTestId("cta-button");
-      expect(button).toHaveAttribute("data-href", "/shop");
-    });
-
-    it("passes size prop with base large", () => {
-      render(<CtaCallout {...defaultProps} />);
-      const button = screen.getByTestId("cta-button");
-      expect(button.dataset.size).toContain("large");
-    });
-
-    it("passes onModalButtonClick to Button", () => {
-      const onModalButtonClick = jest.fn();
-      render(
-        <CtaCallout {...defaultProps} onModalButtonClick={onModalButtonClick} />
-      );
-      const button = screen.getByTestId("cta-button");
-      expect(button).toBeInTheDocument();
-    });
-
-    it("passes renderCheckPlans to Button", () => {
-      const renderCheckPlans = jest.fn();
-      render(
-        <CtaCallout {...defaultProps} renderCheckPlans={renderCheckPlans} />
-      );
-      const button = screen.getByTestId("cta-button");
-      expect(button).toBeInTheDocument();
-    });
-  });
-
-  describe("section rendering", () => {
-    it("has component-container class", () => {
-      const { container } = render(<CtaCallout {...defaultProps} />);
-      expect(container.firstChild).toHaveClass("component-container");
-    });
-
-    it("has correct padding classes", () => {
-      const { container } = render(<CtaCallout {...defaultProps} />);
-      expect(container.firstChild).toHaveClass("px-5");
-      expect(container.firstChild).toHaveClass("py-16");
-    });
-
-    it("button container has flex and justify-center", () => {
-      render(<CtaCallout {...defaultProps} />);
-      const buttonWrapper = screen.getByTestId("cta-button").parentElement;
-      expect(buttonWrapper?.className).toContain("flex");
-      expect(buttonWrapper?.className).toContain("justify-center");
-    });
-  });
-});
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { CtaCallout } from "./index";
+import { CtaCalloutProps } from "./types";
+
+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>;
+  },
+}));
+
+jest.mock("@shared/contentful/blocks/button", () => ({
+  Button: (props: any) => (
+    <button
+      data-testid="cta-button"
+      data-size={JSON.stringify(props.size)}
+      data-href={props.href}
+    >
+      {props.buttonLabel || props.children}
+    </button>
+  ),
+}));
+
+describe("CtaCallout", () => {
+  const defaultProps: CtaCalloutProps = {
+    title: "Get Started Today",
+    subTitle: "Best Internet Plans",
+    description: <p>Choose the plan that works for you.</p>,
+    button: { buttonLabel: "Shop Now", href: "/shop" },
+    background: "white",
+    color: "dark",
+    contentAlignment: "center",
+    descriptionAlignment: "center",
+  };
+
+  it("renders the component", () => {
+    const { container } = render(<CtaCallout {...defaultProps} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it("renders title as h2 by default", () => {
+    render(<CtaCallout {...defaultProps} />);
+    const title = screen.getByText("Get Started Today");
+    expect(title.tagName).toBe("H2");
+  });
+
+  it("renders title as h1 when enableHeading is true", () => {
+    render(<CtaCallout {...defaultProps} enableHeading={true} />);
+    const title = screen.getByText("Get Started Today");
+    expect(title.tagName).toBe("H1");
+  });
+
+  it("renders subtitle as h3", () => {
+    render(<CtaCallout {...defaultProps} />);
+    const subtitle = screen.getByText("Best Internet Plans");
+    expect(subtitle.tagName).toBe("H3");
+  });
+
+  it("renders description", () => {
+    render(<CtaCallout {...defaultProps} />);
+    expect(
+      screen.getByText("Choose the plan that works for you.")
+    ).toBeInTheDocument();
+  });
+
+  it("renders the button", () => {
+    render(<CtaCallout {...defaultProps} />);
+    expect(screen.getByTestId("cta-button")).toBeInTheDocument();
+  });
+
+  it("does not render title when not provided", () => {
+    render(<CtaCallout {...defaultProps} title={undefined} />);
+    expect(screen.queryByText("Get Started Today")).not.toBeInTheDocument();
+  });
+
+  it("does not render subtitle when not provided", () => {
+    render(<CtaCallout {...defaultProps} subTitle={undefined} />);
+    expect(screen.queryByText("Best Internet Plans")).not.toBeInTheDocument();
+  });
+
+  it("does not render description when not provided", () => {
+    render(<CtaCallout {...defaultProps} description={undefined} />);
+    expect(
+      screen.queryByText("Choose the plan that works for you.")
+    ).not.toBeInTheDocument();
+  });
+
+  describe("background colors", () => {
+    it("applies white background class", () => {
+      const { container } = render(
+        <CtaCallout {...defaultProps} background="white" />
+      );
+      expect(container.firstChild).toHaveClass("bg-bg");
+    });
+
+    it("applies navy background class", () => {
+      const { container } = render(
+        <CtaCallout {...defaultProps} background="navy" />
+      );
+      expect(container.firstChild).toHaveClass("bg-bg-fill-inverse");
+    });
+
+    it("applies blue background class", () => {
+      const { container } = render(
+        <CtaCallout {...defaultProps} background="blue" />
+      );
+      expect(container.firstChild).toHaveClass("bg-bg-fill-brand");
+    });
+
+    it("applies green background class", () => {
+      const { container } = render(
+        <CtaCallout {...defaultProps} background="green" />
+      );
+      expect(container.firstChild).toHaveClass("bg-bg-fill-success");
+    });
+
+    it("applies purple background class", () => {
+      const { container } = render(
+        <CtaCallout {...defaultProps} background="purple" />
+      );
+      expect(container.firstChild).toHaveClass("bg-bg-fill-brand-tertiary");
+    });
+
+    it("applies yellow background class", () => {
+      const { container } = render(
+        <CtaCallout {...defaultProps} background="yellow" />
+      );
+      expect(container.firstChild).toHaveClass("bg-bg-fill-brand-accent");
+    });
+  });
+
+  describe("text colors", () => {
+    it("applies dark text color", () => {
+      const { container } = render(
+        <CtaCallout {...defaultProps} color="dark" />
+      );
+      const inner = container.querySelector(".flex.flex-col");
+      expect(inner?.className).toContain("text-text");
+    });
+
+    it("applies light text color", () => {
+      const { container } = render(
+        <CtaCallout {...defaultProps} color="light" />
+      );
+      const inner = container.querySelector(".flex.flex-col");
+      expect(inner?.className).toContain("text-text-inverse");
+    });
+  });
+
+  describe("alignment", () => {
+    it("applies content alignment to title", () => {
+      render(<CtaCallout {...defaultProps} contentAlignment="left" />);
+      const title = screen.getByText("Get Started Today");
+      expect(title.className).toContain("text-left");
+    });
+
+    it("applies content alignment to subtitle", () => {
+      render(<CtaCallout {...defaultProps} contentAlignment="right" />);
+      const subtitle = screen.getByText("Best Internet Plans");
+      expect(subtitle.className).toContain("text-right");
+    });
+
+    it("applies description alignment", () => {
+      render(<CtaCallout {...defaultProps} descriptionAlignment="left" />);
+      const descWrapper = screen
+        .getByText("Choose the plan that works for you.")
+        .closest("div");
+      expect(descWrapper?.className).toContain("text-left");
+    });
+  });
+
+  describe("maxWidth", () => {
+    it("applies max-w-120 when maxWidth is true (default)", () => {
+      const { container } = render(<CtaCallout {...defaultProps} />);
+      const inner = container.querySelector(".flex.flex-col");
+      expect(inner?.className).toContain("max-w-120");
+      expect(inner?.className).toContain("mx-auto");
+    });
+
+    it("does not apply max-w-120 when maxWidth is false", () => {
+      const { container } = render(
+        <CtaCallout {...defaultProps} maxWidth={false} />
+      );
+      const inner = container.querySelector(".flex.flex-col");
+      expect(inner?.className).not.toContain("max-w-120");
+    });
+  });
+
+  describe("button props", () => {
+    it("passes button props to Button component", () => {
+      render(<CtaCallout {...defaultProps} />);
+      const button = screen.getByTestId("cta-button");
+      expect(button).toHaveAttribute("data-href", "/shop");
+    });
+
+    it("passes size prop with base large", () => {
+      render(<CtaCallout {...defaultProps} />);
+      const button = screen.getByTestId("cta-button");
+      expect(button.dataset.size).toContain("large");
+    });
+
+    it("passes onModalButtonClick to Button", () => {
+      const onModalButtonClick = jest.fn();
+      render(
+        <CtaCallout {...defaultProps} onModalButtonClick={onModalButtonClick} />
+      );
+      const button = screen.getByTestId("cta-button");
+      expect(button).toBeInTheDocument();
+    });
+
+    it("passes renderCheckPlans to Button", () => {
+      const renderCheckPlans = jest.fn();
+      render(
+        <CtaCallout {...defaultProps} renderCheckPlans={renderCheckPlans} />
+      );
+      const button = screen.getByTestId("cta-button");
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe("section rendering", () => {
+    it("has component-container class", () => {
+      const { container } = render(<CtaCallout {...defaultProps} />);
+      expect(container.firstChild).toHaveClass("component-container");
+    });
+
+    it("has correct padding classes", () => {
+      const { container } = render(<CtaCallout {...defaultProps} />);
+      expect(container.firstChild).toHaveClass("px-5");
+      expect(container.firstChild).toHaveClass("py-16");
+    });
+
+    it("button container has flex and justify-center", () => {
+      render(<CtaCallout {...defaultProps} />);
+      const buttonWrapper = screen.getByTestId("cta-button").parentElement;
+      expect(buttonWrapper?.className).toContain("flex");
+      expect(buttonWrapper?.className).toContain("justify-center");
+    });
+  });
+});

package/src/contentful/blocks/cta-callout/index.tsx

@@ -1,73 +1,73 @@
-import React from "react";
-import { CtaCalloutProps, ThemeKey } from "./types";
-
-import { Text } from "@shared/components/text";
-import { Button } from "@shared/contentful/blocks/button";
-
-export const CtaCallout: React.FC<CtaCalloutProps> = ({
-  title,
-  background = "white",
-  button,
-  color,
-  contentAlignment,
-  description,
-  descriptionAlignment,
-  enableHeading,
-  subTitle,
-  maxWidth = true,
-  onModalButtonClick,
-  renderCheckPlans,
-}) => {
-  const bgColorClasses: Record<ThemeKey, string> = {
-    navy: "bg-bg-fill-inverse",
-    green: "bg-bg-fill-success",
-    blue: "bg-bg-fill-brand",
-    purple: "bg-bg-fill-brand-tertiary",
-    yellow: "bg-bg-fill-brand-accent",
-    white: "bg-bg",
-  };
-  return (
-    <div
-      className={`${bgColorClasses[background]} component-container px-5 py-16 lg:px-13 lg:py-24`}
-    >
-      <div
-        className={`${maxWidth ? "mx-auto max-w-120" : ""} color-${color} flex flex-col ${color == "dark" ? "text-text" : "text-text-inverse"}`}
-      >
-        {title && (
-          <Text
-            as={enableHeading ? "h1" : "h2"}
-            className={`heading2 lg:heading1 text-${contentAlignment}`}
-          >
-            {title}
-          </Text>
-        )}
-        {subTitle && (
-          <Text
-            as="h3"
-            className={`subheading3 pt-2 lg:subheading1 lg:pt-3 text-${contentAlignment}`}
-          >
-            {subTitle}
-          </Text>
-        )}
-        {description && (
-          <div
-            className={`pt-2 text-body1 lg:pt-3 text-${descriptionAlignment}`}
-          >
-            {description}
-          </div>
-        )}
-        {button || renderCheckPlans ? (
-          <div className="flex justify-center pt-5 lg:pt-14">
-            <Button
-              {...button}
-              renderCheckPlans={renderCheckPlans}
-              onModalButtonClick={onModalButtonClick}
-              size={{ base: "large" }}
-            />
-          </div>
-        ) : null}
-      </div>
-    </div>
-  );
-};
-export default CtaCallout;
+import React from "react";
+import { CtaCalloutProps, ThemeKey } from "./types";
+
+import { Text } from "@shared/components/text";
+import { Button } from "@shared/contentful/blocks/button";
+
+export const CtaCallout: React.FC<CtaCalloutProps> = ({
+  title,
+  background = "white",
+  button,
+  color,
+  contentAlignment,
+  description,
+  descriptionAlignment,
+  enableHeading,
+  subTitle,
+  maxWidth = true,
+  onModalButtonClick,
+  renderCheckPlans,
+}) => {
+  const bgColorClasses: Record<ThemeKey, string> = {
+    navy: "bg-bg-fill-inverse",
+    green: "bg-bg-fill-success",
+    blue: "bg-bg-fill-brand",
+    purple: "bg-bg-fill-brand-tertiary",
+    yellow: "bg-bg-fill-brand-accent",
+    white: "bg-bg",
+  };
+  return (
+    <div
+      className={`${bgColorClasses[background]} component-container px-5 py-16 lg:px-13 lg:py-24`}
+    >
+      <div
+        className={`${maxWidth ? "mx-auto max-w-120" : ""} color-${color} flex flex-col ${color == "dark" ? "text-text" : "text-text-inverse"}`}
+      >
+        {title && (
+          <Text
+            as={enableHeading ? "h1" : "h2"}
+            className={`heading2 lg:heading1 text-${contentAlignment}`}
+          >
+            {title}
+          </Text>
+        )}
+        {subTitle && (
+          <Text
+            as="h3"
+            className={`subheading3 pt-2 lg:subheading1 lg:pt-3 text-${contentAlignment}`}
+          >
+            {subTitle}
+          </Text>
+        )}
+        {description && (
+          <div
+            className={`pt-2 text-body1 lg:pt-3 text-${descriptionAlignment}`}
+          >
+            {description}
+          </div>
+        )}
+        {button || renderCheckPlans ? (
+          <div className="flex justify-center pt-5 lg:pt-14">
+            <Button
+              {...button}
+              renderCheckPlans={renderCheckPlans}
+              onModalButtonClick={onModalButtonClick}
+              size={{ base: "large" }}
+            />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+export default CtaCallout;