@comicrelief/component-library 7.35.3 → 7.35.5

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

@@ -61,11 +61,12 @@ const WYMDCarousel = _ref => {
     className: "CarouselWrapper",
     id: thisID,
     mobileHeight: data.mobileHeight,
+    tabletHeight: data.tabletHeight,
     desktopHeight: data.desktopHeight
   }, /*#__PURE__*/_react.default.createElement(_WYMDCarousel.Heading, {
     tag: "p",
     weight: "bold"
-  }, data.heading), /*#__PURE__*/_react.default.createElement(_WYMDCarousel.PeopleHelpedText, {
+  }, data.headerCopy), /*#__PURE__*/_react.default.createElement(_WYMDCarousel.PeopleHelpedText, {
     tag: "h1",
     family: "Anton",
     uppercase: true,
@@ -109,10 +110,10 @@ const WYMDCarousel = _ref => {
         family: "Anton",
         uppercase: true,
         weight: "normal",
-        size: "super"
+        size: "xl"
       }, theseItems[key].amount)), /*#__PURE__*/_react.default.createElement(_WYMDCarousel.CopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
         tag: "p",
-        size: "l"
+        size: "m"
       }, theseItems[key].copy))))
     );
   }), isMobileOrTablet === false && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slide, {

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

@@ -17,7 +17,7 @@ const textScaleOffsetB = 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 => {
+})(["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 => {
   let {
     theme
   } = _ref;
@@ -34,7 +34,7 @@ const CopyWrapper = exports.CopyWrapper = _styledComponents.default.div.withConf
 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 => {
+})(["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 => {
   let {
     theme
   } = _ref2;
@@ -43,7 +43,7 @@ const Heading = exports.Heading = (0, _styledComponents.default)(_Text.default).
 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 => {
+})(["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 => {
   let {
     theme
   } = _ref3;
@@ -57,7 +57,7 @@ const PeopleHelpedText = exports.PeopleHelpedText = (0, _styledComponents.defaul
 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 => {
+})(["margin-bottom:0;text-align:center;font-size:12px;line-height:14.63px;@media ", "{font-size:17px;line-height:19px;}"], _ref5 => {
   let {
     theme
   } = _ref5;
@@ -68,17 +68,17 @@ 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:", ";.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%;}}.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;&: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 => {
   let {
     theme
   } = _ref6;
   return theme.color('white');
-}, (0, _spacing.default)('l'), _ref7 => {
+}, (0, _spacing.default)('l'), (0, _spacing.default)('l'), _ref7 => {
   let {
     theme
   } = _ref7;
   return theme.breakpoint('medium');
-}, (0, _spacing.default)('lg'), _ref8 => {
+}, (0, _spacing.default)('l'), _ref8 => {
   let {
     theme
   } = _ref8;
@@ -87,5 +87,10 @@ const CarouselWrapper = exports.CarouselWrapper = _styledComponents.default.div.
   let {
     theme
   } = _ref9;
+  return theme.breakpoint('small');
+}, props => props.tabletHeight, _ref10 => {
+  let {
+    theme
+  } = _ref10;
   return theme.breakpoint('medium');
 }, props => props.desktopHeight, animationSpeed, animationSpeed, animationSpeed, animationSpeed, animationSpeed, textScaleOffsetA, textScaleOffsetB, textScaleOffsetA, textScaleOffsetB);

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

@@ -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: 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      background-color: #FFFFFF;\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: 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.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: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  ");
 });

package/dist/styleguide/data/data.js

@@ -43,9 +43,10 @@ const testImpactSliderItems = exports.testImpactSliderItems = [{
 const carouselItemsComplete = exports.carouselItemsComplete = {
   __typename: 'ContentfulWhatYourMoneyDoesCarousel',
   contentful_id: '7zdR84QkZwrTh9NWx2H926',
-  mobileHeight: 500,
-  desktopHeight: 550,
-  heading: 'Over the past two years, we’ve supported',
+  mobileHeight: 450,
+  tabletHeight: 500,
+  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.',
@@ -56,7 +57,7 @@ const carouselItemsComplete = exports.carouselItemsComplete = {
     }
   },
   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_Amount: '750,000',
   node2_Image: {
     file: {
       url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
@@ -136,9 +137,10 @@ const carouselItemsComplete = exports.carouselItemsComplete = {
 const carouselItemsIncomplete = exports.carouselItemsIncomplete = {
   __typename: 'ContentfulWhatYourMoneyDoesCarousel',
   contentful_id: '7zdR84QkZwrTh9NWx2H9262',
-  mobileHeight: 500,
-  desktopHeight: 550,
-  heading: 'Over the past two years, we’ve supported',
+  mobileHeight: 450,
+  tabletHeight: 500,
+  desktopHeight: 475,
+  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.',
@@ -149,7 +151,7 @@ const carouselItemsIncomplete = exports.carouselItemsIncomplete = {
     }
   },
   node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support.',
-  node2_Amount: '2,000',
+  node2_Amount: '750,000',
   node2_Image: {
     file: {
       url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
@@ -216,9 +218,10 @@ const carouselItemsIncomplete = exports.carouselItemsIncomplete = {
 const carouselItemsMinimal = exports.carouselItemsMinimal = {
   __typename: 'ContentfulWhatYourMoneyDoesCarousel',
   contentful_id: '7zdR84QkZwrTh9NWx2H9263',
-  mobileHeight: 500,
-  desktopHeight: 550,
-  heading: 'Over the past two years, we’ve supported',
+  mobileHeight: 450,
+  tabletHeight: 500,
+  desktopHeight: 475,
+  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.',
@@ -229,7 +232,7 @@ const carouselItemsMinimal = exports.carouselItemsMinimal = {
     }
   },
   node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support.',
-  node2_Amount: '2,000',
+  node2_Amount: '750,000',
   node2_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.35.3",
+  "version": "7.35.5",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Organisms/WYMDCarousel/WYMDCarousel.js

@@ -59,11 +59,12 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
       className="CarouselWrapper"
       id={thisID}
       mobileHeight={data.mobileHeight}
+      tabletHeight={data.tabletHeight}
       desktopHeight={data.desktopHeight}
     >
 
       <Heading tag="p" weight="bold">
-        { data.heading}
+        { data.headerCopy}
       </Heading>
 
       <PeopleHelpedText tag="h1" family="Anton" uppercase weight="normal" color="red">
@@ -110,13 +111,13 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
 
                 <div className="all-text-wrapper">
                   <AmountWrapper>
-                    <Text tag="h1" family="Anton" uppercase weight="normal" size="super">
+                    <Text tag="h1" family="Anton" uppercase weight="normal" size="xl">
                       {theseItems[key].amount}
                     </Text>
                   </AmountWrapper>
 
                   <CopyWrapper>
-                    <Text tag="p" size="l">
+                    <Text tag="p" size="m">
                       {theseItems[key].copy}
                     </Text>
                   </CopyWrapper>
@@ -230,10 +231,11 @@ WYMDCarousel.propTypes = {
       })
     }),
     autoPlay: PropTypes.bool.isRequired,
-    heading: PropTypes.string.isRequired,
+    headerCopy: PropTypes.string.isRequired,
     peopleHelpedText: PropTypes.string.isRequired,
     contentful_id: PropTypes.string.isRequired,
     mobileHeight: PropTypes.number,
+    tabletHeight: PropTypes.number,
     desktopHeight: PropTypes.number
   }).isRequired
 };

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

@@ -10,9 +10,9 @@ const textScaleOffsetA = 50;
 const textScaleOffsetB = 5;
 
 const ImageWrapper = styled.div`
-  width: 33%;
+  width: 45%;
   display: block;
-  padding: 7%;
+  padding: 9%;
   border: 2px dashed #89888b;
   border-radius: 50%;
   position: relative;
@@ -27,8 +27,8 @@ const ImageWrapper = styled.div`
     position: absolute;
     content: '';
     top: 50%;
-    width: 200%;
-    right: calc(-200% - 8px);
+    width: 125%;
+    right: calc(-125% - 2px);
     height: 2px;
     border-bottom: 2px dashed #89888b;
   }
@@ -63,12 +63,12 @@ const Heading = styled(Text)`
   &:first-child {
     margin-bottom: ${spacing('l')};
     text-align: center;
-    font-size: 20px;
-    line-height: 23px;
+    font-size: 16px;
+    line-height: 19.5px;
 
     @media ${({ theme }) => theme.breakpoint('medium')} {
-      font-size: 21px;
-      line-height: 23px;
+      font-size: 20px;
+      line-height: 24.38px;
     }
   }
 `;
@@ -76,8 +76,8 @@ const Heading = styled(Text)`
 const PeopleHelpedText = styled(Text)`
   margin-bottom: ${spacing('l')};
   text-align: center;
-  font-size: 40px;
-  line-height: 40px;
+  font-size: 34px;
+  line-height: 37px;
 
   @media ${({ theme }) => theme.breakpoint('small')} {
     font-size: 60px;
@@ -85,16 +85,16 @@ const PeopleHelpedText = styled(Text)`
   }
 
   @media ${({ theme }) => theme.breakpoint('medium')} {
-    font-size: 75px;
-    line-height: 78px;
+    font-size: 64px;
+    line-height: 68px;
   }
 `;
 
 const Including = styled(Text)`
   margin-bottom: 0;
   text-align: center;
-  font-size: 14px;
-  line-height: 17px;
+  font-size: 12px;
+  line-height: 14.63px;
 
   @media ${({ theme }) => theme.breakpoint('small')} {
     font-size: 17px;
@@ -106,6 +106,12 @@ const Including = styled(Text)`
 const CarouselWrapper = styled.div`
   height: 100%;
   background-color: ${({ theme }) => theme.color('white')};
+  max-width: 760px;
+  padding:  ${spacing('l')};
+  margin: 0 auto;
+  
+  border-radius: 20px;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
 
   .carousel {
     position: relative;
@@ -113,7 +119,7 @@ const CarouselWrapper = styled.div`
     padding-top: ${spacing('l')};
 
     @media ${({ theme }) => theme.breakpoint('medium')} {
-      padding-top: ${spacing('lg')};
+      padding-top: ${spacing('l')};
     }
   
     button.carousel__back-button,
@@ -203,6 +209,10 @@ const CarouselWrapper = styled.div`
       .carousel__slide {
         padding-bottom: ${props => props.mobileHeight}px !important;
 
+        @media ${({ theme }) => theme.breakpoint('small')} {
+          padding-bottom: ${props => props.tabletHeight}px !important;
+        }
+
         @media ${({ theme }) => theme.breakpoint('medium')} {
           padding-bottom: ${props => props.desktopHeight}px !important;
 

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

@@ -49,27 +49,32 @@ it("renders correctly", () => {
     .c2:first-child {
       margin-bottom: 2rem;
       text-align: center;
-      font-size: 20px;
-      line-height: 23px;
+      font-size: 16px;
+      line-height: 19.5px;
     }
 
     .c4 {
       margin-bottom: 2rem;
       text-align: center;
-      font-size: 40px;
-      line-height: 40px;
+      font-size: 34px;
+      line-height: 37px;
     }
 
     .c6 {
       margin-bottom: 0;
       text-align: center;
-      font-size: 14px;
-      line-height: 17px;
+      font-size: 12px;
+      line-height: 14.63px;
     }
 
     .c0 {
       height: 100%;
       background-color: #FFFFFF;
+      max-width: 760px;
+      padding: 2rem;
+      margin: 0 auto;
+      border-radius: 20px;
+      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
     }
 
     .c0 .carousel {
@@ -157,7 +162,7 @@ it("renders correctly", () => {
     }
 
     .c0 .carousel .wymd-carousel .carousel__slide {
-      padding-bottom: 500px !important;
+      padding-bottom: 450px !important;
     }
 
     .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {
@@ -181,8 +186,8 @@ it("renders correctly", () => {
 
     @media (min-width:1024px) {
       .c2:first-child {
-        font-size: 21px;
-        line-height: 23px;
+        font-size: 20px;
+        line-height: 24.38px;
       }
     }
 
@@ -195,8 +200,8 @@ it("renders correctly", () => {
 
     @media (min-width:1024px) {
       .c4 {
-        font-size: 75px;
-        line-height: 78px;
+        font-size: 64px;
+        line-height: 68px;
       }
     }
 
@@ -209,7 +214,7 @@ it("renders correctly", () => {
 
     @media (min-width:1024px) {
       .c0 .carousel {
-        padding-top: 3rem;
+        padding-top: 2rem;
       }
     }
 
@@ -225,9 +230,15 @@ it("renders correctly", () => {
       }
     }
 
+    @media (min-width:740px) {
+      .c0 .carousel .wymd-carousel .carousel__slide {
+        padding-bottom: 500px !important;
+      }
+    }
+
     @media (min-width:1024px) {
       .c0 .carousel .wymd-carousel .carousel__slide {
-        padding-bottom: 550px !important;
+        padding-bottom: 475px !important;
       }
 
       .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {

package/src/styleguide/data/data.js

@@ -52,9 +52,10 @@ const testImpactSliderItems = [
 const carouselItemsComplete = {
   __typename: 'ContentfulWhatYourMoneyDoesCarousel',
   contentful_id: '7zdR84QkZwrTh9NWx2H926',
-  mobileHeight: 500,
-  desktopHeight: 550,
-  heading: 'Over the past two years, we’ve supported',
+  mobileHeight: 450,
+  tabletHeight: 500,
+  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.',
@@ -65,7 +66,7 @@ const carouselItemsComplete = {
     }
   },
   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_Amount: '750,000',
   node2_Image: {
     file: {
       url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
@@ -146,9 +147,10 @@ const carouselItemsComplete = {
 const carouselItemsIncomplete = {
   __typename: 'ContentfulWhatYourMoneyDoesCarousel',
   contentful_id: '7zdR84QkZwrTh9NWx2H9262',
-  mobileHeight: 500,
-  desktopHeight: 550,
-  heading: 'Over the past two years, we’ve supported',
+  mobileHeight: 450,
+  tabletHeight: 500,
+  desktopHeight: 475,
+  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.',
@@ -159,7 +161,7 @@ const carouselItemsIncomplete = {
     }
   },
   node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support.',
-  node2_Amount: '2,000',
+  node2_Amount: '750,000',
   node2_Image: {
     file: {
       url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
@@ -227,9 +229,10 @@ const carouselItemsIncomplete = {
 const carouselItemsMinimal = {
   __typename: 'ContentfulWhatYourMoneyDoesCarousel',
   contentful_id: '7zdR84QkZwrTh9NWx2H9263',
-  mobileHeight: 500,
-  desktopHeight: 550,
-  heading: 'Over the past two years, we’ve supported',
+  mobileHeight: 450,
+  tabletHeight: 500,
+  desktopHeight: 475,
+  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.',
@@ -240,7 +243,7 @@ const carouselItemsMinimal = {
     }
   },
   node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support.',
-  node2_Amount: '2,000',
+  node2_Amount: '750,000',
   node2_Image: {
     file: {
       url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'