@windstream/react-shared-components 0.2.91 → 0.2.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.91",
+  "version": "0.2.93",
   "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/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/callout/{callout.stories.tsx → Callout.stories.tsx}

@@ -8,7 +8,7 @@ import {
   fourColumnItems,
   fullImageItems,
   withFloatingImageArgs,
-} from "./callout.stories.mocks";
+} from "./Callout.stories.mocks";
 
 import { DocsPage } from "@shared/stories/DocsTemplate";
 import type { Meta, StoryObj } from "@storybook/react";

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

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

@@ -35,5 +35,7 @@ export interface BlogCardProps {
   asGrid?: boolean;
   index?: number;
   /** Per-field DOM attributes supplied by the consumer or parent Callout item. */
-  fieldProps?: FieldProps<"title" | "description">;
+  fieldProps?: FieldProps<
+    "title" | "description" | "image" | "category" | "date" | "href"
+  >;
 }

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

@@ -126,6 +126,49 @@ describe("ProductCard", () => {
     });
   });
 
+  describe("Strikethrough price", () => {
+    it("does not render a strikethrough when not provided", () => {
+      const { container } = render(<ProductCard {...defaultProps} />);
+      expect(container.querySelector("s")).toBeNull();
+      expect(screen.queryByText(/Regular price/)).toBeNull();
+    });
+
+    it("does not render a strikethrough for an empty/whitespace value", () => {
+      const { container } = render(
+        <ProductCard {...defaultProps} strikethroughPrice="   " />
+      );
+      expect(container.querySelector("s")).toBeNull();
+    });
+
+    it("renders the strikethrough price with a leading $ when truthy", () => {
+      const { container } = render(
+        <ProductCard {...defaultProps} strikethroughPrice="64.99" />
+      );
+      const strike = container.querySelector("s");
+      expect(strike).toHaveTextContent("$64.99");
+      expect(screen.getByText(/Regular price/)).toHaveClass("sr-only");
+    });
+
+    it("does not double the $ when the value already has one", () => {
+      const { container } = render(
+        <ProductCard {...defaultProps} strikethroughPrice="$64.99" />
+      );
+      expect(container.querySelector("s")?.textContent).toBe("$64.99");
+    });
+
+    it("keeps the price unit rendered alongside the strikethrough", () => {
+      render(<ProductCard {...defaultProps} strikethroughPrice="64.99" />);
+      expect(screen.getByText("99/mo")).toBeInTheDocument();
+    });
+
+    it("does not render a strikethrough when there is no price", () => {
+      const { container } = render(
+        <ProductCard {...defaultProps} price="" strikethroughPrice="64.99" />
+      );
+      expect(container.querySelector("s")).toBeNull();
+    });
+  });
+
   describe("Business theme", () => {
     it("uses the semantic brand token for the plan name and lowercases it by default", () => {
       render(<ProductCard {...defaultProps} />);
@@ -299,6 +342,24 @@ describe("ProductCard", () => {
       expect(screen.getByAltText("Free router")).toBeInTheDocument();
     });
 
+    it("spreads each gift's fieldProps onto its own row", () => {
+      const giftBadge = [
+        {
+          title: "Free router",
+          icon: "/router.png",
+          fieldProps: { "data-contentful-entry-id": "gift-1" },
+        },
+        { title: "Free install", icon: "/install.png" },
+      ] as any;
+      render(<ProductCard {...defaultProps} giftBadge={giftBadge} />);
+      expect(
+        screen.getByText("Free router").parentElement
+      ).toHaveAttribute("data-contentful-entry-id", "gift-1");
+      expect(
+        screen.getByText("Free install").parentElement
+      ).not.toHaveAttribute("data-contentful-entry-id");
+    });
+
     it("does not render gift badges when not provided", () => {
       render(<ProductCard {...defaultProps} />);
       expect(screen.queryByText("Free router")).not.toBeInTheDocument();

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

@@ -30,11 +30,22 @@ const renderPipeBold = (value: React.ReactNode): React.ReactNode => {
   );
 };
 
+/**
+ * Normalizes a strikethrough (regular) price to a single leading `$`, e.g.
+ * `"44.99"` and `"$44.99"` both render as `"$44.99"`. Returns `""` when empty.
+ */
+const formatStrikethroughPrice = (value?: string | null): string => {
+  if (typeof value !== "string") return "";
+  const amount = value.trim().replace(/^\$\s*/, "");
+  return amount ? `$${amount}` : "";
+};
+
 export const ProductCard: React.FC<ProductCardProps> = ({
   planName,
   planSubtext,
   speed,
   price,
+  strikethroughPrice,
   priceUnit = "/mo",
   description,
   bestValue = false,
@@ -73,6 +84,9 @@ export const ProductCard: React.FC<ProductCardProps> = ({
 
   const isDark = theme === "dark";
 
+  const formattedStrikethroughPrice =
+    formatStrikethroughPrice(strikethroughPrice);
+
   // Two-column mobile cards use smaller type below `md` and step up to the
   // standard sizes from `md` up (matches production residential). One-column
   // stacks keep the standard sizes at every breakpoint.
@@ -160,15 +174,29 @@ export const ProductCard: React.FC<ProductCardProps> = ({
                 >
                   {price.split(".")[0]}
                 </Text>
-                <Text
-                  as="span"
-                  className={cx(
-                    priceUnitClass,
-                    isDark ? "text-text-inverse" : "text-text"
-                  )}
-                >
-                  {`${price.split(".")[1]}${priceUnit}`}
-                </Text>
+                <div className="flex flex-col gap-1">
+                  <Text
+                    as="span"
+                    className={cx(
+                      priceUnitClass,
+                      isDark ? "text-text-inverse" : "text-text"
+                    )}
+                  >
+                    {`${price.split(".")[1]}${priceUnit}`}
+                  </Text>
+                  {formattedStrikethroughPrice ? (
+                    <Text
+                      as="span"
+                      className={cx(
+                        "micro whitespace-nowrap",
+                        isDark ? "text-text-inverse" : "text-text-info"
+                      )}
+                    >
+                      <span className="sr-only">Regular price </span>
+                      <s>{formattedStrikethroughPrice}</s>
+                    </Text>
+                  ) : null}
+                </div>
               </div>
               {priceSuffixBottom ? (
                 <Text
@@ -214,6 +242,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
                   <div
                     key={badge.title}
                     className="flex w-full items-center gap-2"
+                    {...badge.fieldProps}
                   >
                     <Image
                       src={badge.icon}