@windstream/react-shared-components 0.2.93 → 0.2.94

package/dist/core.d.ts

@@ -68,15 +68,15 @@ 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?: "default" | "focus" | "active" | "hover" | "filled" | "error" | undefined;
-    size?: "slim" | "medium" | "large" | undefined;
+    state?: "error" | "default" | "filled" | "active" | "focus" | "hover" | undefined;
+    size?: "medium" | "large" | "slim" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
-    prefixIconName?: "location_on" | "search" | undefined;
+    prefixIconName?: "search" | "location_on" | undefined;
     prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;
-    suffixIconName?: "visibility" | "visibility_off" | "lock" | undefined;
+    suffixIconName?: "visibility" | "lock" | "visibility_off" | undefined;
     suffixIconSize?: 20 | 24 | 40 | 48 | undefined;
     containerClassName?: string | undefined;
     prefixIconClassName?: string | undefined;

package/dist/index.d.ts

@@ -68,11 +68,11 @@ 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?: "default" | "focus" | "active" | "hover" | "filled" | "error" | undefined;
-    size?: "slim" | "medium" | "large" | undefined;
+    state?: "error" | "default" | "focus" | "active" | "hover" | "filled" | undefined;
+    size?: "medium" | "slim" | "large" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
-    prefixIconName?: "location_on" | "search" | undefined;
+    prefixIconName?: "search" | "location_on" | 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.93",
+  "version": "0.2.94",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

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

@@ -65,6 +65,41 @@ describe("AnchoredBottomBanner", () => {
     );
   });
 
