OPHJOD-1203: Add gap prop to CardCarousel and fix calculation

Opetushallitus · Jan 20, 2025 · f872743 · f872743
1 parent d7c2f59
commit f872743
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/lib/components/CardCarousel/CardCarousel.stories.tsx b/lib/components/CardCarousel/CardCarousel.stories.tsx
@@ -17,6 +17,13 @@ const design = {
   url: 'https://www.figma.com/design/6M2LrpSCcB0thlFDaQAI2J/cx_jod_client?node-id=7031-3025&t=hppCWVuC76hePJaZ-4',
 };
 export const Default: Story = {
+  decorators: [
+    (Story) => (
+      <div className="ds-max-w-[1140px] ds-px-5">
+        <Story />
+      </div>
+    ),
+  ],
   parameters: {
     design,
     docs: {

diff --git a/lib/components/CardCarousel/CardCarousel.tsx b/lib/components/CardCarousel/CardCarousel.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { MdChevronLeft, MdChevronRight } from 'react-icons/md';
 
-export interface CarouselItem {
+export interface CardCarouselItem {
   /** Id to be used as key during iteration */
   id: string;
   /** Component to be rendered in the carousel */
@@ -10,19 +10,20 @@ export interface CarouselItem {
 
 export interface CardCarouselProps {
   /** Items to show in the carousel */
-  items?: CarouselItem[];
+  items?: CardCarouselItem[];
   /** Width of each item in the carousel */
   itemWidth: number;
+  /** Gap between items in the carousel. Default is 16px */
+  gap?: number;
   /** Translations for accessibility */
   translations: {
     nextTrigger: string;
     prevTrigger: string;
     indicator: (index: number) => string;
   };
 }
-export const CardCarousel = ({ items = [], translations, itemWidth }: CardCarouselProps) => {
+export const CardCarousel = ({ items = [], translations, itemWidth, gap = 16 }: CardCarouselProps) => {
   const containerRef = React.createRef<HTMLUListElement>();
-  const GAP = 16;
   const [itemsPerPage, setItemsPerPage] = React.useState(1);
   const [pageNr, setPageNr] = React.useState(0);
   const [pageCount, setPageCount] = React.useState(0);
@@ -33,9 +34,9 @@ export const CardCarousel = ({ items = [], translations, itemWidth }: CardCarous
   React.useEffect(() => {
     const { current } = containerRef;
     if (current) {
-      current.scrollTo({ left: pageNr * itemsPerPage * (itemWidth + GAP), behavior: 'smooth' });
+      current.scrollTo({ left: pageNr * itemsPerPage * (itemWidth + gap), behavior: 'smooth' });
     }
-  }, [itemsPerPage, containerRef, itemWidth, pageNr]);
+  }, [itemsPerPage, containerRef, itemWidth, pageNr, gap]);
 
   const goToNextPage = () => {
     if (!isLastPage) {
@@ -70,7 +71,7 @@ export const CardCarousel = ({ items = [], translations, itemWidth }: CardCarous
     const handleResize = (entries: ResizeObserverEntry[]) => {
       for (const entry of entries) {
         if (entry.target == current) {
-          setItemsPerPage(Math.max(Math.floor(entry.contentRect.width / (itemWidth + GAP)), 1));
+          setItemsPerPage(Math.max(Math.floor((entry.contentRect.width + gap) / (itemWidth + gap)), 1));
           setPageCount(getPageCount());
           setPageNr(Math.min(Math.max(0, pageNr), getPageCount() - 1));
         }
@@ -88,7 +89,7 @@ export const CardCarousel = ({ items = [], translations, itemWidth }: CardCarous
         resizeObserver.unobserve(current);
       }
     };
-  }, [itemsPerPage, getPageCount, itemWidth, items.length, pageNr, containerRef]);
+  }, [itemsPerPage, getPageCount, itemWidth, items.length, pageNr, containerRef, gap]);
 
   return (
     <>

diff --git a/lib/main.ts b/lib/main.ts
@@ -8,7 +8,7 @@ export { useMediaQueries } from './hooks/useMediaQueries';
 export { Accordion } from './components/Accordion/Accordion';
 export { ActiveIndicator } from './components/ActiveIndicator/ActiveIndicator';
 export { Button } from './components/Button/Button';
-export { CardCarousel } from './components/CardCarousel/CardCarousel';
+export { CardCarousel, type CardCarouselItem } from './components/CardCarousel/CardCarousel';
 export { Checkbox } from './components/Checkbox/Checkbox';
 export { Combobox } from './components/Combobox/Combobox';
 export { ConfirmDialog } from './components/ConfirmDialog/ConfirmDialog';