@windstream/react-shared-components 0.2.92 → 0.2.94

package/src/contentful/blocks/iframe-embed/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef } from "react";
-import { IframeEmbedProps, bgColorMap } from "./types";
+import { bgColorMap, IframeEmbedProps } from "./types";
 
 /**
  * IframeEmbed — A generic, responsive iframe component for embedding third-party content
@@ -30,6 +30,7 @@ export const IframeEmbed: React.FC<IframeEmbedProps> = ({
   anchorId,
   backgroundColor,
   height,
+  fieldProps,
 }) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
@@ -56,7 +57,7 @@ export const IframeEmbed: React.FC<IframeEmbedProps> = ({
   if (!iframeUrl) return null;
 
   return (
-    <section id={anchorId} className="w-full">
+    <section id={anchorId} className="w-full" {...fieldProps?.iframeUrl}>
       <iframe
         ref={iframeRef}
         src={iframeUrl}

package/src/contentful/blocks/iframe-embed/types.ts

@@ -15,4 +15,5 @@ export type IframeEmbedProps = {
   backgroundColor?: BackgroundColor;
   /** Optional initial/minimum height (in px) for the iframe before postMessage auto-resize kicks in. */
   height?: number;
+  fieldProps?: { iframeUrl?: Record<string, unknown> };
 };

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/ordered-list/index.test.tsx

