@comicrelief/component-library 8.50.1 → 8.51.1

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

@@ -7,8 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _snakeCase2 = _interopRequireDefault(require("lodash/snakeCase"));
 var _react = _interopRequireDefault(require("react"));
+var _reactResponsive = require("react-responsive");
+var _reactSplide = require("@splidejs/react-splide");
+require("@splidejs/react-splide/dist/css/splide.min.css");
 var _CTACard = _interopRequireDefault(require("../shared/CTACard"));
 var _CTAMultiCard = _interopRequireDefault(require("./CTAMultiCard.style"));
+var _allBreakpoints = require("../../../../theme/shared/allBreakpoints");
+// Line below imports the built CSS directly because Jest needs it
+
 /**
  * CTAMultiCard Component
  *
@@ -18,6 +24,9 @@ var _CTAMultiCard = _interopRequireDefault(require("./CTAMultiCard.style"));
  * Now CTAMultiCard handles the mapping internally, accepting
  * a data object and rendering all cards.
  *
+ * Where a carousel is requested (carouselOfCards is true), the component
+ * will use the Splide library to create it.
+ *
  * Note: The component expects pre-rendered content in the `body`
  * field of each card. The frontend should handle rich text rendering
  * before passing data to this component.
@@ -35,6 +44,10 @@ const CTAMultiCard = _ref => {
     paddingAbove,
     paddingBelow
   } = data;
+  const isBelowL = (0, _reactResponsive.useMediaQuery)({
+    maxWidth: _allBreakpoints.breakpointValues.L - 1
+  });
+  const useSplideCarousel = Boolean(carouselOfCards && isBelowL);
   if (!cards || !Array.isArray(cards) || cards.length === 0) {
     return null;
   }
@@ -47,10 +60,30 @@ const CTAMultiCard = _ref => {
     backgroundColor: cardsBackground,
     columns: columns,
     isCarousel: carouselOfCards,
+    useSplideCarousel: useSplideCarousel,
     paddingAbove: paddingAbove,
     paddingBelow: paddingBelow
-  }, cards.map(card => /*#__PURE__*/_react.default.createElement(_CTACard.default, {
-    key: card.id,
+  }, useSplideCarousel ? /*#__PURE__*/_react.default.createElement(_reactSplide.Splide, {
+    options: {
+      arrows: false,
+      pagination: false,
+      drag: true,
+      dragMinThreshold: 10,
+      gap: '1rem',
+      fixedWidth: '309px',
+      padding: {
+        left: '0px',
+        right: '0px'
+      }
+    }
+  }, cards.map((card, index) => /*#__PURE__*/_react.default.createElement(_reactSplide.SplideSlide, {
+    key: card !== null && card !== void 0 && card.id ? `${card.id}-${index}` : `cta-card-${index}`
+  }, /*#__PURE__*/_react.default.createElement(_CTACard.default, {
+    card: card,
+    columns: columns,
+    isCarousel: true
+  })))) : cards.map((card, index) => /*#__PURE__*/_react.default.createElement(_CTACard.default, {
+    key: card !== null && card !== void 0 && card.id ? `${card.id}-${index}` : `cta-card-${index}`,
     card: card,
     columns: columns,
     isCarousel: carouselOfCards

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

@@ -12,7 +12,7 @@ The component expects pre-rendered content to be passed in the `body` field of e
 - `target`: The link target ('self' for internal links, 'blank' for external)
 - `external`: The rel attribute ('noopener' for external links, null for internal)
 
-### CTAMultiCard: Desktop Grid View (3 columns)
+### CTAMultiCard: Desktop Grid View (3 columns), carousel when in mobile view
 
 **NB: In mobile view, this example displays as a carousel. This example also demonstrates no vertical padding via `paddingAbove` / `paddingBelow` set to `0rem`, so it will sit flush to the surrounding container.**
 
@@ -27,7 +27,7 @@ const cardsWithRenderedBody = exampleData.cards.map(card => ({
   ...card,
   body: (
     <Text tag="p">
-      <strong>Load</strong> of text here
+      {card.body}
     </Text>
   ),
   fallback: challengeExampleImage,
@@ -42,8 +42,9 @@ const cardsWithRenderedBody = exampleData.cards.map(card => ({
 const data = {
   ...exampleData,
   cards: cardsWithRenderedBody,
+  layout: "3 columns",
   carouselOfCards: true,
-  backgroundColour: "transparent",
+  backgroundColour: "grey_medium",
   paddingAbove: '0rem',
   paddingBelow: '0rem'
 };
@@ -53,7 +54,7 @@ const data = {
 </div>;
 ```
 
-### CTAMultiCard: Desktop Grid View (2 columns)
+### 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.**
 
@@ -80,7 +81,7 @@ const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
     </>
   ) : (
     <Text tag="p">
-      <strong>Load</strong> of text here
+      {card.body}
     </Text>
   ),
   fallback: challengeExampleImage,
@@ -106,3 +107,43 @@ const dataWithLongText = {
   <CTAMultiCard data={dataWithLongText} />
 </div>;
 ```
+
+### CTAMultiCard: Wrap behaviour (3 columns, non-carousel)
+
+```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');
+
+const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
+  ...card,
+  id: `wrap-example-${index}`,
+  body: (
+    <Text tag="p">
+      Short body text
+    </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 dataWrapExample = {
+  ...exampleData,
+  layout: "3 columns",
+  carouselOfCards: false,
+  backgroundColour: "Transparent",
+  cards: cardsWithRenderedBody,
+  paddingAbove: '2rem',
+  paddingBelow: '2rem'
+};
+
+<div style={{ background: '#E1E2E3'}}>
+  <CTAMultiCard data={dataWrapExample} />
+</div>;
+```

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

@@ -40,16 +40,21 @@ const CardsContainer = _styledComponents.default.div.withConfig({
   let {
     isCarousel
   } = _ref6;
-  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:100%;margin:0;max-width:100%;overflow-x:visible;overflow-y:scroll;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:0.75rem 1rem;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;}}"], _allBreakpoints.breakpointValues.L - 1);
-}, _ref7 => {
+  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){", "}"], _allBreakpoints.breakpointValues.L - 1, _ref7 => {
+    let {
+      useSplideCarousel
+    } = _ref7;
+    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;}"]);
+  });
+}, _ref8 => {
   let {
     theme
-  } = _ref7;
+  } = _ref8;
   return theme.allBreakpoints('XL');
-}, _ref8 => {
+}, _ref9 => {
   let {
     columns
-  } = _ref8;
+  } = _ref9;
   return columns === 3 && (0, _styledComponents.css)(["display:grid;justify-content:center;align-items:stretch;grid-template-columns:repeat(3,minmax(0,371px));width:100%;margin:0 auto;max-width:100%;"]);
 });
 var _default = exports.default = CardsContainer;

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

@@ -331,8 +331,7 @@ exports[`handles data structure correctly 1`] = `
 @media (max-width:739px) {
   .c1 {
     max-width: 309px;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 0;
   }
 }
 
@@ -345,8 +344,6 @@ exports[`handles data structure correctly 1`] = `
     -ms-flex: 0 0 100%;
     flex: 0 0 100%;
     max-width: 309px;
-    margin-left: auto;
-    margin-right: auto;
   }
 }
 
@@ -515,7 +512,6 @@ exports[`handles data structure correctly 1`] = `
   >
     <a
       className="c2"
-      href="/test"
       rel={null}
       target="self"
     >
@@ -556,38 +552,6 @@ exports[`handles data structure correctly 1`] = `
              of text here
           </p>
         </div>
-        <div
-          className="c10"
-        >
-          <span
-            className="c11 c12"
-          >
-            test go
-            <img
-              alt=""
-              aria-hidden="true"
-              className="c13 c14"
-              src="mock.asset"
-            />
-          </span>
-          <div
-            className="c15 c16"
-          >
-            <svg
-              className="c17"
-              fill="none"
-              height="13"
-              viewBox="0 0 15 13"
-              width="15"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
-                fill="currentColor"
-              />
-            </svg>
-          </div>
-        </div>
       </div>
     </a>
   </div>
@@ -1062,8 +1026,7 @@ exports[`renders 2 columns layout correctly 1`] = `
 @media (max-width:739px) {
   .c1 {
     max-width: 345px;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 0;
   }
 }
 
@@ -1076,8 +1039,6 @@ exports[`renders 2 columns layout correctly 1`] = `
     -ms-flex: 0 0 345px;
     flex: 0 0 345px;
     max-width: 345px;
-    margin-left: 0;
-    margin-right: 0;
   }
 }
 
