@comicrelief/component-library 8.49.1 → 8.50.1

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

@@ -0,0 +1,67 @@
+"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 _CTACard = require("./CTACard.style");
+const CTACard = _ref => {
+  let {
+    card,
+    columns,
+    isCarousel,
+    isFullWidth,
+    isSingleCard
+  } = _ref;
+  // isSingleCard implies isFullWidth - single cards are always full width
+  const effectiveIsFullWidth = isSingleCard || isFullWidth;
+  const {
+    id,
+    body,
+    link,
+    linkLabel,
+    fallback,
+    imageLow,
+    images,
+    bgColour,
+    description,
+    target,
+    external
+  } = card;
+  return /*#__PURE__*/_react.default.createElement(_CTACard.CardWrapper, {
+    key: id,
+    isCarousel: isCarousel,
+    isFullWidth: effectiveIsFullWidth,
+    columns: columns
+  }, /*#__PURE__*/_react.default.createElement(_CTACard.CardLink, {
+    href: link,
+    target: target,
+    rel: external,
+    isCarousel: isCarousel,
+    isSingleCard: isSingleCard,
+    backgroundColor: bgColour
+  }, imageLow && /*#__PURE__*/_react.default.createElement(_CTACard.ImageWrapper, {
+    isSingleCard: isSingleCard
+  }, /*#__PURE__*/_react.default.createElement(_Picture.default, {
+    alt: description,
+    imageLow: imageLow,
+    images: images,
+    image: fallback,
+    objectFit: "cover",
+    width: "100%",
+    height: "100%"
+  })), /*#__PURE__*/_react.default.createElement(_CTACard.CopyAndLinkSection, {
+    backgroundColor: bgColour,
+    isSingleCard: isSingleCard
+  }, /*#__PURE__*/_react.default.createElement(_CTACard.Copy, null, body), linkLabel && /*#__PURE__*/_react.default.createElement(_CTACard.CTA, null, /*#__PURE__*/_react.default.createElement(_CTACard.CTAText, null, linkLabel, /*#__PURE__*/_react.default.createElement(_CTACard.CTATextUnderline, {
+    src: _alt_cta_underline.default,
+    alt: "",
+    "aria-hidden": "true"
+  })), /*#__PURE__*/_react.default.createElement(_CTACard.ArrowIconWrapper, null, /*#__PURE__*/_react.default.createElement(_ArrowIcon.default, null))))));
+};
+var _default = exports.default = CTACard;

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

