@comicrelief/component-library 8.49.1 → 8.50.1

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

@@ -0,0 +1,107 @@
+{
+  "__typename": "ContentfulParagraphCardsDs",
+  "title": "test cards 6",
+  "backgroundColour": "Transparent",
+  "layout": "3 columns",
+  "columnsOnMd": false,
+  "paddingOptions": "Both Off",
+  "carouselOfCards": false,
+  "cards": [
+        {
+          "id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14",
+          "title": "Full Card Oooh Chilly",
+          "backgroundColour": "White",
+          "link": "/test",
+          "linkLabel": "test go",
+          "image": {
+            "description": "",
+            "gatsbyImageData": {
+              "images": {
+                "sources": [
+                  {
+                    "srcSet": "@component-library/src/styleguide/assets/challenge-1.jpg 678w",
+                    "sizes": "100vw",
+                    "type": "image/webp"
+                  }
+                ],
+                "fallback": {
+                  "src": "@component-library/src/styleguide/assets/challenge-1.jpg",
+                  "srcSet": "@component-library/src/styleguide/assets/challenge-1.jpg 678w",
+                  "sizes": "100vw"
+                }
+              },
+              "layout": "fullWidth",
+              "width": 1,
+              "height": 0.7389380530973452,
+              "placeholder": {
+                "fallback": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
+              }
+            }
+          }
+        },
+        {
+          "id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14-2",
+          "title": "Full Card Oooh Chilly",
+          "backgroundColour": "White",
+          "link": "/test",
+          "linkLabel": "test go",
+          "image": {
+            "description": "",
+            "gatsbyImageData": {
+              "images": {
+                "sources": [
+                  {
+                    "srcSet": "@component-library/src/styleguide/assets/challenge-1.jpg 678w",
+                    "sizes": "100vw",
+                    "type": "image/webp"
+                  }
+                ],
+                "fallback": {
+                  "src": "@component-library/src/styleguide/assets/challenge-1.jpg",
+                  "srcSet": "@component-library/src/styleguide/assets/challenge-1.jpg 678w",
+                  "sizes": "100vw"
+                }
+              },
+              "layout": "fullWidth",
+              "width": 1,
+              "height": 0.7389380530973452,
+              "placeholder": {
+                "fallback": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
+              }
+            }
+          }
+        },
+        {
+          "id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14-3",
+          "title": "Full Card Oooh Chilly",
+          "backgroundColour": "White",
+          "link": "/test",
+          "linkLabel": "test go",
+          "image": {
+            "description": "",
+            "gatsbyImageData": {
+              "images": {
+                "sources": [
+                  {
+                    "srcSet": "@component-library/src/styleguide/assets/challenge-1.jpg 678w",
+                    "sizes": "100vw",
+                    "type": "image/webp"
+                  }
+                ],
+                "fallback": {
+                  "src": "@component-library/src/styleguide/assets/challenge-1.jpg",
+                  "srcSet": "@component-library/src/styleguide/assets/challenge-1.jpg 678w",
+                  "sizes": "100vw"
+                }
+              },
+              "layout": "fullWidth",
+              "width": 1,
+              "height": 0.7389380530973452,
+              "placeholder": {
+                "fallback": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
+              }
+            }
+          }
+        }
+      ]
+}

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

@@ -0,0 +1,44 @@
+"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 _CTACard = _interopRequireDefault(require("../shared/CTACard"));
+var _CTASingleCard = _interopRequireDefault(require("./CTASingleCard.style"));
+/**
+ * CTASingleCard Component
+ *
+ * This component displays a single card, full-width across the page.
+ * It looks and behaves like the single cards from CTAMultiCard, but
+ * is always displayed as a single full-width card with no grid layout.
+ *
+ * Note: The component expects pre-rendered content in the `body`
+ * field of the card. The frontend should handle rich text rendering
+ * before passing data to this component.
+ */
+
+const CTASingleCard = _ref => {
+  let {
+    data
+  } = _ref;
+  const {
+    card,
+    paddingAbove,
+    paddingBelow
+  } = data || {};
+  if (!card) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_CTASingleCard.default, {
+    paddingAbove: paddingAbove,
+    paddingBelow: paddingBelow
+  }, /*#__PURE__*/_react.default.createElement(_CTACard.default, {
+    card: card,
+    isCarousel: false,
+    isSingleCard: true
+  }));
+};
+var _default = exports.default = CTASingleCard;

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

