npm - @comicrelief/component-library - Versions diffs - 7.35.5 → 7.35.7 - Mend

@comicrelief/component-library 7.35.5 → 7.35.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

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

@@ -22,7 +22,7 @@ const WYMDCarousel = _ref => {
     }
   } = _ref;
   // Defaults to mobile config:
-  const [isMobileOrTablet, setIsMobileOrTablet] = (0, _react.useState)(true);
+  const [isMobile, setIsMobile] = (0, _react.useState)(true);
   const [visibleSlides, setVisibleSlides] = (0, _react.useState)(1);
   const [totalSlides, setTotalSlides] = (0, _react.useState)(null);
   const [theseItems, setTheseItems] = (0, _react.useState)();
@@ -30,23 +30,23 @@ const WYMDCarousel = _ref => {
   // 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);
+    const isCurrentlyMobile = window.innerWidth < _breakpoint.sizes.small;
+    if (screenSize !== null && isMobile !== isCurrentlyMobile) {
+      setIsMobile(isCurrentlyMobile);
       setVisibleSlides(isCurrentlyMobile ? 1 : 3);
       setTotalSlides(isCurrentlyMobile ? theseItems.length : theseItems.length + 2);
     }
-  }, [isMobileOrTablet, theseItems]);
+  }, [isMobile, 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) {
+    if (window !== 'undefined' && window.innerWidth >= _breakpoint.sizes.small) {
       // On inital render, update carousel plugin config
       // to suit the non-mobile layout and functionality:
-      setIsMobileOrTablet(false);
+      setIsMobile(false);
       setVisibleSlides(3);
     }
@@ -55,7 +55,7 @@ const WYMDCarousel = _ref => {
   }, [screenResize]);
   if (theseItems && totalSlides === null) {
     // Reflects our two dummy/bookend slides for non-mobile/tablet views:
-    setTotalSlides(isMobileOrTablet ? theseItems.length : theseItems.length + 2);
+    setTotalSlides(isMobile ? theseItems.length : theseItems.length + 2);
   }
   return /*#__PURE__*/_react.default.createElement(_WYMDCarousel.CarouselWrapper, {
     className: "CarouselWrapper",
@@ -84,12 +84,12 @@ const WYMDCarousel = _ref => {
     infinite: true
   }, /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slider, {
     classNameAnimation: "wymd-carousel"
-  }, isMobileOrTablet === false && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slide, {
+  }, isMobile === 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);
+    const thisOffsetIndex = index + (isMobile ? 0 : 1);
     return (
       /*#__PURE__*/
       // Calculate the index offset accordingly to reflect the number of slides,
@@ -109,14 +109,12 @@ const WYMDCarousel = _ref => {
         tag: "h1",
         family: "Anton",
         uppercase: true,
-        weight: "normal",
-        size: "xl"
+        weight: "normal"
       }, theseItems[key].amount)), /*#__PURE__*/_react.default.createElement(_WYMDCarousel.CopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
-        tag: "p",
-        size: "m"
+        tag: "p"
       }, theseItems[key].copy))))
     );
-  }), isMobileOrTablet === false && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slide, {
+  }), isMobile === 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")));

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

@@ -12,12 +12,12 @@ var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 const animationSpeed = 0.75;
 // Use to calc positions when scaling copy
