@telus-uds/components-base 2.0.2 → 2.1.0

package/src/Carousel/Carousel.jsx

@@ -25,6 +25,7 @@ import CarouselThumbnailNavigation from './CarouselThumbnailNavigation'
 import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel'
 import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem'
 import dictionary from './dictionary'
+import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL } from './Constants'
 
 const TRANSITION_MODES = {
   MANUAL: 'manual',
@@ -55,9 +56,15 @@ const selectContainerStyles = (width) => ({
   width
 })
 
-const selectSwipeAreaStyles = (count, width, enablePeeking) => ({
+const selectSwipeAreaStyles = (
+  count,
+  width,
+  enablePeeking,
+  enableDisplayMultipleItemsPerSlide
+) => ({
   width: width * count,
-  justifyContent: enablePeeking ? 'flex-start' : 'space-between',
+  justifyContent:
+    enablePeeking || enableDisplayMultipleItemsPerSlide ? 'flex-start' : 'space-between',
   flexDirection: 'row'
 })
 
@@ -69,7 +76,8 @@ const selectControlButtonPositionStyles = ({
   buttonWidth,
   positionProperty = getDynamicPositionProperty(),
   spaceBetweenSlideAndButton,
-  enablePeeking
+  enablePeeking,
+  enableDisplayMultipleItemsPerSlide
 }) => {
   const styles = {}
   if (positionVariant === 'edge') {
@@ -77,7 +85,7 @@ const selectControlButtonPositionStyles = ({
   } else if (positionVariant === 'inside') {
     styles[positionProperty] = 0
   } else if (positionVariant === 'outside') {
-    if (enablePeeking) {
+    if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
       styles[positionProperty] = 0
     } else {
       styles[positionProperty] = -1 * (spaceBetweenSlideAndButton + buttonWidth)
@@ -93,7 +101,8 @@ const selectPreviousNextNavigationButtonStyles = (
   isFirstSlide,
   isLastSlide,
   areStylesAppliedOnPreviousButton,
-  enablePeeking
+  enablePeeking,
+  enableDisplayMultipleItemsPerSlide
 ) => {
   const styles = {
     zIndex: 1,
@@ -114,7 +123,8 @@ const selectPreviousNextNavigationButtonStyles = (
       buttonWidth: previousNextNavigationButtonWidth,
       positionProperty: getDynamicPositionProperty(areStylesAppliedOnPreviousButton),
       spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
-      enablePeeking
+      enablePeeking,
+      enableDisplayMultipleItemsPerSlide
     })
   }
 }
@@ -140,6 +150,88 @@ const getPeekingProps = (viewport) => {
   }
 }
 
+const getTotalItems = (enableDisplayMultipleItemsPerSlide, childrenArray, viewport) => {
+  if (enableDisplayMultipleItemsPerSlide) {
+    switch (viewport) {
+      case 'xs':
+      case 'sm':
+        return childrenArray.length
+      case 'md':
+        return Math.ceil(childrenArray.length / ITEMS_PER_VIEWPORT_MD)
+      case 'lg':
+      case 'xl':
+        return Math.ceil(childrenArray.length / ITEMS_PER_VIEWPORT_LG_XL)
+      default:
+        break
+    }
+  }
+  return childrenArray.length
+}
+
+/**
+ * Calculates the final width of the carousel container for displacement purposes based on various conditions.
+ *
+ * @param {number} containerWidth - The initial width of the container.
+ * @param {boolean} enablePeeking - Flag indicating if peeking is enabled.
+ * @param {object} viewport - The viewport properties.
+ * @param {object} activeIndexRef - A ref object holding the current active index.
+ * @param {number} totalItems - The total number of items in the carousel.
+ * @param {number} calcDelta - The delta value used for calculations.
+ * @returns {number} - The final calculated width of the container.
+ *
+ * The function adjusts the container width for displacement purposes based on the peeking properties and the position
+ * of the active item (first, middle, or last). It considers different peeking spaces and gaps
+ * to ensure the correct width is calculated for the carousel to display properly.
+ */
+const calculateFinalWidth = (
+  containerWidth,
+  enablePeeking,
+  viewport,
+  activeIndexRef,
+  totalItems,
+  calcDelta
+) => {
+  let finalWidth = containerWidth
+
+  if (enablePeeking) {
+    const { peekingFirstSpace, peekingGap, peekingLastSpace, peekingMiddleSpace } =
+      getPeekingProps(viewport)
+
+    const isFirst = activeIndexRef.current === 0
+    const isLast = activeIndexRef.current + 1 >= totalItems
+    const isMiddle = !isFirst && !isLast
+
+    const basePeekingSpace = peekingFirstSpace + peekingGap + peekingMiddleSpace
+    const middlePeekingSpace = peekingMiddleSpace * 2 + peekingGap
+
+    if (isFirst) {
+      finalWidth -= basePeekingSpace
+      if (activeIndexRef.current + 1 === totalItems - 1) {
+        finalWidth -= peekingLastSpace - peekingMiddleSpace
+      }
+    } else if (isMiddle) {
+      if (calcDelta > 0) {
+        finalWidth -= basePeekingSpace + middlePeekingSpace * activeIndexRef.current
+        if (activeIndexRef.current + 1 === totalItems - 1) {
+          finalWidth -= peekingLastSpace - peekingMiddleSpace
+        }
+      } else {
+        finalWidth += basePeekingSpace + middlePeekingSpace * (activeIndexRef.current - 2)
+        if (activeIndexRef.current - 1 === 0) {
+          finalWidth -= peekingFirstSpace - peekingMiddleSpace
+        }
+      }
+    } else if (isLast) {
+      finalWidth += basePeekingSpace + middlePeekingSpace * (activeIndexRef.current - 2)
+      if (activeIndexRef.current - 1 === 0) {
+        finalWidth -= peekingLastSpace - peekingMiddleSpace
+      }
+    }
+  }
+
+  return finalWidth
+}
+
 const selectIconStyles = ({ iconBackgroundColor }) => ({ backgroundColor: iconBackgroundColor })
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -219,10 +311,14 @@ const Carousel = React.forwardRef(
       title = 'carousel',
       springConfig = undefined,
       thumbnails = undefined,
+      enableDisplayMultipleItemsPerSlide = false,
       panelNavigation = thumbnails ? (
         <CarouselThumbnailNavigation thumbnails={thumbnails} />
       ) : (
-        <CarouselStepTracker variant={stepTrackerVariant} />
+        <CarouselStepTracker
+          variant={stepTrackerVariant}
+          enableDisplayMultipleItemsPerSlide={enableDisplayMultipleItemsPerSlide}
+        />
       ),
       tag = 'ul',
       accessibilityRole,
@@ -238,14 +334,16 @@ const Carousel = React.forwardRef(
     ref
   ) => {
     let childrenArray = unpackFragment(children)
+    const viewport = useViewport()
+    const totalItems = getTotalItems(enableDisplayMultipleItemsPerSlide, childrenArray, viewport)
     const autoPlayFeatureEnabled =
-      autoPlay && slideDuration > 0 && transitionDuration > 0 && childrenArray.length > 1
+      autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1
     // if `Carousel` only has one `Carousel.Item`, convert this to a single-item array
     if (!Array.isArray(childrenArray)) {
       childrenArray = [childrenArray]
     }
     const getCopy = useCopy({ dictionary, copy })
-    const viewport = useViewport()
+
     const themeTokens = useThemeTokens('Carousel', tokens, variant, {
       viewport
     })
@@ -289,7 +387,7 @@ const Carousel = React.forwardRef(
     const autoPlayRef = React.useRef(null)
 
     const isFirstSlide = !activeIndex
-    const isLastSlide = activeIndex + 1 >= childrenArray.length
+    const isLastSlide = activeIndex + 1 >= totalItems
 
     const handleAnimationStart = React.useCallback(
       (...args) => {
@@ -330,7 +428,7 @@ const Carousel = React.forwardRef(
             useNativeDriver: false,
             duration: transitionDuration * 1000
           }).start(handleAnimationEndToIndex)
-        } else if (enablePeeking) {
+        } else if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
           Animated.timing(pan, {
             ...springConfig,
             toValue,
@@ -345,7 +443,15 @@ const Carousel = React.forwardRef(
           }).start(handleAnimationEndToIndex)
         }
       },
-      [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking]
+      [
+        pan,
+        springConfig,
+        handleAnimationEnd,
+        transitionDuration,
+        isAutoPlayEnabled,
+        enablePeeking,
+        enableDisplayMultipleItemsPerSlide
+      ]
     )
 
     const stopAutoplay = React.useCallback(() => {
@@ -367,8 +473,8 @@ const Carousel = React.forwardRef(
         let calcDelta = delta
         if (activeIndexRef.current <= 0 && delta < 0) {
           skipChanges = transitionMode !== TRANSITION_MODES.AUTOMATIC
-          calcDelta = childrenArray.length + delta
-        } else if (activeIndexRef.current + 1 >= childrenArray.length && delta > 0) {
+          calcDelta = totalItems + delta
+        } else if (activeIndexRef.current + 1 >= totalItems && delta > 0) {
           skipChanges = transitionMode !== TRANSITION_MODES.AUTOMATIC
           calcDelta = -1 * activeIndexRef.current + delta - 1
         }
@@ -382,13 +488,22 @@ const Carousel = React.forwardRef(
         stopAutoplay()
         setActiveIndex(index)
 
-        toValue.x = containerLayoutRef.current.width * -1 * calcDelta
+        const finalWidth = calculateFinalWidth(
+          containerLayoutRef.current.width,
+          enablePeeking,
+          viewport,
+          activeIndexRef,
+          totalItems,
+          calcDelta
+        )
+
+        toValue.x = finalWidth * -1 * calcDelta
         animate(toValue, index)
         if (isCarouselPlaying) {
           stopAutoplay()
           if (
             index === 0 &&
-            activeIndexRef.current + 1 === childrenArray.length &&
+            activeIndexRef.current + 1 === totalItems &&
             transitionMode === TRANSITION_MODES.AUTOMATIC
           ) {
             setisCarouselPlaying(false)
@@ -410,11 +525,13 @@ const Carousel = React.forwardRef(
         slideDuration,
         updateOffset,
         animate,
-        childrenArray.length,
+        totalItems,
         onIndexChanged,
         isCarouselPlaying,
         stopAutoplay,
-        isAutoPlayEnabled
+        isAutoPlayEnabled,
+        viewport,
+        enablePeeking
       ]
     )
 
@@ -500,9 +617,9 @@ const Carousel = React.forwardRef(
 
     React.useEffect(() => {
       setIsAutoPlayEnabled(
-        autoPlay && slideDuration > 0 && transitionDuration > 0 && childrenArray.length > 1
+        autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1
       )
-    }, [autoPlay, slideDuration, transitionDuration, childrenArray.length])
+    }, [autoPlay, slideDuration, transitionDuration, totalItems])
 
     React.useEffect(() => {
       return () => {
@@ -523,14 +640,14 @@ const Carousel = React.forwardRef(
     }) => setPreviousNextNavigationButtonWidth(width)
 
     const isSwipeAllowed = React.useCallback(() => {
-      if (childrenArray.length === 1) {
+      if (totalItems === 1) {
         return false
       }
       if (Platform.OS === 'web') {
         return !!(viewport === 'xs' || viewport === 'sm')
       }
       return true
-    }, [viewport, childrenArray.length])
+    }, [viewport, totalItems])
 
     const panResponder = React.useMemo(
       () =>
@@ -623,12 +740,12 @@ const Carousel = React.forwardRef(
           .replace(/%\{title\}/g, title)
           .replace(/%\{itemLabel\}/g, itemLabel)
           .replace(/%\{stepNumber\}/g, activeIndex + 1)
-          .replace(/%\{stepCount\}/g, childrenArray.length)
+          .replace(/%\{stepCount\}/g, totalItems)
 
         // First word might be a lowercase placeholder: capitalize the first letter
         return `${copyText[0].toUpperCase()}${copyText.slice(1)}`
       },
-      [activeIndex, childrenArray.length, itemLabel, getCopy, title]
+      [activeIndex, itemLabel, getCopy, title, totalItems]
     )
 
     const activePanelNavigation =
@@ -682,7 +799,7 @@ const Carousel = React.forwardRef(
         goTo={goTo}
         getCopyWithPlaceholders={getCopyWithPlaceholders}
         itemLabel={itemLabel}
-        totalItems={childrenArray.length}
+        totalItems={totalItems}
         themeTokens={themeTokens}
         firstFocusRef={firstFocusRef}
         refocus={refocus}
@@ -713,7 +830,8 @@ const Carousel = React.forwardRef(
                   buttonWidth: previousNextNavigationButtonWidth,
                   positionProperty: getDynamicPositionProperty(),
                   spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
-                  enablePeeking
+                  enablePeeking,
+                  enableDisplayMultipleItemsPerSlide
                 })
               ]}
             >
@@ -727,7 +845,7 @@ const Carousel = React.forwardRef(
               />
             </View>
           ) : null}
-          {showPreviousNextNavigation && childrenArray.length > 1 ? (
+          {showPreviousNextNavigation && totalItems > 1 ? (
             <View
               style={selectPreviousNextNavigationButtonStyles(
                 previousNextNavigationButtonWidth,
@@ -736,7 +854,8 @@ const Carousel = React.forwardRef(
                 isFirstSlide,
                 isLastSlide,
                 true,
-                enablePeeking
+                enablePeeking,
+                enableDisplayMultipleItemsPerSlide
               )}
               testID="previous-button-container"
             >
@@ -769,7 +888,12 @@ const Carousel = React.forwardRef(
           <View style={selectContainerStyles(containerLayout.width)}>
             <Animated.View
               style={StyleSheet.flatten([
-                selectSwipeAreaStyles(childrenArray.length, containerLayout.width, enablePeeking),
+                selectSwipeAreaStyles(
+                  totalItems,
+                  containerLayout.width,
+                  enablePeeking,
+                  enableDisplayMultipleItemsPerSlide
+                ),
                 {
                   transform: [{ translateX: pan.x }, { translateY: pan.y }]
                 }
@@ -784,15 +908,17 @@ const Carousel = React.forwardRef(
                 const hidden = !isAnimating && index !== activeIndex
                 const clonedElement = React.cloneElement(element, {
                   elementIndex: index,
-                  hidden: enablePeeking ? false : hidden,
+                  hidden: enablePeeking || enableDisplayMultipleItemsPerSlide ? false : hidden,
                   enablePeeking,
-                  peekingProps: getPeekingProps(viewport)
+                  peekingProps: getPeekingProps(viewport),
+                  enableDisplayMultipleItemsPerSlide,
+                  viewport
                 })
                 return <React.Fragment key={index.toFixed(2)}>{clonedElement}</React.Fragment>
               })}
             </Animated.View>
           </View>
-          {showPreviousNextNavigation && childrenArray.length > 1 ? (
+          {showPreviousNextNavigation && totalItems > 1 ? (
             <View
               style={selectPreviousNextNavigationButtonStyles(
                 previousNextNavigationButtonWidth,
@@ -801,7 +927,8 @@ const Carousel = React.forwardRef(
                 isFirstSlide,
                 isLastSlide,
                 false,
-                enablePeeking
+                enablePeeking,
+                enableDisplayMultipleItemsPerSlide
               )}
               testID="next-button-container"
             >
@@ -1008,7 +1135,12 @@ Carousel.propTypes = {
    * If set to `true`, the Carousel will show the previous and next slides
    * - Default value is `false`
    */
-  enablePeeking: PropTypes.bool
+  enablePeeking: PropTypes.bool,
+  /**
+   * If set to `true`, the Carousel will show multiple slides at once
+   * - Default value is `false`
+   */
+  enableDisplayMultipleItemsPerSlide: PropTypes.bool
 }
 
 Carousel.Item = CarouselItem

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -10,50 +10,67 @@ import {
   variantProp
 } from '../../utils'
 import { useCarousel } from '../CarouselContext'
+import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, GAP_BETWEEN_ITEMS } from '../Constants'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectContainerStyle = ({
   width,
-  activeIndex,
   elementIndex,
-  totalItems,
   enablePeeking,
   peekingMarginLeft,
   peekingFirstSpace,
-  peekingLastSpace,
-  peekingMiddleSpace,
   peekingGap,
-  hidden
+  hidden,
+  enableDisplayMultipleItemsPerSlide,
+  viewport
 }) => {
   let adjustedWidth = width
   let marginLeft = 0
   const marginRight = 0
 
   if (enablePeeking) {
-    adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace)
     const isFirst = elementIndex === 0
-    const isActive = activeIndex === elementIndex
-
-    if (isActive) {
-      if (isFirst) {
-        marginLeft = peekingMarginLeft
-      } else {
-        marginLeft = peekingGap
-      }
-    } else if (isFirst) {
-      marginLeft = peekingMarginLeft + peekingGap + peekingFirstSpace + peekingMiddleSpace
-      if (activeIndex > 1) {
-        marginLeft += (peekingGap + peekingMiddleSpace * 2) * (activeIndex - 1)
-      }
-      if (activeIndex === totalItems - 1) {
-        marginLeft += peekingLastSpace - peekingMiddleSpace
-      }
+    adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace)
+    if (isFirst) {
+      marginLeft = peekingMarginLeft
     } else {
       marginLeft = peekingGap
     }
   }
 
+  // Adjust width and margins for multiple items per slide.
+  if (enableDisplayMultipleItemsPerSlide) {
+    switch (viewport) {
+      case 'xs':
+      case 'sm':
+        break
+      case 'md':
+        if (enablePeeking) {
+          adjustedWidth =
+            adjustedWidth / ITEMS_PER_VIEWPORT_MD - (peekingGap * 1) / ITEMS_PER_VIEWPORT_MD
+        } else {
+          adjustedWidth =
+            width / ITEMS_PER_VIEWPORT_MD - (GAP_BETWEEN_ITEMS * 2) / ITEMS_PER_VIEWPORT_MD
+          marginLeft = GAP_BETWEEN_ITEMS
+        }
+        break
+      case 'lg':
+      case 'xl':
+        if (enablePeeking) {
+          adjustedWidth =
+            adjustedWidth / ITEMS_PER_VIEWPORT_LG_XL - (peekingGap * 2) / ITEMS_PER_VIEWPORT_LG_XL
+        } else {
+          adjustedWidth =
+            width / ITEMS_PER_VIEWPORT_LG_XL - (GAP_BETWEEN_ITEMS * 3) / ITEMS_PER_VIEWPORT_LG_XL
+          marginLeft = GAP_BETWEEN_ITEMS
+        }
+        break
+      default:
+        break
+    }
+  }
+
   const style = {
     width: adjustedWidth,
     marginLeft,
@@ -72,8 +89,21 @@ const selectContainerStyle = ({
  * only top-level component passed to the `Carousel`
  */
 const CarouselItem = React.forwardRef(
-  ({ children, elementIndex, tag = 'li', hidden, enablePeeking, peekingProps, ...rest }, ref) => {
-    const { width, activeIndex, totalItems, height } = useCarousel()
+  (
+    {
+      children,
+      elementIndex,
+      tag = 'li',
+      hidden,
+      enablePeeking,
+      peekingProps,
+      enableDisplayMultipleItemsPerSlide,
+      viewport,
+      ...rest
+    },
+    ref
+  ) => {
+    const { width, activeIndex, height } = useCarousel()
 
     const selectedProps = selectProps({
       ...rest,
@@ -86,12 +116,12 @@ const CarouselItem = React.forwardRef(
       <View
         style={selectContainerStyle({
           width,
-          activeIndex,
           elementIndex,
-          totalItems,
           hidden,
           height,
           enablePeeking,
+          enableDisplayMultipleItemsPerSlide,
+          viewport,
           ...peekingProps
         })}
         {...selectedProps}

package/src/Carousel/CarouselStepTracker/CarouselStepTracker.jsx

@@ -1,52 +1,86 @@
 import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
 import { useCarousel } from '../CarouselContext'
 import StepTracker from '../../StepTracker'
 import StackView from '../../StackView'
+import Spacer from '../../Spacer'
+import Progress from '../../Progress'
 import { variantProp } from '../../utils'
 
-const CarouselStepTracker = React.forwardRef(({ variant }, ref) => {
-  const {
-    activeIndex,
-    totalItems,
-    getCopyWithPlaceholders,
-    themeTokens: { stepTrackerCurrentBackgroundColor, ...themeTokens }
-  } = useCarousel()
-  const stackViewTokens = {
-    justifyContent: 'center'
-  }
+const CarouselStepTracker = React.forwardRef(
+  ({ variant, enableDisplayMultipleItemsPerSlide }, ref) => {
+    const {
+      activeIndex,
+      totalItems,
+      getCopyWithPlaceholders,
+      themeTokens: { stepTrackerCurrentBackgroundColor, ...themeTokens }
+    } = useCarousel()
+    const stackViewTokens = {
+      justifyContent: 'center'
+    }
 
-  const stepTrackerTokens = {
-    showStepLabel: false,
-    showStepTrackerLabel: true,
-    // TODO: StepTracker 'isComplete'/'isCurrent' is incorrect, see line StepTracker/Step.jsx line 63, refactor incorrect values and remove this
-    knobCompletedBackgroundColor: stepTrackerCurrentBackgroundColor ?? 'none',
-    connectorCompletedColor: 'none',
-    connectorColor: 'none',
-    containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation
-  }
+    const stepTrackerTokens = {
+      showStepLabel: false,
+      showStepTrackerLabel: true,
+      // TODO: StepTracker 'isComplete'/'isCurrent' is incorrect, see line StepTracker/Step.jsx line 63, refactor incorrect values and remove this
+      knobCompletedBackgroundColor: stepTrackerCurrentBackgroundColor ?? 'none',
+      connectorCompletedColor: 'none',
+      connectorColor: 'none',
+      containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation
+    }
 
-  const steps = Array.from(Array(totalItems)).map((_, index) => String(index))
-  return (
-    <StackView direction="row" tokens={stackViewTokens} ref={ref}>
-      <StepTracker
-        current={activeIndex}
-        steps={steps}
-        copy={{
-          // Give StepTracker copy from Carousel's language and dictionary
-          stepLabel: getCopyWithPlaceholders('stepLabel'),
-          stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
-        }}
-        tokens={stepTrackerTokens}
-        variant={variant}
-      />
-    </StackView>
-  )
-})
+    const steps = Array.from(Array(totalItems)).map((_, index) => String(index))
+
+    if (enableDisplayMultipleItemsPerSlide) {
+      return (
+        <>
+          <Spacer space={4} />
+          <StackView direction="row" tokens={stackViewTokens} ref={ref}>
+            <View style={staticStyles.progress}>
+              <Progress>
+                <Progress.Bar
+                  offset={{
+                    items: totalItems,
+                    current: activeIndex + 1
+                  }}
+                  variant={{ style: 'subtle' }}
+                  accessibilityLabel={getCopyWithPlaceholders('stepTrackerLabel')}
+                />
+              </Progress>
+            </View>
+          </StackView>
+        </>
+      )
+    }
+    return (
+      <StackView direction="row" tokens={stackViewTokens} ref={ref}>
+        <StepTracker
+          current={activeIndex}
+          steps={steps}
+          copy={{
+            stepLabel: getCopyWithPlaceholders('stepLabel'),
+            stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
+          }}
+          tokens={stepTrackerTokens}
+          variant={variant}
+        />
+      </StackView>
+    )
+  }
+)
 
 CarouselStepTracker.displayName = 'CarouselStepTracker'
 
 CarouselStepTracker.propTypes = {
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  enableDisplayMultipleItemsPerSlide: PropTypes.bool
 }
 
+const staticStyles = StyleSheet.create({
+  progress: {
+    width: 288
+  }
+})
+
 export default CarouselStepTracker

package/src/Carousel/Constants.js

@@ -0,0 +1,3 @@
+export const ITEMS_PER_VIEWPORT_MD = 2
+export const ITEMS_PER_VIEWPORT_LG_XL = 3
+export const GAP_BETWEEN_ITEMS = 16