@@ -1232,7 +1193,6 @@ exports[`renders 2 columns layout correctly 1`] = `
   >
     <a
       className="c2"
-      href="/test"
       rel={null}
       target="self"
     >
@@ -1273,38 +1233,6 @@ exports[`renders 2 columns layout correctly 1`] = `
              of text here
           </p>
         </div>
-        <div
-          className="c10"
-        >
-          <span
-            className="c11 c12"
-          >
-            test go
-            <img
-              alt=""
-              aria-hidden="true"
-              className="c13 c14"
-              src="mock.asset"
-            />
-          </span>
-          <div
-            className="c15 c16"
-          >
-            <svg
-              className="c17"
-              fill="none"
-              height="13"
-              viewBox="0 0 15 13"
-              width="15"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
-                fill="currentColor"
-              />
-            </svg>
-          </div>
-        </div>
       </div>
     </a>
   </div>
@@ -1856,8 +1784,8 @@ exports[`renders carousel mode correctly 1`] = `
     width: 100%;
     margin: 0;
     max-width: 100%;
-    overflow-x: visible;
-    overflow-y: scroll;
+    overflow-x: auto;
+    overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
     -webkit-scroll-snap-type: x mandatory;
     -moz-scroll-snap-type: x mandatory;
@@ -1983,7 +1911,6 @@ exports[`renders carousel mode correctly 1`] = `
   >
     <a
       className="c2"
