@windstream/react-shared-components 0.2.81 → 0.2.83

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

@@ -17,6 +17,18 @@ export type ScheduledMessageDay =
   | "FRI"
   | "SAT";
 
+// Known banner colors keep editor autocomplete, while `(string & {})` lets any
+// new color added in Contentful flow through without changing this type.
+export type AnchoredBannerBackgroundColor =
+  | "navy"
+  | "yellow"
+  | "green"
+  | "purple"
+  | "blue"
+  | "white"
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  | (string & {});
+
 export interface ScheduledMessage {
   // Stable id for analytics (Contentful entry id or title).
   id?: string;
@@ -41,7 +53,7 @@ export interface ScheduledMessage {
 
 export interface AnchoredBottomBannerProps {
   ctaSuffixText?: string;
-  backgroundColor?: "navy" | "yellow" | "green" | "purple" | "blue" | "white";
+  backgroundColor?: AnchoredBannerBackgroundColor;
   iconName?: string;
   boxShadow?: boolean;
   ctaButtonLabel?: string;
@@ -54,6 +66,11 @@ export interface AnchoredBottomBannerProps {
   // When a message is active for today, it drives the countdown + CTA content;
   // otherwise the banner falls back to its own top-level values above.
   scheduledMessages?: ScheduledMessage[];
+  // Server-generated timestamp (epoch ms) so SSR and the first client render
+  // resolve the same schedule/countdown state (no structural hydration
+  // mismatch). Reconciled to the live clock after mount. Falls back to
+  // Date.now() when omitted.
+  initialNowMs?: number;
   // Fires with the resolved result so consumers (analytics) know what showed.
   onResolved?: (result: {
     hasActiveMessage: boolean;

package/src/contentful/blocks/award-marquee/AwardMarquee.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof AwardMarquee> = {
       page: DocsPage,
       description: {
         component:
-          "Server-rendered marquee of award badges. Optional `heading` and `footerText` display gold text above and below the awards, with divider lines around the heading. Animates when `scroll` is set; with 3 or fewer items it animates on mobile and falls back to a static row at the `sm` breakpoint (CSS-driven, no client-side JS).",
+          "Server-rendered marquee of award badges. Optional `heading` and `footerText` display gold text above and below the awards, with divider lines around the heading. A single-entry static display can optionally swap in a distinct `mobileIconUrl` below the `sm` breakpoint. Animates when `scroll` is set; with 3 or fewer items it animates on mobile and falls back to a static row at the `sm` breakpoint (CSS-driven, no client-side JS).",
       },
     },
   },
@@ -56,3 +56,47 @@ export const WithHeadingAndFooter: Story = {
     scroll: false,
   },
 };
+
+export const SingleConsolidatedLogo: Story = {
+  args: {
+    heading: "As seen on",
+    scroll: false,
+    items: [
+      {
+        iconUrl: "https://placehold.co/1441x622?text=Consolidated+Logo",
+        iconAlt: "As seen on logo collection",
+      },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A single consolidated logo entry (no title/description) renders at up to 1100px wide, scales down responsively, and is horizontally centered. The caption block is omitted entirely since there is no caption text.",
+      },
+    },
+  },
+};
+
+export const SingleLogoWithMobileImage: Story = {
+  args: {
+    heading: "As seen on",
+    scroll: false,
+    items: [
+      {
+        iconUrl: "https://placehold.co/1441x622?text=Desktop+Logo",
+        iconAlt: "As seen on logo collection (desktop)",
+        mobileIconUrl: "https://placehold.co/622x622?text=Mobile+Logo",
+        mobileIconAlt: "As seen on logo collection (mobile)",
+      },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A single consolidated logo entry can optionally supply `mobileIconUrl` (plus matching `mobileIconAlt`/`mobileIconWidth`/`mobileIconHeight`) to swap in a different, often more vertical, crop below the `sm` (640px) breakpoint. Resize the viewport to see the swap. If `mobileIconUrl` is omitted, the desktop image is used at every breakpoint. This swap only applies when the marquee has a single entry and `scroll` is `false`.",
+      },
+    },
+  },
+};

package/src/contentful/blocks/award-marquee/index.test.tsx

@@ -92,17 +92,128 @@ describe("AwardMarquee", () => {
     expect(icon.src).toContain("icon-0.png");
   });
 
-  it("renders intrinsic icon dimensions when provided", () => {
-    const [item] = buildItems(1);
-    render(
-      <AwardMarquee items={[{ ...item, iconWidth: 320, iconHeight: 180 }]} />
-    );
+  it("renders intrinsic icon dimensions when provided (multi-entry, unchanged sizing)", () => {
+    const items = buildItems(2).map(item => ({
+      ...item,
+      iconWidth: 320,
+      iconHeight: 180,
+    }));
+    render(<AwardMarquee items={items} />);
     const icon = screen.getByAltText("Award 0");
     expect(icon).toHaveAttribute("width", "320");
     expect(icon).toHaveAttribute("height", "180");
     expect(icon).toHaveClass("w-[200px]");
   });
 
+  it("renders intrinsic icon dimensions when provided (single static entry)", () => {
+    const [item] = buildItems(1);
+    render(
+      <AwardMarquee items={[{ ...item, iconWidth: 1441, iconHeight: 622 }]} />
+    );
+    const icon = screen.getByAltText("Award 0");
+    expect(icon).toHaveAttribute("width", "1441");
+    expect(icon).toHaveAttribute("height", "622");
+    expect(icon).toHaveClass("w-full", "max-w-[1100px]", "h-auto");
+    expect(icon).not.toHaveClass("w-[200px]");
+  });
+
+  it("renders a distinct mobile image for a single static entry when one is supplied", () => {
+    const { container } = render(
+      <AwardMarquee
+        items={[
+          {
+            iconUrl: "https://example.com/desktop-logo.png",
+            iconAlt: "Desktop Logo",
+            iconWidth: 1441,
+            iconHeight: 622,
+            mobileIconUrl: "https://example.com/mobile-logo.png",
+            mobileIconAlt: "Mobile Logo",
+            mobileIconWidth: 600,
+            mobileIconHeight: 400,
+          },
+        ]}
+        scroll={false}
+      />
+    );
+
+    const mobileIcon = screen.getByAltText("Mobile Logo") as HTMLImageElement;
+    const desktopIcon = screen.getByAltText("Desktop Logo") as HTMLImageElement;
+
+    expect(mobileIcon.src).toContain("mobile-logo.png");
+    expect(mobileIcon).toHaveAttribute("width", "600");
+    expect(mobileIcon).toHaveAttribute("height", "400");
+    expect(mobileIcon).toHaveClass("sm:hidden", "max-w-[1100px]", "h-auto");
+
+    expect(desktopIcon.src).toContain("desktop-logo.png");
+    expect(desktopIcon).toHaveAttribute("width", "1441");
+    expect(desktopIcon).toHaveAttribute("height", "622");
+    expect(desktopIcon).toHaveClass(
+      "hidden",
+      "sm:block",
+      "max-w-[1100px]",
+      "h-auto"
+    );
+
+    // Exactly one wrapper div (not duplicated) still holds both images.
+    expect(
+      container.querySelectorAll("#Award-Marquee > div > div")
+    ).toHaveLength(1);
+  });
+
+  it("falls back to the desktop image at every breakpoint when no mobile image is supplied", () => {
+    render(
+      <AwardMarquee
+        items={[
+          {
+            iconUrl: "https://example.com/desktop-logo.png",
+            iconAlt: "Desktop Logo",
+          },
+        ]}
+        scroll={false}
+      />
+    );
+
+    const icon = screen.getByAltText("Desktop Logo");
+    expect(icon).not.toHaveClass("sm:hidden");
+    expect(icon).not.toHaveClass("hidden", "sm:block");
+    expect(screen.queryAllByAltText("Desktop Logo")).toHaveLength(1);
+  });
+
+  it("ignores the mobile image field for multi-entry and animated-carousel rendering", () => {
+    const itemWithMobile = {
+      iconUrl: "https://example.com/desktop-logo.png",
+      iconAlt: "Desktop Logo",
+      mobileIconUrl: "https://example.com/mobile-logo.png",
+      mobileIconAlt: "Mobile Logo",
+    };
+
+    const { container: multiContainer } = render(
+      <AwardMarquee
+        items={[itemWithMobile, { ...buildItems(1)[0] }]}
+        scroll={false}
+      />
+    );
+    expect(multiContainer.querySelectorAll('[alt="Mobile Logo"]')).toHaveLength(
+      0
+    );
+    expect(screen.getByAltText("Desktop Logo")).not.toHaveClass("sm:hidden");
+
+    const { container: carouselContainer } = render(
+      <AwardMarquee items={[itemWithMobile]} scroll={true} />
+    );
+    // Split view for a single item never applies the mobile/desktop swap:
+    // the mobile half is already handled by the separate animated carousel,
+    // and the desktop half shows a single, unswapped image.
+    expect(
+      carouselContainer.querySelectorAll('[alt="Mobile Logo"]')
+    ).toHaveLength(0);
+    const desktopHalfIcon = carouselContainer.querySelector(
+      ".hidden.sm\\:block img"
+    );
+    expect(desktopHalfIcon).toHaveClass("w-full", "max-w-[1100px]", "h-auto");
+    expect(desktopHalfIcon).not.toHaveClass("sm:hidden");
+  });
+
   it("omits intrinsic icon dimensions when unavailable", () => {
     render(<AwardMarquee items={buildItems(1)} />);
     const icon = screen.getByAltText("Award 0");
@@ -139,6 +250,93 @@ describe("AwardMarquee", () => {
     expect(screen.getAllByText("Award 0")).toHaveLength(3);
   });
 
+  it("centers a single static entry and hides the caption block when it has no caption text", () => {
+    const { container } = render(
+      <AwardMarquee
+        items={[{ iconUrl: "https://example.com/logo.png", iconAlt: "Logo" }]}
+        scroll={false}
+      />
+    );
+    const wrapper = container.querySelector("#Award-Marquee > div > div");
+    expect(wrapper).toHaveClass("mx-auto", "w-full", "justify-center");
+    expect(wrapper).not.toHaveClass("ml-4", "w-auto");
+
+    const icon = screen.getByAltText("Logo");
+    expect(icon).toHaveClass("w-full", "max-w-[1100px]", "h-auto");
+    expect(icon).not.toHaveClass("w-[200px]");
+
+    // No title/description -> the 250px caption block takes no space.
+    expect(container.querySelector(".w-\\[250px\\]")).toBeNull();
+  });
+
+  it("still renders the caption block for a single static entry that has caption text", () => {
+    const { container } = render(
+      <AwardMarquee items={buildItems(1)} scroll={false} />
+    );
+    expect(container.querySelector(".w-\\[250px\\]")).not.toBeNull();
+    expect(screen.getByText("Award 0")).toBeInTheDocument();
+    expect(screen.getByText("Description 0")).toBeInTheDocument();
+  });
+
+  it("omits the caption block for any entry lacking caption text, even with multiple entries", () => {
+    const items: AwardMarqueeItem[] = [
+      ...buildItems(1),
+      { iconUrl: "https://example.com/logo-2.png", iconAlt: "Logo 2" },
+    ];
+    const { container } = render(<AwardMarquee items={items} scroll={false} />);
+    // Only the first item (with title/description) gets a caption block.
+    expect(container.querySelectorAll(".w-\\[250px\\]")).toHaveLength(1);
+  });
+
+  it("leaves multi-entry static rendering unchanged (fixed-width icon, ml-4 wrapper)", () => {
+    const { container } = render(
+      <AwardMarquee items={buildItems(2)} scroll={false} />
+    );
+    const wrappers = container.querySelectorAll("#Award-Marquee > div > div");
+    wrappers.forEach(wrapper => {
+      expect(wrapper).toHaveClass("ml-4", "w-auto");
+      expect(wrapper).not.toHaveClass("mx-auto", "justify-center");
+    });
+    const icon = screen.getByAltText("Award 0");
+    expect(icon).toHaveClass("w-[200px]");
+    expect(icon).not.toHaveClass("max-w-[1100px]");
+  });
+
+  it("leaves the multi-entry animated carousel unchanged regardless of single-item styling", () => {
+    const { container } = render(
+      <AwardMarquee items={buildItems(5)} scroll={true} />
+    );
+    const icons = screen.getAllByAltText(/Award \d/);
+    icons.forEach(icon => expect(icon).toHaveClass("w-[200px]"));
+    const wrappers = container.querySelectorAll(".animate-award-marquee > div");
+    wrappers.forEach(wrapper => {
+      expect(wrapper).toHaveClass("ml-4", "w-auto");
+    });
+  });
+
+  it("applies the single-static treatment only to the desktop (static) half of a split view", () => {
+    const { container } = render(
+      <AwardMarquee
+        items={[{ iconUrl: "https://example.com/logo.png", iconAlt: "Logo" }]}
+        scroll={true}
+      />
+    );
+    const mobileIcon = container.querySelector(
+      ".sm\\:hidden img"
+    ) as HTMLImageElement;
+    const desktopIcon = container.querySelector(
+      ".hidden.sm\\:block img"
+    ) as HTMLImageElement;
+
+    // Mobile (animated) half keeps the original fixed-width treatment.
+    expect(mobileIcon).toHaveClass("w-[200px]");
+    expect(mobileIcon).not.toHaveClass("max-w-[1100px]");
+
+    // Desktop (static) half gets the large, centered single-entry treatment.
+    expect(desktopIcon).toHaveClass("w-full", "max-w-[1100px]", "h-auto");
+    expect(desktopIcon).not.toHaveClass("w-[200px]");
+  });
+
   it("applies the anchorId to the wrapper in every render branch", () => {
     const staticView = render(
       <AwardMarquee

package/src/contentful/blocks/award-marquee/index.tsx

@@ -26,32 +26,76 @@ const renderAwardItem = (
     iconAlt,
     iconWidth,
     iconHeight,
+    mobileIconUrl,
+    mobileIconAlt,
+    mobileIconWidth,
+    mobileIconHeight,
     title,
     description,
   }: AwardMarqueeItem,
-  key: React.Key
-) => (
-  <div
-    key={key}
-    className="ml-4 flex w-auto flex-shrink-0 items-center whitespace-nowrap"
-  >
-    <img
-      src={iconUrl}
-      alt={iconAlt ?? ""}
-      width={iconWidth}
-      height={iconHeight}
-      className="w-[200px]"
-    />
-    <div className="w-[250px] text-center">
-      <p className="flex justify-center text-center text-body3 font-bold">
-        {title}
-      </p>
-      <p className="flex flex-wrap whitespace-normal text-center text-footnote">
-        {description}
-      </p>
+  key: React.Key,
+  // Only the single-entry, non-animated (static) rendering gets the large,
+  // centered treatment; the animated carousel is unaffected.
+  isSingleStatic = false,
+  // A distinct mobile image is only honored for the standalone static render
+  // (scroll={false}). When this is the "desktop half" of a responsive split
+  // (scroll={true} with <=3 items), the sm:hidden mobile side is already
+  // handled by the separate animated half, so a nested swap here would never
+  // be visible at any viewport.
+  allowMobileSwap = false
+) => {
+  const hasCaption = Boolean(title || description);
+  const hasMobileIcon = allowMobileSwap && Boolean(mobileIconUrl);
+
+  return (
+    <div
+      key={key}
+      className={cx(
+        "flex flex-shrink-0 items-center whitespace-nowrap",
+        isSingleStatic ? "mx-auto w-full justify-center" : "ml-4 w-auto"
+      )}
+    >
+      {hasMobileIcon ? (
+        <>
+          <img
+            src={mobileIconUrl}
+            alt={mobileIconAlt ?? iconAlt ?? ""}
+            width={mobileIconWidth}
+            height={mobileIconHeight}
+            className="h-auto w-full max-w-[1100px] sm:hidden"
+          />
+          <img
+            src={iconUrl}
+            alt={iconAlt ?? ""}
+            width={iconWidth}
+            height={iconHeight}
+            className="hidden h-auto w-full max-w-[1100px] sm:block"
+          />
+        </>
+      ) : (
+        <img
+          src={iconUrl}
+          alt={iconAlt ?? ""}
+          width={iconWidth}
+          height={iconHeight}
+          className={
+            isSingleStatic ? "h-auto w-full max-w-[1100px]" : "w-[200px]"
+          }
+        />
+      )}
+      {hasCaption && (
+        <div className="w-[250px] text-center">
+          <p className="flex justify-center text-center text-body3 font-bold">
+            {title}
+          </p>
+          <p className="flex flex-wrap whitespace-normal text-center text-footnote">
+            {description}
+          </p>
+        </div>
+      )}
     </div>
-  </div>
-);
+  );
+};
 
 export const AwardMarquee: React.FC<AwardMarqueeProps> = ({
   anchorId = "Award-Marquee",
@@ -91,20 +135,27 @@ export const AwardMarquee: React.FC<AwardMarqueeProps> = ({
     );
   };
 
-  const staticMarquee = (
+  const staticMarquee = (allowMobileSwap: boolean) => (
     <div className="flex flex-nowrap items-center justify-around overflow-clip">
-      {items.map((item, index) => renderAwardItem(item, index))}
+      {items.map((item, index) =>
+        renderAwardItem(
+          item,
+          index,
+          items.length === 1,
+          allowMobileSwap && items.length === 1
+        )
+      )}
     </div>
   );
 
   const marquee = !scroll ? (
-    staticMarquee
+    staticMarquee(true)
   ) : scrollAvailable ? (
     animatedMarquee()
   ) : (
     <>
       <div className="sm:hidden">{animatedMarquee()}</div>
-      <div className="hidden sm:block">{staticMarquee}</div>
+      <div className="hidden sm:block">{staticMarquee(false)}</div>
     </>
   );
 

package/src/contentful/blocks/award-marquee/types.ts

@@ -7,6 +7,12 @@ export type AwardMarqueeItem = {
   iconAlt?: string;
   iconWidth?: number;
   iconHeight?: number;
+  // Optional mobile-specific image for the single-entry static display.
+  // Falls back to iconUrl at every breakpoint when omitted.
+  mobileIconUrl?: string;
+  mobileIconAlt?: string;
+  mobileIconWidth?: number;
+  mobileIconHeight?: number;
   title?: string;
   description?: string;
 };