@windstream/react-shared-components 0.2.86 → 0.2.88

package/src/contentful/blocks/cards/full-image-card/types.ts

@@ -1,5 +1,7 @@
 import type { ButtonProps } from "../../button/types";
 
+import type { FieldProps } from "@shared/types/field-props";
+
 export type FullImageAsset = {
   href: string;
   title?: string;
@@ -24,6 +26,8 @@ export type FullImageCardItem = {
   imageClassName?: string;
   /** Applies `shadow-card` to the outer card element. */
   shadow?: boolean;
+  /** Per-field DOM attributes supplied by the consumer or parent Callout item. */
+  fieldProps?: FieldProps<"title" | "description" | "caption" | "cta">;
 };
 
 export type FullImageCardProps = {

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

@@ -179,6 +179,29 @@ describe("ProductCard", () => {
     });
   });
 
+  describe("Missing price", () => {
+    it.each([
+      ["empty", ""],
+      ["undefined", undefined],
+    ])("hides the price block when price is %s", (_label, price) => {
+      const { container } = render(
+        <ProductCard
+          {...defaultProps}
+          price={price}
+          priceSuffixBottom="for 12 months"
+        />
+      );
+      expect(screen.queryByText("$")).not.toBeInTheDocument();
+      expect(screen.queryByText(/\/mo/)).not.toBeInTheDocument();
+      expect(screen.queryByText("for 12 months")).not.toBeInTheDocument();
+      expect(container.textContent).not.toContain("0.00");
+      expect(screen.getByRole("heading", { level: 3 })).toHaveTextContent(
+        "Kinetic 500"
+      );
+      expect(screen.getByTestId("select-plan-btn")).toBeInTheDocument();
+    });
+  });
+
   describe("Best Value", () => {
     it("renders best value banner when bestValue is true", () => {
       render(<ProductCard {...defaultProps} bestValue={true} />);
@@ -300,11 +323,13 @@ describe("ProductCard", () => {
     });
 
     it("renders the real gift slot (not the empty placeholder) when the card has its own gift", () => {
-      const giftBadge = [
-        { title: "Free router", icon: "/router.png" },
-      ] as any;
+      const giftBadge = [{ title: "Free router", icon: "/router.png" }] as any;
       const { container } = render(
-        <ProductCard {...defaultProps} giftBadge={giftBadge} hasAnyGift={true} />
+        <ProductCard
+          {...defaultProps}
+          giftBadge={giftBadge}
+          hasAnyGift={true}
+        />
       );
       expect(
         container.querySelector("[data-pc-gift-empty]")

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

@@ -137,51 +137,53 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               ) : null}
             </Text>
           </div>
-          <div className="flex flex-col items-start md:items-end">
-            <div className="flex items-start" {...fieldProps?.price}>
-              <Text
-                as="span"
-                className={cx(
-                  priceUnitClass,
-                  "mr-1 mt-[2px]",
-                  isDark ? "text-text-inverse" : "text-text"
-                )}
-              >
-                $
-              </Text>
-              <Text
-                as="span"
-                className={cx(
-                  priceIntegerClass,
-                  "leading-none",
-                  isDark ? "text-text-inverse" : "text-text"
-                )}
-              >
-                {price.split(".")[0]}
-              </Text>
-              <Text
-                as="span"
-                className={cx(
-                  priceUnitClass,
-                  isDark ? "text-text-inverse" : "text-text"
-                )}
-              >
-                {`${price.split(".")[1]}${priceUnit}`}
-              </Text>
+          {price ? (
+            <div className="flex flex-col items-start md:items-end">
+              <div className="flex items-start" {...fieldProps?.price}>
+                <Text
+                  as="span"
+                  className={cx(
+                    priceUnitClass,
+                    "mr-1 mt-[2px]",
+                    isDark ? "text-text-inverse" : "text-text"
+                  )}
+                >
+                  $
+                </Text>
+                <Text
+                  as="span"
+                  className={cx(
+                    priceIntegerClass,
+                    "leading-none",
+                    isDark ? "text-text-inverse" : "text-text"
+                  )}
+                >
+                  {price.split(".")[0]}
+                </Text>
+                <Text
+                  as="span"
+                  className={cx(
+                    priceUnitClass,
+                    isDark ? "text-text-inverse" : "text-text"
+                  )}
+                >
+                  {`${price.split(".")[1]}${priceUnit}`}
+                </Text>
+              </div>
+              {priceSuffixBottom ? (
+                <Text
+                  as="span"
+                  {...fieldProps?.priceSuffixBottom}
+                  className={cx(
+                    "micro text-nowrap",
+                    isDark ? "text-text-inverse" : "text-text"
+                  )}
+                >
+                  {priceSuffixBottom}
+                </Text>
+              ) : null}
             </div>
-            {priceSuffixBottom ? (
-              <Text
-                as="span"
-                {...fieldProps?.priceSuffixBottom}
-                className={cx(
-                  "micro text-nowrap",
-                  isDark ? "text-text-inverse" : "text-text"
-                )}
-              >
-                {priceSuffixBottom}
-              </Text>
-            ) : null}
-          </div>
+          ) : null}
         </header>
 
         {/* Description */}

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

@@ -10,7 +10,7 @@ export interface ProductCardProps {
   speed: string;
   techType?: string;
   ismaxSpeed?: boolean;
-  price: string;
+  price?: string;
   /** The price unit rendered after the cents, e.g. "/mo" or "/mo*". Defaults
    *  to "/mo". Lets Contentful control a trailing disclaimer star. */
   priceUnit?: string;

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

@@ -97,7 +97,13 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
       >
         <NextImage
           src={card.image}
-          alt={card.imageAltText ?? card.imageDescription ?? card.imageAlt ?? card.title ?? "card-image"}
+          alt={
+            card.imageAltText ??
+            card.imageDescription ??
+            card.imageAlt ??
+            card.title ??
+            "card-image"
+          }
           width={card.imageWidth || 400}
           height={card.imageHeight || 280}
           className={cx("w-full", !margin && "rounded-t-3xl")}
@@ -124,7 +130,13 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
       >
         <NextImage
           src={card.image}
-          alt={card.imageAltText ?? card.imageDescription ?? card.imageAlt ?? card.title ?? "card-icon"}
+          alt={
+            card.imageAltText ??
+            card.imageDescription ??
+            card.imageAlt ??
+            card.title ??
+            "card-icon"
+          }
           width={imgWidth}
           height={imgHeight}
           className={cx(
@@ -144,6 +156,7 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
       as="h3"
       className="heading6 mb-2 text-text md:heading6"
       style={textColorStyle}
+      {...card.fieldProps?.title}
     >
       {card.title}
     </Text>
@@ -300,6 +313,7 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
                   as="div"
                   className="body1 text-text"
                   style={textColorStyle}
+                  {...card.fieldProps?.body}
                 >
                   {card.body}
                 </Text>
@@ -309,6 +323,7 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
                   as="div"
                   className="body1 text-text"
                   style={textColorStyle}
+                  {...card.fieldProps?.richText}
                 >
                   {card.richText}
                 </Text>
@@ -318,7 +333,10 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
         </div>
 
         {card.cta ? (
-          <div className={cx(!isCtaOnly && "mt-2", ctaAlignmentClass)}>
+          <div
+            className={cx(!isCtaOnly && "mt-2", ctaAlignmentClass)}
+            {...card.fieldProps?.cta}
+          >
             <Button
               linkVariant="unstyled"
               linkClassName={cx(

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

@@ -1,6 +1,8 @@
 import type { CSSProperties, ReactNode } from "react";
 import type { ButtonProps } from "../../button/types";
 
+import type { FieldProps } from "@shared/types/field-props";
+
 export type PinwheelColor =
   | "Blue-#307998"
   | "Green-#209A61"
@@ -54,6 +56,8 @@ export type Item = {
   /** Each entry uses a `label|value` separator. */
   workingHours?: string[];
   shadow?: boolean;
+  /** Per-field DOM attributes supplied by the consumer or parent Callout item. */
+  fieldProps?: FieldProps<"title" | "body" | "richText" | "cta">;
 };
 
 export type SimpleCardProps = {

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

@@ -34,11 +34,13 @@ jest.mock("@shared/contentful/blocks/cards/product-card", () => ({
     enableBusinessSettings,
     giftBadge,
     hasAnyGift,
+    price,
   }: any) => (
     <article
       data-testid="product-card"
       data-plan={planName}
       data-speed={speed}
+      data-price={price}
       data-expanded={isExpanded}
       data-business={enableBusinessSettings ? "true" : "false"}
     >
@@ -373,6 +375,28 @@ describe("ProductCardCarousel", () => {
     expect(card).toHaveAttribute("data-plan", "500 Mbps");
   });
 
+  it("passes the formatted price when a price is authored", () => {
+    const fields = createProductFields([sampleProduct]);
+    render(<ProductCardCarousel fields={fields} />);
+    expect(screen.getByTestId("product-card")).toHaveAttribute(
+      "data-price",
+      "49.99"
+    );
+  });
+
+  it.each([
+    ["undefined", undefined],
+    ["empty", ""],
+  ])("passes an empty price (not 0.00) when price is %s", (_label, price) => {
+    const item = { ...sampleProduct, price };
+    const fields = createProductFields([item]);
+    render(<ProductCardCarousel fields={fields} />);
+    expect(screen.getByTestId("product-card")).toHaveAttribute(
+      "data-price",
+      ""
+    );
+  });
+
   it("renders Next arrow and hides Previous on first slide in carousel mode", async () => {
     const items = Array.from({ length: 4 }, (_, i) => ({
       ...sampleProduct,

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

@@ -380,7 +380,7 @@ function ProductCardPanel({
     const planName = planContent?.[0] || "";
     const planSubtext = planContent?.[1] || "";
     const priceCents = item?.priceSuffix?.split("/")?.[0] || "00";
-    const formattedPrice = `${item?.price || "0"}.${priceCents}`;
+    const formattedPrice = item?.price ? `${item.price}.${priceCents}` : "";
     // Preserve the full unit after the cents (e.g. "/mo*") so a Contentful
     // disclaimer star renders; fall back to "/mo" when no unit is present.
     const suffixParts = item?.priceSuffix?.split("/") || [];

package/src/contentful/blocks/comparison-table/index.test.tsx

@@ -41,6 +41,81 @@ describe("ComparisonTable", () => {
     expect(container.querySelector(".component-container")).toBeInTheDocument();
   });
 
+  describe("fieldProps", () => {
+    it("tags the block fields and preserves consumer-supplied row tags", () => {
+      const tag = (entry: string, field: string) => ({
+        "data-contentful-entry-id": entry,
+        "data-contentful-field-id": field,
+        "data-contentful-locale": "en-US",
+      });
+      const { container } = render(
+        <ComparisonTable
+          {...defaultProps}
+          fieldProps={{
+            title: tag("comparison", "title"),
+            table: tag("comparison", "table"),
+            disclaimer: tag("comparison", "disclaimer"),
+          }}
+          table={
+            <table>
+              <tbody>
+                <tr {...tag("row-1", "feature")}>
+                  <td>Speed</td>
+                </tr>
+                <tr {...tag("row-2", "feature")}>
+                  <td>Price</td>
+                </tr>
+              </tbody>
+            </table>
+          }
+        />
+      );
+      expect(screen.getByText("Compare Plans")).toHaveAttribute(
+        "data-contentful-field-id",
+        "title"
+      );
+      expect(
+        container.querySelector(".comparison-table-container")
+      ).toHaveAttribute("data-contentful-field-id", "table");
+      expect(
+        screen.getByText("* Terms and conditions apply").parentElement
+      ).toHaveAttribute("data-contentful-field-id", "disclaimer");
+      expect(screen.getByText("Speed").closest("tr")).toHaveAttribute(
+        "data-contentful-entry-id",
+        "row-1"
+      );
+      expect(screen.getByText("Price").closest("tr")).toHaveAttribute(
+        "data-contentful-entry-id",
+        "row-2"
+      );
+      container
+        .querySelectorAll("[data-contentful-field-id]")
+        .forEach(element => {
+          expect(element).toHaveAttribute("data-contentful-locale", "en-US");
+        });
+    });
+
+    it("supports partial fieldProps", () => {
+      const { container } = render(
+        <ComparisonTable
+          {...defaultProps}
+          fieldProps={{ table: { "data-contentful-field-id": "table" } }}
+        />
+      );
+      expect(
+        container.querySelectorAll("[data-contentful-field-id]")
+      ).toHaveLength(1);
+      expect(screen.getByText("Compare Plans")).not.toHaveAttribute(
+        "data-contentful-field-id"
+      );
+    });
+
+    it("does not add tagging attributes when fieldProps is omitted", () => {
+      const { container } = render(<ComparisonTable {...defaultProps} />);
+      expect(container.querySelector("[data-contentful-field-id]")).toBeNull();
+    });
+  });
+
   it("renders the title as h2", () => {
     render(<ComparisonTable {...defaultProps} />);
     const title = screen.getByText("Compare Plans");

package/src/contentful/blocks/comparison-table/index.tsx

@@ -8,19 +8,31 @@ export const ComparisonTable: React.FC<ComparisonTableProps> = ({
   disclaimer,
   table,
   maxWidth = true,
+  fieldProps,
 }) => {
   return (
     <div className="component-container">
       <div
         className={`mx-5 mb-5 mt-8 md:mt-18 ${maxWidth ? "max-w-120 xl:mx-auto" : ""}`}
       >
-        <Text as="h2" className="heading2 md:heading1 md:text-center">
+        <Text
+          as="h2"
+          className="heading2 md:heading1 md:text-center"
+          {...fieldProps?.title}
+        >
           {title}
         </Text>
-        <div className="comparison-table-container mt-5 p-5 pt-0 md:mt-10 md:px-10 md:py-9">
+        <div
+          className="comparison-table-container mt-5 p-5 pt-0 md:mt-10 md:px-10 md:py-9"
+          {...fieldProps?.table}
+        >
           {table}
         </div>
-        <Text as="div" className="micro mt-8 text-center">
+        <Text
+          as="div"
+          className="micro mt-8 text-center"
+          {...fieldProps?.disclaimer}
+        >
           {disclaimer}
         </Text>
       </div>

package/src/contentful/blocks/comparison-table/types.ts

@@ -1,6 +1,12 @@
+import type { ReactNode } from "react";
+
+import type { FieldProps } from "@shared/types/field-props";
+
 export type ComparisonTableProps = {
   title?: string;
-  disclaimer?: React.ReactNode;
-  table: React.ReactNode;
+  disclaimer?: ReactNode;
+  table: ReactNode;
   maxWidth?: boolean;
+  /** DOM attributes for the block fields. Tag individual rows in the consumer-supplied `table` node. */
+  fieldProps?: FieldProps<"title" | "table" | "disclaimer">;
 };

package/src/contentful/blocks/cta-callout/index.test.tsx

@@ -19,8 +19,12 @@ jest.mock("@shared/contentful/blocks/button", () => ({
       data-testid="cta-button"
       data-size={JSON.stringify(props.size)}
       data-href={props.href}
+      {...props.fieldProps}
     >
-      {props.buttonLabel || props.children}
+      {props.preDefinedFunctionExecution === "check availability" &&
+      props.renderCheckPlans
+        ? props.renderCheckPlans()
+        : props.buttonLabel || props.children}
     </button>
   ),
 }));
@@ -37,6 +41,94 @@ describe("CtaCallout", () => {
     descriptionAlignment: "center",
   };
 
+  describe("fieldProps", () => {
+    it("tags all block fields without changing nested button tags", () => {
+      const tag = (field: string) => ({
+        "data-contentful-field-id": field,
+        "data-contentful-entry-id": "cta-callout",
+        "data-contentful-locale": "en-US",
+      });
+      const { container } = render(
+        <CtaCallout
+          {...defaultProps}
+          button={{
+            ...defaultProps.button,
+            fieldProps: { "data-contentful-field-id": "buttonLabel" },
+          }}
+          fieldProps={{
+            title: tag("title"),
+            subTitle: tag("subTitle"),
+            description: tag("description"),
+            button: tag("button"),
+          }}
+        />
+      );
+      expect(screen.getByText(defaultProps.title!)).toHaveAttribute(
+        "data-contentful-field-id",
+        "title"
+      );
+      expect(screen.getByText(defaultProps.subTitle!)).toHaveAttribute(
+        "data-contentful-field-id",
+        "subTitle"
+      );
+      expect(
+        screen.getByText("Choose the plan that works for you.").parentElement
+      ).toHaveAttribute("data-contentful-field-id", "description");
+      expect(screen.getByTestId("cta-button").parentElement).toHaveAttribute(
+        "data-contentful-field-id",
+        "button"
+      );
+      expect(screen.getByTestId("cta-button")).toHaveAttribute(
+        "data-contentful-field-id",
+        "buttonLabel"
+      );
+      container
+        .querySelectorAll("[data-contentful-entry-id]")
+        .forEach(element => {
+          expect(element).toHaveAttribute(
+            "data-contentful-entry-id",
+            "cta-callout"
+          );
+          expect(element).toHaveAttribute("data-contentful-locale", "en-US");
+        });
+    });
+
+    it("tags the CTA region for custom renderers", () => {
+      render(
+        <CtaCallout
+          button={{ preDefinedFunctionExecution: "check availability" }}
+          renderCheckPlans={() => <span>Custom check plans</span>}
+          fieldProps={{ button: { "data-contentful-field-id": "button" } }}
+        />
+      );
+      expect(screen.getByTestId("cta-button").parentElement).toHaveAttribute(
+        "data-contentful-field-id",
+        "button"
+      );
+      expect(screen.getByText("Custom check plans")).toBeInTheDocument();
+    });
+
+    it("does not add tagging attributes when fieldProps is omitted", () => {
+      const { container } = render(<CtaCallout {...defaultProps} />);
+      expect(container.querySelector("[data-contentful-field-id]")).toBeNull();
+    });
+
+    it("supports partial fieldProps and does not create absent fields", () => {
+      const { container } = render(
+        <CtaCallout
+          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("renders the component", () => {
     const { container } = render(<CtaCallout {...defaultProps} />);
     expect(container.firstChild).toBeInTheDocument();

package/src/contentful/blocks/cta-callout/index.tsx

@@ -17,6 +17,7 @@ export const CtaCallout: React.FC<CtaCalloutProps> = ({
   maxWidth = true,
   onModalButtonClick,
   renderCheckPlans,
+  fieldProps,
 }) => {
   const bgColorClasses: Record<ThemeKey, string> = {
     navy: "bg-[#00002D]",
@@ -28,7 +29,7 @@ export const CtaCallout: React.FC<CtaCalloutProps> = ({
   };
   return (
     <div
-      className={`${bgColorClasses[background]} component-container px-5 py-16 lg:px-13 lg:py-24 w-full`}
+      className={`${bgColorClasses[background]} component-container w-full px-5 py-16 lg:px-13 lg:py-24`}
     >
       <div
         className={`${maxWidth ? "mx-auto max-w-120" : ""} color-${color} flex flex-col ${color == "dark" ? "text-text" : "text-text-inverse"}`}
@@ -37,6 +38,7 @@ export const CtaCallout: React.FC<CtaCalloutProps> = ({
           <Text
             as={enableHeading ? "h1" : "h2"}
             className={`heading2 lg:heading1 text-${contentAlignment}`}
+            {...fieldProps?.title}
           >
             {title}
           </Text>
@@ -45,6 +47,7 @@ export const CtaCallout: React.FC<CtaCalloutProps> = ({
           <Text
             as="h3"
             className={`subheading3 pt-2 lg:subheading1 lg:pt-3 text-${contentAlignment}`}
+            {...fieldProps?.subTitle}
           >
             {subTitle}
           </Text>
@@ -52,12 +55,16 @@ export const CtaCallout: React.FC<CtaCalloutProps> = ({
         {description && (
           <div
             className={`pt-2 text-body1 lg:pt-3 text-${descriptionAlignment} break-words [&_table]:w-full`}
+            {...fieldProps?.description}
           >
             {description}
           </div>
         )}
         {button || renderCheckPlans ? (
-          <div className="flex justify-center pt-5 lg:pt-14">
+          <div
+            className="flex justify-center pt-5 lg:pt-14"
+            {...fieldProps?.button}
+          >
             <Button
               {...button}
               renderCheckPlans={renderCheckPlans}

package/src/contentful/blocks/cta-callout/types.ts

@@ -1,5 +1,6 @@
 import React from "react";
 
+import type { FieldProps } from "@shared/types/field-props";
 import { CheckPlansProps } from "@shared/types/micro-components";
 
 export type CtaCalloutProps = {
@@ -15,6 +16,8 @@ export type CtaCalloutProps = {
   maxWidth?: boolean;
   onModalButtonClick?: (id?: string) => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+  /** Consumer-supplied DOM attributes; `button` tags the CTA region, including custom renderers. */
+  fieldProps?: FieldProps<"title" | "subTitle" | "description" | "button">;
 };
 
 export type ThemeKey =