@comicrelief/component-library 8.26.0 → 8.28.0

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

@@ -12,5 +12,212 @@ it("renders correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_RichtextCarousel.default, {
     data: RichtextCarouselItems
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      text-align: center;\n    }\n\n    .c0 {\n      height: 100%;\n      background: #FFFFFF;\n      max-width: 760px;\n      padding: 2.5rem 2rem 3.5rem;\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,#FFFFFF,#FFFFFF7a,#FFFFFF00);\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(90deg,#FFFFFF00,#FFFFFF7a,#FFFFFF);\n    }\n\n    .c0 .carousel .richtext-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 .richtext-carousel .last-slide .slide-copy-wrapper:after {\n      content: none;\n    }\n\n    .c0 .carousel .richtext-carousel .carousel__slide {\n      padding-bottom: 300px !important;\n    }\n\n    .c0 .carousel .richtext-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: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 .richtext-carousel .carousel__slide {\n        padding-bottom: 350px !important;\n      }\n\n      .c0 .carousel .richtext-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-origin: center;\n        -ms-transform-origin: center;\n        transform-origin: center;\n        -webkit-transform: scale(0.8);\n        -ms-transform: scale(0.8);\n        transform: scale(0.8);\n      }\n\n      .c0 .carousel .richtext-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        width: 100%;\n        right: calc(-100% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n      }\n\n      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        width: 33%;\n        right: calc(-33% - 3px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n      }\n\n      .c0 .carousel .richtext-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 .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        width: 33%;\n        right: calc(-33% + 3px);\n        -webkit-transform: scale(0.8);\n        -ms-transform: scale(0.8);\n        transform: scale(0.8);\n      }\n\n      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {\n        -webkit-transform: scale(0.8);\n        -ms-transform: scale(0.8);\n        transform: scale(0.8);\n      }\n\n      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {\n        width: 50%;\n        right: calc(-50% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 .carousel .richtext-carousel .carousel__slide {\n        padding-bottom: 350px !important;\n      }\n\n      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-125% - 5px);\n        width: 125%;\n      }\n    }\n\n    <div\n      className=\"c0 CarouselWrapper\"\n      id=\"nqIEHjiYE8Yd2A2a5cI3O\"\n    >\n      <div\n        className=\"c1\"\n      >\n        Some heading copy that will be nicely constructed in-situ\n      </div>\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c1 {
+      text-align: center;
+    }
+
+    .c0 {
+      height: 100%;
+      background: #FFFFFF;
+      max-width: 760px;
+      padding: 2.5rem 2rem 3.5rem;
+      margin: 0 auto;
+      border-radius: 20px;
+      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
+    }
+
+    .c0 .carousel {
+      position: relative;
+      margin: 0 auto;
+      padding-top: 2rem;
+    }
+
+    .c0 .carousel button.carousel__back-button,
+    .c0 .carousel 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;
+    }
+
+    .c0 .carousel button.carousel__back-button:after,
+    .c0 .carousel button.carousel__next-button:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 50%;
+      height: 100%;
+      -webkit-transition: opacity 0.2s linear;
+      transition: opacity 0.2s linear;
+      background: linear-gradient(90deg,#FFFFFF,#FFFFFF7a,#FFFFFF00);
+    }
+
+    .c0 .carousel button.carousel__back-button:hover:after,
+    .c0 .carousel button.carousel__next-button:hover:after {
+      opacity: 0.5;
+    }
+
+    .c0 .carousel button.carousel__next-button {
+      left: auto;
+      right: 0;
+    }
+
+    .c0 .carousel button.carousel__next-button:before {
+      -webkit-transform: translate(0,-50%) rotate(-90deg);
+      -ms-transform: translate(0,-50%) rotate(-90deg);
+      transform: translate(0,-50%) rotate(-90deg);
+    }
+
+    .c0 .carousel button.carousel__next-button:after {
+      left: auto;
+      right: 0;
+      background: linear-gradient(90deg,#FFFFFF00,#FFFFFF7a,#FFFFFF);
+    }
+
+    .c0 .carousel .richtext-carousel {
+      -webkit-transition: -webkit-transform 0.75s;
+      -webkit-transition: -webkit-transform 0.75s;
+      transition: -webkit-transform 0.75s;
+      -o-transition: transform 0.75s;
+      -webkit-transition: -webkit-transform 0.75s;
+      -webkit-transition: transform 0.75s;
+      transition: transform 0.75s;
+      -webkit-transform: 0.75s;
+      will-change: transform;
+    }
+
+    .c0 .carousel .richtext-carousel .last-slide .slide-copy-wrapper:after {
+      content: none;
+    }
+
+    .c0 .carousel .richtext-carousel .carousel__slide {
+      padding-bottom: 300px !important;
+    }
+
+    .c0 .carousel .richtext-carousel .carousel__slide .carousel__inner-slide {
+      text-align: center;
+      display: -webkit-inline-box;
+      display: -webkit-inline-flex;
+      display: -ms-inline-flexbox;
+      display: inline-flex;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      -webkit-box-pack: start;
+      -webkit-justify-content: flex-start;
+      -ms-flex-pack: start;
+      justify-content: flex-start;
+      -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+    }
+
+    @media (min-width:740px) {
+      .c0 .carousel button.carousel__back-button,
+      .c0 .carousel button.carousel__next-button {
+        width: 33.3% !important;
+      }
+
+      .c0 .carousel button.carousel__back-button:after,
+      .c0 .carousel button.carousel__next-button:after {
+        width: 100%;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c0 .carousel .richtext-carousel .carousel__slide {
+        padding-bottom: 350px !important;
+      }
+
+      .c0 .carousel .richtext-carousel .carousel__slide .carousel__inner-slide > div:first-child {
+        -webkit-transition: -webkit-transform 0.75s ease;
+        -webkit-transition: transform 0.75s ease;
+        transition: transform 0.75s ease;
+        -webkit-transform-origin: center;
+        -ms-transform-origin: center;
+        transform-origin: center;
+        -webkit-transform: scale(0.8);
+        -ms-transform: scale(0.8);
+        transform: scale(0.8);
+      }
+
+      .c0 .carousel .richtext-carousel .carousel__slide .carousel__inner-slide > div:first-child:after {
+        -webkit-transition: -webkit-transform 0.75s ease,width 0.75s ease,right 0.75s ease;
+        -webkit-transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;
+        transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;
+        width: 100%;
+        right: calc(-100% - 6px);
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+      }
+
+      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {
+        width: 33%;
+        right: calc(-33% - 3px);
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+      }
+
+      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child {
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+      }
+
+      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {
+        width: 33%;
+        right: calc(-33% + 3px);
+        -webkit-transform: scale(0.8);
+        -ms-transform: scale(0.8);
+        transform: scale(0.8);
+      }
+
+      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {
+        -webkit-transform: scale(0.8);
+        -ms-transform: scale(0.8);
+        transform: scale(0.8);
+      }
+
+      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {
+        width: 50%;
+        right: calc(-50% - 6px);
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c0 .carousel .richtext-carousel .carousel__slide {
+        padding-bottom: 350px !important;
+      }
+
+      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {
+        right: calc(-125% - 5px);
+        width: 125%;
+      }
+    }
+
+    <div
+      className="c0 CarouselWrapper"
+      id="nqIEHjiYE8Yd2A2a5cI3O"
+    >
+      <div
+        className="c1"
+      >
+        Some heading copy that will be nicely constructed in-situ
+      </div>
+    </div>
+  `);
 });

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

@@ -12,5 +12,345 @@ 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: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: 425px !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: 450px !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 {\n        padding-bottom: 475px !important;\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        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  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c1 {
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: inherit;
+      font-weight: bold;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c3 {
+      color: #E52630;
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: uppercase;
+      font-weight: normal;
+      font-family: 'Anton',Impact,sans-serif;
+      -webkit-letter-spacing: 0.03rem;
+      -moz-letter-spacing: 0.03rem;
+      -ms-letter-spacing: 0.03rem;
+      letter-spacing: 0.03rem;
+    }
+
+    .c5 {
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: inherit;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c2 {
+      width: 75%;
+      margin: 0 auto;
+    }
+
+    .c2:first-child {
+      margin-bottom: 2rem;
+      text-align: center;
+      font-size: 16px;
+      line-height: 19.5px;
+    }
+
+    .c4 {
+      margin-bottom: 2rem;
+      text-align: center;
+      font-size: 34px;
+      line-height: 37px;
+    }
+
+    .c6 {
+      margin-bottom: 0;
+      text-align: center;
+      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 {
+      position: relative;
+      margin: 0 auto;
+      padding-top: 2rem;
+    }
+
+    .c0 .carousel button.carousel__back-button,
+    .c0 .carousel 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;
+    }
+
+    .c0 .carousel button.carousel__back-button:after,
+    .c0 .carousel button.carousel__next-button:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 50%;
+      height: 100%;
+      -webkit-transition: opacity 0.2s linear;
+      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));
+    }
+
+    .c0 .carousel button.carousel__back-button:hover:after,
+    .c0 .carousel button.carousel__next-button:hover:after {
+      opacity: 0.5;
+    }
+
+    .c0 .carousel button.carousel__next-button {
+      left: auto;
+      right: 0;
+    }
+
+    .c0 .carousel button.carousel__next-button:before {
+      -webkit-transform: translate(0,-50%) rotate(-90deg);
+      -ms-transform: translate(0,-50%) rotate(-90deg);
+      transform: translate(0,-50%) rotate(-90deg);
+    }
+
+    .c0 .carousel button.carousel__next-button: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));
+    }
+
+    .c0 .carousel .wymd-carousel {
+      -webkit-transition: -webkit-transform 0.75s;
+      -webkit-transition: -webkit-transform 0.75s;
+      transition: -webkit-transform 0.75s;
+      -o-transition: transform 0.75s;
+      -webkit-transition: -webkit-transform 0.75s;
+      -webkit-transition: transform 0.75s;
+      transition: transform 0.75s;
+      -webkit-transform: 0.75s;
+      will-change: transform;
+    }
+
+    .c0 .carousel .wymd-carousel .last-slide .image-wrapper:after {
+      content: none;
+    }
+
+    .c0 .carousel .wymd-carousel .carousel__slide {
+      padding-bottom: 425px !important;
+    }
+
+    .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {
+      text-align: center;
+      display: -webkit-inline-box;
+      display: -webkit-inline-flex;
+      display: -ms-inline-flexbox;
+      display: inline-flex;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      -webkit-box-pack: start;
+      -webkit-justify-content: flex-start;
+      -ms-flex-pack: start;
+      justify-content: flex-start;
+      -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+    }
+
+    @media (min-width:1024px) {
+      .c2:first-child {
+        font-size: 20px;
+        line-height: 24.38px;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c4 {
+        font-size: 60px;
+        line-height: 60px;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c4 {
+        font-size: 64px;
+        line-height: 68px;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c6 {
+        font-size: 17px;
+        line-height: 19px;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c0 .carousel {
+        padding-top: 2rem;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c0 .carousel button.carousel__back-button,
+      .c0 .carousel button.carousel__next-button {
+        width: 33.3% !important;
+      }
+
+      .c0 .carousel button.carousel__back-button:after,
+      .c0 .carousel button.carousel__next-button:after {
+        width: 100%;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c0 .carousel .wymd-carousel .carousel__slide {
+        padding-bottom: 450px !important;
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {
+        -webkit-transition: -webkit-transform 0.75s ease;
+        -webkit-transition: transform 0.75s ease;
+        transition: transform 0.75s ease;
+        -webkit-transform: scale(0.5);
+        -ms-transform: scale(0.5);
+        transform: scale(0.5);
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child:after {
+        -webkit-transition: -webkit-transform 0.75s ease,width 0.75s ease,right 0.75s ease;
+        -webkit-transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;
+        transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;
+        right: calc(-300% - 6px);
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+        width: 300%;
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide .all-text-wrapper {
+        -webkit-transition: -webkit-transform 0.75s ease;
+        -webkit-transition: transform 0.75s ease;
+        transition: transform 0.75s ease;
+        -webkit-transform-origin: top;
+        -ms-transform-origin: top;
+        transform-origin: top;
+        -webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);
+        -ms-transform: translateY(calc(-45px + 5%)) scale(0.5);
+        transform: translateY(calc(-45px + 5%)) scale(0.5);
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {
+        right: calc(-300% - 6px);
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+        width: 300%;
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child {
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {
+        right: calc(-222% - 6px);
+        -webkit-transform: scale(0.5);
+        -ms-transform: scale(0.5);
+        transform: scale(0.5);
+        width: 300%;
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {
+        -webkit-transform: translateY(0) scale(1);
+        -ms-transform: translateY(0) scale(1);
+        transform: translateY(0) scale(1);
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {
+        -webkit-transform: scale(0.5);
+        -ms-transform: scale(0.5);
+        transform: scale(0.5);
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {
+        right: calc(-300% - 6px);
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+        width: 300%;
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {
+        -webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);
+        -ms-transform: translateY(calc(-45px + 5%)) scale(0.5);
+        transform: translateY(calc(-45px + 5%)) scale(0.5);
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c0 .carousel .wymd-carousel .carousel__slide {
+        padding-bottom: 475px !important;
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {
+        right: calc(-250% - 6px);
+        width: 250%;
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {
+        right: calc(-187% - 6px);
+        width: 250%;
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {
+        right: calc(-250% - 6px);
+        width: 250%;
+      }
+    }
+
+    <div
+      className="c0 CarouselWrapper"
+      id="7zdR84QkZwrTh9NWx2H926"
+    >
+      <p
+        className="c1 c2"
+        color="inherit"
+        size="s"
+      >
+        Over the past two years, we’ve supported
+      </p>
+      <h1
+        className="c3 c4"
+        color="red"
+        size="s"
+      >
+        11.7 million people
+      </h1>
+      <p
+        className="c5 c6"
+        color="inherit"
+        size="s"
+      >
+        including...
+      </p>
+    </div>
+  `);
 });

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

