@windstream/react-shared-components 0.2.80 → 0.2.82

package/dist/core.d.ts

@@ -423,7 +423,7 @@ type ButtonAsAnchor = ButtonCustomProps & Omit<AnchorHTMLAttributes<HTMLAnchorEl
 };
 type ButtonProps = ButtonAsButton | ButtonAsAnchor;
 
-declare const BrandButton: React__default.ForwardRefExoticComponent<ButtonProps$2 & React__default.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+declare const BrandButton: React__default.ForwardRefExoticComponent<ButtonProps$2 & React__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 declare const Checklist: React__default.FC<ChecklistProps>;
 

package/dist/index.d.ts

@@ -67,7 +67,7 @@ type InputFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
 
 declare const InputField: ForwardRefRenderFunction<HTMLInputElement, InputFieldProps>;
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    state?: "error" | "default" | "focus" | "active" | "hover" | "filled" | undefined;
+    state?: "default" | "error" | "focus" | "active" | "hover" | "filled" | undefined;
     size?: "medium" | "slim" | "large" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.80",
+  "version": "0.2.82",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/contentful/blocks/address-input-banner/index.test.tsx

@@ -14,6 +14,19 @@ describe("AddressInputBanner", () => {
     expect(screen.getByText("Check availability")).toBeInTheDocument();
   });
 
