feat: update text-carousel

treely · Oct 24, 2024 · 7bf51b8 · 7bf51b8
1 parent 5a42aad
commit 7bf51b8
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 57 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -134,7 +134,7 @@
     "adblock-detect-react": "^1.1.0",
     "axios": "^1.7.2",
     "axios-cache-interceptor": "^1.5.3",
-    "boemly": "^5.13.0",
+    "boemly": "^6.2.1",
     "formik": "^2.4.5",
     "framer-motion": "^10.16.5",
     "mapbox-gl": "^2.15.0"

diff --git a/src/models/strapi/StrapiTextCardWithIcons.ts b/src/models/strapi/StrapiTextCardWithIcons.ts
@@ -1,10 +1,13 @@
 import StrapiImage from './StrapiImage';
+import StrapiLink from './StrapiLink';
 
 interface StrapiTextCardWithIcon {
   id: number;
   title: string;
   text: string;
   icon: StrapiImage;
+  button?: StrapiLink;
+  image?: StrapiImage;
 }
 
 export default StrapiTextCardWithIcon;
diff --git a/src/slices/TextCarousel/TextCarousel.stories.tsx b/src/slices/TextCarousel/TextCarousel.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 
-import { storybookStrapiTreeIconMock } from '../../test/storybookMocks/storybookStrapiMedia';
+import { storybookStrapiCoverMock } from '../../test/storybookMocks/storybookStrapiMedia';
 import TextCarousel from '.';
 
 export default {
@@ -13,57 +13,30 @@ const Template: StoryFn<typeof TextCarousel> = (args) => (
   <TextCarousel {...args} />
 );
 
-const slides = [
-  {
+const button = { id: 1, text: 'Button', url: 'https://tree.ly' };
+const image = {
+  id: 1,
+  img: { data: storybookStrapiCoverMock },
+  alt: 'Project Thumbnail',
+};
+
+const slide = {
+  id: 1,
+  title: 'Title 1',
+  text: 'Text 1',
+  icon: {
     id: 1,
-    title: 'Title 1',
-    text: 'Text 1',
-    icon: {
-      id: 1,
-      alt: 'Icon alt text',
-      img: { data: storybookStrapiTreeIconMock },
-    },
-  },
-  {
-    id: 2,
-    title: 'Title 2',
-    text: 'Text 2',
-    icon: {
-      id: 1,
-      alt: 'Icon alt text',
-      img: { data: storybookStrapiTreeIconMock },
-    },
-  },
-  {
-    id: 3,
-    title: 'Title 3',
-    text: 'Text 3',
-    icon: {
-      id: 1,
-      alt: 'Icon alt text',
-      img: { data: storybookStrapiTreeIconMock },
-    },
-  },
-  {
-    id: 4,
-    title: 'Title 4',
-    text: 'Text 4',
-    icon: {
-      id: 1,
-      alt: 'Icon alt text',
-      img: { data: storybookStrapiTreeIconMock },
-    },
-  },
-  {
-    id: 5,
-    title: 'Title 5',
-    text: 'Text 5',
-    icon: {
-      id: 1,
-      alt: 'Icon alt text',
-      img: { data: storybookStrapiTreeIconMock },
-    },
+    alt: 'Icon alt text',
+    img: { data: storybookStrapiCoverMock },
   },
+};
+
+const slides = [
+  slide,
+  { ...slide, id: 2, title: 'Title 2', text: 'Text 2' },
+  { ...slide, id: 3, title: 'Title 3', text: 'Text 3' },
+  { ...slide, id: 4, title: 'Title 4', text: 'Text 4' },
+  { ...slide, id: 5, title: 'Title 5', text: 'Text 5' },
 ];
 
 export const Minimal = Template.bind({});
@@ -100,6 +73,48 @@ WithButton.args = {
     title: 'Title',
     text: 'Text',
     slides,
-    button: { id: 1, text: 'Button', url: 'https://tree.ly' },
+    button,
+  },
+};
+
+export const FullProps = Template.bind({});
+FullProps.args = {
+  slice: {
+    tagline: 'Tagline',
+    title: 'Title',
+    text: 'Text',
+    slides: [
+      {
+        ...slide,
+        id: 1,
+        button,
+        image,
+      },
+      {
+        ...slide,
+        id: 2,
+        button,
+        image,
+      },
+      {
+        ...slide,
+        id: 3,
+        button,
+        image,
+      },
+      {
+        ...slide,
+        id: 4,
+        button,
+        image,
+      },
+      {
+        ...slide,
+        id: 5,
+        button,
+        image,
+      },
+    ],
+    button,
   },
 };
diff --git a/src/slices/TextCarousel/TextCarousel.test.tsx b/src/slices/TextCarousel/TextCarousel.test.tsx
@@ -88,4 +88,47 @@ describe('The TextCarousel component', () => {
 
     expect(screen.getByRole('link')).toHaveTextContent('Link text');
   });
+
+  it('displays the text card button if a button is in the slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        slides: [
+          {
+            ...defaultProps.slice.slides[0],
+            button: {
+              id: 1,
+              text: 'Text Card Button',
+              page: strapiLinkPageMock,
+            },
+          },
+        ],
+      },
+    });
+
+    expect(screen.getByRole('button')).toHaveTextContent('Text Card Button');
+  });
+
+  it('displays the image if an image is in the slice', () => {
+    setup({
+      slice: {
+        ...defaultProps.slice,
+        slides: [
+          {
+            ...defaultProps.slice.slides[0],
+            image: {
+              id: 1,
+              alt: 'Alt image text',
+              img: { data: strapiMediaMock },
+            },
+          },
+        ],
+      },
+    });
+
+    expect(screen.getAllByRole('img')[0]).toHaveAttribute(
+      'alt',
+      'Alt image text'
+    );
+  });
 });
