@windstream/react-shared-components 0.2.92 → 0.2.94

package/package.json

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

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

@@ -8,11 +8,13 @@ jest.mock("@shared/components/list", () => ({
   List: ({
     children,
     className,
+    ...rest
   }: {
     children: React.ReactNode;
     className?: string;
+    [key: string]: unknown;
   }) => (
-    <ul data-testid="list" className={className}>
+    <ul data-testid="list" className={className} {...rest}>
       {children}
     </ul>
   ),
@@ -117,6 +119,21 @@ describe("Checklist", () => {
   });
 
   describe("fieldProps", () => {
+    it("applies the items fieldProps to the list", () => {
+      render(
+        <Checklist
+          items={["One"]}
+          fieldProps={{
+            items: { "data-contentful-field-id": "checklist-items" },
+          }}
+        />
+      );
+      expect(screen.getByTestId("list")).toHaveAttribute(
+        "data-contentful-field-id",
+        "checklist-items"
+      );
+    });
+
     it("spreads each structured item's fieldProps onto its own row", () => {
       render(
         <Checklist

package/src/components/checklist/index.tsx

@@ -31,33 +31,37 @@ export const Checklist: React.FC<ChecklistProps> = props => {
     iconPosition = "center",
     iconColor = "green",
     iconClassName,
+    fieldProps,
   } = props;
   const showIcons = listIconName !== "disc";
   if (!items?.length) return null;
 
- const renderContent = (content: React.ReactNode | string) => {
-  if (
-    typeof content === "string" &&
-    content.includes("|") &&
-    (content.match(/\|/g) || []).length % 2 === 0
-  ) {
-    const parts = content.split("|");
-    const count = (content.match(/\|/g) || []).length;
-    return parts.map((part, index) => {
-      if (!part) return null;
-      const isBold = count > 1 ? index % 2 === 1 : false;
-      return isBold ? (
-        <Text as="span" key={index} style={{ fontWeight: 900 }}>{part}</Text>
-      ) : (
-        <span key={index}>{part}</span>
-      );
-    });
-  }
-  return content;
-};
+  const renderContent = (content: React.ReactNode | string) => {
+    if (
+      typeof content === "string" &&
+      content.includes("|") &&
+      (content.match(/\|/g) || []).length % 2 === 0
+    ) {
+      const parts = content.split("|");
+      const count = (content.match(/\|/g) || []).length;
+      return parts.map((part, index) => {
+        if (!part) return null;
+        const isBold = count > 1 ? index % 2 === 1 : false;
+        return isBold ? (
+          <Text as="span" key={index} style={{ fontWeight: 900 }}>
+            {part}
+          </Text>
+        ) : (
+          <span key={index}>{part}</span>
+        );
+      });
+    }
+    return content;
+  };
 
   return (
     <List
+      {...fieldProps?.items}
       className={cx("mt-2 space-y-1", listContainerClassName)}
       variant={showIcons ? "unstyled" : "default"}
     >
@@ -105,7 +109,7 @@ export const Checklist: React.FC<ChecklistProps> = props => {
                 />
               </div>
             ) : null}
-              <Text as="div">{renderContent(content)}</Text>
+            <Text as="div">{renderContent(content)}</Text>
           </ListItem>
         );
       })}

package/src/components/checklist/types.ts

@@ -1,5 +1,9 @@
+import type { ReactNode } from "react";
+
+import type { FieldProps } from "@shared/types/field-props";
+
 export type ChecklistItem = {
-  title: React.ReactNode;
+  title: ReactNode;
   iconUrl?: string;
   iconAlt?: string;
   /** Extra DOM attribute props, spread onto this item's list row. */
@@ -7,7 +11,7 @@ export type ChecklistItem = {
 };
 
 export type ChecklistProps = {
-  items: (React.ReactNode | ChecklistItem)[];
+  items: (ReactNode | ChecklistItem)[];
   // TODO: add icon names as needed
   listIconName?: "check" | "disc";
   listItemClassName?: string;
@@ -16,6 +20,8 @@ export type ChecklistProps = {
   iconSize?: 20 | 24 | 32 | 40 | 48 | 52 | undefined;
   iconPosition?: "top" | "center";
   iconColor?: "green" | "yellow" | "blue";
+  /** Inspector attributes for the checklist items field. */
+  fieldProps?: FieldProps<"items">;
 };
 
 export const iconColors = {

package/src/contentful/blocks/address-input-banner/index.test.tsx

@@ -27,6 +27,20 @@ describe("AddressInputBanner", () => {
     );
   });
 
+  it("tags the custom check-plans CTA region", () => {
+    render(
+      <AddressInputBanner
+        {...defaultProps}
+        renderCheckPlans={() => <button>Check plans now</button>}
+        fieldProps={{ cta: { "data-contentful-field-id": "cta" } }}
+      />
+    );
+    expect(screen.getByText("Check plans now").parentElement).toHaveAttribute(
+      "data-contentful-field-id",
+      "cta"
+    );
+  });
+
   it("returns null when isVisible is false", () => {
     const { container } = render(
       <AddressInputBanner {...defaultProps} isVisible={false} />

package/src/contentful/blocks/address-input-banner/index.tsx

@@ -50,7 +50,9 @@ export const AddressInputBanner: FC<AddressInputBannerProps> = props => {
       >
         {title}
       </Text>
-      {renderedCheckPlans ? <div>{renderedCheckPlans}</div> : null}
+      {renderedCheckPlans ? (
+        <div {...fieldProps?.cta}>{renderedCheckPlans}</div>
+      ) : null}
     </div>
   );
 };

package/src/contentful/blocks/address-input-banner/types.ts

@@ -13,5 +13,5 @@ export interface AddressInputBannerProps {
   isVisible?: boolean;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
   /** Extra DOM attribute props, spread onto the respective rendered elements. */
-  fieldProps?: FieldProps<"title">;
+  fieldProps?: FieldProps<"title" | "cta">;
 }

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

@@ -65,6 +65,41 @@ describe("AnchoredBottomBanner", () => {
     );
   });
 
+  it("tags the default banner entry, icon, timer, and linked button label", () => {
+    render(
+      <AnchoredBottomBanner
+        enableCountdownTimer={true}
+        countdownEndDateTime="2026-05-19T13:00:00Z"
+        iconName="local_offer"
+        ctaButtonLabel="Shop now"
+        fieldProps={{
+          entry: { "data-contentful-entry-id": "banner-entry" },
+          iconName: { "data-contentful-field-id": "iconName" },
+          countdownEndDateTime: {
+            "data-contentful-field-id": "countdownEndDateTime",
+          },
+          buttonLabel: { "data-contentful-field-id": "buttonLabel" },
+        }}
+      />
+    );
+
+    expect(screen.getByText("Shop now")).toHaveAttribute(
+      "data-contentful-field-id",
+      "buttonLabel"
+    );
+    expect(screen.getByText("local_offer").parentElement).toHaveAttribute(
+      "data-contentful-field-id",
+      "iconName"
+    );
+    expect(screen.getByText(/01H : 00M : 00/)).toHaveAttribute(
+      "data-contentful-field-id",
+      "countdownEndDateTime"
+    );
+    expect(
+      document.querySelector('[data-contentful-entry-id="banner-entry"]')
+    ).toBeInTheDocument();
+  });
+
   it("uses active scheduled-message fieldProps for its CTA content", () => {
     render(
       <AnchoredBottomBanner
@@ -387,6 +422,62 @@ describe("AnchoredBottomBanner scheduledMessages", () => {
     expect(screen.getByText(/01H : 00M : 00/)).toBeInTheDocument();
   });
 
+  it("uses the active scheduled-message entry tags for banner content", () => {
+    render(
+      <AnchoredBottomBanner
+        enableCountdownTimer={true}
+        countdownEndDateTime="2026-05-19T14:00:00Z"
+        iconName="local_offer"
+        ctaButtonLabel="Default label"
+        fieldProps={{
+          entry: { "data-contentful-entry-id": "default-entry" },
+          iconName: { "data-contentful-field-id": "default-icon" },
+          countdownEndDateTime: {
+            "data-contentful-field-id": "default-countdown",
+          },
+          buttonLabel: { "data-contentful-field-id": "default-label" },
+        }}
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            enableCountdownTimer: true,
+            countdownEndDateTime: "2026-05-19T13:00:00Z",
+            iconName: "bolt",
+            ctaButtonLabel: "Flash sale",
+            fieldProps: {
+              entry: { "data-contentful-entry-id": "scheduled-entry" },
+              iconName: { "data-contentful-field-id": "scheduled-icon" },
+              countdownEndDateTime: {
+                "data-contentful-field-id": "scheduled-countdown",
+              },
+              buttonLabel: { "data-contentful-field-id": "scheduled-label" },
+            },
+          },
+        ]}
+      />
+    );
+
+    expect(screen.getByText("Flash sale")).toHaveAttribute(
+      "data-contentful-field-id",
+      "scheduled-label"
+    );
+    expect(screen.getByText("bolt").parentElement).toHaveAttribute(
+      "data-contentful-field-id",
+      "scheduled-icon"
+    );
+    expect(screen.getByText(/01H : 00M : 00/)).toHaveAttribute(
+      "data-contentful-field-id",
+      "scheduled-countdown"
+    );
+    expect(
+      document.querySelector('[data-contentful-entry-id="scheduled-entry"]')
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-contentful-entry-id="default-entry"]')
+    ).not.toBeInTheDocument();
+  });
+
   it("treats scheduleEnd as inclusive of the whole end day", () => {
     render(
       <AnchoredBottomBanner

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

@@ -343,6 +343,7 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
         className={`fixed bottom-0 left-0 right-0 z-[30] flex w-full items-center justify-center px-4 py-3 transition-all duration-300 ${bgClass} ${
           boxShadow ? boxShadow : "shadow-[0_-4px_10px_rgba(0,0,0,0.1)]"
         }`}
+        {...effectiveFieldProps?.entry}
       >
         <Link
           href={effectiveCtaButtonLink || "#"}
@@ -354,28 +355,34 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
               className={`${textColorClass} break-words text-body1 font-black leading-snug md:text-[18px]`}
             >
               {effectiveIconName && (
-                <MaterialIcon
-                  name={
-                    effectiveIconName as React.ComponentProps<
-                      typeof MaterialIcon
-                    >["name"]
-                  }
-                  size={24}
-                  fill={1}
-                  className={`${textColorClass} align-text-bottom`}
-                />
+                <span {...effectiveFieldProps?.iconName}>
+                  <MaterialIcon
+                    name={
+                      effectiveIconName as React.ComponentProps<
+                        typeof MaterialIcon
+                      >["name"]
+                    }
+                    size={24}
+                    fill={1}
+                    className={`${textColorClass} align-text-bottom`}
+                  />
+                </span>
               )}
               {countdown.shouldShow && (
                 <span
                   className="inline-block whitespace-nowrap rounded-lg bg-white px-1 tabular-nums text-text"
                   suppressHydrationWarning={true}
+                  {...effectiveFieldProps?.countdownEndDateTime}
                 >
                   {countdown.text}
                 </span>
               )}
               {countdown.shouldShow ? " " : null}
               {effectiveCtaButtonLabel && (
-                <span {...effectiveFieldProps?.ctaButtonLabel}>
+                <span
+                  {...(effectiveFieldProps?.buttonLabel ??
+                    effectiveFieldProps?.ctaButtonLabel)}
+                >
                   {effectiveCtaButtonLabel}
                 </span>
               )}{" "}

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

@@ -51,7 +51,14 @@ export interface ScheduledMessage {
   ctaSuffixText?: string;
   ctaButtonLink?: string;
   ctaButtonTarget?: string;
-  fieldProps?: FieldProps<"ctaButtonLabel" | "ctaSuffixText">;
+  fieldProps?: FieldProps<
+    | "entry"
+    | "iconName"
+    | "countdownEndDateTime"
+    | "buttonLabel"
+    | "ctaButtonLabel"
+    | "ctaSuffixText"
+  >;
 }
 
 export interface AnchoredBottomBannerProps {
@@ -80,6 +87,13 @@ export interface AnchoredBottomBannerProps {
     activeMessage?: ScheduledMessage;
     applicableWeekday: string;
   }) => void;
-  /** DOM attributes for the rendered CTA label and suffix fields. */
-  fieldProps?: FieldProps<"ctaButtonLabel" | "ctaSuffixText">;
+  /** DOM attributes for the banner entry and rendered content fields. */
+  fieldProps?: FieldProps<
+    | "entry"
+    | "iconName"
+    | "countdownEndDateTime"
+    | "buttonLabel"
+    | "ctaButtonLabel"
+    | "ctaSuffixText"
+  >;
 }

package/src/contentful/blocks/blogs-grid/index.test.tsx

@@ -70,7 +70,7 @@ jest.mock("@shared/components/text", () => ({
 }));
 
 jest.mock("@shared/contentful/blocks/cards/blog-card", () => ({
-  BlogCard: ({ href, title, category, image, index }: any) => (
+  BlogCard: ({ href, title, category, image, index, fieldProps }: any) => (
     <a
       href={href}
       data-testid={`blog-card-${index}`}
@@ -78,6 +78,7 @@ jest.mock("@shared/contentful/blocks/cards/blog-card", () => ({
       data-image-alt={image?.alt || ""}
       data-image-width={image?.width || ""}
       data-image-height={image?.height || ""}
+      data-field-props={JSON.stringify(fieldProps)}
     >
       {title} - {category}
     </a>
@@ -136,6 +137,25 @@ const defaultProps: BlogGridProps = {
 };
 
 describe("BlogGrid", () => {
+  it("forwards each article's inspector slots without tagging another article", () => {
+    const fields = { title: { "data-contentful-entry-id": "article-one" } };
+    render(
+      <BlogGrid
+        {...defaultProps}
+        paginatedArticles={[
+          { ...mockArticles[0], fieldProps: fields },
+          mockArticles[1],
+        ]}
+      />
+    );
+    expect(screen.getByTestId("blog-card-0")).toHaveAttribute(
+      "data-field-props",
+      JSON.stringify(fields)
+    );
+    expect(screen.getByTestId("blog-card-1")).not.toHaveAttribute(
+      "data-field-props"
+    );
+  });
   beforeEach(() => {
     jest.clearAllMocks();
     mockSearchParams = new URLSearchParams("");

package/src/contentful/blocks/blogs-grid/index.tsx

@@ -128,6 +128,7 @@ export function BlogGrid({
                 description={article.shortDescription}
                 date={article.blogCreationDate}
                 category={article.category}
+                fieldProps={article.fieldProps}
                 image={coverImage}
                 index={index}
               />

package/src/contentful/blocks/blogs-grid/types.ts

@@ -1,5 +1,8 @@
+import type { BlogCardProps as CardProps } from "@shared/contentful/blocks/cards/blog-card/types";
+
 export interface BlogCardProps {
   slug: string;
+  fieldProps?: CardProps["fieldProps"];
   title?: string;
   shortDescription?: string;
   blogCreationDate?: string;

package/src/contentful/blocks/blogs-grid-base/index.test.tsx

@@ -41,18 +41,29 @@ jest.mock("@shared/components/select", () => ({
 }));
 
 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>
   ),
 }));
 
 jest.mock("@shared/contentful/blocks/cards/blog-card", () => ({
-  BlogCard: ({ href, title, category, image, imageComponent, index }: any) => (
+  BlogCard: ({
+    href,
+    title,
+    category,
+    image,
+    imageComponent,
+    index,
+    fieldProps,
+  }: any) => (
     <a
       href={href}
       data-testid={`blog-card-${index}`}
       data-has-image={!!image}
       data-has-image-component={!!imageComponent}
+      data-field-props={JSON.stringify(fieldProps)}
     >
       {title} - {category}
     </a>
@@ -108,6 +119,41 @@ const defaultProps: BlogGridBaseProps = {
 };
 
 describe("BlogGridBase", () => {
+  it("tags authored headings and forwards child article slots without tagging siblings", () => {
+    const articleFields = {
+      title: { "data-contentful-entry-id": "article-one" },
+    };
+    render(
+      <BlogGridBase
+        {...defaultProps}
+        title="Latest Stories"
+        description="Updates"
+        fieldProps={{
+          title: { "data-contentful-field-id": "recentArticlesTitle" },
+          description: { "data-contentful-field-id": "description" },
+        }}
+        paginatedArticles={[
+          { ...mockArticles[0], fieldProps: articleFields },
+          mockArticles[1],
+        ]}
+      />
+    );
+    expect(screen.getByText("Latest Stories")).toHaveAttribute(
+      "data-contentful-field-id",
+      "recentArticlesTitle"
+    );
+    expect(screen.getByText("Updates")).toHaveAttribute(
+      "data-contentful-field-id",
+      "description"
+    );
+    expect(screen.getByTestId("blog-card-0")).toHaveAttribute(
+      "data-field-props",
+      JSON.stringify(articleFields)
+    );
+    expect(screen.getByTestId("blog-card-1")).not.toHaveAttribute(
+      "data-field-props"
+    );
+  });
   beforeEach(() => jest.clearAllMocks());
 
   describe("Rendering", () => {

package/src/contentful/blocks/blogs-grid-base/index.tsx

@@ -19,6 +19,7 @@ export function BlogGridBase({
   getPageHref,
   asList = false,
   imageComponent,
+  fieldProps,
 }: BlogGridBaseProps) {
   function handleCategoryChange(value: unknown) {
     if (!value || Array.isArray(value)) return;
@@ -39,11 +40,18 @@ export function BlogGridBase({
       {/* Controls bar */}
       <div className="mx-auto flex max-w-[1200px] flex-wrap items-center justify-between gap-3 px-6 pb-6">
         {description && (
-          <Text as="p" className="body1 mb-4 w-full text-center md:mb-6">
+          <Text
+            as="p"
+            className="body1 mb-4 w-full text-center md:mb-6"
+            {...fieldProps?.description}
+          >
             {description}
           </Text>
         )}
-        <Text className="w-full text-center text-heading5 font-black lowercase text-text-secondary md:w-auto md:text-left">
+        <Text
+          className="w-full text-center text-heading5 font-black lowercase text-text-secondary md:w-auto md:text-left"
+          {...fieldProps?.title}
+        >
           {title}
         </Text>
         {categoryOptions.length > 0 && (
@@ -105,6 +113,7 @@ export function BlogGridBase({
                 description={article.shortDescription}
                 date={article.blogCreationDate}
                 category={article.category}
+                fieldProps={article.fieldProps}
                 image={coverImage}
                 imageComponent={imageComponent}
                 asGrid={!asList}

package/src/contentful/blocks/blogs-grid-base/types.ts

@@ -1,9 +1,14 @@
 import React from "react";
 
-import { BlogCardImageProps } from "@shared/contentful/blocks/cards/blog-card/types";
+import {
+  BlogCardImageProps,
+  BlogCardProps as CardProps,
+} from "@shared/contentful/blocks/cards/blog-card/types";
+import type { FieldProps } from "@shared/types/field-props";
 
 export interface BlogCardProps {
   slug: string;
+  fieldProps?: CardProps["fieldProps"];
   title?: string;
   shortDescription?: string;
   blogCreationDate?: string;
@@ -17,6 +22,7 @@ export interface BlogCardProps {
 }
 
 export interface BlogGridBaseProps {
+  fieldProps?: FieldProps<"title" | "description">;
   title?: string;
   description?: string;
   paginatedArticles: BlogCardProps[];

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

@@ -32,6 +32,35 @@ describe("BlogCard", () => {
   };
 
   describe("Rendering", () => {
+    it("tags each authored child field independently", () => {
+      const tag = (field: string) => ({ "data-contentful-field-id": field });
+      const { container } = render(
+        <BlogCard
+          {...defaultProps}
+          image={{ src: "/cover.jpg", alt: "Cover", width: 400, height: 300 }}
+          fieldProps={{
+            title: tag("title"),
+            description: tag("shortDescription"),
+            date: tag("blogCreationDate"),
+            category: tag("category"),
+            image: tag("cover"),
+            href: tag("slug"),
+          }}
+        />
+      );
+      for (const field of [
+        "title",
+        "shortDescription",
+        "blogCreationDate",
+        "category",
+        "cover",
+        "slug",
+      ]) {
+        expect(
+          container.querySelector(`[data-contentful-field-id="${field}"]`)
+        ).not.toBeNull();
+      }
+    });
     it("renders the article element", () => {
       const { container } = render(<BlogCard {...defaultProps} />);
       expect(container.querySelector("article")).toBeInTheDocument();

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

@@ -43,7 +43,10 @@ export const BlogCard: React.FC<BlogCardProps> = ({
     >
       {/* Image (hidden in list view) */}
       {asGrid && (
-        <div className="block h-[232px] w-full flex-shrink-0 overflow-hidden bg-gray-100">
+        <div
+          className="block h-[232px] w-full flex-shrink-0 overflow-hidden bg-gray-100"
+          {...fieldProps?.image}
+        >
           {image ? (
             ImageComponent ? (
               <ImageComponent
@@ -82,7 +85,11 @@ export const BlogCard: React.FC<BlogCardProps> = ({
       >
         {/* Meta: category + date */}
         <div className="flex items-center gap-2 text-[13px]">
-          {asGrid && <span className="body2 text-text-brand">{category}</span>}
+          {asGrid && (
+            <span className="body2 text-text-brand" {...fieldProps?.category}>
+              {category}
+            </span>
+          )}
           {date && (
             <>
               {asGrid && (
@@ -90,7 +97,9 @@ export const BlogCard: React.FC<BlogCardProps> = ({
                   •
                 </span>
               )}
-              <time className="body2 text-text">{date}</time>
+              <time className="body2 text-text" {...fieldProps?.date}>
+                {date}
+              </time>
             </>
           )}
         </div>
@@ -100,6 +109,7 @@ export const BlogCard: React.FC<BlogCardProps> = ({
           <Text as="h2" className="heading6" {...fieldProps?.title}>
             <Link
               href={href}
+              {...fieldProps?.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}
@@ -120,7 +130,11 @@ export const BlogCard: React.FC<BlogCardProps> = ({
 
       {/* Fallback stretched link keeps the card navigable when no title link is rendered */}
       {!title && (
-        <Link href={href} className="absolute inset-0 z-10">
+        <Link
+          href={href}
+          className="absolute inset-0 z-10"
+          {...fieldProps?.href}
+        >
           <span className="sr-only">{category ?? "Read more"}</span>
         </Link>
       )}