@windstream/react-shared-components 0.2.92 → 0.2.93

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

@@ -60,6 +60,8 @@ export interface ProductCardFields {
   };
   speed?: string;
   price?: string;
+  /** Regular (pre-promo) price shown struck through on the card when truthy. */
+  strikethroughPrice?: string;
   priceSuffix?: string;
   priceSuffixBottom?: string;
   techType?: string;

package/src/contentful/blocks/dynamic-form/conditional-fields.tsx

@@ -83,6 +83,7 @@ const ConditionalFormFields: React.FC<ConditionalFormFieldsProps> = props => {
           fieldId === constants.TARGET_EMAIL &&
           "rounded-b-xl border-x border-t border-border-secondary pb-5"
       )}
+      {...props.fieldProps?.field}
     >
       <div className="mb-4">
         {labelCreator(displayName, requiredField)}

package/src/contentful/blocks/dynamic-form/form-field.tsx

@@ -170,6 +170,7 @@ export const FormFieldElement: React.FC<FormFieldElementProps> = props => {
           : "",
         fieldClassName?.split("|")[1] || "w-full"
       )}
+      {...props.fieldProps?.field}
     >
       {groupingField && !isGrouped
         ? labelCreator(

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

@@ -23,6 +23,54 @@ const fields: DynamicFormItem[] = [
 ];
 
 describe("DynamicForm", () => {
+  it("tags block fields, individual form fields and the submit region", () => {
+    const { container } = render(
+      <DynamicForm
+        title="Contact us"
+        subTitle="Get in touch"
+        formHeading="Your details"
+        description={<p>Form description</p>}
+        disclaimer="Privacy notice"
+        fields={[
+          {
+            ...fields[0],
+            fieldProps: {
+              field: {
+                "data-contentful-entry-id": "form-field",
+                "data-contentful-field-id": "firstName",
+              },
+            },
+          },
+        ]}
+        fieldProps={{
+          title: { "data-contentful-field-id": "title" },
+          subTitle: { "data-contentful-field-id": "subTitle" },
+          formHeading: { "data-contentful-field-id": "formHeading" },
+          description: { "data-contentful-field-id": "description" },
+          disclaimer: { "data-contentful-field-id": "disclaimer" },
+          submit: { "data-contentful-field-id": "submit" },
+        }}
+      />
+    );
+    [
+      "title",
+      "subTitle",
+      "formHeading",
+      "description",
+      "disclaimer",
+      "submit",
+    ].forEach(field => {
+      expect(
+        container.querySelector(`[data-contentful-field-id="${field}"]`)
+      ).toBeInTheDocument();
+    });
+    expect(
+      container.querySelector(
+        '[data-contentful-entry-id="form-field"][data-contentful-field-id="firstName"]'
+      )
+    ).toBeInTheDocument();
+  });
+
   it("renders the title, fields and submit button", () => {
     render(
       <DynamicForm title="Contact us" fields={fields} submitLabel="Send" />

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

@@ -123,6 +123,7 @@ export const DynamicForm: React.FC<DynamicFormProps> = props => {
     resolveExistingDataSource,
     renderAddressAutocomplete,
     renderSubmitButton,
+    fieldProps,
   } = props;
 
   const submissionIdRef = useRef<string>(generateSubmissionId());
@@ -501,7 +502,7 @@ export const DynamicForm: React.FC<DynamicFormProps> = props => {
         className="mx-auto min-h-screen w-full px-4 sm:px-6 lg:px-8"
       >
         <div className="max-w-2xl mx-auto py-4 sm:py-6 lg:py-8">
-          {successMessage}
+          <div {...fieldProps?.successMessage}>{successMessage}</div>
         </div>
       </div>
     );
@@ -511,7 +512,7 @@ export const DynamicForm: React.FC<DynamicFormProps> = props => {
     return (
       <div className="mx-auto min-h-screen w-full px-4 sm:px-6 lg:px-8">
         <div className="max-w-2xl mx-auto py-4 sm:py-6 lg:py-8">
-          {errorNode}
+          <div {...fieldProps?.errorMessage}>{errorNode}</div>
         </div>
       </div>
     );
@@ -523,24 +524,35 @@ export const DynamicForm: React.FC<DynamicFormProps> = props => {
         <div className="pb-8 sm:pb-6 lg:pb-4">
           <div className="mb-8 lg:mb-16">
             {title && (
-              <Text as="h2" className="heading2 text-center">
+              <Text
+                as="h2"
+                className="heading2 text-center"
+                {...fieldProps?.title}
+              >
                 {title}
               </Text>
             )}
             {subTitle && (
-              <Text as="h3" className="subheading3 mt-3 text-center">
+              <Text
+                as="h3"
+                className="subheading3 mt-3 text-center"
+                {...fieldProps?.subTitle}
+              >
                 {subTitle}
               </Text>
             )}
           </div>
           {description ? (
-            <div className="text-center">{description}</div>
+            <div className="text-center" {...fieldProps?.description}>
+              {description}
+            </div>
           ) : null}
           {formHeading ? (
             <div className="mb-6 w-full px-2 sm:px-4">
               <Text
                 as="div"
                 className="body3 mb-2 text-center text-xl sm:mb-4 md:text-left"
+                {...fieldProps?.formHeading}
               >
                 {formHeading}
               </Text>
@@ -567,7 +579,7 @@ export const DynamicForm: React.FC<DynamicFormProps> = props => {
                     {validationMessage}
                   </Text>
                 )}
-                <div className="flex justify-center">
+                <div className="flex justify-center" {...fieldProps?.submit}>
                   {renderSubmitButton ? (
                     renderSubmitButton({
                       isLoading,
@@ -594,7 +606,7 @@ export const DynamicForm: React.FC<DynamicFormProps> = props => {
             </FormContext.Provider>
           </div>
           {disclaimer && (
-            <Text as="div" className="footnote m-2">
+            <Text as="div" className="footnote m-2" {...fieldProps?.disclaimer}>
               {disclaimer}
             </Text>
           )}

package/src/contentful/blocks/dynamic-form/render.tsx

@@ -52,16 +52,22 @@ const renderItem = (
     const widthClass = item.dividerLength === false ? "w-1/2" : "w-full";
     return (
       <div key={key} className="flex w-full justify-center">
-        <Divider
-          role="separator"
-          aria-label="Content divider"
-          className={widthClass}
-          style={{ height: `${strokeWidth}px` }}
-        />
+        <div {...item.fieldProps?.field}>
+          <Divider
+            role="separator"
+            aria-label="Content divider"
+            className={widthClass}
+            style={{ height: `${strokeWidth}px` }}
+          />
+        </div>
       </div>
     );
   }
-  return <React.Fragment key={key}>{item.content}</React.Fragment>;
+  return (
+    <div key={key} {...item.fieldProps?.field}>
+      {item.content}
+    </div>
+  );
 };
 
 export const dynamicRenderingWithGroupings = (

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

@@ -1,5 +1,7 @@
 import React from "react";
 
+import type { FieldProps } from "@shared/types/field-props";
+
 /**
  * The set of submit actions the DynamicForm understands. Each maps to an
  * injected async handler provided by the consuming application. The package
@@ -53,6 +55,8 @@ export interface DynamicFormFieldConfig {
   selectPresetValidationsToApply?: string;
   /** When true, a Text field renders the app-injected address autocomplete. */
   enableAddressAutocomplete?: boolean;
+  /** Inspector attributes applied to the field's label/control group. */
+  fieldProps?: FieldProps<"field">;
 }
 
 export interface ConditionalFieldConfig {
@@ -67,6 +71,8 @@ export interface ConditionalFieldConfig {
    * Injected by the consuming app so the shared package stays route-agnostic.
    */
   grouped?: boolean;
+  /** Inspector attributes applied to the conditional field group. */
+  fieldProps?: FieldProps<"field">;
 }
 
 export interface DynamicFormDividerConfig {
@@ -81,8 +87,17 @@ export interface DynamicFormDividerConfig {
 export type DynamicFormItem =
   | ({ itemType: "formField" } & DynamicFormFieldConfig)
   | ({ itemType: "conditional" } & ConditionalFieldConfig)
-  | ({ itemType: "divider"; fieldId?: string } & DynamicFormDividerConfig)
-  | { itemType: "custom"; fieldId?: string; content: React.ReactNode };
+  | ({
+      itemType: "divider";
+      fieldId?: string;
+      fieldProps?: FieldProps<"field">;
+    } & DynamicFormDividerConfig)
+  | {
+      itemType: "custom";
+      fieldId?: string;
+      content: React.ReactNode;
+      fieldProps?: FieldProps<"field">;
+    };
 
 export interface DynamicFormPayload {
   submissionId: string;
@@ -250,4 +265,15 @@ export interface DynamicFormProps {
     submitLabel: string;
     onSubmit: (event: any) => void;
   }) => React.ReactNode;
+  /** Inspector attributes for block-level copy and CTA fields. */
+  fieldProps?: FieldProps<
+    | "title"
+    | "subTitle"
+    | "formHeading"
+    | "description"
+    | "disclaimer"
+    | "successMessage"
+    | "errorMessage"
+    | "submit"
+  >;
 }

package/src/contentful/blocks/dynamic-tabs/index.test.tsx

@@ -49,8 +49,10 @@ jest.mock("@shared/components/material-icon", () => ({
 }));
 
 jest.mock("@shared/components/text", () => ({
-  Text: ({ children, className }: any) => (
-    <span className={className}>{children}</span>
+  Text: ({ children, className, ...props }: any) => (
+    <span className={className} {...props}>
+      {children}
+    </span>
   ),
 }));
 
@@ -71,6 +73,54 @@ jest.mock("@shared/utils", () => ({
 }));
 
 describe("DynamicTabs", () => {
+  it("tags block headings and each tab name and content", () => {
+    const { container } = render(
+      <DynamicTabs
+        title="Plans"
+        subTitle="Choose a plan"
+        fieldProps={{
+          title: { "data-contentful-field-id": "title" },
+          subTitle: { "data-contentful-field-id": "subTitle" },
+        }}
+        tabs={{
+          items: [
+            {
+              tabName: "Internet",
+              anchorId: "internet",
+              tabContent: <div>Internet content</div>,
+              fieldProps: {
+                tabName: {
+                  "data-contentful-entry-id": "tab-1",
+                  "data-contentful-field-id": "tabName",
+                },
+                tabContent: {
+                  "data-contentful-entry-id": "tab-1",
+                  "data-contentful-field-id": "tabContent",
+                },
+              },
+            },
+          ],
+        }}
+      />
+    );
+    expect(
+      container.querySelector('[data-contentful-field-id="title"]')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('[data-contentful-field-id="subTitle"]')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        '[data-contentful-entry-id="tab-1"][data-contentful-field-id="tabName"]'
+      )
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        '[data-contentful-entry-id="tab-1"][data-contentful-field-id="tabContent"]'
+      )
+    ).toBeInTheDocument();
+  });
+
   const defaultProps = {
     tabs: {
       items: [

package/src/contentful/blocks/dynamic-tabs/index.tsx

@@ -23,6 +23,7 @@ export function DynamicTabs(props: DynamicTabsT) {
     mobileSidebarTabType = true,
     dynamic = false,
     isOrderedList = false,
+    fieldProps,
   } = props;
 
   const items = tabs?.items ?? [];
@@ -89,12 +90,18 @@ export function DynamicTabs(props: DynamicTabsT) {
       {title || subTitle ? (
         <div className="mb-8 mt-5 flex flex-col gap-5 md:gap-6">
           {title ? (
-            <Text className="heading2 px-5 md:heading1 md:text-center">
+            <Text
+              className="heading2 px-5 md:heading1 md:text-center"
+              {...fieldProps?.title}
+            >
               {title}
             </Text>
           ) : null}
           {subTitle ? (
-            <Text className="subheading3 px-5 md:subheading1 md:text-center">
+            <Text
+              className="subheading3 px-5 md:subheading1 md:text-center"
+              {...fieldProps?.subTitle}
+            >
               {subTitle}
             </Text>
           ) : null}

package/src/contentful/blocks/dynamic-tabs/ordered-tab-views.tsx

@@ -64,6 +64,7 @@ export function OrderedTabView({
           {items.map((tab, index) => (
             <Button
               showButtonAs="unstyled"
+              fieldProps={tab.fieldProps?.tabName}
               key={index}
               onClick={() => onTabClick(index, tab.anchorId || "")}
               buttonClassName={cx(
@@ -73,7 +74,7 @@ export function OrderedTabView({
                   : "body1"
               )}
             >
-              {tab.tabName}
+              <span {...tab.fieldProps?.tabName}>{tab.tabName}</span>
             </Button>
           ))}
         </div>
@@ -96,7 +97,10 @@ export function OrderedTabView({
               )}
               id={tab.anchorId || `tab-${index}`}
             >
-              <div className="px-5 py-4 md:px-10">
+              <div
+                className="px-5 py-4 md:px-10"
+                {...tab.fieldProps?.tabContent}
+              >
                 {renderOrderedChildren(tab.tabContent, subitemColCount)}
               </div>
             </motion.div>
@@ -129,7 +133,9 @@ export function OrderedAccordionView({
               index === currentTabIndex ? "bg-bg-surface-hover" : ""
             )}
           >
-            <span className="heading6">{tab.tabName}</span>
+            <span className="heading6" {...tab.fieldProps?.tabName}>
+              {tab.tabName}
+            </span>
             <MaterialIcon
               name={
                 index === currentTabIndex
@@ -155,7 +161,10 @@ export function OrderedAccordionView({
               )}
               id={tab.anchorId || `tab-${index}`}
             >
-              <div className="px-5 py-4 md:px-10">
+              <div
+                className="px-5 py-4 md:px-10"
+                {...tab.fieldProps?.tabContent}
+              >
                 {renderOrderedChildren(tab.tabContent, subitemColCount)}
               </div>
             </motion.div>
@@ -192,6 +201,7 @@ export function OrderedSidebarView({
                     return (
                       <button
                         key={index}
+                        {...tab.fieldProps?.tabName}
                         onClick={() => onTabClick(index, tab.anchorId || "")}
                         className={cx(
                           "label1 whitespace-nowrap rounded-lg px-4 py-3 text-left",
@@ -200,7 +210,7 @@ export function OrderedSidebarView({
                             : "text-text"
                         )}
                       >
-                        {tab.tabName}
+                        <span {...tab.fieldProps?.tabName}>{tab.tabName}</span>
                       </button>
                     );
                   })}
@@ -212,7 +222,7 @@ export function OrderedSidebarView({
 
       <div className="w-full">
         {items.map((tab, index) => (
-          <div key={index}>
+          <div key={index} {...tab.fieldProps?.tabContent}>
             <AnimatePresence>
               <motion.div
                 initial={{ opacity: 0, y: 20 }}

package/src/contentful/blocks/dynamic-tabs/tab-views.tsx

@@ -32,14 +32,14 @@ export function TabView({ items, currentTabIndex, onTabClick }: TabViewProps) {
                   : "body1"
               )}
             >
-              {item.tabName}
+              <span {...item.fieldProps?.tabName}>{item.tabName}</span>
             </Button>
           ))}
         </div>
       </div>
 
       {items.map((item, index) => (
-        <div key={index}>
+        <div key={index} {...item.fieldProps?.tabContent}>
           <AnimatePresence>
             <motion.div
               initial={{ height: 0, opacity: 0 }}
@@ -76,7 +76,9 @@ export function AccordionView({
               index === currentTabIndex ? "bg-bg-surface-active" : ""
             )}
           >
-            <span className={"heading6"}>{item.tabName}</span>
+            <span className="heading6" {...item.fieldProps?.tabName}>
+              {item.tabName}
+            </span>
             <MaterialIcon
               name={
                 index === currentTabIndex
@@ -88,7 +90,9 @@ export function AccordionView({
             />
           </Button>
           <Collapse open={index === currentTabIndex}>
-            <div className={cx("px-4 py-4")}>{item.tabContent}</div>
+            <div className={cx("px-4 py-4")} {...item.fieldProps?.tabContent}>
+              {item.tabContent}
+            </div>
           </Collapse>
         </div>
       ))}
@@ -117,7 +121,7 @@ export function SidebarView({
                   : "body1"
               )}
             >
-              {item.tabName}
+              <span {...item.fieldProps?.tabName}>{item.tabName}</span>
             </Button>
           ))}
         </div>
@@ -125,7 +129,7 @@ export function SidebarView({
 
       <div className="grow">
         {items.map((item, index) => (
-          <div key={index}>
+          <div key={index} {...item.fieldProps?.tabContent}>
             <AnimatePresence>
               <motion.div
                 initial={{ height: 0, opacity: 0 }}

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

@@ -1,9 +1,14 @@
 import { ReactNode } from "react";
 
+import type { FieldProps } from "@shared/types/field-props";
+
 export interface DynamicTabT {
   tabName: string;
+  fieldProps?: { tabName?: Record<string, unknown> };
   anchorId: string;
   tabContent: ReactNode;
+  /** Inspector attributes for this tab's name and content. */
+  fieldProps?: FieldProps<"tabName" | "tabContent">;
 }
 
 export interface DynamicTabsT {
@@ -22,4 +27,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", () => {