-      href="/test"
       rel={null}
       target="self"
     >
@@ -2024,38 +1951,6 @@ exports[`renders carousel mode correctly 1`] = `
              of text here
           </p>
         </div>
-        <div
-          className="c10"
-        >
-          <span
-            className="c11 c12"
-          >
-            test go
-            <img
-              alt=""
-              aria-hidden="true"
-              className="c13 c14"
-              src="mock.asset"
-            />
-          </span>
-          <div
-            className="c15 c16"
-          >
-            <svg
-              className="c17"
-              fill="none"
-              height="13"
-              viewBox="0 0 15 13"
-              width="15"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
-                fill="currentColor"
-              />
-            </svg>
-          </div>
-        </div>
       </div>
     </a>
   </div>
@@ -2530,8 +2425,7 @@ exports[`renders correctly with data prop 1`] = `
 @media (max-width:739px) {
   .c1 {
     max-width: 309px;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 0;
   }
 }
 
@@ -2544,8 +2438,6 @@ exports[`renders correctly with data prop 1`] = `
     -ms-flex: 0 0 100%;
     flex: 0 0 100%;
     max-width: 309px;
-    margin-left: auto;
-    margin-right: auto;
   }
 }
 
@@ -2714,7 +2606,6 @@ exports[`renders correctly with data prop 1`] = `
   >
     <a
       className="c2"
-      href="/test"
       rel={null}
       target="self"
     >
