@windstream/react-shared-components 0.2.88 → 0.2.90

package/package.json

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

package/src/contentful/blocks/anchored-bottom-banner/index.test.tsx

@@ -44,6 +44,61 @@ describe("AnchoredBottomBanner", () => {
     expect(screen.getByText("Limited time")).toBeInTheDocument();
   });
 
+  it("tags CTA label and suffix fields", () => {
+    render(
+      <AnchoredBottomBanner
+        ctaButtonLabel="Shop now"
+        ctaSuffixText="Limited time"
+        fieldProps={{
+          ctaButtonLabel: { "data-contentful-field-id": "ctaButtonLabel" },
+          ctaSuffixText: { "data-contentful-field-id": "ctaSuffixText" },
+        }}
+      />
+    );
+    expect(screen.getByText("Shop now")).toHaveAttribute(
+      "data-contentful-field-id",
+      "ctaButtonLabel"
+    );
+    expect(screen.getByText("Limited time")).toHaveAttribute(
+      "data-contentful-field-id",
+      "ctaSuffixText"
+    );
+  });
+
+  it("uses active scheduled-message fieldProps for its CTA content", () => {
+    render(
+      <AnchoredBottomBanner
+        ctaButtonLabel="Default label"
+        fieldProps={{
+          ctaButtonLabel: { "data-contentful-field-id": "defaultLabel" },
+        }}
+        scheduledMessages={[
+          {
+            ctaButtonLabel: "Scheduled label",
+            ctaSuffixText: "Scheduled suffix",
+            fieldProps: {
+              ctaButtonLabel: {
+                "data-contentful-field-id": "scheduledLabel",
+              },
+              ctaSuffixText: {
+                "data-contentful-field-id": "scheduledSuffix",
+              },
+            },
+          },
+        ]}
+      />
+    );
+    expect(screen.getByText("Scheduled label")).toHaveAttribute(
+      "data-contentful-field-id",
+      "scheduledLabel"
+    );
+    expect(screen.getByText("Scheduled suffix")).toHaveAttribute(
+      "data-contentful-field-id",
+      "scheduledSuffix"
+    );
+    expect(screen.queryByText("Default label")).not.toBeInTheDocument();
+  });
+
   it("renders iconName", () => {
     render(<AnchoredBottomBanner iconName="local_offer" />);
     expect(screen.getByText("local_offer")).toBeInTheDocument();

package/src/contentful/blocks/anchored-bottom-banner/index.tsx

@@ -149,6 +149,7 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
   scheduledMessages,
   initialNowMs,
   onResolved,
+  fieldProps,
 }) => {
   const backGroundColorClasses: Record<string, string> = {
     navy: "bg-bg-fill-inverse",
@@ -314,6 +315,9 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
   const effectiveCtaButtonTarget = hasActiveMessage
     ? activeMessage?.ctaButtonTarget
     : ctaButtonTarget;
+  const effectiveFieldProps = hasActiveMessage
+    ? activeMessage?.fieldProps
+    : fieldProps;
 
   // Active message owns its background; when unset it uses the same default as
   // the parent-with-no-background (bg-fill-brand-accent), not the parent's color.
@@ -370,9 +374,18 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
                 </span>
               )}
               {countdown.shouldShow ? " " : null}
-              {effectiveCtaButtonLabel && effectiveCtaButtonLabel}{" "}
+              {effectiveCtaButtonLabel && (
+                <span {...effectiveFieldProps?.ctaButtonLabel}>
+                  {effectiveCtaButtonLabel}
+                </span>
+              )}{" "}
               {effectiveCtaSuffixText && (
-                <span className="ml-0.5">{effectiveCtaSuffixText}</span>
+                <span
+                  className="ml-0.5"
+                  {...effectiveFieldProps?.ctaSuffixText}
+                >
+                  {effectiveCtaSuffixText}
+                </span>
               )}
             </div>
           </div>

package/src/contentful/blocks/anchored-bottom-banner/types.ts

