@growth-angels/ds-core 1.20.0 → 1.21.1

package/dist/lib/hydrate-carousel.js

@@ -24,5 +24,6 @@ export function HydrateCarousel(islands) {
         });
         const root = createRoot(carousel);
         root.render(createElement(Component, { ...parsedProps, children }));
+        carousel.setAttribute("data-hydrated", "true");
     });
 }

package/dist/organisms/Carousel/Carousel.types.d.ts

@@ -18,6 +18,11 @@ export type CarouselAttributes = {
     navigation?: {
         positionY: 'bottom' | 'top';
     };
+    autoplay?: {
+        delay: number;
+        disableOnInteraction?: boolean;
+    };
+    speed?: number;
 };
 export interface CarouselProps extends CarouselAttributes, WordpressDefault {
     children: React.ReactNode | React.ReactNode[];

package/dist/organisms/Carousel/CarouselSwiper.js

@@ -4,7 +4,7 @@ import { Button } from "../../atoms/atoms";
 import Swiper from "swiper";
 import { Autoplay, Navigation, Pagination } from "swiper/modules";
 export const CarouselSwiper = (props) => {
-    const { children, slidesPerView: slidesPerViewDefault, spaceBetween = 48, navigation, pagination, hasPagination, hasNavigation, loop = false, } = props;
+    const { children, slidesPerView: slidesPerViewDefault, spaceBetween = 48, navigation, pagination, hasPagination, hasNavigation, loop = false, autoplay, speed, } = props;
     const classes = ["ga-ds-carousel"];
     if (props.extraClassNames) {
         if (typeof props.extraClassNames === "string") {
@@ -61,6 +61,10 @@ export const CarouselSwiper = (props) => {
                             bulletActiveClass: "ga-ds-carousel__dot--active",
                         }
                         : false,
+                    autoplay: autoplay
+                        ? { delay: autoplay.delay || 5000, disableOnInteraction: autoplay.disableOnInteraction ?? false }
+                        : false,
+                    speed: speed || 300,
                 });
                 setSwiperInstance(swiper);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "1.20.0",
+  "version": "1.21.1",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,

package/src/lib/hydrate-carousel.tsx

@@ -27,5 +27,6 @@ export function HydrateCarousel(islands: NodeListOf<Element> | null) {
     const root = createRoot(carousel)
 
     root.render(createElement(Component, { ...parsedProps, children }))
+    carousel.setAttribute("data-hydrated", "true")
   })
 }

package/src/organisms/Carousel/Carousel.types.ts

@@ -19,6 +19,11 @@ export type CarouselAttributes = {
   navigation?: {
     positionY: 'bottom' | 'top';
   }
+  autoplay?: {
+    delay: number;
+    disableOnInteraction?: boolean;
+  }
+  speed?: number;
 }
 export interface CarouselProps extends CarouselAttributes, WordpressDefault {
   children: React.ReactNode | React.ReactNode[]

package/src/organisms/Carousel/CarouselSwiper.tsx

@@ -14,6 +14,8 @@ export const CarouselSwiper = (props: CarouselProps) => {
     hasPagination,
     hasNavigation,
     loop = false,
+    autoplay,
+    speed,
   } = props
 
   const classes = ["ga-ds-carousel"]
@@ -74,6 +76,10 @@ export const CarouselSwiper = (props: CarouselProps) => {
                 bulletActiveClass: "ga-ds-carousel__dot--active",
               }
             : false,
+          autoplay: autoplay
+            ? { delay: autoplay.delay || 5000, disableOnInteraction: autoplay.disableOnInteraction ?? false }
+            : false,
+          speed: speed || 300,
         })
 
         setSwiperInstance(swiper)