+  it("spreads title fieldProps onto the title element", () => {
+    render(
+      <AddressInputBanner
+        {...defaultProps}
+        fieldProps={{ title: { "data-contentful-field-id": "title" } }}
+      />
+    );
+    expect(screen.getByText("Check availability")).toHaveAttribute(
+      "data-contentful-field-id",
+      "title"
+    );
+  });
+
   it("returns null when isVisible is false", () => {
     const { container } = render(
       <AddressInputBanner {...defaultProps} isVisible={false} />

package/src/contentful/blocks/address-input-banner/index.tsx

@@ -19,6 +19,7 @@ export const AddressInputBanner: FC<AddressInputBannerProps> = props => {
     navHeight,
     isVisible,
     renderCheckPlans,
+    fieldProps,
   } = props;
 
   const style = variantStyles[variant?.toLowerCase()] || variantStyles.yellow;
@@ -43,7 +44,10 @@ export const AddressInputBanner: FC<AddressInputBannerProps> = props => {
         "flex flex-col items-center justify-center gap-3 p-[10px] lg:flex-row lg:gap-8 lg:px-6 lg:py-[10px]"
       )}
     >
-      <Text className="label3 w-full text-center md:label1 lg:w-auto lg:text-left">
+      <Text
+        className="label3 w-full text-center md:label1 lg:w-auto lg:text-left"
+        {...fieldProps?.title}
+      >
         {title}
       </Text>
       {renderedCheckPlans ? <div>{renderedCheckPlans}</div> : null}

package/src/contentful/blocks/address-input-banner/types.ts

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { ButtonProps } from "@shared/contentful/blocks/button/types";
+import type { FieldProps } from "@shared/types/field-props";
 import { CheckPlansProps } from "@shared/types/micro-components";
 
 export interface AddressInputBannerProps {
@@ -11,4 +12,6 @@ export interface AddressInputBannerProps {
   navHeight?: number;
   isVisible?: boolean;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+  /** Extra DOM attribute props, spread onto the respective rendered elements. */
+  fieldProps?: FieldProps<"title">;
 }

package/src/contentful/blocks/anchored-bottom-banner/index.test.tsx

@@ -141,6 +141,17 @@ describe("AnchoredBottomBanner", () => {
     expect(container.querySelector(".text-white")).toBeInTheDocument();
   });
 
+  it("falls back to the accent background with dark text for an unmapped color", () => {
+    const { container } = render(
+      <AnchoredBottomBanner backgroundColor="orange" ctaButtonLabel="Test" />
+    );
+    expect(
+      container.querySelector(".bg-bg-fill-brand-accent")
+    ).toBeInTheDocument();
+    expect(container.querySelector(".text-text-primary")).toBeInTheDocument();
+    expect(container.querySelector(".text-white")).not.toBeInTheDocument();
+  });
+
   // Box shadow
   it("uses default shadow when boxShadow is not provided", () => {
     const { container } = render(<AnchoredBottomBanner />);
@@ -568,6 +579,30 @@ describe("AnchoredBottomBanner scheduledMessages", () => {
       container.querySelector(".bg-bg-fill-brand-accent")
     ).toBeInTheDocument();
   });
+
+  it("falls back to the accent background with dark text for an unmapped active-message color", () => {
+    const { container } = render(
+      <AnchoredBottomBanner
+        backgroundColor="navy"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            backgroundColor: "orange",
+            ctaButtonLabel: "Active message",
+          },
+        ]}
+      />
+    );
+    expect(
+      container.querySelector(".bg-bg-fill-brand-accent")
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(".bg-bg-fill-inverse")
+    ).not.toBeInTheDocument();
+    expect(container.querySelector(".text-text-primary")).toBeInTheDocument();
+    expect(container.querySelector(".text-white")).not.toBeInTheDocument();
+  });
 });
 
 describe("AnchoredBottomBanner scheduling timezone (America/New_York)", () => {

package/src/contentful/blocks/anchored-bottom-banner/index.tsx

@@ -147,9 +147,10 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
   countdownStartDateTime,
   countdownEndDateTime,
   scheduledMessages,
+  initialNowMs,
   onResolved,
 }) => {
-  const backGroundColorClasses = {
+  const backGroundColorClasses: Record<string, string> = {
     navy: "bg-bg-fill-inverse",
     green: "bg-bg-fill-success",
     blue: "bg-bg-fill-brand-info",
@@ -158,19 +159,27 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
     white: "bg-white",
   };
 
-  const [nowMs, setNowMs] = useState(() => Date.now());
+  // Seed from the server-provided timestamp so SSR and the first client render
+  // agree; the mount effect below reconciles to the live clock.
+  const [nowMs, setNowMs] = useState(() => initialNowMs ?? Date.now());
   const intervalRef = useRef<number | null>(null);
 
   const [hasMounted, setHasMounted] = useState(false);
-  useEffect(() => setHasMounted(true), []);
+  useEffect(() => {
+    setHasMounted(true);
+    // Reconcile the shared initial timestamp to the client's real time; any
+    // resulting boundary change is a normal post-hydration update, not a
+    // hydration mismatch.
+    setNowMs(Date.now());
+  }, []);
 
-  // The message active for "now" (display window + daysToShow) wins.
+  // The message active for "now" (display window + daysToShow) wins. Seeded from
+  // the shared initialNowMs so SSR and the first client render resolve the same
+  // message (background + content paint immediately, no post-hydration flip and
+  // no structural mismatch); the mount effect then reconciles to the live clock.
   const activeMessage = useMemo(
-    () =>
-      hasMounted
-        ? scheduledMessages?.find(message => isMessageActive(message, nowMs))
-        : undefined,
-    [scheduledMessages, nowMs, hasMounted]
+    () => scheduledMessages?.find(message => isMessageActive(message, nowMs)),
+    [scheduledMessages, nowMs]
   );
   const hasActiveMessage = activeMessage !== undefined;
 
@@ -311,13 +320,17 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
   const effectiveBackgroundColor = hasActiveMessage
     ? activeMessage?.backgroundColor
     : backgroundColor;
-  const bgClass = effectiveBackgroundColor
+  // Unmapped colors fall back to the light accent background, so the contrast
+  // decision follows the RESOLVED background (fallback = light) rather than the
+  // raw value, keeping CTA/icon text readable.
+  const mappedBgClass = effectiveBackgroundColor
     ? backGroundColorClasses[effectiveBackgroundColor]
-    : "bg-bg-fill-brand-accent";
+    : undefined;
+  const bgClass = mappedBgClass || "bg-bg-fill-brand-accent";
   const isLightBackground =
+    !mappedBgClass ||
     effectiveBackgroundColor === "yellow" ||
-    effectiveBackgroundColor === "white" ||
-    !effectiveBackgroundColor;
+    effectiveBackgroundColor === "white";
   const textColorClass = isLightBackground ? "text-text-primary" : "text-white";
 
   return (
@@ -348,12 +361,15 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
                   className={`${textColorClass} align-text-bottom`}
                 />
               )}
-              {hasMounted && countdown.shouldShow && (
-                <span className="inline-block whitespace-nowrap rounded-lg bg-white px-1 tabular-nums text-text">
+              {countdown.shouldShow && (
+                <span
+                  className="inline-block whitespace-nowrap rounded-lg bg-white px-1 tabular-nums text-text"
+                  suppressHydrationWarning={true}
+                >
                   {countdown.text}
                 </span>
               )}
-              {hasMounted && countdown.shouldShow ? " " : null}
+              {countdown.shouldShow ? " " : null}
               {effectiveCtaButtonLabel && effectiveCtaButtonLabel}{" "}
               {effectiveCtaSuffixText && (
                 <span className="ml-0.5">{effectiveCtaSuffixText}</span>

package/src/contentful/blocks/anchored-bottom-banner/types.ts

@@ -17,6 +17,18 @@ export type ScheduledMessageDay =
   | "FRI"
   | "SAT";
 
+// Known banner colors keep editor autocomplete, while `(string & {})` lets any
+// new color added in Contentful flow through without changing this type.
+export type AnchoredBannerBackgroundColor =
+  | "navy"
+  | "yellow"
+  | "green"
+  | "purple"
+  | "blue"
+  | "white"
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  | (string & {});
+
 export interface ScheduledMessage {
   // Stable id for analytics (Contentful entry id or title).
   id?: string;
@@ -41,7 +53,7 @@ export interface ScheduledMessage {
 
 export interface AnchoredBottomBannerProps {
   ctaSuffixText?: string;
-  backgroundColor?: "navy" | "yellow" | "green" | "purple" | "blue" | "white";
+  backgroundColor?: AnchoredBannerBackgroundColor;
   iconName?: string;
   boxShadow?: boolean;
   ctaButtonLabel?: string;
@@ -54,6 +66,11 @@ export interface AnchoredBottomBannerProps {
   // When a message is active for today, it drives the countdown + CTA content;
   // otherwise the banner falls back to its own top-level values above.
   scheduledMessages?: ScheduledMessage[];
+  // Server-generated timestamp (epoch ms) so SSR and the first client render
+  // resolve the same schedule/countdown state (no structural hydration
+  // mismatch). Reconciled to the live clock after mount. Falls back to
+  // Date.now() when omitted.
+  initialNowMs?: number;
   // Fires with the resolved result so consumers (analytics) know what showed.
   onResolved?: (result: {
     hasActiveMessage: boolean;

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

@@ -5,6 +5,10 @@ import { beforeEach, describe, expect, it, jest } from "@jest/globals";
 import "@testing-library/jest-dom/jest-globals";
 import { fireEvent, render, screen } from "@testing-library/react";
 
+// Keeps mocked DOM elements free of non-DOM props while still surfacing data-* attributes.
+const dataAttrs = (rest: Record<string, unknown>) =>
+  Object.fromEntries(Object.entries(rest).filter(([k]) => k.startsWith("data-")));
+
 jest.mock("@shared/components/brand-button", () => ({
   BrandButton: ({
     as,
@@ -37,6 +41,7 @@ jest.mock("@shared/components/brand-button", () => ({
         data-icon-fill={iconFill}
         className={buttonClassName}
         onClick={onClick}
+        {...dataAttrs(rest)}
       >
         {label} {text}
       </Tag>
@@ -45,9 +50,13 @@ jest.mock("@shared/components/brand-button", () => ({
 }));
 
 jest.mock("@shared/components/button", () => ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   Button: ({ onClick, className, children, ...rest }: any) => (
-    <button data-testid="core-button" className={className} onClick={onClick}>
+    <button
+      data-testid="core-button"
+      className={className}
+      onClick={onClick}
+      {...dataAttrs(rest)}
+    >
       {children}
     </button>
   ),
@@ -63,6 +72,7 @@ jest.mock("@shared/components/link", () => ({
     className,
     title,
     onClick,
+    ...rest
   }: any) => (
     <a
       data-testid="link"
@@ -71,6 +81,7 @@ jest.mock("@shared/components/link", () => ({
       className={className}
       title={title}
       onClick={onClick}
+      {...dataAttrs(rest)}
     >
       {children}
     </a>
@@ -97,6 +108,38 @@ describe("Button", () => {
     jest.clearAllMocks();
   });
 
+  describe("fieldProps", () => {
+    const fieldProps = {
+      "data-contentful-entry-id": "entry-1",
+      "data-contentful-field-id": "title",
+    };
+
+    it.each([
+      ["solid", "brand-button"],
+      ["text", "link"],
+      ["unstyled", "core-button"],
+    ] as const)("spreads fieldProps onto the %s variant", (variant, testId) => {
+      render(
+        <Button
+          buttonLabel="Go"
+          href="/page"
+          showButtonAs={variant}
+          fieldProps={fieldProps}
+        />
+      );
+      const el = screen.getByTestId(testId);
+      expect(el).toHaveAttribute("data-contentful-entry-id", "entry-1");
+      expect(el).toHaveAttribute("data-contentful-field-id", "title");
+    });
+
+    it("renders no tagging attributes when fieldProps is omitted", () => {
+      render(<Button buttonLabel="Go" href="/page" showButtonAs="text" />);
+      expect(screen.getByTestId("link")).not.toHaveAttribute(
+        "data-contentful-entry-id"
+      );
+    });
+  });
+
   describe("showButtonAs='solid' (default)", () => {
     it("renders BrandButton as anchor when href is provided", () => {
       render(<Button buttonLabel="Click" href="/page" />);

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

@@ -50,6 +50,7 @@ export const Button: React.FC<ButtonProps> = props => {
     preserveQueryParameters,
     disableAnimation,
     animationType = DEFAULT_BUTTON_ANIMATION_TYPE,
+    fieldProps,
     ...rest
   } = props;
 
@@ -143,7 +144,12 @@ export const Button: React.FC<ButtonProps> = props => {
       ? buildPreservedQueryHref(href, currentSearch)
       : href;
   let CTA = (
-    <CoreButton onClick={buttonClick} className={buttonClassName} {...rest} />
+    <CoreButton
+      onClick={buttonClick}
+      className={buttonClassName}
+      {...rest}
+      {...fieldProps}
+    />
   );
 
   switch (showButtonAs) {
@@ -166,6 +172,7 @@ export const Button: React.FC<ButtonProps> = props => {
           iconFill={iconFill}
           disableAnimation={disableAnimation}
           animationType={animationType}
+          {...fieldProps}
         />
       ) : (
         <BrandButton
@@ -183,6 +190,7 @@ export const Button: React.FC<ButtonProps> = props => {
           buttonClassName={brandButtonClassName}
           disableAnimation={disableAnimation}
           animationType={animationType}
+          {...fieldProps}
         />
       );
       break;
@@ -199,6 +207,7 @@ export const Button: React.FC<ButtonProps> = props => {
             linkClassName
           )}
           onClick={linkClick}
+          {...fieldProps}
         >
           {matIconName ? (
             <>
@@ -242,6 +251,7 @@ export const Button: React.FC<ButtonProps> = props => {
           iconFill={iconFill}
           disableAnimation={disableAnimation}
           animationType={animationType}
+          {...fieldProps}
         />
       ) : (
         <BrandButton
@@ -258,6 +268,7 @@ export const Button: React.FC<ButtonProps> = props => {
           iconFill={iconFill}
           disableAnimation={disableAnimation}
           animationType={animationType}
+          {...fieldProps}
         />
       );
       break;
@@ -287,6 +298,7 @@ export const Button: React.FC<ButtonProps> = props => {
             buttonClassName
           )}
           aria-label={buttonLabel}
+          {...fieldProps}
         >
           {isLeftIcon && matIconName ? (
             <MaterialIcon

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

@@ -45,4 +45,6 @@ export type ButtonProps = {
   iconSize?: Size;
   disableAnimation?: boolean;
   animationType?: AnimationType | AnimationType[];
+  /** Extra DOM attribute props, spread onto the rendered link/button element. */
+  fieldProps?: Record<string, unknown>;
 };

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

@@ -12,8 +12,15 @@ jest.mock("@shared/components/divider", () => ({
 }));
 
 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}
+      {...Object.fromEntries(
+        Object.entries(rest).filter(([k]) => k.startsWith("data-"))
+      )}
+    >
+      {children}
+    </Tag>
   ),
 }));
 
@@ -74,6 +81,62 @@ const defaultProps: FooterProps = {
 };
 
 describe("Footer", () => {
+  describe("fieldProps", () => {
+    const tag = (field: string) => ({
+      "data-contentful-field-id": field,
+    });
+
+    it("spreads body, terms and copyrights fieldProps onto their elements", () => {
+      const { container } = render(
+        <Footer
+          {...defaultProps}
+          fieldProps={{
+            body: tag("body"),
+            terms: tag("termsText"),
+            copyrights: tag("copyrightText"),
+          }}
+        />
+      );
+      expect(
+        screen.getByLabelText("Promotions and disclaimers")
+      ).toHaveAttribute("data-contentful-field-id", "body");
+      expect(container.querySelector(".terms-text")).toHaveAttribute(
+        "data-contentful-field-id",
+        "termsText"
+      );
+      expect(container.querySelector(".copy-rights")).toHaveAttribute(
+        "data-contentful-field-id",
+        "copyrightText"
+      );
+    });
+
+    it("spreads a link group's title fieldProps onto the group title", () => {
+      render(
+        <Footer
+          {...defaultProps}
+          links={[
+            { ...mockLinks[0], fieldProps: { title: tag("title") } },
+            mockLinks[1],
+          ]}
+        />
+      );
+      expect(screen.getByText("Products")).toHaveAttribute(
+        "data-contentful-field-id",
+        "title"
+      );
+      expect(screen.getByText("Support")).not.toHaveAttribute(
+        "data-contentful-field-id"
+      );
+    });
+
+    it("renders no tagging attributes when fieldProps is omitted", () => {
+      const { container } = render(<Footer {...defaultProps} />);
+      expect(
+        container.querySelector("[data-contentful-field-id]")
+      ).toBeNull();
+    });
+  });
+
   describe("Rendering", () => {
     it("renders with all props", () => {
       render(<Footer {...defaultProps} />);

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

@@ -13,6 +13,7 @@ export const Footer: React.FC<FooterProps> = ({
   terms,
   maxWidth = true,
   onClick,
+  fieldProps,
 }) => {
   function footerClick(
     event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
@@ -23,7 +24,11 @@ export const Footer: React.FC<FooterProps> = ({
   return (
     <div className="component-container bg-bg-inverse text-white">
       <div className={` ${maxWidth ? "mx-auto max-w-120" : ""} px-5 py-8`}>
-        <aside className="break-words" aria-label="Promotions and disclaimers">
+        <aside
+          className="break-words"
+          aria-label="Promotions and disclaimers"
+          {...fieldProps?.body}
+        >
           {body}
         </aside>
         <Divider className="my-8 border-border-inverse lg:my-16" />
@@ -36,7 +41,7 @@ export const Footer: React.FC<FooterProps> = ({
                   className="site-links-group"
                   key={`link-group-${index}`}
                 >
-                  <Text as="div" className="label3">
+                  <Text as="div" className="label3" {...link?.fieldProps?.title}>
                     {link?.title}
                   </Text>
                   <ul className="flex flex-col">
@@ -61,10 +66,15 @@ export const Footer: React.FC<FooterProps> = ({
         <div className="py-8">
           <Divider className="my-8 hidden border-border-inverse md:my-8 md:block" />
 
-          <p className="terms-text footnote text-white">
+          <p className="terms-text footnote text-white" {...fieldProps?.terms}>
             &copy; {new Date().getFullYear()} {terms}
           </p>
-          <div className="copy-rights whitespace-pre-line">{copyrights}</div>
+          <div
+            className="copy-rights whitespace-pre-line"
+            {...fieldProps?.copyrights}
+          >
+            {copyrights}
+          </div>
           <nav aria-label="Footer legal">
             <ul className="bottom-links list-none">
               {bottomLinks?.map((link: any, index: number) => (

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

@@ -1,5 +1,7 @@
 import React from "react";
 
+import type { FieldProps } from "@shared/types/field-props";
+
 export type FooterProps = {
   body: React.ReactNode;
   links?: Array<any>;
@@ -10,4 +12,6 @@ export type FooterProps = {
   onClick?: (
     event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
   ) => void;
+  /** Extra DOM attribute props, spread onto the respective rendered elements. */
+  fieldProps?: FieldProps<"body" | "terms" | "copyrights">;
 };

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

@@ -12,8 +12,15 @@ jest.mock("@shared/components/material-icon", () => ({
 }));
 
 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}
+      {...Object.fromEntries(
+        Object.entries(rest).filter(([k]) => k.startsWith("data-"))
+      )}
+    >
+      {children}
+    </Tag>
   ),
 }));
 
@@ -50,6 +57,23 @@ jest.mock("@shared/utils", () => ({
 }));
 
 describe("DesktopLinkGroups", () => {
+  it("spreads the group's title fieldProps onto the title element", () => {
+    render(
+      <DesktopLinkGroups
+        anchorName="test"
+        link={{
+          title: "Shop",
+          items: { items: [] },
+          fieldProps: { title: { "data-contentful-field-id": "title" } },
+        }}
+      />
+    );
+    expect(screen.getByText("Shop")).toHaveAttribute(
+      "data-contentful-field-id",
+      "title"
+    );
+  });
+
   it("renders nothing when link is undefined", () => {
     const { container } = render(
       <DesktopLinkGroups anchorName="test" link={undefined} />

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

@@ -5,12 +5,14 @@ import { Text } from "@shared/components/text";
 import { Button } from "@shared/contentful/blocks/button";
 import { ButtonProps as ContentfulButtonProps } from "@shared/contentful/blocks/button/types";
 import { useOutsideClick } from "@shared/hooks/use-outside-click";
+import type { FieldProps } from "@shared/types/field-props";
 import { cx } from "@shared/utils";
 
 type ComponentButtonGroup = {
   anchorId?: string | null;
   title?: string | null;
   items?: { items?: ContentfulButtonProps[] | null } | null;
+  fieldProps?: FieldProps<"title">;
 };
 
 type Link = ContentfulButtonProps | ComponentButtonGroup;
@@ -61,7 +63,7 @@ export const DesktopLinkGroups: React.FC<LinkGroupsProps> = ({
   }
 
   // Group
-  const { anchorId, title, items } = link;
+  const { anchorId, title, items, fieldProps } = link;
   const subMenu = Array.isArray(items?.items) ? items!.items! : [];
   const fullAnchorName = `--link-anchor-${anchorName}`;
 
@@ -81,7 +83,11 @@ export const DesktopLinkGroups: React.FC<LinkGroupsProps> = ({
         key={anchorId}
         showButtonAs="unstyled"
       >
-        <Text as="span" className="group-hover:underline">
+        <Text
+          as="span"
+          className="group-hover:underline"
+          {...fieldProps?.title}
+        >
           {title ?? null}
         </Text>
         <MaterialIcon