@faststore/components 2.0.123-alpha.0 → 2.0.132-alpha.0

package/src/molecules/Carousel/Carousel.tsx

@@ -0,0 +1,398 @@
+import type {
+  CSSProperties,
+  KeyboardEvent,
+  PropsWithChildren,
+  ReactNode,
+  UIEvent,
+} from 'react'
+import React, { useMemo, useRef } from 'react'
+import type { SwipeableProps } from 'react-swipeable'
+
+import { Icon, IconButton } from '../..'
+import { useSlider } from '../../hooks'
+import CarouselBullets from './CarouselBullets'
+import CarouselItem from './CarouselItem'
+
+const createTransformValues = (infinite: boolean, totalItems: number) => {
+  const transformMap: Record<number, number> = {}
+  const slideWidth = 100 / totalItems
+
+  for (let idx = 0; idx < totalItems; ++idx) {
+    const currIdx = infinite ? idx - 1 : idx
+    const transformValue = -(slideWidth * idx)
+
+    transformMap[currIdx] = transformValue
+  }
+
+  return transformMap
+}
+
+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({
+  infiniteMode = true,
+  controls = 'complete',
+  testId = 'fs-carousel',
+  transition = {
+    duration: 400,
+    property: 'transform',
+  },
+  children,
+  className,
+  id = 'fs-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
+  const slidingTransition = `${transition.property} ${transition.duration}ms ${
+    transition.timing ?? ''
+  } ${transition.delay ?? ''}`
+
+  const { handlers, slide, sliderState, sliderDispatch } = useSlider({
+    itemsPerPage,
+    infiniteMode,
+    totalItems: childrenCount,
+    shouldSlideOnSwipe: isSlideCarousel,
+    ...swipeableConfigOverrides,
+  })
+
+  const pagesCount = Math.ceil(childrenCount / sliderState.itemsPerPage)
+
+  const showNavigationArrows =
+    pagesCount !== 1 &&
+    (controls === 'complete' || controls === 'navigationArrows')
+
+  const showPaginationBullets =
+    pagesCount !== 1 &&
+    (controls === 'complete' || controls === 'paginationBullets')
+
+  const transformValues = useMemo(
+    () => createTransformValues(infiniteMode, numberOfSlides),
+    [numberOfSlides, infiniteMode]
+  )
+
+  const postRenderedSlides =
+    infiniteMode && children ? childrenArray.slice(0, 1) : []
+
+  const preRenderedSlides =
+    infiniteMode && children ? childrenArray.slice(childrenCount - 1) : []
+
+  const slides = preRenderedSlides.concat(
+    (children as any) ?? [],
+    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 ||
+      (!infiniteMode && sliderState.currentPage === 0)
+    ) {
+      return
+    }
+
+    slide('previous', sliderDispatch)
+  }
+
+  const slideNext = () => {
+    if (
+      sliderState.sliding ||
+      (!infiniteMode && sliderState.currentPage === childrenCount - 1)
+    ) {
+      return
+    }
+
+    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': {
+        isSlideCarousel && slidePrevious()
+        isScrollCarousel &&
+          onScrollPagination(sliderState.currentPage - 1, 'previous')
+        break
+      }
+
+      case 'ArrowRight': {
+        isSlideCarousel && slideNext()
+        isScrollCarousel &&
+          onScrollPagination(sliderState.currentPage + 1, 'next')
+        break
+      }
+
+      case 'Home': {
+        slide(0, sliderDispatch)
+        break
+      }
+
+      case 'End': {
+        slide(childrenCount - 1, sliderDispatch)
+        break
+      }
+
+      default:
+    }
+  }
+
+  return (
+    <section
+      id={id}
+      data-fs-carousel
+      className={className}
+      data-testid={testId}
+      aria-label="carousel"
+      aria-roledescription="carousel"
+    >
+      <div
+        data-fs-carousel-track-container
+        style={{
+          width: '100%',
+          overflow: 'hidden',
+          display: isScrollCarousel ? 'block' : undefined,
+        }}
+        {...handlers}
+      >
+        <ul
+          aria-live="polite"
+          ref={carouselTrackRef}
+          style={carouselTrackStyle}
+          data-fs-carousel-track
+          onScroll={onScrollTrack}
+          onTransitionEnd={onTransitionTrackEnd}
+        >
+          {slides.map((currentSlide, idx) => (
+            <CarouselItem
+              id={id}
+              index={idx}
+              key={String(idx)}
+              state={sliderState}
+              totalItems={childrenCount}
+              infiniteMode={infiniteMode}
+              isScrollCarousel={isScrollCarousel}
+            >
+              {currentSlide}
+            </CarouselItem>
+          ))}
+        </ul>
+      </div>
+
+      {showNavigationArrows && (
+        <div data-fs-carousel-controls>
+          <IconButton
+            data-fs-carousel-control="left"
+            aria-controls={id}
+            aria-label="previous"
+            icon={
+              navigationIcons?.left ?? (
+                <Icon name="ArrowLeft" width={20} height={20} weight="bold" />
+              )
+            }
+            onClick={() => {
+              isSlideCarousel && slidePrevious()
+              isScrollCarousel &&
+                onScrollPagination(sliderState.currentPage - 1, 'previous')
+            }}
+          />
+          <IconButton
+            data-fs-carousel-control="right"
+            aria-controls={id}
+            aria-label="next"
+            icon={
+              navigationIcons?.right ?? (
+                <Icon name="ArrowRight" width={20} height={20} weight="bold" />
+              )
+            }
+            onClick={() => {
+              isSlideCarousel && slideNext()
+              isScrollCarousel &&
+                onScrollPagination(sliderState.currentPage + 1, 'next')
+            }}
+          />
+        </div>
+      )}
+
+      {showPaginationBullets && (
+        <CarouselBullets
+          id={id}
+          tabIndex={0}
+          activeBullet={sliderState.currentPage}
+          totalQuantity={pagesCount}
+          onKeyDown={handleBulletsKeyDown}
+          onClick={async (_, idx) => {
+            isSlideCarousel &&
+              !sliderState.sliding &&
+              slide(idx, sliderDispatch)
+
+            isScrollCarousel && onScrollPagination(idx)
+          }}
+          onFocus={(event) => event.currentTarget.focus()}
+          ariaControlsGenerator={(idx) => `${id}-carousel-item-${idx}`}
+        />
+      )}
+    </section>
+  )
+}
+
+export default Carousel