@@ -0,0 +1,269 @@
+"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.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 = 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"
+})(["width:100%;overflow:hidden;flex-shrink:0;background:transparent;border-radius:1rem 1rem 0 0;", " img{width:100%;height:auto;object-fit:cover;display:block;", " @media ", "{", "}}"], _ref => {
+  let {
+    isSingleCard
+  } = _ref;
+  return isSingleCard && (0, _styledComponents.css)(["@media ", "{width:calc(100% / 3);min-width:292px;max-width:309px;flex-shrink:0;flex-grow:0;height:100%;border-radius:1rem 0 0 1rem;}@media ", "{min-width:355px;max-width:362px;}@media ", "{min-width:363px;max-width:363px;}"], _ref2 => {
+    let {
+      theme
+    } = _ref2;
+    return theme.breakpoints2026('M');
+  }, _ref3 => {
+    let {
+      theme
+    } = _ref3;
+    return theme.breakpoints2026('L');
+  }, _ref4 => {
+    let {
+      theme
+    } = _ref4;
+    return theme.breakpoints2026('XL');
+  });
+}, _ref5 => {
+  let {
+    isSingleCard
+  } = _ref5;
+  return isSingleCard && (0, _styledComponents.css)(["@media ", "{height:100%;object-fit:cover;}"], _ref6 => {
+    let {
+      theme
+    } = _ref6;
+    return theme.breakpoints2026('M');
+  });
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.allBreakpoints('M');
+}, (0, _animations.springScaleAnimation)(true));
+const CTAText = exports.CTAText = _styledComponents.default.span.withConfig({
+  displayName: "CTACardstyle__CTAText",
+  componentId: "sc-si8xx1-1"
+})(["", " color:", ";font-weight:bold;text-decoration:none;position:relative;display:inline-block;"], _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return (0, _fontHelper.default)(theme, 'span');
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.color('grey');
+});
+const CTATextUnderline = exports.CTATextUnderline = _styledComponents.default.img.withConfig({
+  displayName: "CTACardstyle__CTATextUnderline",
+  componentId: "sc-si8xx1-2"
+})(["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: "CTACardstyle__ArrowIconWrapper",
+  componentId: "sc-si8xx1-3"
+})(["width:32px;height:32px;border-radius:50%;background:", ";display:flex;align-items:center;justify-content:center;flex-shrink:0;"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.color('grey');
+});
+
+// Card wrapper link - makes entire card clickable
+const CardLink = exports.CardLink = _styledComponents.default.a.withConfig({
+  displayName: "CTACardstyle__CardLink",
+  componentId: "sc-si8xx1-4"
+})(["display:flex;position:relative;flex-direction:column;width:100%;flex:1 1 auto;background:transparent;border-radius:1rem;box-shadow:0 0 1rem rgba(0,0,0,0.15);text-decoration:none;overflow:hidden;cursor:pointer;box-sizing:border-box;", " 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:", ";}}}"], _ref11 => {
+  let {
+    isSingleCard
+  } = _ref11;
+  return isSingleCard && (0, _styledComponents.css)(["@media ", "{flex-direction:row;align-items:stretch;min-height:calc(219px - 4rem);}@media ", "{min-height:calc(272px - 4rem);}"], _ref12 => {
+    let {
+      theme
+    } = _ref12;
+    return theme.breakpoints2026('M');
+  }, _ref13 => {
+    let {
+      theme
+    } = _ref13;
+    return theme.breakpoints2026('L');
+  });
+}, 0.4, -1.15, 2.35, _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.allBreakpoints('M');
+}, (0, _animations.bounceUpAnimation)(true, 0.02, 1), ImageWrapper, CTAText, _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.color('red');
+}, CTATextUnderline, ArrowIconWrapper, _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.color('red');
+});
+const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConfig({
+  displayName: "CTACardstyle__CardWrapper",
+  componentId: "sc-si8xx1-5"
+})(["width:100%;flex-shrink:0;display:flex;flex-direction:column;align-self:stretch;", " ", " ", " ", ""], _ref17 => {
+  let {
+    isFullWidth
+  } = _ref17;
+  return isFullWidth && (0, _styledComponents.css)(["width:100%;max-width:100%;@media ", "{flex-basis:100%;max-width:100%;height:auto;}@media ", "{flex-basis:100%;max-width:100%;height:auto;}"], _ref18 => {
+    let {
+      theme
+    } = _ref18;
+    return theme.allBreakpoints('M');
+  }, _ref19 => {
+    let {
+      theme
+    } = _ref19;
+    return theme.allBreakpoints('XL');
+  });
+}, _ref20 => {
+  let {
+    isCarousel,
+    isFullWidth
+  } = _ref20;
+  return isCarousel && !isFullWidth && (0, _styledComponents.css)(["@media (max-width:", "px){scroll-snap-align:start;flex:0 0 309px;width:309px;flex-shrink:0;}"], _allBreakpoints.breakpointValues.L - 1);
+}, _ref21 => {
+  let {
+    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 => {
+    let {
+      columns
+    } = _ref22;
+    return columns === 3 ? '309px' : '345px';
+  }, _allBreakpoints.breakpointValues.M, _allBreakpoints.breakpointValues.L - 1, _ref23 => {
+    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;"]);
+  });
+}, _ref24 => {
+  let {
+    isFullWidth
+  } = _ref24;
+  return !isFullWidth && (0, _styledComponents.css)(["@media (min-width:", "px) and (max-width:", "px){", " align-self:stretch;}@media ", "{flex-basis:unset;width:", ";align-self:stretch;}"], _allBreakpoints.breakpointValues.L, _allBreakpoints.breakpointValues.XL - 1, _ref25 => {
+    let {
+      columns
+    } = _ref25;
+    return columns === 3 ? (0, _styledComponents.css)(["flex-basis:calc(33.333% - 1rem);min-width:286px;max-width:371px;"]) : (0, _styledComponents.css)(["flex-basis:calc(50% - 1rem);min-width:443px;max-width:564px;"]);
+  }, _ref26 => {
+    let {
+      theme
+    } = _ref26;
+    return theme.allBreakpoints('XL');
+  }, _ref27 => {
+    let {
+      columns
+    } = _ref27;
+    return columns === 3 ? '371px' : '564px';
+  });
+});
+const CopyAndLinkSection = exports.CopyAndLinkSection = _styledComponents.default.div.withConfig({
+  displayName: "CTACardstyle__CopyAndLinkSection",
+  componentId: "sc-si8xx1-6"
+})(["width:100%;background:", ";display:flex;flex-direction:column;padding:2rem;flex:1;min-height:0;border-radius:0 0 1rem 1rem;", ""], _ref28 => {
+  let {
+    theme,
+    backgroundColor
+  } = _ref28;
+  return theme.color(backgroundColor);
+}, _ref29 => {
+  let {
+    isSingleCard
+  } = _ref29;
+  return isSingleCard && (0, _styledComponents.css)(["@media ", "{width:calc(200% / 3);min-width:384px;max-width:650px;flex:1;border-radius:0 1rem 1rem 0;}@media ", "{min-width:541px;max-width:790px;}@media ", "{width:789px;}"], _ref30 => {
+    let {
+      theme
+    } = _ref30;
+    return theme.breakpoints2026('M');
+  }, _ref31 => {
+    let {
+      theme
+    } = _ref31;
+    return theme.breakpoints2026('L');
+  }, _ref32 => {
+    let {
+      theme
+    } = _ref32;
+    return theme.breakpoints2026('XL');
+  });
+});
+const Copy = exports.Copy = _styledComponents.default.div.withConfig({
+  displayName: "CTACardstyle__Copy",
+  componentId: "sc-si8xx1-7"
+})(["flex:1;display:flex;flex-direction:column;min-height:0;"]);
+const CTA = exports.CTA = _styledComponents.default.div.withConfig({
+  displayName: "CTACardstyle__CTA",
+  componentId: "sc-si8xx1-8"
+})(["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 → CTA/shared}/_ArrowIcon.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 const StyledArrowIcon = _styledComponents.default.svg.withConfig({
   displayName: "_ArrowIcon__StyledArrowIcon",
-  componentId: "sc-1xqghuh-0"
+  componentId: "sc-mqq2gw-0"
 })(["display:inline-block;color:", ";fill:currentColor;"], _ref => {
   let {
     theme

package/dist/components/Molecules/Descriptor/Descriptor.js

@@ -141,11 +141,7 @@ const Descriptor = _ref3 => {
     color: "grey_dark",
     family: "Montserrat"
   }, date), /*#__PURE__*/_react.default.createElement(IconWrapper, null, icons)), /*#__PURE__*/_react.default.createElement(Title, {
-    size: "xl",
-    tag: "h3",
-    height: "2rem",
-    weight: "normal",
-    family: "Anton"
+    tag: "h3"
   }, title), /*#__PURE__*/_react.default.createElement(TagWrapper, null, tagItems), /*#__PURE__*/_react.default.createElement(Description, null, children)));
 };
 var _default = exports.default = Descriptor;

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

