@growth-angels/ds-core 1.15.1 → 1.16.1

package/dist/organisms/Carousel/Carousel.js

@@ -3,24 +3,27 @@ import { Button } from "../../atoms/atoms";
 import { useBreakpointObserver } from "../../hooks/useBreakPointObserver";
 import { useReactAdapter } from "../../hooks/useReactAdaptater";
 export const Carousel = (props) => {
-    const { children, slidesPerView = { xs: 1, sm: 1, md: 2, lg: 3, xl: 4, xxl: 5 }, spaceBetween = 20, navigation, pagination, context, hasPagination, hasNavigation, loop = false, } = props;
+    const { children, slidesPerView: slidesPerViewDefault, spaceBetween = 20, navigation, pagination, context, hasPagination, hasNavigation, loop = false, } = props;
+    const slidesPerView = { xs: 1, ...slidesPerViewDefault };
     const { useEffect, useState, useRef, Children } = useReactAdapter();
     const trackRef = useRef(null);
     const isNavigatingRef = useRef(false);
     const slides = Children.toArray(children);
-    const calculatePages = (totalSlides = 0, slidesPerView = 0) => {
-        if (slidesPerView <= 0)
-            return 1;
-        return Math.ceil(totalSlides / slidesPerView);
+    const totalSlides = slides.length;
+    const calculatePages = (slidesPerView = 0) => {
+        let pagesArr = [];
+        for (let i = slidesPerView; i < totalSlides; i++) {
+            pagesArr.push({});
+        }
+        return pagesArr.length + 1;
     };
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
     const [activeDOMIndex, setActiveDOMIndex] = useState(0);
     const [isAtEnd, setIsAtEnd] = useState(false);
     const [isAtStart, setIsAtStart] = useState(true);
     const [totalPages, setTotalPages] = useState(0);
-    const [isOverflowing, setIsOverflowing] = useState(false);
-    const displayNavigation = hasNavigation && (loop || isOverflowing);
-    const displayPagination = hasPagination && (loop || isOverflowing);
+    const displayNavigation = hasNavigation;
+    const displayPagination = hasPagination;
     useEffect(() => {
         if (loop) {
             setIsAtStart(false);
@@ -35,7 +38,7 @@ export const Carousel = (props) => {
     useEffect(() => {
         const currentSlidesPerView = slidesPerView[breakpoint] ??
             (typeof slidesPerView === "number" ? slidesPerView : slidesPerView.xl ?? 1);
-        setTotalPages(calculatePages(slides.length, currentSlidesPerView));
+        setTotalPages(calculatePages(currentSlidesPerView));
     }, [breakpoint, slidesPerView, slides.length]);
     useEffect(() => {
         const track = trackRef.current;
@@ -78,18 +81,6 @@ export const Carousel = (props) => {
         }
         return () => track.removeEventListener("scroll", handleScroll);
     }, [slides.length, loop]);
-    // Check if the slides overflow the container
-    useEffect(() => {
-        const track = trackRef.current;
-        if (!track)
-            return;
-        const handleResize = () => {
-            setIsOverflowing(track.scrollWidth > track.clientWidth);
-        };
-        handleResize(); // Initial check
-        window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
-    }, [loop]);
     const style = Object.fromEntries(Object.entries(slidesPerView).map(([key, value]) => [`--ga-ds-slides-per-view-${key}`, `${value}`]));
     const goPrev = () => {
         if (!trackRef.current)

package/package.json

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

package/src/layout/Container/Container.scss

@@ -29,8 +29,16 @@
   }
 }
 
-@include bp-up("xxl", $ga-breakpoints) {
-  .ga-ds-container--small {
+.ga-ds-container--small {
+  @include bp-up("lg", $ga-breakpoints) {
+    &:not(.ga-ds-container-stretch--right) {
+      padding-right: calc((100% - (#{map.get($ga-containers, "sm")} / 1.2)) / 2);
+    }
+    &:not(.ga-ds-container-stretch--left) {
+      padding-left: calc((100% - (#{map.get($ga-containers, "sm")})) / 2);
+    }
+  }
+  @include bp-up("xxl", $ga-breakpoints) {
     &:not(.ga-ds-container-stretch--right) {
       padding-right: calc((100% - #{map.get($ga-containers, "sm")}) / 2);
     }

package/src/organisms/Carousel/Carousel.tsx

@@ -6,7 +6,7 @@ import { CarouselProps } from "./Carousel.types"
 export const Carousel = (props: CarouselProps) => {
   const {
     children,
-    slidesPerView = { xs: 1, sm: 1, md: 2, lg: 3, xl: 4, xxl: 5 },
+    slidesPerView: slidesPerViewDefault,
     spaceBetween = 20,
     navigation,
     pagination,
@@ -15,14 +15,18 @@ export const Carousel = (props: CarouselProps) => {
     hasNavigation,
     loop = false,
   } = props
+  const slidesPerView = { xs: 1, ...slidesPerViewDefault }
   const { useEffect, useState, useRef, Children } = useReactAdapter()
   const trackRef = useRef<HTMLDivElement>(null)
   const isNavigatingRef = useRef(false)
   const slides = Children.toArray(children)
-
-  const calculatePages = (totalSlides = 0, slidesPerView = 0) => {
-    if (slidesPerView <= 0) return 1
-    return Math.ceil(totalSlides / slidesPerView)
+  const totalSlides = slides.length
+  const calculatePages = (slidesPerView = 0) => {
+    let pagesArr = []
+    for (let i = slidesPerView; i < totalSlides; i++) {
+      pagesArr.push({})
+    }
+    return pagesArr.length + 1
   }
 
   const [activeSlideIndex, setActiveSlideIndex] = useState(0)
@@ -30,10 +34,9 @@ export const Carousel = (props: CarouselProps) => {
   const [isAtEnd, setIsAtEnd] = useState(false)
   const [isAtStart, setIsAtStart] = useState(true)
   const [totalPages, setTotalPages] = useState(0)
-  const [isOverflowing, setIsOverflowing] = useState(false)
 
-  const displayNavigation = hasNavigation && (loop || isOverflowing)
-  const displayPagination = hasPagination && (loop || isOverflowing)
+  const displayNavigation = hasNavigation
+  const displayPagination = hasPagination
 
   useEffect(() => {
     if (loop) {
@@ -52,7 +55,7 @@ export const Carousel = (props: CarouselProps) => {
       (slidesPerView as Record<string, number>)[breakpoint] ??
       (typeof slidesPerView === "number" ? slidesPerView : (slidesPerView as any).xl ?? 1)
 
-    setTotalPages(calculatePages(slides.length, currentSlidesPerView))
+    setTotalPages(calculatePages(currentSlidesPerView))
   }, [breakpoint, slidesPerView, slides.length])
 
   useEffect(() => {
@@ -100,21 +103,6 @@ export const Carousel = (props: CarouselProps) => {
     return () => track.removeEventListener("scroll", handleScroll)
   }, [slides.length, loop])
 
-  // Check if the slides overflow the container
-  useEffect(() => {
-    const track = trackRef.current
-    if (!track) return
-
-    const handleResize = () => {
-      setIsOverflowing(track.scrollWidth > track.clientWidth)
-    }
-
-    handleResize() // Initial check
-
-    window.addEventListener("resize", handleResize)
-    return () => window.removeEventListener("resize", handleResize)
-  }, [loop])
-
   const style = Object.fromEntries(
     Object.entries(slidesPerView).map(([key, value]) => [`--ga-ds-slides-per-view-${key}`, `${value}`])
   )