@windstream/react-shared-components 0.2.70 → 0.2.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.70",
+  "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 {

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

@@ -34,6 +34,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
     logoLockup,
     heroVideo,
     heroVideoMobile,
+    fieldProps,
   } = props;
 
   const isButtonType = (cta: any) => {
@@ -74,6 +75,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
         height={208}
         quality={90}
         loading="eager"
+        {...fieldProps?.badgeImage}
       />
     ) : null;
   return (
@@ -88,6 +90,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
           aria-label={heroVideo?.title || title || "Hero background video"}
           className="absolute inset-0 z-0 hidden h-full w-full object-fill xl:block"
           data-testid="hero-background-video-desktop"
+          {...fieldProps?.heroVideo}
         >
           <source src={desktopVideoUrl} type="video/mp4" />
         </video>
@@ -108,12 +111,13 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
               <Text
                 as={showAsHeading ? "h1" : "h2"}
                 className="heading2 lg:heading1"
+                {...fieldProps?.title}
               >
                 {title}
               </Text>
             )}
             {subTitle && (
-              <Text as="p" className="subheading3">
+              <Text as="p" className="subheading3" {...fieldProps?.subTitle}>
                 {subTitle}
               </Text>
             )}
@@ -121,7 +125,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             {/* price callout */}
             {price ? (
               <div className="flex sm:justify-center sm:text-left lg:justify-start">
-                <div className="mr-2 mt-0.5">
+                <div className="mr-2 mt-0.5" {...fieldProps?.priceCallout}>
                   {priceCallout
                     ? priceCallout.split("|").map((line, index) => (
                         <Text key={index} as="p" className="body2">
@@ -134,11 +138,15 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   <Text as="p" className="subheading1 mt-0.5">
                     $
                   </Text>
-                  <Text as="p" className="subheading5">
+                  <Text as="p" className="subheading5" {...fieldProps?.price}>
                     {price}
                   </Text>
                   {priceSuffix ? (
-                    <Text as="p" className="subheading1 mt-0.5">
+                    <Text
+                      as="p"
+                      className="subheading1 mt-0.5"
+                      {...fieldProps?.priceSuffix}
+                    >
                       {priceSuffix}
                     </Text>
                   ) : null}
@@ -153,6 +161,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   "subheading1",
                   "text-left sm:text-center xl:text-left"
                 )}
+                {...fieldProps?.pricingDescription}
               >
                 {pricingDescription}
               </Text>
@@ -163,26 +172,38 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                 data-cy="hero-pricing-disclaimer"
                 as="p"
                 className={cx("body3", "text-left sm:text-center xl:text-left")}
+                {...fieldProps?.pricingDescriptionDisclaimer}
               >
                 {pricingDescriptionDisclaimer}
               </Text>
             ) : null}
 
             {/* checklist */}
-            {checklist && (
-              <Checklist
-                iconSize={24}
-                listItemClassName={`body2 text-left ${textColorClass}`}
-                items={checklist.map(item =>
-                  item.iconUrl
-                    ? { title: item.title, iconUrl: item.iconUrl }
-                    : item.title
-                )}
-              />
-            )}
+            {checklist &&
+              (() => {
+                const checklistEl = (
+                  <Checklist
+                    iconSize={24}
+                    listItemClassName={`body2 text-left ${textColorClass}`}
+                    items={checklist.map(item =>
+                      item.iconUrl
+                        ? { title: item.title, iconUrl: item.iconUrl }
+                        : item.title
+                    )}
+                  />
+                );
+                return fieldProps?.checklist ? (
+                  <div {...fieldProps.checklist}>{checklistEl}</div>
+                ) : (
+                  checklistEl
+                );
+              })()}
 
             {logoLockup ? (
-              <div className="text-left sm:text-center xl:mb-0 xl:text-left">
+              <div
+                className="text-left sm:text-center xl:mb-0 xl:text-left"
+                {...fieldProps?.logoLockup}
+              >
                 <NextImage
                   src={logoLockup}
                   alt={"Logo Lockup"}
@@ -256,7 +277,11 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   {secondaryCtaPrefix &&
                     secondaryCta?.preDefinedFunctionExecution !==
                       "check availability" && (
-                      <Text as="span" className="body2 mr-1">
+                      <Text
+                        as="span"
+                        className="body2 mr-1"
+                        {...fieldProps?.secondaryCtaPrefix}
+                      >
                         {secondaryCtaPrefix}
                       </Text>
                     )}
@@ -300,6 +325,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   aria-label={heroVideoMobile?.title || title || "Hero video"}
                   className="h-[350px] w-full rounded-[40px] object-cover object-center sm:h-[420px] md:h-[520px]"
                   data-testid="hero-video-mobile"
+                  {...fieldProps?.heroVideo}
                 >
                   <source src={mobileVideoUrl} type="video/mp4" />
                 </video>
@@ -320,6 +346,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                     height={104}
                     quality={90}
                     loading="eager"
+                    {...fieldProps?.badgeImage}
                   />
                 ) : null}
                 {heroImageUrl ? (
@@ -336,6 +363,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                     sizes="100vw"
                     quality={90}
                     loading="eager"
+                    {...fieldProps?.heroImage}
                   />
                 ) : null}
               </>
@@ -348,7 +376,11 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             >
               {secondaryCtaPrefix &&
                 !secondaryCta?.preDefinedFunctionExecution && (
-                  <Text as="span" className="body2 mr-1">
+                  <Text
+                    as="span"
+                    className="body2 mr-1"
+                    {...fieldProps?.secondaryCtaPrefix}
+                  >
                     {secondaryCtaPrefix}
                   </Text>
                 )}
@@ -396,6 +428,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
               height={584}
               quality={90}
               loading="eager"
+              {...fieldProps?.heroImage}
             />
           ) : null}
         </div>

package/src/contentful/blocks/primary-hero/types.ts

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { CheckPlansProps } from "@shared/types/micro-components";
+import type { FieldProps } from "@shared/types/field-props";
 
 export type PrimaryHeroVideo = {
   url?: string;
@@ -42,4 +43,20 @@ export type PrimaryHeroProps = {
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
   onModalButtonClick?: (id?: string) => void;
   onImageClick?: () => void;
+  /** Extra DOM attribute props, spread onto the respective rendered elements. */
+  fieldProps?: FieldProps<
+    | "title"
+    | "subTitle"
+    | "price"
+    | "priceSuffix"
+    | "priceCallout"
+    | "pricingDescription"
+    | "pricingDescriptionDisclaimer"
+    | "secondaryCtaPrefix"
+    | "checklist"
+    | "logoLockup"
+    | "badgeImage"
+    | "heroImage"
+    | "heroVideo"
+  >;
 };