-const textScaleOffsetA = 50;
+const textScaleOffsetA = 45;
 const textScaleOffsetB = 5;
 const ImageWrapper = exports.ImageWrapper = _styledComponents.default.div.withConfig({
   displayName: "WYMDCarouselstyle__ImageWrapper",
   componentId: "sc-115z54p-0"
-})(["width:45%;display:block;padding:9%;border:2px dashed #89888b;border-radius:50%;position:relative;overflow:visible;img{width:100%;height:auto;}&:after{position:absolute;content:'';top:50%;width:125%;right:calc(-125% - 2px);height:2px;border-bottom:2px dashed #89888b;}@media ", "{width:50%;padding:9%;&:after{width:100%;right:calc(-100% - 8px);}}"], _ref => {
+})(["width:45%;display:block;padding:9%;border:2px dashed #89888b;border-radius:50%;position:relative;overflow:visible;img{width:100%;height:auto;display:block;}&:after{position:absolute;content:'';top:50%;width:125%;right:calc(-125% - 2px);height:2px;border-bottom:2px dashed #89888b;}@media ", "{width:50%;padding:9%;&:after{width:100%;right:calc(-100% - 8px);}}"], _ref => {
   let {
     theme
   } = _ref;
@@ -26,41 +26,56 @@ const ImageWrapper = exports.ImageWrapper = _styledComponents.default.div.withCo
 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'));
+})(["padding:", " 0 0.75rem;h1{font-size:34px;line-height:37px;@media ", "{font-size:40px;line-height:40px;}}"], (0, _spacing.default)('m'), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.breakpoint('small');
+});
 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'));
+})(["padding:0;width:75%;margin:0 auto;p{font-size:", ";line-height:", ";}"], _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.fontSize('s');
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.fontSize('l');
+});
 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:16px;line-height:19.5px;@media ", "{font-size:20px;line-height:24.38px;}}"], (0, _spacing.default)('l'), _ref2 => {
+})(["width:75%;margin:0 auto;&:first-child{margin-bottom:", ";text-align:center;font-size:16px;line-height:19.5px;@media ", "{font-size:20px;line-height:24.38px;}}"], (0, _spacing.default)('l'), _ref5 => {
   let {
     theme
-  } = _ref2;
+  } = _ref5;
   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:34px;line-height:37px;@media ", "{font-size:60px;line-height:60px;}@media ", "{font-size:64px;line-height:68px;}"], (0, _spacing.default)('l'), _ref3 => {
+})(["margin-bottom:", ";text-align:center;font-size:34px;line-height:37px;@media ", "{font-size:60px;line-height:60px;}@media ", "{font-size:64px;line-height:68px;}"], (0, _spacing.default)('l'), _ref6 => {
   let {
     theme
-  } = _ref3;
+  } = _ref6;
   return theme.breakpoint('small');
-}, _ref4 => {
+}, _ref7 => {
   let {
     theme
-  } = _ref4;
+  } = _ref7;
   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:12px;line-height:14.63px;@media ", "{font-size:17px;line-height:19px;}"], _ref5 => {
+})(["margin-bottom:0;text-align:center;font-size:12px;line-height:14.63px;@media ", "{font-size:17px;line-height:19px;}"], _ref8 => {
   let {
     theme
-  } = _ref5;
+  } = _ref8;
   return theme.breakpoint('small');
 });
