@comicrelief/component-library 8.77.0 → 8.77.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.77.0",
+  "version": "8.77.1",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "files": [
@@ -95,7 +95,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-test-renderer": "^18.3.1",
-    "semantic-release": "^17.4.6",
+    "semantic-release": "^25.0.9",
     "styled-components": "^6.1.13",
     "vite": "^5.4.10",
     "vite-plugin-dts": "^4.3.0"

package/src/App.jsx

@@ -1,7 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
-import { atoms, molecules, organisms, docs } from './demos/index.jsx';
-import { Layout, Sidebar, SidebarTitle, SidebarItem, Preview, PreviewHeader, PreviewBox, Logo, IsolateButton } from './App.styles.js';
+import {
+  atoms, molecules, organisms, docs
+} from './demos/index';
+import {
+  Layout, Sidebar, SidebarTitle, SidebarItem, Preview,
+  PreviewHeader, PreviewBox, Logo, IsolateButton
+} from './App.styles';
 import crLogo from './components/Atoms/Logos/assets/cr-logo.svg';
 
 const Chevron = styled.span`
@@ -14,7 +19,7 @@ const groups = [
   { label: 'Docs', items: docs },
   { label: 'Atoms', items: atoms },
   { label: 'Molecules', items: molecules },
-  { label: 'Organisms', items: organisms },
+  { label: 'Organisms', items: organisms }
 ];
 
 // unpack all items in all groups into one flay array
@@ -28,10 +33,9 @@ function itemFromHash() {
 
 export default function App() {
   const [selected, setSelected] = useState(itemFromHash);
-  const [isIsolated, setIsIsolated] = useState(false);
-  const [openGroups, setOpenGroups] = useState(() =>
-    groups.reduce((acc, g) => ({ ...acc, [g.label]: false }), {})
-  );
+  const [isIsolated, setIsIsolated] = useState(import.meta.env.VITE_HIDE_NAV === 'true' || false);
+  const [openGroups, setOpenGroups] = useState(() => groups.reduce((acc, g) => (
+    { ...acc, [g.label]: false }), {}));
 
   const toggleGroup = label => setOpenGroups(prev => ({ ...prev, [label]: !prev[label] }));
 
@@ -79,12 +83,14 @@ export default function App() {
             {isIsolated ? 'Show Sidebar' : 'Isolate'}
           </IsolateButton>
         </PreviewHeader>
-        {(currentItem?.examples ?? (currentItem?.demo != null ? [currentItem.demo] : [])).map((example, idx) => (
-          <PreviewBox key={idx} data-testid={`${selected.name}-example-${idx + 1}`}>
-            <div data-preview={selected.name}>
-              {example}
-            </div>
-          </PreviewBox>
+        {(currentItem?.examples ?? (currentItem?.demo != null
+          ? [currentItem.demo]
+          : [])).map((example, idx) => (
+            <PreviewBox key={idx} data-testid={`${selected.name}-example-${idx + 1}`}>
+              <div data-preview={selected.name}>
+                {example}
+              </div>
+            </PreviewBox>
         ))}
       </Preview>
     </Layout>

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

@@ -1,15 +1,14 @@
 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 { Splide, SplideSlide } from '@splidejs/react-splide';
+
 import formatItems from './_utils';
-import 'pure-react-carousel/dist/react-carousel.es.css';
+
 import {
   CarouselWrapper, ImageWrapper, AmountWrapper, CopyWrapper,
-  Heading, PeopleHelpedText, Including, Container
+  Heading, PeopleHelpedText, Including, Container, SlideInner, AllTextWrapper
 } from './WYMDCarousel.style';
 import Text from '../../Atoms/Text/Text';
 import { breakpointValues } from '../../../theme/shared/allBreakpoints';
@@ -28,52 +27,20 @@ const WYMDCarousel = ({ data }) => {
     paddingBottom = '2rem'
   } = data;
 
-  // 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]);
-
   // Format our data BEFORE we use it in render:
   useEffect(() => {
     setTheseItems(formatItems(data));
   }, [setTheseItems, data]);
 
-  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}
       $backgroundColour={backgroundColour}
     >
+
       <CarouselWrapper
         className="CarouselWrapper"
         id={thisID}
@@ -81,7 +48,6 @@ const WYMDCarousel = ({ data }) => {
         $tabletHeight={tabletHeight}
         $desktopHeight={desktopHeight}
       >
-
         <Heading tag="p" weight="bold">
           { headerCopy}
         </Heading>
@@ -95,40 +61,50 @@ const WYMDCarousel = ({ data }) => {
         </Including>
 
         {theseItems && (
-        <CarouselProvider
-          naturalSlideWidth={50}
-          naturalSlideHeight={200}
-          totalSlides={totalSlides}
-          isPlaying={autoPlay}
-          interval={5000}
-          visibleSlides={visibleSlides}
-          infinite
+        <Splide
+          className="wymd-carousel"
+          options={{
+            type: 'loop',
+            speed: 750,
+            rewindSpeed: 750,
+            interval: 5000,
+            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
+              }
+            }
+          }}
         >
-          <Slider classNameAnimation="wymd-carousel">
-
-            {/* Dummy slide for our desired non-mobile layout and functionality */}
-            {isMobile === false && (
-            <Slide index={0} key={0} />
-            )}
-
-            {Object.keys(theseItems).map((key, index) => {
-            // Reflect that initial dummy/bookend slide shown on non-mobile/tablet views:
-              const thisOffsetIndex = index + (isMobile ? 0 : 1);
-
-              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}
-                  className={index === (theseItems.length - 1) && 'last-slide'}
-                  key={thisOffsetIndex}
-                >
 
+          {Object.keys(theseItems).map((key, index) => {
+            const safeIndex = index;
+
+            return (
+              <SplideSlide
+                className={index === (theseItems.length - 1) && 'last-slide'}
+                key={safeIndex}
+                index={safeIndex}
+                data-index={safeIndex}
+              >
+                <SlideInner>
                   <ImageWrapper className="image-wrapper">
                     <img src={theseItems[key].image.file.url} alt={theseItems[key].copy} />
                   </ImageWrapper>
 
-                  <div className="all-text-wrapper">
+                  <AllTextWrapper>
                     <AmountWrapper>
                       <Text tag="h1" family="Anton">
                         {theseItems[key].amount}
@@ -140,26 +116,18 @@ const WYMDCarousel = ({ data }) => {
                         {theseItems[key].copy}
                       </Text>
                     </CopyWrapper>
-                  </div>
 
-                </Slide>
-              );
-            })}
+                  </AllTextWrapper>
+                </SlideInner>
+              </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/WYMDCarousel/WYMDCarousel.style.js

@@ -10,6 +10,14 @@ const animationSpeed = 0.75;
 const textScaleOffsetA = 45;
 const textScaleOffsetB = 5;
 
+const SlideInner = styled.div`
+  // Don't need any custom styles, just wanted a nice clear selector amidst the chaos
+`;
+
+const AllTextWrapper = styled.div`
+  // And ditto.
+`;
+
 const ImageWrapper = styled.div`
   width: 45%;
   display: block;
@@ -25,6 +33,7 @@ const ImageWrapper = styled.div`
     display: block;
   }
 
+  // Dashed 'connecting' line:
   &:after {
     position: absolute;
     content: '';
@@ -128,7 +137,7 @@ const CarouselWrapper = styled.div`
   border-radius: 20px;
   ${defaultBoxShadow()}
 
-  .carousel {
+  .splide {
     position: relative;
     margin: 0 auto;
     padding-top: ${spacing('l')};
@@ -137,18 +146,29 @@ const CarouselWrapper = styled.div`
       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: "";
@@ -162,28 +182,40 @@ const CarouselWrapper = styled.div`
         rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
       }
 
+      &.splide__arrow--next {
+        left: auto;
+        right: 0;
+
+        &:after {
+          left: auto;
+          right: 0;
+          background: linear-gradient(90deg, rgba(255, 255, 255, 0),
+         rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 1));
+        }
+      }
+
       &:hover {
         &:after {
           opacity: 0.5;
         }
       }
 
+      svg {
+        display: none;
+      }
+
       @media ${({ theme }) => theme.allBreakpoints('M')} {
-        width: 33.3% !important;
         &:after {
           width: 100%;
         }
       }
     }
 
