@windstream/react-shared-components 0.2.71 → 0.2.72

package/package.json

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

package/src/components/select-plan-button/index.tsx

@@ -31,9 +31,9 @@ export const SelectPlanButton: React.FC<SelectPlanButtonProps> = ({
     },
     cta: cta,
   });
-  const handleSelect = () => {
+  const handleSelect = (event: React.MouseEvent<HTMLElement>) => {
     setOpen(true);
-    onSelect();
+    onSelect(event);
   };
 
   return (

package/src/components/select-plan-button/types.ts

@@ -5,7 +5,7 @@ import { ButtonProps } from "@shared/contentful/blocks/button/types";
 import { CheckPlansProps } from "@shared/types/micro-components";
 
 export type SelectPlanButtonProps = {
-  onSelect: () => void;
+  onSelect: (event: React.MouseEvent<HTMLElement>) => void;
   speed: string;
   techType?: string;
   isMax?: boolean;

package/src/components/video-link/vimeo-embed.test.tsx

@@ -7,6 +7,20 @@ jest.mock("@shared/utils", () => ({
   cx: (...args: any[]) => args.filter(Boolean).join(" "),
 }));
 
+// Mock the heavy real @vimeo/player. These tests only assert on the rendered
+// iframe, and instantiating the real Player leaves async postMessage work and
+// timers running after the test, which can leak into sibling test files in the
+// same Jest worker and make them flaky. A lightweight mock keeps the suite
+// isolated and deterministic.
+jest.mock("@vimeo/player", () => ({
+  __esModule: true,
+  default: jest.fn().mockImplementation(() => ({
+    on: jest.fn(),
+    off: jest.fn(),
+    destroy: jest.fn(() => Promise.resolve()),
+  })),
+}));
+
 describe("VimeoEmbed", () => {
   describe("Rendering", () => {
     it("renders iframe with correct src for standard vimeo link", () => {

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

@@ -86,16 +86,16 @@ describe("ProductCard", () => {
 
     it("renders plan name", () => {
       render(<ProductCard {...defaultProps} />);
-      expect(
-        screen.getByRole("heading", { level: 3 })
-      ).toHaveTextContent("Kinetic 500");
+      expect(screen.getByRole("heading", { level: 3 })).toHaveTextContent(
+        "Kinetic 500"
+      );
     });
 
     it("renders plan subtext", () => {
       render(<ProductCard {...defaultProps} />);
-      expect(
-        screen.getByRole("heading", { level: 3 })
-      ).toHaveTextContent("Up to 500 Mbps");
+      expect(screen.getByRole("heading", { level: 3 })).toHaveTextContent(
+        "Up to 500 Mbps"
+      );
     });
 
     it("renders price dollar sign", () => {
@@ -126,6 +126,45 @@ describe("ProductCard", () => {
     });
   });
 
+  describe("Business theme", () => {
+    it("uses the semantic brand token for the plan name and lowercases it by default", () => {
+      render(<ProductCard {...defaultProps} />);
+      const heading = screen.getByRole("heading", { level: 3 });
+      // Color is driven by the themeable token, not a hardcoded hex.
+      expect(heading.className).toContain("text-text-brand");
+      expect(heading.className).toContain("lowercase");
+      expect(heading.className).not.toContain("[#0393BA]");
+    });
+
+    it("keeps the authored casing in business mode (color stays theme-driven)", () => {
+      render(<ProductCard {...defaultProps} enableBusinessSettings={true} />);
+      const heading = screen.getByRole("heading", { level: 3 });
+      // Still the semantic brand token — the business teal comes from the
+      // data-theme scope, not a card-level class.
+      expect(heading.className).toContain("text-text-brand");
+      expect(heading.className).not.toContain("lowercase");
+      expect(heading.className).not.toContain("[#0393BA]");
+    });
+
+    it("never hardcodes a hex accent on the plan name", () => {
+      render(<ProductCard {...defaultProps} enableBusinessSettings={true} />);
+      const heading = screen.getByRole("heading", { level: 3 });
+      expect(heading.className).not.toMatch(/#[0-9a-fA-F]{6}/);
+    });
+
+    it("keeps the dark (highlighted) accent regardless of business mode", () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          theme="dark"
+          enableBusinessSettings={true}
+        />
+      );
+      const heading = screen.getByRole("heading", { level: 3 });
+      expect(heading.className).toContain("text-text-accent-on-bg-inverse");
+    });
+  });
+
   describe("Price Suffix", () => {
     it("renders priceSuffixBottom when provided", () => {
       render(
@@ -250,9 +289,9 @@ describe("ProductCard", () => {
       const dollar = screen.getByText("$100");
       expect(dollar).toHaveClass("label3");
       // The surrounding text keeps the parent body3 weight (not label3).
-      expect(
-        screen.getByText(/prepaid Mastercard®/)
-      ).not.toHaveClass("label3");
+      expect(screen.getByText(/prepaid Mastercard®/)).not.toHaveClass(
+        "label3"
+      );
     });
   });
 

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

@@ -54,6 +54,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
   priceSuffixBottom,
   hasAnyBadge = false,
   twoColumn = false,
+  enableBusinessSettings = false,
 }) => {
   const [internalExpanded, setInternalExpanded] = useState(false);
   // Use parent state if provided, otherwise use internal state
@@ -116,7 +117,8 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               as="h3"
               className={cx(
                 planNameClass,
-                "whitespace-normal lowercase",
+                "whitespace-normal",
+                !enableBusinessSettings && "lowercase",
                 isDark ? "text-text-accent-on-bg-inverse" : "text-text-brand"
               )}
             >

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

@@ -26,7 +26,7 @@ export interface ProductCardProps {
   onToggleExpand?: () => void;
   ctaText?: string;
   cta?: ButtonProps;
-  onCtaClick: () => void;
+  onCtaClick: (event: React.MouseEvent<HTMLElement>) => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
   /** True when any card in the set has a best-value badge, so non-badge cards
    *  reserve the banner height and stay vertically aligned. */
@@ -35,4 +35,5 @@ export interface ProductCardProps {
    *  compact mobile typography below `md`. One-column stacks keep the standard
    *  sizes at every breakpoint. */
   twoColumn?: boolean;
+  enableBusinessSettings?: boolean;
 }

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

@@ -31,12 +31,14 @@ jest.mock("@shared/contentful/blocks/cards/product-card", () => ({
     onCtaClick,
     onToggleExpand,
     isExpanded,
+    enableBusinessSettings,
   }: any) => (
     <div
       data-testid="product-card"
       data-plan={planName}
       data-speed={speed}
       data-expanded={isExpanded}
+      data-business={enableBusinessSettings ? "true" : "false"}
     >
       {planName}
       <button onClick={onCtaClick} data-testid="product-cta">
@@ -329,15 +331,54 @@ describe("ProductCardCarousel", () => {
     expect(toggleButtons[0]).toBeInTheDocument();
   });
 
-  it("handles CTA click on product card", () => {
+  it("fires onProductCardCtaClick with the product item and click event", () => {
+    const onProductCardCtaClick = jest.fn();
+    const fields = createProductFields([sampleProduct]);
+    render(
+      <ProductCardCarousel
+        fields={fields}
+        onProductCardCtaClick={onProductCardCtaClick}
+      />
+    );
+    const ctaButton = screen.getByTestId("product-cta");
+    fireEvent.click(ctaButton);
+    expect(onProductCardCtaClick).toHaveBeenCalledTimes(1);
+    expect(onProductCardCtaClick.mock.calls[0][0]).toEqual(
+      expect.objectContaining({ sys: { id: "prod-1" } })
+    );
+    // Second argument is the originating click event.
+    expect(onProductCardCtaClick.mock.calls[0][1]).toBeDefined();
+  });
+
+  it("handles CTA click when no onProductCardCtaClick is provided", () => {
     const fields = createProductFields([sampleProduct]);
     render(<ProductCardCarousel fields={fields} />);
     const ctaButton = screen.getByTestId("product-cta");
     fireEvent.click(ctaButton);
-    // handleCtaClick just returns; no error
+    // No handler wired; click is a no-op and must not throw.
     expect(ctaButton).toBeInTheDocument();
   });
 
+  it("defaults product cards to the non-business theme", () => {
+    const fields = createProductFields([sampleProduct]);
+    render(<ProductCardCarousel fields={fields} />);
+    expect(screen.getAllByTestId("product-card")[0]).toHaveAttribute(
+      "data-business",
+      "false"
+    );
+  });
+
+  it("forwards enableBusinessSettings to the product cards", () => {
+    const fields = createProductFields([sampleProduct]);
+    render(
+      <ProductCardCarousel fields={fields} enableBusinessSettings={true} />
+    );
+    expect(screen.getAllByTestId("product-card")[0]).toHaveAttribute(
+      "data-business",
+      "true"
+    );
+  });
+
   it("handles toggle expand for mobile cards in carousel mode", () => {
     const items = Array.from({ length: 4 }, (_, i) => ({
       ...sampleProduct,

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

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
   CarouselWithProductCards,
   CarouselWithTestimonialCards,
+  ProductCardFields,
   TabSwitchProps,
 } from "./types";
 
@@ -17,11 +18,18 @@ function ProductCardPanel({
   fields,
   renderCheckPlans,
   isVisible = true,
+  onProductCardCtaClick,
+  enableBusinessSettings = false,
 }: {
   fields: CarouselWithProductCards;
   onModalButtonClick?: (id?: string) => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
   isVisible?: boolean;
+  onProductCardCtaClick?: (
+    item: ProductCardFields,
+    event: React.MouseEvent<HTMLElement>
+  ) => void;
+  enableBusinessSettings?: boolean;
 }) {
   const itemsExpanded = fields?.items?.items?.[0]?.benefitsExpanded || false;
   const [desktopExpanded, setDesktopExpanded] = useState(itemsExpanded);
@@ -284,8 +292,8 @@ function ProductCardPanel({
       setDesktopExpanded(prev => !prev);
     };
 
-    const handleCtaClick = () => {
-      return;
+    const handleCtaClick = (event: React.MouseEvent<HTMLElement>) => {
+      onProductCardCtaClick?.(item as ProductCardFields, event);
     };
 
     return (
@@ -331,6 +339,7 @@ function ProductCardPanel({
           priceSuffixBottom={item?.priceSuffixBottom}
           hasAnyBadge={hasAnyBadge}
           twoColumn={twoColumn}
+          enableBusinessSettings={enableBusinessSettings}
         />
       </div>
     );
@@ -425,12 +434,19 @@ export function ProductCardCarousel({
   renderCheckPlans,
   activeTab,
   tabs,
+  onProductCardCtaClick,
+  enableBusinessSettings = false,
 }: {
   fields: CarouselWithProductCards;
   onModalButtonClick?: (id?: string) => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
   activeTab?: string;
   tabs?: string[];
+  onProductCardCtaClick?: (
+    item: ProductCardFields,
+    event: React.MouseEvent<HTMLElement>
+  ) => void;
+  enableBusinessSettings?: boolean;
 }) {
   const allItems = fields?.items?.items || [];
 
@@ -456,6 +472,8 @@ export function ProductCardCarousel({
                 fields={tabFields as CarouselWithProductCards}
                 renderCheckPlans={renderCheckPlans}
                 isVisible={tab === activeTab}
+                onProductCardCtaClick={onProductCardCtaClick}
+                enableBusinessSettings={enableBusinessSettings}
               />
             </div>
           );
@@ -465,7 +483,12 @@ export function ProductCardCarousel({
   }
 
   return (
-    <ProductCardPanel fields={fields} renderCheckPlans={renderCheckPlans} />
+    <ProductCardPanel
+      fields={fields}
+      renderCheckPlans={renderCheckPlans}
+      onProductCardCtaClick={onProductCardCtaClick}
+      enableBusinessSettings={enableBusinessSettings}
+    />
   );
 }
 

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

@@ -8,8 +8,16 @@ import { fireEvent, render, screen } from "@testing-library/react";
 
 // Mock helper components
 jest.mock("./helper", () => ({
-  ProductCardCarousel: ({ fields }: any) => (
-    <div data-testid="product-card-carousel">{fields?.title}</div>
+  ProductCardCarousel: ({ fields, onProductCardCtaClick }: any) => (
+    <div data-testid="product-card-carousel">
+      {fields?.title}
+      <button
+        data-testid="mock-cta"
+        onClick={e => onProductCardCtaClick?.({ sys: { id: "prod-1" } }, e)}
+      >
+        cta
+      </button>
+    </div>
   ),
   TestimonialCarousel: ({ fields }: any) => (
     <div data-testid="testimonial-carousel">{fields?.title}</div>
@@ -200,6 +208,68 @@ describe("Carousel", () => {
     });
   });
 
+  describe("analytics", () => {
+    it("forwards onProductCardCtaClick with the item and click event", () => {
+      const onProductCardCtaClick = jest.fn();
+      render(
+        <Carousel
+          {...defaultProps}
+          hasProductCards={true}
+          onProductCardCtaClick={onProductCardCtaClick}
+        />
+      );
+      fireEvent.click(screen.getByTestId("mock-cta"));
+      expect(onProductCardCtaClick).toHaveBeenCalledTimes(1);
+      expect(onProductCardCtaClick.mock.calls[0][0]).toEqual({
+        sys: { id: "prod-1" },
+      });
+      // Second argument is the originating click event (needed by consumers to
+      // dispatch their own click analytics from the clicked element).
+      expect(onProductCardCtaClick.mock.calls[0][1]).toBeDefined();
+    });
+
+    it("attaches productCardsRef to the product-card container", () => {
+      const ref = React.createRef<HTMLDivElement>();
+      render(
+        <Carousel
+          {...defaultProps}
+          hasProductCards={true}
+          productCardsRef={ref}
+        />
+      );
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+      expect(ref.current).toContainElement(
+        screen.getByTestId("product-card-carousel")
+      );
+    });
+  });
+
+  describe("business theme", () => {
+    it("does not scope the business theme by default", () => {
+      const { container } = render(
+        <Carousel {...defaultProps} hasProductCards={true} />
+      );
+      expect(
+        container.querySelector('[data-theme="business-rebrand"]')
+      ).not.toBeInTheDocument();
+    });
+
+    it("scopes the product cards to the business-rebrand theme when enabled", () => {
+      const { container } = render(
+        <Carousel
+          {...defaultProps}
+          hasProductCards={true}
+          enableBusinessSettings={true}
+        />
+      );
+      const scope = container.querySelector('[data-theme="business-rebrand"]');
+      expect(scope).toBeInTheDocument();
+      expect(scope).toContainElement(
+        screen.getByTestId("product-card-carousel")
+      );
+    });
+  });
+
   describe("testimonial cards", () => {
     it("renders TestimonialCarousel when hasTestimonialCards is true", () => {
       render(<Carousel {...defaultProps} hasTestimonialCards={true} />);

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

@@ -22,6 +22,9 @@ export const Carousel: React.FC<CarouselProps> = ({
   renderCheckPlans,
   testimonialAutoScroll = true,
   showSwitch = false,
+  productCardsRef,
+  onProductCardCtaClick,
+  enableBusinessSettings = false,
 }) => {
   const baseClass = hasProductCards
     ? "px-3 py-9 md:py-20"
@@ -45,7 +48,11 @@ export const Carousel: React.FC<CarouselProps> = ({
           )}
         </div>
         {hasProductCards && (
-          <div className="flex flex-col gap-8">
+          <div
+            ref={productCardsRef}
+            data-theme={enableBusinessSettings ? "business-rebrand" : undefined}
+            className="flex flex-col gap-8"
+          >
             {showSwitch && hasProductCards && tabs.length > 1 && (
               <TabSwitch
                 tabs={tabs}
@@ -60,6 +67,8 @@ export const Carousel: React.FC<CarouselProps> = ({
                 fields={fields as CarouselWithProductCards}
                 activeTab={activeTab}
                 tabs={tabs}
+                onProductCardCtaClick={onProductCardCtaClick}
+                enableBusinessSettings={enableBusinessSettings}
               />
             )}
           </div>

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

@@ -136,6 +136,18 @@ export type CarouselProps = {
   testimonialAutoScroll?: boolean;
   onModalButtonClick?: (id?: string) => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+  /** Ref attached to the product-card ("speeds list") container so consumers
+   *  can observe its scroll visibility (e.g. to fire their own view-tracking
+   *  analytics). Only product-card carousels expose a measurable element. */
+  productCardsRef?: React.Ref<HTMLDivElement>;
+  /** Fired when a product card's CTA ("Select plan") is clicked, with the
+   *  Contentful product-card entry and the originating click event. Consumers
+   *  map this onto their click analytics (e.g. Segment "Site Clicked"). */
+  onProductCardCtaClick?: (
+    item: ProductCardFields,
+    event: React.MouseEvent<HTMLElement>
+  ) => void;
+  enableBusinessSettings?: boolean;
 };
 
 export interface TabSwitchProps {