@comicrelief/component-library 7.34.1 → 7.35.1

package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.js

@@ -0,0 +1,121 @@
+"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;
+var _react = _interopRequireWildcard(require("react"));
+var _pureReactCarousel = require("pure-react-carousel");
+var _utils = _interopRequireDefault(require("./_utils"));
+require("pure-react-carousel/dist/react-carousel.es.css");
+var _WYMDCarousel = require("./WYMDCarousel.style");
+var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
+var _breakpoint = require("../../../theme/shared/breakpoint");
+const WYMDCarousel = _ref => {
+  let {
+    data,
+    data: {
+      autoPlay,
+      contentful_id: thisID
+    }
+  } = _ref;
+  // Defaults to mobile config:
+  const [isMobileOrTablet, setIsMobileOrTablet] = (0, _react.useState)(true);
+  const [visibleSlides, setVisibleSlides] = (0, _react.useState)(1);
+  const [totalSlides, setTotalSlides] = (0, _react.useState)(null);
+  const [theseItems, setTheseItems] = (0, _react.useState)();
+
+  // Custom function to let us update the carousel config dynamically
+  const screenResize = (0, _react.useCallback)(() => {
+    const screenSize = typeof window !== 'undefined' ? window.innerWidth : null;
+    const isCurrentlyMobile = window.innerWidth < _breakpoint.sizes.medium;
+    if (screenSize !== null && isMobileOrTablet !== isCurrentlyMobile) {
+      setIsMobileOrTablet(isCurrentlyMobile);
+      setVisibleSlides(isCurrentlyMobile ? 1 : 3);
+      setTotalSlides(isCurrentlyMobile ? theseItems.length : theseItems.length + 2);
+    }
+  }, [isMobileOrTablet, theseItems]);
+
+  // Format our data BEFORE we use it in render:
+  (0, _react.useEffect)(() => {
+    setTheseItems((0, _utils.default)(data));
+  }, [setTheseItems, data]);
+  (0, _react.useEffect)(() => {
+    if (window !== 'undefined' && window.innerWidth >= _breakpoint.sizes.medium) {
+      // On inital render, update carousel plugin config
+      // to suit the non-mobile layout and functionality:
+      setIsMobileOrTablet(false);
+      setVisibleSlides(3);
+    }
+
+    // Hook into browser's own onresize event to call our custom wrapper function:
+    if (typeof window !== 'undefined') window.onresize = screenResize;
+  }, [screenResize]);
+  if (theseItems && totalSlides === null) {
+    // Reflects our two dummy/bookend slides for non-mobile/tablet views:
+    setTotalSlides(isMobileOrTablet ? theseItems.length : theseItems.length + 2);
+  }
+  return /*#__PURE__*/_react.default.createElement(_WYMDCarousel.CarouselWrapper, {
+    className: "CarouselWrapper",
+    id: thisID,
+    mobileHeight: data.mobileHeight,
+    desktopHeight: data.desktopHeight
+  }, /*#__PURE__*/_react.default.createElement(_WYMDCarousel.Heading, {
+    tag: "p",
+    weight: "bold"
+  }, data.heading), /*#__PURE__*/_react.default.createElement(_WYMDCarousel.PeopleHelpedText, {
+    tag: "h1",
+    family: "Anton",
+    uppercase: true,
+    weight: "normal",
+    color: "red"
+  }, data.peopleHelpedText), /*#__PURE__*/_react.default.createElement(_WYMDCarousel.Including, {
+    tag: "p"
+  }, "including..."), theseItems && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.CarouselProvider, {
+    naturalSlideWidth: 50,
+    naturalSlideHeight: 200,
+    totalSlides: totalSlides,
+    isPlaying: autoPlay,
+    interval: 5000,
+    visibleSlides: visibleSlides,
+    infinite: true
+  }, /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slider, {
+    classNameAnimation: "wymd-carousel"
+  }, isMobileOrTablet === false && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slide, {
+    index: 0,
+    key: 0
+  }), Object.keys(theseItems).map((key, index) => {
+    // Reflect that initial dummy/bookend slide shown on non-mobile/tablet views:
+    const thisOffsetIndex = index + (isMobileOrTablet ? 0 : 1);
+    return (
+      /*#__PURE__*/
+      // Calculate the index offset accordingly to reflect the number of slides,
+      // but use the REAL index when determining if its the last REAL slide
+      _react.default.createElement(_pureReactCarousel.Slide, {
+        index: thisOffsetIndex,
+        className: index === theseItems.length - 1 && 'last-slide',
+        key: thisOffsetIndex
+      }, /*#__PURE__*/_react.default.createElement(_WYMDCarousel.ImageWrapper, {
+        className: "image-wrapper"
+      }, /*#__PURE__*/_react.default.createElement("img", {
+        src: theseItems[key].image.file.url,
+        alt: theseItems[key].copy
+      })), /*#__PURE__*/_react.default.createElement(_WYMDCarousel.AmountWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
+        tag: "h1",
+        family: "Anton",
+        uppercase: true,
+        weight: "normal",
+        size: "super"
+      }, theseItems[key].amount)), /*#__PURE__*/_react.default.createElement(_WYMDCarousel.CopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
+        tag: "p",
+        size: "l"
+      }, theseItems[key].copy)))
+    );
+  }), isMobileOrTablet === false && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slide, {
+    index: theseItems.length + 1,
+    key: "bookend-last"
+  })), /*#__PURE__*/_react.default.createElement(_pureReactCarousel.ButtonBack, null, "Back"), /*#__PURE__*/_react.default.createElement(_pureReactCarousel.ButtonNext, null, "Next")));
+};
+var _default = exports.default = WYMDCarousel;

