@windstream/react-shared-components 0.2.53 → 0.2.54

package/src/contentful/blocks/award-marquee/index.test.tsx

@@ -1,86 +1,86 @@
-import "@testing-library/jest-dom";
-
-import React from "react";
-import { AwardMarquee } from "./index";
-import { AwardMarqueeItem } from "./types";
-
-import { render, screen } from "@testing-library/react";
-
-const buildItems = (count: number): AwardMarqueeItem[] =>
-  Array.from({ length: count }, (_, index) => ({
-    iconUrl: `https://example.com/icon-${index}.png`,
-    iconAlt: `Award ${index}`,
-    title: `Award ${index}`,
-    description: `Description ${index}`,
-  }));
-
-describe("AwardMarquee", () => {
-  it("renders award items synchronously (SSR, no hydration gate)", () => {
-    render(<AwardMarquee items={buildItems(2)} />);
-    expect(screen.getByText("Award 0")).toBeInTheDocument();
-    expect(screen.getByText("Award 1")).toBeInTheDocument();
-  });
-
-  it("renders the icon with its alt text", () => {
-    render(<AwardMarquee items={buildItems(1)} />);
-    const icon = screen.getByAltText("Award 0") as HTMLImageElement;
-    expect(icon).toBeInTheDocument();
-    expect(icon.src).toContain("icon-0.png");
-  });
-
-  it("renders a static (non-animated) list when scroll is disabled", () => {
-    const { container } = render(
-      <AwardMarquee items={buildItems(5)} scroll={false} />
-    );
-    expect(container.querySelector(".animate-award-marquee")).toBeNull();
-  });
-
-  it("animates at every breakpoint when scroll is enabled with more than 3 items", () => {
-    const { container } = render(
-      <AwardMarquee items={buildItems(5)} scroll={true} />
-    );
-    expect(container.querySelector(".animate-award-marquee")).not.toBeNull();
-    // No breakpoint split -> no mobile-only wrapper.
-    expect(container.querySelector(".sm\\:hidden")).toBeNull();
-  });
-
-  it("renders both mobile (animated) and desktop (static) variants when scroll is enabled with 3 or fewer items", () => {
-    const { container } = render(
-      <AwardMarquee items={buildItems(2)} scroll={true} />
-    );
-    // Mobile variant animates and is hidden from >= sm.
-    expect(container.querySelector(".sm\\:hidden")).not.toBeNull();
-    expect(container.querySelector(".animate-award-marquee")).not.toBeNull();
-    // Desktop variant is a static list shown only at >= sm.
-    expect(container.querySelector(".hidden.sm\\:block")).not.toBeNull();
-    // 2 items duplicated for the animated loop (4) + 2 in the static list.
-    expect(screen.getAllByText("Award 0")).toHaveLength(3);
-  });
-
-  it("applies the anchorId to the wrapper in every render branch", () => {
-    const staticView = render(
-      <AwardMarquee
-        items={buildItems(2)}
-        scroll={false}
-        anchorId="static-anchor"
-      />
-    );
-    expect(staticView.container.querySelector("#static-anchor")).not.toBeNull();
-
-    const animatedView = render(
-      <AwardMarquee
-        items={buildItems(5)}
-        scroll={true}
-        anchorId="animated-anchor"
-      />
-    );
-    expect(
-      animatedView.container.querySelector("#animated-anchor")
-    ).not.toBeNull();
-
-    const splitView = render(
-      <AwardMarquee items={buildItems(2)} scroll={true} anchorId="split-anchor" />
-    );
-    expect(splitView.container.querySelector("#split-anchor")).not.toBeNull();
-  });
-});
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { AwardMarquee } from "./index";
+import { AwardMarqueeItem } from "./types";
+
+import { render, screen } from "@testing-library/react";
+
+const buildItems = (count: number): AwardMarqueeItem[] =>
+  Array.from({ length: count }, (_, index) => ({
+    iconUrl: `https://example.com/icon-${index}.png`,
+    iconAlt: `Award ${index}`,
+    title: `Award ${index}`,
+    description: `Description ${index}`,
+  }));
+
+describe("AwardMarquee", () => {
+  it("renders award items synchronously (SSR, no hydration gate)", () => {
+    render(<AwardMarquee items={buildItems(2)} />);
+    expect(screen.getByText("Award 0")).toBeInTheDocument();
+    expect(screen.getByText("Award 1")).toBeInTheDocument();
+  });
+
+  it("renders the icon with its alt text", () => {
+    render(<AwardMarquee items={buildItems(1)} />);
+    const icon = screen.getByAltText("Award 0") as HTMLImageElement;
+    expect(icon).toBeInTheDocument();
+    expect(icon.src).toContain("icon-0.png");
+  });
+
+  it("renders a static (non-animated) list when scroll is disabled", () => {
+    const { container } = render(
+      <AwardMarquee items={buildItems(5)} scroll={false} />
+    );
+    expect(container.querySelector(".animate-award-marquee")).toBeNull();
+  });
+
+  it("animates at every breakpoint when scroll is enabled with more than 3 items", () => {
+    const { container } = render(
+      <AwardMarquee items={buildItems(5)} scroll={true} />
+    );
+    expect(container.querySelector(".animate-award-marquee")).not.toBeNull();
+    // No breakpoint split -> no mobile-only wrapper.
+    expect(container.querySelector(".sm\\:hidden")).toBeNull();
+  });
+
+  it("renders both mobile (animated) and desktop (static) variants when scroll is enabled with 3 or fewer items", () => {
+    const { container } = render(
+      <AwardMarquee items={buildItems(2)} scroll={true} />
+    );
+    // Mobile variant animates and is hidden from >= sm.
+    expect(container.querySelector(".sm\\:hidden")).not.toBeNull();
+    expect(container.querySelector(".animate-award-marquee")).not.toBeNull();
+    // Desktop variant is a static list shown only at >= sm.
+    expect(container.querySelector(".hidden.sm\\:block")).not.toBeNull();
+    // 2 items duplicated for the animated loop (4) + 2 in the static list.
+    expect(screen.getAllByText("Award 0")).toHaveLength(3);
+  });
+
+  it("applies the anchorId to the wrapper in every render branch", () => {
+    const staticView = render(
+      <AwardMarquee
+        items={buildItems(2)}
+        scroll={false}
+        anchorId="static-anchor"
+      />
+    );
+    expect(staticView.container.querySelector("#static-anchor")).not.toBeNull();
+
+    const animatedView = render(
+      <AwardMarquee
+        items={buildItems(5)}
+        scroll={true}
+        anchorId="animated-anchor"
+      />
+    );
+    expect(
+      animatedView.container.querySelector("#animated-anchor")
+    ).not.toBeNull();
+
+    const splitView = render(
+      <AwardMarquee items={buildItems(2)} scroll={true} anchorId="split-anchor" />
+    );
+    expect(splitView.container.querySelector("#split-anchor")).not.toBeNull();
+  });
+});

