Merge pull request #174 from adobecom/MWPW-157434

fix(mwpw-157434): Fixes Carousel pagination issues
adobecom · Sep 11, 2024 · 69d28f5 · 69d28f5
2 parents cf9df06 + 956c1f4
commit 69d28f5
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 17 deletions.
diff --git a/dist/app.css b/dist/app.css
diff --git a/dist/main.js b/dist/main.js
@@ -1,5 +1,5 @@
 /*!
- * Chimera UI Libraries - Build 0.20.0 (9/9/2024, 13:21:45)
+ * Chimera UI Libraries - Build 0.21.0 (9/9/2024, 20:46:25)
  *         
  */
 /******/ (function(modules) { // webpackBootstrap
@@ -44064,18 +44064,20 @@ function CardsCarousel() {
     var showTotalResults = getConfig('collection', 'showTotalResults');
     var showTotalResultsText = getConfig('collection', 'i18n.totalResultsText');
     var useLightText = getConfig('collection', 'useLightText');
+    var isIncremental = getConfig('pagination', 'animationStyle') === 'incremental';
+
     if (cardsUp.includes('2up')) {
         cardWidth = 500;
-        cardsShiftedPerClick = 1;
+        cardsShiftedPerClick = isIncremental ? 1 : 2;
     } else if (cardsUp.includes('3up')) {
         cardWidth = 378;
-        cardsShiftedPerClick = 1;
+        cardsShiftedPerClick = isIncremental ? 1 : 3;
     } else if (cardsUp.includes('4up')) {
         cardWidth = 276;
-        cardsShiftedPerClick = 4;
+        cardsShiftedPerClick = isIncremental ? 1 : 4;
     } else if (cardsUp.includes('5up')) {
         cardWidth = 228;
-        cardsShiftedPerClick = 4;
+        cardsShiftedPerClick = isIncremental ? 1 : 5;
     }
     var HeadingLevel = getConfig('collection', 'i18n.titleHeadingLevel');
     var cardsPerPage = parseInt(cardsUp, 10);

diff --git a/dist/main.min.js b/dist/main.min.js
diff --git a/dist/main.source.js b/dist/main.source.js
diff --git a/less/components/consonant/cards-carousel.less b/less/components/consonant/cards-carousel.less
@@ -39,6 +39,7 @@
                 min-width: 100%;
                 padding: 8px 0;
                 overflow-x: scroll;
+                scroll-behavior: smooth;
 
                 @media screen and (min-width: @consonantDesktopMinWidth) {
                     overflow: -moz-scrollbars-none;

diff --git a/react/src/js/components/Consonant/CardsCarousel/CardsCarousel.jsx b/react/src/js/components/Consonant/CardsCarousel/CardsCarousel.jsx
@@ -24,18 +24,20 @@ function CardsCarousel({
     const showTotalResults = getConfig('collection', 'showTotalResults');
     const showTotalResultsText = getConfig('collection', 'i18n.totalResultsText');
     const useLightText = getConfig('collection', 'useLightText');
+    const isIncremental = getConfig('pagination', 'animationStyle') === 'incremental';
+
     if (cardsUp.includes('2up')) {
         cardWidth = 500;
-        cardsShiftedPerClick = 1;
+        cardsShiftedPerClick = isIncremental ? 1 : 2;
     } else if (cardsUp.includes('3up')) {
         cardWidth = 378;
-        cardsShiftedPerClick = 1;
+        cardsShiftedPerClick = isIncremental ? 1 : 3;
     } else if (cardsUp.includes('4up')) {
         cardWidth = 276;
-        cardsShiftedPerClick = 4;
+        cardsShiftedPerClick = isIncremental ? 1 : 4;
     } else if (cardsUp.includes('5up')) {
         cardWidth = 228;
-        cardsShiftedPerClick = 4;
+        cardsShiftedPerClick = isIncremental ? 1 : 5;
     }
     const HeadingLevel = getConfig('collection', 'i18n.titleHeadingLevel');
     const cardsPerPage = parseInt(cardsUp, 10);