package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.md

@@ -0,0 +1,40 @@
+# 'What Your Money Does' Carousel
+
+```js
+const { carouselItemsComplete } = require('../../../styleguide/data/data');
+import Text from '../../Atoms/Text/Text';
+
+    <div>
+        <h2 style={{textAlign: 'center'}}>
+            All fields supplied, autoplay on:
+        </h2>
+        <WYMDCarousel data={carouselItemsComplete}/>
+    </div>
+    
+```
+
+```js
+const { carouselItemsIncomplete } = require('../../../styleguide/data/data');
+import Text from '../../Atoms/Text/Text';
+
+    <div>
+        <h2 style={{textAlign: 'center'}}>
+            All REQUIRED fields supplied (nodes 1-4), various incomplete nodes, node 11 complete, autoplay off:
+        </h2>
+        <WYMDCarousel data={carouselItemsIncomplete}/>
+    </div>
+    
+```
+
+```js
+const { carouselItemsMinimal } = require('../../../styleguide/data/data');
+import Text from '../../Atoms/Text/Text';
+
+    <div>
+        <h2 style={{textAlign: 'center'}}>
+            All REQUIRED fields supplied (nodes 1-4), autoplay off:
+        </h2>
+        <WYMDCarousel data={carouselItemsMinimal}/>
+    </div>
+    
+```

