@treely/strapi-slices 5.3.0 → 5.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "5.3.0",
+  "version": "5.3.2",
   "license": "MIT",
   "author": "Tree.ly GmbH",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",

package/src/slices/FullWidthImageSlider/FullWidthImageSlider.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import {
   Box,
   IconButton,
@@ -16,7 +16,6 @@ import strapiMediaUrl from '../../utils/strapiMediaUrl';
 import FullScreenImage from '../../components/FullScreenImage';
 import { BREAKPOINT_MD_QUERY } from '../../constants/breakpoints';
 import {
-  ButtonsContainer,
   ItemContainer,
   SliderContainer,
   SliderInnerContainer,
@@ -33,6 +32,10 @@ export interface FullWidthImageSliderProps {
     }[];
   };
 }
+
+const ITEM_GAP = 24;
+const MAX_OFFSET_RIGHT = 162;
+
 export const FullWidthImageSlider: React.FC<FullWidthImageSliderProps> = ({
   slice,
 }: FullWidthImageSliderProps) => {
@@ -44,9 +47,34 @@ export const FullWidthImageSlider: React.FC<FullWidthImageSliderProps> = ({
   const [sliderIndex, setSliderIndex] = useState(0);
   const [isOpen, setIsOpen] = useState(false);
 
-  const allowScroll = windowWidth / 2 / imageWidth < slice.images.length;
-  const canMoveRight = sliderIndex < slice.images.length - 1;
-  const canMoveLeft = sliderIndex !== 0;
+  const numberOfItems = useMemo(
+    () => slice.images.length,
+    [slice.images.length]
+  );
+
+  const sliderItemsWidth = useMemo(
+    () => numberOfItems * (imageWidth + ITEM_GAP) - ITEM_GAP,
+    [imageWidth, numberOfItems]
+  );
+
+  const offsetLeft = useMemo(
+    () => sliderIndex * (imageWidth + ITEM_GAP) * -1,
+    [sliderIndex, imageWidth]
+  );
+
+  const allowScroll = useMemo(
+    () => sliderItemsWidth + ITEM_GAP * 3 > windowWidth,
+
+    [sliderItemsWidth, windowWidth]
+  );
+
+  const canMoveRight = useMemo(() => {
+    const offsetRight = windowWidth - (sliderItemsWidth + offsetLeft);
+
+    return offsetRight < MAX_OFFSET_RIGHT;
+  }, [imageWidth, sliderIndex, sliderItemsWidth, windowWidth]);
+
+  const canMoveLeft = useMemo(() => sliderIndex !== 0, [sliderIndex]);
 
   return (
     <DefaultSectionContainer>
@@ -97,7 +125,17 @@ export const FullWidthImageSlider: React.FC<FullWidthImageSliderProps> = ({
         </SliderInnerContainer>
       </SliderContainer>
 
-      <ButtonsContainer show={(allowScroll && !isOpen).toString()}>
+      <Box
+        display={['none', null, null, !!allowScroll ? 'flex' : 'none']}
+        pointerEvents="none"
+        position="absolute"
+        top="calc(50% - var(--boemly-sizes-12))"
+        left="0"
+        width="full"
+        py="0"
+        px="32"
+        justifyContent="space-between"
+      >
         <Box>
           <AnimatePresence>
             {canMoveLeft && (
@@ -136,7 +174,7 @@ export const FullWidthImageSlider: React.FC<FullWidthImageSliderProps> = ({
             )}
           </AnimatePresence>
         </Box>
-      </ButtonsContainer>
+      </Box>
 
       <FullScreenImage
         images={slice.images.map((image) => image.img)}

package/src/slices/FullWidthImageSlider/styles.ts

@@ -25,27 +25,6 @@ export const SliderContainer = styled(Box)`
   }
 `;
 
-interface ButtonsContainerProps {
-  show: string;
-}
-export const ButtonsContainer = styled(Box)<ButtonsContainerProps>`
-  display: ${({ show }: ButtonsContainerProps) => (show ? 'flex' : 'none')};
-  pointer-events: none;
-
-  // Place at 50% of height of tallest image minus size of button
-  position: absolute;
-  top: calc(50% - var(--boemly-sizes-12));
-  left: 0;
-  width: var(--boemly-sizes-full);
-
-  padding: 0 var(--boemly-sizes-32);
-  justify-content: space-between;
-
-  @media screen and (max-width: ${BREAKPOINT_MD}) {
-    display: none;
-  }
-`;
-
 interface SliderInnerContainerProps {
   imageCount: number;
 }

package/src/slices/TextCarousel/TextCarousel.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext, useMemo, useRef, useState } from 'react';
 import {
   Box,
   Center,
@@ -33,22 +33,49 @@ export interface TextCarouselProps {
   slice: TextCarouselSlice;
 }
 
+const ITEM_GAP = 24;
+const MAX_OFFSET_RIGHT = 55;
+
 export const TextCarousel: React.FC<TextCarouselProps> = ({
   slice,
 }: TextCarouselProps) => {
+  const containerRef = useRef(null);
   const [primary50] = useToken('colors', ['primary.50']);
-  const [slideRef, { width: slideWidth }] = useMeasure<HTMLDivElement>();
+  const [itemRef, { width: itemWidth }] = useMeasure<HTMLDivElement>();
   const { formatMessage } = useContext(IntlContext);
-
-  const containerRef = useRef(null);
-
   const { width: windowWidth } = useWindowSize();
 
   const [sliderIndex, setSliderIndex] = useState(0);
 
-  const allowScroll = windowWidth / 2 / slideWidth < slice.slides.length;
-  const canMoveRight = sliderIndex < slice.slides.length - 1;
-  const canMoveLeft = sliderIndex !== 0;
+  const numberOfItems = useMemo(
+    () => slice.slides.length,
+    [slice.slides.length]
+  );
+
+  const sliderItemsWidth = useMemo(
+    () => numberOfItems * (itemWidth + ITEM_GAP) - ITEM_GAP,
+    [itemWidth, numberOfItems]
+  );
+
+  const offsetLeft = useMemo(
+    () => sliderIndex * (itemWidth + ITEM_GAP) * -1,
+    [sliderIndex, itemWidth]
+  );
+
+  const allowScroll = useMemo(
+    () => sliderItemsWidth + ITEM_GAP * 2 > windowWidth,
+
+    [sliderItemsWidth, windowWidth]
+  );
+
+  const canMoveRight = useMemo(() => {
+    const offsetRight = windowWidth - (sliderItemsWidth + offsetLeft);
+
+    return offsetRight < MAX_OFFSET_RIGHT;
+  }, [itemWidth, sliderIndex, sliderItemsWidth, windowWidth]);
+
+  const canMoveLeft = useMemo(() => sliderIndex !== 0, [sliderIndex]);
+
   return (
     <DefaultSectionContainer backgroundColor={primary50} title={slice.title}>
       <Wrapper>
@@ -65,9 +92,9 @@ export const TextCarousel: React.FC<TextCarouselProps> = ({
       <CarouselContainer ref={containerRef}>
         <Box position="relative" width="full">
           <CarouselInnerContainer
-            numberofitems={slice.slides.length}
+            numberOfItems={slice.slides.length}
             animate={{
-              x: slideWidth * -sliderIndex,
+              x: offsetLeft,
             }}
             transition={{
               duration: 0.3,
@@ -75,11 +102,7 @@ export const TextCarousel: React.FC<TextCarouselProps> = ({
             }}
           >
             {slice.slides.map(({ id, title, text, icon }) => (
-              <CardContainer
-                key={id}
-                ref={slideRef}
-                numberofitems={slice.slides.length}
-              >
+              <CardContainer key={id} ref={itemRef}>
                 <TextCardWithIcon
                   title={title}
                   text={text}

package/src/slices/TextCarousel/styles.ts

@@ -9,10 +9,10 @@ export const CarouselContainer = styled(Box)`
 
   @media screen and (max-width: ${BREAKPOINT_MD}) {
     margin-top: var(--boemly-space-4);
-    width: var(--boemly-size-full);
+    width: var(--boemly-sizes-full);
   }
 
-  width: var(--boemly-size-full);
+  width: var(--boemly-sizes-full);
 
   overflow-x: hidden;
 
@@ -22,17 +22,19 @@ export const CarouselContainer = styled(Box)`
 `;
 
 interface CarouselInnerContainerProps {
-  numberofitems: number;
+  numberOfItems: number;
 }
 export const CarouselInnerContainer = styled(
   motion.div
 )<CarouselInnerContainerProps>`
   display: flex;
+  gap: var(--boemly-space-6);
   justify-content: center;
+
   width: calc(
-    (var(--boemly-sizes-sm) + var(--boemly-space-16)) *
-      ${({ numberofitems }: CarouselInnerContainerProps) => numberofitems} +
-      var(--boemly-space-16)
+    (var(--boemly-sizes-sm) + var(--boemly-space-6)) *
+      ${({ numberOfItems }: CarouselInnerContainerProps) => numberOfItems} +
+      var(--boemly-space-6)
   );
   min-width: var(--boemly-sizes-full);
 
@@ -40,24 +42,14 @@ export const CarouselInnerContainer = styled(
     justify-content: flex-start;
     width: calc(
       (var(--boemly-sizes-2xs) + var(--boemly-space-4)) *
-        ${({ numberofitems }: CarouselInnerContainerProps) => numberofitems} +
+        ${({ numberOfItems }: CarouselInnerContainerProps) => numberOfItems} +
         var(--boemly-space-6)
     );
   }
 `;
 
-interface CardContainerProps {
-  numberofitems: number;
-}
-export const CardContainer = styled(Box)<CardContainerProps>`
-  width: ${({ numberofitems }: CardContainerProps) =>
-    numberofitems === 3 ? 'var(--boemly-sizes-xl)' : 'var(--boemly-sizes-sm)'};
-
-  margin-right: var(--boemly-space-6);
-
-  &:first-of-type {
-    margin-left: var(--boemly-space-6);
-  }
+export const CardContainer = styled(Box)`
+  width: var(--boemly-sizes-sm);
 
   @media screen and (max-width: ${BREAKPOINT_MD}) {
     width: var(--boemly-sizes-2xs);