@windstream/react-shared-components 0.2.38 → 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.test.tsx

@@ -14,14 +14,6 @@ jest.mock("next/link", () => {
   return MockLink;
 });
 
-jest.mock("@shared/components/material-icon", () => ({
-  MaterialIcon: ({ name }: any) => (
-    <span data-testid="material-icon" data-name={name}>
-      {name}
-    </span>
-  ),
-}));
-
 jest.mock("@shared/components/text", () => ({
   Text: ({ children, className, ...rest }: any) => (
     <span className={className} {...rest}>
@@ -74,16 +66,6 @@ describe("BlogCard", () => {
       expect(screen.getByText("•")).toBeInTheDocument();
     });
 
-    it("renders read more link", () => {
-      render(<BlogCard {...defaultProps} />);
-      expect(screen.getByText("Read more")).toBeInTheDocument();
-    });
-
-    it("renders custom readMoreText", () => {
-      render(<BlogCard {...defaultProps} readMoreText="Continue reading" />);
-      expect(screen.getByText("Continue reading")).toBeInTheDocument();
-    });
-
     it("does not render date separator when date is not provided", () => {
       render(<BlogCard {...defaultProps} date={undefined} />);
       expect(screen.queryByText("•")).not.toBeInTheDocument();
@@ -171,6 +153,24 @@ describe("BlogCard", () => {
     });
   });
 
+  describe("Navigation", () => {
+    it("renders a link to href when title is missing", () => {
+      const { container } = render(
+        <BlogCard {...defaultProps} title={undefined} />
+      );
+      const links = container.querySelectorAll("a");
+      expect(links).toHaveLength(1);
+      expect(links[0]).toHaveAttribute("href", "/blog/test-post");
+    });
+
+    it("renders exactly one link when title is present", () => {
+      const { container } = render(<BlogCard {...defaultProps} />);
+      const links = container.querySelectorAll("a");
+      expect(links).toHaveLength(1);
+      expect(links[0]).toHaveAttribute("href", "/blog/test-post");
+    });
+  });
+
   describe("Optional props", () => {
     it("renders without title", () => {
       const { container } = render(
@@ -185,29 +185,5 @@ describe("BlogCard", () => {
       );
       expect(container.querySelector("article")).toBeInTheDocument();
     });
-
-    it("sets aria-label on read more link", () => {
-      render(<BlogCard {...defaultProps} />);
-      const links = screen.getAllByRole("link");
-      const readMoreLink = links.find(link =>
-        link.getAttribute("aria-label")?.includes("Read more")
-      );
-      expect(readMoreLink).toHaveAttribute(
-        "aria-label",
-        "Read more about Test Blog Post"
-      );
-    });
-
-    it("uses fallback aria-label when title is not provided", () => {
-      render(<BlogCard {...defaultProps} title={undefined} />);
-      const links = screen.getAllByRole("link");
-      const readMoreLink = links.find(link =>
-        link.getAttribute("aria-label")?.includes("Read more")
-      );
-      expect(readMoreLink).toHaveAttribute(
-        "aria-label",
-        "Read more about this article"
-      );
-    });
   });
 });

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

@@ -2,8 +2,6 @@ import React from "react";
 import { BlogCardProps } from "./types";
 import * as _NextLink from "next/link";
 
-// import { Button } from "@shared/components/button";
-import { MaterialIcon } from "@shared/components/material-icon";
 import { Text } from "@shared/components/text";
 
 // CJS/ESM interop: next/link uses standard __esModule exports so this is safe.
@@ -21,13 +19,12 @@ export const BlogCard: React.FC<BlogCardProps> = ({
   category,
   image,
   imageComponent: ImageComponent,
-  readMoreText = "Read more",
   asGrid = true,
   index,
 }: BlogCardProps) => {
   const parentClassName = asGrid
-    ? "flex h-full flex-col overflow-hidden rounded-card-lg bg-white shadow-drop transition-all duration-200 hover:-translate-y-0.5 hover:shadow-cardDrop"
-    : `callout-card w-full flex h-full flex-col overflow-hidden`;
+    ? "group relative flex h-full flex-col overflow-hidden rounded-card-lg bg-white shadow-drop transition-all duration-200 hover:-translate-y-0.5 hover:shadow-cardDrop"
+    : `callout-card group relative w-full flex h-full flex-col overflow-hidden`;
 
   return (
     <article
@@ -38,42 +35,40 @@ export const BlogCard: React.FC<BlogCardProps> = ({
     >
       {/* Image (hidden in list view) */}
       {asGrid && (
-        <Link href={href} tabIndex={-1} aria-hidden="true" className="block">
-          <div className="h-[232px] w-full flex-shrink-0 overflow-hidden bg-gray-100">
-            {image ? (
-              ImageComponent ? (
-                <ImageComponent
-                  src={image.src}
-                  alt={image.alt}
-                  width={image.width}
-                  height={image.height}
-                  className="h-full w-full object-cover transition-transform duration-300 hover:scale-[1.03]"
-                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
-                />
-              ) : (
-                <img
-                  src={image.src}
-                  alt={image.alt}
-                  width={image.width}
-                  height={image.height}
-                  loading="lazy"
-                  decoding="async"
-                  className="h-full w-full object-cover transition-transform duration-300 hover:scale-[1.03]"
-                />
-              )
+        <div className="block h-[232px] w-full flex-shrink-0 overflow-hidden bg-gray-100">
+          {image ? (
+            ImageComponent ? (
+              <ImageComponent
+                src={image.src}
+                alt={image.alt}
+                width={image.width}
+                height={image.height}
+                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
+                sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+              />
             ) : (
-              <div
-                className="h-full w-full bg-gradient-to-br from-gray-200 to-gray-100"
-                aria-hidden="true"
+              <img
+                src={image.src}
+                alt={image.alt}
+                width={image.width}
+                height={image.height}
+                loading="lazy"
+                decoding="async"
+                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
               />
-            )}
-          </div>
-        </Link>
+            )
+          ) : (
+            <div
+              className="h-full w-full bg-gradient-to-br from-gray-200 to-gray-100"
+              aria-hidden="true"
+            />
+          )}
+        </div>
       )}
 
       {/* Body */}
       <div
-        className={`flex flex-1 flex-col  ${
+        className={`flex flex-1 flex-col ${
           asGrid ? "gap-5 p-6 md:p-8" : "gap-1 border-b p-3 md:p-4"
         }`}
       >
@@ -94,12 +89,14 @@ export const BlogCard: React.FC<BlogCardProps> = ({
 
         {/* Title */}
         {title && (
-          <Link
-            href={href}
-            className="heading6 m-0 line-clamp-3 font-black transition-colors duration-150 hover:text-text-brand"
-          >
-            {title}
-          </Link>
+          <Text as="h2" className="heading6">
+            <Link
+              href={href}
+              className="m-0 line-clamp-3 font-black transition-colors duration-150 after:absolute after:inset-0 after:z-10 after:content-[''] hover:text-text-brand group-hover:text-text-brand"
+            >
+              {title}
+            </Link>
+          </Text>
         )}
 
         {/* Excerpt */}
@@ -108,29 +105,14 @@ export const BlogCard: React.FC<BlogCardProps> = ({
             {description}
           </Text>
         )}
-
-        {/* Read more (hidden in list view) */}
-        {asGrid && (
-          <Link
-            href={href}
-            className="group mt-auto inline-flex items-center justify-start gap-2 pt-3 text-sm text-text-brand no-underline"
-            aria-label={`${readMoreText} about ${title || "this article"}`}
-          >
-            <Text
-              aria-label={`${readMoreText} about ${title || "this article"}`}
-              className="label1 text-nowrap"
-            >
-              {readMoreText}
-            </Text>
-            <MaterialIcon
-              name="expand_circle_right"
-              fill={1}
-              size={24}
-              weight="200"
-            />
-          </Link>
-        )}
       </div>
+
+      {/* Fallback stretched link keeps the card navigable when no title link is rendered */}
+      {!title && (
+        <Link href={href} className="absolute inset-0 z-10">
+          <span className="sr-only">{category ?? "Read more"}</span>
+        </Link>
+      )}
     </article>
   );
 };

package/src/contentful/blocks/cards/blog-card/types.ts

@@ -26,7 +26,6 @@ export interface BlogCardProps {
   };
   /** Pass next/image's Image component here to enable image optimization */
   imageComponent?: React.ComponentType<BlogCardImageProps>;
-  readMoreText?: string;
   asGrid?: boolean;
   index?: number;
 }

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", () => {