@telus-uds/components-base 1.9.0 → 1.10.0

package/lib-module/Carousel/Carousel.js

@@ -0,0 +1,570 @@
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import Animated from "react-native-web/dist/exports/Animated";
+import PanResponder from "react-native-web/dist/exports/PanResponder";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import { getTokensPropType, variantProp, selectSystemProps, a11yProps, viewProps } from '../utils';
+import { useA11yInfo } from '../A11yInfoProvider';
+import { CarouselProvider } from './CarouselContext';
+import CarouselItem from './CarouselItem';
+import StepTracker from '../StepTracker';
+import StackView from '../StackView';
+import IconButton from '../IconButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const staticStyles = StyleSheet.create({
+  root: {
+    backgroundColor: 'transparent',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    top: 0,
+    left: 0
+  }
+});
+const staticTokens = {
+  stackView: {
+    justifyContent: 'center'
+  },
+  stepTracker: {
+    showStepLabel: false,
+    showStepTrackerLabel: true,
+    knobCompletedBackgroundColor: 'none',
+    connectorCompletedColor: 'none',
+    connectorColor: 'none'
+  }
+};
+
+const selectContainerStyles = width => ({
+  backgroundColor: 'transparent',
+  overflow: 'hidden',
+  width
+});
+
+const selectSwipeAreaStyles = (count, width) => ({
+  width: width * count,
+  justifyContent: 'space-between',
+  flexDirection: 'row'
+});
+
+const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton) => {
+  const styles = {
+    zIndex: 1,
+    position: 'absolute'
+  };
+  const dynamicPositionProperty = areStylesAppliedOnPreviousButton ? 'left' : 'right';
+
+  if (isFirstSlide) {
+    styles.visibility = areStylesAppliedOnPreviousButton ? 'hidden' : 'visible';
+  } else if (isLastSlide) {
+    styles.visibility = areStylesAppliedOnPreviousButton ? 'visible' : 'hidden';
+  } else {
+    styles.visibility = 'visible';
+  }
+
+  if (previousNextNavigationPosition === 'edge') {
+    styles[dynamicPositionProperty] = -1 * (previousNextNavigationButtonWidth / 2);
+  } else if (previousNextNavigationPosition === 'inside') {
+    styles[dynamicPositionProperty] = 0;
+  } else if (previousNextNavigationPosition === 'outside') {
+    styles[dynamicPositionProperty] = -1 * (spaceBetweenSlideAndPreviousNextNavigation + previousNextNavigationButtonWidth);
+  }
+
+  return styles;
+};
+
+const defaultPanelNavigationDictionary = {
+  en: {
+    stepTrackerLabel: 'Showing %{stepNumber} of %{stepCount}'
+  },
+  fr: {
+    stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
+  }
+};
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+/**
+ * Carousel is a general-purpose content slider that can be used to render content in terms of slides.
+
+  ## Usage
+  - `Carousel` is a top-level export from `@telus-uds/components-base` which is used to render a Carousel
+  - Immediately within `Carousel`, individual slides are wrapped in `Carousel.Item` for the top-level `Carousel` to know how to identify an individual slide
+  - You can use any UDS component or other platform-specific component, (based on the platform you're rendering) to achieve any desired layout
+  - By default, Carousel takea all the `width` available to it and the `height` is determined based on the content in the slide with more content
+  - You may want to wrap Carousel in other layout components like `Box`, `FlexGrid` etc, to achieve a responsive layout of your need
+
+  ## `useCarousel` custom hook
+
+  ```jsx
+  import { useCarousel } from '@telus-uds/components-base'
+
+  const SomeComponentWithinCarouselItem = () => {
+    const {
+      activeIndex,
+      totalItems,
+      width,
+      goTo
+    } = useCarousel()
+    return <Text>Hi!</Text>
+  }
+  ```
+
+  You can use `useCarousel` to hook into internal state of the Carousel component like:
+  - `activeIndex`: Index of the current slide
+  - `totalItems`: Total number of items/slides passed to the Carousel
+  - `width`: Width of the individual carousel slide
+  - `goTo`: A function to go to a particular slide by passing the index of that slide, e.g: goTo(0) where `0` is the index of the first slide
+
+  ## Accessibility
+
+  - Top-level `Carousel` and `Carousel.Item` can take all possible React Native's `View` and `a11y` props
+  - If your slide contains input elements like buttons, you may want to configure them to be only focusable when `activeIndex` is equal to the current slide index in order to avoid tabbing going between slides
+
+  ## Platform considerations
+  The component is available on both native platforms and web.
+
+  ## Other considerations
+  - You may want to use the same kind of layout in all your slides to avoid visual and height differences
+  - `previous` and `next` navigation buttons are automatically removed in `sm` and `xs` viewports, as these smaller viewports offers swipe functionality
+
+  ## Tokens
+
+  You can override the following tokens in exceptional circumstances:
+  - `previousIcon` - Icon of the previous button
+  - `nextIcon` - Icon of the next button
+  - `showPreviousNextNavigation` - If you want to show/hide the previous/next navigation
+  - `showPanelNavigation` - If you want to show/hide the panel navigation
+  - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons
+  - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area
+ */
+
+const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    children,
+    previousNextNavigationPosition = 'inside',
+    previousNextIconSize = 'default',
+    minDistanceToCapture = 5,
+    minDistanceForAction = 0.2,
+    onAnimationStart,
+    onAnimationEnd,
+    onIndexChanged,
+    springConfig = undefined,
+    onRenderPanelNavigation,
+    panelNavigationTextDictionary = defaultPanelNavigationDictionary,
+    accessibilityRole = 'adjustable',
+    accessibilityLabel = 'carousel',
+    ...rest
+  } = _ref;
+  const viewport = useViewport();
+  const {
+    previousIcon,
+    nextIcon,
+    showPreviousNextNavigation,
+    showPanelNavigation,
+    spaceBetweenSlideAndPreviousNextNavigation,
+    spaceBetweenSlideAndPanelNavigation
+  } = useThemeTokens('Carousel', tokens, variant, {
+    viewport
+  });
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const childrenArray = React.Children.toArray(children);
+  const systemProps = selectProps({ ...rest,
+    accessibilityRole,
+    accessibilityLabel,
+    accessibilityValue: {
+      min: 1,
+      max: childrenArray.length,
+      now: activeIndex + 1
+    }
+  });
+  const {
+    reduceMotionEnabled
+  } = useA11yInfo();
+  const [containerLayout, setContainerLayout] = React.useState({
+    x: 0,
+    y: 0,
+    width: 0
+  });
+  const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] = React.useState(0);
+  const pan = React.useRef(new Animated.ValueXY()).current;
+  const animatedX = React.useRef(0);
+  const animatedY = React.useRef(0);
+  const isFirstSlide = !activeIndex;
+  const isLastSlide = activeIndex + 1 >= children.length;
+  const panelNavigationTokens = { ...staticTokens.stepTracker,
+    containerPaddingTop: spaceBetweenSlideAndPanelNavigation
+  };
+
+  const onContainerLayout = _ref2 => {
+    let {
+      nativeEvent: {
+        layout: {
+          x,
+          y,
+          width
+        }
+      }
+    } = _ref2;
+    return setContainerLayout(prevState => ({ ...prevState,
+      x,
+      y,
+      width
+    }));
+  };
+
+  const onPreviousNextNavigationButtonLayout = _ref3 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width
+        }
+      }
+    } = _ref3;
+    return setPreviousNextNavigationButtonWidth(width);
+  };
+
+  const updateOffset = React.useCallback(() => {
+    animatedX.current = containerLayout.width * activeIndex * -1;
+    animatedY.current = 0;
+    pan.setOffset({
+      x: animatedX.current,
+      y: animatedY.current
+    });
+    pan.setValue({
+      x: 0,
+      y: 0
+    });
+  }, [activeIndex, containerLayout.width, pan, animatedX]);
+  const animate = React.useCallback(toValue => {
+    if (reduceMotionEnabled) {
+      Animated.timing(pan, {
+        toValue,
+        duration: 1,
+        useNativeDriver: false
+      }).start();
+    } else {
+      Animated.spring(pan, { ...springConfig,
+        toValue,
+        useNativeDriver: false
+      }).start();
+    }
+  }, [pan, springConfig, reduceMotionEnabled]);
+  const updateIndex = React.useCallback(function () {
+    let delta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    const toValue = {
+      x: 0,
+      y: 0
+    };
+    let skipChanges = !delta;
+    let calcDelta = delta;
+
+    if (activeIndex <= 0 && delta < 0) {
+      skipChanges = true;
+      calcDelta = children.length + delta;
+    } else if (activeIndex + 1 >= children.length && delta > 0) {
+      skipChanges = true;
+      calcDelta = -1 * activeIndex + delta - 1;
+    }
+
+    if (skipChanges) {
+      animate(toValue);
+      return calcDelta;
+    }
+
+    const index = activeIndex + calcDelta;
+    setActiveIndex(index);
+    toValue.x = containerLayout.width * -1 * calcDelta;
+    animate(toValue);
+    if (onIndexChanged) onIndexChanged(calcDelta);
+    if (onAnimationEnd) onAnimationEnd(index);
+    return calcDelta;
+  }, [containerLayout.width, activeIndex, animate, children.length, onIndexChanged, onAnimationEnd]);
+  const fixOffsetAndGo = React.useCallback(delta => {
+    updateOffset();
+    if (onAnimationStart) onAnimationStart(activeIndex);
+    updateIndex(delta);
+  }, [updateIndex, updateOffset, activeIndex, onAnimationStart]);
+  const goToNeighboring = React.useCallback(function () {
+    let toPrev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    fixOffsetAndGo(toPrev ? -1 : 1);
+  }, [fixOffsetAndGo]);
+  const isSwipeAllowed = React.useCallback(() => {
+    if (Platform.OS === 'web') {
+      return !!(viewport === 'xs' || viewport === 'sm');
+    }
+
+    return true;
+  }, [viewport]);
+  const panResponder = React.useMemo(() => PanResponder.create({
+    onPanResponderTerminationRequest: () => false,
+    onMoveShouldSetResponderCapture: () => true,
+    onMoveShouldSetPanResponderCapture: (_, gestureState) => {
+      if (!isSwipeAllowed()) {
+        return false;
+      }
+
+      if (onAnimationStart) onAnimationStart(activeIndex);
+      return Math.abs(gestureState.dx) > minDistanceToCapture;
+    },
+    onPanResponderGrant: () => updateOffset(),
+    onPanResponderMove: Animated.event([null, {
+      dx: pan.x
+    }], {
+      useNativeDriver: false
+    }),
+    onPanResponderRelease: (_, gesture) => {
+      const correction = gesture.moveX - gesture.x0;
+
+      if (Math.abs(correction) < containerLayout.width * minDistanceForAction) {
+        animate({
+          x: 0,
+          y: 0
+        });
+      } else {
+        const delta = correction > 0 ? -1 : 1;
+        updateIndex(delta);
+      }
+    }
+  }), [containerLayout.width, updateIndex, updateOffset, animate, isSwipeAllowed, activeIndex, minDistanceForAction, onAnimationStart, minDistanceToCapture, pan.x]);
+  React.useEffect(() => {
+    pan.x.addListener(_ref4 => {
+      let {
+        value
+      } = _ref4;
+      animatedX.current = value;
+    });
+    pan.y.addListener(_ref5 => {
+      let {
+        value
+      } = _ref5;
+      animatedY.current = value;
+    });
+    return () => {
+      pan.x.removeAllListeners();
+      pan.y.removeAllListeners();
+    };
+  }, [pan.x, pan.y]);
+  const goToNext = React.useCallback(() => {
+    goToNeighboring();
+  }, [goToNeighboring]);
+  const goToPrev = React.useCallback(() => {
+    goToNeighboring(true);
+  }, [goToNeighboring]);
+  const goTo = React.useCallback(function () {
+    let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    const delta = index - activeIndex;
+
+    if (delta) {
+      fixOffsetAndGo(delta);
+    }
+  }, [fixOffsetAndGo, activeIndex]); // @TODO: - these are Allium-theme variants and won't have any effect in themes that don't implement them.
+  // Normally we avoid setting variants of subcomponents, however this could be re-considered.
+  // Related discussion - https://github.com/telus/universal-design-system/issues/1549
+
+  const previousNextIconButtonVariants = {
+    size: previousNextIconSize,
+    raised: true
+  };
+  return /*#__PURE__*/_jsxs(CarouselProvider, {
+    activeIndex: activeIndex,
+    totalItems: childrenArray.length,
+    width: containerLayout.width,
+    goTo: goTo,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: staticStyles.root,
+      onLayout: onContainerLayout,
+      ref: ref,
+      ...systemProps,
+      children: [showPreviousNextNavigation && /*#__PURE__*/_jsx(View, {
+        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true),
+        testID: "previous-button-container",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onLayout: onPreviousNextNavigationButtonLayout,
+          icon: previousIcon,
+          onPress: goToPrev,
+          variant: previousNextIconButtonVariants,
+          accessibilityLabel: "previous-button"
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: selectContainerStyles(containerLayout.width),
+        children: /*#__PURE__*/_jsx(Animated.View, {
+          style: StyleSheet.flatten([selectSwipeAreaStyles(children.length, containerLayout.width), {
+            transform: [{
+              translateX: pan.x
+            }, {
+              translateY: pan.y
+            }]
+          }]),
+          ...panResponder.panHandlers,
+          children: childrenArray.map((element, index) => {
+            const clonedElement = /*#__PURE__*/React.cloneElement(element, {
+              elementIndex: index
+            });
+            return /*#__PURE__*/_jsx(React.Fragment, {
+              children: clonedElement
+            }, index.toFixed(2));
+          })
+        })
+      }), showPreviousNextNavigation && /*#__PURE__*/_jsx(View, {
+        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false),
+        testID: "next-button-container",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onLayout: onPreviousNextNavigationButtonLayout,
+          icon: nextIcon,
+          onPress: goToNext,
+          variant: previousNextIconButtonVariants,
+          accessibilityLabel: "next-button"
+        })
+      })]
+    }), showPanelNavigation ? /*#__PURE__*/_jsx(StackView, {
+      direction: "row",
+      tokens: staticTokens.stackView,
+      children: onRenderPanelNavigation ? onRenderPanelNavigation({
+        activeIndex,
+        totalItems: childrenArray.length
+      }) : /*#__PURE__*/_jsx(StepTracker, {
+        current: activeIndex,
+        steps: childrenArray.map((_, index) => String(index)),
+        dictionary: panelNavigationTextDictionary,
+        tokens: panelNavigationTokens
+      })
+    }) : null]
+  });
+});
+Carousel.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Carousel'),
+  variant: variantProp.propType,
+
+  /**
+   * Slides to render in Carousel. Wrap individual slides in `Carousel.Item`
+   */
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+
+  /**
+   * `inside` renders the previous and next buttons inside the slide
+   * `outside` renders the previous and next buttons outside the slide
+   * `edge` renders the previous and next buttons at the edge of the slide
+   */
+  previousNextNavigationPosition: PropTypes.oneOf(['inside', 'outside', 'edge']),
+
+  /**
+   * Defines the size of the `IconButton` which is being used to render next and previous buttons
+   */
+  previousNextIconSize: PropTypes.oneOf(['default', 'small', 'large']),
+
+  /**
+   * Carousel uses `Animated.spring` to animate slide changes, use this option to pass custom animation configuration
+   */
+  springConfig: PropTypes.object,
+
+  /**
+   * Minimal part of slide width must be swiped for changing index.
+   * Otherwise animation restore current slide. Default value 0.2 means that 20% must be swiped for change index
+   */
+  minDistanceForAction: PropTypes.number,
+
+  /**
+   * Initiate animation after swipe this distance.
+   */
+  minDistanceToCapture: PropTypes.number,
+
+  /**
+   * Called when active index changed
+   * This function is also provided with a parameter indicating changed index (either 1, or -1)
+   * Use it as follows:
+   * ```js
+   *    const onIndexChangedCallback = React.useCallback((changedIndex) => {
+   *      console.log(changedIndex)
+   *    }, [])  // pass local dependencies as per your component
+   *    <Carousel
+   *      onIndexChanged={onIndexChangedCallback}
+   *    >
+   *      <Carousel.Item>First Slide</Carousel.Item>
+   *    </Carousel>
+   * ```
+   * Caution: Always consider wrapping your callback for `onIndexChanged` in `useCallback` in order to avoid bugs and performance issues
+   */
+  onIndexChanged: PropTypes.func,
+
+  /**
+   * Use this to render a custom panel navigation element instead of dots navigation
+   * This function is also provided with an object with the following properties
+   * activeIndex: index of current slide
+   * totalItems: total number of slides
+   * Use it as follows:
+   * ```js
+   *    <Carousel
+   *      onRenderPanelNavigation={({ totalItems, activeIndex }) => <Text>Showing {activeIndex + 1}</Text>}
+   *    >
+   *      <Carousel.Item>First Slide</Carousel.Item>
+   *    </Carousel>
+   * ```
+   */
+  onRenderPanelNavigation: PropTypes.func,
+
+  /**
+   * When slide animation start
+   * This function is also provided with a parameter indicating the current slide index before animation starts
+   * Use it as follows:
+   * ```js
+   *    const onAnimationStartCallback = React.useCallback((currentIndex) => {
+   *      console.log(currentIndex)
+   *    }, [])  // pass local dependencies as per your component
+   *    <Carousel
+   *      onAnimationStart={onAnimationStartCallback}
+   *    >
+   *      <Carousel.Item>First Slide</Carousel.Item>
+   *    </Carousel>
+   * ```
+   * Caution: Always consider wrapping your callback for `onAnimationStart` in `useCallback` in order to avoid bugs and performance issues
+   */
+  onAnimationStart: PropTypes.func,
+
+  /**
+   * When slide animation end with parameter of current index (after animation ends)
+   * This function is also provided with a parameter indicating the updated slide index after animation ends
+   * Use it as follows:
+   * ```js
+   *    const onAnimationEndCallback = React.useCallback((changedIndex) => {
+   *      console.log(changedIndex)
+   *    }, [])  // pass local dependencies as per your component
+   *    <Carousel
+   *      onAnimationEnd={onAnimationEndCallback}
+   *    >
+   *      <Carousel.Item>First Slide</Carousel.Item>
+   *    </Carousel>
+   * ```
+   * Caution: Always consider wrapping your callback for `onAnimationEnd` in `useCallback` in order to avoid bugs and performance issues
+   */
+  onAnimationEnd: PropTypes.func,
+
+  /**
+   * Use this to override the default text for panel navigation
+   */
+  panelNavigationTextDictionary: PropTypes.shape({
+    en: PropTypes.shape({
+      stepTrackerLabel: PropTypes.string.isRequired
+    }),
+    fr: PropTypes.shape({
+      stepTrackerLabel: PropTypes.string.isRequired
+    })
+  }),
+
+  /**
+   * Provide custom accessibilityRole for Carousel container
+   */
+  accessibilityRole: PropTypes.string,
+
+  /**
+   * Provide custom accessibilityLabel for Carousel container
+   */
+  accessibilityLabel: PropTypes.string
+};
+Carousel.Item = CarouselItem;
+Carousel.displayName = 'Carousel';
+export default Carousel;