package/src/molecules/Carousel/CarouselBullets.tsx

@@ -0,0 +1,95 @@
+import type { HTMLAttributes, MouseEvent } from 'react'
+import React, { forwardRef, useMemo } from 'react'
+
+import { Button } from '../..'
+
+export interface CarouselBulletsProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role'> {
+  /**
+   * ID of the current instance of the component.
+   */
+  id: string
+  /**
+   * Number of bullets that should be rendered.
+   */
+  totalQuantity: number
+  /**
+   * The currently active bullet (zero-indexed).
+   */
+  activeBullet: number
+  /**
+   * Event handler for clicks on each bullet. The handler will be called with
+   * the index of the bullet that received the click.
+   */
+  onClick: (e: MouseEvent, bulletIdx: number) => void
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * Function that should be used to generate the aria-label attribute added
+   * to each bullet that is inactive. It receives the bullet index as an
+   * argument so that it can be interpolated in the generated string.
+   */
+  ariaLabelGenerator?: (id: string, index: number, isActive: boolean) => string
+  /**
+   * Function that should be used to generate the aria-controls attribute added
+   * to each bullet. It receives the bullet index as argument and should return a string.
+   */
+  ariaControlsGenerator?: (index: number) => string
+}
+
+const defaultAriaLabel = (id: string, idx: number, isActive: boolean) =>
+  isActive ? `Current page from ${id}` : `Go to page ${idx + 1} from ${id}`
+
+const CarouselBullets = forwardRef<HTMLDivElement, CarouselBulletsProps>(
+  function Bullets(
+    {
+      id,
+      totalQuantity,
+      activeBullet,
+      onClick,
+      testId = 'fs-carousel-bullets',
+      ariaLabelGenerator = defaultAriaLabel,
+      ariaControlsGenerator,
+      ...otherProps
+    },
+    ref
+  ) {
+    const bulletIndexes = useMemo(
+      () => Array(totalQuantity).fill(0),
+      [totalQuantity]
+    )
+
+    return (
+      <div
+        ref={ref}
+        data-fs-carousel-bullets
+        data-testid={testId}
+        role="tablist"
+        {...otherProps}
+      >
+        {bulletIndexes.map((_, idx) => {
+          const isActive = activeBullet === idx
+
+          return (
+            <Button
+              key={`${id}-${idx}`}
+              role="tab"
+              tabIndex={-1}
+              data-fs-carousel-bullet
+              testId={`${testId}-bullet`}
+              onClick={(e) => onClick(e, idx)}
+              aria-label={ariaLabelGenerator(id, idx, isActive)}
+              aria-controls={ariaControlsGenerator?.(idx)}
+              aria-selected={isActive}
+            />
+          )
+        })}
+      </div>
+    )
+  }
+)
+
+export default CarouselBullets