@@ -0,0 +1,124 @@
+# CTASingleCard
+## Single full-width card component
+
+This component displays a single card, full-width across the page. It looks and behaves like the single cards from CTAMultiCard, but is always displayed as a single full-width card with no grid layout or carousel functionality.
+
+The component expects pre-rendered content to be passed in the `body` field of the card. The frontend should handle rich text rendering before passing data to this component.
+
+### Props
+
+`CTASingleCard` takes a single required prop:
+
+- `data`: an object containing:
+  - `card`: the processed card object (see below)
+  - `paddingAbove`: CSS value for top padding (e.g. `"1rem"`, `"32px"`)
+  - `paddingBelow`: CSS value for bottom padding (e.g. `"2rem"`, `"32px"`)
+
+**Note:** The frontend is responsible for processing image data, link targets, and background colors. The 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)
+
+### CTASingleCard: Basic Example
+
+```js
+import CTASingleCard from './CTASingleCard';
+import Text from '../../../Atoms/Text/Text';
+
+const exampleCard = {
+  id: 'single-card-1',
+  body: (
+    <Text tag="p">
+      <strong>Single Card</strong> content here
+    </Text>
+  ),
+  link: "/test",
+  linkLabel: "Learn more",
+  fallback: "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg",
+  imageLow: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z",
+  images: "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&q=80&fm=webp 678w",
+  bgColour: "white",
+  description: "Example image",
+  target: "self",
+  external: null
+};
+
+<div style={{ padding: '2rem', background: '#E1E2E3' }}>
+  <CTASingleCard data={{ card: exampleCard, paddingAbove: '1rem', paddingBelow: '2rem' }} />
+</div>;
+```
+
+### CTASingleCard: With Different Card Background Colour
+
+```js
+import CTASingleCard from './CTASingleCard';
+import Text from '../../../Atoms/Text/Text';
+
+const exampleCard = {
+  id: 'single-card-2',
+  body: (
+    <Text tag="p">
+      Single card with custom background colour
+    </Text>
+  ),
+  link: "/test",
+  linkLabel: "Learn more",
+  fallback: "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg",
+  imageLow: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z",
+  images: "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&q=80&fm=webp 678w",
+  bgColour: "grey_2",
+  description: "Example image",
+  target: "self",
+  external: null
+};
+
+<div style={{ padding: '2rem', background: '#E1E2E3' }}>
+  <CTASingleCard data={{ card: exampleCard, paddingAbove: '1rem', paddingBelow: '2rem' }} />
+</div>;
+```
+
+### CTASingleCard: With Long Text
+
+**NB: This example contains a lot of lorem ipsum text to demonstrate that the card will grow in height to accommodate longer content. The image proportion remains constant (1/3 width on desktop), while the card height adjusts based on the text content.**
+
+```js
+import CTASingleCard from './CTASingleCard';
+import Text from '../../../Atoms/Text/Text';
+
+const exampleCardWithLongText = {
+  id: 'single-card-long-text',
+  body: (
+    <>
+      <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">
+        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
+      </Text>
+    </>
+  ),
+  link: "/test",
+  linkLabel: "Learn more",
+  fallback: "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg",
+  imageLow: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z",
+  images: "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&q=80&fm=webp 678w",
+  bgColour: "white",
+  description: "Example image",
+  target: "self",
+  external: null
+};
+
+<div style={{ background: '#E1E2E3' }}>
+  <CTASingleCard data={{ card: exampleCardWithLongText, paddingAbove: '4rem', paddingBelow: '4rem' }} />
+</div>;
+```

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const SingleCardContainer = _styledComponents.default.div.withConfig({
+  displayName: "CTASingleCardstyle__SingleCardContainer",
+  componentId: "sc-15wjhr6-0"
+})(["padding-top:", ";padding-bottom:", ";display:flex;width:100%;max-width:1152px;margin:0 auto;background:transparent;img{transform:scale(1.02);transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");}"], _ref => {
+  let {
+    paddingAbove
+  } = _ref;
+  return paddingAbove;
+}, _ref2 => {
+  let {
+    paddingBelow
+  } = _ref2;
+  return paddingBelow;
+}, 0.4, -1.15, 2.35);
+var _default = exports.default = SingleCardContainer;

package/dist/components/Molecules/CTA/CTASingleCard/CTASingleCard.test.js

