feat: enable shuffle cards feature

src/slices/TextCarousel/TextCarousel.stories.tsx

@@ -47,6 +47,15 @@ Minimal.args = {
   },
 };
 
+export const WithShuffledCards = Template.bind({});
+WithShuffledCards.args = {
+  slice: {
+    title: 'Title',
+    slides,
+    isShuffled: true,
+  },
+};
+
 export const WithTagline = Template.bind({});
 WithTagline.args = {
   slice: {

src/slices/TextCarousel/TextCarousel.tsx

@@ -26,10 +26,12 @@ import { ArrowLeft, ArrowRight } from '@phosphor-icons/react';
 import { IntlContext } from '../../components/ContextProvider';
 import strapiLinkUrl from '../../utils/strapiLinkUrl';
 import { useRouter } from 'next/router';
+import shuffleElements from '../../utils/shuffleElements';
 
 interface TextCarouselSlice extends StrapiDefaultHeader {
   slides: StrapiTextCardWithIcon[];
   button?: StrapiLink;
+  isShuffled?: boolean;
 }
 export interface TextCarouselProps {
   slice: TextCarouselSlice;
@@ -78,6 +80,12 @@ export const TextCarousel: React.FC<TextCarouselProps> = ({
   }, [itemWidth, sliderIndex, sliderItemsWidth, windowWidth]);
 
   const canMoveLeft = useMemo(() => sliderIndex !== 0, [sliderIndex]);
+  const shuffleSlides = useMemo(
+    () => shuffleElements(slice.slides),
+    [slice.slides]
+  );
+  const { slides, isShuffled = false } = slice;
+  const displaySlides = isShuffled ? shuffleSlides : slides;
 
   return (
     <DefaultSectionContainer backgroundColor={primary50} title={slice.title}>
@@ -104,7 +112,7 @@ export const TextCarousel: React.FC<TextCarouselProps> = ({
               ease: 'easeInOut',
             }}
           >
-            {slice.slides.map(({ id, title, text, icon, image, button }) => (
+            {displaySlides.map(({ id, title, text, icon, image, button }) => (
               <CardContainer key={id} ref={itemRef}>
                 <TextCardWithIcon
                   title={title}

src/utils/shuffleElements.test.ts

@@ -0,0 +1,30 @@
+import shuffleElements from './shuffleElements';
+
+const originalSlides = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
+
+describe('shuffleElement', () => {
+  it('returns a new array with the same elements but in a different order', () => {
+    const shuffled = shuffleElements(originalSlides);
+
+    // Check that the shuffled array is not the same reference as the original
+    expect(shuffled).not.toBe(originalSlides);
+
+    // Check that the shuffled array has the same elements as the original
+    expect(shuffled).toEqual(expect.arrayContaining(originalSlides));
+    expect(originalSlides).toEqual(expect.arrayContaining(shuffled));
+
+    // Verify that at least one element is in a different position to ensure it's shuffled
+    const isShuffled = originalSlides.some(
+      (slide, index) => slide.id !== shuffled[index].id
+    );
+    expect(isShuffled).toBe(true);
+  });
+
+  it('does not mutate the original array', () => {
+    const originalSlidesCopy = [...originalSlides];
+    shuffleElements(originalSlides);
+
+    // Verify that the original array remains unchanged
+    expect(originalSlides).toEqual(originalSlidesCopy);
+  });
+});

src/utils/shuffleElements.ts

@@ -0,0 +1,10 @@
+const shuffleElements = (slides: any[]) => {
+  const slidesCopy = [...slides]; // Create a copy to avoid mutating the original array
+  for (let i = slidesCopy.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [slidesCopy[i], slidesCopy[j]] = [slidesCopy[j], slidesCopy[i]];
+  }
+  return slidesCopy;
+};
+
+export default shuffleElements;