@windstream/react-shared-components 0.2.86 → 0.2.87

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/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 =

package/src/contentful/blocks/modal/index.test.tsx

@@ -51,8 +51,10 @@ jest.mock("@shared/components/material-icon", () => ({
 }));
 
 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>
   ),
 }));
 
@@ -74,6 +76,77 @@ describe("Modal", () => {
 
   beforeEach(() => jest.clearAllMocks());
 
+  describe("fieldProps", () => {
+    it("tags title, description and content without changing child tags", () => {
+      const tag = (field: string) => ({
+        "data-contentful-field-id": field,
+        "data-contentful-entry-id": "modal",
+        "data-contentful-locale": "en-US",
+      });
+      const { container } = render(
+        <Modal
+          {...defaultProps}
+          title="Tagged modal"
+          description="Tagged description"
+          content={<span {...tag("nested")}>Nested content</span>}
+          fieldProps={{
+            title: tag("title"),
+            description: tag("description"),
+            content: tag("content"),
+          }}
+        >
+          <span>Extra child</span>
+        </Modal>
+      );
+      expect(screen.getByText("Tagged modal")).toHaveAttribute(
+        "data-contentful-field-id",
+        "title"
+      );
+      expect(screen.getByText("Tagged description")).toHaveAttribute(
+        "data-contentful-field-id",
+        "description"
+      );
+      expect(screen.getByText("Nested content").parentElement).toHaveAttribute(
+        "data-contentful-field-id",
+        "content"
+      );
+      expect(screen.getByText("Nested content")).toHaveAttribute(
+        "data-contentful-field-id",
+        "nested"
+      );
+      expect(screen.getByText("Extra child").parentElement).toBe(
+        screen.getByText("Nested content").parentElement
+      );
+      container
+        .querySelectorAll("[data-contentful-field-id]")
+        .forEach(element => {
+          expect(element).toHaveAttribute("data-contentful-entry-id", "modal");
+          expect(element).toHaveAttribute("data-contentful-locale", "en-US");
+        });
+    });
+
+    it("supports partial fieldProps without creating absent fields", () => {
+      const { container } = render(
+        <Modal
+          {...defaultProps}
+          title="Title only"
+          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 tagging attributes when fieldProps is omitted", () => {
+      const { container } = render(<Modal {...defaultProps} title="No tags" />);
+      expect(container.querySelector("[data-contentful-field-id]")).toBeNull();
+    });
+  });
+
   describe("Rendering", () => {
     it("renders dialog root with open state", () => {
       render(<Modal {...defaultProps} />);

package/src/contentful/blocks/modal/index.tsx

@@ -31,6 +31,7 @@ export const Modal: React.FC<ExtendedModalProps> = props => {
     bodyClassName,
     type = "modal",
     index = 0,
+    fieldProps,
   } = props;
 
   return (
@@ -93,18 +94,26 @@ export const Modal: React.FC<ExtendedModalProps> = props => {
                         "mb-4 md:mb-[60px]"
                       )}
                       as="h2"
+                      {...fieldProps?.title}
                     >
                       {title}
                     </Text>
                   ) : null}
 
                   {description ? (
-                    <Text as="div" className="mb-8 sm:mb-5">
+                    <Text
+                      as="div"
+                      className="mb-8 sm:mb-5"
+                      {...fieldProps?.description}
+                    >
                       {description}
                     </Text>
                   ) : null}
 
-                  <div className="flex flex-col gap-4 sm:gap-5">
+                  <div
+                    className="flex flex-col gap-4 sm:gap-5"
+                    {...fieldProps?.content}
+                  >
                     {content}
                     {children ? children : null}
                   </div>

package/src/contentful/blocks/modal/types.ts

@@ -1,5 +1,7 @@
 import React from "react";
 
+import type { FieldProps } from "@shared/types/field-props";
+
 export type ModalProps = {
   isOpen: boolean;
   onRequestClose?: () => void;
@@ -9,4 +11,6 @@ export type ModalProps = {
   content?: React.ReactNode;
   children?: React.ReactNode;
   bodyClassName?: string;
+  /** DOM attributes for modal fields; `content` tags the region containing content and children. */
+  fieldProps?: FieldProps<"title" | "description" | "content">;
 };

package/src/contentful/blocks/navigation/{navigation.stories.tsx → Navigation.stories.tsx}

@@ -7,7 +7,7 @@ import {
   UTILITY_LINKS,
   ACCOUNT_LINKS,
   SUPPORT_LINKS,
-} from "./navigation.stories.mocks";
+} from "./Navigation.stories.mocks";
 
 const searchFormStyle = `
   form[name="searchForm"] {