@faststore/ui 1.12.20 → 1.12.32

package/src/molecules/Carousel/Carousel.test.tsx

@@ -24,7 +24,7 @@ describe('Carousel component', () => {
     expect(carouselSection).toHaveAttribute('data-fs-carousel')
   })
 
-  it('should have `data-carousel-track-container` and `data-carousel-track` attributes', () => {
+  it('should have `data-fs-carousel-track-container` and `data-fs-carousel-track` attributes', () => {
     const { getByTestId } = render(
       <Carousel>
         <div>Slide 1</div>
@@ -38,10 +38,10 @@ describe('Carousel component', () => {
     const carouselSection = getByTestId('store-carousel')
 
     const trackContainer = carouselSection.querySelectorAll(
-      '[data-carousel-track-container]'
+      '[data-fs-carousel-track-container]'
     )
 
-    const track = carouselSection.querySelectorAll('[data-carousel-track]')
+    const track = carouselSection.querySelectorAll('[data-fs-carousel-track]')
 
     expect(trackContainer).toHaveLength(1)
     expect(trackContainer[0]).toBeInTheDocument()
@@ -50,7 +50,7 @@ describe('Carousel component', () => {
     expect(track[0]).toBeInTheDocument()
   })
 
-  it('should have `data-carousel-controls` and `data-carousel-bullets` attributes', () => {
+  it('should have `data-fs-carousel-controls` and `data-fs-carousel-bullets` attributes', () => {
     const { getByTestId } = render(
       <Carousel>
         <div>Slide 1</div>
@@ -62,11 +62,11 @@ describe('Carousel component', () => {
     const carouselSection = getByTestId('store-carousel')
 
     const controls = carouselSection.querySelectorAll(
-      '[data-carousel-controls]'
+      '[data-fs-carousel-controls]'
     )
 
     const bulletsContainer = carouselSection.querySelectorAll(
-      '[data-carousel-bullets]'
+      '[data-fs-carousel-bullets]'
     )
 
     expect(controls).toHaveLength(1)
@@ -76,7 +76,7 @@ describe('Carousel component', () => {
     expect(bulletsContainer[0]).toBeInTheDocument()
   })
 
-  it('should render 5 slides with `data-carousel-item` attributes', () => {
+  it('should render 5 slides with `data-fs-carousel-item` attributes', () => {
     const { getByTestId } = render(
       <Carousel infiniteMode={false}>
         <div>Slide 1</div>
@@ -88,12 +88,12 @@ describe('Carousel component', () => {
     )
 
     const carouselSection = getByTestId('store-carousel')
-    const items = carouselSection.querySelectorAll('[data-carousel-item]')
+    const items = carouselSection.querySelectorAll('[data-fs-carousel-item]')
 
     expect(items).toHaveLength(5)
   })
 
-  it('should add `data-visible` attribute to currently visible carousel items', () => {
+  it('should add `data-fs-carousel-item-visible` attribute to currently visible carousel items', () => {
     const { getByTestId } = render(
       <Carousel>
         <div>Slide 1</div>
@@ -106,18 +106,18 @@ describe('Carousel component', () => {
 
     const carouselSection = getByTestId('store-carousel')
 
-    const items = carouselSection.querySelectorAll('[data-carousel-item]')
+    const items = carouselSection.querySelectorAll('[data-fs-carousel-item]')
 
     expect(items).toHaveLength(7)
 
-    // Only the first item should have `data-visible` attributes
-    expect(items[0]).not.toHaveAttribute('data-visible')
-    expect(items[1]).toHaveAttribute('data-visible')
-    expect(items[2]).not.toHaveAttribute('data-visible')
-    expect(items[3]).not.toHaveAttribute('data-visible')
-    expect(items[4]).not.toHaveAttribute('data-visible')
-    expect(items[5]).not.toHaveAttribute('data-visible')
-    expect(items[6]).not.toHaveAttribute('data-visible')
+    // Only the first item should have `data-fs-carousel-item-visible` attributes
+    expect(items[0]).not.toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[1]).toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[2]).not.toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[3]).not.toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[4]).not.toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[5]).not.toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[6]).not.toHaveAttribute('data-fs-carousel-item-visible')
   })
 
   it('should allow users to navigate through pages using the `Arrows` controls', async () => {
@@ -140,7 +140,9 @@ describe('Carousel component', () => {
     const carouselSection = getByTestId('store-carousel')
     const goToNextPageButton = getByLabelText('next')
     const goToPreviousPageButton = getByLabelText('previous')
-    const carouselTrack = carouselSection.querySelector('[data-carousel-track]')
+    const carouselTrack = carouselSection.querySelector(
+      '[data-fs-carousel-track]'
+    )
 
     expect(goToNextPageButton).toBeInTheDocument()
     expect(goToPreviousPageButton).toBeInTheDocument()
@@ -150,14 +152,14 @@ describe('Carousel component', () => {
       fireEvent.click(goToNextPageButton)
     })
 
-    let items = carouselSection.querySelectorAll('[data-carousel-item]')
+    let items = carouselSection.querySelectorAll('[data-fs-carousel-item]')
 
     // Only the second item should be visible
-    expect(items[0]).not.toHaveAttribute('data-visible')
-    expect(items[1]).toHaveAttribute('data-visible')
-    expect(items[2]).not.toHaveAttribute('data-visible')
-    expect(items[3]).not.toHaveAttribute('data-visible')
-    expect(items[4]).not.toHaveAttribute('data-visible')
+    expect(items[0]).not.toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[1]).toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[2]).not.toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[3]).not.toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[4]).not.toHaveAttribute('data-fs-carousel-item-visible')
 
     // Go from page 1 back to 0
     await act(async () => {
@@ -178,14 +180,14 @@ describe('Carousel component', () => {
       fireEvent.click(goToPreviousPageButton)
     })
 
-    items = carouselSection.querySelectorAll('[data-carousel-item]')
+    items = carouselSection.querySelectorAll('[data-fs-carousel-item]')
 
     // Only the first item should be visible
-    expect(items[0]).toHaveAttribute('data-visible')
-    expect(items[1]).not.toHaveAttribute('data-visible')
-    expect(items[2]).not.toHaveAttribute('data-visible')
-    expect(items[3]).not.toHaveAttribute('data-visible')
-    expect(items[4]).not.toHaveAttribute('data-visible')
+    expect(items[0]).toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[1]).not.toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[2]).not.toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[3]).not.toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[4]).not.toHaveAttribute('data-fs-carousel-item-visible')
   })
 
   it('should allow users to navigate through pages by clicking on a pagination bullet', async () => {
@@ -206,8 +208,10 @@ describe('Carousel component', () => {
     )
 
     const carouselSection = getByTestId('store-carousel')
-    const bullets = queryAllByTestId('store-bullets-item')
-    const carouselTrack = carouselSection.querySelector('[data-carousel-track]')
+    const bullets = queryAllByTestId('store-bullets-bullet')
+    const carouselTrack = carouselSection.querySelector(
+      '[data-fs-carousel-track]'
+    )
 
     expect(bullets).toHaveLength(5)
 
@@ -217,14 +221,14 @@ describe('Carousel component', () => {
       fireEvent.click(secondPageBullet)
     })
 
-    let items = carouselSection.querySelectorAll('[data-carousel-item]')
+    let items = carouselSection.querySelectorAll('[data-fs-carousel-item]')
 
     // Only the second item should be visible
-    expect(items[0]).not.toHaveAttribute('data-visible')
-    expect(items[1]).toHaveAttribute('data-visible')
-    expect(items[2]).not.toHaveAttribute('data-visible')
-    expect(items[3]).not.toHaveAttribute('data-visible')
-    expect(items[4]).not.toHaveAttribute('data-visible')
+    expect(items[0]).not.toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[1]).toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[2]).not.toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[3]).not.toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[4]).not.toHaveAttribute('data-fs-carousel-item-visible')
 
     const thirdPageBullet = getByLabelText('Go to page 3')
 
@@ -246,14 +250,14 @@ describe('Carousel component', () => {
       fireEvent.click(thirdPageBullet)
     })
 
-    items = carouselSection.querySelectorAll('[data-carousel-item]')
+    items = carouselSection.querySelectorAll('[data-fs-carousel-item]')
 
     // Only the 3rd item should be visible
-    expect(items[0]).not.toHaveAttribute('data-visible')
-    expect(items[1]).not.toHaveAttribute('data-visible')
-    expect(items[2]).toHaveAttribute('data-visible')
-    expect(items[3]).not.toHaveAttribute('data-visible')
-    expect(items[4]).not.toHaveAttribute('data-visible')
+    expect(items[0]).not.toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[1]).not.toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[2]).toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[3]).not.toHaveAttribute('data-fs-carousel-item-visible')
+    expect(items[4]).not.toHaveAttribute('data-fs-carousel-item-visible')
   })
 
   describe('Accessibility', () => {
@@ -305,7 +309,6 @@ describe('Carousel component', () => {
       expect(getAllByRole('tablist')).toHaveLength(1)
       expect(getAllByRole('tab')).toHaveLength(3)
       expect(getAllByRole('tab', { selected: true })).toHaveLength(1)
-      expect(getAllByRole('tabpanel')).toHaveLength(3)
 
       // Check bullets aria-controls
       expect(
@@ -351,7 +354,7 @@ describe('Carousel component', () => {
           )
 
           const carouselTrack = getByTestId('store-carousel').querySelector(
-            '[data-carousel-track]'
+            '[data-fs-carousel-track]'
           ) as Element
 
           const tabs = getAllByRole('tab')
@@ -391,7 +394,7 @@ describe('Carousel component', () => {
           )
 
           const carouselTrack = getByTestId('store-carousel').querySelector(
-            '[data-carousel-track]'
+            '[data-fs-carousel-track]'
           ) as Element
 
           const tabs = getAllByRole('tab')
@@ -430,7 +433,7 @@ describe('Carousel component', () => {
           )
 
           const carouselTrack = getByTestId('store-carousel').querySelector(
-            '[data-carousel-track]'
+            '[data-fs-carousel-track]'
           ) as Element
 
           const tabs = getAllByRole('tab')
@@ -466,7 +469,7 @@ describe('Carousel component', () => {
           )
 
           const carouselTrack = getByTestId('store-carousel').querySelector(
-            '[data-carousel-track]'
+            '[data-fs-carousel-track]'
           ) as Element
 
           const tabs = getAllByRole('tab')
@@ -501,7 +504,7 @@ describe('Carousel component', () => {
           )
 
           const carouselTrack = getByTestId('store-carousel').querySelector(
-            '[data-carousel-track]'
+            '[data-fs-carousel-track]'
           ) as Element
 
           const tabs = getAllByRole('tab')
@@ -539,7 +542,7 @@ describe('Carousel component', () => {
           )
 
           const carouselTrack = getByTestId('store-carousel').querySelector(
-            '[data-carousel-track]'
+            '[data-fs-carousel-track]'
           ) as Element
 
           const tabs = getAllByRole('tab')

package/src/molecules/Carousel/Carousel.tsx

@@ -1,10 +1,16 @@
-import type { KeyboardEvent, PropsWithChildren } from 'react'
-import React, { useMemo } from 'react'
+import type {
+  UIEvent,
+  ReactNode,
+  CSSProperties,
+  KeyboardEvent,
+  PropsWithChildren,
+} from 'react'
+import React, { useMemo, useRef } from 'react'
 import type { SwipeableProps } from 'react-swipeable'
 
 import { RightArrowIcon, LeftArrowIcon } from './Arrows'
+import CarouselItem from './CarouselItem'
 import useSlider from '../../hooks/useSlider/useSlider'
-import useSlideVisibility from './hooks/useSlideVisibility'
 import Bullets from '../Bullets'
 import IconButton from '../IconButton'
 
@@ -23,16 +29,54 @@ const createTransformValues = (infinite: boolean, totalItems: number) => {
 }
 
 export interface CarouselProps extends SwipeableProps {
+  /**
+   * ID of the current instance of the component.
+   */
   id?: string
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
   testId?: string
+  /**
+   * Returns the value of element's class content attribute.
+   */
+  className?: string
+  /**
+   * Whether or not the Carousel is infinite slide/scroll. Only for the `slide` variant.
+   * @default true
+   */
   infiniteMode?: boolean
+  /**
+   * Specifies which navigation elements should be visible.
+   * @default complete
+   */
   controls?: 'complete' | 'navigationArrows' | 'paginationBullets'
+  /**
+   * Specifies the slide transition. Only for the `slide` variant
+   */
   transition?: {
     duration: number
     property: string
     delay?: number
     timing?: string
   }
+  /**
+   * Specifies the number of items per page.
+   * @default 1
+   */
+  itemsPerPage?: number
+  /**
+   * Specifies the Carousel track variant.
+   * @default slide
+   */
+  variant?: 'slide' | 'scroll'
+  /**
+   * Specifies the navigation icons.
+   */
+  navigationIcons?: {
+    left?: ReactNode
+    right?: ReactNode
+  }
 }
 
 function Carousel({
@@ -44,9 +88,16 @@ function Carousel({
     property: 'transform',
   },
   children,
+  className,
   id = 'store-carousel',
+  variant = 'slide',
+  itemsPerPage = 1,
+  navigationIcons = undefined,
   ...swipeableConfigOverrides
 }: PropsWithChildren<CarouselProps>) {
+  const carouselTrackRef = useRef<HTMLUListElement>(null)
+  const isSlideCarousel = variant === 'slide'
+  const isScrollCarousel = variant === 'scroll'
   const childrenArray = React.Children.toArray(children)
   const childrenCount = childrenArray.length
   const numberOfSlides = infiniteMode ? childrenCount + 2 : childrenCount
@@ -66,16 +117,11 @@ function Carousel({
   )
 
   const { handlers, slide, sliderState, sliderDispatch } = useSlider({
-    totalItems: childrenCount,
-    itemsPerPage: 1,
+    itemsPerPage,
     infiniteMode,
-    ...swipeableConfigOverrides,
-  })
-
-  const { isItemVisible, shouldRenderItem } = useSlideVisibility({
-    itemsPerPage: sliderState.itemsPerPage,
-    currentSlide: sliderState.currentItem,
     totalItems: childrenCount,
+    shouldSlideOnSwipe: isSlideCarousel,
+    ...swipeableConfigOverrides,
   })
 
   const postRenderedSlides =
@@ -89,6 +135,38 @@ function Carousel({
     postRenderedSlides
   )
 
+  const slideCarouselTrackStyle: CSSProperties = useMemo(
+    () => ({
+      display: 'flex',
+      width: `${numberOfSlides * 100}%`,
+      transition: sliderState.sliding ? slidingTransition : undefined,
+      transform: `translate3d(${
+        transformValues[sliderState.currentPage]
+      }%, 0, 0)`,
+    }),
+    [
+      numberOfSlides,
+      transformValues,
+      slidingTransition,
+      sliderState.sliding,
+      sliderState.currentPage,
+    ]
+  )
+
+  const scrollCarouselTrackStyle: CSSProperties = useMemo(
+    () => ({
+      width: '100%',
+      display: 'block',
+      overflowX: 'scroll',
+      whiteSpace: 'nowrap',
+    }),
+    []
+  )
+
+  const carouselTrackStyle =
+    ((isSlideCarousel && slideCarouselTrackStyle) as CSSProperties) ||
+    ((isScrollCarousel && scrollCarouselTrackStyle) as CSSProperties)
+
   const slidePrevious = () => {
     if (
       sliderState.sliding ||
@@ -111,16 +189,93 @@ function Carousel({
     slide('next', sliderDispatch)
   }
 
+  const onScrollTrack = (event: UIEvent) => {
+    if (isSlideCarousel || itemsPerPage > 1) {
+      return
+    }
+
+    const itemWidth = Number(event.currentTarget.firstElementChild?.scrollWidth)
+    const scrollOffset = event.currentTarget?.scrollLeft
+    const formatter = scrollOffset > itemWidth / 2 ? Math.round : Math.floor
+    const page = formatter(scrollOffset / itemWidth)
+
+    slide(page, sliderDispatch)
+  }
+
+  const onTransitionTrackEnd = () => {
+    sliderDispatch({
+      type: 'STOP_SLIDE',
+    })
+
+    if (infiniteMode && sliderState.currentItem >= childrenCount) {
+      sliderDispatch({
+        type: 'GO_TO_PAGE',
+        payload: {
+          pageIndex: 0,
+          shouldSlide: false,
+        },
+      })
+    }
+
+    if (infiniteMode && sliderState.currentItem < 0) {
+      sliderDispatch({
+        type: 'GO_TO_PAGE',
+        payload: {
+          pageIndex: sliderState.totalPages - 1,
+          shouldSlide: false,
+        },
+      })
+    }
+  }
+
+  const onScrollPagination = async (
+    index: number,
+    slideDirection?: 'previous' | 'next'
+  ) => {
+    if (slideDirection === 'previous' && sliderState.currentPage === 0) {
+      return
+    }
+
+    if (
+      slideDirection === 'next' &&
+      sliderState.currentPage === sliderState.totalPages - 1
+    ) {
+      return
+    }
+
+    let scrollOffset
+    const carouselItemsWidth = Number(
+      carouselTrackRef.current?.firstElementChild?.clientWidth
+    )
+
+    if (itemsPerPage > 1) {
+      scrollOffset = index * carouselItemsWidth * itemsPerPage
+    } else {
+      scrollOffset = index * carouselItemsWidth - carouselItemsWidth * 0.125
+    }
+
+    carouselTrackRef.current?.scrollTo({
+      left: scrollOffset,
+      behavior: 'smooth',
+    })
+
+    slide(index, sliderDispatch)
+  }
+
   // accessible behavior for tablist
   const handleBulletsKeyDown = (event: KeyboardEvent) => {
     switch (event.key) {
       case 'ArrowLeft': {
-        slidePrevious()
+        isSlideCarousel && slidePrevious()
+        isScrollCarousel &&
+          onScrollPagination(sliderState.currentPage - 1, 'previous')
         break
       }
 
       case 'ArrowRight': {
-        slideNext()
+        isSlideCarousel && slideNext()
+        isScrollCarousel &&
+          onScrollPagination(sliderState.currentPage + 1, 'next')
         break
       }
 
@@ -142,109 +297,86 @@ function Carousel({
     <section
       id={id}
       data-fs-carousel
+      className={className}
       data-testid={testId}
       aria-label="carousel"
       aria-roledescription="carousel"
     >
       <div
-        data-carousel-track-container
-        style={{ overflow: 'hidden', width: '100%' }}
+        data-fs-carousel-track-container
+        style={{
+          width: '100%',
+          overflow: 'hidden',
+          display: isScrollCarousel ? 'block' : undefined,
+        }}
         {...handlers}
       >
-        <div
-          data-carousel-track
-          style={{
-            display: 'flex',
-            transition: sliderState.sliding ? slidingTransition : undefined,
-            width: `${numberOfSlides * 100}%`,
-            transform: `translate3d(${
-              transformValues[sliderState.currentPage]
-            }%, 0, 0)`,
-          }}
-          onTransitionEnd={() => {
-            sliderDispatch({
-              type: 'STOP_SLIDE',
-            })
-
-            if (sliderState.currentItem >= childrenCount) {
-              sliderDispatch({
-                type: 'GO_TO_PAGE',
-                payload: {
-                  pageIndex: 0,
-                  shouldSlide: false,
-                },
-              })
-            }
-
-            if (sliderState.currentItem < 0) {
-              sliderDispatch({
-                type: 'GO_TO_PAGE',
-                payload: {
-                  pageIndex: sliderState.totalPages - 1,
-                  shouldSlide: false,
-                },
-              })
-            }
-          }}
+        <ul
           aria-live="polite"
+          ref={carouselTrackRef}
+          style={carouselTrackStyle}
+          data-fs-carousel-track
+          onScroll={onScrollTrack}
+          onTransitionEnd={onTransitionTrackEnd}
         >
           {slides.map((currentSlide, idx) => (
-            <div
-              role="tabpanel"
-              aria-roledescription="slide"
-              key={idx}
-              id={`carousel-item-${idx}`}
-              data-carousel-item
-              style={{ width: '100%' }}
-              data-visible={
-                isItemVisible(idx - Number(infiniteMode)) || undefined
-              }
+            <CarouselItem
+              index={idx}
+              key={String(idx)}
+              state={sliderState}
+              totalItems={childrenCount}
+              infiniteMode={infiniteMode}
+              isScrollCarousel={isScrollCarousel}
             >
-              {shouldRenderItem(idx - Number(infiniteMode))
-                ? currentSlide
-                : null}
-            </div>
+              {currentSlide}
+            </CarouselItem>
           ))}
-        </div>
+        </ul>
       </div>
 
       {showNavigationArrows && (
-        <div data-carousel-controls>
+        <div data-fs-carousel-controls>
           <IconButton
-            aria-label="previous"
-            data-arrow="left"
+            data-fs-carousel-control="left"
             aria-controls={id}
-            onClick={slidePrevious}
-            icon={<LeftArrowIcon />}
+            aria-label="previous"
+            icon={navigationIcons?.left ?? <LeftArrowIcon />}
+            onClick={() => {
+              isSlideCarousel && slidePrevious()
+              isScrollCarousel &&
+                onScrollPagination(sliderState.currentPage - 1, 'previous')
+            }}
           />
           <IconButton
-            aria-label="next"
-            data-arrow="right"
+            data-fs-carousel-control="right"
             aria-controls={id}
-            onClick={slideNext}
-            icon={<RightArrowIcon />}
+            aria-label="next"
+            icon={navigationIcons?.right ?? <RightArrowIcon />}
+            onClick={() => {
+              isSlideCarousel && slideNext()
+              isScrollCarousel &&
+                onScrollPagination(sliderState.currentPage + 1, 'next')
+            }}
           />
         </div>
       )}
 
       {showPaginationBullets && (
-        <div data-carousel-bullets>
+        <div data-fs-carousel-bullets>
           <Bullets
             tabIndex={0}
-            totalQuantity={childrenCount}
             activeBullet={sliderState.currentPage}
-            onClick={(_, idx) => {
-              if (sliderState.sliding) {
-                return
-              }
+            totalQuantity={Math.ceil(childrenCount / sliderState.itemsPerPage)}
+            onKeyDown={handleBulletsKeyDown}
+            onClick={async (_, idx) => {
+              isSlideCarousel &&
+                !sliderState.sliding &&
+                slide(idx, sliderDispatch)
 
-              slide(idx, sliderDispatch)
+              isScrollCarousel && onScrollPagination(idx)
             }}
+            onFocus={(event) => event.currentTarget.focus()}
             ariaControlsGenerator={(idx) => `carousel-item-${idx}`}
-            onKeyDown={handleBulletsKeyDown}
-            onFocus={(event) => {
-              event.currentTarget.focus()
-            }}
           />
         </div>
       )}