@windstream/react-shared-components 0.2.39 → 0.2.41

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

@@ -9,10 +9,17 @@ import { BrandButton, ButtonVariantsT } from "@shared/components/brand-button";
 import { Button as CoreButton } from "@shared/components/button";
 import { Link } from "@shared/components/link";
 import { MaterialIcon } from "@shared/components/material-icon";
+import type { IconName } from "@shared/components/material-icon/types";
 import { Text } from "@shared/components/text";
 import { cx } from "@shared/utils";
 import { buildPreservedQueryHref } from "@shared/utils/utm";
 
+const textVariantClasses: Record<string, string> = {
+  primary_brand: "text-text-brand",
+  primary_inverse: "text-text",
+  secondary: "text-text",
+};
+
 export const Button: React.FC<ButtonProps> = props => {
   const {
     showButtonAs = "solid",
@@ -33,8 +40,9 @@ export const Button: React.FC<ButtonProps> = props => {
     idNameToOpen,
     onModalButtonClick,
     onClick,
-    iconName,
     iconFill = 0,
+    buttonIconName,
+    buttonIconPosition,
     size,
     iconSize = 24,
     preserveQueryParameters,
@@ -42,6 +50,13 @@ export const Button: React.FC<ButtonProps> = props => {
     animationType = DEFAULT_BUTTON_ANIMATION_TYPE,
     ...rest
   } = props;
+  
+  const isLeftIcon = buttonIconPosition === "left";
+  const matIconName = buttonIconName as IconName | undefined;
+  const brandButtonClassName = cx(
+    buttonClassName,
+    isLeftIcon && matIconName ? "flex-row-reverse" : ""
+  );
 
   if (
     preDefinedFunctionExecution === "check availability" &&
@@ -116,7 +131,6 @@ export const Button: React.FC<ButtonProps> = props => {
     : href && preserveQueryParameters && currentSearch
       ? buildPreservedQueryHref(href, currentSearch)
       : href;
-
   let CTA = (
     <CoreButton onClick={buttonClick} className={buttonClassName} {...rest} />
   );
@@ -132,9 +146,12 @@ export const Button: React.FC<ButtonProps> = props => {
           text={buttonLabel}
           label={buttonPrefix}
           fullWidth={fullWidth}
-          buttonClassName={buttonClassName}
+          buttonClassName={brandButtonClassName}
           size={size}
           onClick={linkClick}
+          iconName={matIconName}
+          iconSize={iconSize}
+          iconFill={iconFill}
           disableAnimation={disableAnimation}
           animationType={animationType}
         />
@@ -147,7 +164,10 @@ export const Button: React.FC<ButtonProps> = props => {
           fullWidth={fullWidth}
           size={size}
           onClick={buttonClick}
-          buttonClassName={buttonClassName}
+          iconName={matIconName}
+          iconSize={iconSize}
+          iconFill={iconFill}
+          buttonClassName={brandButtonClassName}
           disableAnimation={disableAnimation}
           animationType={animationType}
         />
@@ -160,16 +180,34 @@ export const Button: React.FC<ButtonProps> = props => {
           href={resolvedHref}
           target={target}
           variant={linkVariant || "default"}
-          className={`text-text-brand ${linkClassName || ""}`}
+          className={cx(
+            matIconName &&
+              "label1 inline-flex items-center gap-2 no-underline",
+            textVariantClasses[buttonVariant],
+            linkClassName
+          )}
           onClick={linkClick}
         >
-          {buttonLabel}{" "}
-          {iconName && (
-            <MaterialIcon
-              name={iconName as any}
-              size={iconSize}
-              fill={iconFill}
-            />
+          {matIconName ? (
+            <>
+              {isLeftIcon ? (
+                <MaterialIcon
+                  name={matIconName as IconName}
+                  size={iconSize}
+                  fill={iconFill}
+                />
+              ) : null}
+              {buttonLabel}
+              {!isLeftIcon ? (
+                <MaterialIcon
+                  name={matIconName as IconName}
+                  size={iconSize}
+                  fill={iconFill}
+                />
+              ) : null}
+            </>
+          ) : (
+            <>{buttonLabel}</>
           )}
         </Link>
       );
@@ -184,10 +222,10 @@ export const Button: React.FC<ButtonProps> = props => {
           text={buttonLabel}
           label={buttonPrefix}
           fullWidth={fullWidth}
-          buttonClassName={buttonClassName}
+          buttonClassName={brandButtonClassName}
           size={size}
           onClick={linkClick}
-          iconName={iconName as any}
+          iconName={matIconName}
           iconSize={iconSize}
           iconFill={iconFill}
           disableAnimation={disableAnimation}
@@ -200,10 +238,10 @@ export const Button: React.FC<ButtonProps> = props => {
           text={buttonLabel}
           label={buttonPrefix}
           fullWidth={fullWidth}
-          buttonClassName={buttonClassName}
+          buttonClassName={brandButtonClassName}
           size={size}
           onClick={buttonClick}
-          iconName={iconName as any}
+          iconName={matIconName}
           iconSize={iconSize}
           iconFill={iconFill}
           disableAnimation={disableAnimation}
@@ -237,12 +275,20 @@ export const Button: React.FC<ButtonProps> = props => {
           )}
           aria-label={buttonLabel}
         >
+          {isLeftIcon && matIconName ? (
+            <MaterialIcon
+              name={matIconName as IconName}
+              fill={iconFill}
+              size={iconSize}
+              weight="200"
+            />
+          ) : null}
           <Text aria-label={buttonLabel} className="label1 text-nowrap">
             {buttonLabel}
           </Text>
-          {iconName && (
+          {matIconName && !isLeftIcon && (
             <MaterialIcon
-              name={iconName as any}
+              name={matIconName as IconName}
               fill={iconFill}
               size={iconSize}
               weight="200"

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

@@ -17,7 +17,7 @@ export type ButtonProps = {
   buttonPrefix?: string;
   badge?: string;
   badgeIcon?: string;
-  buttonIcon?: string;
+  buttonIconName?: string;
   buttonIconPosition?: "left" | "right";
   href?: string;
   target?: "_self" | "_blank";

package/src/contentful/blocks/cards/blog-card/index.tsx

@@ -109,11 +109,9 @@ export const BlogCard: React.FC<BlogCardProps> = ({
 
       {/* Fallback stretched link keeps the card navigable when no title link is rendered */}
       {!title && (
-        <Link
-          href={href}
-          aria-label={category ?? "Read more"}
-          className="absolute inset-0 z-10"
-        />
+        <Link href={href} className="absolute inset-0 z-10">
+          <span className="sr-only">{category ?? "Read more"}</span>
+        </Link>
       )}
     </article>
   );

package/src/contentful/blocks/cards/floating-image-card/index.test.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 import { FloatingImageCard } from "./index";
 
+import { describe, expect, it, jest } from "@jest/globals";
+import "@testing-library/jest-dom/jest-globals";
 import { render, screen } from "@testing-library/react";
 
 jest.mock("@shared/components/next-image", () => ({
-  NextImage: ({ src, alt, width, height, className, onClick }: any) => (
+  NextImage: ({ src, alt, width, height, className, onClick, ...rest }: any) => (
     <img
       data-testid="next-image"
       src={src}
@@ -13,6 +15,7 @@ jest.mock("@shared/components/next-image", () => ({
       height={height}
       className={className}
       onClick={onClick}
+      {...rest}
     />
   ),
 }));
@@ -98,6 +101,68 @@ describe("FloatingImageCard", () => {
       render(<FloatingImageCard card={defaultCard} />);
       expect(screen.queryByTestId("cta-button")).not.toBeInTheDocument();
     });
+
+    it("renders Button when buttonIconName is provided", () => {
+      const card = {
+        ...defaultCard,
+        cta: {
+          buttonLabel: "See Jobs",
+          href: "/jobs",
+          showButtonAs: "text" as const,
+          buttonIconName: "expand_circle_right",
+          buttonIconPosition: "left" as const,
+        },
+      };
+
+      render(<FloatingImageCard card={card} />);
+      expect(screen.getByTestId("cta-button")).toBeInTheDocument();
+    });
+
+    it("renders Button for primary_inverse text CTA variant", () => {
+      const card = {
+        ...defaultCard,
+        cta: {
+          buttonLabel: "See Jobs",
+          href: "/jobs",
+          showButtonAs: "text" as const,
+          buttonVariant: "primary_inverse" as const,
+          buttonIconName: "expand_circle_right",
+        },
+      };
+
+      render(<FloatingImageCard card={card} />);
+      expect(screen.getByTestId("cta-button")).toBeInTheDocument();
+    });
+
+    it("renders Button for primary_navy alias", () => {
+      const card = {
+        ...defaultCard,
+        cta: {
+          buttonLabel: "See Jobs",
+          href: "/jobs",
+          showButtonAs: "text" as const,
+          buttonVariant: "primary_navy" as any,
+          buttonIconName: "expand_circle_right",
+        },
+      };
+
+      render(<FloatingImageCard card={card} />);
+      expect(screen.getByTestId("cta-button")).toBeInTheDocument();
+    });
+
+    it("renders authored icon CTA when buttonIconName is set even if href is missing", () => {
+      const card = {
+        ...defaultCard,
+        cta: {
+          buttonLabel: "See Jobs",
+          showButtonAs: "text" as const,
+          buttonIconName: "expand_circle_right",
+        },
+      };
+
+      render(<FloatingImageCard card={card} />);
+      expect(screen.getByTestId("cta-button")).toBeInTheDocument();
+    });
   });
 
   describe("CTA alignment", () => {
@@ -158,7 +223,9 @@ describe("FloatingImageCard", () => {
 
   describe("Image link", () => {
     it("makes image clickable when imageLink is provided", () => {
-      const windowOpen = jest.spyOn(window, "open").mockImplementation();
+      const windowOpen = jest
+        .spyOn(window, "open")
+        .mockImplementation(() => null);
       const card = {
         ...defaultCard,
         imageLink: "https://example.com",

package/src/contentful/blocks/cards/floating-image-card/index.tsx

@@ -106,11 +106,14 @@ export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({
       <div className={cx(ctaAlignmentClass, "mt-auto")}>
         {cta ? (
           <Button
-            linkVariant="unstyled"
-            linkClassName="label1 flex items-center gap-2 text-text"
             {...cta}
-            iconName="expand_circle_right"
-            iconFill={1}
+            showButtonAs={
+              cta.showButtonAs || (cta.buttonIconName ? undefined : "text-with-icon")
+            }
+            iconName={
+              cta.iconName || (cta.buttonIconName ? undefined : "expand_circle_right")
+            }
+            iconFill={cta.iconFill ?? 1}
             // Button animates ONLY when BOTH are explicitly enabled:
             //  - the parent Callout animation is enabled (disableAnimation === false)
             //  - the button's own disableAnimation is enabled (=== false)

package/src/contentful/blocks/carousel/helper.test.tsx

@@ -7,7 +7,7 @@ import {
   CarouselWithTestimonialCards,
 } from "./types";
 
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 
 // Mock sub-components
 jest.mock("@shared/components/button", () => ({
@@ -84,6 +84,12 @@ jest.mock("@shared/utils", () => ({
 }));
 
 describe("ProductCardCarousel", () => {
+  beforeEach(() => {
+    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+      configurable: true,
+      get: () => 900,
+    });
+  });
   const createProductFields = (
     items: any[] = []
   ): CarouselWithProductCards => ({
@@ -208,39 +214,56 @@ describe("ProductCardCarousel", () => {
     expect(card).toHaveAttribute("data-plan", "500 Mbps");
   });
 
-  it("renders navigation arrows for carousel mode", () => {
+  it("renders Next arrow and hides Previous on first slide in carousel mode", async () => {
     const items = Array.from({ length: 4 }, (_, i) => ({
       ...sampleProduct,
       sys: { id: `prod-${i}` },
     }));
     const fields = createProductFields(items);
     render(<ProductCardCarousel fields={fields} />);
-    expect(screen.getByLabelText("Previous")).toBeInTheDocument();
-    expect(screen.getByLabelText("Next")).toBeInTheDocument();
+
+    fireEvent(window, new Event("resize"));
+
+    await waitFor(() =>
+      expect(screen.getByLabelText("Next")).toBeInTheDocument()
+    );
+    expect(screen.queryByLabelText("Previous")).not.toBeInTheDocument();
   });
 
-  it("calls prevSlide on Previous button click", () => {
+  it("shows Previous after moving forward, then hides it after returning to first slide", async () => {
     const items = Array.from({ length: 4 }, (_, i) => ({
       ...sampleProduct,
       sys: { id: `prod-${i}` },
     }));
     const fields = createProductFields(items);
     render(<ProductCardCarousel fields={fields} />);
-    const prevBtn = screen.getByLabelText("Previous");
-    fireEvent.click(prevBtn);
-    // No error thrown, action processed
+
+    fireEvent(window, new Event("resize"));
+
+    const nextBtn = await screen.findByLabelText("Next");
+    fireEvent.click(nextBtn);
+
+    const prevBtn = await screen.findByLabelText("Previous");
     expect(prevBtn).toBeInTheDocument();
+
+    fireEvent.click(prevBtn);
+
+    expect(screen.queryByLabelText("Previous")).not.toBeInTheDocument();
   });
 
-  it("calls nextSlide on Next button click", () => {
+  it("calls nextSlide on Next button click", async () => {
     const items = Array.from({ length: 4 }, (_, i) => ({
       ...sampleProduct,
       sys: { id: `prod-${i}` },
     }));
     const fields = createProductFields(items);
     render(<ProductCardCarousel fields={fields} />);
-    const nextBtn = screen.getByLabelText("Next");
+
+    fireEvent(window, new Event("resize"));
+
+    const nextBtn = await screen.findByLabelText("Next");
     fireEvent.click(nextBtn);
+
     expect(nextBtn).toBeInTheDocument();
   });
 

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

@@ -152,13 +152,12 @@ describe("Carousel", () => {
       expect(screen.getByTestId("product-card-carousel")).toBeInTheDocument();
     });
 
-    it("does not render ProductCardCarousel when showSwitch is false", () => {
+    it("renders ProductCardCarousel when hasProductCards is true even if showSwitch is false", () => {
       render(
         <Carousel {...defaultProps} hasProductCards={true} showSwitch={false} />
       );
-      expect(
-        screen.queryByTestId("product-card-carousel")
-      ).not.toBeInTheDocument();
+      expect(screen.getByTestId("product-card-carousel")).toBeInTheDocument();
+      expect(screen.queryByTestId("tab-switch")).not.toBeInTheDocument();
     });
 
     it("renders TabSwitch when showSwitch and hasProductCards with multiple tabs", () => {
@@ -279,7 +278,7 @@ describe("Carousel", () => {
       expect(screen.getByTestId("testimonial-carousel")).toBeInTheDocument();
     });
 
-    it("does not render product carousel when showSwitch is false even with hasProductCards", () => {
+    it("renders product carousel and hides tab switch when showSwitch is false with hasProductCards", () => {
       render(
         <Carousel
           {...defaultProps}
@@ -288,9 +287,8 @@ describe("Carousel", () => {
           hasTestimonialCards={false}
         />
       );
-      expect(
-        screen.queryByTestId("product-card-carousel")
-      ).not.toBeInTheDocument();
+      expect(screen.getByTestId("product-card-carousel")).toBeInTheDocument();
+      expect(screen.queryByTestId("tab-switch")).not.toBeInTheDocument();
     });
 
     it("renders with empty tabs array and no TabSwitch", () => {

package/src/contentful/blocks/carousel/types.test.ts

@@ -10,6 +10,16 @@ describe("carousel types exports", () => {
     expect(backgroundColorMap.white).toBe("bg-white");
   });
 
+  it("exports backgroundColorMap with only the supported color keys", () => {
+    expect(Object.keys(backgroundColorMap)).toEqual([
+      "blue",
+      "green",
+      "orange",
+      "purple",
+      "white",
+    ]);
+  });
+
   it("exports DEFAULT_TABS", () => {
     expect(DEFAULT_TABS).toEqual(["Business Ready", "Internet Only"]);
   });

package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx

@@ -29,7 +29,6 @@ const meta: Meta<typeof CtaCallout> = {
       buttonPrefix: "",
       badge: "",
       badgeIcon: "",
-      buttonIcon: "",
       buttonIconPosition: "left",
       href: "",
       target: "_self",

package/src/contentful/blocks/dynamic-tabs/ordered-tab-views.tsx

@@ -175,7 +175,7 @@ export function OrderedSidebarView({
   return (
     <div className="flex gap-10 px-5 py-20">
       <div className="flex-shrink-0">
-        <div className="flex min-w-[320px] gap-4 rounded-[20px] border-2 bg-bg-surface-active px-6 py-7 shadow-lg">
+        <div className="flex min-w-[320px] gap-4 rounded-[20px] border-2 px-6 py-7 shadow-lg">
           {[...new Array(Math.min(2, items.length))].map((_, colIdx) => {
             const perColumn = Math.ceil(items.length / 2);
 

package/src/contentful/blocks/ordered-list/index.tsx

@@ -30,7 +30,7 @@ export const OrderedList = ({
       return (
         <Text
           key={`ordered-item-${index}`}
-          className="body2 relative text-left leading-7"
+          className="body1 relative text-left leading-7"
         >
           {formatItemName(item.itemName)}
         </Text>
@@ -44,7 +44,7 @@ export const OrderedList = ({
         title={item.itemName.toUpperCase()}
         className="flex items-center underline underline-offset-4"
       >
-        <Text className="body2 relative cursor-pointer text-left leading-7">
+        <Text className="body1 relative cursor-pointer text-left leading-7">
           {formatItemName(item.itemName)}
         </Text>
       </Link>

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

@@ -328,7 +328,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
           ) : null}
 
           {bottomLink && (bottomLinkLabel || bottomLink?.href) && (
-            <div className="lg:hidden">
+            <div className="flex lg:hidden">
               <Button
                 {...bottomLink}
                 onModalButtonClick={onModalButtonClick}

package/src/hooks/use-carousel-swipe.test.ts

@@ -1,3 +1,4 @@
+import { TextDecoder, TextEncoder } from "util";
 import React from "react";
 import { CarouselSwipeConfig, useCarouselSwipe } from "./use-carousel-swipe";
 
@@ -368,6 +369,28 @@ describe("useCarouselSwipe", () => {
       expect(result.current.containerWidth).toBe(800);
     });
 
+    it("uses the attached containerRef width when present", () => {
+      Object.defineProperty(window, "innerWidth", {
+        writable: true,
+        value: 1024,
+      });
+
+      const { result } = renderHook(() => useCarouselSwipe(defaultConfig));
+      const container = document.createElement("div");
+
+      Object.defineProperty(container, "offsetWidth", {
+        configurable: true,
+        value: 640,
+      });
+
+      act(() => {
+        result.current.containerRef.current = container as HTMLDivElement;
+        window.dispatchEvent(new Event("resize"));
+      });
+
+      expect(result.current.containerWidth).toBe(640);
+    });
+
     it("uses custom mobileBreakpoint", () => {
       Object.defineProperty(window, "innerWidth", {
         writable: true,
@@ -392,13 +415,10 @@ describe("useCarouselSwipe", () => {
   });
 
   describe("SSR safety (window undefined)", () => {
-    it("can be created without throwing when window is undefined and uses fallback containerWidth", () => {
+    it("can be created without throwing when window is undefined and uses fallback containerWidth", async () => {
       const origWindow = globalThis.window;
       // @ts-expect-error - intentionally deleting window to simulate SSR
       delete globalThis.window;
-
-      // Polyfill TextEncoder/TextDecoder required by react-dom/server in jest
-      const { TextEncoder, TextDecoder } = require("util");
       const origTE = globalThis.TextEncoder;
       const origTD = globalThis.TextDecoder;
       globalThis.TextEncoder = TextEncoder;
@@ -412,8 +432,8 @@ describe("useCarouselSwipe", () => {
       }
 
       try {
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
-        const { renderToString } = require("react-dom/server");
+        const { renderToString } = await import("react-dom/server");
+
         // renderToString simulates real SSR: no window, no effects run
         renderToString(React.createElement(TestComponent));
 

package/src/types/micro-components.ts

@@ -24,8 +24,8 @@ export interface Button {
   preserveQueryParameters: boolean; // non-null in your model
   badgeIcon?: Asset | null;
   buttonVariant?: "primary_brand" | "primary_inverse" | "secondary" | null;
-  buttonIcon?: Asset | null;
-  buttonIconPosition?: boolean | null; // matches EntryFieldTypes.Boolean in your model
+  buttonIconName?: string | null;
+  buttonIconPosition?: "left" | "right" | null;
   clickToOpen?: "accordion" | "modal" | "tab" | null;
   tabmodalNameToOpen?: string | null;
   preDefinedFunctionExecution?: "check availability" | null;