package/src/contentful/blocks/award-marquee/index.tsx

@@ -1,110 +1,110 @@
-import React from "react";
-import {
-  AwardMarqueeBackground,
-  AwardMarqueeItem,
-  AwardMarqueeProps,
-  AwardMarqueeSpeed,
-} from "./types";
-
-import { cx } from "@shared/utils";
-
-const DURATION_IN_SECONDS: Record<AwardMarqueeSpeed, number> = {
-  slow: 30,
-  medium: 20,
-  fast: 10,
-};
-
-const BACKGROUND_CLASS: Record<AwardMarqueeBackground, string> = {
-  cream: "bg-[#FFFEEF]",
-  gray90: "bg-[#FBFBFC]",
-  white: "bg-white",
-};
-
-const renderAwardItem = (
-  { iconUrl, iconAlt, title, description }: AwardMarqueeItem,
-  key: React.Key
-) => (
-  <div
-    key={key}
-    className="ml-4 flex w-auto flex-shrink-0 items-center whitespace-nowrap"
-  >
-    <img src={iconUrl} alt={iconAlt ?? ""} width={200} />
-    <div className="w-[250px] text-center">
-      <p className="flex justify-center text-center text-body3 font-bold">
-        {title}
-      </p>
-      <p className="flex flex-wrap whitespace-normal text-center text-footnote">
-        {description}
-      </p>
-    </div>
-  </div>
-);
-
-export const AwardMarquee: React.FC<AwardMarqueeProps> = ({
-  anchorId = "Award-Marquee",
-  items = [],
-  speed = "medium",
-  scroll = false,
-  backgroundColor = "white",
-  className,
-}) => {
-  const scrollAvailable = items.length > 3;
-  const shouldDuplicate = items.length < 8;
-  const duration = DURATION_IN_SECONDS[speed];
-
-  const animatedMarquee = () => {
-    const marqueeItems = shouldDuplicate ? [...items, ...items] : items;
-
-    return (
-      <div
-        className={cx(
-          "flex items-center overflow-x-hidden",
-          BACKGROUND_CLASS[backgroundColor]
-        )}
-      >
-        <div
-          className="flex animate-award-marquee gap-4 px-2"
-          style={
-            {
-              "--award-marquee-duration": `${duration}s`,
-            } as React.CSSProperties
-          }
-        >
-          {marqueeItems.map((item, index) => renderAwardItem(item, index))}
-        </div>
-      </div>
-    );
-  };
-
-  const staticMarquee = (
-    <div className="flex flex-nowrap items-center justify-around overflow-clip">
-      {items.map((item, index) => renderAwardItem(item, index))}
-    </div>
-  );
-
-  // No scroll: always static at every breakpoint.
-  if (!scroll)
-    return (
-      <div id={anchorId} className={className}>
-        {staticMarquee}
-      </div>
-    );
-
-  // Scroll with >3 items: animate at every breakpoint.
-  if (scrollAvailable)
-    return (
-      <div id={anchorId} className={className}>
-        {animatedMarquee()}
-      </div>
-    );
-
-  // Scroll with <=3 items: animate on mobile, static on >= sm (CSS-driven).
-  return (
-    <div id={anchorId} className={className}>
-      <div className="sm:hidden">{animatedMarquee()}</div>
-      <div className="hidden sm:block">{staticMarquee}</div>
-    </div>
-  );
-};
-
-export default AwardMarquee;
+import React from "react";
+import {
+  AwardMarqueeBackground,
+  AwardMarqueeItem,
+  AwardMarqueeProps,
+  AwardMarqueeSpeed,
+} from "./types";
+
+import { cx } from "@shared/utils";
+
+const DURATION_IN_SECONDS: Record<AwardMarqueeSpeed, number> = {
+  slow: 30,
+  medium: 20,
+  fast: 10,
+};
+
+const BACKGROUND_CLASS: Record<AwardMarqueeBackground, string> = {
+  cream: "bg-[#FFFEEF]",
+  gray90: "bg-[#FBFBFC]",
+  white: "bg-white",
+};
+
+const renderAwardItem = (
+  { iconUrl, iconAlt, title, description }: AwardMarqueeItem,
+  key: React.Key
+) => (
+  <div
+    key={key}
+    className="ml-4 flex w-auto flex-shrink-0 items-center whitespace-nowrap"
+  >
+    <img src={iconUrl} alt={iconAlt ?? ""} width={200} />
+    <div className="w-[250px] text-center">
+      <p className="flex justify-center text-center text-body3 font-bold">
+        {title}
+      </p>
+      <p className="flex flex-wrap whitespace-normal text-center text-footnote">
+        {description}
+      </p>
+    </div>
+  </div>
+);
+
+export const AwardMarquee: React.FC<AwardMarqueeProps> = ({
+  anchorId = "Award-Marquee",
+  items = [],
+  speed = "medium",
+  scroll = false,
+  backgroundColor = "white",
+  className,
+}) => {
+  const scrollAvailable = items.length > 3;
+  const shouldDuplicate = items.length < 8;
+  const duration = DURATION_IN_SECONDS[speed];
+
+  const animatedMarquee = () => {
+    const marqueeItems = shouldDuplicate ? [...items, ...items] : items;
+
+    return (
+      <div
+        className={cx(
+          "flex items-center overflow-x-hidden",
+          BACKGROUND_CLASS[backgroundColor]
+        )}
+      >
+        <div
+          className="flex animate-award-marquee gap-4 px-2"
+          style={
+            {
+              "--award-marquee-duration": `${duration}s`,
+            } as React.CSSProperties
+          }
+        >
+          {marqueeItems.map((item, index) => renderAwardItem(item, index))}
+        </div>
+      </div>
+    );
+  };
+
+  const staticMarquee = (
+    <div className="flex flex-nowrap items-center justify-around overflow-clip">
+      {items.map((item, index) => renderAwardItem(item, index))}
+    </div>
+  );
+
+  // No scroll: always static at every breakpoint.
+  if (!scroll)
+    return (
+      <div id={anchorId} className={className}>
+        {staticMarquee}
+      </div>
+    );
+
+  // Scroll with >3 items: animate at every breakpoint.
+  if (scrollAvailable)
+    return (
+      <div id={anchorId} className={className}>
+        {animatedMarquee()}
+      </div>
+    );
+
+  // Scroll with <=3 items: animate on mobile, static on >= sm (CSS-driven).
+  return (
+    <div id={anchorId} className={className}>
+      <div className="sm:hidden">{animatedMarquee()}</div>
+      <div className="hidden sm:block">{staticMarquee}</div>
+    </div>
+  );
+};
+
+export default AwardMarquee;

