@comicrelief/component-library 8.77.3 → 8.77.4

package/src/components/Organisms/RichtextCarousel/RichtextCarouselExample.jsx

@@ -7,12 +7,12 @@ export default function RichtextCarouselExample() {
   return (
     <>
       <ExampleContainer>
-        <h2 style={{ textAlign: 'center' }}>Richtext Carousel #1 (default padding)</h2>
+        <h2 style={{ textAlign: 'center' }}>Richtext Carousel #1 (default padding, autoplay off)</h2>
         <RichtextCarousel data={RichtextCarouselItems} />
       </ExampleContainer>
 
       <ExampleContainer>
-        <h2 style={{ textAlign: 'center' }}>Richtext Carousel #2 (custom padding)</h2>
+        <h2 style={{ textAlign: 'center' }}>Richtext Carousel #2 (custom padding, autoplay on)</h2>
         <RichtextCarousel data={RichtextCarouselItemsWithPadding} />
       </ExampleContainer>
     </>

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

@@ -39,6 +39,7 @@ const WYMDCarousel = ({ data }) => {
       $paddingTop={paddingTop}
       $paddingBottom={paddingBottom}
       $backgroundColour={backgroundColour}
+      data-testid="wymd-carousel--container"
     >
 
       <CarouselWrapper
@@ -47,22 +48,37 @@ const WYMDCarousel = ({ data }) => {
         $mobileHeight={mobileHeight}
         $tabletHeight={tabletHeight}
         $desktopHeight={desktopHeight}
+        data-testid="wymd-carousel--wrapper"
       >
-        <Heading tag="p" weight="bold">
+        <Heading
+          tag="p"
+          weight="bold"
+          data-testid="wymd-carousel--heading"
+        >
           { headerCopy}
         </Heading>
 
-        <PeopleHelpedText tag="h1" family="Anton" weight="normal" color="red">
+        <PeopleHelpedText
+          tag="h1"
+          family="Anton"
+          weight="normal"
+          color="red"
+          data-testid="wymd-carousel--people-helped"
+        >
           { peopleHelpedText}
         </PeopleHelpedText>
 
-        <Including tag="p">
+        <Including
+          tag="p"
+          data-testid="wymd-carousel--including"
+        >
           including...
         </Including>
 
         {theseItems && (
         <Splide
           className="wymd-carousel"
+          data-testid="wymd-carousel--splide"
           options={{
             speed: 750,
             rewindSpeed: 750,
@@ -97,6 +113,7 @@ const WYMDCarousel = ({ data }) => {
                 key={safeIndex}
                 index={safeIndex}
                 data-index={safeIndex}
+                data-testid="wymd-carousel--slide"
               >
                 <SlideInner>
                   <ImageWrapper className="image-wrapper">
@@ -105,13 +122,20 @@ const WYMDCarousel = ({ data }) => {
 
                   <AllTextWrapper>
                     <AmountWrapper>
-                      <Text tag="h1" family="Anton">
+                      <Text
+                        tag="h1"
+                        family="Anton"
+                        data-testid="wymd-carousel--amount"
+                      >
                         {theseItems[key].amount}
                       </Text>
                     </AmountWrapper>
 
                     <CopyWrapper>
-                      <Text tag="p">
+                      <Text
+                        tag="p"
+                        data-testid="wymd-carousel--copy"
+                      >
                         {theseItems[key].copy}
                       </Text>
                     </CopyWrapper>

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

@@ -211,19 +211,6 @@ const CarouselWrapper = styled.div`
       }
     }
 
-    // Reorientate for the right-side 'next' button
-    button.carousel__next-button {
-      left: auto;
-      right: 0;
-
-      &: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));
-      }
-    }
-
     // Carousel:
     &.wymd-carousel {
       .splide__slide {

package/src/components/Organisms/WYMDCarousel/WYMDCarouselExample.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import WYMDCarousel from './WYMDCarousel';
 import {
-  carouselItemsComplete, carouselItemsCompleteWithPadding, carouselItemsIncomplete, carouselItemsMinimal
+  carouselItemsComplete, carouselItemsCompleteWithPadding,
+  carouselItemsIncomplete, carouselItemsMinimal
 } from '../../../data/data';
 import { ExampleContainer } from '../../../demos/SharedStyles';
 

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

@@ -553,17 +553,6 @@ exports[`renders the customised padding version correctly:
   display: none;
 }
 
-.c1 .splide button.carousel__next-button {
-  left: auto;
-  right: 0;
-}
-
-.c1 .splide 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));
-}
-
 .c1 .splide.wymd-carousel .splide__slide {
   height: 425px;
 }
@@ -706,28 +695,34 @@ exports[`renders the customised padding version correctly:
 
 <div
   className="c0"
+  data-testid="wymd-carousel--container"
 >
   <div
     className="c1 CarouselWrapper"
+    data-testid="wymd-carousel--wrapper"
     id="7zdR84QkZwrTh9NWx2H926"
   >
     <p
       className="c2 c3"
+      data-testid="wymd-carousel--heading"
     >
       Over the past two years, we've supported
     </p>
     <h1
       className="c4 c5"
+      data-testid="wymd-carousel--people-helped"
     >
       11.7 million people
     </h1>
     <p
       className="c6 c7"
+      data-testid="wymd-carousel--including"
     >
       including...
     </p>
     <div
       className="splide wymd-carousel"
+      data-testid="wymd-carousel--splide"
     >
       <div
         className="splide__track"
@@ -738,6 +733,7 @@ exports[`renders the customised padding version correctly:
           <li
             className="splide__slide"
             data-index={0}
+            data-testid="wymd-carousel--slide"
             index={0}
           >
             <div
@@ -759,6 +755,7 @@ exports[`renders the customised padding version correctly:
                 >
                   <h1
                     className="c11"
+                    data-testid="wymd-carousel--amount"
                   >
                     1,000
                   </h1>
@@ -768,6 +765,7 @@ exports[`renders the customised padding version correctly:
                 >
                   <p
                     className="c6"
+                    data-testid="wymd-carousel--copy"
                   >
                     children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
                   </p>
@@ -778,6 +776,7 @@ exports[`renders the customised padding version correctly:
           <li
             className="splide__slide"
             data-index={1}
+            data-testid="wymd-carousel--slide"
             index={1}
           >
             <div
@@ -799,6 +798,7 @@ exports[`renders the customised padding version correctly:
                 >
                   <h1
                     className="c11"
+                    data-testid="wymd-carousel--amount"
                   >
                     750,000
                   </h1>
@@ -808,6 +808,7 @@ exports[`renders the customised padding version correctly:
                 >
                   <p
                     className="c6"
+                    data-testid="wymd-carousel--copy"
                   >
                     children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
                   </p>
@@ -818,6 +819,7 @@ exports[`renders the customised padding version correctly:
           <li
             className="splide__slide"
             data-index={2}
+            data-testid="wymd-carousel--slide"
             index={2}
           >
             <div
@@ -839,6 +841,7 @@ exports[`renders the customised padding version correctly:
                 >
                   <h1
                     className="c11"
+                    data-testid="wymd-carousel--amount"
                   >
                     3,000
                   </h1>
@@ -848,6 +851,7 @@ exports[`renders the customised padding version correctly:
                 >
                   <p
                     className="c6"
+                    data-testid="wymd-carousel--copy"
                   >
                     children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
                   </p>
@@ -858,6 +862,7 @@ exports[`renders the customised padding version correctly:
           <li
             className="splide__slide"
             data-index={3}
+            data-testid="wymd-carousel--slide"
             index={3}
           >
             <div
@@ -879,6 +884,7 @@ exports[`renders the customised padding version correctly:
                 >
                   <h1
                     className="c11"
+                    data-testid="wymd-carousel--amount"
                   >
                     4,000
                   </h1>
@@ -888,6 +894,7 @@ exports[`renders the customised padding version correctly:
                 >
                   <p
                     className="c6"
+                    data-testid="wymd-carousel--copy"
                   >
                     children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
                   </p>
@@ -898,6 +905,7 @@ exports[`renders the customised padding version correctly:
           <li
             className="splide__slide"
             data-index={4}
+            data-testid="wymd-carousel--slide"
             index={4}
           >
             <div
@@ -919,6 +927,7 @@ exports[`renders the customised padding version correctly:
                 >
                   <h1
                     className="c11"
+                    data-testid="wymd-carousel--amount"
                   >
                     5,000
                   </h1>
@@ -928,6 +937,7 @@ exports[`renders the customised padding version correctly:
                 >
                   <p
                     className="c6"
+                    data-testid="wymd-carousel--copy"
                   >
                     children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
                   </p>
@@ -938,6 +948,7 @@ exports[`renders the customised padding version correctly:
           <li
             className="splide__slide"
             data-index={5}
+            data-testid="wymd-carousel--slide"
             index={5}
           >
             <div
@@ -959,6 +970,7 @@ exports[`renders the customised padding version correctly:
                 >
                   <h1
                     className="c11"
+                    data-testid="wymd-carousel--amount"
                   >
                     6,000
                   </h1>
@@ -968,6 +980,7 @@ exports[`renders the customised padding version correctly:
                 >
                   <p
                     className="c6"
+                    data-testid="wymd-carousel--copy"
                   >
                     children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
                   </p>
@@ -978,6 +991,7 @@ exports[`renders the customised padding version correctly:
           <li
             className="splide__slide"
             data-index={6}
+            data-testid="wymd-carousel--slide"
             index={6}
           >
             <div
@@ -999,6 +1013,7 @@ exports[`renders the customised padding version correctly:
                 >
                   <h1
                     className="c11"
+                    data-testid="wymd-carousel--amount"
                   >
                     7,000
                   </h1>
@@ -1008,6 +1023,7 @@ exports[`renders the customised padding version correctly:
                 >
                   <p
                     className="c6"
+                    data-testid="wymd-carousel--copy"
                   >
                     children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
                   </p>
@@ -1018,6 +1034,7 @@ exports[`renders the customised padding version correctly:
           <li
             className="splide__slide"
             data-index={7}
+            data-testid="wymd-carousel--slide"
             index={7}
           >
             <div
@@ -1039,6 +1056,7 @@ exports[`renders the customised padding version correctly:
                 >
                   <h1
                     className="c11"
+                    data-testid="wymd-carousel--amount"
                   >
                     8,000
                   </h1>
@@ -1048,6 +1066,7 @@ exports[`renders the customised padding version correctly:
                 >
                   <p
                     className="c6"
+                    data-testid="wymd-carousel--copy"
                   >
                     children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
                   </p>
@@ -1058,6 +1077,7 @@ exports[`renders the customised padding version correctly:
           <li
             className="splide__slide last-slide"
             data-index={8}
+            data-testid="wymd-carousel--slide"
             index={8}
           >
             <div
@@ -1079,6 +1099,7 @@ exports[`renders the customised padding version correctly:
                 >
                   <h1
                     className="c11"
+                    data-testid="wymd-carousel--amount"
                   >
                     9,000
                   </h1>
@@ -1088,6 +1109,7 @@ exports[`renders the customised padding version correctly:
                 >
                   <p
                     className="c6"
+                    data-testid="wymd-carousel--copy"
                   >
                     children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.
                   </p>
@@ -1591,17 +1613,6 @@ exports[`renders the default padding version correctly:
   display: none;
 }
 
-.c1 .splide button.carousel__next-button {
-  left: auto;
-  right: 0;
-}
-
-.c1 .splide 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));
-}
-
 .c1 .splide.wymd-carousel .splide__slide {
   height: 425px;
 }
@@ -1707,23 +1718,28 @@ exports[`renders the default padding version correctly:
 
 <div
   className="c0"
+  data-testid="wymd-carousel--container"
 >
   <div
     className="c1 CarouselWrapper"
+    data-testid="wymd-carousel--wrapper"
     id="7zdR84QkZwrTh9NWx2H926"
   >
     <p
       className="c2 c3"
+      data-testid="wymd-carousel--heading"
     >
       Over the past two years, we've supported
     </p>
     <h1
       className="c4 c5"
+      data-testid="wymd-carousel--people-helped"
     >
       11.7 million people
     </h1>
     <p
       className="c6 c7"
+      data-testid="wymd-carousel--including"
     >
       including...
     </p>

package/src/data/data.js

@@ -323,7 +323,7 @@ const RichtextCarouselItems = {
     { copy: 'Some other longside but not really all that long copy, who knows, it could be this long or LESS' },
     { copy: '140 character count limit imposed in messages to fix the design height of each container and restrict anomalies. This is based on Twitters character limit for tweets. ABIGLONGLINETOFORCEONTOANEWONE' }
   ],
-  autoPlay: true
+  autoPlay: false
 };
 
 const RichtextCarouselItemsWithPadding = {
@@ -338,7 +338,8 @@ const RichtextCarouselItemsWithPadding = {
   autoPlay: true,
   paddingBottom: '4rem',
   paddingTop: '4rem',
-  rowBackgroundColour: 'teal_light'
+  rowBackgroundColour: 'teal_light',
+  carouselBackgroundColour: 'grey_light'
 };
 
 export {