package/src/molecules/Carousel/CarouselItem.tsx

@@ -0,0 +1,53 @@
+import type { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react'
+import React from 'react'
+import { SliderState, useSlideVisibility } from '../../hooks'
+
+export interface CarouselItemProps extends HTMLAttributes<HTMLLIElement> {
+  index: number
+  totalItems: number
+  state: SliderState
+  infiniteMode: boolean
+  isScrollCarousel: boolean
+}
+
+function CarouselItem({
+  id,
+  index,
+  state,
+  children,
+  totalItems,
+  infiniteMode,
+  isScrollCarousel,
+}: PropsWithChildren<CarouselItemProps>) {
+  const { isItemVisible, shouldRenderItem } = useSlideVisibility({
+    totalItems,
+    currentSlide: state.currentItem,
+    itemsPerPage: state.itemsPerPage,
+  })
+
+  const style =
+    ((!isScrollCarousel && { width: '100%' }) as CSSProperties) ||
+    ((isScrollCarousel && {
+      maxWidth: '60%',
+      display: 'inline-block',
+    }) as CSSProperties)
+
+  const shouldDisplayItem =
+    isScrollCarousel || shouldRenderItem(index - Number(infiniteMode))
+
+  return (
+    <li
+      style={style}
+      data-fs-carousel-item
+      aria-roledescription="slide"
+      id={`${id}-carousel-item-${index}`}
+      data-fs-carousel-item-visible={
+        isItemVisible(index - Number(infiniteMode)) || undefined
+      }
+    >
+      {shouldDisplayItem ? children : null}
+    </li>
+  )
+}
+
+export default CarouselItem

package/src/molecules/Carousel/index.ts

@@ -0,0 +1,8 @@
+export { default } from './Carousel'
+export type { CarouselProps } from './Carousel'
+
+export { default as CarouselItem } from './CarouselItem'
+export type { CarouselItemProps } from './CarouselItem'
+
+export { default as CarouselBullets } from './CarouselBullets'
+export type { CarouselBulletsProps } from './CarouselBullets'

package/src/molecules/IconButton/IconButton.tsx

@@ -26,6 +26,7 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       children,
       testId = 'fs-icon-button',
       'aria-label': ariaLabel,
+      size = 'regular',
       variant,
       ...otherProps
     },
@@ -40,6 +41,7 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         icon={icon}
         aria-label={ariaLabel}
         testId={testId}
+        size={size}
         {...otherProps}
       >
         {children}

package/src/molecules/InputField/InputField.tsx

