@windstream/react-shared-components 0.2.39 → 0.2.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.39",
+  "version": "0.2.42",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/components/brand-button/index.tsx

@@ -48,17 +48,17 @@ export const BrandButton = forwardRef<
     const getVariantClasses = () => {
       const baseClasses = cx(
         sizeToClassNames(size),
-        "rounded-button pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top sm:whitespace-nowrap",
+        "rounded-button pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:outline focus:outline-2 focus:outline-offset-2 cursor-pointer transition-colors duration-200 align-top sm:whitespace-nowrap",
         fullWidth ? "w-full" : "w-auto"
       );
 
       const variantClasses: Record<ButtonVariantsT, string> = {
         primary_brand:
-          "bg-bg-fill-brand text-text-brand-on-bg-fill [&:not(:disabled)]:hover:bg-bg-fill-brand-hover focus:ring-bg-fill-brand disabled:bg-bg-fill-brand-disabled",
+          "bg-bg-fill-brand text-text-brand-on-bg-fill [&:not(:disabled)]:hover:bg-bg-fill-brand-hover focus:outline-bg-fill-brand disabled:bg-bg-fill-brand-disabled",
         primary_inverse:
-          "bg-bg-fill-inverse text-text-inverse [&:not(:disabled)]:hover:bg-bg-fill-inverse-hover focus:ring-bg-surface-inverse disabled:bg-bg-fill-inverse-disabled",
+          "bg-bg-fill-inverse text-text-inverse [&:not(:disabled)]:hover:bg-bg-fill-inverse-hover focus:outline-bg-fill-inverse disabled:bg-bg-fill-inverse-disabled",
         secondary:
-          "border border-border-secondary-on-bg-fill bg-bg-fill-secondary text-text [&:not(:disabled)]:hover:bg-bg-fill-secondary-hover focus:bg-bg-fill-secondary focus:ring-input-border-hover disabled:bg-bg-fill-secondary",
+          "border border-border-secondary-on-bg-fill bg-bg-fill-secondary text-text [&:not(:disabled)]:hover:bg-bg-fill-secondary-hover focus:bg-bg-fill-secondary focus:outline-input-border-hover disabled:bg-bg-fill-secondary",
       };
       const stateClasses = cx(
         (disabled || isLoading) && "cursor-not-allowed",

package/src/components/link/index.test.tsx

@@ -155,14 +155,14 @@ describe("Link", () => {
       expect(el).toHaveAttribute("target", "_blank");
     });
 
-    it("adds rel=noopener noreferrer for external links", () => {
+    it("adds rel=noopener for external links", () => {
       render(
         <Link href="https://example.com" external={true}>
           External
         </Link>
       );
       const el = screen.getByText("External").closest("a");
-      expect(el).toHaveAttribute("rel", "noopener noreferrer");
+      expect(el).toHaveAttribute("rel", "noopener");
     });
 
     it("does not add target for disabled external links", () => {

package/src/components/link/index.tsx

@@ -88,7 +88,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
       ...(external &&
         !disabled && {
           target: "_blank",
-          rel: "noopener noreferrer",
+          rel: "noopener",
         }),
       ...(disabled && {
         "aria-disabled": true,

package/src/contentful/blocks/button/Button.stories.tsx

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

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

@@ -1,6 +1,8 @@
 import React from "react";
 import { Button } from "./index";
 
+import { beforeEach, describe, expect, it, jest } from "@jest/globals";
+import "@testing-library/jest-dom/jest-globals";
 import { fireEvent, render, screen } from "@testing-library/react";
 
 jest.mock("@shared/components/brand-button", () => ({
@@ -9,6 +11,9 @@ jest.mock("@shared/components/brand-button", () => ({
     href,
     text,
     label,
+    iconName,
+    iconSize,
+    iconFill,
     onClick,
     id,
     variant,
@@ -27,6 +32,9 @@ jest.mock("@shared/components/brand-button", () => ({
         data-variant={variant}
         data-full-width={fullWidth}
         data-size={size}
+        data-icon-name={iconName}
+        data-icon-size={iconSize}
+        data-icon-fill={iconFill}
         className={buttonClassName}
         onClick={onClick}
       >
@@ -85,7 +93,9 @@ jest.mock("@shared/utils/utm", () => ({
 }));
 
 describe("Button", () => {
-  beforeEach(() => jest.clearAllMocks());
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
   describe("showButtonAs='solid' (default)", () => {
     it("renders BrandButton as anchor when href is provided", () => {
@@ -158,12 +168,12 @@ describe("Button", () => {
       expect(link.className).toContain("extra");
     });
 
-    it("renders MaterialIcon when iconName is provided", () => {
+    it("renders MaterialIcon when buttonIconName is provided", () => {
       render(
         <Button
           showButtonAs="text"
           buttonLabel="Go"
-          iconName="arrow_forward"
+          buttonIconName="arrow_forward"
           iconSize={20}
           iconFill={1}
         />
@@ -174,10 +184,103 @@ describe("Button", () => {
       expect(icon).toHaveAttribute("data-fill", "1");
     });
 
+    it("does not render MaterialIcon when buttonIconName is absent", () => {
+      render(
+        <Button
+          showButtonAs="text"
+          buttonLabel="Go"
+          iconName="arrow_forward"
+          iconSize={20}
+          iconFill={1}
+        />
+      );
+      expect(screen.queryByTestId("material-icon")).not.toBeInTheDocument();
+    });
+
     it("does not render MaterialIcon when iconName is not provided", () => {
       render(<Button showButtonAs="text" buttonLabel="Go" />);
       expect(screen.queryByTestId("material-icon")).not.toBeInTheDocument();
     });
+
+    it("renders buttonIconName icon before label when buttonIconPosition is left", () => {
+      render(
+        <Button
+          showButtonAs="text"
+          buttonLabel="See Jobs"
+          href="/jobs"
+          buttonIconName="expand_circle_right"
+          buttonIconPosition="left"
+        />
+      );
+      const link = screen.getByTestId("link");
+      const icon = screen.getByTestId("material-icon");
+      expect(icon).toBeInTheDocument();
+      expect(link.firstElementChild).toBe(icon);
+    });
+
+    it("renders buttonIconName icon after label by default", () => {
+      render(
+        <Button
+          showButtonAs="text"
+          buttonLabel="See Jobs"
+          href="/jobs"
+          buttonIconName="expand_circle_right"
+        />
+      );
+      const link = screen.getByTestId("link");
+      const icon = screen.getByTestId("material-icon");
+      expect(icon).toBeInTheDocument();
+      expect(link.lastElementChild).toBe(icon);
+      expect(link.className).toContain("no-underline");
+      expect(link.className).toContain("inline-flex");
+    });
+  });
+
+  describe("buttonIconName behavior", () => {
+    it("renders solid CTA icon before label when buttonIconPosition is left", () => {
+      render(
+        <Button
+          buttonLabel="See Jobs"
+          href="/jobs"
+          buttonIconName="expand_circle_right"
+          buttonIconPosition="left"
+          iconSize={20}
+          iconFill={1}
+        />
+      );
+      const link = screen.getByRole("link", { name: /see jobs/i });
+      expect(link).toHaveAttribute("data-icon-name", "expand_circle_right");
+      expect(link).toHaveAttribute("data-icon-size", "20");
+      expect(link).toHaveAttribute("data-icon-fill", "1");
+      expect(link).toHaveClass("flex-row-reverse");
+    });
+
+    it("renders solid CTA icon after label when buttonIconPosition is right", () => {
+      render(
+        <Button
+          buttonLabel="See Jobs"
+          href="/jobs"
+          buttonIconName="expand_circle_right"
+          buttonIconPosition="right"
+        />
+      );
+      const link = screen.getByRole("link", { name: /see jobs/i });
+      expect(link).toHaveAttribute("data-icon-name", "expand_circle_right");
+      expect(link).not.toHaveClass("flex-row-reverse");
+    });
+
+    it("passes through non-standard variant values", () => {
+      render(
+        <Button
+          buttonLabel="See Jobs"
+          href="/jobs"
+          buttonVariant={"primary_navy" as any}
+        />
+      );
+      const button = screen.getByTestId("brand-button");
+      expect(button).toHaveAttribute("data-variant", "primary_navy");
+    });
+
   });
 
   describe("showButtonAs='unstyled'", () => {
@@ -212,11 +315,9 @@ describe("Button", () => {
       );
     });
 
-    it("returns undefined when renderCheckPlans is not provided", () => {
-      const { container } = render(
-        <Button preDefinedFunctionExecution="check availability" />
-      );
-      expect(container.innerHTML).toBe("");
+    it("falls back to normal CTA when renderCheckPlans is not provided", () => {
+      render(<Button preDefinedFunctionExecution="check availability" />);
+      expect(screen.getByTestId("brand-button")).toBeInTheDocument();
     });
   });
 

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();
   });