@windstream/react-shared-components 0.2.80 → 0.2.82

package/src/contentful/blocks/navigation/index.test.tsx

@@ -84,9 +84,16 @@ jest.mock("@shared/components/material-icon", () => ({
 }));
 
 jest.mock("@shared/components/next-image", () => ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   NextImage: ({ src, alt, onClick, ...rest }: any) => (
-    <img data-testid="next-image" src={src} alt={alt} onClick={onClick} />
+    <img
+      data-testid="next-image"
+      src={src}
+      alt={alt}
+      onClick={onClick}
+      {...Object.fromEntries(
+        Object.entries(rest).filter(([k]) => k.startsWith("data-"))
+      )}
+    />
   ),
 }));
 
@@ -149,6 +156,37 @@ const mobileMenuProps: NavigationProps = {
 describe("Navigation", () => {
   beforeEach(() => jest.clearAllMocks());
 
+  describe("fieldProps", () => {
+    const tag = (field: string) => ({ "data-contentful-field-id": field });
+
+    it("spreads logo fieldProps onto the desktop and mobile logo links", () => {
+      const { container } = render(
+        <Navigation {...defaultProps} fieldProps={{ logo: tag("logo") }} />
+      );
+      const tagged = container.querySelectorAll(
+        'a[data-contentful-field-id="logo"]'
+      );
+      expect(tagged).toHaveLength(2);
+    });
+
+    it("spreads searchBarIcon fieldProps onto the desktop search icon", () => {
+      const { container } = render(
+        <Navigation
+          {...defaultProps}
+          fieldProps={{ searchBarIcon: tag("searchBarIcon") }}
+        />
+      );
+      expect(
+        container.querySelector('img[data-contentful-field-id="searchBarIcon"]')
+      ).not.toBeNull();
+    });
+
+    it("renders no tagging attributes when fieldProps is omitted", () => {
+      const { container } = render(<Navigation {...defaultProps} />);
+      expect(container.querySelector("[data-contentful-field-id]")).toBeNull();
+    });
+  });
+
   describe("enableHamburgerNavigationOnDesktop (desktop hamburger A/B variant)", () => {
     it("keeps current behavior when the flag is off", () => {
       const { container } = render(<Navigation {...defaultProps} />);

package/src/contentful/blocks/navigation/index.tsx

@@ -46,6 +46,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
     callNowCtaIcon,
     navigationBackgroundColor,
     navigationLinkColor,
+    fieldProps,
   } = props;
 
   const logoUrl =
@@ -94,6 +95,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
           width={24}
           height={24}
           className="mr-2 self-center rounded-full"
+          {...fieldProps?.callNowCtaIcon}
         />
       ) : null}
       <Text as="span" className="text-secondary-navy500 footnote">
@@ -159,7 +161,18 @@ export const Navigation: React.FC<NavigationProps> = props => {
                   <CallButton
                     className="border-none"
                     href={invocaPhoneNumberLink}
-                    prefix={callNowCtaText}
+                    prefix={
+                      callNowCtaText ? (
+                        <span
+                          className="text-sm font-normal text-text"
+                          {...fieldProps?.callNowCtaText}
+                        >
+                          {callNowCtaText}
+                        </span>
+                      ) : (
+                        callNowCtaText
+                      )
+                    }
                     onClick={onCallClickDesktop}
                   >
                     <Text className="body3 text-text">
@@ -210,7 +223,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
           >
             <div>
               {logoUrl ? (
-                <Link href="/" className="flex">
+                <Link href="/" className="flex" {...fieldProps?.logo}>
                   <NextImage
                     src={logoUrl}
                     alt="Kinetic business logo"
@@ -265,7 +278,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
             <div className="mx-auto flex h-14 max-w-120 items-center justify-between">
               <div className="flex h-full">
                 {logoUrl ? (
-                  <Link href="/" className="flex">
+                  <Link href="/" className="flex" {...fieldProps?.logo}>
                     <NextImage
                       src={logoUrl}
                       alt="Kinetic business logo"
@@ -302,6 +315,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
                         : searchBarIcon?.url || ""
                     }
                     onSearch={onSearch}
+                    iconFieldProps={fieldProps?.searchBarIcon}
                   />
                 ) : null}
                 {supportNavigationLinks?.map((links, index) => {
@@ -448,6 +462,7 @@ const MobileMenu = (props: NavigationProps) => {
                   : props.searchBarIcon?.url || ""
               }
               onSearch={props.onSearch || (() => {})}
+              iconFieldProps={props.fieldProps?.searchBarIcon}
             />
           ) : null}
           <div
@@ -510,8 +525,10 @@ const MobileSearchInput = (props: {
   onSearch: (query: string) => void;
   isMenuOpen: boolean;
   searchBarIconURL: string;
+  iconFieldProps?: Record<string, unknown>;
 }) => {
-  const { closeMenu, onSearch, isMenuOpen, searchBarIconURL } = props;
+  const { closeMenu, onSearch, isMenuOpen, searchBarIconURL, iconFieldProps } =
+    props;
   const [searchValue, setSearchValue] = React.useState("");
   const searchInputRef = React.useRef<HTMLInputElement>(null);
 
@@ -541,6 +558,7 @@ const MobileSearchInput = (props: {
         alt="Search icon"
         role="button"
         onClick={redirectToSearchResults}
+        {...iconFieldProps}
       />
       <div className="flex-grow">
         <Input
@@ -561,8 +579,9 @@ const MobileSearchInput = (props: {
 const DesktopSearchInput = (props: {
   searchBarIconURL: string;
   onSearch: (query: string) => void;
+  iconFieldProps?: Record<string, unknown>;
 }) => {
-  const { searchBarIconURL, onSearch } = props;
+  const { searchBarIconURL, onSearch, iconFieldProps } = props;
   const [searchValue, setSearchValue] = React.useState("");
   const searchInputRef = React.useRef<HTMLInputElement>(null);
 
@@ -585,6 +604,7 @@ const DesktopSearchInput = (props: {
         alt="Search icon"
         role="button"
         onClick={redirectToSearchResults}
+        {...iconFieldProps}
       />
       {/* Input */}
       <Input

package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.test.tsx

@@ -28,6 +28,7 @@ jest.mock("@shared/contentful/blocks/button", () => ({
       className={buttonClassName || linkClassName}
       onClick={onClick}
       aria-expanded={rest["aria-expanded"]}
+      data-field-props={JSON.stringify(rest.fieldProps ?? null)}
     >
       {children || rest.buttonLabel}
     </button>
@@ -35,6 +36,19 @@ jest.mock("@shared/contentful/blocks/button", () => ({
 }));
 
 describe("MobileLinkGroups", () => {
+  it("passes the group's title fieldProps to the toggle button", () => {
+    const link = {
+      title: "Shop",
+      items: { items: [] },
+      fieldProps: { title: { "data-contentful-field-id": "title" } },
+    };
+    render(<MobileLinkGroups link={link as any} />);
+    expect(screen.getByTestId("button")).toHaveAttribute(
+      "data-field-props",
+      JSON.stringify({ "data-contentful-field-id": "title" })
+    );
+  });
+
   it("renders nothing when link is undefined", () => {
     const { container } = render(<MobileLinkGroups link={undefined} />);
     expect(container.innerHTML).toBe("");

package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx

@@ -3,11 +3,13 @@ import React from "react";
 import { MaterialIcon } from "@shared/components/material-icon";
 import { Button } from "@shared/contentful/blocks/button";
 import { ButtonProps as ContentfulButtonProps } from "@shared/contentful/blocks/button/types";
+import type { FieldProps } from "@shared/types/field-props";
 
 type ComponentButtonGroup = {
   anchorId?: string | null;
   title?: string | null;
   items?: { items?: ContentfulButtonProps[] | null } | null;
+  fieldProps?: FieldProps<"title">;
 };
 
 type Link = ContentfulButtonProps | ComponentButtonGroup;
@@ -38,7 +40,7 @@ export const MobileLinkGroups: React.FC<LinkGroupsProps> = ({ link }) => {
   }
 
   // Group
-  const { anchorId, title, items } = link;
+  const { anchorId, title, items, fieldProps } = link;
   const subMenu = Array.isArray(items?.items) ? items!.items! : [];
 
   return (
@@ -49,6 +51,7 @@ export const MobileLinkGroups: React.FC<LinkGroupsProps> = ({ link }) => {
         buttonClassName=" label3 flex items-center w-full h-11 px-4"
         key={anchorId}
         showButtonAs="unstyled"
+        fieldProps={fieldProps?.title}
       >
         {title ?? null}
         <MaterialIcon

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

@@ -1,5 +1,6 @@
 import React from "react";
 
+import type { FieldProps } from "@shared/types/field-props";
 import { Asset, Button, ButtonGroup } from "@shared/types/micro-components";
 
 type Color = string;
@@ -69,6 +70,10 @@ export interface Navigation {
   /** When true, renders the mobile hamburger navigation in the desktop
    *  viewport and hides the inline desktop nav. Defaults to false. */
   enableHamburgerNavigationOnDesktop?: boolean;
+  /** Extra DOM attribute props, spread onto the respective rendered elements. */
+  fieldProps?: FieldProps<
+    "logo" | "searchBarIcon" | "callNowCtaText" | "callNowCtaIcon"
+  >;
 }
 
 export type NavigationProps = Navigation;

package/src/types/micro-components.ts

@@ -1,3 +1,5 @@
+import type { FieldProps } from "./field-props";
+
 import { ButtonProps } from "@shared/contentful";
 
 export interface Asset {
@@ -29,6 +31,8 @@ export interface Button {
   clickToOpen?: "accordion" | "modal" | "tab" | null;
   tabmodalNameToOpen?: string | null;
   preDefinedFunctionExecution?: "check availability" | null;
+  /** Extra DOM attribute props, spread onto the rendered link/button element. */
+  fieldProps?: Record<string, unknown>;
 }
 
 export interface ButtonGroup {
@@ -38,6 +42,8 @@ export interface ButtonGroup {
   itemsCollection?: {
     items: Button[];
   };
+  /** Extra DOM attribute props, spread onto the group's title element. */
+  fieldProps?: FieldProps<"title">;
 }
 export interface Card {
   anchorId?: string;