package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.style.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PeopleHelpedText = exports.Including = exports.ImageWrapper = exports.Heading = exports.CopyWrapper = exports.CarouselWrapper = exports.AmountWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
+var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
+// Duration in seconds
+const animationSpeed = 0.5;
+const ImageWrapper = exports.ImageWrapper = _styledComponents.default.div.withConfig({
+  displayName: "WYMDCarouselstyle__ImageWrapper",
+  componentId: "sc-115z54p-0"
+})(["width:33%;display:block;padding:7%;border:2px dashed #89888b;border-radius:50%;position:relative;overflow:visible;img{width:100%;height:auto;}&:after{position:absolute;content:'';top:50%;width:200%;right:calc(-200% - 8px);height:2px;border-bottom:2px dashed #89888b;}@media ", "{width:50%;padding:9%;&:after{width:100%;right:calc(-100% - 8px);}}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.breakpoint('medium');
+});
+const AmountWrapper = exports.AmountWrapper = _styledComponents.default.div.withConfig({
+  displayName: "WYMDCarouselstyle__AmountWrapper",
+  componentId: "sc-115z54p-1"
+})(["padding:", " 0;width:75%;margin:0 auto;"], (0, _spacing.default)('m'));
+const CopyWrapper = exports.CopyWrapper = _styledComponents.default.div.withConfig({
+  displayName: "WYMDCarouselstyle__CopyWrapper",
+  componentId: "sc-115z54p-2"
+})(["padding:", " 0;width:75%;margin:0 auto;"], (0, _spacing.default)('sm'));
+const Heading = exports.Heading = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "WYMDCarouselstyle__Heading",
+  componentId: "sc-115z54p-3"
+})(["width:75%;margin:0 auto;&:first-child{margin-bottom:", ";text-align:center;font-size:20px;line-height:23px;@media ", "{font-size:21px;line-height:23px;}}"], (0, _spacing.default)('l'), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.breakpoint('medium');
+});
+const PeopleHelpedText = exports.PeopleHelpedText = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "WYMDCarouselstyle__PeopleHelpedText",
+  componentId: "sc-115z54p-4"
+})(["margin-bottom:", ";text-align:center;font-size:40px;line-height:40px;@media ", "{font-size:60px;line-height:60px;}@media ", "{font-size:75px;line-height:78px;}"], (0, _spacing.default)('l'), _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.breakpoint('small');
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.breakpoint('medium');
+});
+const Including = exports.Including = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "WYMDCarouselstyle__Including",
+  componentId: "sc-115z54p-5"
+})(["margin-bottom:0;text-align:center;font-size:14px;line-height:17px;@media ", "{font-size:17px;line-height:19px;}"], _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.breakpoint('small');
+});
+
+// Unfortunately having to target plugin-created markup ye olde fashioned way:
+const CarouselWrapper = exports.CarouselWrapper = _styledComponents.default.div.withConfig({
+  displayName: "WYMDCarouselstyle__CarouselWrapper",
+  componentId: "sc-115z54p-6"
+})(["height:100%;padding:", ";.carousel{position:relative;margin:0 auto;padding-top:", ";@media ", "{padding-top:", ";}button.carousel__back-button,button.carousel__next-button{position:absolute;left:0;top:0;width:33% !important;height:100%;padding:0 !important;box-shadow:none;text-indent:-9999px;background-color:transparent;border:none;&:before{content:'';position:absolute;width:30px;height:30px;top:50%;left:0;transform:translate(0,-50%) rotate(90deg);}&:after{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;transition:opacity 0.2s linear;background:linear-gradient(90deg,rgba(255,255,255,0.95),rgba(255,255,255,0.5),rgba(255,255,255,0));}&:hover{&:after{opacity:0.5;}}@media ", "{width:33.3% !important;&:after{width:100%;}}}button.carousel__next-button{left:auto;right:0;&:before{transform:translate(0,-50%) rotate(-90deg);}&:after{left:auto;right:0;background:linear-gradient(270deg,rgba(255,255,255,0.95),rgba(255,255,255,0.75),rgba(255,255,255,0));}}.wymd-carousel{transition:-webkit-transform ", "s;-o-transition:transform ", "s;transition:transform ", "s;-webkit-transform:", "s;will-change:transform;.last-slide{.image-wrapper:after{content:none;}}.carousel__slide{padding-bottom:", "px !important;@media ", "{padding-bottom:", "px !important;.carousel__inner-slide{> div:first-child{transition:transform ", "s ease;transform:scale(0.5);&:after{transition:transform ", "s ease,width ", "s ease,right ", "s ease;right:calc(-300% - 6px);transform:scale(1);width:300%;}}}&.carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-250% - 6px);transform:scale(1);width:250%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{transform:scale(1);&:after{right:calc(-187% - 6px);transform:scale(0.5);width:250%;}}}+ .carousel__slide--visible{> div > div:first-child{transform:scale(0.5);&:after{right:calc(-250% - 6px);transform:scale(1);width:250%;}}}}}}.carousel__inner-slide{text-align:center;display:inline-flex;align-items:center;justify-content:flex-start;flex-direction:column;}}}}"], (0, _spacing.default)('m'), (0, _spacing.default)('l'), _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.breakpoint('medium');
+}, (0, _spacing.default)('lg'), _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.breakpoint('medium');
+}, animationSpeed, animationSpeed, animationSpeed, animationSpeed, props => props.mobileHeight, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.breakpoint('medium');
+}, props => props.desktopHeight, animationSpeed, animationSpeed, animationSpeed, animationSpeed);

