@growth-angels/ds-core 1.21.0 → 1.21.2

package/dist/layout/Container/Container.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Container = (props) => {
     const { size, children, style, padding, margin, stretch, id, paddingPosition, marginPosition } = props;
-    console.log("Container props", props);
     const classes = [
         "ga-ds-container",
         `ga-ds-container--${size}`,

package/dist/lib/hydrate-carousel.js

@@ -13,6 +13,8 @@ import "swiper/css/autoplay";
 const { createElement, createRoot } = useReactAdapter();
 export function HydrateCarousel(islands) {
     islands?.forEach((carousel) => {
+        // first hide all carousels to prevent FOUC
+        carousel.setAttribute("style", "opacity: 0");
         const Component = CarouselSwiper;
         if (!Component)
             return;
@@ -25,5 +27,7 @@ export function HydrateCarousel(islands) {
         const root = createRoot(carousel);
         root.render(createElement(Component, { ...parsedProps, children }));
         carousel.setAttribute("data-hydrated", "true");
+        // finally show the carousel
+        carousel.setAttribute("style", "opacity: 1");
     });
 }

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

@@ -22,6 +22,7 @@ export type CarouselAttributes = {
         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, autoplay, } = 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") {
@@ -64,6 +64,7 @@ export const CarouselSwiper = (props) => {
                     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.21.0",
+  "version": "1.21.2",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,

package/src/layout/Container/Container.tsx

@@ -2,7 +2,6 @@ import type { ContainerProps } from "./Container.types"
 
 export const Container = (props: ContainerProps) => {
   const { size, children, style, padding, margin, stretch, id, paddingPosition, marginPosition } = props
-  console.log("Container props", props)
   const classes = [
     "ga-ds-container",
     `ga-ds-container--${size}`,

package/src/lib/hydrate-carousel.tsx

@@ -13,6 +13,8 @@ const { createElement, createRoot } = useReactAdapter()
 
 export function HydrateCarousel(islands: NodeListOf<Element> | null) {
   islands?.forEach((carousel) => {
+    // first hide all carousels to prevent FOUC
+    carousel.setAttribute("style", "opacity: 0")
     const Component = CarouselSwiper
     if (!Component) return
     const props = carousel.getAttribute("data-props")
@@ -28,5 +30,7 @@ export function HydrateCarousel(islands: NodeListOf<Element> | null) {
 
     root.render(createElement(Component, { ...parsedProps, children }))
     carousel.setAttribute("data-hydrated", "true")
+    // finally show the carousel
+    carousel.setAttribute("style", "opacity: 1")
   })
 }

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

@@ -23,6 +23,7 @@ export type CarouselAttributes = {
     delay: number;
     disableOnInteraction?: boolean;
   }
+  speed?: number;
 }
 export interface CarouselProps extends CarouselAttributes, WordpressDefault {
   children: React.ReactNode | React.ReactNode[]

package/src/organisms/Carousel/CarouselSwiper.tsx

@@ -15,6 +15,7 @@ export const CarouselSwiper = (props: CarouselProps) => {
     hasNavigation,
     loop = false,
     autoplay,
+    speed,
   } = props
 
   const classes = ["ga-ds-carousel"]
@@ -78,6 +79,7 @@ export const CarouselSwiper = (props: CarouselProps) => {
           autoplay: autoplay
             ? { delay: autoplay.delay || 5000, disableOnInteraction: autoplay.disableOnInteraction ?? false }
             : false,
+          speed: speed || 300,
         })
 
         setSwiperInstance(swiper)