@comicrelief/component-library 8.51.3 → 8.51.5

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

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -11,7 +12,7 @@ var _reactResponsive = require("react-responsive");
 var _reactSplide = require("@splidejs/react-splide");
 require("../../../../vendor/splide/splide.min.css");
 var _CTACard = _interopRequireDefault(require("../shared/CTACard"));
-var _CTAMultiCard = _interopRequireDefault(require("./CTAMultiCard.style"));
+var _CTAMultiCard = _interopRequireWildcard(require("./CTAMultiCard.style"));
 var _allBreakpoints = require("../../../../theme/shared/allBreakpoints");
 // Vendor copy pinned to the Splide version compatible with our react-splide version.
 // If you bump @splidejs/react-splide, update `src/vendor/splide/splide.min.css` too.
@@ -55,13 +56,17 @@ const CTAMultiCard = _ref => {
   // (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.default, {
+  return /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardsQueryWrapper, null, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardsSection, {
     backgroundColor: cardsBackground,
+    paddingAbove: paddingAbove,
+    paddingBelow: paddingBelow,
+    isCarousel: carouselOfCards
+  }, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardsInner, {
+    isCarousel: carouselOfCards
+  }, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.default, {
     columns: columns,
     isCarousel: carouselOfCards,
-    useSplideCarousel: useSplideCarousel,
-    paddingAbove: paddingAbove,
-    paddingBelow: paddingBelow
+    useSplideCarousel: useSplideCarousel
   }, useSplideCarousel ? /*#__PURE__*/_react.default.createElement(_reactSplide.Splide, {
     options: {
       arrows: false,
@@ -86,6 +91,6 @@ const CTAMultiCard = _ref => {
     card: card,
     columns: columns,
     isCarousel: carouselOfCards
-  })));
+  }))))));
 };
 var _default = exports.default = CTAMultiCard;

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

@@ -49,7 +49,7 @@ const data = {
   paddingBelow: '0rem'
 };
 
-<div style={{ background: '#E1E2E3' }}>
+<div style={{ background: '#E1E2E3', width: '100%' }}>
   <CTAMultiCard data={data} />
 </div>;
 ```
@@ -103,7 +103,7 @@ const dataWithLongText = {
   paddingBelow: '4rem'
 };
 
-<div style={{ background: '#E1E2E3' }}>
+<div style={{ background: '#E1E2E3', width: '100%' }}>
   <CTAMultiCard data={dataWithLongText} />
 </div>;
 ```
@@ -137,13 +137,13 @@ const dataWrapExample = {
   ...exampleData,
   layout: "3 columns",
   carouselOfCards: false,
-  backgroundColour: "Transparent",
+  backgroundColour: "rnd_26_light_pink",
   cards: cardsWithRenderedBody,
   paddingAbove: '2rem',
   paddingBelow: '2rem'
 };
 
-<div style={{ background: '#E1E2E3'}}>
+<div style={{ background: '#E1E2E3', width: '100%' }}>
   <CTAMultiCard data={dataWrapExample} />
 </div>;
 ```

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

@@ -1,60 +1,79 @@
 "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.default = void 0;
+exports.default = exports.CardsSection = exports.CardsQueryWrapper = exports.CardsInner = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _allBreakpoints = require("../../../../theme/shared/allBreakpoints");
-const CardsContainer = _styledComponents.default.div.withConfig({
-  displayName: "CTAMultiCardstyle__CardsContainer",
+var _spacing = _interopRequireDefault(require("../../../../theme/shared/spacing"));
+const CardsQueryWrapper = exports.CardsQueryWrapper = _styledComponents.default.div.withConfig({
+  displayName: "CTAMultiCardstyle__CardsQueryWrapper",
   componentId: "sc-gsdqzv-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 => {
+})(["container-type:inline-size;container-name:cta-multi-card;width:100%;"]);
+const CardsSection = exports.CardsSection = _styledComponents.default.div.withConfig({
+  displayName: "CTAMultiCardstyle__CardsSection",
+  componentId: "sc-gsdqzv-1"
+})(["width:100%;background:", ";padding-top:", ";padding-bottom:", ";"], _ref => {
   let {
-    paddingAbove
+    theme,
+    backgroundColor
   } = _ref;
-  return paddingAbove;
+  return theme.color(backgroundColor);
 }, _ref2 => {
   let {
-    paddingBelow
+    paddingAbove
   } = _ref2;
-  return paddingBelow;
+  return paddingAbove;
 }, _ref3 => {
   let {
-    theme,
-    backgroundColor
+    paddingBelow
   } = _ref3;
-  return theme.color(backgroundColor);
-}, _ref4 => {
+  return paddingBelow;
+});
+const CardsInner = exports.CardsInner = _styledComponents.default.div.withConfig({
+  displayName: "CTAMultiCardstyle__CardsInner",
+  componentId: "sc-gsdqzv-2"
+})(["width:100%;max-width:1152px;margin:0 auto;", ""], _ref4 => {
   let {
     isCarousel
   } = _ref4;
-  return !isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){flex-direction:column;background:transparent;}"], _allBreakpoints.breakpointValues.M - 1);
-}, _ref5 => {
+  return !isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){padding-left:", ";padding-right:", ";}"], _allBreakpoints.breakpointValues.M - 1, (0, _spacing.default)('md'), (0, _spacing.default)('md'));
+});
+const CardsContainer = _styledComponents.default.div.withConfig({
+  displayName: "CTAMultiCardstyle__CardsContainer",
+  componentId: "sc-gsdqzv-3"
+})(["display:flex;flex-direction:column;width:100%;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 ", "{column-gap:2rem;}", " @media ", "{", "}"], _ref5 => {
   let {
     theme
   } = _ref5;
   return theme.allBreakpoints('M');
 }, _ref6 => {
   let {
-    isCarousel
+    theme
   } = _ref6;
-  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){", "}"], _allBreakpoints.breakpointValues.L - 1, _ref7 => {
+  return theme.allBreakpoints('L');
+}, _ref7 => {
+  let {
+    isCarousel
+  } = _ref7;
+  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){", "}"], _allBreakpoints.breakpointValues.L - 1, _ref8 => {
     let {
       useSplideCarousel
-    } = _ref7;
+    } = _ref8;
     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 => {
+}, _ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme.allBreakpoints('XL');
-}, _ref9 => {
+}, _ref10 => {
   let {
     columns
-  } = _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%;"]);
+  } = _ref10;
+  return columns === 3 && (0, _styledComponents.css)(["display:grid;justify-content:center;align-items:stretch;grid-template-columns:repeat(3,minmax(0,363px));width:100%;margin:0 auto;max-width:100%;"]);
 });
 var _default = exports.default = CardsContainer;

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

@@ -2,7 +2,6 @@
 
 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"));