@comicrelief/component-library 8.47.4 → 8.48.1

package/.eslintrc

@@ -34,6 +34,9 @@
     "jest": true,
     "browser": true
   },
+  "parserOptions": {
+    "ecmaVersion": 2020
+  },
   "globals": {
     "window": true
   },

package/dist/components/Atoms/Input/Input.md

@@ -141,6 +141,7 @@ const ItalicText = styled(Text).attrs({weight: 'normal'})`
   <>
     <h4>Input with Description:</h4>
     <Input
+      name="input-with-description"
       placeholder="I have a description"
       type="text"
       label="My Great Input"

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

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const StyledArrowIcon = _styledComponents.default.svg.withConfig({
+  displayName: "ArrowIcon__StyledArrowIcon",
+  componentId: "sc-jxto1w-0"
+})(["display:inline-block;color:", ";fill:currentColor;"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.color('white');
+});
+const ArrowIcon = () => /*#__PURE__*/_react.default.createElement(StyledArrowIcon, {
+  width: "15",
+  height: "13",
+  viewBox: "0 0 15 13",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("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"
+}));
+var _default = exports.default = ArrowIcon;

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

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _snakeCase2 = _interopRequireDefault(require("lodash/snakeCase"));
+var _react = _interopRequireDefault(require("react"));
+var _SingleCard = _interopRequireDefault(require("./SingleCard"));
+var _CTAMultiCard = require("./CTAMultiCard.style");
+/**
+ * CTAMultiCard Component
+ *
+ * This component is a successor to the CardsDs component.
+ * Previously, the comicrelief-contentful frontend would map
+ * through data and create multiple CardsDs instances.
+ * Now CTAMultiCard handles the mapping internally, accepting
+ * a data object and rendering all cards.
+ *
+ * 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.
+ */
+
+const CTAMultiCard = _ref => {
+  let {
+    data
+  } = _ref;
+  const {
+    cards,
+    backgroundColour: bgCards,
+    layout,
+    carouselOfCards
+  } = data;
+  if (!cards || !Array.isArray(cards) || cards.length === 0) {
+    return null;
+  }
+
+  // Convert layout string to number (e.g., "3 columns"
+  // (that's how it comes through from Contentful) -> 3)
+  const columns = layout && layout.includes('3') ? 3 : 2;
+  const cardsBackground = (0, _snakeCase2.default)(bgCards || 'white');
+  return /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardsContainer, {
+    backgroundColor: cardsBackground,
+    columns: columns,
+    isCarousel: carouselOfCards
+  }, cards.map(card => /*#__PURE__*/_react.default.createElement(_SingleCard.default, {
+    key: card.id,
+    card: card,
+    isCarousel: carouselOfCards
+  })));
+};
+var _default = exports.default = CTAMultiCard;

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

@@ -0,0 +1,104 @@
+# CTAMultiCard
+## Multi-card component that handles mapping through cards array internally
+
+The component expects pre-rendered content to be passed in the `body` field of each card. The frontend should handle rich text rendering before passing data to this component.
+
+**Note:** The frontend is responsible for processing image data, link targets, and background colors. Each card object should include the following processed fields:
+- `fallback`: The fallback image src from `image.gatsbyImageData.images.fallback.src`
+- `imageLow`: The placeholder image from `image.gatsbyImageData.placeholder.fallback`
+- `images`: The srcSet from `image.gatsbyImageData.images.sources[0].srcSet`
+- `bgColour`: The processed background color (snake_case format)
+- `description`: The image description from `image.description`
+- `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)
+
+**NB: In mobile view, this example displays as a 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');
+
+// Map cards to include pre-rendered body content and processed image/link data
+const cardsWithRenderedBody = exampleData.cards.map(card => ({
+  ...card,
+  body: (
+    <Text tag="p">
+      <strong>Load</strong> of text here
+    </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 data = {
+  ...exampleData,
+  cards: cardsWithRenderedBody,
+  carouselOfCards: true,
+  backgroundColour: "transparent"
+};
+
+<div style={{ padding: '2rem', background: '#E1E2E3' }}>
+  <CTAMultiCard data={data} />
+</div>;
+```
+
+### CTAMultiCard: Desktop Grid View (2 columns)
+
+**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).**
+
+```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, index) => ({
+  ...card,
+  body: index === 1 ? (
+    <>
+      <Text tag="p">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </Text>
+      <Text tag="p">
+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+      </Text>
+      <Text tag="p">
+        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
+      </Text>
+    </>
+  ) : (
+    <Text tag="p">
+      <strong>Load</strong> of text here
+    </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 dataWithLongText = {
+  ...exampleData,
+  layout: "2 columns",
+  carouselOfCards: false,
+  backgroundColour: "Transparent",
+  cards: cardsWithRenderedBody
+};
+
+<div style={{ padding: '2rem', background: '#E1E2E3' }}>
+  <CTAMultiCard data={dataWithLongText} />
+</div>;
+```

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

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageWrapper = exports.CopyAndLinkSection = exports.Copy = exports.CardsContainer = exports.CardWrapper = exports.CardLink = exports.CTATextUnderline = exports.CTAText = exports.CTA = exports.ArrowIconWrapper = void 0;
+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 = exports.CardsContainer = _styledComponents.default.div.withConfig({
+  displayName: "CTAMultiCardstyle__CardsContainer",
+  componentId: "sc-qq5ca0-0"
+})(["display:flex;flex-direction:column;width:100%;background:", ";gap:1rem;", " ", " @media ", "{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch;width:fit-content;max-width:100%;margin:0 auto;}@media ", "{display:grid;justify-content:center;grid-template-columns:", ";width:", ";margin:", ";max-width:100%;}"], _ref => {
+  let {
+    theme,
+    backgroundColor
+  } = _ref;
+  return theme.color(backgroundColor);
+}, _ref2 => {
+  let {
+    isCarousel
+  } = _ref2;
+  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "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;}}"], _allBreakpoints.breakpointValues.M - 1);
+}, _ref3 => {
+  let {
+    isCarousel
+  } = _ref3;
+  return !isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){flex-direction:column;background:transparent;}"], _allBreakpoints.breakpointValues.M - 1);
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.allBreakpoints('M');
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.allBreakpoints('XL');
+}, _ref6 => {
+  let {
+    columns
+  } = _ref6;
+  return `repeat(${columns}, 1fr)`;
+}, _ref7 => {
+  let {
+    columns
+  } = _ref7;
+  return columns === 2 ? 'fit-content' : '100%';
+}, _ref8 => {
+  let {
+    columns
+  } = _ref8;
+  return columns === 2 ? '0 auto' : '0';
+});
+const ImageWrapper = exports.ImageWrapper = _styledComponents.default.div.withConfig({
+  displayName: "CTAMultiCardstyle__ImageWrapper",
+  componentId: "sc-qq5ca0-1"
+})(["width:100%;overflow:hidden;flex-shrink:0;background:transparent;img{width:100%;height:auto;object-fit:cover;display:block;@media ", "{", "}}"], _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.allBreakpoints('M');
+}, (0, _animations.springScaleAnimation)(true));
+const CTAText = exports.CTAText = _styledComponents.default.span.withConfig({
+  displayName: "CTAMultiCardstyle__CTAText",
+  componentId: "sc-qq5ca0-2"
+})(["", " color:", ";font-weight:bold;text-decoration:none;position:relative;display:inline-block;"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return (0, _fontHelper.default)(theme, 'span');
+}, _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.color('grey');
+});
+const CTATextUnderline = exports.CTATextUnderline = _styledComponents.default.img.withConfig({
+  displayName: "CTAMultiCardstyle__CTATextUnderline",
+  componentId: "sc-qq5ca0-3"
+})(["height:4px;width:100%;position:absolute;left:0;bottom:-5px;transition:opacity 0.15s 0.1s;opacity:0;pointer-events:none;"]);
+const ArrowIconWrapper = exports.ArrowIconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "CTAMultiCardstyle__ArrowIconWrapper",
+  componentId: "sc-qq5ca0-4"
+})(["width:32px;height:32px;border-radius:50%;background:", ";display:flex;align-items:center;justify-content:center;flex-shrink:0;"], _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.color('grey');
+});
+
+// Card wrapper link - makes entire card clickable
+const CardLink = exports.CardLink = _styledComponents.default.a.withConfig({
+  displayName: "CTAMultiCardstyle__CardLink",
+  componentId: "sc-qq5ca0-5"
+})(["display:flex;position:relative;flex-direction:column;width:100%;height:100%;background:transparent;border-radius:1rem;box-shadow:0 0 1rem rgba(0,0,0,0.15);text-decoration:none;overflow:hidden;cursor:pointer;img{transform:scale(1.02);transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");}@media ", "{", ";&:hover{box-shadow:0 0 1.5rem rgba(0,0,0,0.25);", " img{transform:scale(1.1);}", "{color:", ";text-decoration:none;}", "{opacity:1;}", "{background:", ";}}}"], 0.4, -1.15, 2.35, _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.allBreakpoints('M');
+}, (0, _animations.bounceUpAnimation)(true, 0.02, 1), ImageWrapper, CTAText, _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.color('red');
+}, CTATextUnderline, ArrowIconWrapper, _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.color('red');
+});
+const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConfig({
+  displayName: "CTAMultiCardstyle__CardWrapper",
+  componentId: "sc-qq5ca0-6"
+})(["width:100%;flex-shrink:0;display:flex;flex-direction:column;align-self:stretch;", " ", " @media ", "{flex-basis:calc(50% - 1rem);max-width:564px;height:100%;align-self:stretch;}@media ", "{flex-basis:unset;max-width:564px;height:100%;align-self:stretch;}"], _ref16 => {
+  let {
+    isCarousel
+  } = _ref16;
+  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){scroll-snap-align:start;flex:0 0 calc(100% - 1.5rem);min-width:calc(100% - 1.5rem);max-width:calc(100% - 1.5rem);flex-shrink:0;margin-right:0.5rem;&:first-child{padding-left:0.5rem;}&:last-child{margin-right:0;padding-right:0.5rem;}}"], _allBreakpoints.breakpointValues.M - 1);
+}, _ref17 => {
+  let {
+    isCarousel
+  } = _ref17;
+  return !isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){width:100%;}"], _allBreakpoints.breakpointValues.M - 1);
+}, _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.allBreakpoints('M');
+}, _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.allBreakpoints('XL');
+});
+const CopyAndLinkSection = exports.CopyAndLinkSection = _styledComponents.default.div.withConfig({
+  displayName: "CTAMultiCardstyle__CopyAndLinkSection",
+  componentId: "sc-qq5ca0-7"
+})(["width:100%;background:", ";display:flex;flex-direction:column;padding:2rem;flex:1;min-height:0;border-radius:0 0 1rem 1rem;"], _ref20 => {
+  let {
+    theme,
+    backgroundColor
+  } = _ref20;
+  return theme.color(backgroundColor);
+});
+const Copy = exports.Copy = _styledComponents.default.div.withConfig({
+  displayName: "CTAMultiCardstyle__Copy",
+  componentId: "sc-qq5ca0-8"
+})(["flex:1;display:flex;flex-direction:column;min-height:0;"]);
+const CTA = exports.CTA = _styledComponents.default.div.withConfig({
+  displayName: "CTAMultiCardstyle__CTA",
+  componentId: "sc-qq5ca0-9"
+})(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-top:auto;padding-top:1rem;"]);

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

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+require("jest-styled-components");
+var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/shallowWithTheme"));
+var _CTAMultiCard = _interopRequireDefault(require("./CTAMultiCard"));
+var _example_data = _interopRequireDefault(require("./example_data.json"));
+var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
+// Map example data cards to include pre-rendered body content
+const cardsWithRenderedBody = _example_data.default.cards.map(card => ({
+  ...card,
+  body: /*#__PURE__*/_react.default.createElement(_Text.default, {
+    tag: "p"
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Load"), " of text here")
+}));
+const mockData = {
+  ..._example_data.default,
+  cards: [...cardsWithRenderedBody,
+  // Add a card without image for testing edge cases. This should not ever really happen in real life, but just in case...
+  {
+    id: '6bc887c7-f939-5654-a0c5-1b2caf91de6c',
+    title: 'Card no pic',
+    backgroundColour: 'Blue Light',
+    link: '/test-no-image',
+    linkLabel: 'View card',
+    body: /*#__PURE__*/_react.default.createElement(_Text.default, {
+      tag: "p"
+    }, "Load of text here"),
+    image: null
+  }]
+};
+it('renders correctly with data prop', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CTAMultiCard.default, {
+    data: mockData
+  })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+it('renders carousel mode correctly', () => {
+  const carouselData = {
+    ...mockData,
+    carouselOfCards: true
+  };
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CTAMultiCard.default, {
+    data: carouselData
+  })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+it('renders 2 columns layout correctly', () => {
+  const twoColumnData = {
+    ...mockData,
+    layout: '2 columns'
+  };
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CTAMultiCard.default, {
+    data: twoColumnData
+  })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+it('handles data structure correctly', () => {
+  const testData = {
+    cards: mockData.cards,
+    backgroundColour: 'White',
+    layout: '3 columns',
+    carouselOfCards: false
+  };
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CTAMultiCard.default, {
+    data: testData
+  })).toJSON();
+  expect(tree).toMatchSnapshot();
+});

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
+var _ArrowIcon = _interopRequireDefault(require("./ArrowIcon"));
+var _alt_cta_underline = _interopRequireDefault(require("../../../theme/shared/assets/alt_cta_underline.svg"));
+var _CTAMultiCard = require("./CTAMultiCard.style");
+const SingleCard = _ref => {
+  let {
+    card,
+    isCarousel
+  } = _ref;
+  const {
+    id,
+    body,
+    link,
+    linkLabel,
+    fallback,
+    imageLow,
+    images,
+    bgColour,
+    description,
+    target,
+    external
+  } = card;
+  return /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardWrapper, {
+    key: id,
+    isCarousel: isCarousel
+  }, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardLink, {
+    href: link,
+    target: target,
+    rel: external,
+    isCarousel: isCarousel,
+    backgroundColor: bgColour
+  }, imageLow && /*#__PURE__*/_react.default.createElement(_CTAMultiCard.ImageWrapper, null, /*#__PURE__*/_react.default.createElement(_Picture.default, {
+    alt: description,
+    imageLow: imageLow,
+    images: images,
+    image: fallback,
+    objectFit: "cover",
+    width: "100%",
+    height: "100%"
+  })), /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CopyAndLinkSection, {
+    backgroundColor: bgColour
+  }, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.Copy, null, body), linkLabel && /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CTA, null, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CTAText, null, linkLabel, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CTATextUnderline, {
+    src: _alt_cta_underline.default,
+    alt: "",
+    "aria-hidden": "true"
+  })), /*#__PURE__*/_react.default.createElement(_CTAMultiCard.ArrowIconWrapper, null, /*#__PURE__*/_react.default.createElement(_ArrowIcon.default, null))))));
+};
+var _default = exports.default = SingleCard;