@growth-angels/ds-core 1.8.4 → 1.9.0

package/dist/organisms/Carousel/Carousel.js

@@ -16,6 +16,9 @@ export const Carousel = (props) => {
     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);
     useEffect(() => {
         if (loop) {
             setIsAtStart(false);
@@ -71,6 +74,18 @@ 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)
@@ -148,13 +163,13 @@ export const Carousel = (props) => {
             classes.push(...props.extraClassNames);
         }
     }
-    return (_jsxs("div", { className: classes.join(" "), style: style, children: [navigation?.positionY === "top" && hasNavigation && (_jsx(CarouselNavigation, { goPrev: goPrev, goNext: goNext, isAtStart: isAtStart, isAtEnd: isAtEnd })), _jsx("div", { className: "ga-ds-carousel__track", ref: trackRef, style: {
+    return (_jsxs("div", { className: classes.join(" "), style: style, children: [navigation?.positionY === "top" && displayNavigation && (_jsx(CarouselNavigation, { goPrev: goPrev, goNext: goNext, isAtStart: isAtStart, isAtEnd: isAtEnd })), _jsx("div", { className: "ga-ds-carousel__track", ref: trackRef, style: {
                     "--ga-ds-space-between": `${spaceBetween / 10}rem`,
                 }, children: context === "wp-editor"
                     ? children
                     : slides.map((child, index) => {
                         return (_jsx("div", { className: `ga-ds-carousel__slide ${index === activeDOMIndex ? "ga-ds-carousel__slide--active" : ""}`, children: child }, index));
-                    }) }), _jsxs("div", { className: "ga-ds-carousel__navigation", children: [pagination && hasPagination && (_jsx(CarouselPagination, { totalPages: totalPages, activeSlideIndex: activeSlideIndex, goTo: goTo, clickable: pagination.clickable })), hasNavigation && navigation?.positionY === "bottom" && (_jsx(CarouselNavigation, { goPrev: goPrev, goNext: goNext, isAtStart: isAtStart, isAtEnd: isAtEnd }))] })] }));
+                    }) }), _jsxs("div", { className: "ga-ds-carousel__navigation", children: [pagination && displayPagination && (_jsx(CarouselPagination, { totalPages: totalPages, activeSlideIndex: activeSlideIndex, goTo: goTo, clickable: pagination.clickable })), displayNavigation && navigation?.positionY === "bottom" && (_jsx(CarouselNavigation, { goPrev: goPrev, goNext: goNext, isAtStart: isAtStart, isAtEnd: isAtEnd }))] })] }));
 };
 const CarouselNavigation = ({ goPrev, goNext, isAtStart, isAtEnd, }) => {
     return (_jsxs("div", { className: `ga-ds-carousel__arrows`, children: [_jsx(Button, { extraClassNames: ["ga-ds-carousel__button", "ga-ds-carousel__button--prev"], icon: "chevron-left", onClick: goPrev, disabled: isAtStart }), _jsx(Button, { extraClassNames: ["ga-ds-carousel__button", "ga-ds-carousel__button--next"], icon: "chevron-right", onClick: goNext, disabled: isAtEnd })] }));

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof Carousel>;
 export declare const Primary: Story;
 export declare const LoopingCarousel: Story;
+export declare const NotOverflowing: Story;

package/dist/organisms/Carousel/Carousel.stories.js

@@ -45,3 +45,18 @@ export const LoopingCarousel = {
         hasPagination: true,
     },
 };
+export const NotOverflowing = {
+    args: {
+        children: [_jsx("div", { children: "Item 1" }), _jsx("div", { children: "Item 2" }), _jsx("div", { children: "Item 3" }), _jsx("div", { children: "Item 4" })],
+        slidesPerView: { sm: 1, md: 2, lg: 2, xl: 4 },
+        spaceBetween: 12,
+        navigation: {
+            positionY: "top",
+        },
+        pagination: {
+            clickable: true,
+        },
+        hasNavigation: true,
+        hasPagination: true,
+    },
+};

package/package.json

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

package/src/layout/Container/Container.scss

@@ -1,4 +1,5 @@
 @use "@growth-angels/foundation/variables" as *;
+@use "@growth-angels/foundation/utils" as *;
 @use "sass:map";
 
 .ga-ds-container {

package/src/organisms/Carousel/Carousel.stories.tsx

@@ -50,3 +50,19 @@ export const LoopingCarousel: Story = {
     hasPagination: true,
   },
 }
+
+export const NotOverflowing: Story = {
+  args: {
+    children: [<div>Item 1</div>, <div>Item 2</div>, <div>Item 3</div>, <div>Item 4</div>],
+    slidesPerView: { sm: 1, md: 2, lg: 2, xl: 4 },
+    spaceBetween: 12,
+    navigation: {
+      positionY: "top",
+    },
+    pagination: {
+      clickable: true,
+    },
+    hasNavigation: true,
+    hasPagination: true,
+  },
+}

package/src/organisms/Carousel/Carousel.tsx

@@ -29,6 +29,10 @@ 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)
 
   useEffect(() => {
     if (loop) {
@@ -91,6 +95,21 @@ 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}`])
   )
@@ -176,7 +195,7 @@ export const Carousel = (props: CarouselProps) => {
 
   return (
     <div className={classes.join(" ")} style={style}>
-      {navigation?.positionY === "top" && hasNavigation && (
+      {navigation?.positionY === "top" && displayNavigation && (
         <CarouselNavigation goPrev={goPrev} goNext={goNext} isAtStart={isAtStart} isAtEnd={isAtEnd} />
       )}
       <div
@@ -203,7 +222,7 @@ export const Carousel = (props: CarouselProps) => {
       </div>
 
       <div className="ga-ds-carousel__navigation">
-        {pagination && hasPagination && (
+        {pagination && displayPagination && (
           <CarouselPagination
             totalPages={totalPages}
             activeSlideIndex={activeSlideIndex}
@@ -211,7 +230,7 @@ export const Carousel = (props: CarouselProps) => {
             clickable={pagination.clickable}
           />
         )}
-        {hasNavigation && navigation?.positionY === "bottom" && (
+        {displayNavigation && navigation?.positionY === "bottom" && (
           <CarouselNavigation goPrev={goPrev} goNext={goNext} isAtStart={isAtStart} isAtEnd={isAtEnd} />
         )}
       </div>