@windstream/react-shared-components 0.2.79 → 0.2.81

package/dist/core.d.ts

@@ -71,7 +71,7 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
     size?: "slim" | "medium" | "large" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
-    prefixIconName?: "search" | "location_on" | undefined;
+    prefixIconName?: "location_on" | "search" | undefined;
     prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;

package/dist/index.d.ts

@@ -71,7 +71,7 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
     size?: "slim" | "medium" | "large" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
-    prefixIconName?: "search" | "location_on" | undefined;
+    prefixIconName?: "location_on" | "search" | undefined;
     prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.79",
+  "version": "0.2.81",
   "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/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/cards/product-card/index.tsx

@@ -56,6 +56,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
   hasAnyGift = false,
   twoColumn = false,
   enableBusinessSettings = false,
+  fieldProps,
 }) => {
   const [internalExpanded, setInternalExpanded] = useState(false);
   // Use parent state if provided, otherwise use internal state
@@ -86,7 +87,10 @@ export const ProductCard: React.FC<ProductCardProps> = ({
       {/* Best Value Banner. Non-best cards render an invisible banner of the
           same height when a sibling has one, so content stays aligned. */}
       {bestValue ? (
-        <div className="label3 rounded-t-[20px] bg-bg-fill-brand-accent px-6 py-2 text-center text-text">
+        <div
+          {...fieldProps?.bestValueText}
+          className="label3 rounded-t-[20px] bg-bg-fill-brand-accent px-6 py-2 text-center text-text"
+        >
           {bestValueText}
         </div>
       ) : hasAnyBadge ? (
@@ -116,6 +120,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
           <div className="flex w-full flex-col md:w-auto">
             <Text
               as="h3"
+              {...fieldProps?.planName}
               className={cx(
                 planNameClass,
                 "whitespace-normal",
@@ -127,13 +132,13 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               {planSubtext ? (
                 <>
                   <br />
-                  {planSubtext}
+                  <span {...fieldProps?.planSubtext}>{planSubtext}</span>
                 </>
               ) : null}
             </Text>
           </div>
           <div className="flex flex-col items-start md:items-end">
-            <div className="flex items-start">
+            <div className="flex items-start" {...fieldProps?.price}>
               <Text
                 as="span"
                 className={cx(
@@ -167,6 +172,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
             {priceSuffixBottom ? (
               <Text
                 as="span"
+                {...fieldProps?.priceSuffixBottom}
                 className={cx(
                   "micro text-nowrap",
                   isDark ? "text-text-inverse" : "text-text"
@@ -181,6 +187,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
         {/* Description */}
         <section data-pc-description={true}>
           <Text
+            {...fieldProps?.description}
             className={cx(
               twoColumn ? "footnote md:body2" : "body2",
               "md:h-[56px]",
@@ -268,6 +275,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               >
                 <Text
                   as="h4"
+                  {...fieldProps?.featuresTitle}
                   className={cx(
                     "label3",
                     isDark ? "text-text-inverse" : "text-text"

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

@@ -2,6 +2,7 @@ import React, { ReactNode } from "react";
 
 import { ButtonProps } from "@shared/contentful/blocks/button/types";
 import { CheckPlansProps } from "@shared/types/micro-components";
+import type { FieldProps } from "@shared/types/field-props";
 
 export interface ProductCardProps {
   planName: string;
@@ -37,4 +38,14 @@ export interface ProductCardProps {
    *  sizes at every breakpoint. */
   twoColumn?: boolean;
   enableBusinessSettings?: boolean;
+  /** Extra DOM attribute props, spread onto the respective rendered elements. */
+  fieldProps?: FieldProps<
+    | "planName"
+    | "planSubtext"
+    | "price"
+    | "priceSuffixBottom"
+    | "description"
+    | "bestValueText"
+    | "featuresTitle"
+  >;
 }

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

@@ -438,6 +438,7 @@ function ProductCardPanel({
           theme={item?.highlighted ? "dark" : "light"}
           bestValue={bestValue}
           bestValueText={item?.topBadgeText || "best value"}
+          fieldProps={item?.fieldProps}
           featuresTitle={item?.benefitsTitle}
           features={features}
           isExpanded={isExpanded}

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

@@ -25,6 +25,7 @@ export const Carousel: React.FC<CarouselProps> = ({
   productCardsRef,
   onProductCardCtaClick,
   enableBusinessSettings = false,
+  fieldProps,
 }) => {
   const baseClass = hasProductCards
     ? "px-3 py-9 md:py-20"
@@ -38,11 +39,16 @@ export const Carousel: React.FC<CarouselProps> = ({
           <Text
             as="h2"
             className="heading2 text-text md:heading1 md:text-center"
+            {...fieldProps?.title}
           >
             {fields?.title}
           </Text>
           {fields?.subTitle && (
-            <Text as="h3" className="body1 px-4 pt-4 md:text-center">
+            <Text
+              as="h3"
+              className="body1 px-4 pt-4 md:text-center"
+              {...fieldProps?.subTitle}
+            >
               {fields?.subTitle}
             </Text>
           )}
@@ -85,6 +91,7 @@ export const Carousel: React.FC<CarouselProps> = ({
         <Text
           as="div"
           className="body3 mt-8 px-4 text-center text-text-secondary"
+          {...fieldProps?.disclaimerText}
         >
           {disclaimerText}
         </Text>

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

@@ -1,6 +1,7 @@
 import React, { ReactNode } from "react";
 
 import { CheckPlansProps } from "@shared/types/micro-components";
+import type { FieldProps } from "@shared/types/field-props";
 
 export interface carouselFieldsInterface {
   __typename: "ComponentCarousel";
@@ -85,6 +86,18 @@ export interface ProductCardFields {
     url: string;
     [key: string]: any;
   };
+  /** Pre-computed per-field Inspector Mode / Live Preview DOM attributes for
+   *  this item, supplied by the consumer and passed through to the rendered
+   *  ProductCard unchanged. The library itself stays CMS-agnostic. */
+  fieldProps?: FieldProps<
+    | "planName"
+    | "planSubtext"
+    | "price"
+    | "priceSuffixBottom"
+    | "description"
+    | "bestValueText"
+    | "featuresTitle"
+  >;
 }
 
 export interface CardFields {
@@ -148,6 +161,8 @@ export type CarouselProps = {
     event: React.MouseEvent<HTMLElement>
   ) => void;
   enableBusinessSettings?: boolean;
+  /** Extra DOM attribute props, spread onto the respective rendered elements. */
+  fieldProps?: FieldProps<"title" | "subTitle" | "disclaimerText">;
 };
 
 export interface TabSwitchProps {

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