@comicrelief/component-library 8.51.4 → 8.51.5

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

@@ -1,13 +1,15 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 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 _CTACard = _interopRequireDefault(require("../shared/CTACard"));
-var _CTASingleCard = _interopRequireDefault(require("./CTASingleCard.style"));
+var _CTASingleCard = _interopRequireWildcard(require("./CTASingleCard.style"));
 /**
  * CTASingleCard Component
  *
@@ -26,19 +28,22 @@ const CTASingleCard = _ref => {
   } = _ref;
   const {
     card,
+    backgroundColour,
     paddingAbove,
     paddingBelow
   } = data || {};
   if (!card) {
     return null;
   }
+  const sectionBackgroundColour = (0, _snakeCase2.default)(backgroundColour || 'transparent');
   return /*#__PURE__*/_react.default.createElement(_CTASingleCard.default, {
     paddingAbove: paddingAbove,
-    paddingBelow: paddingBelow
-  }, /*#__PURE__*/_react.default.createElement(_CTACard.default, {
+    paddingBelow: paddingBelow,
+    backgroundColor: sectionBackgroundColour
+  }, /*#__PURE__*/_react.default.createElement(_CTASingleCard.SingleCardInner, null, /*#__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

@@ -11,14 +11,14 @@ The component expects pre-rendered content to be passed in the `body` field of t
 
 - `data`: an object containing:
   - `card`: the processed card object (see below)
+  - `backgroundColour`: background colour for the full-width section (e.g. `"grey_medium"`, `"Transparent"`)
   - `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:
+**Note:** The frontend is responsible for processing image data and link targets. 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)
@@ -31,6 +31,7 @@ import Text from '../../../Atoms/Text/Text';
 
 const exampleCard = {
   id: 'single-card-1',
+  label: 'Example Label',
   body: (
     <Text tag="p">
       <strong>Single Card</strong> content here
@@ -41,18 +42,17 @@ const exampleCard = {
   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' }} />
+  <CTASingleCard data={{ card: exampleCard, backgroundColour: 'Transparent', paddingAbove: '1rem', paddingBelow: '2rem' }} />
 </div>;
 ```
 
-### CTASingleCard: With Different Card Background Colour
+### CTASingleCard: With Background Colour
 
 ```js
 import CTASingleCard from './CTASingleCard';
@@ -60,9 +60,10 @@ import Text from '../../../Atoms/Text/Text';
 
 const exampleCard = {
   id: 'single-card-2',
+  label: 'Example Label',
   body: (
     <Text tag="p">
-      Single card with custom background colour
+      Single card with background colour set on the full-width section
     </Text>
   ),
   link: "/test",
@@ -70,14 +71,13 @@ const exampleCard = {
   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' }} />
+  <CTASingleCard data={{ card: exampleCard, backgroundColour: 'grey_medium', paddingAbove: '1rem', paddingBelow: '2rem' }} />
 </div>;
 ```
 
@@ -91,6 +91,7 @@ import Text from '../../../Atoms/Text/Text';
 
 const exampleCardWithLongText = {
   id: 'single-card-long-text',
+  label: 'Example Label',
   body: (
     <>
       <Text tag="p">
@@ -112,13 +113,12 @@ const exampleCardWithLongText = {
   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' }} />
+  <CTASingleCard data={{ card: exampleCardWithLongText, backgroundColour: 'rnd_26_light_pink', paddingAbove: '4rem', paddingBelow: '4rem' }} />
 </div>;
 ```

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

@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.SingleCardSection = exports.SingleCardInner = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-const SingleCardContainer = _styledComponents.default.div.withConfig({
-  displayName: "CTASingleCardstyle__SingleCardContainer",
+const SingleCardSection = exports.SingleCardSection = _styledComponents.default.div.withConfig({
+  displayName: "CTASingleCardstyle__SingleCardSection",
   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 => {
+})(["padding-top:", ";padding-bottom:", ";width:100%;background:", ";"], _ref => {
   let {
     paddingAbove
   } = _ref;
@@ -19,5 +19,15 @@ const SingleCardContainer = _styledComponents.default.div.withConfig({
     paddingBelow
   } = _ref2;
   return paddingBelow;
-}, 0.4, -1.15, 2.35);
-var _default = exports.default = SingleCardContainer;
+}, _ref3 => {
+  let {
+    theme,
+    backgroundColor
+  } = _ref3;
+  return theme.color(backgroundColor);
+});
+const SingleCardInner = exports.SingleCardInner = _styledComponents.default.div.withConfig({
+  displayName: "CTASingleCardstyle__SingleCardInner",
+  componentId: "sc-15wjhr6-1"
+})(["display:flex;width:100%;max-width:1152px;margin:0 auto;"]);
+var _default = exports.default = SingleCardSection;

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

@@ -24,6 +24,7 @@ const makeProcessedCard = card => {
 };
 const exampleCard = {
   id: 'single-card-1',
+  label: 'Example Label',
   body: /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p"
   }, /*#__PURE__*/_react.default.createElement("strong", null, "Single Card"), " content here"),
@@ -56,6 +57,7 @@ const exampleCard = {
 };
 const cardWithoutImage = {
   id: 'single-card-no-image',
+  label: 'Example Label',
   body: /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p"
   }, "Card without image"),