@treely/strapi-slices 5.2.0 → 5.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "5.2.0",
+  "version": "5.2.2",
   "license": "MIT",
   "author": "Tree.ly GmbH",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",
@@ -126,7 +126,7 @@
   "dependencies": {
     "@phosphor-icons/react": "^2.0.15",
     "adblock-detect-react": "^1.1.0",
-    "boemly": "^5.7.2",
+    "boemly": "^5.7.3",
     "formik": "^2.4.5",
     "framer-motion": "^10.16.5",
     "mapbox-gl": "^2.15.0"

package/src/rootMessages.de.ts

@@ -11,6 +11,7 @@ import portfolioProjectInfoMessagesDe from './components/portfolio/ProjectInfo/m
 import portfolioProjectCardMessagesDe from './components/portfolio/PortfolioProjectCard/messages.de';
 import portfolioSmallCheckoutMessagesDe from './components/portfolio/SmallCheckout/messages.de';
 import shopCheckoutMessagesDe from './slices/ShopCheckout/messages.de';
+import textCarouselMessagesDe from './slices/TextCarousel/messages.de';
 import timelineMessagesDe from './slices/Timeline/messages.de';
 
 import unitMessagesDe from './unit.messages.de';
@@ -36,6 +37,7 @@ const rootMessagesDe = {
   ...projectFactsMessagesDe,
   ...projectsMapMessagesDe,
   ...shopCheckoutMessagesDe,
+  ...textCarouselMessagesDe,
   ...timelineMessagesDe,
 
   //

package/src/rootMessages.en.ts

@@ -11,6 +11,7 @@ import portfolioProjectInfoMessagesEn from './components/portfolio/ProjectInfo/m
 import portfolioProjectCardMessagesEn from './components/portfolio/PortfolioProjectCard/messages.en';
 import portfolioSmallCheckoutMessagesEn from './components/portfolio/SmallCheckout/messages.en';
 import shopCheckoutMessagesEn from './slices/ShopCheckout/messages.en';
+import textCarouselMessagesEn from './slices/TextCarousel/messages.en';
 import timelineMessagesEn from './slices/Timeline/messages.en';
 
 import unitMessagesEn from './unit.messages.en';
@@ -36,6 +37,7 @@ const rootMessagesEn = {
   ...projectFactsMessagesEn,
   ...projectsMapMessagesEn,
   ...shopCheckoutMessagesEn,
+  ...textCarouselMessagesEn,
   ...timelineMessagesEn,
 
   //

package/src/slices/Cta/Cta.tsx

@@ -187,6 +187,7 @@ export const Cta: React.FC<CtaProps> = ({ slice }: CtaProps) => {
   return (
     <DefaultSectionContainer
       backgroundColor={VARIANTS[slice.variant].backgroundColor.left}
+      title={slice.title}
     >
       <Wrapper>
         {slice.title ? (

package/src/slices/CustomerStories/CustomerStories.stories.tsx

@@ -47,6 +47,7 @@ WithMultipleCards.args = {
       strapiCustomerStoryMock,
       strapiCustomerStoryWithCustomerQuoteCardMock,
       strapiCustomerStoryWithLogoCardMock,
+      strapiCustomerStoryWithLogoCardMock,
       strapiCustomerStoryMock,
       strapiCustomerStoryWithCustomerQuoteCardMock,
     ],
@@ -55,6 +56,7 @@ WithMultipleCards.args = {
     strapiCustomerStoryMock,
     strapiCustomerStoryWithCustomerQuoteCardMock,
     strapiCustomerStoryWithLogoCardMock,
+    strapiCustomerStoryWithLogoCardMock,
     strapiCustomerStoryMock,
     strapiCustomerStoryWithCustomerQuoteCardMock,
   ],

package/src/slices/IconGrid/IconGrid.tsx

@@ -53,9 +53,9 @@ export const IconGrid: React.FC<IconGridProps> = ({ slice }: IconGridProps) => (
       )}
 
       <SimpleGrid
-        columns={[1, null, null, 2]}
-        gap="32"
-        rowGap={['16', null, null, '28']}
+        columns={[1, null, null, 2, 3]}
+        gap="16"
+        rowGap={['16', null, null, '20']}
       >
         {slice.iconsWithTextAndButton.map((iconWithTextAndButton) => (
           <Box key={iconWithTextAndButton.id}>

package/src/slices/TextCarousel/TextCarousel.tsx

@@ -1,8 +1,10 @@
-import React, { useRef } from 'react';
+import React, { useContext, useRef, useState } from 'react';
 import {
+  Box,
   Center,
   DefaultSectionContainer,
   DefaultSectionHeader,
+  IconButton,
   TextCardWithIcon,
   useToken,
   Wrapper,
@@ -18,6 +20,10 @@ import {
   CarouselContainer,
   CarouselInnerContainer,
 } from './styles';
+import { useMeasure, useWindowSize } from 'react-use';
+import { AnimatePresence, motion } from 'framer-motion';
+import { ArrowLeft, ArrowRight } from '@phosphor-icons/react';
+import { IntlContext } from '../../components/ContextProvider';
 
 interface TextCarouselSlice extends StrapiDefaultHeader {
   slides: StrapiTextCardWithIcon[];
@@ -31,9 +37,18 @@ export const TextCarousel: React.FC<TextCarouselProps> = ({
   slice,
 }: TextCarouselProps) => {
   const [primary50] = useToken('colors', ['primary.50']);
+  const [slideRef, { width: slideWidth }] = 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;
   return (
     <DefaultSectionContainer backgroundColor={primary50} title={slice.title}>
       <Wrapper>
@@ -48,29 +63,96 @@ export const TextCarousel: React.FC<TextCarouselProps> = ({
       </Wrapper>
 
       <CarouselContainer ref={containerRef}>
-        <CarouselInnerContainer
-          drag="x"
-          dragConstraints={containerRef}
-          numberofitems={slice.slides.length}
-        >
-          {slice.slides.map(({ id, title, text, icon }) => (
-            <CardContainer key={id} numberofitems={slice.slides.length}>
-              <TextCardWithIcon
-                title={title}
-                text={text}
-                icon={
-                  <Image
-                    src={strapiMediaUrl(icon.img, 'small')}
-                    alt={icon.alt}
-                    fill
-                    style={{ objectFit: icon.objectFit || 'contain' }}
+        <Box position="relative" width="full">
+          <CarouselInnerContainer
+            numberofitems={slice.slides.length}
+            animate={{
+              x: slideWidth * -sliderIndex,
+            }}
+            transition={{
+              duration: 0.3,
+              ease: 'easeInOut',
+            }}
+          >
+            {slice.slides.map(({ id, title, text, icon }) => (
+              <CardContainer
+                key={id}
+                ref={slideRef}
+                numberofitems={slice.slides.length}
+              >
+                <TextCardWithIcon
+                  title={title}
+                  text={text}
+                  icon={
+                    <Image
+                      src={strapiMediaUrl(icon.img, 'small')}
+                      alt={icon.alt}
+                      fill
+                      style={{ objectFit: icon.objectFit || 'contain' }}
+                    />
+                  }
+                  displayAs="column"
+                />
+              </CardContainer>
+            ))}
+          </CarouselInnerContainer>
+          <Box
+            display={['none', null, null, !!allowScroll ? 'flex' : 'none']}
+            pointerEvents="none"
+            position="absolute"
+            top="40%"
+            left="0"
+            width="full"
+            py="0"
+            px="32"
+            justifyContent="space-between"
+          >
+            <Box>
+              <AnimatePresence>
+                {canMoveLeft && (
+                  <IconButton
+                    key="leftButton"
+                    as={motion.button}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    size="lg"
+                    variant="outline"
+                    onClick={() => setSliderIndex(sliderIndex - 1)}
+                    aria-label={formatMessage({
+                      id: 'sections.textCarousel.moveLeft',
+                    })}
+                    icon={<ArrowLeft size={16} />}
+                    pointerEvents="auto"
+                    boxShadow="sm"
                   />
-                }
-                displayAs="column"
-              />
-            </CardContainer>
-          ))}
-        </CarouselInnerContainer>
+                )}
+              </AnimatePresence>
+            </Box>
+            <Box>
+              <AnimatePresence>
+                {canMoveRight && (
+                  <IconButton
+                    key="rightButton"
+                    as={motion.button}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    size="lg"
+                    variant="outline"
+                    onClick={() => setSliderIndex(sliderIndex + 1)}
+                    aria-label={formatMessage({
+                      id: 'sections.textCarousel.moveRight',
+                    })}
+                    icon={<ArrowRight size={16} />}
+                    pointerEvents="auto"
+                    boxShadow="md"
+                  />
+                )}
+              </AnimatePresence>
+            </Box>
+          </Box>
+        </Box>
       </CarouselContainer>
 
       <>

package/src/slices/TextCarousel/messages.de.ts

@@ -0,0 +1,5 @@
+const messagesDe = {
+  'sections.textCarousel.moveRight': 'Nach rechts bewegen',
+  'sections.textCarousel.moveLeft': 'Nach links bewegen',
+};
+export default messagesDe;

package/src/slices/TextCarousel/messages.en.ts

@@ -0,0 +1,5 @@
+const messagesDe = {
+  'sections.textCarousel.moveRight': 'Move right',
+  'sections.textCarousel.moveLeft': 'Move left',
+};
+export default messagesDe;

package/src/slices/TextCarousel/styles.ts

@@ -4,18 +4,20 @@ import { BREAKPOINT_MD } from '../../constants/breakpoints';
 import { Box } from 'boemly';
 
 export const CarouselContainer = styled(Box)`
-  overflow-x: scroll;
-
   margin-top: var(--boemly-space-6);
   padding: var(--boemly-space-8) 0;
 
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
   @media screen and (max-width: ${BREAKPOINT_MD}) {
     margin-top: var(--boemly-space-4);
+    width: var(--boemly-size-full);
+  }
+
+  width: var(--boemly-size-full);
+
+  overflow-x: hidden;
+
+  @media screen and (max-width: ${BREAKPOINT_MD}) {
+    overflow-x: scroll;
   }
 `;
 
@@ -35,8 +37,9 @@ export const CarouselInnerContainer = styled(
   min-width: var(--boemly-sizes-full);
 
   @media screen and (max-width: ${BREAKPOINT_MD}) {
+    justify-content: flex-start;
     width: calc(
-      (var(--boemly-sizes-xs) + var(--boemly-space-4)) *
+      (var(--boemly-sizes-2xs) + var(--boemly-space-4)) *
         ${({ numberofitems }: CarouselInnerContainerProps) => numberofitems} +
         var(--boemly-space-6)
     );
@@ -50,14 +53,14 @@ export const CardContainer = styled(Box)<CardContainerProps>`
   width: ${({ numberofitems }: CardContainerProps) =>
     numberofitems === 3 ? 'var(--boemly-sizes-xl)' : 'var(--boemly-sizes-sm)'};
 
-  margin-right: var(--boemly-space-16);
+  margin-right: var(--boemly-space-6);
 
   &:first-of-type {
-    margin-left: var(--boemly-space-16);
+    margin-left: var(--boemly-space-6);
   }
 
   @media screen and (max-width: ${BREAKPOINT_MD}) {
-    width: var(--boemly-sizes-xs);
+    width: var(--boemly-sizes-2xs);
 
     margin-right: var(--boemly-space-4);
 

package/src/test/strapiMocks/strapiCustomerStory.ts

@@ -24,6 +24,7 @@ export const strapiCustomerStoryMock: IStrapiData<StrapiCustomerStory> = {
       id: 1,
       alt: 'Icon alt text',
       img: { data: storybookStrapiTreeIconMock },
+      objectFit: 'contain',
     },
     img: {
       id: 1,