@growth-angels/ds-core 1.17.0 → 1.18.0

package/dist/layout/Container/Container.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Container = (props) => {
-    const { size, children, style, padding, margin, stretch, id } = 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}`,
-        ...(padding ? [`ga-ds-util-padding--${padding}`] : []),
-        ...(margin ? [`ga-ds-util-margin--${margin}`] : []),
+        ...(padding ? [`ga-ds-util-padding${paddingPosition ? `-${paddingPosition}` : ""}--${padding}`] : []),
+        ...(margin ? [`ga-ds-util-margin${marginPosition ? `-${marginPosition}` : ""}--${margin}`] : []),
         ...(stretch ? [`ga-ds-container-stretch--${stretch}`] : []),
         ...(props.extraClassNames || []),
     ];

package/dist/layout/Container/Container.types.d.ts

@@ -6,4 +6,6 @@ export interface ContainerProps extends WordpressDefault, React.HTMLAttributes<H
     stretch?: ContainerStretch;
     children: React.ReactNode | React.ReactNode[];
     style?: React.CSSProperties;
+    paddingPosition?: "top" | "bottom";
+    marginPosition?: "top" | "bottom";
 }

package/dist/layout/Grid/Grid.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Grid = (props) => {
-    const { children, alignItems, justifyContent, extraClassNames, padding, margin } = props;
+    const { children, alignItems, justifyContent, extraClassNames, padding, margin, paddingPosition, marginPosition } = props;
     const classNames = [
         "ga-ds-grid",
-        ...(padding ? [`ga-ds-util-padding--${padding}`] : []),
-        ...(margin ? [`ga-ds-util-margin--${margin}`] : []),
+        ...(padding ? [`ga-ds-util-padding${paddingPosition ? `-${paddingPosition}` : ""}--${padding}`] : []),
+        ...(margin ? [`ga-ds-util-margin${marginPosition ? `-${marginPosition}` : ""}--${margin}`] : []),
         ...(extraClassNames || []),
     ];
     return (_jsx("div", { className: classNames.join(" "), style: { ...(alignItems !== "none" && { alignItems }), ...(justifyContent !== "none" && { justifyContent }) }, children: children }));

package/dist/layout/Grid/Grid.types.d.ts

@@ -2,6 +2,8 @@ import { WordpressDefault } from "../../global.types";
 export interface GridAttributes {
     alignItems: 'flex-start' | 'center' | 'flex-end' | 'none';
     justifyContent: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'none';
+    paddingPosition?: 'top' | 'bottom';
+    marginPosition?: 'top' | 'bottom';
 }
 export interface GridProps extends WordpressDefault, GridAttributes {
     children: React.ReactNode | React.ReactNode[];

package/dist/lib/hydrate-carousel.d.ts

@@ -1 +1,3 @@
+import "swiper/css";
+import "swiper/css/autoplay";
 export declare function HydrateCarousel(islands: NodeListOf<Element> | null): void;

package/dist/lib/hydrate-carousel.js

@@ -2,9 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CarouselSwiper } from "../organisms/Carousel/CarouselSwiper";
 import { useReactAdapter } from "../hooks/useReactAdaptater";
 import { NativeChildWrapper } from "./utils/native-child-wrapper";
+import Swiper from "swiper";
+import * as modules from "swiper/modules";
+window.Swiper = {
+    instance: Swiper,
+    modules,
+};
+import "swiper/css";
+import "swiper/css/autoplay";
 const { createElement, createRoot } = useReactAdapter();
 export function HydrateCarousel(islands) {
-    console.log("HydrateCarousel called with islands:", islands);
     islands?.forEach((carousel) => {
         const Component = CarouselSwiper;
         if (!Component)

package/dist/organisms/Carousel/CarouselSwiper.js

@@ -1,36 +1,61 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useReactAdapter } from "../../hooks/useReactAdaptater";
-import { useBreakpointObserver } from "../../hooks/useBreakPointObserver";
 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 = 20, navigation, pagination, context, hasPagination, hasNavigation, loop = false, } = props;
-    const Swiper = window.Swiper.instance;
-    const { Autoplay, Navigation, Pagination } = window.Swiper.modules;
+    const { children, slidesPerView: slidesPerViewDefault, spaceBetween = 48, navigation, pagination, hasPagination, hasNavigation, loop = false, } = props;
+    const classes = ["ga-ds-carousel"];
+    if (props.extraClassNames) {
+        if (typeof props.extraClassNames === "string") {
+            classes.push(props.extraClassNames);
+        }
+        else {
+            classes.push(...props.extraClassNames);
+        }
+    }
     if (Swiper) {
         const slidesPerView = { xs: 1, ...slidesPerViewDefault };
         const { useEffect, useState, useRef, Children } = useReactAdapter();
         const trackRef = useRef(null);
+        const containerRef = useRef(null);
         const slides = Children.toArray(children);
-        const breakpoint = useBreakpointObserver({ xs: 375, sm: 576, md: 768, lg: 992, xl: 1200, xxl: 1440 });
         const [swiperInstance, setSwiperInstance] = useState(null);
         useEffect(() => {
-            if (trackRef.current && !swiperInstance) {
-                const currentSlidesPerView = slidesPerView[breakpoint] ??
-                    (typeof slidesPerView === "number" ? slidesPerView : slidesPerView.xl ?? 1);
+            if (trackRef.current && containerRef.current && !swiperInstance) {
+                const { current } = containerRef;
                 const swiper = new Swiper(trackRef.current, {
                     modules: [Autoplay, Navigation, Pagination],
-                    slidesPerView: currentSlidesPerView,
+                    slidesPerView: 1,
+                    breakpoints: {
+                        375: {
+                            slidesPerView: slidesPerView.xs ?? 1,
+                        },
+                        576: {
+                            slidesPerView: slidesPerView.sm ?? 1,
+                        },
+                        768: {
+                            slidesPerView: slidesPerView.md ?? 1,
+                        },
+                        992: {
+                            slidesPerView: slidesPerView.lg ?? 1,
+                        },
+                        1200: {
+                            slidesPerView: slidesPerView.xl ?? 1,
+                        },
+                    },
                     spaceBetween,
                     loop,
+                    mousewheel: true,
                     navigation: hasNavigation
                         ? {
-                            nextEl: ".ga-ds-carousel__button--next",
-                            prevEl: ".ga-ds-carousel__button--prev",
+                            nextEl: current.querySelector(".ga-ds-carousel__button--next"),
+                            prevEl: current.querySelector(".ga-ds-carousel__button--prev"),
                         }
                         : false,
                     pagination: hasPagination
                         ? {
-                            el: ".ga-ds-carousel__dots",
+                            el: current.querySelector(".ga-ds-carousel__dots"),
                             clickable: pagination ? pagination.clickable : false,
                             bulletClass: "ga-ds-carousel__dot",
                             bulletActiveClass: "ga-ds-carousel__dot--active",
@@ -39,19 +64,8 @@ export const CarouselSwiper = (props) => {
                 });
                 setSwiperInstance(swiper);
             }
-        }, [
-            breakpoint,
-            slidesPerView,
-            spaceBetween,
-            navigation,
-            pagination,
-            hasNavigation,
-            hasPagination,
-            loop,
-            trackRef,
-            swiperInstance,
-        ]);
-        return (_jsxs("div", { className: "ga-carousel-swiper", children: [_jsx("div", { className: "swiper", ref: trackRef, children: _jsx("div", { className: "swiper-wrapper", children: slides.map((slide, index) => (_jsx("div", { className: "swiper-slide", children: slide }, index))) }) }), _jsxs("div", { className: "ga-ds-carousel__navigation", children: [_jsx("div", { className: "ga-ds-carousel__dots" }), _jsx(CarouselNavigation, {})] })] }));
+        }, [slidesPerView, spaceBetween, navigation, pagination, hasNavigation, hasPagination, loop, trackRef, swiperInstance]);
+        return (_jsxs("div", { className: `ga-carousel-swiper ${classes.join(" ")}`, ref: containerRef, children: [_jsx("div", { className: "swiper", ref: trackRef, children: _jsx("div", { className: "swiper-wrapper", children: slides.map((slide, index) => (_jsx("div", { className: "swiper-slide", children: slide }, index))) }) }), hasNavigation || hasPagination ? (_jsxs("div", { className: "ga-ds-carousel__navigation", children: [hasPagination && _jsx("div", { className: "ga-ds-carousel__dots" }), hasNavigation && _jsx(CarouselNavigation, {})] })) : null] }));
     }
     return _jsx("div", { children: "Swiper library is not loaded." });
 };

package/package.json

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

package/src/layout/Container/Container.tsx

@@ -1,12 +1,13 @@
 import type { ContainerProps } from "./Container.types"
 
 export const Container = (props: ContainerProps) => {
-  const { size, children, style, padding, margin, stretch, id } = 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}`,
-    ...(padding ? [`ga-ds-util-padding--${padding}`] : []),
-    ...(margin ? [`ga-ds-util-margin--${margin}`] : []),
+    ...(padding ? [`ga-ds-util-padding${paddingPosition ? `-${paddingPosition}` : ""}--${padding}`] : []),
+    ...(margin ? [`ga-ds-util-margin${marginPosition ? `-${marginPosition}` : ""}--${margin}`] : []),
     ...(stretch ? [`ga-ds-container-stretch--${stretch}`] : []),
     ...(props.extraClassNames || []),
   ]