@@ -1,3 +1,5 @@
+import type { FieldProps } from "@shared/types/field-props";
+
 // Allowed values for a scheduled message's daysToShow.
 // "ALL" (or empty) = every day; full names or 3-letter abbreviations, uppercase.
 export type ScheduledMessageDay =
@@ -49,6 +51,7 @@ export interface ScheduledMessage {
   ctaSuffixText?: string;
   ctaButtonLink?: string;
   ctaButtonTarget?: string;
+  fieldProps?: FieldProps<"ctaButtonLabel" | "ctaSuffixText">;
 }
 
 export interface AnchoredBottomBannerProps {
@@ -77,4 +80,6 @@ export interface AnchoredBottomBannerProps {
     activeMessage?: ScheduledMessage;
     applicableWeekday: string;
   }) => void;
+  /** DOM attributes for the rendered CTA label and suffix fields. */
+  fieldProps?: FieldProps<"ctaButtonLabel" | "ctaSuffixText">;
 }

package/src/contentful/blocks/award-marquee/index.test.tsx

@@ -15,6 +15,81 @@ const buildItems = (count: number): AwardMarqueeItem[] =>
   }));
 
 describe("AwardMarquee", () => {
+  it("tags block heading/footer and per-award title/description", () => {
+    render(
+      <AwardMarquee
+        heading="Heading"
+        footerText="Footer"
+        items={[
+          {
+            iconUrl: "/award.png",
+            title: "Award title",
+            description: "Award description",
+            fieldProps: {
+              title: {
+                "data-contentful-entry-id": "award-1",
+                "data-contentful-field-id": "title",
+                "data-contentful-locale": "en-US",
+              },
+              description: {
+                "data-contentful-entry-id": "award-1",
+                "data-contentful-field-id": "description",
+                "data-contentful-locale": "en-US",
+              },
+            },
+          },
+        ]}
+        fieldProps={{
+          heading: { "data-contentful-field-id": "heading" },
+          footerText: { "data-contentful-field-id": "footerText" },
+        }}
+      />
+    );
+    expect(screen.getByText("Heading")).toHaveAttribute(
+      "data-contentful-field-id",
+      "heading"
+    );
+    expect(screen.getByText("Footer")).toHaveAttribute(
+      "data-contentful-field-id",
+      "footerText"
+    );
+    expect(screen.getByText("Award title")).toHaveAttribute(
+      "data-contentful-field-id",
+      "title"
+    );
+    expect(screen.getByText("Award description")).toHaveAttribute(
+      "data-contentful-field-id",
+      "description"
+    );
+  });
+
+  it("does not duplicate item field tags in the animated marquee loop", () => {
+    const { container } = render(
+      <AwardMarquee
+        scroll={true}
+        items={buildItems(5).map((item, index) => ({
+          ...item,
+          fieldProps: {
+            title: {
+              "data-contentful-entry-id": `award-${index}`,
+              "data-contentful-field-id": "title",
+            },
+            description: {
+              "data-contentful-entry-id": `award-${index}`,
+              "data-contentful-field-id": "description",
+            },
+          },
+        }))}
+      />
+    );
+    expect(
+      container.querySelectorAll('[data-contentful-field-id="title"]')
+    ).toHaveLength(5);
+    expect(
+      container.querySelectorAll('[data-contentful-field-id="description"]')
+    ).toHaveLength(5);
+  });
+
   it.each([
     { scroll: false, count: 2 },
     { scroll: true, count: 5 },

package/src/contentful/blocks/award-marquee/index.tsx

@@ -21,18 +21,7 @@ const BACKGROUND_CLASS: Record<AwardMarqueeBackground, string> = {
 };
 
 const renderAwardItem = (
-  {
-    iconUrl,
-    iconAlt,
-    iconWidth,
-    iconHeight,
-    mobileIconUrl,
-    mobileIconAlt,
-    mobileIconWidth,
-    mobileIconHeight,
-    title,
-    description,
-  }: AwardMarqueeItem,
+  item: AwardMarqueeItem,
   key: React.Key,
   // Only the single-entry, non-animated (static) rendering gets the large,
   // centered treatment; the animated carousel is unaffected.
@@ -42,8 +31,21 @@ const renderAwardItem = (
   // (scroll={true} with <=3 items), the sm:hidden mobile side is already
   // handled by the separate animated half, so a nested swap here would never
   // be visible at any viewport.
-  allowMobileSwap = false
+  allowMobileSwap = false,
+  includeFieldProps = true
 ) => {
+  const {
+    iconUrl,
+    iconAlt,
+    iconWidth,
+    iconHeight,
+    mobileIconUrl,
+    mobileIconAlt,
+    mobileIconWidth,
+    mobileIconHeight,
+    title,
+    description,
+  } = item;
   const hasCaption = Boolean(title || description);
   const hasMobileIcon = allowMobileSwap && Boolean(mobileIconUrl);
 
@@ -85,10 +87,16 @@ const renderAwardItem = (
       )}
       {hasCaption && (
         <div className="w-[250px] text-center">
-          <p className="flex justify-center text-center text-body3 font-bold">
+          <p
+            className="flex justify-center text-center text-body3 font-bold"
+            {...(includeFieldProps ? item.fieldProps?.title : undefined)}
+          >
             {title}
           </p>
-          <p className="flex flex-wrap whitespace-normal text-center text-footnote">
+          <p
+            className="flex flex-wrap whitespace-normal text-center text-footnote"
+            {...(includeFieldProps ? item.fieldProps?.description : undefined)}
+          >
             {description}
           </p>
         </div>
@@ -106,6 +114,7 @@ export const AwardMarquee: React.FC<AwardMarqueeProps> = ({
   scroll = false,
   backgroundColor = "white",
   className,
+  fieldProps,
 }) => {
   const scrollAvailable = items.length > 3;
   const shouldDuplicate = items.length < 8;
@@ -129,7 +138,9 @@ export const AwardMarquee: React.FC<AwardMarqueeProps> = ({
             } as React.CSSProperties
           }
         >
-          {marqueeItems.map((item, index) => renderAwardItem(item, index))}
+          {marqueeItems.map((item, index) =>
+            renderAwardItem(item, index, false, false, index < items.length)
+          )}
         </div>
       </div>
     );
@@ -142,7 +153,8 @@ export const AwardMarquee: React.FC<AwardMarqueeProps> = ({
           item,
           index,
           items.length === 1,
-          allowMobileSwap && items.length === 1
+          allowMobileSwap && items.length === 1,
+          true
         )
       )}
     </div>
@@ -161,10 +173,19 @@ export const AwardMarquee: React.FC<AwardMarqueeProps> = ({
 
   return (
     <div id={anchorId} className={className}>
-      {heading && <p className="heading2 mb-4 px-4 text-center">{heading}</p>}
+      {heading && (
+        <p className="heading2 mb-4 px-4 text-center" {...fieldProps?.heading}>
+          {heading}
+        </p>
+      )}
       {marquee}
       {footerText && (
-        <p className="subheading3 mt-4 px-4 text-center">{footerText}</p>
+        <p
+          className="subheading3 mt-4 px-4 text-center"
+          {...fieldProps?.footerText}
+        >
+          {footerText}
+        </p>
       )}
     </div>
   );

package/src/contentful/blocks/award-marquee/types.ts

@@ -1,3 +1,5 @@
+import type { FieldProps } from "@shared/types/field-props";
+
 export type AwardMarqueeSpeed = "fast" | "medium" | "slow";
 
 export type AwardMarqueeBackground = "cream" | "gray90" | "white";
@@ -15,6 +17,8 @@ export type AwardMarqueeItem = {
   mobileIconHeight?: number;
   title?: string;
   description?: string;
+  /** Inspector attributes for this repeated award item's text. */
+  fieldProps?: FieldProps<"title" | "description">;
 };
 
 export type AwardMarqueeProps = {
@@ -26,4 +30,6 @@ export type AwardMarqueeProps = {
   scroll?: boolean;
   backgroundColor?: AwardMarqueeBackground;
   className?: string;
+  /** Inspector attributes for the block heading and footer text. */
+  fieldProps?: FieldProps<"heading" | "footerText">;
 };

package/src/contentful/blocks/cart-retention-banner/index.test.tsx

@@ -11,8 +11,13 @@ jest.mock("@shared/components/text", () => ({
 }));
 
 jest.mock("@shared/contentful/blocks/button", () => ({
-  Button: ({ children, onClick, buttonLabel, ...props }: any) => (
-    <button onClick={onClick} data-testid="banner-button" {...props}>
+  Button: ({ children, onClick, buttonLabel, fieldProps, ...props }: any) => (
+    <button
+      onClick={onClick}
+      data-testid="banner-button"
+      {...props}
+      {...fieldProps}
+    >
       {buttonLabel || children}
     </button>
   ),
@@ -70,6 +75,59 @@ describe("CartRetentionBanner", () => {
   });
 
   describe("modal behavior", () => {
+    it("tags the heading, rich-text description and CTA", () => {
+      render(
+        <CartRetentionBanner
+          fields={defaultFields}
+          fieldProps={{
+            mainHeading: {
+              "data-contentful-field-id": "mainHeading",
+              "data-contentful-entry-id": "cart-banner",
+              "data-contentful-locale": "en-US",
+            },
+            description: {
+              "data-contentful-field-id": "description",
+              "data-contentful-entry-id": "cart-banner",
+              "data-contentful-locale": "en-US",
+            },
+            cta: {
+              "data-contentful-field-id": "cta",
+              "data-contentful-entry-id": "cart-banner",
+              "data-contentful-locale": "en-US",
+            },
+          }}
+          checkShouldShowBanner={() => true}
+        />
+      );
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
+
+      expect(screen.getByText("Welcome back!")).toHaveAttribute(
+        "data-contentful-field-id",
+        "mainHeading"
+      );
+      expect(screen.getByTestId("rich-text").parentElement).toHaveAttribute(
+        "data-contentful-field-id",
+        "description"
+      );
+      expect(screen.getByTestId("banner-button")).toHaveAttribute(
+        "data-contentful-field-id",
+        "cta"
+      );
+      [
+        screen.getByText("Welcome back!"),
+        screen.getByTestId("rich-text").parentElement,
+        screen.getByTestId("banner-button"),
+      ].forEach(element => {
+        expect(element).toHaveAttribute(
+          "data-contentful-entry-id",
+          "cart-banner"
+        );
+        expect(element).toHaveAttribute("data-contentful-locale", "en-US");
+      });
+    });
+
     it("renders a section with anchorId", () => {
       render(<CartRetentionBanner fields={defaultFields} />);
       const section = document.querySelector("section#cart-banner");
@@ -416,7 +474,9 @@ describe("CartRetentionBanner", () => {
 
   describe("image and layout options", () => {
     it("does not render an image when none is provided", () => {
-      render(<CartRetentionBanner fields={defaultFields} isInPopupContainer={true} />);
+      render(
+        <CartRetentionBanner fields={defaultFields} isInPopupContainer={true} />
+      );
       expect(screen.queryByTestId("banner-image")).not.toBeInTheDocument();
     });
 

package/src/contentful/blocks/cart-retention-banner/index.tsx

@@ -1,7 +1,10 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import type { TypeCartRetentionBannerFields } from "./types";
+import type {
+  CartRetentionBannerFieldProps,
+  TypeCartRetentionBannerFields,
+} from "./types";
 
 import { NextImage } from "@shared/components/next-image";
 import { Text } from "@shared/components/text";
@@ -45,6 +48,7 @@ const isShapeBackgroundThemeKey = (
 
 const CartRetentionBanner: React.FC<{
   fields: TypeCartRetentionBannerFields;
+  fieldProps?: CartRetentionBannerFieldProps;
   sys?: any;
   isInPopupContainer?: boolean;
   onClose?: () => void;
@@ -53,6 +57,7 @@ const CartRetentionBanner: React.FC<{
   onBannerShown?: () => void;
 }> = ({
   fields,
+  fieldProps,
   isInPopupContainer = false,
   onClose,
   onContinueCheckout,
@@ -174,15 +179,22 @@ const CartRetentionBanner: React.FC<{
           "heading2",
           hasSideImage ? "text-center md:text-left" : "text-center"
         )}
+        {...fieldProps?.mainHeading}
       >
         {mainHeading || "Welcome back. Let's finish your order"}
       </Text>
-      {description &&
-        renderContentfulRichText(
-          toDocument(description?.json),
-          false,
-          cx("body2", hasSideImage ? "text-center md:text-left" : "text-center")
-        )}
+      {description && (
+        <div {...fieldProps?.description}>
+          {renderContentfulRichText(
+            toDocument(description?.json),
+            false,
+            cx(
+              "body2",
+              hasSideImage ? "text-center md:text-left" : "text-center"
+            )
+          )}
+        </div>
+      )}
       <div
         className={cx(
           "flex w-full pt-5 md:px-4",
@@ -195,6 +207,7 @@ const CartRetentionBanner: React.FC<{
           disableAnimation={cta?.disableAnimation ?? true}
           animationType={cta?.animationType}
           fullWidth={true}
+          fieldProps={cta?.fieldProps ?? fieldProps?.cta}
         />
       </div>
     </>
@@ -288,7 +301,7 @@ const CartRetentionBanner: React.FC<{
         ) : (
           // overflow-x:clip contains the CTA hover-scale (keeps overflow-y);
           // px keeps the full-width button off the modal border.
-          <div className="pop-up-body mb-5 w-full [overflow-x:clip] px-3 md:px-6">
+          <div className="pop-up-body mb-5 w-full px-3 [overflow-x:clip] md:px-6">
             {wrappedBodyContent}
           </div>
         )}

package/src/contentful/blocks/cart-retention-banner/types.ts

@@ -1,4 +1,5 @@
 import type { AnimationType } from "@shared/components/animation-wrapper";
+import type { FieldProps } from "@shared/types/field-props";
 
 export type CartRetentionBannerImagePosition = "left" | "right" | "center";
 
@@ -50,3 +51,6 @@ export interface TypeCartRetentionBannerFields {
 }
 
 export type TypeCartRetentionBanner = TypeCartRetentionBannerFields;
+export type CartRetentionBannerFieldProps = FieldProps<
+  "mainHeading" | "description" | "cta"
+>;

package/src/contentful/blocks/floating-banner/index.test.tsx

@@ -20,8 +20,10 @@ jest.mock("@shared/components/next-image", () => ({
 }));
 
 jest.mock("@shared/components/text", () => ({
-  Text: ({ as: Tag = "span", children, className }: any) => (
-    <Tag className={className}>{children}</Tag>
+  Text: ({ as: Tag = "span", children, className, ...rest }: any) => (
+    <Tag className={className} {...rest}>
+      {children}
+    </Tag>
   ),
 }));
 
@@ -42,6 +44,56 @@ const defaultProps: FloatingBannerProps = {
 };
 
 describe("FloatingBanner", () => {
+  it("spreads fieldProps onto each rendered content field", () => {
+    const tag = (field: string) => ({
+      "data-contentful-field-id": field,
+      "data-contentful-entry-id": "floating-banner",
+      "data-contentful-locale": "en-US",
+    });
+    const { container } = render(
+      <FloatingBanner
+        {...defaultProps}
+        fieldProps={{
+          title: tag("title"),
+          subtitle: tag("subtitle"),
+          description: tag("description"),
+          disclaimer: tag("disclaimer"),
+          cta: tag("cta"),
+        }}
+      />
+    );
+    ["title", "subtitle", "description", "disclaimer", "cta"].forEach(field => {
+      expect(
+        container.querySelector(`[data-contentful-field-id="${field}"]`)
+      ).toHaveAttribute("data-contentful-entry-id", "floating-banner");
+    });
+    container
+      .querySelectorAll("[data-contentful-field-id]")
+      .forEach(element =>
+        expect(element).toHaveAttribute("data-contentful-locale", "en-US")
+      );
+  });
+
+  it("supports partial fieldProps and omits tags when a field is not rendered", () => {
+    const { container } = render(
+      <FloatingBanner
+        title="Only title"
+        fieldProps={{
+          title: { "data-contentful-field-id": "title" },
+          description: { "data-contentful-field-id": "description" },
+        }}
+      />
+    );
+    expect(
+      container.querySelectorAll("[data-contentful-field-id]")
+    ).toHaveLength(1);
+  });
+
+  it("does not add tags when fieldProps is omitted", () => {
+    const { container } = render(<FloatingBanner {...defaultProps} />);
+    expect(container.querySelector("[data-contentful-field-id]")).toBeNull();
+  });
+
   describe("Rendering", () => {
     it("renders with all props", () => {
       render(<FloatingBanner {...defaultProps} />);

package/src/contentful/blocks/floating-banner/index.tsx

@@ -16,6 +16,7 @@ export const FloatingBanner: React.FC<FloatingBannerProps> = ({
   color = "light",
   enableHeading,
   maxWidth = true,
+  fieldProps,
 }) => {
   const bgColorClasses: Record<ThemeKey, string> = {
     blue: "bg-[#07B2E2]",
@@ -51,6 +52,7 @@ export const FloatingBanner: React.FC<FloatingBannerProps> = ({
               <Text
                 as={enableHeading ? "h1" : "h2"}
                 className={`heading5 mb-3 text-center lg:w-[95%] lg:text-left`}
+                {...fieldProps?.title}
               >
                 {title}
               </Text>
@@ -59,6 +61,7 @@ export const FloatingBanner: React.FC<FloatingBannerProps> = ({
               <Text
                 as={"h3"}
                 className={`heading3 mb-3 text-center lg:text-left`}
+                {...fieldProps?.subtitle}
               >
                 {subtitle}
               </Text>
@@ -67,13 +70,17 @@ export const FloatingBanner: React.FC<FloatingBannerProps> = ({
               <Text
                 as="div"
                 className="body1 text-center lg:w-[95%] lg:text-left"
+                {...fieldProps?.description}
               >
                 {description}
               </Text>
             )}
           </div>
           {cta && (
-            <div className="mt-5 flex flex-shrink-0 justify-center lg:mt-0 lg:items-center">
+            <div
+              className="mt-5 flex flex-shrink-0 justify-center lg:mt-0 lg:items-center"
+              {...fieldProps?.cta}
+            >
               <Button
                 buttonVariant="secondary"
                 {...cta}
@@ -84,7 +91,11 @@ export const FloatingBanner: React.FC<FloatingBannerProps> = ({
         </div>
         {disclaimer && (
           <div>
-            <Text as="div" className="body3 mt-3 text-center">
+            <Text
+              as="div"
+              className="body3 mt-3 text-center"
+              {...fieldProps?.disclaimer}
+            >
               {disclaimer}
             </Text>
           </div>

package/src/contentful/blocks/floating-banner/types.ts

@@ -1,5 +1,7 @@
 import React from "react";
 
+import type { FieldProps } from "@shared/types/field-props";
+
 export type FloatingBannerProps = {
   title?: string;
   enableHeading?: boolean;
@@ -11,6 +13,10 @@ export type FloatingBannerProps = {
   background?: "green" | "navy" | "white" | "purple" | "blue" | "yellow";
   color?: "dark" | "light";
   maxWidth?: boolean;
+  /** Consumer-supplied DOM attributes for the rendered content fields. */
+  fieldProps?: FieldProps<
+    "title" | "subtitle" | "description" | "disclaimer" | "cta"
+  >;
 };
 
 export type ThemeKey =