@@ -52,14 +52,6 @@ it('renders article teaser correctly', () => {
       line-height: 1.5rem;
     }
 
-    .c7 {
-      font-size: 2rem;
-      line-height: normal;
-      font-family: 'Anton',Impact,sans-serif;
-      font-weight: normal;
-      line-height: 2rem;
-    }
-
     .c7 span {
       font-size: inherit;
       line-height: inherit;

package/dist/components/Molecules/{CTAMultiCard → OLD_CTAMultiCard}/CTAMultiCard.style.js

@@ -12,7 +12,7 @@ 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"
+  componentId: "sc-12iazzn-0"
 })(["padding-top:", ";padding-bottom:", ";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 ", "{", "}"], _ref => {
   let {
     paddingAbove
@@ -57,7 +57,7 @@ const CardsContainer = exports.CardsContainer = _styledComponents.default.div.wi
 });
 const ImageWrapper = exports.ImageWrapper = _styledComponents.default.div.withConfig({
   displayName: "CTAMultiCardstyle__ImageWrapper",
-  componentId: "sc-qq5ca0-1"
+  componentId: "sc-12iazzn-1"
 })(["width:100%;overflow:hidden;flex-shrink:0;background:transparent;img{width:100%;height:auto;object-fit:cover;display:block;@media ", "{", "}}"], _ref9 => {
   let {
     theme
@@ -66,7 +66,7 @@ const ImageWrapper = exports.ImageWrapper = _styledComponents.default.div.withCo
 }, (0, _animations.springScaleAnimation)(true));
 const CTAText = exports.CTAText = _styledComponents.default.span.withConfig({
   displayName: "CTAMultiCardstyle__CTAText",
-  componentId: "sc-qq5ca0-2"
+  componentId: "sc-12iazzn-2"
 })(["", " color:", ";font-weight:bold;text-decoration:none;position:relative;display:inline-block;"], _ref10 => {
   let {
     theme
@@ -80,11 +80,11 @@ const CTAText = exports.CTAText = _styledComponents.default.span.withConfig({
 });
 const CTATextUnderline = exports.CTATextUnderline = _styledComponents.default.img.withConfig({
   displayName: "CTAMultiCardstyle__CTATextUnderline",
-  componentId: "sc-qq5ca0-3"
+  componentId: "sc-12iazzn-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"
+  componentId: "sc-12iazzn-4"
 })(["width:32px;height:32px;border-radius:50%;background:", ";display:flex;align-items:center;justify-content:center;flex-shrink:0;"], _ref12 => {
   let {
     theme
@@ -95,7 +95,7 @@ const ArrowIconWrapper = exports.ArrowIconWrapper = _styledComponents.default.di
 // Card wrapper link - makes entire card clickable
 const CardLink = exports.CardLink = _styledComponents.default.a.withConfig({
   displayName: "CTAMultiCardstyle__CardLink",
-  componentId: "sc-qq5ca0-5"
+  componentId: "sc-12iazzn-5"
 })(["display:flex;position:relative;flex-direction:column;width:100%;flex:1 1 auto;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
@@ -114,8 +114,8 @@ const CardLink = exports.CardLink = _styledComponents.default.a.withConfig({
 });
 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;align-self:stretch;}@media ", "{flex-basis:unset;max-width:564px;align-self:stretch;}"], _ref16 => {
+  componentId: "sc-12iazzn-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;
@@ -139,7 +139,7 @@ const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConf
 });
 const CopyAndLinkSection = exports.CopyAndLinkSection = _styledComponents.default.div.withConfig({
   displayName: "CTAMultiCardstyle__CopyAndLinkSection",
-  componentId: "sc-qq5ca0-7"
+  componentId: "sc-12iazzn-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,
@@ -149,9 +149,9 @@ const CopyAndLinkSection = exports.CopyAndLinkSection = _styledComponents.defaul
 });
 const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "CTAMultiCardstyle__Copy",
-  componentId: "sc-qq5ca0-8"
+  componentId: "sc-12iazzn-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"
+  componentId: "sc-12iazzn-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/OLD_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-181nxlj-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 → OLD_CTAMultiCard}/__snapshots__/CTAMultiCard.test.js.snap

@@ -317,6 +317,7 @@ exports[`handles data structure correctly 1`] = `
     -ms-flex-preferred-size: calc(50% - 1rem);
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
+    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -329,6 +330,7 @@ exports[`handles data structure correctly 1`] = `
     -ms-flex-preferred-size: unset;
     flex-basis: unset;
     max-width: 564px;
+    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -869,6 +871,7 @@ exports[`renders 2 columns layout correctly 1`] = `
     -ms-flex-preferred-size: calc(50% - 1rem);
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
+    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -881,6 +884,7 @@ exports[`renders 2 columns layout correctly 1`] = `
     -ms-flex-preferred-size: unset;
     flex-basis: unset;
     max-width: 564px;
+    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -1472,6 +1476,7 @@ exports[`renders carousel mode correctly 1`] = `
     -ms-flex-preferred-size: calc(50% - 1rem);
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
+    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -1484,6 +1489,7 @@ exports[`renders carousel mode correctly 1`] = `
     -ms-flex-preferred-size: unset;
     flex-basis: unset;
     max-width: 564px;
+    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -2038,6 +2044,7 @@ exports[`renders correctly with data prop 1`] = `
     -ms-flex-preferred-size: calc(50% - 1rem);
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
+    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -2050,6 +2057,7 @@ exports[`renders correctly with data prop 1`] = `
     -ms-flex-preferred-size: unset;
     flex-basis: unset;
     max-width: 564px;
+    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;

package/dist/index.js

@@ -46,6 +46,12 @@ Object.defineProperty(exports, "CTAMultiCard", {
     return _CTAMultiCard.default;
   }
 });
+Object.defineProperty(exports, "CTASingleCard", {
+  enumerable: true,
+  get: function () {
+    return _CTASingleCard.default;
+  }
+});
 Object.defineProperty(exports, "Card", {
   enumerable: true,
   get: function () {
@@ -475,7 +481,8 @@ var _InfoBanner = _interopRequireDefault(require("./components/Molecules/InfoBan
 var _SingleMessage = _interopRequireDefault(require("./components/Molecules/SingleMessage/SingleMessage"));
 var _Card = _interopRequireDefault(require("./components/Molecules/Card/Card"));
 var _CardDs = _interopRequireDefault(require("./components/Molecules/CardDs/CardDs"));
-var _CTAMultiCard = _interopRequireDefault(require("./components/Molecules/CTAMultiCard/CTAMultiCard"));
+var _CTAMultiCard = _interopRequireDefault(require("./components/Molecules/CTA/CTAMultiCard/CTAMultiCard"));
+var _CTASingleCard = _interopRequireDefault(require("./components/Molecules/CTA/CTASingleCard/CTASingleCard"));
 var _Box = _interopRequireDefault(require("./components/Molecules/Box/Box"));
 var _ArticleTeaser = _interopRequireDefault(require("./components/Molecules/ArticleTeaser/ArticleTeaser"));
 var _Header = _interopRequireDefault(require("./components/Organisms/Header/Header"));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.49.1",
+  "version": "8.50.1",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Molecules/Accordion/Accordion.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css, keyframes } from 'styled-components';
+import Text from '../../Atoms/Text/Text';
 
 import spacing from '../../../theme/shared/spacing';
 import { Chevron } from '../../Atoms/Icons/index';
@@ -72,6 +73,10 @@ const Copy = styled.div`
   `)}
 `;
 
+const StyledText = styled(Text)`
+    margin-bottom: 0;
+`;
+
 const Accordion = ({
   children, title, contentBottomPadding, ...rest
 }) => {
@@ -84,7 +89,9 @@ const Accordion = ({
   return (
     <Container {...rest}>
       <Button onClick={handleOpen} aria-expanded={isOpen ? 'true' : 'false'} ChevronKeyframes={ChevronKeyframes} type="button">
-        {title}
+        <StyledText tag="h3">
+          {title}
+        </StyledText>
         <Icon>
           <Chevron colour="black" direction={isOpen ? 'up' : 'down'} />
         </Icon>