package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.test.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+require("jest-styled-components");
+var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
+var _WYMDCarousel = _interopRequireDefault(require("./WYMDCarousel"));
+const {
+  carouselItemsComplete
+} = require("../../../styleguide/data/data");
+it("renders correctly", () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_WYMDCarousel.default, {
+    data: carouselItemsComplete
+  })).toJSON();
+  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c3 {\n      color: #E52630;\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: uppercase;\n      font-weight: normal;\n      font-family: 'Anton',Impact,sans-serif;\n      -webkit-letter-spacing: 0.03rem;\n      -moz-letter-spacing: 0.03rem;\n      -ms-letter-spacing: 0.03rem;\n      letter-spacing: 0.03rem;\n    }\n\n    .c5 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c2 {\n      width: 75%;\n      margin: 0 auto;\n    }\n\n    .c2:first-child {\n      margin-bottom: 2rem;\n      text-align: center;\n      font-size: 20px;\n      line-height: 23px;\n    }\n\n    .c4 {\n      margin-bottom: 2rem;\n      text-align: center;\n      font-size: 40px;\n      line-height: 40px;\n    }\n\n    .c6 {\n      margin-bottom: 0;\n      text-align: center;\n      font-size: 14px;\n      line-height: 17px;\n    }\n\n    .c0 {\n      height: 100%;\n      padding: 1.5rem;\n    }\n\n    .c0 .carousel {\n      position: relative;\n      margin: 0 auto;\n      padding-top: 2rem;\n    }\n\n    .c0 .carousel button.carousel__back-button,\n    .c0 .carousel button.carousel__next-button {\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 33% !important;\n      height: 100%;\n      padding: 0 !important;\n      box-shadow: none;\n      text-indent: -9999px;\n      background-color: transparent;\n      border: none;\n    }\n\n    .c0 .carousel button.carousel__back-button:before,\n    .c0 .carousel button.carousel__next-button:before {\n      content: '';\n      position: absolute;\n      width: 30px;\n      height: 30px;\n      top: 50%;\n      left: 0;\n      -webkit-transform: translate(0,-50%) rotate(90deg);\n      -ms-transform: translate(0,-50%) rotate(90deg);\n      transform: translate(0,-50%) rotate(90deg);\n    }\n\n    .c0 .carousel button.carousel__back-button:after,\n    .c0 .carousel button.carousel__next-button:after {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 50%;\n      height: 100%;\n      -webkit-transition: opacity 0.2s linear;\n      transition: opacity 0.2s linear;\n      background: linear-gradient(90deg,rgba(255,255,255,0.95),rgba(255,255,255,0.5),rgba(255,255,255,0));\n    }\n\n    .c0 .carousel button.carousel__back-button:hover:after,\n    .c0 .carousel button.carousel__next-button:hover:after {\n      opacity: 0.5;\n    }\n\n    .c0 .carousel button.carousel__next-button {\n      left: auto;\n      right: 0;\n    }\n\n    .c0 .carousel button.carousel__next-button:before {\n      -webkit-transform: translate(0,-50%) rotate(-90deg);\n      -ms-transform: translate(0,-50%) rotate(-90deg);\n      transform: translate(0,-50%) rotate(-90deg);\n    }\n\n    .c0 .carousel button.carousel__next-button:after {\n      left: auto;\n      right: 0;\n      background: linear-gradient(270deg,rgba(255,255,255,0.95),rgba(255,255,255,0.75),rgba(255,255,255,0));\n    }\n\n    .c0 .carousel .wymd-carousel {\n      -webkit-transition: -webkit-transform 0.5s;\n      -webkit-transition: -webkit-transform 0.5s;\n      transition: -webkit-transform 0.5s;\n      -o-transition: transform 0.5s;\n      -webkit-transition: -webkit-transform 0.5s;\n      -webkit-transition: transform 0.5s;\n      transition: transform 0.5s;\n      -webkit-transform: 0.5s;\n      will-change: transform;\n    }\n\n    .c0 .carousel .wymd-carousel .last-slide .image-wrapper:after {\n      content: none;\n    }\n\n    .c0 .carousel .wymd-carousel .carousel__slide {\n      padding-bottom: 500px !important;\n    }\n\n    .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {\n      text-align: center;\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      -webkit-box-pack: start;\n      -webkit-justify-content: flex-start;\n      -ms-flex-pack: start;\n      justify-content: flex-start;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n    }\n\n    @media (min-width:1024px) {\n      .c2:first-child {\n        font-size: 21px;\n        line-height: 23px;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c4 {\n        font-size: 60px;\n        line-height: 60px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c4 {\n        font-size: 75px;\n        line-height: 78px;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c6 {\n        font-size: 17px;\n        line-height: 19px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 .carousel {\n        padding-top: 3rem;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 .carousel button.carousel__back-button,\n      .c0 .carousel button.carousel__next-button {\n        width: 33.3% !important;\n      }\n\n      .c0 .carousel button.carousel__back-button:after,\n      .c0 .carousel button.carousel__next-button:after {\n        width: 100%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 .carousel .wymd-carousel .carousel__slide {\n        padding-bottom: 550px !important;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {\n        -webkit-transition: -webkit-transform 0.5s ease;\n        -webkit-transition: transform 0.5s ease;\n        transition: transform 0.5s ease;\n        -webkit-transform: scale(0.5);\n        -ms-transform: scale(0.5);\n        transform: scale(0.5);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child:after {\n        -webkit-transition: -webkit-transform 0.5s ease,width 0.5s ease,right 0.5s ease;\n        -webkit-transition: transform 0.5s ease,width 0.5s ease,right 0.5s ease;\n        transition: transform 0.5s ease,width 0.5s ease,right 0.5s ease;\n        right: calc(-300% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n        width: 300%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-250% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n        width: 250%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child {\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-187% - 6px);\n        -webkit-transform: scale(0.5);\n        -ms-transform: scale(0.5);\n        transform: scale(0.5);\n        width: 250%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {\n        -webkit-transform: scale(0.5);\n        -ms-transform: scale(0.5);\n        transform: scale(0.5);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {\n        right: calc(-250% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n        width: 250%;\n      }\n    }\n\n    <div\n      className=\"c0 CarouselWrapper\"\n      id=\"7zdR84QkZwrTh9NWx2H926\"\n    >\n      <p\n        className=\"c1 c2\"\n        color=\"inherit\"\n        size=\"s\"\n      >\n        Over the past two years, we\u2019ve supported\n      </p>\n      <h1\n        className=\"c3 c4\"\n        color=\"red\"\n        size=\"s\"\n      >\n        11.7 million people\n      </h1>\n      <p\n        className=\"c5 c6\"\n        color=\"inherit\"\n        size=\"s\"\n      >\n        including...\n      </p>\n    </div>\n  ");
+});