@@ -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${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) => {

package/dist/theme/crTheme/colors.js

@@ -50,14 +50,6 @@ const colors = {
   red: '#E52630',
   red_secondary: '#F9723A',
   red_dark: '#890B11',
-  rnd_23_teal: '#3EB1AA',
-  rnd_23_yellow: '#FFE300',
-  rnd_23_pink: '#EDB4D3',
-  rnd_23_black: '#2B3737',
-  rnd_24_red_dark: '#A11B22',
-  rnd_24_teal_dark: '#2B7C77',
-  rnd_24_pink_dark: '#A67E94',
-  rnd_24_blue: '#3367AF',
   rnd_25_ruby_red: '#AE001B',
   rnd_25_glitzy_grape: '#A20C51',
   rnd_25_glitzy_blue: '#0F1953',

package/dist/theme/crTheme/linkStyles.js

@@ -10,17 +10,17 @@ var _colors = _interopRequireDefault(require("./colors"));
 const linkStyles = {
   standard: {
     color: (0, _colors.default)('black'),
-    border: "2px solid ".concat((0, _colors.default)('black')),
+    border: `2px solid ${(0, _colors.default)('black')}`,
     weight: 'normal',
     hoverColor: (0, _colors.default)('black'),
-    hoverBorder: "2px solid ".concat((0, _colors.default)('black'))
+    hoverBorder: `2px solid ${(0, _colors.default)('black')}`
   },
   standard_white: {
     color: (0, _colors.default)('white'),
-    border: "2px solid ".concat((0, _colors.default)('white')),
+    border: `2px solid ${(0, _colors.default)('white')}`,
     weight: 'normal',
     hoverColor: (0, _colors.default)('white'),
-    hoverBorder: "2px solid ".concat((0, _colors.default)('white'))
+    hoverBorder: `2px solid ${(0, _colors.default)('white')}`
   }
 };
 var _default = (styleName, underline) => {

package/dist/theme/shared/allBreakpoints.js

@@ -18,7 +18,7 @@ const breakpointValues = exports.breakpointValues = {
 };
 var _default = size => {
   if (size) {
-    return "(min-width: ".concat(breakpointValues[size], "px)");
+    return `(min-width: ${breakpointValues[size]}px)`;
   }
   return 'inherit';
 };

package/dist/theme/shared/fontFamilies.js

@@ -29,7 +29,7 @@ const fonts = {
 var _default = family => {
   let style = 'inherit';
   if (family) {
-    style = "'".concat(fonts[family].font, "', ").concat(fonts[family].fallback, ", sans-serif");
+    style = `'${fonts[family].font}', ${fonts[family].fallback}, sans-serif`;
   }
   return style;
 };

package/dist/utils/Membership.js

@@ -26,7 +26,7 @@ const isAmountValid = input => {
 exports.isAmountValid = isAmountValid;
 const getUrlParameter = name => {
   const text = name.replace(/\[]/, '\\[').replace(/[\]]/, '\\]');
-  const regex = new RegExp("[\\?&]".concat(text, "=([^&#]*)"));
+  const regex = new RegExp(`[\\?&]${text}=([^&#]*)`);
   const results = regex.exec(window.location.search);
   const param = results === null ? 'generic' : decodeURIComponent(results[1].replace(/\+/g, ' '));
   return param;
@@ -49,6 +49,6 @@ const handleDonateSubmission = function (amount, clientID, cartID, mbshipID, don
     currentpageUrl = currentpageUrl.substring(0, currentpageUrl.indexOf(thisMatch));
   }
   const givingTypeUrl = givingType === 'single' ? 'single' : 'monthly';
-  window.location.href = "".concat(donateLink, "?clientOverride=").concat(clientID, "&amount=").concat(amount, "&currency=GBP&givingType=").concat(givingTypeUrl, "&cartId=").concat(cartID, "&affiliate=").concat(affiliateValue, "&siteurl=").concat(currentpageUrl, "&rowID=").concat(mbshipID, "&popUpShown=").concat(popUpShown);
+  window.location.href = `${donateLink}?clientOverride=${clientID}&amount=${amount}&currency=GBP&givingType=${givingTypeUrl}&cartId=${cartID}&affiliate=${affiliateValue}&siteurl=${currentpageUrl}&rowID=${mbshipID}&popUpShown=${popUpShown}`;
 };
 exports.handleDonateSubmission = handleDonateSubmission;