diff --git a/src/slices/TextCarousel/TextCarousel.tsx b/src/slices/TextCarousel/TextCarousel.tsx
@@ -24,6 +24,8 @@ import { useMeasure, useWindowSize } from 'react-use';
 import { AnimatePresence, motion } from 'framer-motion';
 import { ArrowLeft, ArrowRight } from '@phosphor-icons/react';
 import { IntlContext } from '../../components/ContextProvider';
+import strapiLinkUrl from '../../utils/strapiLinkUrl';
+import { useRouter } from 'next/router';
 
 interface TextCarouselSlice extends StrapiDefaultHeader {
   slides: StrapiTextCardWithIcon[];
@@ -44,6 +46,7 @@ export const TextCarousel: React.FC<TextCarouselProps> = ({
   const [itemRef, { width: itemWidth }] = useMeasure<HTMLDivElement>();
   const { formatMessage } = useContext(IntlContext);
   const { width: windowWidth } = useWindowSize();
+  const { push } = useRouter();
 
   const [sliderIndex, setSliderIndex] = useState(0);
 
@@ -101,7 +104,7 @@ export const TextCarousel: React.FC<TextCarouselProps> = ({
               ease: 'easeInOut',
             }}
           >
-            {slice.slides.map(({ id, title, text, icon }) => (
+            {slice.slides.map(({ id, title, text, icon, image, button }) => (
               <CardContainer key={id} ref={itemRef}>
                 <TextCardWithIcon
                   title={title}
@@ -115,6 +118,25 @@ export const TextCarousel: React.FC<TextCarouselProps> = ({
                       style={{ objectFit: icon.objectFit || 'contain' }}
                     />
                   }
+                  image={
+                    image && (
+                      <Image
+                        src={strapiMediaUrl(image?.img, 'medium')}
+                        alt={image?.alt}
+                        fill
+                        style={{
+                          objectFit: image?.objectFit || 'cover',
+                          borderRadius: 'var(--boemly-radii-xl)',
+                        }}
+                      />
+                    )
+                  }
+                  button={
+                    button && {
+                      text: button.text,
+                      onClick: () => push(strapiLinkUrl(button)),
+                    }
+                  }
                   displayAs="column"
                 />
               </CardContainer>