@windstream/react-shared-components 0.2.86 → 0.2.88

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"] {