@windstream/react-shared-components 0.2.76 → 0.2.78

package/src/contentful/blocks/carousel/helper.test.tsx

@@ -155,25 +155,121 @@ describe("ProductCardCarousel", () => {
     expect(screen.getAllByTestId("product-card")).toHaveLength(1);
   });
 
-  it("renders non-carousel layout for 2 or fewer items", () => {
-    const fields = createProductFields([
-      sampleProduct,
-      { ...sampleProduct, sys: { id: "prod-2" } },
-    ]);
+  it("renders non-carousel layout for a single item", () => {
+    const fields = createProductFields([sampleProduct]);
     const { container } = render(<ProductCardCarousel fields={fields} />);
     // Non-carousel: wrapped in flex layout
     expect(container.querySelector(".flex.w-full")).toBeInTheDocument();
   });
 
-  it("renders carousel layout for more than 2 items", () => {
-    const items = Array.from({ length: 3 }, (_, i) => ({
+  it("renders carousel layout for more than one item", () => {
+    const items = Array.from({ length: 2 }, (_, i) => ({
       ...sampleProduct,
       sys: { id: `prod-${i}` },
     }));
     const fields = createProductFields(items);
     const { container } = render(<ProductCardCarousel fields={fields} />);
-    // 3 cards stay a vertical stack on mobile (flex-col for md:hidden)
+    // 2+ cards become a horizontal carousel (vertical stack on mobile via
+    // flex-col under sm:hidden); the non-carousel ".flex.w-full" row is gone.
     expect(container.querySelector(".flex-col")).toBeInTheDocument();
+    expect(container.querySelector(".flex.w-full")).not.toBeInTheDocument();
+  });
+
+  describe("desktop carousel track alignment", () => {
+    const withOffsetWidth = (width: number, run: () => void) => {
+      Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+        configurable: true,
+        get: () => width,
+      });
+      run();
+    };
+
+    it("centers the track (no left indent) when every card fits", () => {
+      const items = Array.from({ length: 3 }, (_, i) => ({
+        ...sampleProduct,
+        sys: { id: `prod-${i}` },
+      }));
+      withOffsetWidth(1280, () => {
+        const { container } = render(
+          <ProductCardCarousel fields={createProductFields(items)} />
+        );
+        fireEvent(window, new Event("resize"));
+        const track = container.querySelector(
+          '[style*="translateX"]'
+        ) as HTMLElement;
+        expect(track.className).toContain("justify-center");
+        expect(track.className).not.toContain("ml-8");
+      });
+    });
+
+    it("left-indents the track for scrolling when cards overflow", () => {
+      const items = Array.from({ length: 4 }, (_, i) => ({
+        ...sampleProduct,
+        sys: { id: `prod-${i}` },
+      }));
+      withOffsetWidth(900, () => {
+        const { container } = render(
+          <ProductCardCarousel fields={createProductFields(items)} />
+        );
+        fireEvent(window, new Event("resize"));
+        const track = container.querySelector(
+          '[style*="translateX"]'
+        ) as HTMLElement;
+        expect(track.className).toContain("ml-8");
+        expect(track.className).not.toContain("justify-center");
+      });
+    });
+
+    it("centers (no clip/scroll) when the row fits exactly in the window", () => {
+      // Two 392px cards + one 16px gap = 800px. A window of exactly 800px must
+      // center the row rather than subtracting the 32px indent, which would clip
+      // the last card and enable needless scrolling.
+      const items = Array.from({ length: 2 }, (_, i) => ({
+        ...sampleProduct,
+        sys: { id: `prod-${i}` },
+      }));
+      withOffsetWidth(800, () => {
+        const { container } = render(
+          <ProductCardCarousel fields={createProductFields(items)} />
+        );
+        fireEvent(window, new Event("resize"));
+        const track = container.querySelector(
+          '[style*="translateX"]'
+        ) as HTMLElement;
+        expect(track.className).toContain("justify-center");
+        expect(track.className).not.toContain("ml-8");
+      });
+    });
+  });
+
+  describe("carousel breakpoint by layout", () => {
+    it("uses the sm breakpoint for single-row carousels so they go horizontal on tablets", () => {
+      const items = Array.from({ length: 2 }, (_, i) => ({
+        ...sampleProduct,
+        sys: { id: `prod-${i}` },
+      }));
+      const { container } = render(
+        <ProductCardCarousel fields={createProductFields(items)} />
+      );
+      expect(container.querySelector(".sm\\:hidden")).toBeInTheDocument();
+      expect(container.querySelector(".sm\\:block")).toBeInTheDocument();
+      // Not gated behind md, so the row goes horizontal from the sm breakpoint.
+      expect(container.querySelector(".md\\:hidden")).not.toBeInTheDocument();
+      expect(container.querySelector(".md\\:block")).not.toBeInTheDocument();
+    });
+
+    it("keeps the md breakpoint for two-column carousels so the tablet grid is preserved", () => {
+      const items = Array.from({ length: 4 }, (_, i) => ({
+        ...sampleProduct,
+        sys: { id: `prod-${i}` },
+      }));
+      const { container } = render(
+        <ProductCardCarousel fields={createProductFields(items)} />
+      );
+      expect(container.querySelector(".md\\:hidden")).toBeInTheDocument();
+      expect(container.querySelector(".md\\:block")).toBeInTheDocument();
+      expect(container.querySelector(".sm\\:hidden")).not.toBeInTheDocument();
+    });
   });
 
   it("renders a two-column grid on mobile when more than 3 cards", () => {

package/src/contentful/blocks/carousel/helper.tsx

@@ -42,7 +42,11 @@ function ProductCardPanel({
   // When unset, fall back to the count heuristic: two-column once there are
   // more than 3 cards; 3 or fewer stack vertically.
   const twoColumn = fields?.twoColumn ?? items.length > 3;
-  const isCarousel = items.length > 2;
+  // Product cards render as a horizontal carousel whenever there is more than
+  // one card so they stay side by side (horizontal) at tablet/desktop widths,
+  // matching the legacy residential layout, instead of wrapping to a vertical
+  // stack. A lone card renders centered via the non-carousel branch.
+  const isCarousel = items.length > 1;
   // When any card is flagged best-value, every card reserves the banner height
   // so plan name/price stay aligned across a two-column row.
   const hasAnyBadge = items.some((item: any) => item?.highlighted);
@@ -67,6 +71,14 @@ function ProductCardPanel({
       const containerWidth = windowRef.current?.offsetWidth || 0;
       // Skip while hidden (offsetWidth is 0) to avoid overestimating maxIndex
       if (containerWidth === 0) return;
+      // If the whole row already fits, center it (maxIndex 0) rather than
+      // subtracting the ml-8 scroll indent — doing so on an exact fit would
+      // otherwise clip the last card and enable needless scrolling.
+      const fullRowWidth = items.length * cardWidth - gap; // no trailing gap
+      if (fullRowWidth <= containerWidth) {
+        setMaxIndex(0);
+        return;
+      }
       const usableWidth = containerWidth - trackMargin;
       const visibleCards = Math.max(
         1,
@@ -143,8 +155,12 @@ function ProductCardPanel({
   useEffect(() => {
     if (!isCarousel || !isVisible) return;
 
+    // Capture the ref array once so the resize handler and cleanup operate on a
+    // stable reference (satisfies react-hooks/exhaustive-deps for the cleanup).
+    const cardsSnapshot = cardsRef.current;
+
     const equalizeHeights = () => {
-      const cards = cardsRef.current.filter(Boolean) as HTMLDivElement[];
+      const cards = cardsSnapshot.filter(Boolean) as HTMLDivElement[];
       if (cards.length === 0) return;
 
       // Reset heights first so each card reports its natural height
@@ -152,6 +168,30 @@ function ProductCardPanel({
         card.style.height = "auto";
       });
 
+      // Equalize the plan-name/price header AND the description across cards so
+      // the "Select plan" CTA below them starts at the same Y. A longer plan
+      // name / wider price (e.g. "$34" vs "$19") can wrap to an extra header
+      // line, and below md the fixed description height (md:h-[56px]) does not
+      // apply, so differing description lengths would otherwise leave the CTAs
+      // at different heights. Reserve the tallest height for each section.
+      const equalizeSection = (selector: string) => {
+        const els = cards
+          .map(card => card.querySelector<HTMLElement>(selector))
+          .filter(Boolean) as HTMLElement[];
+        els.forEach(el => el.style.removeProperty("min-height"));
+        const max = Math.max(
+          0,
+          ...els.map(el => el.getBoundingClientRect().height)
+        );
+        if (max > 0) {
+          els.forEach(el =>
+            el.style.setProperty("min-height", `${max}px`, "important")
+          );
+        }
+      };
+      equalizeSection("[data-pc-header]");
+      equalizeSection("[data-pc-description]");
+
       // Find the tallest card
       const maxHeight = Math.max(...cards.map(card => card.offsetHeight));
 
@@ -176,6 +216,14 @@ function ProductCardPanel({
       cancelAnimationFrame(rafId);
       clearTimeout(timeoutId);
       window.removeEventListener("resize", equalizeHeights);
+      (cardsSnapshot.filter(Boolean) as HTMLDivElement[]).forEach(card => {
+        card
+          .querySelector<HTMLElement>("[data-pc-header]")
+          ?.style.removeProperty("min-height");
+        card
+          .querySelector<HTMLElement>("[data-pc-description]")
+          ?.style.removeProperty("min-height");
+      });
     };
   }, [isCarousel, isVisible, desktopExpanded, items.length]);
 
@@ -420,7 +468,7 @@ function ProductCardPanel({
               : "flex flex-wrap justify-center"
           )}
         >
-          {items.map((item, index) => renderCard(item, index, twoColumn))}
+          {items.map((item, index) => renderCard(item, index, true))}
         </div>
       ) : (
         <>
@@ -428,7 +476,12 @@ function ProductCardPanel({
           <div
             ref={mobileGridRef}
             className={cx(
-              "md:hidden",
+              // Two-column layouts keep their stacked/grid view until md (768px)
+              // so the tablet 2-up grid and its CTA alignment are preserved;
+              // single-row layouts switch to the horizontal carousel from sm
+              // (640px) so they stay horizontal on tablets (matching the legacy
+              // residential layout) instead of wrapping to a vertical stack.
+              twoColumn ? "md:hidden" : "sm:hidden",
               twoColumn ? "grid grid-cols-2 gap-4" : "flex flex-col gap-6"
             )}
           >
@@ -436,10 +489,19 @@ function ProductCardPanel({
           </div>
 
           {/* Desktop View: Horizontal Carousel */}
-          <div className="relative hidden w-full md:block">
-            {/* Navigation Arrows */}
+          <div
+            className={cx(
+              "relative hidden w-full",
+              twoColumn ? "md:block" : "sm:block"
+            )}
+          >
+            {/* Navigation Arrows. Below md the carousel can appear as early as
+                sm (single-row layouts), where the enclosing block has little
+                horizontal room and overflow-hidden; keep the arrows at the
+                window edges (inside) there, and restore the outset desktop
+                positioning from md up. */}
             {showArrows && (
-              <div className="pointer-events-none absolute -left-16 -right-16 top-[50%] z-30 flex -translate-y-1/2 justify-between px-4 md:px-10">
+              <div className="pointer-events-none absolute left-0 right-0 top-[50%] z-30 flex -translate-y-1/2 justify-between px-4 md:-left-16 md:-right-16 md:px-10">
                 {currentIndex > 0 ? (
                   <Button
                     onClick={prevSlide}
@@ -477,7 +539,12 @@ function ProductCardPanel({
             >
               <div
                 className={cx(
-                  "ml-8 flex items-stretch gap-4 pb-4",
+                  "flex items-stretch gap-4 py-4",
+                  // Center the row when every card already fits (no scrolling
+                  // needed) so a short row (e.g. two cards) sits under the
+                  // centered title; only indent for the scrollable state so the
+                  // first card clears the left arrow.
+                  maxIndex === 0 ? "justify-center" : "ml-8",
                   isSwiping
                     ? "transition-none"
                     : "transition-transform duration-500 ease-in-out"

package/src/contentful/blocks/floating-banner/index.tsx

@@ -75,7 +75,7 @@ export const FloatingBanner: React.FC<FloatingBannerProps> = ({
           {cta && (
             <div className="mt-5 flex flex-shrink-0 justify-center lg:mt-0 lg:items-center">
               <Button
-                 buttonVariant="secondary"
+                buttonVariant="secondary"
                 {...cta}
                 size={{ base: "medium", md: "large" }}
               ></Button>