npm - @comicrelief/component-library - Versions diffs - 8.51.6 → 8.51.8 - Mend

@comicrelief/component-library 8.51.6 → 8.51.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js CHANGED Viewed

@@ -59,11 +59,8 @@ const CTAMultiCard = _ref => {
   return /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardsQueryWrapper, null, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardsSection, {
     backgroundColor: cardsBackground,
     paddingAbove: paddingAbove,
-    paddingBelow: paddingBelow,
-    isCarousel: carouselOfCards
-  }, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardsInner, {
-    isCarousel: carouselOfCards
-  }, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.default, {
+    paddingBelow: paddingBelow
+  }, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardsInner, null, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.default, {
     columns: columns,
     isCarousel: carouselOfCards,
     useSplideCarousel: useSplideCarousel
@@ -71,8 +68,15 @@ const CTAMultiCard = _ref => {
     options: {
       arrows: false,
       pagination: false,
-      drag: true,
-      dragMinThreshold: 10,
+      // Reduce swipe "throw" as Matt felt the defaults are too much
+      // See https://splidejs.com/guides/options/
+      drag: 'free',
+      flickPower: 50,
+      perMove: 1,
+      dragMinThreshold: {
+        mouse: 50,
+        touch: 50
+      },
       gap: '1rem',
       fixedWidth: '309px',
       padding: {

package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md CHANGED Viewed

@@ -39,9 +39,23 @@ const cardsWithRenderedBody = exampleData.cards.map(card => ({
   external: null
 }));
+const cardsFour = [
+  ...cardsWithRenderedBody,
+  {
+    ...cardsWithRenderedBody[0],
+    id: 'example-4th-card',
+    title: 'Fourth card',
+    body: (
+      <Text tag="p">
+        Fourth card (added for layout testing)
+      </Text>
+    )
+  }
+];
 const data = {
   ...exampleData,
-  cards: cardsWithRenderedBody,
+  cards: cardsFour,
   layout: "3 columns",
   carouselOfCards: true,
   backgroundColour: "grey_medium",
@@ -54,9 +68,51 @@ const data = {
 </div>;
 ```
+### CTAMultiCard: Carousel with just 2 cards (2 columns layout)
+```js
+import CTAMultiCard from './CTAMultiCard';
+import Text from '../../../Atoms/Text/Text';
+import challengeExampleImage from '../../../../styleguide/assets/challenge-1.jpg';
+const exampleData = require('./example_data.json');
+// Map cards to include pre-rendered body content and processed image/link data
+const cardsWithRenderedBody = exampleData.cards.map(card => ({
+  ...card,
+  body: (
+    <Text tag="p">
+      {card.body}
+    </Text>
+  ),
+  fallback: challengeExampleImage,
+  imageLow: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z",
+  images: `${challengeExampleImage} 678w`,
+  bgColour: "white",
+  description: "",
+  target: "self",
+  external: null
+}));
+const cardsTwo = cardsWithRenderedBody.slice(0, 2);
+const dataTwoCards = {
+  ...exampleData,
+  cards: cardsTwo,
+  layout: "2 columns",
+  carouselOfCards: true,
+  backgroundColour: "grey_medium",
+  paddingAbove: '0rem',
+  paddingBelow: '0rem'
+};
+<div style={{ background: '#E1E2E3', width: '100%' }}>
+  <CTAMultiCard data={dataTwoCards} />
+</div>;
+```
 ### CTAMultiCard: Desktop Grid View (2 columns) with large padding
-**NB: One card contains a lot of lorem ipsum text to demonstrate that all cards will match the height of the tallest sibling card. In mobile view, this example displays as a vertical stack (non-carousel). This example also demonstrates larger vertical padding via `paddingAbove` / `paddingBelow` set to `4rem`, so it will appear with more space above and below the cards.**
+**NB: One card contains a lot of lorem ipsum text to demonstrate that all cards will match the height of the tallest sibling card. In mobile view, this example displays as a carousel. This example also demonstrates larger vertical padding via `paddingAbove` / `paddingBelow` set to `4rem`, so it will appear with more space above and below the cards.**
 ```js
 import CTAMultiCard from './CTAMultiCard';
@@ -96,7 +152,7 @@ const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
 const dataWithLongText = {
   ...exampleData,
   layout: "2 columns",
-  carouselOfCards: false,
+  carouselOfCards: true,
   backgroundColour: "Transparent",
   cards: cardsWithRenderedBody,
   paddingAbove: '4rem',
@@ -108,7 +164,7 @@ const dataWithLongText = {
 </div>;
 ```
-### CTAMultiCard: Wrap behaviour (3 columns, non-carousel)
+### CTAMultiCard: Wrap behaviour (3 columns)
 ```js
 import CTAMultiCard from './CTAMultiCard';
@@ -133,12 +189,36 @@ const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
   external: null
 }));
+const cardsFive = [
+  ...cardsWithRenderedBody,
+  {
+    ...cardsWithRenderedBody[0],
+    id: 'wrap-example-3',
+    title: 'Fourth card',
+    body: (
+      <Text tag="p">
+        Short body text (4)
+      </Text>
+    )
+  },
+  {
+    ...cardsWithRenderedBody[1],
+    id: 'wrap-example-4',
+    title: 'Fifth card',
+    body: (
+      <Text tag="p">
+        Short body text (5)
+      </Text>
+    )
+  }
+];
 const dataWrapExample = {
   ...exampleData,
   layout: "3 columns",
-  carouselOfCards: false,
+  carouselOfCards: true,
   backgroundColour: "rnd_26_light_pink",
-  cards: cardsWithRenderedBody,
+  cards: cardsFive,
   paddingAbove: '2rem',
   paddingBelow: '2rem'
 };

package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js CHANGED Viewed

@@ -14,7 +14,7 @@ const CardsQueryWrapper = exports.CardsQueryWrapper = _styledComponents.default.
 const CardsSection = exports.CardsSection = _styledComponents.default.div.withConfig({
   displayName: "CTAMultiCardstyle__CardsSection",
   componentId: "sc-gsdqzv-1"
-})(["width:100%;background:", ";padding-top:", ";padding-bottom:", ";"], _ref => {
+})(["width:100%;background:", ";padding-top:", ";padding-bottom:", ";padding-inline:1rem;@media ", "{padding-inline:2rem;}@media ", "{padding-inline:4rem;}"], _ref => {
   let {
     theme,
     backgroundColor
@@ -30,69 +30,49 @@ const CardsSection = exports.CardsSection = _styledComponents.default.div.withCo
     paddingBelow
   } = _ref3;
   return paddingBelow;
-});
-const CardsInner = exports.CardsInner = _styledComponents.default.div.withConfig({
-  displayName: "CTAMultiCardstyle__CardsInner",
-  componentId: "sc-gsdqzv-2"
-})(["width:100%;max-width:1152px;margin:0 auto;", " ", ""], _ref4 => {
+}, _ref4 => {
   let {
-    isCarousel
+    theme
   } = _ref4;
-  return !isCarousel && (0, _styledComponents.css)(["padding-inline:1rem;@media ", "{padding-inline:2rem;}"], _ref5 => {
-    let {
-      theme
-    } = _ref5;
-    return theme.allBreakpoints('M');
-  });
-}, _ref6 => {
+  return theme.breakpoints2026('M');
+}, _ref5 => {
   let {
-    isCarousel
-  } = _ref6;
-  return isCarousel && (0, _styledComponents.css)(["@media ", "{padding-inline:2rem;}"], _ref7 => {
-    let {
-      theme
-    } = _ref7;
-    return theme.allBreakpoints('L');
-  });
+    theme
+  } = _ref5;
+  return theme.breakpoints2026('L');
 });
+const CardsInner = exports.CardsInner = _styledComponents.default.div.withConfig({
+  displayName: "CTAMultiCardstyle__CardsInner",
+  componentId: "sc-gsdqzv-2"
+})(["width:100%;max-width:1152px;margin:0 auto;"]);
 const CardsContainer = _styledComponents.default.div.withConfig({
   displayName: "CTAMultiCardstyle__CardsContainer",
   componentId: "sc-gsdqzv-3"
-})(["display:flex;flex-direction:column;width:100%;gap:1rem;@media ", "{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch;width:100%;max-width:100%;margin:0 auto;}@media ", "{column-gap:2rem;}", " ", " @media ", "{", "}"], _ref8 => {
+})(["display:flex;flex-direction:column;width:100%;gap:1rem;@media ", "{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch;}@media ", "{column-gap:2rem;row-gap:2rem;}", " ", ""], _ref6 => {
   let {
     theme
-  } = _ref8;
+  } = _ref6;
   return theme.allBreakpoints('M');
-}, _ref9 => {
+}, _ref7 => {
   let {
     theme
-  } = _ref9;
+  } = _ref7;
   return theme.allBreakpoints('L');
-}, _ref10 => {
+}, _ref8 => {
   let {
-    isCarousel,
-    columns
-  } = _ref10;
-  return !isCarousel && columns === 2 && (0, _styledComponents.css)(["@media (min-width:", "px){display:grid;grid-template-columns:repeat(2,minmax(443px,560px));justify-content:center;align-items:stretch;column-gap:2rem;row-gap:2rem;width:100%;max-width:100%;margin:0;& > *:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:min(100%,560px);}}"], _allBreakpoints.breakpointValues.L);
-}, _ref11 => {
+    columns,
+    useSplideCarousel
+  } = _ref8;
+  return !useSplideCarousel && columns === 2 && (0, _styledComponents.css)(["@media (min-width:", "px){display:grid;grid-template-columns:repeat(2,minmax(443px,560px));justify-content:center;align-items:stretch;column-gap:2rem;row-gap:2rem;width:100%;max-width:100%;margin:0;& > *:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:min(100%,560px);}}"], _allBreakpoints.breakpointValues.L);
+}, _ref9 => {
   let {
     isCarousel
-  } = _ref11;
-  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){", "}"], _allBreakpoints.breakpointValues.L - 1, _ref12 => {
+  } = _ref9;
+  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){", "}"], _allBreakpoints.breakpointValues.L - 1, _ref10 => {
     let {
       useSplideCarousel
-    } = _ref12;
-    return useSplideCarousel ? (0, _styledComponents.css)(["display:block;cursor:grab;width:100%;margin:0;max-width:100%;padding:0.75rem 1rem;gap:0;.splide__list{align-items:stretch;}.splide__slide{display:flex;height:auto;}"]) : (0, _styledComponents.css)(["flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:100%;margin:0;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:0.75rem 1rem;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;}"]);
+    } = _ref10;
+    return useSplideCarousel ? (0, _styledComponents.css)(["display:block;cursor:grab;width:100%;max-width:100%;gap:0;.splide,.splide__track{overflow:visible;}.splide__list{align-items:stretch;}.splide:not(.is-overflow) .splide__list{justify-content:center;}.splide__slide{display:flex;height:auto;}"]) : (0, _styledComponents.css)(["flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;}"]);
   });