package/lib-module/Carousel/CarouselContext.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const CarouselContext = /*#__PURE__*/React.createContext();
+
+const CarouselProvider = _ref => {
+  let {
+    children,
+    activeIndex,
+    totalItems,
+    width,
+    goTo
+  } = _ref;
+  const value = React.useMemo(() => ({
+    activeIndex,
+    totalItems,
+    width,
+    goTo
+  }), [activeIndex, totalItems, width, goTo]);
+  return /*#__PURE__*/_jsx(CarouselContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (context === undefined) {
+    throw new Error("'useCarousel' must be used within a 'CarouselProvider'");
+  }
+
+  return context;
+}
+
+CarouselProvider.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.element).isRequired,
+  activeIndex: PropTypes.number.isRequired,
+  totalItems: PropTypes.number.isRequired,
+  width: PropTypes.number.isRequired,
+  goTo: PropTypes.func.isRequired
+};
+export { CarouselProvider, useCarousel };

package/lib-module/Carousel/CarouselItem/CarouselItem.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import { selectSystemProps, a11yProps, viewProps } from '../../utils';
+import { useCarousel } from '../CarouselContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+/**
+ * `Carousel.Item` is used to wrap the content of an individual slide and is suppsoed to be the
+ * only top-level component passed to the `Carousel`
+ */
+
+const CarouselItem = _ref => {
+  let {
+    children,
+    elementIndex,
+    ...rest
+  } = _ref;
+  const {
+    width,
+    activeIndex,
+    totalItems
+  } = useCarousel();
+  const selectedProps = selectProps({ ...rest,
+    // `group` role crashes the app on Android so setting it to `none` for Android
+    accessibilityRole: Platform.OS === 'android' ? 'none' : 'group',
+    accessibilityLabel: "Showing ".concat(elementIndex + 1, " of ").concat(totalItems)
+  });
+  const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps;
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      width
+    },
+    ...selectedProps,
+    ...focusabilityProps,
+    children: children
+  });
+};
+
+CarouselItem.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Index of the current slide
+   * Don't pass this prop when using `Carousel.Item` as it is already being passed by `Carousel` top-level component
+   */
+  elementIndex: PropTypes.number,
+
+  /**
+   * Provide custom accessibilityLabelledBy for Carousel slide
+   */
+  accessibilityLabelledBy: PropTypes.string,
+
+  /**
+   * Content of the slide
+   */
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+};
+CarouselItem.displayName = 'Carousel.Item';
+export default CarouselItem;

package/lib-module/Carousel/CarouselItem/index.js

@@ -0,0 +1,2 @@
+import CarouselItem from './CarouselItem';
+export default CarouselItem;

package/lib-module/Carousel/index.js

@@ -0,0 +1,2 @@
+export * from './CarouselContext';
+export { default as Carousel } from './Carousel';

package/lib-module/StepTracker/StepTracker.js

@@ -109,7 +109,10 @@ const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
     dictionary,
     copy
   });
-  const stepTrackerLabel = getCopy('stepTrackerLabel').replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]);
+  const stepTrackerLabel = showStepTrackerLabel ? getCopy('stepTrackerLabel').replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]) : '';
+
+  const getStepLabel = index => themeTokens.showStepLabel ? getCopy('stepLabel').replace('%{stepNumber}', index + 1) : '';
+
   if (!steps.length) return null;
   const selectedProps = selectProps({
     accessibilityLabel: stepTrackerLabel,
@@ -135,7 +138,7 @@ const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
           return /*#__PURE__*/_jsx(Step, {
             status: current,
             label: label,
-            name: getCopy('stepLabel').replace('%{stepNumber}', index + 1),
+            name: getStepLabel(index),
             stepIndex: index,
             stepCount: steps.length,
             tokens: themeTokens