@comicrelief/component-library 8.77.3 → 8.77.5

package/src/components/Organisms/RichtextCarousel/RichtextCarousel.js

@@ -1,11 +1,10 @@
 import React, {
-  useEffect, useState, useCallback
+  useEffect, useState
 } from 'react';
 import PropTypes from 'prop-types';
-import {
-  CarouselProvider, Slider, Slide, ButtonBack, ButtonNext
-} from 'pure-react-carousel';
-import 'pure-react-carousel/dist/react-carousel.es.css';
+
+import { Splide, SplideSlide } from '@splidejs/react-splide';
+
 import {
   CarouselWrapper, SlideCopyWrapper, HeadingCopyWrapper, Container
 } from './RichtextCarousel.style';
@@ -29,51 +28,19 @@ const RichtextCarousel = ({
     rowBackgroundColour = 'grey_light'
   }
 }) => {
-  // Defaults to mobile config:
-  const [isMobile, setIsMobile] = useState(true);
-  const [visibleSlides, setVisibleSlides] = useState(1);
-  const [totalSlides, setTotalSlides] = useState(null);
   const [theseItems, setTheseItems] = useState();
 
-  // Custom function to let us update the carousel config dynamically
-  const screenResize = useCallback(() => {
-    const screenSize = typeof window !== 'undefined' ? window.innerWidth : null;
-    const isCurrentlyMobile = window.innerWidth < breakpointValues.M;
-
-    if (screenSize !== null && (isMobile !== isCurrentlyMobile)) {
-      setIsMobile(isCurrentlyMobile);
-      setVisibleSlides(isCurrentlyMobile ? 1 : 3);
-      setTotalSlides(isCurrentlyMobile ? theseItems.length : theseItems.length + 2);
-    }
-  }, [isMobile, theseItems]);
-
   // Cache our data source, using as a flag for render logic:
   useEffect(() => {
     setTheseItems(nodes);
   }, [setTheseItems, nodes]);
 
-  useEffect(() => {
-    if (window !== 'undefined' && window.innerWidth >= breakpointValues.M) {
-      // On inital render, update carousel plugin config
-      // to suit the non-mobile layout and functionality:
-      setIsMobile(false);
-      setVisibleSlides(3);
-    }
-
-    // Hook into browser's own onresize event to call our custom wrapper function:
-    if (typeof window !== 'undefined') window.onresize = screenResize;
-  }, [screenResize]);
-
-  if (theseItems && totalSlides === null) {
-    // Reflects our two dummy/bookend slides for non-mobile/tablet views:
-    setTotalSlides(isMobile ? theseItems.length : theseItems.length + 2);
-  }
-
   return (
     <Container
       $paddingTop={paddingTop}
       $paddingBottom={paddingBottom}
       $rowBackgroundColour={rowBackgroundColour}
+      data-testid="richtext-carousel--container"
     >
 
       <CarouselWrapper
@@ -83,42 +50,52 @@ const RichtextCarousel = ({
         $tabletHeight={tabletHeight}
         $desktopHeight={desktopHeight}
         $carouselBackgroundColour={carouselBackgroundColour}
+        data-testid="richtext-carousel--wrapper"
       >
 
-        <HeadingCopyWrapper>
+        <HeadingCopyWrapper data-testid="richtext-carousel--heading">
           {headingCopy}
         </HeadingCopyWrapper>
 
         {theseItems && (
-        <CarouselProvider
-          naturalSlideWidth={50}
-          naturalSlideHeight={200}
-          totalSlides={totalSlides}
-          isPlaying={autoPlay}
-          interval={5000}
-          visibleSlides={visibleSlides}
-          infinite
-        >
-          <Slider classNameAnimation="richtext-carousel">
-
-            {/* Dummy slide for our desired non-mobile layout and functionality */}
-            {isMobile === false && (
-            <Slide index={0} key={0} />
-            )}
-
+          <Splide
+            className="richtext-carousel"
+            data-testid="richtext-carousel--splide"
+            options={{
+              speed: 1000,
+              arrows: true,
+              pagination: false,
+              drag: 'free',
+              flickPower: 50,
+              perMove: 1,
+              dragMinThreshold: { mouse: 50, touch: 50 },
+              updateOnMove: true,
+              snap: true,
+              autoplay: autoPlay,
+              focus: 'center',
+              trimSpace: false,
+              perPage: 3,
+              rewind: true,
+              breakpoints: {
+                [breakpointValues.M]: {
+                  perPage: 1
+                }
+              }
+            }}
+          >
             {Object.keys(theseItems).map((key, index) => {
-            // Reflect that initial dummy/bookend slide shown on non-mobile/tablet views:
-              const thisOffsetIndex = index + (isMobile ? 0 : 1);
+              const safeIndex = index;
 
               return (
-              // Calculate the index offset accordingly to reflect the number of slides,
-              // but use the REAL index when determining if its the last REAL slide
-                <Slide
-                  index={thisOffsetIndex}
+                // Calculate the index offset accordingly to reflect the number of slides,
+                // but use the REAL index when determining if its the last REAL slide
+                <SplideSlide
                   className={index === (theseItems.length - 1) && 'last-slide'}
-                  key={thisOffsetIndex}
+                  key={safeIndex}
+                  index={safeIndex}
+                  data-index={safeIndex}
+                  data-testid="richtext-carousel--slide"
                 >
-
                   <SlideCopyWrapper
                     className="slide-copy-wrapper"
                     $mobileHeight={mobileHeight}
@@ -126,28 +103,18 @@ const RichtextCarousel = ({
                     $desktopHeight={desktopHeight}
                     $nodeBackgroundColour={nodeBackgroundColour}
                     $nodeOutlineColour={nodeOutlineColour}
+                    data-testid="richtext-carousel--copy"
                   >
                     {theseItems[index].copy}
                   </SlideCopyWrapper>
 
-                </Slide>
+                </SplideSlide>
               );
             })}
-
-            {/* Dummy slide for our desired non-mobile layout and functionality */}
-            {isMobile === false && (
-            <Slide index={theseItems.length + 1} key="bookend-last" />
-            )}
-
-          </Slider>
-          <ButtonBack>Back</ButtonBack>
-          <ButtonNext>Next</ButtonNext>
-        </CarouselProvider>
+          </Splide>
         )}
-
       </CarouselWrapper>
     </Container>
-
   );
 };
 

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

@@ -18,6 +18,13 @@ const SlideCopyWrapper = styled.div`
   position: relative;
   overflow: visible;
   word-wrap: break-word;
+  font-size: 0.9rem;
+  line-height: 0.9rem;
+
+  * {
+    font-size: inherit;
+    line-height: inherit;
+  }
 
   &:after {
     position: absolute;
@@ -41,54 +48,61 @@ const SlideCopyWrapper = styled.div`
 
 const HeadingCopyWrapper = styled.div`
   text-align: center;
+
+  * {
+    margin-top: 0;
+  }
+
+  h1, h2, h3 {
+    margin-bottom: 1.5rem;
+  }
 `;
 
 // Unfortunately having to target plugin-created markup ye olde fashioned way:
 const CarouselWrapper = styled.div`
   height: 100%;
   background: ${({ theme, $carouselBackgroundColour }) => theme.color($carouselBackgroundColour)};
-  
   max-width: 760px;
   padding: 2.5rem ${spacing('l')} 3.5rem;
   margin: 0 auto;
-
   border-radius: 20px;
   ${defaultBoxShadow()}
 
-  > div:first-child {
-    * {
-      margin-top: 0;
-    }
-
-    h1, h2, h3 {
-      margin-bottom: 1.5rem;
-    }
-  }
-
-  .carousel {
+  .splide {
     position: relative;
     margin: 0 auto;
     padding-top: ${spacing('l')};
 
-    button.carousel__back-button,
-    button.carousel__next-button {
+    // Navigation buttons:
+    .splide__arrows {
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+    button.splide__arrow {
       position: absolute;
       left: 0;
       top: 0;
-      width: 33% !important;
+      width: 33.3%;
       height: 100%;
-      padding: 0 !important;
+      padding: 0;
       box-shadow: none;
       text-indent: -9999px;
       background-color: transparent;
-      border: none;
+      transform: none;
+      border-radius: 0;
+      opacity: 1;
 
       &:after {
         content: "";
         position: absolute;
         top: 0;
         left: 0;
-        width: 50%;
+        width: 100%;
         height: 100%;
         transition: opacity 0.2s linear;
         background: ${({ theme, $carouselBackgroundColour }) => css`
@@ -97,165 +111,82 @@ const CarouselWrapper = styled.div`
         `};
       }
 
-      &:hover {
-        &:after {
-          opacity: 0.5;
-        }
-      }
-
-      @media ${({ theme }) => theme.allBreakpoints('M')} {
-        width: 33.3% !important;
-        &:after {
-          width: 100%;
-        }
-      }
-    }
-
-    button.carousel__next-button {
-      left: auto;
-      right: 0;
-
-      &:before {
-        transform: translate(0, -50%) rotate(-90deg);
-      }
-
-      &:after {
+      &.splide__arrow--next {
         left: auto;
         right: 0;
 
-        background: ${({ theme, $carouselBackgroundColour }) => css`
+        &:after {
+          left: auto;
+          right: 0;
+          background: ${({ theme, $carouselBackgroundColour }) => css`
           linear-gradient(90deg, ${theme.color($carouselBackgroundColour)}00,
           ${theme.color($carouselBackgroundColour)}7a, ${theme.color($carouselBackgroundColour)});
         `};
+        }
       }
-    }
-
-    .richtext-carousel {
-      // Override default animations
-      transition: -webkit-transform ${animationSpeed}s;
-      -o-transition: transform ${animationSpeed}s;
-      transition: transform ${animationSpeed}s;
-      -webkit-transform: ${animationSpeed}s;
-      will-change: transform;
 
-      .last-slide {
-        .slide-copy-wrapper:after {
-          content: none;
+      &:hover {
+        &:after {
+          opacity: 0.5;
         }
       }
 
-      .carousel__slide {
-        // 'Mobile'
-        padding-bottom: ${props => props.$mobileHeight}px !important;
+      svg {
+        display: none;
+      }
+    }
 
+    // Carousel:
+    &.richtext-carousel {
+
+      // All sides:
+      .splide__slide {
+        text-align: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: flex-start;
+        flex-direction: column;
+        height: ${props => props.$mobileHeight}px;
+
+        // No dashed 'connecting' line on the final slide
+        &.last-slide {
+          ${SlideCopyWrapper} {
+            &:after {
+              content: none !important;
+            }
+          }
+        }
+        
         // 'Tablet' (and up) tweaks for the 3-visible layout
         @media ${({ theme }) => theme.allBreakpoints('M')} {
-
-          padding-bottom: ${props => props.$tabletHeight}px !important;
-
-          // All slides:
-          .carousel__inner-slide {
-
-            // All 'SlideCopyWrapper's:
-            > div:first-child {
-              transition: transform ${animationSpeed}s ease;
-              transform-origin: center;
-              transform: scale(0.8);
-
-              &:after {
-                transition: transform ${animationSpeed}s ease,
-                width ${animationSpeed}s ease,
-                right ${animationSpeed}s ease;
-                width: 100%;
-                right: calc(-100% - 6px);
-                transform: scale(1);
-
-              }
+          height: ${props => props.$tabletHeight}px;
+
+           // All 'SlideCopyWrapper's:
+          ${SlideCopyWrapper} {
+            transition: transform ${animationSpeed}s ease;
+            transform-origin: center;
+            transform: scale(0.8);
+
+            &:after {
+              transition: transform ${animationSpeed}s ease,
+              width ${animationSpeed}s ease,
+              right ${animationSpeed}s ease;
+              width: 50%;
+              right: calc(-50% - 1px);
+              transform: scale(1);
             }
           }
 
-          // Our 'first' slide of the three:
-          &.carousel__slide--visible {
-            .carousel__inner-slide {
-              > div:first-child {
-                &:after {
-                  width: 33%;
-                  right: calc(-33% - 3px);
-                  transform: scale(1);
-                }
-              }
-            }
-
-            // 2nd and 3rd:
-            + .carousel__slide--visible {
-              .carousel__inner-slide {
-                > div:first-child {
-                  transform: scale(1);
-                  &:after {
-                    width: 33%;
-                    right: calc(-33% + 3px);
-                    transform: scale(0.8);
-                  }
-                }
-              }
-
-              // Resets the 3rd slide:
-              + .carousel__slide--visible {
-                > div > div:first-child {
-                  transform: scale(0.8);
-                  &:after {
-                    width: 50%;
-                    right: calc(-50% - 6px);
-                    transform: scale(1);
-                  }
-                }
-              }
-            }
+          // Our middle, active slide:
+          &.is-active {
+            ${SlideCopyWrapper} {
+              transform: scale(1.0);
+            } 
           }
         }
 
-        // 'Desktop'
         @media ${({ theme }) => theme.allBreakpoints('L')} {
-          padding-bottom: ${props => props.$desktopHeight}px !important;
-
-          // First
-          &.carousel__slide--visible {
-
-            // 2nd and 3rd
-            + .carousel__slide--visible {
-
-              // 3rd only
-              + .carousel__slide--visible {
-                .carousel__inner-slide {
-                  > div:first-child {
-                    &:after {
-                      right: calc(-125% - 5px);
-                      width: 125%;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-        // END OF DESKTOP
-
-        .carousel__inner-slide {
-          text-align: center;
-          display: inline-flex;
-          align-items: center;
-          justify-content: flex-start;
-          flex-direction: column;
-
-          .slide-copy-wrapper {
-            font-size: 0.9rem;
-            line-height: 0.9rem;
-
-            * {
-              font-size: inherit;
-              line-height: inherit;
-            }
-          }
+          height: ${props => props.$desktopHeight}px;
         }
       }
     }