@windstream/react-shared-components 0.2.72 → 0.2.73

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

@@ -106,7 +106,7 @@ describe("AnchoredBottomBanner", () => {
       <AnchoredBottomBanner backgroundColor="blue" />
     );
     expect(
-      container.querySelector(".bg-bg-fill-brand-supporting")
+      container.querySelector(".bg-bg-fill-brand-info")
     ).toBeInTheDocument();
   });
 
@@ -306,6 +306,7 @@ describe("AnchoredBottomBanner scheduledMessages", () => {
             scheduledStart: "2026-05-18",
             scheduleEnd: "2026-05-20",
             daysToShow: ["ALL"],
+            enableCountdownTimer: true,
             countdownStartDateTime: "2026-05-19T11:00:00Z",
             countdownEndDateTime: "2026-05-19T13:00:00Z",
             ctaButtonLabel: "Flash sale",
@@ -327,6 +328,7 @@ describe("AnchoredBottomBanner scheduledMessages", () => {
           {
             scheduledStart: "2026-05-17",
             scheduleEnd: "2026-05-19",
+            enableCountdownTimer: true,
             countdownEndDateTime: "2026-05-19T13:00:00Z",
             ctaButtonLabel: "Last day",
           },
@@ -383,6 +385,7 @@ describe("AnchoredBottomBanner scheduledMessages", () => {
             scheduledStart: "2026-05-18",
             scheduleEnd: "2026-05-20",
             daysToShow: ["TUE"],
+            enableCountdownTimer: true,
             countdownEndDateTime: "2026-05-19T13:00:00Z",
             ctaButtonLabel: "Tuesday deal",
           },
@@ -403,6 +406,7 @@ describe("AnchoredBottomBanner scheduledMessages", () => {
           {
             scheduledStart: "2026-05-18",
             scheduleEnd: "2026-05-20",
+            enableCountdownTimer: true,
             countdownEndDateTime: "2026-05-19T12:00:10Z",
             ctaButtonLabel: "Active message",
           },
@@ -414,6 +418,87 @@ describe("AnchoredBottomBanner scheduledMessages", () => {
     expect(screen.getByText(/00H : 00M : 10/)).toBeInTheDocument();
   });
 
+  it("does not show the countdown when the active message disables the timer", () => {
+    render(
+      <AnchoredBottomBanner
+        ctaButtonLabel="Default label"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            enableCountdownTimer: false,
+            countdownEndDateTime: "2026-05-19T13:00:00Z",
+            ctaButtonLabel: "No timer message",
+          },
+        ]}
+      />
+    );
+    expect(screen.getByText("No timer message")).toBeInTheDocument();
+    expect(screen.queryByText(/H :/)).not.toBeInTheDocument();
+  });
+
+  it("does not show the active message's countdown when the flag is unset", () => {
+    render(
+      <AnchoredBottomBanner
+        ctaButtonLabel="Default label"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            countdownEndDateTime: "2026-05-19T13:00:00Z",
+            ctaButtonLabel: "Unset timer message",
+          },
+        ]}
+      />
+    );
+    expect(screen.getByText("Unset timer message")).toBeInTheDocument();
+    expect(screen.queryByText(/H :/)).not.toBeInTheDocument();
+  });
+
+  it("does not inherit the parent's enableCountdownTimer for an active message", () => {
+    render(
+      <AnchoredBottomBanner
+        ctaButtonLabel="Default label"
+        enableCountdownTimer={true}
+        countdownEndDateTime="2026-05-19T13:00:00Z"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            enableCountdownTimer: false,
+            countdownEndDateTime: "2026-05-19T13:00:00Z",
+            ctaButtonLabel: "Active message",
+          },
+        ]}
+      />
+    );
+    // The parent timer is enabled, but the active message disables it -> no countdown.
+    expect(screen.getByText("Active message")).toBeInTheDocument();
+    expect(screen.queryByText(/H :/)).not.toBeInTheDocument();
+  });
+
+  it("keeps the message active after its countdown ends, hiding only the countdown", () => {
+    render(
+      <AnchoredBottomBanner
+        ctaButtonLabel="Default label"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            enableCountdownTimer: true,
+            // Countdown already ended (11:00Z) while now is 12:00Z, but the
+            // display window (05-18..05-20) is still open.
+            countdownEndDateTime: "2026-05-19T11:00:00Z",
+            ctaButtonLabel: "Still showing message",
+          },
+        ]}
+      />
+    );
+    expect(screen.getByText("Still showing message")).toBeInTheDocument();
+    expect(screen.queryByText("Default label")).not.toBeInTheDocument();
+    expect(screen.queryByText(/H :/)).not.toBeInTheDocument();
+  });
+
   it("selects the first message whose window contains today", () => {
     render(
       <AnchoredBottomBanner
@@ -441,6 +526,48 @@ describe("AnchoredBottomBanner scheduledMessages", () => {
     expect(screen.queryByText("Past message")).not.toBeInTheDocument();
     expect(screen.queryByText("Future message")).not.toBeInTheDocument();
   });
+
+  it("uses the active message's background, not the parent's", () => {
+    const { container } = render(
+      <AnchoredBottomBanner
+        backgroundColor="navy"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            backgroundColor: "green",
+            ctaButtonLabel: "Active message",
+          },
+        ]}
+      />
+    );
+    expect(container.querySelector(".bg-bg-fill-success")).toBeInTheDocument();
+    expect(
+      container.querySelector(".bg-bg-fill-inverse")
+    ).not.toBeInTheDocument();
+  });
+
+  it("uses the default background when the active message has none", () => {
+    const { container } = render(
+      <AnchoredBottomBanner
+        backgroundColor="navy"
+        scheduledMessages={[
+          {
+            scheduledStart: "2026-05-18",
+            scheduleEnd: "2026-05-20",
+            ctaButtonLabel: "Active message",
+          },
+        ]}
+      />
+    );
+    // No override on the message -> same default as a parent with no background.
+    expect(
+      container.querySelector(".bg-bg-fill-inverse")
+    ).not.toBeInTheDocument();
+    expect(
+      container.querySelector(".bg-bg-fill-brand-accent")
+    ).toBeInTheDocument();
+  });
 });
 
 describe("AnchoredBottomBanner scheduling timezone (America/New_York)", () => {

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

@@ -113,23 +113,16 @@ function dayMatches(daysToShow: string[] | undefined, nowMs: number): boolean {
   return normalized.includes(full) || normalized.includes(full.slice(0, 3));
 }
 
-// Active = today is within [scheduledStart, scheduleEnd], allowed by daysToShow,
-// and the message's countdown (when set) has not already ended. An expired
-// countdown makes the message inactive so it can't block another running one.
+// Active = today is within [scheduledStart, scheduleEnd] and allowed by
+// daysToShow. The countdown is independent: it hides once its own end passes
+// (see the `countdown` memo), but the message itself stays active across its
+// whole display window.
 function isMessageActive(message: ScheduledMessage, nowMs: number): boolean {
   const startMs = parseDisplayStart(message.scheduledStart);
   const endMs = parseDisplayEnd(message.scheduleEnd);
   const afterStart = startMs === undefined || nowMs >= startMs;
   const beforeEnd = endMs === undefined || nowMs < endMs;
-  const countdownEndMs = parseCountdownDateTime(message.countdownEndDateTime);
-  const countdownNotExpired =
-    countdownEndMs === undefined || nowMs < countdownEndMs;
-  return (
-    afterStart &&
-    beforeEnd &&
-    countdownNotExpired &&
-    dayMatches(message.daysToShow, nowMs)
-  );
+  return afterStart && beforeEnd && dayMatches(message.daysToShow, nowMs);
 }
 
 function formatCountdown(totalSeconds: number) {
@@ -159,22 +152,12 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
   const backGroundColorClasses = {
     navy: "bg-bg-fill-inverse",
     green: "bg-bg-fill-success",
-    blue: "bg-bg-fill-brand-supporting",
+    blue: "bg-bg-fill-brand-info",
     purple: "bg-bg-fill-brand-tertiary",
     yellow: "bg-bg-fill-brand-accent",
     white: "bg-white",
   };
 
-  const bgClass = backgroundColor
-    ? backGroundColorClasses[backgroundColor]
-    : "bg-bg-fill-brand-accent";
-
-  const isLightBackground =
-    backgroundColor === "yellow" ||
-    backgroundColor === "white" ||
-    !backgroundColor;
-  const textColorClass = isLightBackground ? "text-text-primary" : "text-white";
-
   const [nowMs, setNowMs] = useState(() => Date.now());
   const intervalRef = useRef<number | null>(null);
 
@@ -198,7 +181,14 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
     // records the pre-mount hasActiveMessage:false fallback.
     if (!hasMounted) return;
     onResolved?.({ hasActiveMessage, activeMessage, applicableWeekday });
-  }, [hasMounted, hasActiveMessage, activeMessage, applicableWeekday, onResolved]);
+  }, [
+    hasMounted,
+    hasActiveMessage,
+    activeMessage,
+    applicableWeekday,
+    scheduledMessages,
+    onResolved,
+  ]);
 
   // Latest display-window end, so we keep ticking to let messages activate/expire.
   const scheduleMaxEndMs = useMemo(() => {
@@ -217,6 +207,13 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
     ? activeMessage?.countdownEndDateTime
     : countdownEndDateTime;
 
+  // The timer flag is never inherited: an active message uses its own
+  // enableCountdownTimer (undefined = off, same as the banner level); otherwise
+  // the banner's top-level flag applies.
+  const effectiveEnableCountdownTimer = hasActiveMessage
+    ? activeMessage?.enableCountdownTimer
+    : enableCountdownTimer;
+
   const endMs = useMemo(
     () => parseCountdownDateTime(effectiveCountdownEndDateTime),
     [effectiveCountdownEndDateTime]
@@ -227,8 +224,9 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
   );
 
   const isTimerValid = useMemo(() => {
-    // Active messages always enable the timer; default uses enableCountdownTimer.
-    if (!hasActiveMessage && !enableCountdownTimer) return false;
+    // Timer shows only when explicitly enabled for the resolved source
+    // (active message's own flag, or the banner's flag when none is active).
+    if (!effectiveEnableCountdownTimer) return false;
     if (endMs === undefined) return false;
     if (effectiveCountdownStartDateTime && startMs === undefined) return false;
     if (startMs !== undefined && startMs >= endMs) {
@@ -240,8 +238,7 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
     }
     return true;
   }, [
-    hasActiveMessage,
-    enableCountdownTimer,
+    effectiveEnableCountdownTimer,
     endMs,
     startMs,
     effectiveCountdownStartDateTime,
@@ -309,6 +306,20 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
     ? activeMessage?.ctaButtonTarget
     : ctaButtonTarget;
 
+  // Active message owns its background; when unset it uses the same default as
+  // the parent-with-no-background (bg-fill-brand-accent), not the parent's color.
+  const effectiveBackgroundColor = hasActiveMessage
+    ? activeMessage?.backgroundColor
+    : backgroundColor;
+  const bgClass = effectiveBackgroundColor
+    ? backGroundColorClasses[effectiveBackgroundColor]
+    : "bg-bg-fill-brand-accent";
+  const isLightBackground =
+    effectiveBackgroundColor === "yellow" ||
+    effectiveBackgroundColor === "white" ||
+    !effectiveBackgroundColor;
+  const textColorClass = isLightBackground ? "text-text-primary" : "text-white";
+
   return (
     <section id={anchorId}>
       <div

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

@@ -25,10 +25,14 @@ export interface ScheduledMessage {
   scheduleEnd?: string;
   // Weekdays the message may show on within the window. "ALL" (or empty) = every day.
   daysToShow?: ScheduledMessageDay[];
+  // Per-message timer toggle. The message never inherits the banner's
+  // enableCountdownTimer; the countdown shows only when this is explicitly true.
+  enableCountdownTimer?: boolean;
   // Countdown timer window (full timestamps).
   countdownStartDateTime?: string;
   countdownEndDateTime?: string;
   iconName?: string;
+  backgroundColor?: AnchoredBottomBannerProps["backgroundColor"];
   ctaButtonLabel?: string;
   ctaSuffixText?: string;
   ctaButtonLink?: string;

package/src/styles/globals.css

@@ -104,6 +104,7 @@
   --color-bg-fill-brand-hover: #45c187;
   --color-bg-fill-brand-selected: #24a76a;
   --color-bg-fill-brand-supporting: #07b2e2;
+  --color-bg-fill-brand-info: #07b2e2;
   --color-bg-fill-brand-tertiary: #931d69;
   --color-bg-fill-translucent: rgba(255, 255, 255, 0.5);
   --color-bg-fill-critical: #d40000;
@@ -243,6 +244,7 @@
   --color-bg-fill-brand-hover: #30aec5;
   --color-bg-fill-brand-selected: #007c93;
   --color-bg-fill-brand-supporting: #40afc9;
+  --color-bg-fill-brand-info: #40afc9;
   --color-bg-fill-brand-tertiary: #a33895;
   --color-bg-fill-inverse: #231f20;
   --color-bg-fill-inverse-active: #231f20;
@@ -300,6 +302,7 @@
   --color-bg-fill-brand-selected: #0393ba;
 
   --color-bg-fill-brand-supporting: #26b170;
+  --color-bg-fill-brand-info: #0393ba;
 
   /* Text colors */
   --color-text-brand: #0393ba;

package/tailwind.config.cjs

@@ -158,6 +158,7 @@ module.exports = {
               hover: "var(--color-bg-fill-brand-hover)",
               selected: "var(--color-bg-fill-brand-selected)",
               supporting: "var(--color-bg-fill-brand-supporting)",
+              info: "var(--color-bg-fill-brand-info)",
               tertiary: "var(--color-bg-fill-brand-tertiary)",
             },
             critical: {