@windstream/react-shared-components 0.0.67 → 0.0.69

package/src/contentful/blocks/carousel/Carousel.stories.tsx

@@ -1,23 +1,23 @@
-import { Carousel } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Carousel> = {
-  title: "Contentful Blocks/Carousel",
-  component: Carousel,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component: "Contentful carousel block.",
-      },
-    },
-  },
-  args: { fields: {} },
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { Carousel } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Carousel> = {
+  title: "Contentful Blocks/Carousel",
+  component: Carousel,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful carousel block.",
+      },
+    },
+  },
+  args: {  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

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

@@ -0,0 +1,314 @@
+"use client";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  CarouselWithProductCards,
+  CarouselWithTestimonialCards,
+} from "./types";
+import clsx from "clsx";
+
+import { Button } from "@shared/components/button";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { ProductCard } from "@shared/contentful/blocks/cards/product-card";
+import { TestimonialCard } from "@shared/contentful/blocks/cards/testimonial-card";
+
+export function ProductCardCarousel({
+  fields,
+}: {
+  fields: CarouselWithProductCards;
+}) {
+  const itemsExpanded = fields?.items?.items?.[0]?.benefitsExpanded || false;
+  const [desktopExpanded, setDesktopExpanded] = useState(itemsExpanded);
+  const [mobileExpandedStates, setMobileExpandedStates] = useState<
+    Record<number, boolean>
+  >({});
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const items = fields?.items?.items || [];
+  const isCarousel = items.length > 2;
+  const cardsRef = useRef<(HTMLDivElement | null)[]>([]);
+
+  const prevSlide = useCallback(() => {
+    if (!isCarousel) return;
+    setCurrentIndex(prev => (prev + 3) % items.length);
+  }, [isCarousel, items.length]);
+
+  const nextSlide = useCallback(() => {
+    if (!isCarousel) return;
+    setCurrentIndex(prev => (prev - 3 + items.length) % items.length);
+  }, [isCarousel, items.length]);
+
+  // Equalize card heights
+  useEffect(() => {
+    if (!isCarousel) return;
+
+    const equalizeHeights = () => {
+      const cards = cardsRef.current.filter(Boolean) as HTMLDivElement[];
+      if (cards.length === 0) return;
+
+      // Reset heights first
+      cards.forEach(card => {
+        card.style.height = "auto";
+      });
+
+      // Find the tallest card
+      const maxHeight = Math.max(...cards.map(card => card.offsetHeight));
+
+      // Set all cards to the max height
+      cards.forEach(card => {
+        card.style.height = `${maxHeight}px`;
+      });
+    };
+
+    // Run on mount and when expanded state changes
+    equalizeHeights();
+
+    // Re-run after a short delay due to dynamic content
+    const timeoutId = setTimeout(equalizeHeights, 100);
+
+    return () => clearTimeout(timeoutId);
+  }, [isCarousel, desktopExpanded, items.length]);
+
+  if (!items.length && !fields?.title) {
+    return null;
+  }
+
+  const renderCard = (
+    item: any,
+    globalIndex: number,
+    isMobileView: boolean = false
+  ) => {
+    const techPrefix = item?.techType?.startsWith("FIBER") ? "fiber " : "";
+    const planName = `${techPrefix}${item?.speed || ""}`;
+    const priceCents = item?.priceSuffix?.split("/")?.[0] || "00";
+    const formattedPrice = `${item?.price || "0"}.${priceCents}`;
+    const features = item?.benefits?.items || [];
+    const bestValue = item?.highlighted || false;
+    const rawBadge = item?.giftRewards?.list?.items || [];
+    const innerBadge = {
+      badgeText: item.innerBadge || "",
+      badgeIcon: item.innerBadgeIcon?.url || "",
+    };
+
+    // Mobile: individual card state, Desktop: shared state
+    const isExpanded = isMobileView
+      ? mobileExpandedStates[globalIndex] || false
+      : desktopExpanded;
+
+    const handleToggle = () => {
+      if (isMobileView) {
+        setMobileExpandedStates(prev => ({
+          ...prev,
+          [globalIndex]: !prev[globalIndex],
+        }));
+      } else {
+        setDesktopExpanded(!desktopExpanded);
+      }
+    };
+
+    const handleCtaClick = () => {
+      return;
+    };
+
+    return (
+      <div
+        ref={
+          !isMobileView
+            ? el => {
+                if (el && !cardsRef.current.includes(el)) {
+                  cardsRef.current[globalIndex] = el;
+                }
+              }
+            : undefined
+        }
+        key={`${item?.sys?.id || globalIndex}-${globalIndex}`}
+        className={clsx(
+          isMobileView
+            ? "mx-auto w-full max-w-[392px]"
+            : "w-[392px] flex-shrink-0"
+        )}
+      >
+        <ProductCard
+          planName={planName}
+          speed={item?.speed || ""}
+          price={formattedPrice}
+          description={item?.productCardDescription || ""}
+          giftBadge={rawBadge}
+          innerBadge={innerBadge}
+          theme={item?.highlighted ? "dark" : "light"}
+          bestValue={bestValue}
+          bestValueText={item?.topBadgeText || "best value"}
+          featuresTitle={item?.benefitsTitle}
+          features={features}
+          isExpanded={isExpanded}
+          onToggleExpand={handleToggle}
+          ctaText={item?.cta?.buttonLabel || "Select plan"}
+          onCtaClick={handleCtaClick}
+          hostType="smb"
+        />
+      </div>
+    );
+  };
+
+  // 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="mx-auto grid w-full max-w-[1280px] grid-cols-1 items-stretch gap-8 md:grid-cols-2 lg:grid-cols-3">
+      {items.map((item, index) => renderCard(item, index))}
+    </div>
+  ) : (
+    <>
+      {/* Mobile/Tablet View: Vertical Stack */}
+      <div className="flex flex-col gap-6 md:hidden">
+        {items.map((item, index) => renderCard(item, index, true))}
+      </div>
+
+      {/* 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>
+
+        {/* Carousel Window */}
+        <div className="mx-auto max-w-[1280px] overflow-hidden">
+          <div
+            className="flex items-stretch gap-4 pb-4 transition-transform duration-500 ease-in-out"
+            style={{
+              transform: `translateX(calc(-${offset + currentIndex} * (392px + 12px)))`,
+            }}
+          >
+            {displayItems.map((item, index) => renderCard(item, index, false))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export const TestimonialCarousel: React.FC<{
+  fields: CarouselWithTestimonialCards;
+}> = ({ fields }) => {
+  const testimonials = fields?.items?.items || [];
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const timeoutRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const nextSlide = useCallback(() => {
+    if (testimonials.length === 0) return;
+    setCurrentIndex(prev => (prev + 1) % testimonials.length);
+  }, [testimonials.length]);
+
+  const prevSlide = useCallback(() => {
+    if (testimonials.length === 0) return;
+    setCurrentIndex(prev => (prev === 0 ? testimonials.length - 1 : prev - 1));
+  }, [testimonials.length]);
+
+  // Auto-scroll logic
+  useEffect(() => {
+    if (testimonials.length === 0) return;
+
+    timeoutRef.current = setInterval(() => {
+      nextSlide();
+    }, 8000); // 5 seconds per slide
+
+    return () => {
+      if (timeoutRef.current) clearInterval(timeoutRef.current);
+    };
+  }, [nextSlide, testimonials.length]);
+
+  if (!testimonials || testimonials.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="relative mx-auto max-w-[1280px] overflow-hidden md:px-24">
+      {/* Navigation Overlay - Left (Hidden on mobile) */}
+      <Button
+        onClick={prevSlide}
+        className="group absolute left-4 top-1/2 z-20 hidden h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white p-2 text-text shadow-md transition-colors hover:bg-gray-100 md:flex"
+        aria-label="Previous"
+      >
+        <MaterialIcon name="arrow_back" size={24} />
+      </Button>
+
+      {/* Slider Track Wrapper */}
+      <div className="grid grid-cols-1 justify-items-center">
+        {/* Slides */}
+        {testimonials.map((item, index) => {
+          let offset = index - currentIndex;
+          const len = testimonials.length;
+          if (offset > len / 2) offset -= len;
+          if (offset < -len / 2) offset += len;
+
+          const isActive = offset === 0;
+
+          return (
+            <div
+              key={item.sys.id}
+              className={clsx(
+                "col-start-1 row-start-1 w-full md:max-w-[815px]",
+                // Mobile: only show active card
+                isActive ? "opacity-100" : "opacity-0",
+                // Desktop: show active and peeking cards
+                "md:opacity-100"
+              )}
+              style={{
+                transform: `translateX(${isActive ? "0%" : offset * 105 + "%"})`,
+                zIndex: isActive ? 10 : 5,
+                visibility: Math.abs(offset) > 1 ? "hidden" : "visible",
+                transition: "all 0.5s ease-in-out",
+              }}
+            >
+              <TestimonialCard
+                {...item}
+                isActive={isActive}
+                className="h-full"
+              />
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Navigation Overlay - Right (Hidden on mobile) */}
+      <Button
+        onClick={nextSlide}
+        className="group absolute right-4 top-1/2 z-20 hidden h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white p-2 text-text shadow-md transition-colors hover:bg-gray-100 md:flex"
+        aria-label="Next"
+      >
+        <MaterialIcon name="arrow_forward" size={24} />
+      </Button>
+
+      {/* Dots (Hidden on mobile) */}
+      <div className="mt-8 hidden justify-center gap-2 md:flex">
+        {testimonials.map((_, idx) => (
+          <button
+            key={idx}
+            onClick={() => setCurrentIndex(idx)}
+            className={clsx(
+              "h-2 w-2 rounded-full transition-all duration-300",
+              currentIndex === idx
+                ? "w-6 bg-white"
+                : "bg-white/40 hover:bg-white/60"
+            )}
+            aria-label={`Go to slide ${idx + 1}`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};

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

@@ -1,13 +1,50 @@
-import { CarouselProps } from "./types";
-
-import { Text } from "@shared/components/text";
-
-export const Carousel: React.FC<{ fields: CarouselProps }> = ({ fields }) => {
-  return (
-    <div>
-      <Text>Carousel</Text>
-    </div>
-  );
-};
-
-export default Carousel;
+"use client";
+
+import React from "react";
+import { ProductCardCarousel, TestimonialCarousel } from "./helper";
+import {
+  CarouselProps,
+  CarouselWithProductCards,
+  CarouselWithTestimonialCards,
+} from "./types";
+
+import { Text } from "@shared/components/text";
+
+export const Carousel: React.FC<CarouselProps> = ({
+  fields,
+  hasTestimonialCards,
+  hasProductCards,
+  disclaimerText,
+  backgroundColor,
+}) => {
+  return (
+    <div className={`${backgroundColor} mx-auto overflow-hidden px-4 py-8`}>
+      <div className="relative mx-auto flex max-w-[1280px] flex-col gap-12 overflow-visible">
+        <Text
+          as="h2"
+          className="text-center text-4xl font-bold text-text md:text-5xl"
+        >
+          {fields?.title}
+        </Text>
+        {fields?.subTitle && (
+          <Text as="h3" className="body1 mt-8 px-4 text-center">
+            {fields?.subTitle}
+          </Text>
+        )}
+        {hasTestimonialCards && (
+          <TestimonialCarousel
+            fields={fields as CarouselWithTestimonialCards}
+          />
+        )}
+        {hasProductCards && (
+          <ProductCardCarousel fields={fields as CarouselWithProductCards} />
+        )}
+        <Text as="div" className="body1 mt-8 px-4 text-center">
+          {disclaimerText}
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+export default Carousel;

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

@@ -1 +1,126 @@
-export type CarouselProps = {};
+import { ReactNode } from "react";
+
+export interface carouselFieldsInterface {
+  __typename: "ComponentCarousel";
+  sys: {
+    id: string;
+  };
+  entryName?: string;
+  anchorId?: string;
+  title?: string;
+  subTitle?: string;
+  rotationTiming?: number;
+  showArrows?: boolean;
+  autoRotate?: boolean;
+  initialSlideIndex?: number;
+  infiniteScroll?: boolean;
+  mobileNavigationType?: boolean;
+  disclaimerText?: {
+    json: any;
+  };
+  backgroundColor?: "blue" | "green" | "orange" | "purple" | "white";
+  items: {
+    items: Array<CarouselItemsType>;
+  };
+}
+
+export type CarouselItemsType =
+  | TestimonialCardFields
+  | ProductCardFields
+  | CardFields;
+
+export interface TestimonialCardFields {
+  __typename: "ComponentTestimonialCard";
+  sys: {
+    id: string;
+  };
+  title?: string;
+  author?: string;
+  role?: string;
+  rating?: number;
+  quote?: ReactNode;
+  authorImage?: {
+    url: string;
+    title?: string;
+    width?: number;
+    height?: number;
+  } | null;
+  avatarurl?: string;
+}
+
+export interface ProductCardFields {
+  __typename: "ComponentProductCard";
+  sys: {
+    id: string;
+  };
+  speed?: string;
+  price?: string;
+  priceSuffix?: string;
+  techType?: string;
+  highlighted?: boolean;
+  productCardDescription?: string;
+  benefitsTitle?: string;
+  benefitsExpanded?: boolean;
+  innerBadge?: string;
+  // GraphQL patterns for nested references
+  benefits?: {
+    items: Array<any>;
+  };
+  giftRewards?: {
+    list?: {
+      items: Array<any>;
+    };
+  };
+  cta?: {
+    buttonLabel?: string;
+    [key: string]: any;
+  };
+  innerBadgeIcon?: {
+    url: string;
+    [key: string]: any;
+  };
+}
+
+export interface CardFields {
+  __typename: "ComponentCard";
+  sys: {
+    id: string;
+  };
+  title?: string;
+  subtitle?: string;
+  eyebrow?: string;
+  body?: { json: any };
+  image?: { url: string; [key: string]: any };
+  cta?: { buttonLabel?: string; [key: string]: any };
+  ctaBottom?: { buttonLabel?: string; [key: string]: any };
+}
+
+export interface CarouselWithTestimonialCards
+  extends Omit<carouselFieldsInterface, "items"> {
+  items: {
+    items: TestimonialCardFields[];
+  };
+}
+
+export interface CarouselWithProductCards
+  extends Omit<carouselFieldsInterface, "items"> {
+  items: {
+    items: ProductCardFields[];
+  };
+}
+
+export const backgroundColorMap = {
+  blue: "bg-bg-fill-inverse",
+  green: "bg-border-success",
+  orange: "bg-orange-500",
+  purple: "bg-purple-500",
+  white: "bg-white",
+};
+
+export type CarouselProps = {
+  fields: carouselFieldsInterface;
+  hasTestimonialCards: boolean;
+  hasProductCards: boolean;
+  disclaimerText: ReactNode;
+  backgroundColor: string;
+};

package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx

@@ -1,46 +1,46 @@
-import { CtaCallout } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof CtaCallout> = {
-  title: "Contentful Blocks/CtaCallout",
-  component: CtaCallout,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "Contentful CTA callout block with title, description, and optional button.",
-      },
-    },
-  },
-  args: {
-    title: "Call to Action",
-    subTitle: "Subtitle",
-    description: "Description text.",
-    background: "white",
-    button: {
-      showButtonAs: "solid",
-      buttonVariant: "primary_brand",
-      buttonLabel: "Learn More",
-      buttonPrefix: "",
-      badge: "",
-      badgeIcon: "",
-      buttonIcon: "",
-      buttonIconPosition: "left",
-      href: "",
-      target: "_self",
-      anchorId: "",
-      preserveQueryParameters: false,
-      clickToOpen: "",
-      tabmodalNameToOpen: "",
-      preDefinedFunctionExecution: "",
-    },
-  },
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { CtaCallout } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof CtaCallout> = {
+  title: "Contentful Blocks/CtaCallout",
+  component: CtaCallout,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Contentful CTA callout block with title, description, and optional button.",
+      },
+    },
+  },
+  args: {
+    title: "Call to Action",
+    subTitle: "Subtitle",
+    description: "Description text.",
+    background: "white",
+    button: {
+      showButtonAs: "solid",
+      buttonVariant: "primary_brand",
+      buttonLabel: "Learn More",
+      buttonPrefix: "",
+      badge: "",
+      badgeIcon: "",
+      buttonIcon: "",
+      buttonIconPosition: "left",
+      href: "",
+      target: "_self",
+      anchorId: "",
+      preserveQueryParameters: false,
+      clickToOpen: "",
+      tabmodalNameToOpen: "",
+      preDefinedFunctionExecution: "",
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};