@windstream/react-shared-components 0.2.89 → 0.2.91

package/src/contentful/blocks/image-promo-bar/index.test.tsx

@@ -7,22 +7,42 @@ import { render, screen } from "@testing-library/react";
 jest.mock("../button", () => ({
   __esModule: true,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  Button: ({ buttonLabel, disableAnimation, ...rest }: any) => (
-    <button
-      data-testid="cta-button"
-      data-disable-animation={String(disableAnimation)}
-    >
-      {buttonLabel || "CTA"}
-    </button>
-  ),
-  default: ({ buttonLabel, disableAnimation }: any) => (
-    <button
-      data-testid="cta-button"
-      data-disable-animation={String(disableAnimation)}
-    >
-      {buttonLabel || "CTA"}
-    </button>
-  ),
+  Button: ({
+    buttonLabel,
+    disableAnimation,
+    fieldProps,
+    preDefinedFunctionExecution,
+    renderCheckPlans,
+  }: any) =>
+    preDefinedFunctionExecution === "check availability" && renderCheckPlans ? (
+      renderCheckPlans()
+    ) : (
+      <button
+        data-testid="cta-button"
+        data-disable-animation={String(disableAnimation)}
+        {...fieldProps}
+      >
+        {buttonLabel || "CTA"}
+      </button>
+    ),
+  default: ({
+    buttonLabel,
+    disableAnimation,
+    fieldProps,
+    preDefinedFunctionExecution,
+    renderCheckPlans,
+  }: any) =>
+    preDefinedFunctionExecution === "check availability" && renderCheckPlans ? (
+      renderCheckPlans()
+    ) : (
+      <button
+        data-testid="cta-button"
+        data-disable-animation={String(disableAnimation)}
+        {...fieldProps}
+      >
+        {buttonLabel || "CTA"}
+      </button>
+    ),
 }));
 
 jest.mock("@shared/components/video-link", () => ({
@@ -63,8 +83,10 @@ jest.mock("@shared/components/next-image", () => ({
 }));
 
 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>
   ),
 }));
 
