@windstream/react-shared-components 0.2.14 → 0.2.16

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

@@ -29,20 +29,96 @@ function ProductCardPanel({
     Record<number, boolean>
   >({});
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [maxIndex, setMaxIndex] = useState(0);
+  const [swipeOffset, setSwipeOffset] = useState(0);
+  const [isSwiping, setIsSwiping] = useState(false);
   const items = fields?.items?.items || [];
   const isCarousel = items.length > 2;
   const showArrows = fields?.showArrows !== false && isCarousel;
   const cardsRef = useRef<(HTMLDivElement | null)[]>([]);
+  const windowRef = useRef<HTMLDivElement | null>(null);
+  const touchStartX = useRef<number>(0);
+
+  // Determine how many cards fit so we never scroll past the last card
+  useEffect(() => {
+    if (!isCarousel || !isVisible) return;
+
+    const gap = 16; // track gap-4 (16px)
+    const cardWidth = 392 + gap; // card width + gap
+    const trackMargin = 32; // inner track ml-8 (32px)
+    const computeMaxIndex = () => {
+      const containerWidth = windowRef.current?.offsetWidth || 0;
+      // Skip while hidden (offsetWidth is 0) to avoid overestimating maxIndex
+      if (containerWidth === 0) return;
+      const usableWidth = containerWidth - trackMargin;
+      const visibleCards = Math.max(
+        1,
+        Math.floor((usableWidth + gap) / cardWidth)
+      );
+      setMaxIndex(Math.max(0, items.length - visibleCards));
+    };
+
+    computeMaxIndex();
+    window.addEventListener("resize", computeMaxIndex);
+    return () => window.removeEventListener("resize", computeMaxIndex);
+  }, [isCarousel, isVisible, items.length]);
+
+  // Keep the active index within the available range
+  useEffect(() => {
+    setCurrentIndex(prev => Math.min(prev, maxIndex));
+  }, [maxIndex]);
 
   const prevSlide = useCallback(() => {
     if (!isCarousel) return;
-    setCurrentIndex(prev => (prev - 1 + items.length) % items.length);
-  }, [isCarousel, items.length]);
+    setCurrentIndex(prev => Math.max(0, prev - 1));
+  }, [isCarousel]);
 
   const nextSlide = useCallback(() => {
     if (!isCarousel) return;
-    setCurrentIndex(prev => (prev + 1) % items.length);
-  }, [isCarousel, items.length]);
+    setCurrentIndex(prev => Math.min(maxIndex, prev + 1));
+  }, [isCarousel, maxIndex]);
+
+  // Touch/swipe handlers for finger-following drag (touch devices)
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      if (!isCarousel) return;
+      touchStartX.current = e.touches[0].clientX;
+      setIsSwiping(true);
+    },
+    [isCarousel]
+  );
+
+  const handleTouchMove = useCallback(
+    (e: React.TouchEvent) => {
+      if (!isSwiping) return;
+      const diff = e.touches[0].clientX - touchStartX.current;
+      // Apply resistance when dragging past the start/end boundaries
+      const atStart = currentIndex === 0;
+      const atEnd = currentIndex >= maxIndex;
+      if ((atStart && diff > 0) || (atEnd && diff < 0)) {
+        setSwipeOffset(diff * 0.3);
+      } else {
+        setSwipeOffset(diff);
+      }
+    },
+    [isSwiping, currentIndex, maxIndex]
+  );
+
+  const handleTouchEnd = useCallback(() => {
+    if (!isSwiping) return;
+    setIsSwiping(false);
+
+    const containerWidth = windowRef.current?.offsetWidth || 0;
+    const threshold = containerWidth * 0.15;
+
+    if (swipeOffset > threshold) {
+      prevSlide();
+    } else if (swipeOffset < -threshold) {
+      nextSlide();
+    }
+
+    setSwipeOffset(0);
+  }, [isSwiping, swipeOffset, prevSlide, nextSlide]);
 
   // Equalize card heights
   useEffect(() => {
@@ -162,10 +238,6 @@ function ProductCardPanel({
     );
   };
 
-  // For infinite scroll with peeking, starting in the middle of the repeated array
-  const displayItems = [...items, ...items, ...items, ...items, ...items];
-  const offset = items.length * 2;
-
   return !isCarousel ? (
     <div className="flex w-full max-w-[1280px] flex-wrap justify-center gap-4">
       {items.map((item, index) => renderCard(item, index))}
@@ -182,33 +254,53 @@ function ProductCardPanel({
         {/* Navigation Arrows */}
         {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">
-            <Button
-              onClick={prevSlide}
-              className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-gray-100 bg-white p-2 text-text shadow-cardDrop transition-all hover:bg-gray-50"
-              aria-label="Previous"
-            >
-              <MaterialIcon name="arrow_back" size={24} />
-            </Button>
+            {currentIndex > 0 ? (
+              <Button
+                onClick={prevSlide}
+                className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-gray-100 bg-white p-2 text-text shadow-cardDrop transition-all hover:bg-gray-50"
+                aria-label="Previous"
+              >
+                <MaterialIcon name="arrow_back" size={24} />
+              </Button>
+            ) : (
+              <span className="h-12 w-12" aria-hidden="true" />
+            )}
 
-            <Button
-              onClick={nextSlide}
-              className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-gray-100 bg-white p-2 text-text shadow-cardDrop transition-all hover:bg-gray-50"
-              aria-label="Next"
-            >
-              <MaterialIcon name="arrow_forward" size={24} />
-            </Button>
+            {currentIndex < maxIndex ? (
+              <Button
+                onClick={nextSlide}
+                className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-gray-100 bg-white p-2 text-text shadow-cardDrop transition-all hover:bg-gray-50"
+                aria-label="Next"
+              >
+                <MaterialIcon name="arrow_forward" size={24} />
+              </Button>
+            ) : (
+              <span className="h-12 w-12" aria-hidden="true" />
+            )}
           </div>
         )}
 
         {/* Carousel Window */}
-        <div className="mx-auto max-w-[1280px] overflow-hidden">
+        <div
+          ref={windowRef}
+          className="mx-auto max-w-[1280px] select-none overflow-hidden"
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+          onTouchCancel={handleTouchEnd}
+        >
           <div
-            className="flex items-stretch gap-4 pb-4 transition-transform duration-500 ease-in-out"
+            className={cx(
+              "ml-8 flex items-stretch gap-4 pb-4",
+              isSwiping
+                ? "transition-none"
+                : "transition-transform duration-500 ease-in-out"
+            )}
             style={{
-              transform: `translateX(calc(-${offset + currentIndex} * (392px + 12px)))`,
+              transform: `translateX(calc(-${currentIndex} * (392px + 16px) + ${swipeOffset}px))`,
             }}
           >
-            {displayItems.map((item, index) => renderCard(item, index, false))}
+            {items.map((item, index) => renderCard(item, index, false))}
           </div>
         </div>
       </div>

package/src/contentful/blocks/cart-retention-banner/index.tsx

@@ -70,6 +70,8 @@ const CartRetentionBanner: React.FC<{
           <Button
             onClick={continueCheckout}
             buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
+            disableAnimation={cta?.disableAnimation ?? true}
+            animationType={cta?.animationType}
           />
         </div>
       </div>
@@ -98,6 +100,8 @@ const CartRetentionBanner: React.FC<{
             <Button
               onClick={continueCheckout}
               buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
+              disableAnimation={cta?.disableAnimation ?? true}
+              animationType={cta?.animationType}
             />
           </div>
         </div>

package/src/contentful/blocks/cart-retention-banner/types.ts

@@ -1,3 +1,5 @@
+import type { AnimationType } from "@shared/components/animation-wrapper";
+
 export interface TypeCartRetentionBannerFields {
   entryTitle?: string;
   anchorId?: string;
@@ -5,7 +7,12 @@ export interface TypeCartRetentionBannerFields {
   description?: {
     json: any;
   };
-  cta?: { buttonLabel?: string; [key: string]: any };
+  cta?: {
+    buttonLabel?: string;
+    disableAnimation?: boolean;
+    animationType?: AnimationType | AnimationType[];
+    [key: string]: any;
+  };
 }
 
 export type TypeCartRetentionBanner = TypeCartRetentionBannerFields;

package/src/contentful/blocks/primary-hero/index.tsx

@@ -30,10 +30,10 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
 
   const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
   return (
-    <div className="component-container p-5 lg:flex lg:min-h-[724px] lg:items-center lg:p-0 lg:py-4">
+    <div className="component-container p-5 xl:flex xl:min-h-[724px] xl:items-center xl:p-0 xl:py-4">
       <div
         className={cx(
-          "primary-hero-container mx-auto flex w-full flex-col sm:items-center sm:text-center lg:h-full lg:max-w-120 lg:flex-row lg:items-center lg:justify-between lg:gap-4 lg:text-left"
+          "primary-hero-container mx-auto flex w-full flex-col sm:items-center sm:text-center xl:h-full xl:max-w-120 xl:flex-row xl:items-center xl:justify-between xl:gap-4 xl:text-left"
         )}
       >
         {/* Left column: navy background, headline, body, address, button, link */}
@@ -84,7 +84,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             {/* checklist */}
             {checklist && (
               <Checklist
-                listItemClassName="text-white text-left"
+                listItemClassName="body2 text-white text-left"
                 items={checklist.map(item =>
                   item.iconUrl
                     ? { title: item.title, iconUrl: item.iconUrl }
@@ -145,7 +145,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
         </div>
 
         {/* mobile hero image and bottom link */}
-        <div className="lg:hidden">
+        <div className="xl:hidden">
           <div className={"relative my-8"}>
             {badgeImage ? (
               <NextImage
@@ -207,7 +207,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
         </div>
 
         {/* Right column: bright blue background, diagonal top edge, hero image */}
-        <div className={cx("relative hidden lg:block")}>
+        <div className={cx("relative hidden xl:block")}>
           {badgeImage ? (
             <NextImage
               src={badgeImage}

package/src/hooks/use-carousel-swipe.test.ts

@@ -390,4 +390,43 @@ describe("useCarouselSwipe", () => {
       removeEventListenerSpy.mockRestore();
     });
   });
+
+  describe("SSR safety (window undefined)", () => {
+    it("can be created without throwing when window is undefined and uses fallback containerWidth", () => {
+      const origWindow = globalThis.window;
+      // @ts-expect-error - intentionally deleting window to simulate SSR
+      delete globalThis.window;
+
+      // Polyfill TextEncoder/TextDecoder required by react-dom/server in jest
+      const { TextEncoder, TextDecoder } = require("util");
+      const origTE = globalThis.TextEncoder;
+      const origTD = globalThis.TextDecoder;
+      globalThis.TextEncoder = TextEncoder;
+      globalThis.TextDecoder = TextDecoder;
+
+      let hookResult: ReturnType<typeof useCarouselSwipe> | undefined;
+
+      function TestComponent() {
+        hookResult = useCarouselSwipe(defaultConfig);
+        return null;
+      }
+
+      try {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const { renderToString } = require("react-dom/server");
+        // renderToString simulates real SSR: no window, no effects run
+        renderToString(React.createElement(TestComponent));
+
+        // containerWidth should use the fallback value of 1 since window is absent
+        expect(hookResult!.containerWidth).toBe(1);
+        expect(hookResult!.isSwiping).toBe(false);
+        expect(hookResult!.currentIndex).toBe(0);
+      } finally {
+        // Always restore globals so subsequent tests aren't affected
+        globalThis.window = origWindow;
+        globalThis.TextEncoder = origTE;
+        globalThis.TextDecoder = origTD;
+      }
+    });
+  });
 });

package/src/hooks/use-carousel-swipe.ts

@@ -115,7 +115,9 @@ export function useCarouselSwipe(
   const [currentIndex, setCurrentIndex] = useState(0);
   const [swipeOffset, setSwipeOffset] = useState(0);
   const [isSwiping, setIsSwiping] = useState(false);
-  const [containerWidth, setContainerWidth] = useState(window.innerWidth);
+  const [containerWidth, setContainerWidth] = useState(
+    typeof window !== "undefined" ? window.innerWidth : 1,
+  );
   // Performance: Store mobile state to avoid repeated window.innerWidth checks on every render
   // This prevents expensive DOM queries during swipe operations
   const [isMobile, setIsMobile] = useState(false);