@@ -0,0 +1,96 @@
+"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 _CTASingleCard = _interopRequireDefault(require("./CTASingleCard"));
+var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
+const makeProcessedCard = card => {
+  var _card$image, _card$image$gatsbyIma, _card$image$gatsbyIma2, _card$image$gatsbyIma3, _card$image2, _card$image2$gatsbyIm, _card$image2$gatsbyIm2, _card$image3, _card$image3$gatsbyIm, _card$image3$gatsbyIm2, _card$image3$gatsbyIm3, _card$image3$gatsbyIm4, _card$image4;
+  const fallback = card === null || card === void 0 ? void 0 : (_card$image = card.image) === null || _card$image === void 0 ? void 0 : (_card$image$gatsbyIma = _card$image.gatsbyImageData) === null || _card$image$gatsbyIma === void 0 ? void 0 : (_card$image$gatsbyIma2 = _card$image$gatsbyIma.images) === null || _card$image$gatsbyIma2 === void 0 ? void 0 : (_card$image$gatsbyIma3 = _card$image$gatsbyIma2.fallback) === null || _card$image$gatsbyIma3 === void 0 ? void 0 : _card$image$gatsbyIma3.src;
+  const imageLow = card === null || card === void 0 ? void 0 : (_card$image2 = card.image) === null || _card$image2 === void 0 ? void 0 : (_card$image2$gatsbyIm = _card$image2.gatsbyImageData) === null || _card$image2$gatsbyIm === void 0 ? void 0 : (_card$image2$gatsbyIm2 = _card$image2$gatsbyIm.placeholder) === null || _card$image2$gatsbyIm2 === void 0 ? void 0 : _card$image2$gatsbyIm2.fallback;
+  const images = card === null || card === void 0 ? void 0 : (_card$image3 = card.image) === null || _card$image3 === void 0 ? void 0 : (_card$image3$gatsbyIm = _card$image3.gatsbyImageData) === null || _card$image3$gatsbyIm === void 0 ? void 0 : (_card$image3$gatsbyIm2 = _card$image3$gatsbyIm.images) === null || _card$image3$gatsbyIm2 === void 0 ? void 0 : (_card$image3$gatsbyIm3 = _card$image3$gatsbyIm2.sources) === null || _card$image3$gatsbyIm3 === void 0 ? void 0 : (_card$image3$gatsbyIm4 = _card$image3$gatsbyIm3[0]) === null || _card$image3$gatsbyIm4 === void 0 ? void 0 : _card$image3$gatsbyIm4.srcSet;
+  return {
+    ...card,
+    fallback,
+    imageLow,
+    images,
+    bgColour: 'white',
+    description: (card === null || card === void 0 ? void 0 : (_card$image4 = card.image) === null || _card$image4 === void 0 ? void 0 : _card$image4.description) || '',
+    target: 'self',
+    external: null
+  };
+};
+const exampleCard = {
+  id: 'single-card-1',
+  body: /*#__PURE__*/_react.default.createElement(_Text.default, {
+    tag: "p"
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Single Card"), " content here"),
+  image: {
+    description: "Example image",
+    gatsbyImageData: {
+      images: {
+        sources: [{
+          srcSet: "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&q=80&fm=webp 678w",
+          sizes: "100vw",
+          type: "image/webp"
+        }],
+        fallback: {
+          src: "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg",
+          srcSet: "https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg 678w",
+          sizes: "100vw"
+        }
+      },
+      layout: "fullWidth",
+      width: 1,
+      height: 0.7389380530973452,
+      placeholder: {
+        fallback: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
+      }
+    }
+  },
+  backgroundColour: "White",
+  link: "/test",
+  linkLabel: "Learn more"
+};
+const cardWithoutImage = {
+  id: 'single-card-no-image',
+  body: /*#__PURE__*/_react.default.createElement(_Text.default, {
+    tag: "p"
+  }, "Card without image"),
+  backgroundColour: "Blue Light",
+  link: "/test-no-image",
+  linkLabel: "View card",
+  image: null
+};
+it('renders correctly with data prop', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CTASingleCard.default, {
+    data: {
+      card: makeProcessedCard(exampleCard),
+      paddingAbove: '1rem',
+      paddingBelow: '2rem'
+    }
+  })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+it('renders correctly without image', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CTASingleCard.default, {
+    data: {
+      card: makeProcessedCard(cardWithoutImage),
+      paddingAbove: '1rem',
+      paddingBelow: '2rem'
+    }
+  })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+it('returns null when card is not provided', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CTASingleCard.default, {
+    data: {
+      card: null,
+      paddingAbove: '1rem',
+      paddingBelow: '2rem'
+    }
+  })).toJSON();
+  expect(tree).toBeNull();
+});