@windstream/react-shared-components 0.2.82 → 0.2.83

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;
 };