@windstream/react-shared-components 0.1.80 → 0.1.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.1.80",
+  "version": "0.1.86",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/components/animation-wrapper/index.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import React from "react";
+import { AnimationType, AnimationWrapperProps } from "./types";
+import { motion, useReducedMotion } from "framer-motion";
+
+interface AnimationPreset {
+  whileHover: Record<string, unknown>;
+  whileTap?: Record<string, unknown>;
+  transition: Record<string, unknown>;
+}
+
+const ANIMATION_PRESETS: Record<AnimationType, AnimationPreset> = {
+  scale: {
+    whileHover: { scale: 1.02 },
+    whileTap: { scale: 0.98 },
+    transition: { duration: 0.3 },
+  },
+  shadow: {
+    whileHover: { boxShadow: "0 10px 25px rgba(0,0,0,0.15)" },
+    transition: { duration: 0.3 },
+  },
+  lift: {
+    whileHover: { y: -5 },
+    whileTap: { y: 0 },
+    transition: { type: "spring", stiffness: 300, damping: 20 },
+  },
+  opacity: {
+    whileHover: { opacity: 0.8 },
+    transition: { duration: 0.2 },
+  },
+  grow: {
+    whileHover: { scale: 1.1 },
+    whileTap: { scale: 0.95 },
+    transition: { type: "spring", stiffness: 300, damping: 20 },
+  },
+};
+
+function mergePresets(animationType?: AnimationType | AnimationType[]) {
+  if (!animationType) return undefined;
+
+  const types = Array.isArray(animationType) ? animationType : [animationType];
+  if (types.length === 0) return undefined;
+
+  return types.reduce<AnimationPreset>(
+    (merged, type) => {
+      const preset = ANIMATION_PRESETS[type];
+      return {
+        whileHover: { ...merged.whileHover, ...preset.whileHover },
+        ...(merged.whileTap || preset.whileTap
+          ? {
+              whileTap: { ...merged.whileTap, ...preset.whileTap },
+            }
+          : {}),
+        transition: { ...merged.transition, ...preset.transition },
+      };
+    },
+    { whileHover: {}, transition: {} }
+  );
+}
+
+export function AnimationWrapper({
+  children,
+  animationType,
+  // default to true for backward compatibility
+  disableAnimation = true,
+  whileHover,
+  whileTap,
+  transition,
+  ...motionProps
+}: AnimationWrapperProps) {
+  const prefersReducedMotion = useReducedMotion();
+
+  const child = React.Children.only(children) as React.ReactElement<
+    Record<string, unknown>
+  >;
+
+  if (disableAnimation || prefersReducedMotion) {
+    return child;
+  }
+
+  const preset = mergePresets(animationType);
+
+  const mergedWhileHover = preset
+    ? { ...preset.whileHover, ...(whileHover as Record<string, unknown>) }
+    : whileHover;
+
+  const mergedWhileTap =
+    preset?.whileTap || whileTap
+      ? { ...preset?.whileTap, ...(whileTap as Record<string, unknown>) }
+      : undefined;
+
+  const mergedTransition = preset
+    ? { ...preset.transition, ...(transition as Record<string, unknown>) }
+    : transition;
+
+  const isIntrinsicElement = typeof child.type === "string";
+
+  if (isIntrinsicElement) {
+    const MotionComponent = motion[
+      child.type as keyof typeof motion
+    ] as React.ComponentType<Record<string, unknown>>;
+
+    return (
+      <MotionComponent
+        {...child.props}
+        whileHover={mergedWhileHover}
+        whileTap={mergedWhileTap}
+        transition={mergedTransition}
+        {...motionProps}
+      />
+    );
+  }
+
+  return (
+    <motion.div
+      whileHover={mergedWhileHover}
+      whileTap={mergedWhileTap}
+      transition={mergedTransition}
+      {...motionProps}
+    >
+      {child}
+    </motion.div>
+  );
+}
+
+AnimationWrapper.displayName = "AnimationWrapper";
+
+export type { AnimationWrapperProps, AnimationType };

package/src/components/animation-wrapper/types.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from "react";
+import { HTMLMotionProps } from "framer-motion";
+
+export type AnimationType = "scale" | "shadow" | "lift" | "opacity" | "grow";
+
+export interface AnimationWrapperProps
+  extends Omit<HTMLMotionProps<"div">, "children"> {
+  children: ReactElement;
+  animationType?: AnimationType | AnimationType[];
+  disableAnimation?: boolean;
+}

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

@@ -6,6 +6,7 @@ import FullImageCard from "../cards/full-image-card";
 import SimpleCard from "../cards/simple-card";
 import { CalloutCardType, CalloutItem, CalloutProps } from "./types";
 
+import { AnimationWrapper } from "@shared/components/animation-wrapper";
 import { Text } from "@shared/components/text";
 import { cx } from "@shared/utils";
 
@@ -79,6 +80,8 @@ export const Callout: React.FC<CalloutProps> = ({
   cardStackingMobile = true,
   cardsWidth = true,
   noGutter = false,
+  disableAnimation = false,
+  animationType = "scale",
 }) => {
   const itemCount = items?.length ?? 0;
   const desktopCols = clampCol(
@@ -227,13 +230,24 @@ export const Callout: React.FC<CalloutProps> = ({
           <div className={cx("card-holder", gridClass)}>
             {items.map((item, index: number) =>
               isStackMode ? (
-                renderCard(item, index)
+                <AnimationWrapper
+                  key={`callout-card-${index}`}
+                  animationType={animationType}
+                  disableAnimation={disableAnimation}
+                >
+                  {renderCard(item, index)}
+                </AnimationWrapper>
               ) : (
                 <div
                   key={`callout-card-${index}`}
                   className={cx("callout-card", cardWidthClass)}
                 >
-                  {renderCard(item, index)}
+                  <AnimationWrapper
+                    animationType={animationType}
+                    disableAnimation={disableAnimation}
+                  >
+                    {renderCard(item, index)}
+                  </AnimationWrapper>
                 </div>
               )
             )}

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

@@ -1,6 +1,8 @@
 import type { ReactNode } from "react";
 import type { ButtonProps } from "../button/types";
 
+import type { AnimationType } from "@shared/components/animation-wrapper";
+
 export type CalloutCardType = "simple" | "blog" | "fullImage" | "floatingImage";
 
 export type CalloutCtaProps = ButtonProps & {
@@ -69,4 +71,8 @@ export type CalloutProps = {
   containerClassName?: string;
   /** Extra class names for the inner content wrapper. */
   innerClassName?: string;
+  /** Disable card hover/tap animations. */
+  disableAnimation?: boolean;
+  /** Animation type(s) applied to each card. */
+  animationType?: AnimationType | AnimationType[];
 };

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

package/src/index.ts

@@ -83,6 +83,12 @@ export type { SkeletonProps } from "./components/skeleton";
 export { Tooltip } from "./components/tooltip";
 export type { ToolTipProps } from "./components/tooltip";
 
+export { AnimationWrapper } from "./components/animation-wrapper";
+export type {
+  AnimationWrapperProps,
+  AnimationType,
+} from "./components/animation-wrapper";
+
 export { ViewCartButton } from "./components/view-cart-button";
 export type { ViewCartButtonProps } from "./components/view-cart-button";