package/src/contentful/blocks/award-marquee/types.ts

@@ -1,19 +1,19 @@
-export type AwardMarqueeSpeed = "fast" | "medium" | "slow";
-
-export type AwardMarqueeBackground = "cream" | "gray90" | "white";
-
-export type AwardMarqueeItem = {
-  iconUrl: string;
-  iconAlt?: string;
-  title?: string;
-  description?: string;
-};
-
-export type AwardMarqueeProps = {
-  anchorId?: string;
-  items: AwardMarqueeItem[];
-  speed?: AwardMarqueeSpeed;
-  scroll?: boolean;
-  backgroundColor?: AwardMarqueeBackground;
-  className?: string;
-};
+export type AwardMarqueeSpeed = "fast" | "medium" | "slow";
+
+export type AwardMarqueeBackground = "cream" | "gray90" | "white";
+
+export type AwardMarqueeItem = {
+  iconUrl: string;
+  iconAlt?: string;
+  title?: string;
+  description?: string;
+};
+
+export type AwardMarqueeProps = {
+  anchorId?: string;
+  items: AwardMarqueeItem[];
+  speed?: AwardMarqueeSpeed;
+  scroll?: boolean;
+  backgroundColor?: AwardMarqueeBackground;
+  className?: string;
+};

package/src/contentful/blocks/fiber-form/index.test.tsx

