@windstream/react-shared-components 0.2.77 → 0.2.78

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"