package/dist/components/Organisms/WYMDCarousel/_utils.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const formatItems = thisData => {
+  // Somewhere to store our formatted items:
+  const allValidNodes = [];
+
+  // Set at a Content Type field level, so doesn't need to be dynamic:
+  const possibleNumberOfNodes = 12;
+
+  // Grab ALL keys from our raw data:
+  const theseKeys = Object.keys(thisData);
+
+  // Iterate over all of the data, using a dynamic key prefix to filter
+  // what we need in order to create each object for our allValidNodes array:
+  for (let i = 1; i <= possibleNumberOfNodes; i += 1) {
+    // Create a dynamic key prefix based on the counter, obviously matching
+    // the naming convention set at the Content Type level in the CMS
+    const thisKeyPrefix = "node".concat(i, "_");
+
+    // Make an array of objects, each object representing a specific node and its fields:
+    const thisNodeContent = theseKeys.filter(key => key.includes(thisKeyPrefix)).reduce((thisObj, thisKey) => {
+      const thisFilteredObj = thisObj;
+      // Only assign if we have actually have a value; only the fields for nodes 1-4 are required:
+      if (thisData[thisKey]) {
+        // Use a repeatable, generic key so rendering is a LOT easier:
+        const simplifedKey = thisKey.split('_').pop().toLowerCase();
+        thisFilteredObj[simplifedKey] = thisData[thisKey];
+      }
+      return thisFilteredObj;
+    }, {});
+
+    // Add our new object to the allValidNodes array, but only if we've got all 3 necessary fields:
+    if (Object.keys(thisNodeContent).length === 3) {
+      allValidNodes.push(thisNodeContent);
+    }
+  }
+  return allValidNodes;
+};
+var _default = exports.default = formatItems;

