@windstream/react-shared-components 0.2.92 → 0.2.94

package/src/contentful/blocks/dynamic-tabs/types.ts

@@ -1,9 +1,13 @@
 import { ReactNode } from "react";
 
+import type { FieldProps } from "@shared/types/field-props";
+
 export interface DynamicTabT {
   tabName: string;
   anchorId: string;
   tabContent: ReactNode;
+  /** Inspector attributes for this tab's name and content. */
+  fieldProps?: FieldProps<"tabName" | "tabContent">;
 }
 
 export interface DynamicTabsT {
@@ -22,4 +26,6 @@ export interface DynamicTabsT {
   textColor?: "navy";
   navigationType?: boolean;
   mobileSidebarTabType?: boolean;
+  /** Inspector attributes for the block heading fields. */
+  fieldProps?: FieldProps<"title" | "subTitle">;
 }

package/src/contentful/blocks/email-input-block/index.test.tsx

@@ -15,6 +15,56 @@ describe("EmailInputBlock", () => {
     jest.clearAllMocks();
   });
 
+  it("tags content, email input, CTA, validation and caption fields", () => {
+    const { container } = render(
+      <EmailInputBlock
+        {...defaultProps}
+        title="Join us"
+        subTitle="Stay in touch"
+        emailInputDescription="Sign up now"
+        successFeedback="Thanks!"
+        caption="No spam"
+        fieldProps={{
+          title: { "data-contentful-field-id": "title" },
+          subTitle: { "data-contentful-field-id": "subTitle" },
+          emailInputDescription: {
+            "data-contentful-field-id": "emailInputDescription",
+          },
+          email: { "data-contentful-field-id": "email" },
+          cta: { "data-contentful-field-id": "cta" },
+          errorMessage: { "data-contentful-field-id": "errorMessage" },
+          successFeedback: {
+            "data-contentful-field-id": "successFeedback",
+          },
+          caption: { "data-contentful-field-id": "caption" },
+        }}
+      />
+    );
+    [
+      "title",
+      "subTitle",
+      "emailInputDescription",
+      "email",
+      "cta",
+      "caption",
+    ].forEach(field => {
+      expect(
+        container.querySelector(`[data-contentful-field-id="${field}"]`)
+      ).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByText("Sign me up"));
+    expect(
+      container.querySelector('[data-contentful-field-id="errorMessage"]')
+    ).toBeInTheDocument();
+    fireEvent.change(screen.getByPlaceholderText("Enter your email here"), {
+      target: { value: "user@example.com" },
+    });
+    fireEvent.click(screen.getByText("Sign me up"));
+    expect(
+      container.querySelector('[data-contentful-field-id="successFeedback"]')
+    ).toBeInTheDocument();
+  });
+
   describe("Rendering", () => {
     it("renders with default props", () => {
       const { container } = render(<EmailInputBlock {...defaultProps} />);
@@ -176,9 +226,7 @@ describe("EmailInputBlock", () => {
   describe("Themes", () => {
     it("applies green theme background by default", () => {
       const { container } = render(<EmailInputBlock {...defaultProps} />);
-      expect(
-        container.querySelector(".bg-bg-fill-brand")
-      ).toBeInTheDocument();
+      expect(container.querySelector(".bg-bg-fill-brand")).toBeInTheDocument();
     });
 
     it("uses min-height instead of fixed height on the container", () => {

package/src/contentful/blocks/email-input-block/index.tsx

@@ -5,23 +5,42 @@ import { Button } from "../button";
 import { EmailInputBlockProps } from "./types";
 
 const LogoCream = ({ fill = "#FFFEEF" }: { fill?: string }) => {
-   const clipPathId = `logo-cream-clip-${React.useId()}`;
-   return (
-     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 100 99" preserveAspectRatio="xMidYMid meet">
-       <g fill={fill} clipPath={`url(#${clipPathId})`}>
-         <path d="M23.877 73.439c2.829 9.044 7.288 13.706 25.03 18.07 16.735 4.111 43.31 12.356 48.798 3.65 3.454-5.095 1.534-12.395.415-18.244-.875-3.853-1.756-7.3-2.534-11.074-.255-1.237-2.034-1.22-2.278.022-1.284 6.552-3.528 11.26-8.55 14.482-8.572 6.125-28.7 2.295-39.453-2.272-11.487-4.656-14.696-13.509-15.486-23.126-.296-5.157.437-10.123 1.818-14.392.409-1.254-1.273-2.097-2.045-1.023-6.113 8.464-8.073 23.88-5.71 33.913" opacity=".45" />
-         <path d="M74.18 75.362c9.135-2.8 13.845-7.215 18.253-24.779 4.153-16.569 12.481-42.878 3.687-48.31-5.147-3.42-12.52-1.52-18.429-.411-3.89.866-7.373 1.738-11.185 2.508-1.25.253-1.233 2.014.023 2.255 6.618 1.271 11.373 3.493 14.628 8.465 6.186 8.486 2.318 28.412-2.295 39.059-4.704 11.371-13.646 14.549-23.36 15.33-5.21.293-10.226-.432-14.537-1.799-1.267-.405-2.12 1.26-1.034 2.025 8.55 6.051 24.12 7.992 34.255 5.652" opacity=".45" />
-         <path d="M76.124 25.562c-2.83-9.044-7.289-13.706-25.03-18.07C34.358 3.38 7.783-4.865 2.3 3.842-1.153 8.937.767 16.237 1.886 22.086c.875 3.852 1.756 7.3 2.534 11.074.256 1.237 2.034 1.22 2.278-.023 1.284-6.552 3.528-11.26 8.55-14.482 8.572-6.124 28.7-2.294 39.453 2.272 11.487 4.657 14.696 13.51 15.486 23.126.296 5.158-.437 10.124-1.818 14.392-.409 1.255 1.273 2.098 2.045 1.024 6.113-8.464 8.073-23.88 5.71-33.913" opacity=".45" />
-         <path d="M25.82 23.638c-9.135 2.8-13.845 7.216-18.253 24.78-4.153 16.568-12.48 42.877-3.687 48.31 5.147 3.42 12.52 1.519 18.429.41 3.891-.865 7.374-1.737 11.186-2.508 1.25-.253 1.232-2.013-.023-2.255-6.619-1.27-11.373-3.492-14.629-8.464-6.186-8.487-2.317-28.413 2.296-39.059 4.703-11.372 13.645-14.55 23.36-15.331 5.209-.293 10.225.433 14.537 1.8 1.266.404 2.118-1.26 1.033-2.025-8.55-6.052-24.12-7.992-34.255-5.652" opacity=".45" />
-       </g>
-       <defs>
-         <clipPath id={clipPathId}>
-           <path fill="#fff" d="M0 0h100v99H0z" />
-         </clipPath>
-       </defs>
-     </svg>
-   );
- };
+  const clipPathId = `logo-cream-clip-${React.useId()}`;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      fill="none"
+      viewBox="0 0 100 99"
+      preserveAspectRatio="xMidYMid meet"
+    >
+      <g fill={fill} clipPath={`url(#${clipPathId})`}>
+        <path
+          d="M23.877 73.439c2.829 9.044 7.288 13.706 25.03 18.07 16.735 4.111 43.31 12.356 48.798 3.65 3.454-5.095 1.534-12.395.415-18.244-.875-3.853-1.756-7.3-2.534-11.074-.255-1.237-2.034-1.22-2.278.022-1.284 6.552-3.528 11.26-8.55 14.482-8.572 6.125-28.7 2.295-39.453-2.272-11.487-4.656-14.696-13.509-15.486-23.126-.296-5.157.437-10.123 1.818-14.392.409-1.254-1.273-2.097-2.045-1.023-6.113 8.464-8.073 23.88-5.71 33.913"
+          opacity=".45"
+        />
+        <path
+          d="M74.18 75.362c9.135-2.8 13.845-7.215 18.253-24.779 4.153-16.569 12.481-42.878 3.687-48.31-5.147-3.42-12.52-1.52-18.429-.411-3.89.866-7.373 1.738-11.185 2.508-1.25.253-1.233 2.014.023 2.255 6.618 1.271 11.373 3.493 14.628 8.465 6.186 8.486 2.318 28.412-2.295 39.059-4.704 11.371-13.646 14.549-23.36 15.33-5.21.293-10.226-.432-14.537-1.799-1.267-.405-2.12 1.26-1.034 2.025 8.55 6.051 24.12 7.992 34.255 5.652"
+          opacity=".45"
+        />
+        <path
+          d="M76.124 25.562c-2.83-9.044-7.289-13.706-25.03-18.07C34.358 3.38 7.783-4.865 2.3 3.842-1.153 8.937.767 16.237 1.886 22.086c.875 3.852 1.756 7.3 2.534 11.074.256 1.237 2.034 1.22 2.278-.023 1.284-6.552 3.528-11.26 8.55-14.482 8.572-6.124 28.7-2.294 39.453 2.272 11.487 4.657 14.696 13.51 15.486 23.126.296 5.158-.437 10.124-1.818 14.392-.409 1.255 1.273 2.098 2.045 1.024 6.113-8.464 8.073-23.88 5.71-33.913"
+          opacity=".45"
+        />
+        <path
+          d="M25.82 23.638c-9.135 2.8-13.845 7.216-18.253 24.78-4.153 16.568-12.48 42.877-3.687 48.31 5.147 3.42 12.52 1.519 18.429.41 3.891-.865 7.374-1.737 11.186-2.508 1.25-.253 1.232-2.013-.023-2.255-6.619-1.27-11.373-3.492-14.629-8.464-6.186-8.487-2.317-28.413 2.296-39.059 4.703-11.372 13.645-14.55 23.36-15.331 5.209-.293 10.225.433 14.537 1.8 1.266.404 2.118-1.26 1.033-2.025-8.55-6.052-24.12-7.992-34.255-5.652"
+          opacity=".45"
+        />
+      </g>
+      <defs>
+        <clipPath id={clipPathId}>
+          <path fill="#fff" d="M0 0h100v99H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
 
 export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
   const {
@@ -41,6 +60,7 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
     padding = "large",
     requiredErrorMessage = "Email is required",
     validationErrorMessage = "Invalid email address",
+    fieldProps,
   } = props || {};
 
   const buttonLabel = ctaButtonText || ctaText || "Sign me up";
@@ -61,12 +81,18 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
 
   const normalizedBg =
     ((backgroundColor as string) || "").trim().toLowerCase() || "white";
-  const outerBgClass = backgroundColorClasses[normalizedBg as keyof typeof backgroundColorClasses] || backgroundColorClasses.white;
-  const captionTextColorClass = normalizedBg === "white" ? "text-text" : "text-white";
+  const outerBgClass =
+    backgroundColorClasses[
+      normalizedBg as keyof typeof backgroundColorClasses
+    ] || backgroundColorClasses.white;
+  const captionTextColorClass =
+    normalizedBg === "white" ? "text-text" : "text-white";
 
   const normalizedTheme =
-   ((themeColor as string) || "").trim().toLowerCase() || "green";
-  const containerBgClass = themeColorClasses[normalizedTheme as keyof typeof themeColorClasses] || themeColorClasses.green;
+    ((themeColor as string) || "").trim().toLowerCase() || "green";
+  const containerBgClass =
+    themeColorClasses[normalizedTheme as keyof typeof themeColorClasses] ||
+    themeColorClasses.green;
 
   const darkThemeColors = ["green", "blue", "purple"];
   const isDarkTheme = darkThemeColors.includes(normalizedTheme);
@@ -74,7 +100,8 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
   const errorTextColor = isDarkTheme ? "text-text-inverse" : "text-text";
   const pinwheelFill = normalizedTheme === "white" ? "#E0E0E0" : "#FFFEEF";
 
-  const paddingClass = padding === "none" ? "!py-0 md:!py-0" : "!py-8 md:!py-20";
+  const paddingClass =
+    padding === "none" ? "!py-0 md:!py-0" : "!py-8 md:!py-20";
 
   const [email, setEmail] = useState("");
   const [formSubmitted, setFormSubmitted] = useState(false);
@@ -99,28 +126,45 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
   };
 
   return (
-    <section id={anchorId} className={`w-full px-4 ${paddingClass} md:px-10 ${outerBgClass}`}>
+    <section
+      id={anchorId}
+      className={`w-full px-4 ${paddingClass} md:px-10 ${outerBgClass}`}
+    >
       <div
         className={`mx-auto max-w-[1200px] overflow-hidden !rounded-[20px] md:rounded-[20px] flex flex-col items-start !px-5 !pt-6 !pb-10 md:!p-10 md:!pt-12 min-h-[344px] md:!w-auto md:min-h-[367px] relative ${containerBgClass}`}
       >
         {showPinWheel && (
-          <div className="absolute right-[-50px] top-[-30px] hidden h-[420px] w-[420px] pointer-events-none lg:block" aria-hidden="true">
+          <div
+            className="absolute right-[-50px] top-[-30px] hidden h-[420px] w-[420px] pointer-events-none lg:block"
+            aria-hidden="true"
+          >
             <LogoCream fill={pinwheelFill} />
           </div>
         )}
         <div className="w-full">
           <div className="lg:w-[548px]">
             {title && (
-              <h2 className={`mb-3 text-[2.25rem] leading-[2.5rem] font-black md:text-heading2 md:font-black ${textColor}`}>{title}</h2>
+              <h2
+                className={`mb-3 text-[2.25rem] leading-[2.5rem] font-black md:text-heading2 md:font-black ${textColor}`}
+                {...fieldProps?.title}
+              >
+                {title}
+              </h2>
             )}
             {subTitle && (
-              <h3 className={`subheading3 mb-3 font-black ${textColor}`}>
+              <h3
+                className={`subheading3 mb-3 font-black ${textColor}`}
+                {...fieldProps?.subTitle}
+              >
                 {subTitle}
               </h3>
             )}
 
             {emailInputDescription && (
-              <p className={`!mb-4 md:!mb-16 text-xl leading-7 font-medium md:text-subheading1 md:!leading-8 md:!font-bold opacity-95 ${textColor}`}>
+              <p
+                className={`!mb-4 md:!mb-16 text-xl leading-7 font-medium md:text-subheading1 md:!leading-8 md:!font-bold opacity-95 ${textColor}`}
+                {...fieldProps?.emailInputDescription}
+              >
                 {emailInputDescription}
               </p>
             )}
@@ -145,6 +189,7 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
                   }
                 }}
                 className="w-full flex-grow bg-transparent !pl-4 pr-6 py-3 text-[1rem] leading-none md:text-base font-normal text-text outline-none placeholder:input-text-placeholder md:py-4"
+                {...fieldProps?.email}
               />
             </div>
             <Button
@@ -152,25 +197,37 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
               buttonVariant="primary_inverse"
               buttonClassName="capitalize-first whitespace-nowrap rounded-2xl px-8 !text-lg mt-3 w-full sm:mt-0 sm:w-auto sm:absolute sm:right-[8px] sm:top-[calc(50%-28px)]"
               onClick={handleOnSubmit}
+              fieldProps={fieldProps?.cta}
             />
           </div>
           {emailError && (
-            <p className={`mt-2 text-label4 font-semibold ${errorTextColor}`}>
+            <p
+              className={`mt-2 text-label4 font-semibold ${errorTextColor}`}
+              {...fieldProps?.errorMessage}
+            >
               {emailError}
             </p>
           )}
           {successFeedback && formSubmitted && !emailError && (
-            <p className={`mt-2 text-label4 font-semibold ${textColor}`}>
+            <p
+              className={`mt-2 text-label4 font-semibold ${textColor}`}
+              {...fieldProps?.successFeedback}
+            >
               {successFeedback}
             </p>
           )}
         </div>
       </div>
       {caption && (
-        <div className={`mx-auto max-w-[1200px] px-6 md:px-8 ${captionTextColorClass}`}>{caption}</div>
+        <div
+          className={`mx-auto max-w-[1200px] px-6 md:px-8 ${captionTextColorClass}`}
+          {...fieldProps?.caption}
+        >
+          {caption}
+        </div>
       )}
     </section>
   );
 };
 
-export default EmailInputBlock;
+export default EmailInputBlock;

package/src/contentful/blocks/email-input-block/types.ts

@@ -1,5 +1,7 @@
 import React from "react";
 
+import type { FieldProps } from "@shared/types/field-props";
+
 export interface EmailInputBlockProps {
   anchorId?: string;
   title?: string;
@@ -10,13 +12,24 @@ export interface EmailInputBlockProps {
   ctaButtonText?: string;
   ctaText?: string;
   caption?: React.ReactNode;
-  backgroundColor?: "green" | "white" | "yellow" | "blue" | "navy" | "gray90";  
+  backgroundColor?: "green" | "white" | "yellow" | "blue" | "navy" | "gray90";
   themeColor?: "blue" | "green" | "orange" | "purple" | "white";
   showPinWheel?: boolean;
   padding?: "none" | "large";
   validationErrorMessage?: string;
   requiredErrorMessage?: string;
   onSubmit: (values: EmailInputFormValues) => void;
+  /** Inspector attributes for rendered content and email form fields. */
+  fieldProps?: FieldProps<
+    | "title"
+    | "subTitle"
+    | "emailInputDescription"
+    | "email"
+    | "cta"
+    | "errorMessage"
+    | "successFeedback"
+    | "caption"
+  >;
 }
 
 export interface EmailInputFormValues {

package/src/contentful/blocks/fiber-form/index.test.tsx

@@ -1,7 +1,14 @@
-import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
-import * as Yup from "yup";
 import { FiberForm } from ".";
 import type { FiberFormValues } from "./types";
+import * as Yup from "yup";
+
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 
 jest.mock("@vimeo/player", () => jest.fn(), { virtual: true });
 
@@ -47,6 +54,37 @@ const renderForm = (onSubmit: (values: FiberFormValues) => Promise<void>) =>
   );
 
 describe("FiberForm submit loading state", () => {
+  it("tags configured fields and the submit CTA", () => {
+    const { container } = render(
+      <FiberForm
+        AddressAutocomplete={AddressAutocomplete}
+        initialValues={initialValues}
+        inputList={{
+          firstName: {},
+          lastName: {},
+          phoneNumber: {},
+          emailAddress: {},
+        }}
+        formSchema={Yup.object({})}
+        onSubmit={async () => Promise.resolve()}
+        fieldProps={{
+          firstName: { "data-contentful-field-id": "firstName" },
+          lastName: { "data-contentful-field-id": "lastName" },
+          phoneNumber: { "data-contentful-field-id": "phoneNumber" },
+          emailAddress: { "data-contentful-field-id": "emailAddress" },
+          submit: { "data-contentful-field-id": "submit" },
+        }}
+      />
+    );
+    ["firstName", "lastName", "phoneNumber", "emailAddress", "submit"].forEach(
+      field => {
+        expect(
+          container.querySelector(`[data-contentful-field-id="${field}"]`)
+        ).toBeInTheDocument();
+      }
+    );
+  });
+
   it("shows a spinner and disables submit until submission resolves", async () => {
     const submission = deferred();
     const onSubmit = jest.fn(() => submission.promise);

package/src/contentful/blocks/fiber-form/index.tsx

@@ -67,6 +67,7 @@ export const FiberForm: React.FC<FiberFormProps> = ({
   copyRightLinks,
   className,
   onAddressEvent,
+  fieldProps,
 }) => {
   const FormInput = InputComponent ?? Input;
   const [candidates, setCandidates] = useState<FiberAddressCandidate[]>([]);
@@ -164,7 +165,7 @@ export const FiberForm: React.FC<FiberFormProps> = ({
         <Form className={cx("fiber-form w-full", className)}>
           <div className="flex flex-col gap-5 sm:flex-row">
             {inputList.firstName && (
-              <div className="flex-1">
+              <div className="flex-1" {...fieldProps?.firstName}>
                 <FieldLabel required>First name</FieldLabel>
                 <Field
                   as={FormInput}
@@ -180,7 +181,7 @@ export const FiberForm: React.FC<FiberFormProps> = ({
               </div>
             )}
             {inputList.lastName && (
-              <div className="flex-1">
+              <div className="flex-1" {...fieldProps?.lastName}>
                 <FieldLabel required>Last name</FieldLabel>
                 <Field
                   as={FormInput}
@@ -199,7 +200,7 @@ export const FiberForm: React.FC<FiberFormProps> = ({
 
           {inputList.address && (
             <div className="mt-8 flex flex-col gap-5 sm:flex-row">
-              <div className="sm:flex-[3]">
+              <div className="sm:flex-[3]" {...fieldProps?.address}>
                 <FieldLabel required>Address</FieldLabel>
                 <Field name="address">
                   {({ field }: FieldProps) => (
@@ -285,7 +286,10 @@ export const FiberForm: React.FC<FiberFormProps> = ({
                   </ul>
                 )}
               </div>
-              <div className="w-full sm:w-[216px] sm:flex-none">
+              <div
+                className="w-full sm:w-[216px] sm:flex-none"
+                {...fieldProps?.unit}
+              >
                 <div className="mb-1 hidden h-[20px] sm:block" />
                 <Select
                   options={unitOptions}
@@ -401,7 +405,7 @@ export const FiberForm: React.FC<FiberFormProps> = ({
 
           <div className="mt-8 flex flex-col gap-5 sm:flex-row">
             {inputList.phoneNumber && (
-              <div className="flex-1">
+              <div className="flex-1" {...fieldProps?.phoneNumber}>
                 <FieldLabel required>Phone number</FieldLabel>
                 <Field name="phone">
                   {({ field, form }: FieldProps) => (
@@ -423,7 +427,7 @@ export const FiberForm: React.FC<FiberFormProps> = ({
               </div>
             )}
             {inputList.emailAddress && (
-              <div className="flex-1">
+              <div className="flex-1" {...fieldProps?.emailAddress}>
                 <FieldLabel required>Email address</FieldLabel>
                 <Field
                   as={FormInput}
@@ -439,7 +443,7 @@ export const FiberForm: React.FC<FiberFormProps> = ({
 
           <div className="mt-8 flex flex-col gap-5 sm:flex-row">
             {inputList.referralCode && (
-              <div className="flex-1">
+              <div className="flex-1" {...fieldProps?.referralCode}>
                 <FieldLabel>Referral code</FieldLabel>
                 <Field
                   as={FormInput}
@@ -455,7 +459,7 @@ export const FiberForm: React.FC<FiberFormProps> = ({
               </div>
             )}
             {inputList.notes && (
-              <div className="flex-1">
+              <div className="flex-1" {...fieldProps?.notes}>
                 <FieldLabel>Notes or comments</FieldLabel>
                 <Field
                   as={FormInput}
@@ -468,7 +472,10 @@ export const FiberForm: React.FC<FiberFormProps> = ({
           </div>
 
           {checkBoxEnabled && !hideLegalCopy && (
-            <div className="mt-16 text-neutral-600">
+            <div
+              className="mt-16 text-neutral-600"
+              {...fieldProps?.isMarketingCom}
+            >
               <Field name="isMarketingCom">
                 {({ field }: FieldProps) => (
                   <div className="mb-7 mt-4 flex items-center gap-1 pl-1">
@@ -503,7 +510,10 @@ export const FiberForm: React.FC<FiberFormProps> = ({
             </div>
           )}
           {!hideLegalCopy && (
-            <Text className="body3 my-[32px] text-neutral-600 lg:mb-[64px] lg:mt-[32px]">
+            <Text
+              className="body3 my-[32px] text-neutral-600 lg:mb-[64px] lg:mt-[32px]"
+              {...fieldProps?.legalCopy}
+            >
               By submitting this form you consent to receive marketing messages
               from Kinetic by text, email or phone to the contact provided.
               Consent is not a condition of purchase. Msg &amp; data rates may
@@ -512,12 +522,18 @@ export const FiberForm: React.FC<FiberFormProps> = ({
             </Text>
           )}
           {bottomTextDisclaimer && !hideLegalCopy && (
-            <Text className="mt-2 text-center text-text-secondary">
+            <Text
+              className="mt-2 text-center text-text-secondary"
+              {...fieldProps?.bottomTextDisclaimer}
+            >
               {bottomTextDisclaimer}
             </Text>
           )}
           {copyRightLinks && !hideLegalCopy && (
-            <ul className="mt-16 flex list-disc justify-center gap-8 text-text-secondary">
+            <ul
+              className="mt-16 flex list-disc justify-center gap-8 text-text-secondary"
+              {...fieldProps?.copyRightLinks}
+            >
               {copyRightLinks.map(link => (
                 <li key={link.title}>
                   <a
@@ -532,7 +548,10 @@ export const FiberForm: React.FC<FiberFormProps> = ({
               ))}
             </ul>
           )}
-          <div className="mt-8 flex items-center justify-center lg:mt-[64px]">
+          <div
+            className="mt-8 flex items-center justify-center lg:mt-[64px]"
+            {...fieldProps?.submit}
+          >
             <Button
               type="submit"
               disabled={isSubmitting}

package/src/contentful/blocks/fiber-form/types.ts

@@ -2,6 +2,8 @@ import type { ComponentType, KeyboardEvent, ReactNode } from "react";
 import type { FormikErrors, FormikTouched, FormikValues } from "formik";
 import type * as Yup from "yup";
 
+import type { FieldProps } from "@shared/types/field-props";
+
 export type FiberAddressUnit = {
   addressLine2: string;
   dfAddressId?: string;
@@ -83,6 +85,22 @@ export type FiberFormProps = {
   copyRightLinks?: Array<{ title: string; href: string }>;
   className?: string;
   onAddressEvent?: (address: string) => void;
+  /** Inspector attributes for each rendered form field, disclaimer and CTA. */
+  fieldProps?: FieldProps<
+    | "firstName"
+    | "lastName"
+    | "address"
+    | "unit"
+    | "phoneNumber"
+    | "emailAddress"
+    | "referralCode"
+    | "notes"
+    | "isMarketingCom"
+    | "legalCopy"
+    | "bottomTextDisclaimer"
+    | "copyRightLinks"
+    | "submit"
+  >;
 };
 
 export type FiberFormErrorProps = {

package/src/contentful/blocks/iframe-embed/index.test.tsx

@@ -1,9 +1,29 @@
 import React from "react";
 import { IframeEmbed } from "./index";
 
-import { render, screen, fireEvent } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 
 describe("IframeEmbed", () => {
+  it("tags the iframe URL outside the embedded document and accepts updated props", () => {
+    const { container, rerender } = render(
+      <IframeEmbed
+        iframeUrl="https://example.com/one"
+        fieldProps={{ iframeUrl: { "data-contentful-field-id": "iframeUrl" } }}
+      />
+    );
+    expect(container.querySelector("section")).toHaveAttribute(
+      "data-contentful-field-id",
+      "iframeUrl"
+    );
+    rerender(<IframeEmbed iframeUrl="https://example.com/two" />);
+    expect(screen.getByTitle("Iframe Embed")).toHaveAttribute(
+      "src",
+      "https://example.com/two"
+    );
+    expect(container.querySelector("section")).not.toHaveAttribute(
+      "data-contentful-field-id"
+    );
+  });
   it("renders nothing when iframeUrl is not provided", () => {
     const { container } = render(<IframeEmbed iframeUrl="" />);
     expect(container.querySelector("section")).not.toBeInTheDocument();
@@ -18,14 +38,20 @@ describe("IframeEmbed", () => {
 
   it("applies anchorId to the section", () => {
     const { container } = render(
-      <IframeEmbed iframeUrl="https://example.com/embed" anchorId="embed-section" />
+      <IframeEmbed
+        iframeUrl="https://example.com/embed"
+        anchorId="embed-section"
+      />
     );
     expect(container.querySelector("#embed-section")).toBeInTheDocument();
   });
 
   it("applies background color when backgroundColor is provided", () => {
     render(
-      <IframeEmbed iframeUrl="https://example.com/embed" backgroundColor="green" />
+      <IframeEmbed
+        iframeUrl="https://example.com/embed"
+        backgroundColor="green"
+      />
     );
     const iframe = screen.getByTitle("Iframe Embed");
     expect(iframe.style.background).toBe("rgb(36, 167, 106)");
@@ -51,7 +77,9 @@ describe("IframeEmbed", () => {
 
   it("removes message listener on unmount", () => {
     const removeEventListenerSpy = jest.spyOn(window, "removeEventListener");
-    const { unmount } = render(<IframeEmbed iframeUrl="https://example.com/embed" />);
+    const { unmount } = render(
+      <IframeEmbed iframeUrl="https://example.com/embed" />
+    );
 
     unmount();
 
@@ -83,7 +111,10 @@ describe("IframeEmbed", () => {
     render(<IframeEmbed iframeUrl="https://example.com/embed" />);
     const iframe = screen.getByTitle("Iframe Embed");
 
-    fireEvent(window, new MessageEvent("message", { data: { iframeHeight: "abc" } }));
+    fireEvent(
+      window,
+      new MessageEvent("message", { data: { iframeHeight: "abc" } })
+    );
     expect(iframe.style.height).toBe("");
   });
 
@@ -91,7 +122,10 @@ describe("IframeEmbed", () => {
     render(<IframeEmbed iframeUrl="https://example.com/embed" />);
     const iframe = screen.getByTitle("Iframe Embed");
 
-    fireEvent(window, new MessageEvent("message", { data: { iframeHeight: 99999 } }));
+    fireEvent(
+      window,
+      new MessageEvent("message", { data: { iframeHeight: 99999 } })
+    );
     expect(iframe.style.height).toBe("");
   });
 
@@ -99,7 +133,10 @@ describe("IframeEmbed", () => {
     render(<IframeEmbed iframeUrl="https://example.com/embed" />);
     const iframe = screen.getByTitle("Iframe Embed");
 
-    fireEvent(window, new MessageEvent("message", { data: { iframeHeight: -100 } }));
+    fireEvent(
+      window,
+      new MessageEvent("message", { data: { iframeHeight: -100 } })
+    );
     expect(iframe.style.height).toBe("");
   });
 });