@@ -6,16 +6,24 @@ import { OrderedList } from "./index";
 import { render, screen, within } from "@testing-library/react";
 
 jest.mock("@shared/components/link", () => ({
-  Link: ({ children, href, title, className }: any) => (
-    <a href={href} title={title} className={className} data-testid="ol-link">
+  Link: ({ children, href, title, className, ...rest }: any) => (
+    <a
+      href={href}
+      title={title}
+      className={className}
+      data-testid="ol-link"
+      {...rest}
+    >
       {children}
     </a>
   ),
 }));
 
 jest.mock("@shared/components/text", () => ({
-  Text: ({ children, as: Tag = "span", className }: any) => (
-    <Tag className={className}>{children}</Tag>
+  Text: ({ children, as: Tag = "span", className, ...rest }: any) => (
+    <Tag className={className} {...rest}>
+      {children}
+    </Tag>
   ),
 }));
 
@@ -83,6 +91,48 @@ describe("OrderedList", () => {
     expect(screen.getByText("Find availability near you")).toBeInTheDocument();
   });
 
+  it("tags headings and child names and links independently", () => {
+    renderComponent({
+      fieldProps: {
+        title: { "data-contentful-field-id": "title" },
+        description: { "data-contentful-field-id": "description" },
+      },
+      tabs: [
+        {
+          items: {
+            tabName: "Cities",
+            tabContent: [
+              {
+                itemName: "new york",
+                itemSlug: "/ny",
+                fieldProps: {
+                  itemName: { "data-contentful-field-id": "cityName" },
+                  itemSlug: { "data-contentful-field-id": "slug" },
+                },
+              },
+            ],
+          },
+        },
+      ],
+    });
+    expect(screen.getByText("Browse locations")).toHaveAttribute(
+      "data-contentful-field-id",
+      "title"
+    );
+    expect(screen.getByText("Find availability near you")).toHaveAttribute(
+      "data-contentful-field-id",
+      "description"
+    );
+    expect(screen.getByText("New York")).toHaveAttribute(
+      "data-contentful-field-id",
+      "cityName"
+    );
+    expect(screen.getByTestId("ol-link")).toHaveAttribute(
+      "data-contentful-field-id",
+      "slug"
+    );
+  });
+
   it("renders the section with the provided anchor id and testid", () => {
     const { container } = renderComponent({ anchorId: "locations" });
     const section = container.querySelector(

package/src/contentful/blocks/ordered-list/index.tsx

@@ -13,6 +13,7 @@ export const OrderedList = ({
   title,
   description,
   tabs,
+  fieldProps,
 }: OrderedListProps) => {
   const formatItemName = (name: string) =>
     name
@@ -31,6 +32,7 @@ export const OrderedList = ({
         <Text
           key={`ordered-item-${index}`}
           className="body1 relative text-left font-semibold leading-7"
+          {...item.fieldProps?.itemName}
         >
           {formatItemName(item.itemName)}
         </Text>
@@ -41,10 +43,14 @@ export const OrderedList = ({
       <Link
         key={`ordered-item-${index}`}
         href={item.itemSlug}
+        {...item.fieldProps?.itemSlug}
         title={item.itemName.toUpperCase()}
         className="flex items-center underline underline-offset-4"
       >
-        <Text className="body1 relative cursor-pointer text-left font-semibold leading-7">
+        <Text
+          className="body1 relative cursor-pointer text-left font-semibold leading-7"
+          {...item.fieldProps?.itemName}
+        >
           {formatItemName(item.itemName)}
         </Text>
       </Link>
@@ -56,6 +62,7 @@ export const OrderedList = ({
   const dynamicTabs = {
     items: tabs.map((tab, index) => ({
       tabName: tab.items.tabName,
+      fieldProps: tab.items.fieldProps,
       anchorId: `tab-${index}`,
       tabContent: tab.items.tabContent.map(renderChild),
     })),
@@ -69,12 +76,17 @@ export const OrderedList = ({
     >
       <div className="mx-auto w-full max-w-120 px-0 py-12 md:px-6 md:py-20 lg:px-3">
         <div className="mb-11 px-4 md:px-0">
-          <Text as={"h2"} className="heading2 text-center md:heading1">
+          <Text
+            as={"h2"}
+            className="heading2 text-center md:heading1"
+            {...fieldProps?.title}
+          >
             {title}
           </Text>
           <Text
             as={"h3"}
             className="subheading3 mt-2 text-center md:subheading1"
+            {...fieldProps?.description}
           >
             {description}
           </Text>

package/src/contentful/blocks/ordered-list/types.ts

@@ -1,9 +1,22 @@
 import { ReactNode } from "react";
 
+import type { FieldProps } from "@shared/types/field-props";
+
 export interface OrderedListProps {
   anchorId?: string;
   backgroundColor?: "white" | "cream";
   title: ReactNode;
   description: ReactNode;
-  tabs: any[];
-}
+  fieldProps?: FieldProps<"title" | "description">;
+  tabs: {
+    items: {
+      tabName: string;
+      fieldProps?: FieldProps<"tabName">;
+      tabContent: {
+        itemName: string;
+        itemSlug?: string;
+        fieldProps?: FieldProps<"itemName" | "itemSlug">;
+      }[];
+    };
+  }[];
+}

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

@@ -324,7 +324,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                       "check availability" && (
                       <Text
                         as="span"
-                        className="body2 mr-1"
+                        className="body3 mr-1"
                         {...fieldProps?.secondaryCtaPrefix}
                       >
                         {secondaryCtaPrefix}
@@ -333,7 +333,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   {secondaryCta && (
                     <Button
                       {...secondaryCta}
-                      linkClassName={`body2 ${textColorClass}`}
+                      linkClassName={`body3 ${textColorClass}`}
                       renderCheckPlans={renderCheckPlans}
                       onModalButtonClick={onModalButtonClick}
                     />
@@ -346,7 +346,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                 <div className="hidden lg:block">
                   <Button
                     {...bottomLink}
-                    linkClassName={`text-footnote ${textColorClass}`}
+                    linkClassName={`body3 ${textColorClass}`}
                     renderCheckPlans={renderCheckPlans}
                     onModalButtonClick={onModalButtonClick}
                   />
@@ -423,7 +423,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                 !secondaryCta?.preDefinedFunctionExecution && (
                   <Text
                     as="span"
-                    className="body2 mr-1"
+                    className="body3 mr-1"
                     {...fieldProps?.secondaryCtaPrefix}
                   >
                     {secondaryCtaPrefix}
@@ -434,7 +434,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   {...secondaryCta}
                   renderCheckPlans={renderCheckPlans}
                   onModalButtonClick={onModalButtonClick}
-                  linkClassName={`${textColorClass}`}
+                  linkClassName={`body3 ${textColorClass}`}
                 />
               )}
             </div>

package/src/contentful/blocks/search-block/index.test.tsx

@@ -43,8 +43,10 @@ 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} {...rest}>
+      {children}
+    </Tag>
   ),
 }));
 
@@ -59,6 +61,38 @@ const defaultProps: SearchBlockProps = {
 };
 
 describe("SearchBlock", () => {
+  it("tags each authored field on its own element", () => {
+    const tag = (field: string) => ({ "data-contentful-field-id": field });
+    const { container } = render(
+      <SearchBlock
+        {...defaultProps}
+        subTitle="Subtitle"
+        searchDescription="Description"
+        caption={<p>Caption</p>}
+        basicCaption={<p>Basic</p>}
+        fieldProps={{
+          title: tag("title"),
+          subTitle: tag("subTitle"),
+          searchDescription: tag("description"),
+          searchInputPlaceholder: tag("searchInputPlaceholder"),
+          caption: tag("caption"),
+          basicCaption: tag("basicCaption"),
+        }}
+      />
+    );
+    for (const field of [
+      "title",
+      "subTitle",
+      "description",
+      "searchInputPlaceholder",
+      "caption",
+      "basicCaption",
+    ]) {
+      expect(
+        container.querySelector(`[data-contentful-field-id="${field}"]`)
+      ).not.toBeNull();
+    }
+  });
   describe("Rendering", () => {
     it("renders with data-testid", () => {
       render(<SearchBlock {...defaultProps} />);

package/src/contentful/blocks/search-block/index.tsx

@@ -20,6 +20,7 @@ export const SearchBlock: React.FC<SearchBlockProps> = props => {
     backgroundColor,
     color,
     onSubmit,
+    fieldProps,
   } = props;
   const [searchText, setSearchText] = useState("");
   const themeColorClasses = {
@@ -45,17 +46,27 @@ export const SearchBlock: React.FC<SearchBlockProps> = props => {
             <Text
               as={enableHeading ? "h1" : "h2"}
               className={cx("heading2 md:heading1")}
+              {...fieldProps?.title}
             >
               {title}
             </Text>
             {subTitle && (
-              <Text as="div" className={cx("subheading2 mt-2 md:subheading1")}>
+              <Text
+                as="div"
+                className={cx("subheading2 mt-2 md:subheading1")}
+                {...fieldProps?.subTitle}
+              >
                 {subTitle}
               </Text>
             )}
           </div>
           {searchDescription ? (
-            <Text className={`heading6 text-center`}>{searchDescription}</Text>
+            <Text
+              className={`heading6 text-center`}
+              {...fieldProps?.searchDescription}
+            >
+              {searchDescription}
+            </Text>
           ) : null}
 
           <span className="w-full">
@@ -73,14 +84,23 @@ export const SearchBlock: React.FC<SearchBlockProps> = props => {
                     target: { value: React.SetStateAction<string> };
                   }) => setSearchText(e.target.value)}
                   placeholder={searchInputPlaceholder}
+                  {...fieldProps?.searchInputPlaceholder}
                   containerClassName="px-4 pl-0 rounded-md flex-grow border-none"
                   className={"body3 rounded-md text-text"}
                 />
               </div>
             </form>
           </span>
-          {caption ? caption : null}
-          {basicCaption}
+          {caption && fieldProps?.caption ? (
+            <div {...fieldProps.caption}>{caption}</div>
+          ) : (
+            caption || null
+          )}
+          {basicCaption && fieldProps?.basicCaption ? (
+            <div {...fieldProps.basicCaption}>{basicCaption}</div>
+          ) : (
+            basicCaption
+          )}
         </div>
       </div>
     </div>

package/src/contentful/blocks/search-block/types.ts

@@ -1,6 +1,16 @@
 import React from "react";
 
+import type { FieldProps } from "@shared/types/field-props";
+
 export type SearchBlockProps = {
+  fieldProps?: FieldProps<
+    | "title"
+    | "subTitle"
+    | "searchDescription"
+    | "searchInputPlaceholder"
+    | "caption"
+    | "basicCaption"
+  >;
   anchorId?: string;
   title?: string;
   subTitle?: string;

package/src/utils/index.ts

@@ -34,7 +34,7 @@ export {
 
 // Token replacement — framework-agnostic string / rich-text interpolation.
 // No dependency on Contentful or any particular CMS/tool.
-export { replaceTokens } from "./replace-tokens";
+export { replaceTokens, getTokenField } from "./replace-tokens";
 export type {
   TokenEntry,
   TokenSource,

package/src/utils/replace-tokens.test.ts

@@ -1,4 +1,5 @@
 import {
+  getTokenField,
   hasUnresolvedTokens,
   replaceTokens,
   type RichTextDocument,
@@ -229,3 +230,42 @@ describe("hasUnresolvedTokens", () => {
     ]);
   });
 });
+
+describe("getTokenField", () => {
+  it("trims the token key before matching", () => {
+    expect(getTokenField("  price_tier1_300mbps ", tokens, "value")).toBe(
+      "44.99"
+    );
+  });
+
+  it("parses a JSON string token source", () => {
+    expect(
+      getTokenField("price_tier1_300mbps", JSON.stringify(tokens), "value")
+    ).toBe("44.99");
+  });
+
+  it("returns value (strikethrough) and promo (plan price) separately", () => {
+    expect(getTokenField("price_tier1_300mbps", tokens, "value")).toBe("44.99");
+    expect(getTokenField("price_tier1_300mbps", tokens, "promo")).toBe("39.99");
+  });
+
+  it("returns undefined for a missing field, unknown token or empty key", () => {
+    expect(getTokenField("price_value_only", tokens, "promo")).toBeUndefined();
+    expect(getTokenField("price_unknown", tokens, "value")).toBeUndefined();
+    expect(getTokenField("", tokens, "value")).toBeUndefined();
+    expect(getTokenField(undefined, tokens, "value")).toBeUndefined();
+    expect(getTokenField("price_tier1_300mbps", null, "value")).toBeUndefined();
+    expect(
+      getTokenField("price_tier1_300mbps", "{bad", "value")
+    ).toBeUndefined();
+  });
+
+  it("ignores blank or non-string field values", () => {
+    const source = [
+      { token: "blank", value: "  " },
+      { token: "numeric", value: 44 as unknown as string },
+    ];
+    expect(getTokenField("blank", source, "value")).toBeUndefined();
+    expect(getTokenField("numeric", source, "value")).toBeUndefined();
+  });
+});

package/src/utils/replace-tokens.ts

@@ -44,6 +44,19 @@ const buildTokenMap = (tokens: TokenSource): Record<string, string> =>
     return acc;
   }, {});
 
+export const getTokenField = (
+  token: string | null | undefined,
+  tokens: TokenSource,
+  field: "promo" | "value"
+): string | undefined => {
+  if (typeof token !== "string" || !token.trim()) return undefined;
+  const key = token.trim();
+  const resolved = normalizeEntries(tokens).find(
+    entry => entry?.token === key
+  )?.[field];
+  return typeof resolved === "string" && resolved.trim() ? resolved : undefined;
+};
+
 const replaceInString = (input: string, map: Record<string, string>): string =>
   input.replace(TOKEN_PATTERN, (match, token) =>
     Object.prototype.hasOwnProperty.call(map, token) ? map[token] : match