@@ -0,0 +1,97 @@
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import * as Yup from "yup";
+import { FiberForm } from ".";
+import type { FiberFormValues } from "./types";
+
+jest.mock("@vimeo/player", () => jest.fn(), { virtual: true });
+
+const initialValues: FiberFormValues = {
+  firstName: "",
+  lastName: "",
+  address: "",
+  phone: "",
+  email: "",
+  unit: "",
+  zip: "",
+  isManualAddress: false,
+  isMarketingCom: false,
+  addressToSend: {},
+  notes: "",
+  referralCode: "",
+  hasUnits: false,
+};
+
+const AddressAutocomplete = () => null;
+
+const deferred = () => {
+  let resolve!: () => void;
+  let reject!: (error: Error) => void;
+  const promise = new Promise<void>((resolvePromise, rejectPromise) => {
+    resolve = resolvePromise;
+    reject = rejectPromise;
+  });
+  return { promise, resolve, reject };
+};
+
+const renderForm = (onSubmit: (values: FiberFormValues) => Promise<void>) =>
+  render(
+    <FiberForm
+      AddressAutocomplete={AddressAutocomplete}
+      initialValues={initialValues}
+      inputList={{}}
+      formSchema={Yup.object({})}
+      onSubmit={onSubmit}
+      buttonText="Submit"
+      hideLegalCopy={true}
+    />
+  );
+
+describe("FiberForm submit loading state", () => {
+  it("shows a spinner and disables submit until submission resolves", async () => {
+    const submission = deferred();
+    const onSubmit = jest.fn(() => submission.promise);
+    renderForm(onSubmit);
+    const button = screen.getByRole("button", { name: /submit/i });
+
+    expect(button).toHaveClass("w-[198px]", "max-w-full");
+
+    fireEvent.click(button);
+
+    await waitFor(() => expect(button).toBeDisabled());
+    expect(button).toHaveAttribute("aria-busy", "true");
+    expect(button).toHaveClass("opacity-75");
+    expect(screen.getByRole("status")).toBeInTheDocument();
+
+    fireEvent.click(button);
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+
+    await act(async () => submission.resolve());
+
+    await waitFor(() => expect(button).toBeEnabled());
+    expect(button).toHaveAttribute("aria-busy", "false");
+    expect(button).not.toHaveClass("opacity-75");
+    expect(screen.queryByRole("status")).not.toBeInTheDocument();
+  });
+
+  it("returns submit to normal after a handled rejection", async () => {
+    const submission = deferred();
+    renderForm(async () => {
+      try {
+        await submission.promise;
+      } catch {
+        return;
+      }
+    });
+    const button = screen.getByRole("button", { name: /submit/i });
+
+    fireEvent.click(button);
+
+    await waitFor(() => expect(button).toBeDisabled());
+    expect(screen.getByRole("status")).toBeInTheDocument();
+
+    await act(async () => submission.reject(new Error("Request failed")));
+
+    await waitFor(() => expect(button).toBeEnabled());
+    expect(screen.queryByRole("status")).not.toBeInTheDocument();
+  });
+});