+    // Reorientate for the right-side 'next' button
     button.carousel__next-button {
       left: auto;
       right: 0;
 
-      &:before {
-        transform: translate(0, -50%) rotate(-90deg);
-      }
-
       &:after {
         left: auto;
         right: 0;
@@ -192,154 +224,115 @@ const CarouselWrapper = styled.div`
       }
     }
 
-    .wymd-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 {
-        .image-wrapper:after {
-          content: none;
+    // Carousel:
+    &.wymd-carousel {
+      .splide__slide {
+      
+        height: ${props => props.$mobileHeight}px;
+        
+        // All slides
+        ${SlideInner} {
+          text-align: center;
+          display: inline-flex;
+          align-items: center;
+          justify-content: flex-start;
+          flex-direction: column;
         }
-      }
 
-      .carousel__slide {
-        // 'Mobile'
-        padding-bottom: ${props => props.$mobileHeight}px !important;
+        // No dashed 'connecting' line on the final slide
+        &.last-slide {
+          ${ImageWrapper} {
+            &:after {
+              content: none;
+            }
+          }
+        }
 
         // 'Tablet' (and up) tweaks for the 3-visible layout
         @media ${({ theme }) => theme.allBreakpoints('M')} {
-
-          padding-bottom: ${props => props.$tabletHeight}px !important;
+          height: ${props => props.$tabletHeight}px;
 
           // All slides:
-          .carousel__inner-slide {
-
-            // All 'ImageWrappers':
-            > div:first-child {
+          ${SlideInner} {
+            ${ImageWrapper} {
               transition: transform ${animationSpeed}s ease;
               transform: scale(0.5);
-
+              
+              // Dashed 'connecting' line:
               &:after {
-                transition: transform ${animationSpeed}s ease,
-                width ${animationSpeed}s ease,
-                right ${animationSpeed}s ease;
-                right: calc(-300% - 6px);
-                transform: scale(1);
-                width: 300%;
+                transition: transform ${animationSpeed}s ease, width ${animationSpeed}s ease, right ${animationSpeed}s ease;
+                right: calc(-360%);
+                width: 360%;
               }
             }
 
-            // Scale down ALL copy
-            .all-text-wrapper {
+            ${AllTextWrapper} {
               transition: transform ${animationSpeed}s ease;
               transform-origin: top;
-              transform: translateY(calc(-${textScaleOffsetA}px + ${textScaleOffsetB}%)) scale(0.5)
+              transform: translateY(calc(-${textScaleOffsetA}px + ${textScaleOffsetB}%)) scale(0.5);
             }
           }
 
-          // Our 'first' slide of the three:
-          &.carousel__slide--visible {
-            .carousel__inner-slide {
-              > div:first-child {
+          // Previous slide, with a shorter 'connecting' line to account for larger, active slide to the right:
+          &.is-prev {
+            ${SlideInner} {
+              ${ImageWrapper} {                
                 &:after {
                   right: calc(-300% - 6px);
-                  transform: scale(1);
                   width: 300%;
                 }
               }
-            }
+            } 
+          }
 
-            // 2nd and 3rd:
-            + .carousel__slide--visible {
-              .carousel__inner-slide {
-                > div:first-child {
-                  transform: scale(1);
-                  &:after {
-                    right: calc(-222% - 6px);
-                    transform: scale(0.5);
-                    width: 300%;
-                  }
+          // Active, middle slide:
+          &.is-active {
+            ${SlideInner} {
+              ${ImageWrapper} {
+                transform: scale(1);
+              
+                &:after {
+                  right: calc(-222% - 6px);
+                  transform: scale(0.5);
+                  width: 300%;
                 }
               }
 
-              .all-text-wrapper {
-                transform: translateY(0) scale(1);
-              }
-
-              // Resets the 3rd slide:
-              + .carousel__slide--visible {
-                > div > div:first-child {
-                  transform: scale(0.5);
-                  &:after {
-                    right: calc(-300% - 6px);
-                    transform: scale(1);
-                    width: 300%;
-                  }
-                }
-                .all-text-wrapper {
-                  transform: translateY(calc(-${textScaleOffsetA}px + ${textScaleOffsetB}%)) scale(0.5)
-                }
+              ${AllTextWrapper} {
+                transform: scale(1);
               }
-            }
+            } 
           }
-        }
+        } 
 
-        // 'Desktop'
         @media ${({ theme }) => theme.allBreakpoints('L')} {
-          padding-bottom: ${props => props.$desktopHeight}px !important;
+          height: ${props => props.$desktopHeight}px;
 
-          // First
-          &.carousel__slide--visible {
-            .carousel__inner-slide {
-              > div:first-child {
-                &:after {
-                  right: calc(-250% - 6px);
-                  width: 250%;
-                }
-              }
+          ${SlideInner} ${ImageWrapper}  {
+            &:after {
+              width: 315%;
+              right: calc(-315%);
             }
+          }
+          
 
-            // 2nd and 3rd
-            + .carousel__slide--visible {
-              .carousel__inner-slide {
-                > div:first-child {
-                  &:after {
-                    right: calc(-187% - 6px);
-                    width: 250%;
-                  }
-                }
+          &.is-prev {
+            ${SlideInner} ${ImageWrapper} {
+              &:after {
+                right: calc(-260%);
+                width: 260%;
               }
+            } 
+          }
 
-
-              // 3rd only
-              + .carousel__slide--visible {
-                .carousel__inner-slide {
-                  > div:first-child {
-                    &:after {
-                      right: calc(-250% - 6px);
-                      width: 250%;
-                    }
-                  }
-                }
+          &.is-active {
+            ${SlideInner} ${ImageWrapper} {
+              &:after {
+                width: 250%;
+                right: calc(-192%);
               }
-            }
-
-
+            } 
           }
-
-        }
-        // END OF DESKTOP
-
-        .carousel__inner-slide {
-          text-align: center;
-          display: inline-flex;
-          align-items: center;
-          justify-content: flex-start;
-          flex-direction: column;
         }
       }
     }
@@ -353,5 +346,5 @@ const Container = styled.div`
 
 export {
   CarouselWrapper, ImageWrapper, AmountWrapper, CopyWrapper,
-  Heading, PeopleHelpedText, Including, Container
+  Heading, PeopleHelpedText, Including, Container, SlideInner, AllTextWrapper
 };

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

@@ -1,37 +1,40 @@
 import React from 'react';
 import WYMDCarousel from './WYMDCarousel';
-import { carouselItemsComplete, carouselItemsCompleteWithPadding, carouselItemsIncomplete, carouselItemsMinimal } from '../../../data/data';
+import {
+  carouselItemsComplete, carouselItemsCompleteWithPadding, carouselItemsIncomplete, carouselItemsMinimal
+} from '../../../data/data';
 import { ExampleContainer } from '../../../demos/SharedStyles';
 
 export default function WYMDCarouselExample() {
   return (
     <>
       <ExampleContainer>
-        <h2 style={{textAlign: 'center'}}>
-            All fields supplied, autoplay on, default padding:
+        <h2 style={{ textAlign: 'center' }}>
+          All fields supplied, autoplay on, default padding:
         </h2>
-        <WYMDCarousel data={carouselItemsComplete}/>
+        <WYMDCarousel data={carouselItemsComplete} />
       </ExampleContainer>
 
       <ExampleContainer>
-        <h2 style={{textAlign: 'center'}}>
-            All fields supplied, autoplay on, custom padding:
+        <h2 style={{ textAlign: 'center' }}>
+          All fields supplied, autoplay on, custom padding:
         </h2>
-        <WYMDCarousel data={carouselItemsCompleteWithPadding}/>
+        <WYMDCarousel data={carouselItemsCompleteWithPadding} />
       </ExampleContainer>
 
       <ExampleContainer>
-        <h2 style={{textAlign: 'center'}}>
-            All REQUIRED fields supplied (nodes 1-4), various incomplete nodes, node 11 complete, autoplay off:
+        <h2 style={{ textAlign: 'center' }}>
+          All REQUIRED fields supplied (nodes 1-4), various incomplete nodes,
+          node 11 complete, autoplay off:
         </h2>
-        <WYMDCarousel data={carouselItemsIncomplete}/>
+        <WYMDCarousel data={carouselItemsIncomplete} />
       </ExampleContainer>
 
       <ExampleContainer>
-        <h2 style={{textAlign: 'center'}}>
-            All REQUIRED fields supplied (nodes 1-4), autoplay off:
+        <h2 style={{ textAlign: 'center' }}>
+          All REQUIRED fields supplied (nodes 1-4), autoplay off:
         </h2>
-        <WYMDCarousel data={carouselItemsMinimal}/>
+        <WYMDCarousel data={carouselItemsMinimal} />
       </ExampleContainer>
     </>
   );