@@ -68,29 +83,39 @@ const Including = exports.Including = (0, _styledComponents.default)(_Text.defau
 const CarouselWrapper = exports.CarouselWrapper = _styledComponents.default.div.withConfig({
   displayName: "WYMDCarouselstyle__CarouselWrapper",
   componentId: "sc-115z54p-6"
-})(["height:100%;background-color:", ";max-width:760px;padding:", ";margin:0 auto;border-radius:20px;box-shadow:0px 0px 20px rgba(0,0,0,0.15);.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;}@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%;}}.all-text-wrapper{transition:transform ", "s ease;transform-origin:top;transform:translateY(calc(-", "px + ", "%)) scale(0.5)}}&.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%;}}}.all-text-wrapper{transform:translateY(0) scale(1);}+ .carousel__slide--visible{> div > div:first-child{transform:scale(0.5);&:after{right:calc(-250% - 6px);transform:scale(1);width:250%;}}.all-text-wrapper{transform:translateY(calc(-", "px + ", "%)) scale(0.5)}}}}}.carousel__inner-slide{text-align:center;display:inline-flex;align-items:center;justify-content:flex-start;flex-direction:column;}}}}"], _ref6 => {
+})(["height:100%;background-color:", ";max-width:760px;padding:", ";margin:0 auto;border-radius:20px;box-shadow:0px 0px 20px rgba(0,0,0,0.15);.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;&: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,1),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,1),rgba(255,255,255,0.5),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;}@media ", "{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%;}}.all-text-wrapper{transition:transform ", "s ease;transform-origin:top;transform:translateY(calc(-", "px + ", "%)) scale(0.5)}}&.carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-300% - 6px);transform:scale(1);width:300%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{transform:scale(1);&:after{right:calc(-222% - 6px);transform:scale(0.5);width:300%;}}}.all-text-wrapper{transform:translateY(0) scale(1);}+ .carousel__slide--visible{> div > div:first-child{transform:scale(0.5);&:after{right:calc(-300% - 6px);transform:scale(1);width:300%;}}.all-text-wrapper{transform:translateY(calc(-", "px + ", "%)) scale(0.5)}}}}}@media ", "{&.carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-250% - 6px);width:250%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-187% - 6px);width:250%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-250% - 6px);width:250%;}}}}}}}.carousel__inner-slide{text-align:center;display:inline-flex;align-items:center;justify-content:flex-start;flex-direction:column;}}}}"], _ref9 => {
   let {
     theme
-  } = _ref6;
+  } = _ref9;
   return theme.color('white');
-}, (0, _spacing.default)('l'), (0, _spacing.default)('l'), _ref7 => {
+}, (0, _spacing.default)('l'), (0, _spacing.default)('l'), _ref10 => {
   let {
     theme
-  } = _ref7;
+  } = _ref10;
   return theme.breakpoint('medium');
-}, (0, _spacing.default)('l'), _ref8 => {
+}, (0, _spacing.default)('l'), _ref11 => {
   let {
     theme
-  } = _ref8;
+  } = _ref11;
+  return theme.breakpoint('small');
+}, animationSpeed, animationSpeed, animationSpeed, animationSpeed, props => props.mobileHeight, _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.breakpoint('small');
+}, props => props.tabletHeight, _ref13 => {
+  let {
+    theme
+  } = _ref13;
   return theme.breakpoint('medium');
-}, animationSpeed, animationSpeed, animationSpeed, animationSpeed, props => props.mobileHeight, _ref9 => {
+}, props => props.tabletHeight, _ref14 => {
   let {
     theme
-  } = _ref9;
+  } = _ref14;
   return theme.breakpoint('small');
-}, props => props.tabletHeight, _ref10 => {
+}, props => props.desktopHeight, animationSpeed, animationSpeed, animationSpeed, animationSpeed, animationSpeed, textScaleOffsetA, textScaleOffsetB, textScaleOffsetA, textScaleOffsetB, _ref15 => {
   let {
     theme
-  } = _ref10;
+  } = _ref15;
   return theme.breakpoint('medium');
-}, props => props.desktopHeight, animationSpeed, animationSpeed, animationSpeed, animationSpeed, animationSpeed, textScaleOffsetA, textScaleOffsetB, textScaleOffsetA, textScaleOffsetB);
+});

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

