@windstream/react-shared-components 0.0.68 → 0.0.69

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

@@ -1,11 +1,48 @@
-import { CarouselProps } from "./types";
+"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<{ fields: CarouselProps }> = ({ fields }) => {
+export const Carousel: React.FC<CarouselProps> = ({
+  fields,
+  hasTestimonialCards,
+  hasProductCards,
+  disclaimerText,
+  backgroundColor,
+}) => {
   return (
-    <div>
-      <Text>Carousel</Text>
+    <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>
   );
 };

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/index.ts

@@ -54,4 +54,4 @@ export { TestimonialCard } from "./blocks/cards/testimonial-card";
 export type { TestimonialCardProps } from "./blocks/cards/testimonial-card/types";
 
 export { ProductCard } from "./blocks/cards/product-card";
-export type { ProductCardProps } from "./blocks/cards/product-card/types";
+export type { ProductCardProps } from "./blocks/cards/product-card/types";