@@ -107,7 +107,7 @@ const InputField = ({
       {shouldDisplayButton &&
         (displayClearButton || error ? (
           <IconButton
-            data-fs-button-size="small"
+            size="small"
             aria-label="Clear Field"
             icon={<Icon name="XCircle" />}
             onClick={() => {

package/src/molecules/LinkButton/LinkButton.tsx

@@ -40,9 +40,11 @@ function LinkButton({
       data-testid={testId}
       {...otherProps}
     >
-      {React.isValidElement(icon) && iconPosition === 'left' && icon}
-      {children}
-      {React.isValidElement(icon) && iconPosition === 'right' && icon}
+      <div data-fs-button-wrapper>
+        {React.isValidElement(icon) && iconPosition === 'left' && <span data-fs-button-icon>{icon}</span>}
+        {children && <span>{children}</span>}
+        {React.isValidElement(icon) && iconPosition === 'right' && <span data-fs-button-icon>{icon}</span>}
+      </div>
     </a>
   )
 }

package/src/molecules/QuantitySelector/QuantitySelector.tsx

@@ -94,6 +94,7 @@ const QuantitySelector = ({
         disabled={isLeftDisabled || disabled}
         onClick={decrease}
         testId={`${testId}-left-button`}
+        size="small"
       />
       <Input
         data-quantity-selector-input
@@ -111,6 +112,7 @@ const QuantitySelector = ({
         icon={<Icon name="Plus" width={16} height={16} weight="bold" />}
         onClick={increase}
         testId={`${testId}-right-button`}
+        size="small"
       />
     </div>
   )

package/src/molecules/RegionBar/RegionBar.tsx

@@ -20,7 +20,7 @@ const RegionBar = forwardRef<HTMLDivElement, RegionBarProps>(function RegionBar(
 ) {
   return (
     <div ref={ref} data-fs-region-bar {...otherProps}>
-      <Button onClick={onButtonClick}>
+      <Button onClick={onButtonClick} iconPosition="right" icon={<Icon name="CaretRight" />}>
         <Icon name="MapPin" />
         {postalCode ? (
           <>
@@ -30,7 +30,6 @@ const RegionBar = forwardRef<HTMLDivElement, RegionBarProps>(function RegionBar(
         ) : (
           <span data-fs-region-bar-message>Set your location</span>
         )}
-        <Icon name="CaretRight" />
       </Button>
     </div>
   )

package/src/molecules/SearchInputField/SearchInputField.tsx

@@ -88,10 +88,10 @@ const SearchInputField = forwardRef<
         {...otherProps}
       />
       <IconButton
-        data-fs-icon-button="null"
         type="submit"
         aria-label="Submit Search"
         icon={buttonIcon ?? <Icon name="MagnifyingGlass" />}
+        size="small"
         {...buttonProps}
       />
     </form>

package/src/organisms/ImageGallery/ImageGallerySelector.tsx

@@ -95,7 +95,6 @@ function ImageGallerySelector({
             data-fs-image-gallery-selector-control-button
             aria-label={navigationButtonLeftAriaLabel}
             icon={<Icon name="ArrowLeft" />}
-            size="small"
             onClick={() =>
               moveScroll(elementsRef.current, -SCROLL_MARGIN_VALUE)
             }
@@ -105,7 +104,7 @@ function ImageGallerySelector({
       <div data-fs-image-gallery-selector-elements ref={elementsRef}>
         {images.map((image, idx) => {
           return (
-            <InView 
+            <InView
               key={idx}
               onChange={(inView) => inViewChange(idx, inView)}>
               <Button
@@ -134,7 +133,6 @@ function ImageGallerySelector({
             data-fs-image-gallery-selector-control-button
             aria-label={navigationButtonRightAriaLabel}
             icon={<Icon name="ArrowLeft" />}
-            size="small"
             onClick={() =>
               moveScroll(elementsRef.current, +SCROLL_MARGIN_VALUE)
             }