@@ -12,5 +12,5 @@ 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: 16px;\n      line-height: 19.5px;\n    }\n\n    .c4 {\n      margin-bottom: 2rem;\n      text-align: center;\n      font-size: 34px;\n      line-height: 37px;\n    }\n\n    .c6 {\n      margin-bottom: 0;\n      text-align: center;\n      font-size: 12px;\n      line-height: 14.63px;\n    }\n\n    .c0 {\n      height: 100%;\n      background-color: #FFFFFF;\n      max-width: 760px;\n      padding: 2rem;\n      margin: 0 auto;\n      border-radius: 20px;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\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.75s;\n      -webkit-transition: -webkit-transform 0.75s;\n      transition: -webkit-transform 0.75s;\n      -o-transition: transform 0.75s;\n      -webkit-transition: -webkit-transform 0.75s;\n      -webkit-transition: transform 0.75s;\n      transition: transform 0.75s;\n      -webkit-transform: 0.75s;\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: 450px !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: 20px;\n        line-height: 24.38px;\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: 64px;\n        line-height: 68px;\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: 2rem;\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:740px) {\n      .c0 .carousel .wymd-carousel .carousel__slide {\n        padding-bottom: 500px !important;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 .carousel .wymd-carousel .carousel__slide {\n        padding-bottom: 475px !important;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {\n        -webkit-transition: -webkit-transform 0.75s ease;\n        -webkit-transition: transform 0.75s ease;\n        transition: transform 0.75s 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.75s ease,width 0.75s ease,right 0.75s ease;\n        -webkit-transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n        transition: transform 0.75s ease,width 0.75s ease,right 0.75s 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__inner-slide .all-text-wrapper {\n        -webkit-transition: -webkit-transform 0.75s ease;\n        -webkit-transition: transform 0.75s ease;\n        transition: transform 0.75s ease;\n        -webkit-transform-origin: top;\n        -ms-transform-origin: top;\n        transform-origin: top;\n        -webkit-transform: translateY(calc(-50px + 5%)) scale(0.5);\n        -ms-transform: translateY(calc(-50px + 5%)) scale(0.5);\n        transform: translateY(calc(-50px + 5%)) scale(0.5);\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 .all-text-wrapper {\n        -webkit-transform: translateY(0) scale(1);\n        -ms-transform: translateY(0) scale(1);\n        transform: translateY(0) scale(1);\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      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {\n        -webkit-transform: translateY(calc(-50px + 5%)) scale(0.5);\n        -ms-transform: translateY(calc(-50px + 5%)) scale(0.5);\n        transform: translateY(calc(-50px + 5%)) scale(0.5);\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  ");
+  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: 16px;\n      line-height: 19.5px;\n    }\n\n    .c4 {\n      margin-bottom: 2rem;\n      text-align: center;\n      font-size: 34px;\n      line-height: 37px;\n    }\n\n    .c6 {\n      margin-bottom: 0;\n      text-align: center;\n      font-size: 12px;\n      line-height: 14.63px;\n    }\n\n    .c0 {\n      height: 100%;\n      background-color: #FFFFFF;\n      max-width: 760px;\n      padding: 2rem;\n      margin: 0 auto;\n      border-radius: 20px;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\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: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,1),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,1),rgba(255,255,255,0.5),rgba(255,255,255,0));\n    }\n\n    .c0 .carousel .wymd-carousel {\n      -webkit-transition: -webkit-transform 0.75s;\n      -webkit-transition: -webkit-transform 0.75s;\n      transition: -webkit-transform 0.75s;\n      -o-transition: transform 0.75s;\n      -webkit-transition: -webkit-transform 0.75s;\n      -webkit-transition: transform 0.75s;\n      transition: transform 0.75s;\n      -webkit-transform: 0.75s;\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: 450px !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: 20px;\n        line-height: 24.38px;\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: 64px;\n        line-height: 68px;\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: 2rem;\n      }\n    }\n\n    @media (min-width:740px) {\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:740px) {\n      .c0 .carousel .wymd-carousel .carousel__slide {\n        padding-bottom: 500px !important;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 .carousel .wymd-carousel .carousel__slide {\n        padding-bottom: 500px !important;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c0 .carousel .wymd-carousel .carousel__slide {\n        padding-bottom: 475px !important;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {\n        -webkit-transition: -webkit-transform 0.75s ease;\n        -webkit-transition: transform 0.75s ease;\n        transition: transform 0.75s 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.75s ease,width 0.75s ease,right 0.75s ease;\n        -webkit-transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n        transition: transform 0.75s ease,width 0.75s ease,right 0.75s 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__inner-slide .all-text-wrapper {\n        -webkit-transition: -webkit-transform 0.75s ease;\n        -webkit-transition: transform 0.75s ease;\n        transition: transform 0.75s ease;\n        -webkit-transform-origin: top;\n        -ms-transform-origin: top;\n        transform-origin: top;\n        -webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        -ms-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        transform: translateY(calc(-45px + 5%)) scale(0.5);\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\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__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(-222% - 6px);\n        -webkit-transform: scale(0.5);\n        -ms-transform: scale(0.5);\n        transform: scale(0.5);\n        width: 300%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {\n        -webkit-transform: translateY(0) scale(1);\n        -ms-transform: translateY(0) scale(1);\n        transform: translateY(0) scale(1);\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(-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__slide--visible + .carousel__slide--visible .all-text-wrapper {\n        -webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        -ms-transform: translateY(calc(-45px + 5%)) scale(0.5);\n        transform: translateY(calc(-45px + 5%)) scale(0.5);\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-250% - 6px);\n        width: 250%;\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        width: 250%;\n      }\n\n      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-250% - 6px);\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 CHANGED Viewed

@@ -19,7 +19,7 @@ const formatItems = thisData => {
   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, "_");
+    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) => {
@@ -27,7 +27,7 @@ const formatItems = thisData => {
       // 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();
+        const simplifedKey = thisKey.split(/([0-9])/).pop().toLowerCase();
         thisFilteredObj[simplifedKey] = thisData[thisKey];
       }
       return thisFilteredObj;

package/dist/styleguide/data/data.js CHANGED Viewed

@@ -48,87 +48,87 @@ const carouselItemsComplete = exports.carouselItemsComplete = {
   desktopHeight: 475,
   headerCopy: '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: {
+  autoPlay: false,
+  node1Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node1Amount: '1,000',
+  node1Image: {
     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: '750,000',
-  node2_Image: {
+  node2Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node2Amount: '750,000',
+  node2Image: {
     file: {
-      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+      url: 'https://images.ctfassets.net/zsfivwzfgl3t/5uKnps3prnG6GpTM1EPZdC/8d7264465846de31e3bbb5b6b2c36c8f/014-helping_hand.png'
     }
   },
-  node3_Copy: 'NODE3: people in the UK experiencing poverty to access advice and support.',
-  node3_Amount: '3,000',
-  node3_Image: {
+  node3Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node3Amount: '3,000',
+  node3Image: {
     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: {
+  node4Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node4Amount: '4,000',
+  node4Image: {
     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: {
+  node5Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node5Amount: '5,000',
+  node5Image: {
     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: {
+  node6Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node6Amount: '6,000',
+  node6Image: {
     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: {
+  node7Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node7Amount: '7,000',
+  node7Image: {
     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: {
+  node8Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node8Amount: '8,000',
+  node8Image: {
     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: {
+  node9Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node9Amount: '9,000',
+  node9Image: {
     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: {
+  node10Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node10Amount: '10,000',
+  node10Image: {
     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: {
+  node11Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node11Amount: '11,000',
+  node11Image: {
     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: {
+  node12Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.750,000',
+  node12Amount: '12,000',
+  node12Image: {
     file: {
       url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
     }
@@ -143,73 +143,73 @@ const carouselItemsIncomplete = exports.carouselItemsIncomplete = {
   headerCopy: '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: {
+  node1Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node1Amount: '1,000',
+  node1Image: {
     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: '750,000',
-  node2_Image: {
+  node2Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node2Amount: '750,000',
+  node2Image: {
     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: {
+  node3Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node3Amount: '3,000',
+  node3Image: {
     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: {
+  node4Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node4Amount: '4,000',
+  node4Image: {
     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: {
+  node5Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node5Image: {
     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: {
+  node6Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node6Amount: '6,000',
+  node6Image: null,
+  node7Copy: null,
+  node7Amount: null,
+  node7Image: null,
+  node8Copy: null,
+  node8Amount: null,
+  node8Image: {
     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: {
+  node9Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node9Amount: null,
+  node9Image: null,
+  node10Copy: null,
+  node10Amount: '10,000',
+  node10Image: {
     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: {
+  node11Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node11Amount: '11,000',
+  node11Image: {
     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: {
+  node12Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.750,000',
+  node12Amount: null,
+  node12Image: {
     file: {
       url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
     }
@@ -224,30 +224,30 @@ const carouselItemsMinimal = exports.carouselItemsMinimal = {
   headerCopy: '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: {
+  node1Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node1Amount: '1,000',
+  node1Image: {
     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: '750,000',
-  node2_Image: {
+  node2Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node2Amount: '750,000',
+  node2Image: {
     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: {
+  node3Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node3Amount: '3,000',
+  node3Image: {
     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: {
+  node4Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
+  node4Amount: '4,000',
+  node4Image: {
     file: {
       url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
     }

package/package.json CHANGED Viewed

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