@windstream/react-shared-components 0.1.79 → 0.1.81

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

@@ -13,13 +13,15 @@ import { useCarouselSwipe } from "@shared/hooks/use-carousel-swipe";
 import { CheckPlansProps } from "@shared/types/micro-components";
 import { cx } from "@shared/utils";
 
-export function ProductCardCarousel({
+function ProductCardPanel({
   fields,
   renderCheckPlans,
+  isVisible = true,
 }: {
   fields: CarouselWithProductCards;
   onModalButtonClick?: (id?: string) => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+  isVisible?: boolean;
 }) {
   const itemsExpanded = fields?.items?.items?.[0]?.benefitsExpanded || false;
   const [desktopExpanded, setDesktopExpanded] = useState(itemsExpanded);
@@ -29,6 +31,7 @@ export function ProductCardCarousel({
   const [currentIndex, setCurrentIndex] = useState(0);
   const items = fields?.items?.items || [];
   const isCarousel = items.length > 2;
+  const showArrows = fields?.showArrows !== false && isCarousel;
   const cardsRef = useRef<(HTMLDivElement | null)[]>([]);
 
   const prevSlide = useCallback(() => {
@@ -43,7 +46,7 @@ export function ProductCardCarousel({
 
   // Equalize card heights
   useEffect(() => {
-    if (!isCarousel) return;
+    if (!isCarousel || !isVisible) return;
 
     const equalizeHeights = () => {
       const cards = cardsRef.current.filter(Boolean) as HTMLDivElement[];
@@ -70,7 +73,7 @@ export function ProductCardCarousel({
     const timeoutId = setTimeout(equalizeHeights, 100);
 
     return () => clearTimeout(timeoutId);
-  }, [isCarousel, desktopExpanded, items.length]);
+  }, [isCarousel, isVisible, desktopExpanded, items.length]);
 
   if (!items.length && !fields?.title) {
     return null;
@@ -177,23 +180,25 @@ export function ProductCardCarousel({
       {/* Desktop View: Horizontal Carousel */}
       <div className="relative hidden w-full md:block">
         {/* Navigation Arrows */}
-        <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>
-
-          <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>
-        </div>
+        {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>
+
+            <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>
+          </div>
+        )}
 
         {/* Carousel Window */}
         <div className="mx-auto max-w-[1280px] overflow-hidden">
@@ -211,6 +216,55 @@ export function ProductCardCarousel({
   );
 }
 
+export function ProductCardCarousel({
+  fields,
+  renderCheckPlans,
+  activeTab,
+  tabs,
+}: {
+  fields: CarouselWithProductCards;
+  onModalButtonClick?: (id?: string) => void;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+  activeTab?: string;
+  tabs?: string[];
+}) {
+  const allItems = fields?.items?.items || [];
+
+  if (tabs && tabs.length > 1 && activeTab) {
+    return (
+      <>
+        {tabs.map(tab => {
+          const tabItems = allItems.filter(item => {
+            const category = item.productCategory || tabs[0];
+            return category === tab;
+          });
+          const tabFields = {
+            ...fields,
+            items: { ...fields.items, items: tabItems },
+          };
+          return (
+            <div
+              key={tab}
+              style={{ display: tab === activeTab ? "block" : "none" }}
+              aria-hidden={tab !== activeTab}
+            >
+              <ProductCardPanel
+                fields={tabFields as CarouselWithProductCards}
+                renderCheckPlans={renderCheckPlans}
+                isVisible={tab === activeTab}
+              />
+            </div>
+          );
+        })}
+      </>
+    );
+  }
+
+  return (
+    <ProductCardPanel fields={fields} renderCheckPlans={renderCheckPlans} />
+  );
+}
+
 /**
  * Individual slide component for the testimonial carousel
  * Memoized to prevent unnecessary re-renders of inactive slides

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

@@ -58,6 +58,8 @@ export const Carousel: React.FC<CarouselProps> = ({
                 onModalButtonClick={onModalButtonClick}
                 renderCheckPlans={renderCheckPlans}
                 fields={fields as CarouselWithProductCards}
+                activeTab={activeTab}
+                tabs={tabs}
               />
             )}
           </div>

package/src/contentful/blocks/carousel/types.ts

@@ -64,6 +64,7 @@ export interface ProductCardFields {
   benefitsTitle?: string;
   benefitsExpanded?: boolean;
   innerBadge?: string;
+  productCategory?: string;
   // GraphQL patterns for nested references
   benefits?: {
     items: Array<any>;