package/dist/index.js

@@ -322,6 +322,12 @@ Object.defineProperty(exports, "VideoBanner", {
     return _VideoBanner.default;
   }
 });
+Object.defineProperty(exports, "WYMDCarousel", {
+  enumerable: true,
+  get: function () {
+    return _WYMDCarousel.default;
+  }
+});
 Object.defineProperty(exports, "allowListed", {
   enumerable: true,
   get: function () {
@@ -459,4 +465,5 @@ var _EmailSignUp = require("./components/Organisms/EmailSignUp/_EmailSignUp");
 var _CookieBanner = _interopRequireDefault(require("./components/Organisms/CookieBanner/CookieBanner"));
 var _Membership = _interopRequireDefault(require("./components/Organisms/Membership/Membership"));
 var _MarketingPreferencesDS = require("./components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS");
-var _ImpactSlider = _interopRequireDefault(require("./components/Organisms/ImpactSlider/ImpactSlider"));
+var _ImpactSlider = _interopRequireDefault(require("./components/Organisms/ImpactSlider/ImpactSlider"));
+var _WYMDCarousel = _interopRequireDefault(require("./components/Organisms/WYMDCarousel/WYMDCarousel"));

package/dist/styleguide/data/data.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.testImpactSliderItems = exports.mobileImages = exports.defaultData = void 0;
+exports.testImpactSliderItems = exports.mobileImages = exports.defaultData = exports.carouselItemsMinimal = exports.carouselItemsIncomplete = exports.carouselItemsComplete = void 0;
 const defaultData = exports.defaultData = {
   title: 'What your money does',
   text: 'When you donate to Comic Relief or Sport Relief, you’re supporting vulnerable people and communities in the UK and internationally.',
@@ -39,4 +39,214 @@ const testImpactSliderItems = exports.testImpactSliderItems = [{
   poundsPerItem: 20,
   description: 'School in a bag kit',
   imageURL: 'https://images.ctfassets.net/zsfivwzfgl3t/PPIJtSArW4wYy1CXvRGk9/c9de72766db42a0e158889a140c90445/ImpactSliderMoneybuy4.png'
-}];
+}];
+const carouselItemsComplete = exports.carouselItemsComplete = {
+  __typename: 'ContentfulWhatYourMoneyDoesCarousel',
+  contentful_id: '7zdR84QkZwrTh9NWx2H926',
+  mobileHeight: 500,
+  desktopHeight: 550,
+  heading: 'Over the past two years, we’ve supported',
+  peopleHelpedText: '11.7 million people',
+  autoPlay: true,
+  node1_Copy: 'NODE1: people in the UK experiencing poverty to access advice and support.',
+  node1_Amount: '1,000',
+  node1_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support. This node has a load of copy to make things extra difficult',
+  node2_Amount: '2,000',
+  node2_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node3_Copy: 'NODE3: people in the UK experiencing poverty to access advice and support.',
+  node3_Amount: '3,000',
+  node3_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node4_Copy: 'NODE4: people in the UK experiencing poverty to access advice and support.',
+  node4_Amount: '4,000',
+  node4_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node5_Copy: 'NODE5: people in the UK experiencing poverty to access advice and support.',
+  node5_Amount: '5,000',
+  node5_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node6_Copy: 'NODE6: people in the UK experiencing poverty to access advice and support.',
+  node6_Amount: '6,000',
+  node6_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node7_Copy: 'NODE7: people in the UK experiencing poverty to access advice and support.',
+  node7_Amount: '7,000',
+  node7_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node8_Copy: 'NODE8: people in the UK experiencing poverty to access advice and support.',
+  node8_Amount: '8,000',
+  node8_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node9_Copy: 'NODE9: people in the UK experiencing poverty to access advice and support.',
+  node9_Amount: '9,000',
+  node9_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node10_Copy: 'NODE10: people in the UK experiencing poverty to access advice and support.',
+  node10_Amount: '10,000',
+  node10_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node11_Copy: 'NODE11: people in the UK experiencing poverty to access advice and support.',
+  node11_Amount: '11,000',
+  node11_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node12_Copy: 'NODE12: people in the UK experiencing poverty to access advice and support.750,000',
+  node12_Amount: '12,000',
+  node12_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  }
+};
+const carouselItemsIncomplete = exports.carouselItemsIncomplete = {
+  __typename: 'ContentfulWhatYourMoneyDoesCarousel',
+  contentful_id: '7zdR84QkZwrTh9NWx2H9262',
+  mobileHeight: 500,
+  desktopHeight: 550,
+  heading: 'Over the past two years, we’ve supported',
+  peopleHelpedText: '11.7 million people',
+  autoPlay: false,
+  node1_Copy: 'NODE1: people in the UK experiencing poverty to access advice and support.',
+  node1_Amount: '1,000',
+  node1_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support.',
+  node2_Amount: '2,000',
+  node2_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node3_Copy: 'NODE3: people in the UK experiencing poverty to access advice and support.',
+  node3_Amount: '3,000',
+  node3_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node4_Copy: 'NODE4: people in the UK experiencing poverty to access advice and support.',
+  node4_Amount: '4,000',
+  node4_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node5_Copy: 'NODE5: people in the UK experiencing poverty to access advice and support.',
+  node5_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node6_Copy: 'NODE6: people in the UK experiencing poverty to access advice and support.',
+  node6_Amount: '6,000',
+  node6_Image: null,
+  node7_Copy: null,
+  node7_Amount: null,
+  node7_Image: null,
+  node8_Copy: null,
+  node8_Amount: null,
+  node8_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node9_Copy: 'NODE9: people in the UK experiencing poverty to access advice and support.',
+  node9_Amount: null,
+  node9_Image: null,
+  node10_Copy: null,
+  node10_Amount: '10,000',
+  node10_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node11_Copy: 'NODE11: people in the UK experiencing poverty to access advice and support.',
+  node11_Amount: '11,000',
+  node11_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node12_Copy: 'people in the UK experiencing poverty to access advice and support.750,000',
+  node12_Amount: null,
+  node12_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  }
+};
+const carouselItemsMinimal = exports.carouselItemsMinimal = {
+  __typename: 'ContentfulWhatYourMoneyDoesCarousel',
+  contentful_id: '7zdR84QkZwrTh9NWx2H9263',
+  mobileHeight: 500,
+  desktopHeight: 550,
+  heading: 'Over the past two years, we’ve supported',
+  peopleHelpedText: '11.7 million people',
+  autoPlay: false,
+  node1_Copy: 'NODE1: people in the UK experiencing poverty to access advice and support.',
+  node1_Amount: '1,000',
+  node1_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support.',
+  node2_Amount: '2,000',
+  node2_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node3_Copy: 'NODE3: people in the UK experiencing poverty to access advice and support.',
+  node3_Amount: '3,000',
+  node3_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node4_Copy: 'NODE4: people in the UK experiencing poverty to access advice and support.',
+  node4_Amount: '4,000',
+  node4_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  }
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.34.1",
+  "version": "7.35.1",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
@@ -32,6 +32,7 @@
     "lodash": "^4.17.11",
     "moment": "^2.29.4",
     "prop-types": "^15.8.1",
+    "pure-react-carousel": "1.30.1",
     "react": "^17.0.2",
     "react-canvas-confetti": "^1.4.0",
     "react-currency-format": "^1.1.0",