package/src/layout/Container/Container.types.ts

@@ -8,4 +8,6 @@ export interface ContainerProps extends WordpressDefault, React.HTMLAttributes<H
   stretch?:ContainerStretch
   children: React.ReactNode | React.ReactNode[];
   style?: React.CSSProperties;
+  paddingPosition?: "top" | "bottom";
+  marginPosition?: "top" | "bottom";
 }

package/src/layout/Grid/Grid.tsx

@@ -1,10 +1,10 @@
 import { GridProps } from "./Grid.types"
 export const Grid = (props: GridProps): JSX.Element => {
-  const { children, alignItems, justifyContent, extraClassNames, padding, margin } = props
+  const { children, alignItems, justifyContent, extraClassNames, padding, margin, paddingPosition, marginPosition } = props
   const classNames = [
     "ga-ds-grid",
-    ...(padding ? [`ga-ds-util-padding--${padding}`] : []),
-    ...(margin ? [`ga-ds-util-margin--${margin}`] : []),
+    ...(padding ? [`ga-ds-util-padding${paddingPosition ? `-${paddingPosition}` : ""}--${padding}`] : []),
+    ...(margin ? [`ga-ds-util-margin${marginPosition ? `-${marginPosition}` : ""}--${margin}`] : []),
     ...(extraClassNames || []),
   ]
 

package/src/layout/Grid/Grid.types.ts

@@ -3,6 +3,8 @@ import { WordpressDefault } from "../../global.types";
 export interface GridAttributes {
   alignItems: 'flex-start' | 'center' | 'flex-end' | 'none'
   justifyContent: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'none'
+  paddingPosition?: 'top' | 'bottom'
+  marginPosition?: 'top' | 'bottom'
 }
 
 export interface GridProps extends WordpressDefault, GridAttributes {

package/src/lib/hydrate-carousel.tsx

@@ -1,10 +1,17 @@
 import { CarouselSwiper } from "../organisms/Carousel/CarouselSwiper"
 import { useReactAdapter } from "../hooks/useReactAdaptater"
 import { NativeChildWrapper } from "./utils/native-child-wrapper"
+import Swiper from "swiper"
+import * as modules from "swiper/modules"
+;(window as any).Swiper = {
+  instance: Swiper,
+  modules,
+}
+import "swiper/css"
+import "swiper/css/autoplay"
 const { createElement, createRoot } = useReactAdapter()
 
 export function HydrateCarousel(islands: NodeListOf<Element> | null) {
-  console.log("HydrateCarousel called with islands:", islands)
   islands?.forEach((carousel) => {
     const Component = CarouselSwiper
     if (!Component) return

package/src/organisms/Carousel/Carousel.scss

@@ -11,7 +11,7 @@
   &__track {
     --ga-ds-slides-per-view: 1;
     display: grid;
-    grid-auto-flow: column; // place les slides horizontalement
+    grid-auto-flow: column;
     grid-auto-columns: calc(
       (100% - (var(--ga-ds-space-between, 1rem) * (var(--ga-ds-slides-per-view, 3) - 1))) / var(--ga-ds-slides-per-view, 3)
     );
@@ -72,13 +72,14 @@
   }
 
   &__dots {
+    --dot-size: 1rem;
     display: flex;
     gap: var(--ga-ds-gap, 1rem);
 
     .ga-ds-carousel__dot {
       display: block;
-      width: 1rem;
-      height: 1rem;
+      width: var(--dot-size);
+      height: var(--dot-size);
       border-radius: 50%;
       background-color: #e2e2e2;
 

package/src/organisms/Carousel/CarouselSwiper.tsx

@@ -1,51 +1,74 @@
 import { useReactAdapter } from "../../hooks/useReactAdaptater"
-import { useBreakpointObserver } from "../../hooks/useBreakPointObserver"
 import { CarouselProps } from "./Carousel.types"
 import { Button } from "../../atoms/atoms"
+import Swiper from "swiper"
+import { Autoplay, Navigation, Pagination } from "swiper/modules"
 
 export const CarouselSwiper = (props: CarouselProps) => {
   const {
     children,
     slidesPerView: slidesPerViewDefault,
-    spaceBetween = 20,
+    spaceBetween = 48,
     navigation,
     pagination,
-    context,
     hasPagination,
     hasNavigation,
     loop = false,
   } = props
-  const Swiper = (window as any).Swiper.instance
-  const { Autoplay, Navigation, Pagination } = (window as any).Swiper.modules
+
+  const classes = ["ga-ds-carousel"]
+
+  if (props.extraClassNames) {
+    if (typeof props.extraClassNames === "string") {
+      classes.push(props.extraClassNames)
+    } else {
+      classes.push(...props.extraClassNames)
+    }
+  }
   if (Swiper) {
     const slidesPerView = { xs: 1, ...slidesPerViewDefault }
     const { useEffect, useState, useRef, Children } = useReactAdapter()
     const trackRef = useRef<HTMLDivElement>(null)
+    const containerRef = useRef<HTMLDivElement>(null)
     const slides = Children.toArray(children)
 
-    const breakpoint = useBreakpointObserver({ xs: 375, sm: 576, md: 768, lg: 992, xl: 1200, xxl: 1440 })
     const [swiperInstance, setSwiperInstance] = useState<any>(null)
 
     useEffect(() => {
-      if (trackRef.current && !swiperInstance) {
-        const currentSlidesPerView =
-          (slidesPerView as Record<string, number>)[breakpoint] ??
-          (typeof slidesPerView === "number" ? slidesPerView : (slidesPerView as any).xl ?? 1)
-
+      if (trackRef.current && containerRef.current && !swiperInstance) {
+        const { current } = containerRef
         const swiper = new Swiper(trackRef.current, {
           modules: [Autoplay, Navigation, Pagination],
-          slidesPerView: currentSlidesPerView,
+          slidesPerView: 1,
+          breakpoints: {
+            375: {
+              slidesPerView: (slidesPerView as Record<string, number>).xs ?? 1,
+            },
+            576: {
+              slidesPerView: (slidesPerView as Record<string, number>).sm ?? 1,
+            },
+            768: {
+              slidesPerView: (slidesPerView as Record<string, number>).md ?? 1,
+            },
+            992: {
+              slidesPerView: (slidesPerView as Record<string, number>).lg ?? 1,
+            },
+            1200: {
+              slidesPerView: (slidesPerView as Record<string, number>).xl ?? 1,
+            },
+          },
           spaceBetween,
           loop,
+          mousewheel: true,
           navigation: hasNavigation
             ? {
-                nextEl: ".ga-ds-carousel__button--next",
-                prevEl: ".ga-ds-carousel__button--prev",
+                nextEl: current.querySelector(".ga-ds-carousel__button--next") as HTMLElement,
+                prevEl: current.querySelector(".ga-ds-carousel__button--prev") as HTMLElement,
               }
             : false,
           pagination: hasPagination
             ? {
-                el: ".ga-ds-carousel__dots",
+                el: current.querySelector(".ga-ds-carousel__dots") as HTMLElement,
                 clickable: pagination ? pagination.clickable : false,
                 bulletClass: "ga-ds-carousel__dot",
                 bulletActiveClass: "ga-ds-carousel__dot--active",
@@ -55,21 +78,10 @@ export const CarouselSwiper = (props: CarouselProps) => {
 
         setSwiperInstance(swiper)
       }
-    }, [
-      breakpoint,
-      slidesPerView,
-      spaceBetween,
-      navigation,
-      pagination,
-      hasNavigation,
-      hasPagination,
-      loop,
-      trackRef,
-      swiperInstance,
-    ])
+    }, [slidesPerView, spaceBetween, navigation, pagination, hasNavigation, hasPagination, loop, trackRef, swiperInstance])
 
     return (
-      <div className="ga-carousel-swiper">
+      <div className={`ga-carousel-swiper ${classes.join(" ")}`} ref={containerRef}>
         <div className="swiper" ref={trackRef}>
           <div className="swiper-wrapper">
             {slides.map((slide, index) => (
@@ -79,10 +91,12 @@ export const CarouselSwiper = (props: CarouselProps) => {
             ))}
           </div>
         </div>
-        <div className="ga-ds-carousel__navigation">
-          <div className="ga-ds-carousel__dots"></div>
-          <CarouselNavigation />
-        </div>
+        {hasNavigation || hasPagination ? (
+          <div className="ga-ds-carousel__navigation">
+            {hasPagination && <div className="ga-ds-carousel__dots"></div>}
+            {hasNavigation && <CarouselNavigation />}
+          </div>
+        ) : null}
       </div>
     )
   }

package/src/utils/_spacings.scss

@@ -5,6 +5,14 @@ $spacingsMap: ("xsmall", "small", "medium", "large", "xlarge");
     padding-top: var(--ga-spacings-padding-#{$value});
     padding-bottom: var(--ga-spacings-padding-#{$value});
   }
+
+  .ga-ds-util-padding-top--#{$value} {
+    padding-top: var(--ga-spacings-padding-#{$value});
+  }
+
+  .ga-ds-util-padding-bottom--#{$value} {
+    padding-bottom: var(--ga-spacings-padding-#{$value});
+  }
 }
 
 $marginsMap: ("small", "medium", "large");
@@ -14,4 +22,10 @@ $marginsMap: ("small", "medium", "large");
     margin-top: var(--ga-spacings-margin-#{$value});
     margin-bottom: var(--ga-spacings-margin-#{$value});
   }
+  .ga-ds-util-margin-top--#{$value} {
+    margin-top: var(--ga-spacings-margin-#{$value});
+  }
+  .ga-ds-util-margin-bottom--#{$value} {
+    margin-bottom: var(--ga-spacings-margin-#{$value});
+  }
 }