@@ -94,6 +116,142 @@ const defaultProps: ImagePromoBarProps = {
 };
 
 describe("ImagePromoBar", () => {
+  it("tags block content, CTAs, disclaimers, checklist and image links", () => {
+    const tag = (field: string) => ({
+      "data-contentful-field-id": field,
+      "data-contentful-entry-id": "image-promo",
+      "data-contentful-locale": "en-US",
+    });
+    const { container } = render(
+      <ImagePromoBar
+        {...defaultProps}
+        brow="Brow"
+        title="Title"
+        subTitle="Subtitle"
+        description="Description"
+        checklist={["Check"]}
+        ctaDisclaimer="CTA disclaimer"
+        disclaimer="Disclaimer"
+        imageLinks={[
+          {
+            url: "/image",
+            image: "/image.png",
+            fieldProps: {
+              image: {
+                ...tag("image"),
+                "data-contentful-entry-id": "image-link-item",
+              },
+            },
+          },
+        ]}
+        cta={{
+          buttonLabel: "Primary",
+          fieldProps: { "data-contentful-field-id": "nestedPrimaryCta" },
+        }}
+        secondaryCta={{
+          buttonLabel: "Secondary",
+          fieldProps: { "data-contentful-field-id": "nestedSecondaryCta" },
+        }}
+        fieldProps={{
+          brow: tag("brow"),
+          title: tag("title"),
+          subTitle: tag("subTitle"),
+          description: tag("description"),
+          checklist: tag("checklist"),
+          ctaDisclaimer: tag("ctaDisclaimer"),
+          cta: tag("cta"),
+          secondaryCta: tag("secondaryCta"),
+          disclaimer: tag("disclaimer"),
+          imageLinks: tag("imageLinks"),
+        }}
+      />
+    );
+    [
+      "brow",
+      "title",
+      "subTitle",
+      "description",
+      "checklist",
+      "ctaDisclaimer",
+      "cta",
+      "secondaryCta",
+      "disclaimer",
+      "imageLinks",
+    ].forEach(field => {
+      expect(
+        container.querySelector(`[data-contentful-field-id="${field}"]`)
+      ).toHaveAttribute("data-contentful-entry-id", "image-promo");
+    });
+    expect(
+      container.querySelector(
+        '[data-contentful-entry-id="image-link-item"][data-contentful-field-id="image"]'
+      )
+    ).toBeInTheDocument();
+    expect(screen.getAllByTestId("cta-button")[0]).toHaveAttribute(
+      "data-contentful-field-id",
+      "nestedPrimaryCta"
+    );
+    expect(screen.getAllByTestId("cta-button")[1]).toHaveAttribute(
+      "data-contentful-field-id",
+      "nestedSecondaryCta"
+    );
+  });
+
+  it("applies block CTA tags to wrappers around custom check-plans content", () => {
+    const tag = (field: string) => ({
+      "data-contentful-field-id": field,
+      "data-contentful-entry-id": "image-promo",
+    });
+    const { container } = render(
+      <ImagePromoBar
+        {...defaultProps}
+        cta={{
+          preDefinedFunctionExecution: "check availability",
+          fieldProps: { "data-contentful-field-id": "primaryButton" },
+        }}
+        secondaryCta={{
+          preDefinedFunctionExecution: "check availability",
+          fieldProps: { "data-contentful-field-id": "secondaryButton" },
+        }}
+        renderCheckPlans={() => <button>Check availability</button>}
+        fieldProps={{
+          cta: tag("cta"),
+          secondaryCta: tag("secondaryCta"),
+        }}
+      />
+    );
+
+    const primaryWrapper = container.querySelector(".primary-cta");
+    const secondaryWrapper = container.querySelector(".secondary-cta");
+    expect(primaryWrapper).toHaveAttribute("data-contentful-field-id", "cta");
+    expect(secondaryWrapper).toHaveAttribute(
+      "data-contentful-field-id",
+      "secondaryCta"
+    );
+    expect(primaryWrapper).toHaveAttribute(
+      "data-contentful-entry-id",
+      "image-promo"
+    );
+    expect(secondaryWrapper).toHaveAttribute(
+      "data-contentful-entry-id",
+      "image-promo"
+    );
+    expect(primaryWrapper?.querySelector("button")).toHaveTextContent(
+      "Check availability"
+    );
+    expect(secondaryWrapper?.querySelector("button")).toHaveTextContent(
+      "Check availability"
+    );
+    expect(primaryWrapper?.querySelector("button")).not.toHaveAttribute(
+      "data-contentful-field-id",
+      "primaryButton"
+    );
+    expect(secondaryWrapper?.querySelector("button")).not.toHaveAttribute(
+      "data-contentful-field-id",
+      "secondaryButton"
+    );
+  });
+
   describe("Text content", () => {
     it("renders brow text when provided", () => {
       render(<ImagePromoBar {...defaultProps} brow="New" />);

package/src/contentful/blocks/image-promo-bar/index.tsx

@@ -37,6 +37,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   onVideoEvent,
   renderCheckPlans,
   enableAnimation = false,
+  fieldProps,
 }) => {
   const hasVideoLink = Boolean(videoLink);
 
@@ -56,6 +57,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                 <Text
                   as="div"
                   className="subheading4 mb-4 text-text-brand xl:subheading2 xl:mb-3"
+                  {...fieldProps?.brow}
                 >
                   {brow}
                 </Text>
@@ -64,6 +66,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                 <Text
                   as={enableHeading ? "h1" : "h2"}
                   className="heading2 xl:heading1"
+                  {...fieldProps?.title}
                 >
                   {title}
                 </Text>
@@ -72,6 +75,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                 <Text
                   as={enableHeading ? "h2" : "h3"}
                   className="subheading3 mt-3 md:subheading1"
+                  {...fieldProps?.subTitle}
                 >
                   {subTitle}
                 </Text>
@@ -79,45 +83,54 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
             </div>
             {/* Content Section */}
             {description && (
-              <Text as="div" className="body1">
+              <Text as="div" className="body1" {...fieldProps?.description}>
                 {description}
               </Text>
             )}
             {/* Checklist Rendering */}
             {checklist.length > 0 && (
-              <Checklist
-                items={checklist}
-                iconPosition="top"
-                iconSize={24}
-                listItemClassName="body1 text-text"
-                listContainerClassName="mt-0 space-y-0 flex flex-col gap-3"
-              />
+              <div {...fieldProps?.checklist}>
+                <Checklist
+                  items={checklist}
+                  iconPosition="top"
+                  iconSize={24}
+                  listItemClassName="body1 text-text"
+                  listContainerClassName="mt-0 space-y-0 flex flex-col gap-3"
+                />
+              </div>
+            )}
+            {ctaDisclaimer && (
+              <div {...fieldProps?.ctaDisclaimer}>{ctaDisclaimer}</div>
             )}
-            {ctaDisclaimer && <div>{ctaDisclaimer}</div>}
             {imageLinks.length > 0 && (
-              <div className="flex gap-4">
+              <div className="flex gap-4" {...fieldProps?.imageLinks}>
                 {/* Image Links Collection */}
-                {imageLinks?.map(
-                  (link: { url: string; image: string }, index: number) => (
-                    <div key={index} className="image-link w-[147px]">
-                      <Link
-                        variant="unstyled"
-                        href={link.url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        <Image src={link.image} alt="icon-link" />
-                      </Link>
-                    </div>
-                  )
-                )}
+                {imageLinks?.map((link, index: number) => (
+                  <div
+                    key={index}
+                    className="image-link w-[147px]"
+                    {...link.fieldProps?.image}
+                  >
+                    <Link
+                      variant="unstyled"
+                      href={link.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <Image src={link.image} alt="icon-link" />
+                    </Link>
+                  </div>
+                ))}
               </div>
             )}
             {/* CTAs and Disclaimers */}
             {(cta || secondaryCta) && (
               <div className="flex w-full flex-col gap-4 xl:flex-row">
                 {cta && (
-                  <div className="primary-cta w-full xl:w-auto xl:shrink-0">
+                  <div
+                    className="primary-cta w-full xl:w-auto xl:shrink-0"
+                    {...fieldProps?.cta}
+                  >
                     <Button
                       {...cta}
                       // Block-level `enableAnimation` takes precedence:
@@ -134,11 +147,15 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                       renderCheckPlans={renderCheckPlans}
                       onModalButtonClick={onModalButtonClick}
                       onClick={(e: React.MouseEvent) => onClick?.(e, "primary")}
+                      fieldProps={cta.fieldProps}
                     />
                   </div>
                 )}
                 {secondaryCta && (
-                  <div className="secondary-cta w-full xl:w-auto xl:shrink-0">
+                  <div
+                    className="secondary-cta w-full xl:w-auto xl:shrink-0"
+                    {...fieldProps?.secondaryCta}
+                  >
                     <Button
                       {...secondaryCta}
                       // Block-level `enableAnimation` takes precedence:
@@ -158,6 +175,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                       onClick={(e: React.MouseEvent) =>
                         onClick?.(e, "secondary")
                       }
+                      fieldProps={secondaryCta.fieldProps}
                     />
                   </div>
                 )}
@@ -209,7 +227,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
 
       {disclaimer && (
         <div className="mt-10 flex justify-center xl:mt-18">
-          <div>{disclaimer}</div>
+          <div {...fieldProps?.disclaimer}>{disclaimer}</div>
         </div>
       )}
     </div>

package/src/contentful/blocks/image-promo-bar/types.ts

@@ -4,6 +4,7 @@ import {
   VideoAnalyticsHandler,
   VideoLinkProps,
 } from "@shared/components/video-link";
+import type { FieldProps } from "@shared/types/field-props";
 import { CheckPlansProps } from "@shared/types/micro-components";
 
 export type ImagePromoBarProps = {
@@ -22,7 +23,11 @@ export type ImagePromoBarProps = {
   openDescriptionLinksOnANewTab: boolean;
   checklist: string[];
   disclaimer: React.ReactNode;
-  imageLinks: { url: string; image: string }[];
+  imageLinks: {
+    url: string;
+    image: string;
+    fieldProps?: FieldProps<"image">;
+  }[];
   cta: any;
   secondaryCta: any;
   ctaDisclaimer: React.ReactNode;
@@ -34,4 +39,17 @@ export type ImagePromoBarProps = {
   onModalButtonClick?: (id?: string) => void;
   onClick?: (event: React.MouseEvent, source: "primary" | "secondary") => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+  /** Consumer-supplied DOM attributes for the rendered content fields. */
+  fieldProps?: FieldProps<
+    | "brow"
+    | "title"
+    | "subTitle"
+    | "description"
+    | "checklist"
+    | "ctaDisclaimer"
+    | "cta"
+    | "secondaryCta"
+    | "disclaimer"
+    | "imageLinks"
+  >;
 };

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

package/src/contentful/blocks/primary-hero/index.tsx

@@ -185,7 +185,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   {priceCents || priceSuffix ? (
                     <Text
                       as="p"
-                      className="subheading1 mt-0.5"
+                      className="label1 mt-0.5"
                       {...fieldProps?.priceSuffix}
                     >
                       {priceCents ? (

package/tailwind.config.cjs

@@ -483,7 +483,7 @@ module.exports = {
           "font-family": theme("fontFamily.sans"),
           "font-size": theme("fontSize.subheading5"),  // 3.75rem/60px
           "line-height": theme("lineHeight.15"),  // 3.75rem/60px
-          "font-weight": "500",
+          "font-weight": "700",
         },
         ".subheading6": {
           "font-family": theme("fontFamily.sans"),