-}, _ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.allBreakpoints('XL');
-}, _ref14 => {
-  let {
-    columns
-  } = _ref14;
-  return columns === 3 && (0, _styledComponents.css)(["display:grid;justify-content:center;align-items:stretch;grid-template-columns:repeat(3,minmax(0,363px));width:100%;margin:0 auto;max-width:100%;"]);
 });
 var _default = exports.default = CardsContainer;

package/dist/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap CHANGED Viewed

@@ -5,19 +5,19 @@ exports[`handles data structure correctly 1`] = `
   className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
 >
   <div
-    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 ehBqzi"
+    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 kCDlNQ"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 jdzsUU"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 cVaqKX"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 gAuYUa"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -95,7 +95,7 @@ exports[`handles data structure correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -141,10 +141,10 @@ exports[`handles data structure correctly 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -222,10 +222,10 @@ exports[`handles data structure correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test-no-image"
             rel={null}
             target="self"
@@ -288,19 +288,19 @@ exports[`renders 2 columns layout correctly 1`] = `
   className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
 >
   <div
-    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
+    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 cywbFh"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 jdzsUU"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 kZJZoQ"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 jrSYsC"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -378,7 +378,7 @@ exports[`renders 2 columns layout correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -424,10 +424,10 @@ exports[`renders 2 columns layout correctly 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -505,10 +505,10 @@ exports[`renders 2 columns layout correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test-no-image"
             rel={null}
             target="self"
@@ -571,19 +571,19 @@ exports[`renders carousel mode correctly 1`] = `
   className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
 >
   <div
-    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
+    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 cywbFh"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 fEcgRr"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 dhfXac"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 fqrDP"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -661,7 +661,7 @@ exports[`renders carousel mode correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -707,10 +707,10 @@ exports[`renders carousel mode correctly 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -788,10 +788,10 @@ exports[`renders carousel mode correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test-no-image"
             rel={null}
             target="self"
@@ -854,19 +854,19 @@ exports[`renders correctly with data prop 1`] = `
   className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
 >
   <div
-    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
+    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 cywbFh"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 jdzsUU"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 cVaqKX"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 fqrDP"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -944,7 +944,7 @@ exports[`renders correctly with data prop 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -990,10 +990,10 @@ exports[`renders correctly with data prop 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -1071,10 +1071,10 @@ exports[`renders correctly with data prop 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test-no-image"
             rel={null}
             target="self"

package/dist/components/Molecules/CTA/CTAMultiCard/example_data.json CHANGED Viewed

@@ -5,7 +5,7 @@
   "layout": "3 columns",
   "columnsOnMd": false,
   "paddingOptions": "Both Off",
-  "carouselOfCards": false,
+  "carouselOfCards": true,
   "cards": [
         {
           "id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14",

package/dist/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap CHANGED Viewed

@@ -131,9 +131,9 @@ exports[`renders correctly with data prop 1`] = `
 }
 .c3 img {
-  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.22,1,0.36,1);
-  -webkit-transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
-  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+  -webkit-transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+  transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
 }
 .c2 {
@@ -337,6 +337,9 @@ exports[`renders correctly with data prop 1`] = `
     -webkit-transform-origin: center;
     -ms-transform-origin: center;
     transform-origin: center;
+    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+    -webkit-transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+    transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
   }
   .c3:hover,
@@ -351,9 +354,9 @@ exports[`renders correctly with data prop 1`] = `
   }
   .c3:hover .c4 img {
-    -webkit-transform: scale(1.11);
-    -ms-transform: scale(1.11);
-    transform: scale(1.11);
+    -webkit-transform: scale(1.06);
+    -ms-transform: scale(1.06);
+    transform: scale(1.06);
   }
   .c3:hover .c13 {
@@ -619,9 +622,9 @@ exports[`renders correctly without image 1`] = `
 }
 .c3 img {
-  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.22,1,0.36,1);
-  -webkit-transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
-  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+  -webkit-transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+  transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
 }
 .c2 {
@@ -787,6 +790,9 @@ exports[`renders correctly without image 1`] = `
     -webkit-transform-origin: center;
     -ms-transform-origin: center;
     transform-origin: center;
+    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+    -webkit-transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+    transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
   }
   .c3:hover,