package/src/contentful/blocks/fiber-form/index.tsx

@@ -5,6 +5,7 @@ import { Button } from "../../../components/button";
 import { Input } from "../../../components/input";
 import { MaterialIcon } from "../../../components/material-icon";
 import { Select, type SelectOption } from "../../../components/select";
+import { Spinner } from "../../../components/spinner";
 import { Text } from "../../../components/text";
 import { Tooltip } from "../../../components/tooltip";
 import { cx } from "../../../utils";
@@ -160,7 +161,7 @@ export const FiberForm: React.FC<FiberFormProps> = ({
         setFieldValue,
         values,
       }) => (
-        <Form className={cx("w-full", className)}>
+        <Form className={cx("fiber-form w-full", className)}>
           <div className="flex flex-col gap-5 sm:flex-row">
             {inputList.firstName && (
               <div className="flex-1">
@@ -259,7 +260,7 @@ export const FiberForm: React.FC<FiberFormProps> = ({
                       >
                         <button
                           type="button"
-                          className="flex w-full items-center gap-2 px-4 py-3 text-left hover:bg-bg-surface-hover"
+                          className="body2 flex w-full items-center gap-2 px-4 py-3 text-left hover:bg-bg-surface-hover"
                           onClick={() =>
                             selectCandidate(candidate, setFieldValue)
                           }
@@ -487,7 +488,7 @@ export const FiberForm: React.FC<FiberFormProps> = ({
                     </label>
                     <Tooltip
                       tooltipMsg="By opting in to receive text messages, you will receive automated text message related to service notifications including installations, service changes and updates, billing information, marketing offers from Kinetic including cart reminders. Consent is not a condition of purchase. Reply STOP at any time to unsubscribe. Message frequency varies. Msg & data rates may apply. To contact our Customer Support via email, chat, or phone, visit our Support page below."
-                      className="ff-NR mt-0"
+                      className="fiber-form-tooltip ff-NR mt-0"
                     >
                       <MaterialIcon
                         name="info"
@@ -531,16 +532,22 @@ export const FiberForm: React.FC<FiberFormProps> = ({
               ))}
             </ul>
           )}
-          <div className="mt-8 flex items-center justify-center px-[60px] lg:mt-[64px]">
+          <div className="mt-8 flex items-center justify-center lg:mt-[64px]">
             <Button
               type="submit"
               disabled={isSubmitting}
               className={cx(
-                "min-h-14 rounded-xl bg-bg-fill-brand px-8 py-4 font-bold text-white disabled:opacity-50",
+                "flex h-16 w-[198px] max-w-full cursor-pointer items-center justify-center overflow-hidden rounded-button border border-brand bg-bg-fill-brand px-[60px] py-4 text-center font-black leading-7 text-text-brand-on-bg-fill no-underline transition-colors duration-300 ease-in-out enabled:hover:border-[var(--color-bg-fill-brand-hover)] enabled:hover:bg-bg-fill-brand-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-brand disabled:cursor-not-allowed",
+                isSubmitting && "opacity-75",
                 buttonClassName
               )}
             >
-              {isSubmitting ? "Submitting..." : buttonText}
+              <span className="relative flex w-full items-center justify-center">
+                {isSubmitting && (
+                  <Spinner size="small" className="!h-5 !w-5" />
+                )}
+                <span>{buttonText}</span>
+              </span>
             </Button>
           </div>
         </Form>

package/src/contentful/blocks/primary-hero/index.tsx

@@ -27,6 +27,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
     secondaryCta,
     secondaryCtaPrefix,
     onModalButtonClick,
+    onImageClick,
     hideOnMobileCta1,
     hideOnMobileCta2,
     textColor = "light",
@@ -67,7 +68,8 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
       <NextImage
         src={badgeImageUrl}
         alt="Badge"
-        className={className}
+        className={cx(className, onImageClick && "cursor-pointer")}
+        onClick={onImageClick}
         width={208}
         height={208}
         quality={90}
@@ -250,9 +252,13 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
               )}
               {secondaryCtaPrefix || secondaryCta ? (
                 <div className="hidden lg:flex">
-                  {secondaryCtaPrefix && secondaryCta?.preDefinedFunctionExecution !== "check availability" && (
-                    <Text as="span" className="body2 mr-1">{secondaryCtaPrefix}</Text>
-                  )}
+                  {secondaryCtaPrefix &&
+                    secondaryCta?.preDefinedFunctionExecution !==
+                      "check availability" && (
+                      <Text as="span" className="body2 mr-1">
+                        {secondaryCtaPrefix}
+                      </Text>
+                    )}
                   {secondaryCta && (
                     <Button
                       {...secondaryCta}
@@ -315,7 +321,11 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   <NextImage
                     src={heroImageUrl}
                     alt={"Hero"}
-                    className="h-[205px] w-full rounded-[40px] object-cover object-center sm:h-[420px]"
+                    className={cx(
+                      "h-[205px] w-full rounded-[40px] object-cover object-center sm:h-[420px]",
+                      onImageClick && "cursor-pointer"
+                    )}
+                    onClick={onImageClick}
                     width={1024}
                     height={600}
                     sizes="100vw"
@@ -331,9 +341,12 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             <div
               className={`flex flex-wrap items-center ${textColorClass} lg:hidden`}
             >
-              {secondaryCtaPrefix && !secondaryCta?.preDefinedFunctionExecution && (
-                <Text as="span" className="body2 mr-1">{secondaryCtaPrefix}</Text>
-              )}
+              {secondaryCtaPrefix &&
+                !secondaryCta?.preDefinedFunctionExecution && (
+                  <Text as="span" className="body2 mr-1">
+                    {secondaryCtaPrefix}
+                  </Text>
+                )}
               {secondaryCta && (
                 <Button
                   {...secondaryCta}
@@ -369,7 +382,11 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             <NextImage
               src={heroImageUrl}
               alt={"Hero"}
-              className="aspect-square rounded-[40px] object-cover object-center"
+              className={cx(
+                "aspect-square rounded-[40px] object-cover object-center",
+                onImageClick && "cursor-pointer"
+              )}
+              onClick={onImageClick}
               width={584}
               height={584}
               quality={90}