@windstream/react-shared-components 0.2.92 → 0.2.94

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

@@ -35,5 +35,7 @@ export interface BlogCardProps {
   asGrid?: boolean;
   index?: number;
   /** Per-field DOM attributes supplied by the consumer or parent Callout item. */
-  fieldProps?: FieldProps<"title" | "description">;
+  fieldProps?: FieldProps<
+    "title" | "description" | "image" | "category" | "date" | "href"
+  >;
 }

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

@@ -126,6 +126,49 @@ describe("ProductCard", () => {
     });
   });
 
+  describe("Strikethrough price", () => {
+    it("does not render a strikethrough when not provided", () => {
+      const { container } = render(<ProductCard {...defaultProps} />);
+      expect(container.querySelector("s")).toBeNull();
+      expect(screen.queryByText(/Regular price/)).toBeNull();
+    });
+
+    it("does not render a strikethrough for an empty/whitespace value", () => {
+      const { container } = render(
+        <ProductCard {...defaultProps} strikethroughPrice="   " />
+      );
+      expect(container.querySelector("s")).toBeNull();
+    });
+
+    it("renders the strikethrough price with a leading $ when truthy", () => {
+      const { container } = render(
+        <ProductCard {...defaultProps} strikethroughPrice="64.99" />
+      );
+      const strike = container.querySelector("s");
+      expect(strike).toHaveTextContent("$64.99");
+      expect(screen.getByText(/Regular price/)).toHaveClass("sr-only");
+    });
+
+    it("does not double the $ when the value already has one", () => {
+      const { container } = render(
+        <ProductCard {...defaultProps} strikethroughPrice="$64.99" />
+      );
+      expect(container.querySelector("s")?.textContent).toBe("$64.99");
+    });
+
+    it("keeps the price unit rendered alongside the strikethrough", () => {
+      render(<ProductCard {...defaultProps} strikethroughPrice="64.99" />);
+      expect(screen.getByText("99/mo")).toBeInTheDocument();
+    });
+
+    it("does not render a strikethrough when there is no price", () => {
+      const { container } = render(
+        <ProductCard {...defaultProps} price="" strikethroughPrice="64.99" />
+      );
+      expect(container.querySelector("s")).toBeNull();
+    });
+  });
+
   describe("Business theme", () => {
     it("uses the semantic brand token for the plan name and lowercases it by default", () => {
       render(<ProductCard {...defaultProps} />);

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

@@ -30,11 +30,22 @@ const renderPipeBold = (value: React.ReactNode): React.ReactNode => {
   );
 };
 
+/**
+ * Normalizes a strikethrough (regular) price to a single leading `$`, e.g.
+ * `"44.99"` and `"$44.99"` both render as `"$44.99"`. Returns `""` when empty.
+ */
+const formatStrikethroughPrice = (value?: string | null): string => {
+  if (typeof value !== "string") return "";
+  const amount = value.trim().replace(/^\$\s*/, "");
+  return amount ? `$${amount}` : "";
+};
+
 export const ProductCard: React.FC<ProductCardProps> = ({
   planName,
   planSubtext,
   speed,
   price,
+  strikethroughPrice,
   priceUnit = "/mo",
   description,
   bestValue = false,
@@ -73,6 +84,9 @@ export const ProductCard: React.FC<ProductCardProps> = ({
 
   const isDark = theme === "dark";
 
+  const formattedStrikethroughPrice =
+    formatStrikethroughPrice(strikethroughPrice);
+
   // Two-column mobile cards use smaller type below `md` and step up to the
   // standard sizes from `md` up (matches production residential). One-column
   // stacks keep the standard sizes at every breakpoint.
@@ -160,15 +174,29 @@ export const ProductCard: React.FC<ProductCardProps> = ({
                 >
                   {price.split(".")[0]}
                 </Text>
-                <Text
-                  as="span"
-                  className={cx(
-                    priceUnitClass,
-                    isDark ? "text-text-inverse" : "text-text"
-                  )}
-                >
-                  {`${price.split(".")[1]}${priceUnit}`}
-                </Text>
+                <div className="flex flex-col gap-1">
+                  <Text
+                    as="span"
+                    className={cx(
+                      priceUnitClass,
+                      isDark ? "text-text-inverse" : "text-text"
+                    )}
+                  >
+                    {`${price.split(".")[1]}${priceUnit}`}
+                  </Text>
+                  {formattedStrikethroughPrice ? (
+                    <Text
+                      as="span"
+                      className={cx(
+                        "micro whitespace-nowrap",
+                        isDark ? "text-text-inverse" : "text-text-info"
+                      )}
+                    >
+                      <span className="sr-only">Regular price </span>
+                      <s>{formattedStrikethroughPrice}</s>
+                    </Text>
+                  ) : null}
+                </div>
               </div>
               {priceSuffixBottom ? (
                 <Text

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

@@ -11,6 +11,9 @@ export interface ProductCardProps {
   techType?: string;
   ismaxSpeed?: boolean;
   price?: string;
+  /** Regular (pre-promo) price rendered struck through under the price unit.
+   *  Rendered only when truthy; a leading `$` is added if missing. */
+  strikethroughPrice?: 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/carousel/helper.test.tsx

@@ -35,12 +35,14 @@ jest.mock("@shared/contentful/blocks/cards/product-card", () => ({
     giftBadge,
     hasAnyGift,
     price,
+    strikethroughPrice,
   }: any) => (
     <article
       data-testid="product-card"
       data-plan={planName}
       data-speed={speed}
       data-price={price}
+      data-strikethrough={strikethroughPrice}
       data-expanded={isExpanded}
       data-business={enableBusinessSettings ? "true" : "false"}
     >
@@ -157,6 +159,17 @@ describe("ProductCardCarousel", () => {
     expect(screen.getAllByTestId("product-card")).toHaveLength(1);
   });
 
+  it("passes strikethroughPrice through to the ProductCard", () => {
+    const fields = createProductFields([
+      { ...sampleProduct, strikethroughPrice: "64.99" },
+      { ...sampleProduct, sys: { id: "prod-2" } },
+    ]);
+    render(<ProductCardCarousel fields={fields} />);
+    const [withStrike, withoutStrike] = screen.getAllByTestId("product-card");
+    expect(withStrike).toHaveAttribute("data-strikethrough", "64.99");
+    expect(withoutStrike).not.toHaveAttribute("data-strikethrough");
+  });
+
   it("renders non-carousel layout for a single item", () => {
     const fields = createProductFields([sampleProduct]);
     const { container } = render(<ProductCardCarousel fields={fields} />);

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

@@ -431,6 +431,7 @@ function ProductCardPanel({
           techType={item?.techType || ""}
           ismaxSpeed={item?.ismaxSpeed || ""}
           price={formattedPrice}
+          strikethroughPrice={item?.strikethroughPrice}
           priceUnit={priceUnit}
           description={item?.productCardDescription || ""}
           giftBadge={rawBadge}

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 }}