+  it("tags the default banner entry, icon, timer, and linked button label", () => {
+    render(
+      <AnchoredBottomBanner
+        enableCountdownTimer={true}
+        countdownEndDateTime="2026-05-19T13:00:00Z"
+        iconName="local_offer"
+        ctaButtonLabel="Shop now"
+        fieldProps={{
+          entry: { "data-contentful-entry-id": "banner-entry" },
+          iconName: { "data-contentful-field-id": "iconName" },
+          countdownEndDateTime: {
+            "data-contentful-field-id": "countdownEndDateTime",
+          },
+          buttonLabel: { "data-contentful-field-id": "buttonLabel" },
+        }}
+      />
+    );
+
+    expect(screen.getByText("Shop now")).toHaveAttribute(
+      "data-contentful-field-id",
+      "buttonLabel"
+    );
+    expect(screen.getByText("local_offer").parentElement).toHaveAttribute(
+      "data-contentful-field-id",
+      "iconName"
+    );
+    expect(screen.getByText(/01H : 00M : 00/)).toHaveAttribute(
+      "data-contentful-field-id",
+      "countdownEndDateTime"
+    );
+    expect(
+      document.querySelector('[data-contentful-entry-id="banner-entry"]')
+    ).toBeInTheDocument();
+  });
+
   it("uses active scheduled-message fieldProps for its CTA content", () => {
     render(
       <AnchoredBottomBanner
@@ -387,6 +422,62 @@ describe("AnchoredBottomBanner scheduledMessages", () => {
     expect(screen.getByText(/01H : 00M : 00/)).toBeInTheDocument();
   });
 
+  it("uses the active scheduled-message entry tags for banner content", () => {
+    render(
+      <AnchoredBottomBanner
+        enableCountdownTimer={true}
+        countdownEndDateTime="2026-05-19T14:00:00Z"
+        iconName="local_offer"
+        ctaButtonLabel="Default label"
+        fieldProps={{
+          entry: { "data-contentful-entry-id": "default-entry" },
+          iconName: { "data-contentful-field-id": "default-icon" },
+          countdownEndDateTime: {
+            "data-contentful-field-id": "default-countdown",
+          },
+          buttonLabel: { "data-contentful-field-id": "default-label" },
+        }}
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            enableCountdownTimer: true,
+            countdownEndDateTime: "2026-05-19T13:00:00Z",
+            iconName: "bolt",
+            ctaButtonLabel: "Flash sale",
+            fieldProps: {
+              entry: { "data-contentful-entry-id": "scheduled-entry" },
+              iconName: { "data-contentful-field-id": "scheduled-icon" },
+              countdownEndDateTime: {
+                "data-contentful-field-id": "scheduled-countdown",
+              },
+              buttonLabel: { "data-contentful-field-id": "scheduled-label" },
+            },
+          },
+        ]}
+      />
+    );
+
+    expect(screen.getByText("Flash sale")).toHaveAttribute(
+      "data-contentful-field-id",
+      "scheduled-label"
+    );
+    expect(screen.getByText("bolt").parentElement).toHaveAttribute(
+      "data-contentful-field-id",
+      "scheduled-icon"
+    );
+    expect(screen.getByText(/01H : 00M : 00/)).toHaveAttribute(
+      "data-contentful-field-id",
+      "scheduled-countdown"
+    );
+    expect(
+      document.querySelector('[data-contentful-entry-id="scheduled-entry"]')
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-contentful-entry-id="default-entry"]')
+    ).not.toBeInTheDocument();
+  });
+
   it("treats scheduleEnd as inclusive of the whole end day", () => {
     render(
       <AnchoredBottomBanner

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

@@ -343,6 +343,7 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
         className={`fixed bottom-0 left-0 right-0 z-[30] flex w-full items-center justify-center px-4 py-3 transition-all duration-300 ${bgClass} ${
           boxShadow ? boxShadow : "shadow-[0_-4px_10px_rgba(0,0,0,0.1)]"
         }`}
+        {...effectiveFieldProps?.entry}
       >
         <Link
           href={effectiveCtaButtonLink || "#"}
@@ -354,28 +355,34 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
               className={`${textColorClass} break-words text-body1 font-black leading-snug md:text-[18px]`}
             >
               {effectiveIconName && (
-                <MaterialIcon
-                  name={
-                    effectiveIconName as React.ComponentProps<
-                      typeof MaterialIcon
-                    >["name"]
-                  }
-                  size={24}
-                  fill={1}
-                  className={`${textColorClass} align-text-bottom`}
-                />
+                <span {...effectiveFieldProps?.iconName}>
+                  <MaterialIcon
+                    name={
+                      effectiveIconName as React.ComponentProps<
+                        typeof MaterialIcon
+                      >["name"]
+                    }
+                    size={24}
+                    fill={1}
+                    className={`${textColorClass} align-text-bottom`}
+                  />
+                </span>
               )}
               {countdown.shouldShow && (
                 <span
                   className="inline-block whitespace-nowrap rounded-lg bg-white px-1 tabular-nums text-text"
                   suppressHydrationWarning={true}
+                  {...effectiveFieldProps?.countdownEndDateTime}
                 >
                   {countdown.text}
                 </span>
               )}
               {countdown.shouldShow ? " " : null}
               {effectiveCtaButtonLabel && (
-                <span {...effectiveFieldProps?.ctaButtonLabel}>
+                <span
+                  {...(effectiveFieldProps?.buttonLabel ??
+                    effectiveFieldProps?.ctaButtonLabel)}
+                >
                   {effectiveCtaButtonLabel}
                 </span>
               )}{" "}

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

@@ -51,7 +51,14 @@ export interface ScheduledMessage {
   ctaSuffixText?: string;
   ctaButtonLink?: string;
   ctaButtonTarget?: string;
-  fieldProps?: FieldProps<"ctaButtonLabel" | "ctaSuffixText">;
+  fieldProps?: FieldProps<
+    | "entry"
+    | "iconName"
+    | "countdownEndDateTime"
+    | "buttonLabel"
+    | "ctaButtonLabel"
+    | "ctaSuffixText"
+  >;
 }
 
 export interface AnchoredBottomBannerProps {
@@ -80,6 +87,13 @@ export interface AnchoredBottomBannerProps {
     activeMessage?: ScheduledMessage;
     applicableWeekday: string;
   }) => void;
-  /** DOM attributes for the rendered CTA label and suffix fields. */
-  fieldProps?: FieldProps<"ctaButtonLabel" | "ctaSuffixText">;
+  /** DOM attributes for the banner entry and rendered content fields. */
+  fieldProps?: FieldProps<
+    | "entry"
+    | "iconName"
+    | "countdownEndDateTime"
+    | "buttonLabel"
+    | "ctaButtonLabel"
+    | "ctaSuffixText"
+  >;
 }

package/src/contentful/blocks/dynamic-tabs/types.ts

@@ -4,7 +4,6 @@ import type { FieldProps } from "@shared/types/field-props";
 
 export interface DynamicTabT {
   tabName: string;
-  fieldProps?: { tabName?: Record<string, unknown> };
   anchorId: string;
   tabContent: ReactNode;
   /** Inspector attributes for this tab's name and content. */

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