@windstream/react-shared-components 0.2.72 → 0.2.74

package/package.json

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

package/src/components/rich-text-basic/index.tsx

@@ -87,7 +87,8 @@ export const RichTextBasic: FC<RichTextBasicProps> = props => {
       }
       className={cx(
         "last:[&_p]:mb-0",
-        "text-body1 leading-normal",
+        // mobile-first: body3/leading-6 below md, body1/leading-normal from md up
+        "text-body3 leading-6 md:text-body1 md:leading-normal",
         "[&_b]:font-bold [&_strong]:font-bold [&_i]:italic [&_em]:italic",
         className,
         !enableMaxWidth && "max-w-none"

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/hooks/contentful/use-contentful-rich-text.test.tsx

@@ -1120,6 +1120,61 @@ describe("renderContentfulRichTextTable", () => {
     expect(container).toHaveTextContent("Other Title");
   });
 
+  it("renders componentVideoLink inline entry (REST shape, no links prop)", () => {
+    // Regression test: a doc containing both a table and an inline
+    // componentVideoLink entry previously rendered nothing for the video,
+    // since this function's INLINES.EMBEDDED_ENTRY override only resolved
+    // entries via the GraphQL `links` lookup.
+    const doc = makeDoc({
+      nodeType: BLOCKS.PARAGRAPH,
+      data: {},
+      content: [
+        makeInlineEntry("componentVideoLink", {
+          link: "https://youtube.com/watch?v=123",
+        }),
+      ],
+    });
+    const { container } = render(<>{renderContentfulRichTextTable(doc)}</>);
+    const el = container.querySelector('[data-testid="video-link"]')!;
+    expect(el).toBeInTheDocument();
+    const videoLink = JSON.parse(el.getAttribute("data-video-link")!);
+    expect(videoLink).toMatchObject({
+      link: "https://youtube.com/watch?v=123",
+    });
+  });
+
+  it("renders ComponentVideoLink (GraphQL __typename) inline entry resolved from links in table path", () => {
+    const entryId = "video-inline-1";
+    const doc = makeDoc({
+      nodeType: BLOCKS.PARAGRAPH,
+      data: {},
+      content: [
+        {
+          nodeType: INLINES.EMBEDDED_ENTRY,
+          data: { target: { sys: { id: entryId } } },
+          content: [],
+        },
+      ],
+    });
+    const links = {
+      entries: {
+        inline: [
+          {
+            sys: { id: entryId },
+            __typename: "ComponentVideoLink",
+            link: "https://youtube.com/watch?v=456",
+          },
+        ],
+      },
+    };
+    const { container } = render(
+      <>{renderContentfulRichTextTable(doc, links)}</>
+    );
+    expect(
+      container.querySelector('[data-testid="video-link"]')
+    ).toBeInTheDocument();
+  });
+
   it("returns null for inline entry not found in links", () => {
     const doc = makeDoc({
       nodeType: BLOCKS.PARAGRAPH,

package/src/hooks/contentful/use-contentful-rich-text.tsx

@@ -471,18 +471,21 @@ export function renderContentfulRichTextTable(
         );
       },
       [INLINES.EMBEDDED_ENTRY]: node => {
-        const entryId = node.data.target.sys.id;
-
-        const entry = links?.entries?.inline?.find(
-          (e: any) => e.sys.id === entryId
-        );
+        // resolveEmbeddedEntry/getEntryTypeId/getEntryFields handle both REST
+        // (already-resolved target) and GraphQL (`links` lookup) shapes - a
+        // plain `links?.entries?.inline` lookup here always returns undefined
+        // for REST responses (no `links` prop passed), silently dropping any
+        // inline embedded entry (e.g. componentVideoLink) in a doc with a table.
+        const entry = resolveEmbeddedEntry(node, links);
         if (!entry) return null;
+        const ctid = getEntryTypeId(entry);
+        const fields = getEntryFields(entry);
 
-        if (entry.__typename === "ComponentCheckList") {
+        if (ctid === "componentCheckList" || ctid === "ComponentCheckList") {
           // FIX: Don't use a Hook here.
           // Map the items manually or use a non-hook helper function.
           const items =
-            entry.list?.items?.map((item: any) =>
+            (fields.list?.items ?? entry.list?.items)?.map((item: any) =>
               renderContentfulRichText(
                 toDocument(item?.checkListTitle ?? ""),
                 true,
@@ -498,7 +501,11 @@ export function renderContentfulRichTextTable(
           );
         }
 
-        return <span>{entry.title || ""}</span>;
+        if (ctid === "componentVideoLink" || ctid === "ComponentVideoLink") {
+          return <VideoLink videoLink={toVideoLinkProps(fields)} />;
+        }
+
+        return <span>{fields?.title ?? entry.title ?? ""}</span>;
       },
     },
   };

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: {