@@ -2755,38 +2646,6 @@ exports[`renders correctly with data prop 1`] = `
              of text here
           </p>
         </div>
-        <div
-          className="c10"
-        >
-          <span
-            className="c11 c12"
-          >
-            test go
-            <img
-              alt=""
-              aria-hidden="true"
-              className="c13 c14"
-              src="mock.asset"
-            />
-          </span>
-          <div
-            className="c15 c16"
-          >
-            <svg
-              className="c17"
-              fill="none"
-              height="13"
-              viewBox="0 0 15 13"
-              width="15"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
-                fill="currentColor"
-              />
-            </svg>
-          </div>
-        </div>
       </div>
     </a>
   </div>

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

@@ -10,6 +10,7 @@
         {
           "id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14",
           "title": "Full Card Oooh Chilly",
+          "body": "Load of text here",
           "backgroundColour": "White",
           "link": "/test",
           "linkLabel": "test go",
@@ -42,9 +43,8 @@
         {
           "id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14-2",
           "title": "Full Card Oooh Chilly",
+          "body": "I don't have a link",
           "backgroundColour": "White",
-          "link": "/test",
-          "linkLabel": "test go",
           "image": {
             "description": "",
             "gatsbyImageData": {
@@ -74,6 +74,7 @@
         {
           "id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14-3",
           "title": "Full Card Oooh Chilly",
+          "body": "Third card",
           "backgroundColour": "White",
           "link": "/test",
           "linkLabel": "test go",

package/dist/components/Molecules/CTA/shared/CTACard.style.js

@@ -10,62 +10,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _animations = require("../../../../theme/shared/animations");
 var _allBreakpoints = require("../../../../theme/shared/allBreakpoints");
 var _fontHelper = _interopRequireDefault(require("../../../../theme/crTheme/fontHelper"));
-// const CardsContainer = styled.div`
-//   display: flex;
-//   flex-direction: column;
-//   width: 100%;
-//   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
-//   gap: 1rem;
-
-//   // Mobile carousel mode - horizontal scroll container (only on mobile, below M breakpoint)
-//   ${({ isCarousel }) => isCarousel && css`
-//     @media (max-width: ${breakpointValues.M - 1}px) {
-//       flex-direction: row;
-//       flex-wrap: nowrap;
-//       overflow-x: visible;
-//       overflow-y: scroll;
-//       -webkit-overflow-scrolling: touch;
-//       scroll-snap-type: x mandatory;
-//       padding: 0.75rem 0.5rem;
-//       margin-left: 0.5rem;
-
-//       scrollbar-width: none;
-//       -ms-overflow-style: none;
-//       &::-webkit-scrollbar {
-//         display: none;
-//       }
-//     }
-//   `}
-
-//   // Mobile stack mode - vertical layout (only on mobile, below M breakpoint)
-//   ${({ isCarousel }) => !isCarousel && css`
-//     @media (max-width: ${breakpointValues.M - 1}px) {
-//       flex-direction: column;
-//       background: transparent;
-//     }
-//   `}
-
-//   // Desktop flexbox layout - 2 columns with centered wrap
-//   @media ${({ theme }) => theme.allBreakpoints('M')} {
-//     flex-direction: row;
-//     flex-wrap: wrap;
-//     justify-content: center;
-//     align-items: stretch;
-//     width: fit-content;
-//     max-width: 100%;
-//     margin: 0 auto;
-//   }
-
-//   // Desktop grid layout for XL breakpoint - 3 columns
-//   @media ${({ theme }) => theme.allBreakpoints('XL')} {
-//     display: grid;
-//     justify-content: center;
-//     grid-template-columns: ${({ columns }) => `repeat(${columns}, 1fr)`};
-//     width: ${({ columns }) => (columns === 2 ? 'fit-content' : '100%')};
-//     margin: ${({ columns }) => (columns === 2 ? '0 auto' : '0')};
-//     max-width: 100%;
-//   }
-// `;
 const ImageWrapper = exports.ImageWrapper = _styledComponents.default.div.withConfig({
   displayName: "CTACardstyle__ImageWrapper",
   componentId: "sc-si8xx1-0"
@@ -197,7 +141,7 @@ const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConf
     isCarousel,
     isFullWidth
   } = _ref21;
-  return !isCarousel && !isFullWidth && (0, _styledComponents.css)(["@media (max-width:", "px){max-width:", ";margin-left:auto;margin-right:auto;}@media (min-width:", "px) and (max-width:", "px){align-self:stretch;", "}"], _allBreakpoints.breakpointValues.M - 1, _ref22 => {
+  return !isCarousel && !isFullWidth && (0, _styledComponents.css)(["@media (max-width:", "px){max-width:", ";margin:0;}@media (min-width:", "px) and (max-width:", "px){align-self:stretch;", "}"], _allBreakpoints.breakpointValues.M - 1, _ref22 => {
     let {
       columns
     } = _ref22;
@@ -206,7 +150,7 @@ const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConf
     let {
       columns
     } = _ref23;
-    return columns === 3 ? (0, _styledComponents.css)(["flex:0 0 100%;max-width:309px;margin-left:auto;margin-right:auto;"]) : (0, _styledComponents.css)(["flex:0 0 345px;max-width:345px;margin-left:0;margin-right:0;"]);
+    return columns === 3 ? (0, _styledComponents.css)(["flex:0 0 100%;max-width:309px;"]) : (0, _styledComponents.css)(["flex:0 0 345px;max-width:345px;"]);
   });
 }, _ref24 => {
   let {

package/dist/utils/allowListed.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-const allowList = ['https://giftaid.comicrelief.com', 'https://donation.comicrelief.com', 'https://www.comicrelief.com', 'https://www.sportrelief.com', 'https://app.beapplied.com/org/comic-relief', 'stories.comicrelief.com', 'https://form.typeform.com'];
+const allowList = ['https://giftaid.comicrelief.com', 'https://donation.comicrelief.com', 'https://www.comicrelief.com', 'https://www.sportrelief.com', 'https://app.beapplied.com/org/comic-relief', 'stories.comicrelief.com', 'https://form.typeform.com',
+// Required for the HHoF form:
+'https://interfaces.zapier.com/assets/web-components/zapier-interfaces/zapier-interfaces.esm.js'];
 const allowListed = url => {
   if (url !== undefined && url !== null && allowList.some(v => url.indexOf(v) >= 0)) {
     return true;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.50.1",
+  "version": "8.51.1",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
@@ -22,11 +22,11 @@
     "url": "https://github.com/comicrelief/component-library.git"
   },
   "dependencies": {
-    "react-scripts": "4.0.3",
-    "babel-plugin-import": "^1.13.8",
     "@babel/cli": "^7.21.5",
     "@hookform/resolvers": "^3.9.0",
+    "@splidejs/react-splide": "^0.7.12",
     "axios": "^1.7.2",
+    "babel-plugin-import": "^1.13.8",
     "lazysizes": "^5.3.2",
     "lodash": "^4.17.11",
     "moment": "^2.29.4",
@@ -40,6 +40,7 @@
     "react-modal": "^3.16.1",
     "react-range-slider-input": "^3.0.7",
     "react-responsive": "^9.0.2",
+    "react-scripts": "4.0.3",
     "react-spinners": "^0.11.0",
     "react-uid": "^2.3.3",
     "styled-components": "^5.3.11",

package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js

@@ -1,8 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { snakeCase } from 'lodash';
+import { useMediaQuery } from 'react-responsive';
+import { Splide, SplideSlide } from '@splidejs/react-splide';
+// Line below imports the built CSS directly because Jest needs it
+import '@splidejs/react-splide/dist/css/splide.min.css';
 import CTACard from '../shared/CTACard';
 import CardsContainer from './CTAMultiCard.style';
+import { breakpointValues } from '../../../../theme/shared/allBreakpoints';
 
 /**
  * CTAMultiCard Component
@@ -13,6 +18,9 @@ import CardsContainer from './CTAMultiCard.style';
  * Now CTAMultiCard handles the mapping internally, accepting
  * a data object and rendering all cards.
  *
+ * Where a carousel is requested (carouselOfCards is true), the component
+ * will use the Splide library to create it.
+ *
  * Note: The component expects pre-rendered content in the `body`
  * field of each card. The frontend should handle rich text rendering
  * before passing data to this component.
@@ -28,6 +36,9 @@ const CTAMultiCard = ({ data }) => {
     paddingBelow
   } = data;
 
+  const isBelowL = useMediaQuery({ maxWidth: breakpointValues.L - 1 });
+  const useSplideCarousel = Boolean(carouselOfCards && isBelowL);
+
   if (!cards || !Array.isArray(cards) || cards.length === 0) {
     return null;
   }
@@ -43,17 +54,42 @@ const CTAMultiCard = ({ data }) => {
       backgroundColor={cardsBackground}
       columns={columns}
       isCarousel={carouselOfCards}
+      useSplideCarousel={useSplideCarousel}
       paddingAbove={paddingAbove}
       paddingBelow={paddingBelow}
     >
-      {cards.map(card => (
-        <CTACard
-          key={card.id}
-          card={card}
-          columns={columns}
-          isCarousel={carouselOfCards}
-        />
-      ))}
+      {useSplideCarousel ? (
+        <Splide
+          options={{
+            arrows: false,
+            pagination: false,
+            drag: true,
+            dragMinThreshold: 10,
+            gap: '1rem',
+            fixedWidth: '309px',
+            padding: { left: '0px', right: '0px' }
+          }}
+        >
+          {cards.map((card, index) => (
+            <SplideSlide key={card?.id ? `${card.id}-${index}` : `cta-card-${index}`}>
+              <CTACard
+                card={card}
+                columns={columns}
+                isCarousel
+              />
+            </SplideSlide>
+          ))}
+        </Splide>
+      ) : (
+        cards.map((card, index) => (
+          <CTACard
+            key={card?.id ? `${card.id}-${index}` : `cta-card-${index}`}
+            card={card}
+            columns={columns}
+            isCarousel={carouselOfCards}
+          />
+        ))
+      )}
     </CardsContainer>
   );
 };

package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md

@@ -12,7 +12,7 @@ The component expects pre-rendered content to be passed in the `body` field of e
 - `target`: The link target ('self' for internal links, 'blank' for external)
 - `external`: The rel attribute ('noopener' for external links, null for internal)
 
-### CTAMultiCard: Desktop Grid View (3 columns)
+### CTAMultiCard: Desktop Grid View (3 columns), carousel when in mobile view
 
 **NB: In mobile view, this example displays as a carousel. This example also demonstrates no vertical padding via `paddingAbove` / `paddingBelow` set to `0rem`, so it will sit flush to the surrounding container.**
 
@@ -27,7 +27,7 @@ const cardsWithRenderedBody = exampleData.cards.map(card => ({
   ...card,
   body: (
     <Text tag="p">
-      <strong>Load</strong> of text here
+      {card.body}
     </Text>
   ),
   fallback: challengeExampleImage,
@@ -42,8 +42,9 @@ const cardsWithRenderedBody = exampleData.cards.map(card => ({
 const data = {
   ...exampleData,
   cards: cardsWithRenderedBody,
+  layout: "3 columns",
   carouselOfCards: true,
-  backgroundColour: "transparent",
+  backgroundColour: "grey_medium",
   paddingAbove: '0rem',
   paddingBelow: '0rem'
 };
@@ -53,7 +54,7 @@ const data = {
 </div>;
 ```
 
-### CTAMultiCard: Desktop Grid View (2 columns)
+### 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.**
 
@@ -80,7 +81,7 @@ const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
     </>
   ) : (
     <Text tag="p">
-      <strong>Load</strong> of text here
+      {card.body}
     </Text>
   ),
   fallback: challengeExampleImage,
@@ -106,3 +107,43 @@ const dataWithLongText = {
   <CTAMultiCard data={dataWithLongText} />
 </div>;
 ```
+
+### CTAMultiCard: Wrap behaviour (3 columns, non-carousel)
+
+```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');
+
+const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
+  ...card,
+  id: `wrap-example-${index}`,
+  body: (
+    <Text tag="p">
+      Short body text
+    </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 dataWrapExample = {
+  ...exampleData,
+  layout: "3 columns",
+  carouselOfCards: false,
+  backgroundColour: "Transparent",
+  cards: cardsWithRenderedBody,
+  paddingAbove: '2rem',
+  paddingBelow: '2rem'
+};
+
+<div style={{ background: '#E1E2E3'}}>
+  <CTAMultiCard data={dataWrapExample} />
+</div>;
+```

package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js

@@ -32,23 +32,42 @@ const CardsContainer = styled.div`
   // Carousel mode - horizontal scroll container (M and below)
   ${({ isCarousel }) => isCarousel && css`
     @media (max-width: ${breakpointValues.L - 1}px) {
-      flex-direction: row;
-      flex-wrap: nowrap;
-      justify-content: flex-start;
-      width: 100%;
-      margin: 0;
-      max-width: 100%;
-      overflow-x: visible;
-      overflow-y: scroll;
-      -webkit-overflow-scrolling: touch;
-      scroll-snap-type: x mandatory;
-      padding: 0.75rem 1rem;
+      ${({ useSplideCarousel }) => (useSplideCarousel ? 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;
+        }
+      ` : 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;
-      }
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      `)}
     }
   `}
 

package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap

@@ -331,8 +331,7 @@ exports[`handles data structure correctly 1`] = `
 @media (max-width:739px) {
   .c1 {
     max-width: 309px;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 0;
   }
 }
 
@@ -345,8 +344,6 @@ exports[`handles data structure correctly 1`] = `
     -ms-flex: 0 0 100%;
     flex: 0 0 100%;
     max-width: 309px;
-    margin-left: auto;
-    margin-right: auto;
   }
 }
 
@@ -515,7 +512,6 @@ exports[`handles data structure correctly 1`] = `
   >
     <a
       className="c2"
-      href="/test"
       rel={null}
       target="self"
     >
@@ -556,38 +552,6 @@ exports[`handles data structure correctly 1`] = `
              of text here
           </p>
         </div>
-        <div
-          className="c10"
-        >
-          <span
-            className="c11 c12"
-          >
-            test go
-            <img
-              alt=""
-              aria-hidden="true"
-              className="c13 c14"
-              src="mock.asset"
-            />
-          </span>
-          <div
-            className="c15 c16"
-          >
-            <svg
-              className="c17"
-              fill="none"
-              height="13"
-              viewBox="0 0 15 13"
-              width="15"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
-                fill="currentColor"
-              />
-            </svg>
-          </div>
-        </div>
       </div>
     </a>
   </div>
@@ -1062,8 +1026,7 @@ exports[`renders 2 columns layout correctly 1`] = `
 @media (max-width:739px) {
   .c1 {
     max-width: 345px;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 0;
   }
 }
 
@@ -1076,8 +1039,6 @@ exports[`renders 2 columns layout correctly 1`] = `
     -ms-flex: 0 0 345px;
     flex: 0 0 345px;
     max-width: 345px;
-    margin-left: 0;
-    margin-right: 0;
   }
 }
 
@@ -1232,7 +1193,6 @@ exports[`renders 2 columns layout correctly 1`] = `
   >
     <a
       className="c2"
-      href="/test"
       rel={null}
       target="self"
     >
@@ -1273,38 +1233,6 @@ exports[`renders 2 columns layout correctly 1`] = `
              of text here
           </p>
         </div>
-        <div
-          className="c10"
-        >
-          <span
-            className="c11 c12"
-          >
-            test go
-            <img
-              alt=""
-              aria-hidden="true"
-              className="c13 c14"
-              src="mock.asset"
-            />
-          </span>
-          <div
-            className="c15 c16"
-          >
-            <svg
-              className="c17"
-              fill="none"
-              height="13"
-              viewBox="0 0 15 13"
-              width="15"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
-                fill="currentColor"
-              />
-            </svg>
-          </div>
-        </div>
       </div>
     </a>
   </div>
@@ -1856,8 +1784,8 @@ exports[`renders carousel mode correctly 1`] = `
     width: 100%;
     margin: 0;
     max-width: 100%;
-    overflow-x: visible;
-    overflow-y: scroll;
+    overflow-x: auto;
+    overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
     -webkit-scroll-snap-type: x mandatory;
     -moz-scroll-snap-type: x mandatory;
@@ -1983,7 +1911,6 @@ exports[`renders carousel mode correctly 1`] = `
   >
     <a
       className="c2"
-      href="/test"
       rel={null}
       target="self"
     >
@@ -2024,38 +1951,6 @@ exports[`renders carousel mode correctly 1`] = `
              of text here
           </p>
         </div>
-        <div
-          className="c10"
-        >
-          <span
-            className="c11 c12"
-          >
-            test go
-            <img
-              alt=""
-              aria-hidden="true"
-              className="c13 c14"
-              src="mock.asset"
-            />
-          </span>
-          <div
-            className="c15 c16"
-          >
-            <svg
-              className="c17"
-              fill="none"
-              height="13"
-              viewBox="0 0 15 13"
-              width="15"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
-                fill="currentColor"
-              />
-            </svg>
-          </div>
-        </div>
       </div>
     </a>
   </div>
@@ -2530,8 +2425,7 @@ exports[`renders correctly with data prop 1`] = `
 @media (max-width:739px) {
   .c1 {
     max-width: 309px;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 0;
   }
 }
 
@@ -2544,8 +2438,6 @@ exports[`renders correctly with data prop 1`] = `
     -ms-flex: 0 0 100%;
     flex: 0 0 100%;
     max-width: 309px;
-    margin-left: auto;
-    margin-right: auto;
   }
 }
 
@@ -2714,7 +2606,6 @@ exports[`renders correctly with data prop 1`] = `
   >
     <a
       className="c2"
-      href="/test"
       rel={null}
       target="self"
     >
@@ -2755,38 +2646,6 @@ exports[`renders correctly with data prop 1`] = `
              of text here
           </p>
         </div>
-        <div
-          className="c10"
-        >
-          <span
-            className="c11 c12"
-          >
-            test go
-            <img
-              alt=""
-              aria-hidden="true"
-              className="c13 c14"
-              src="mock.asset"
-            />
-          </span>
-          <div
-            className="c15 c16"
-          >
-            <svg
-              className="c17"
-              fill="none"
-              height="13"
-              viewBox="0 0 15 13"
-              width="15"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
-                fill="currentColor"
-              />
-            </svg>
-          </div>
-        </div>
       </div>
     </a>
   </div>

package/src/components/Molecules/CTA/CTAMultiCard/example_data.json

@@ -10,6 +10,7 @@
         {
           "id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14",
           "title": "Full Card Oooh Chilly",
+          "body": "Load of text here",
           "backgroundColour": "White",
           "link": "/test",
           "linkLabel": "test go",
@@ -42,9 +43,8 @@
         {
           "id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14-2",
           "title": "Full Card Oooh Chilly",
+          "body": "I don't have a link",
           "backgroundColour": "White",
-          "link": "/test",
-          "linkLabel": "test go",
           "image": {
             "description": "",
             "gatsbyImageData": {
@@ -74,6 +74,7 @@
         {
           "id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14-3",
           "title": "Full Card Oooh Chilly",
+          "body": "Third card",
           "backgroundColour": "White",
           "link": "/test",
           "linkLabel": "test go",

package/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.js

@@ -61,7 +61,7 @@ CTASingleCard.propTypes = {
         })
       }),
       backgroundColour: PropTypes.string,
-      link: PropTypes.string.isRequired,
+      link: PropTypes.string,
       linkLabel: PropTypes.string
     }),
     paddingAbove: PropTypes.string,

package/src/components/Molecules/CTA/shared/CTACard.js

@@ -96,7 +96,7 @@ CTACard.propTypes = {
   card: PropTypes.shape({
     id: PropTypes.string.isRequired,
     body: PropTypes.node,
-    link: PropTypes.string.isRequired,
+    link: PropTypes.string,
     linkLabel: PropTypes.string,
     fallback: PropTypes.string,
     imageLow: PropTypes.string,

package/src/components/Molecules/CTA/shared/CTACard.style.js

@@ -3,63 +3,6 @@ import { bounceUpAnimation, springScaleAnimation } from '../../../../theme/share
 import { breakpointValues } from '../../../../theme/shared/allBreakpoints';
 import fontHelper from '../../../../theme/crTheme/fontHelper';
 
-// const CardsContainer = styled.div`
-//   display: flex;
-//   flex-direction: column;
-//   width: 100%;
-//   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
-//   gap: 1rem;
-
-//   // Mobile carousel mode - horizontal scroll container (only on mobile, below M breakpoint)
-//   ${({ isCarousel }) => isCarousel && css`
-//     @media (max-width: ${breakpointValues.M - 1}px) {
-//       flex-direction: row;
-//       flex-wrap: nowrap;
-//       overflow-x: visible;
-//       overflow-y: scroll;
-//       -webkit-overflow-scrolling: touch;
-//       scroll-snap-type: x mandatory;
-//       padding: 0.75rem 0.5rem;
-//       margin-left: 0.5rem;
-
-//       scrollbar-width: none;
-//       -ms-overflow-style: none;
-//       &::-webkit-scrollbar {
-//         display: none;
-//       }
-//     }
-//   `}
-
-//   // Mobile stack mode - vertical layout (only on mobile, below M breakpoint)
-//   ${({ isCarousel }) => !isCarousel && css`
-//     @media (max-width: ${breakpointValues.M - 1}px) {
-//       flex-direction: column;
-//       background: transparent;
-//     }
-//   `}
-
-//   // Desktop flexbox layout - 2 columns with centered wrap
-//   @media ${({ theme }) => theme.allBreakpoints('M')} {
-//     flex-direction: row;
-//     flex-wrap: wrap;
-//     justify-content: center;
-//     align-items: stretch;
-//     width: fit-content;
-//     max-width: 100%;
-//     margin: 0 auto;
-//   }
-
-//   // Desktop grid layout for XL breakpoint - 3 columns
-//   @media ${({ theme }) => theme.allBreakpoints('XL')} {
-//     display: grid;
-//     justify-content: center;
-//     grid-template-columns: ${({ columns }) => `repeat(${columns}, 1fr)`};
-//     width: ${({ columns }) => (columns === 2 ? 'fit-content' : '100%')};
-//     margin: ${({ columns }) => (columns === 2 ? '0 auto' : '0')};
-//     max-width: 100%;
-//   }
-// `;
-
 const ImageWrapper = styled.div`
   width: 100%;
   overflow: hidden;
@@ -244,8 +187,7 @@ const CardWrapper = styled.div`
     /* Below M: stacked cards, keep them centred */
     @media (max-width: ${breakpointValues.M - 1}px) {
       max-width: ${({ columns }) => (columns === 3 ? '309px' : '345px')};
-      margin-left: auto;
-      margin-right: auto;
+      margin: 0;
     }
 
     @media (min-width: ${breakpointValues.M}px) and (max-width: ${breakpointValues.L - 1}px) {
@@ -254,14 +196,10 @@ const CardWrapper = styled.div`
     ? css`
               flex: 0 0 100%;
               max-width: 309px;
-              margin-left: auto;
-              margin-right: auto;
             `
     : css`
               flex: 0 0 345px;
               max-width: 345px;
-              margin-left: 0;
-              margin-right: 0;
             `)}
     }
   `}

package/src/utils/allowListed.js

@@ -5,7 +5,9 @@ const allowList = [
   'https://www.sportrelief.com',
   'https://app.beapplied.com/org/comic-relief',
   'stories.comicrelief.com',
-  'https://form.typeform.com'
+  'https://form.typeform.com',
+  // Required for the HHoF form:
+  'https://interfaces.zapier.com/assets/web-components/zapier-interfaces/zapier-interfaces.esm.js'
 ];
 
 const allowListed = url => {