@telus-uds/components-base 3.1.0 → 3.3.0

package/src/Carousel/Carousel.jsx

@@ -25,11 +25,11 @@ import CarouselThumbnailNavigation from './CarouselThumbnailNavigation'
 import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel'
 import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem'
 import dictionary from './dictionary'
+import Box from '../Box'
 import {
   ITEMS_PER_VIEWPORT_MD,
   ITEMS_PER_VIEWPORT_LG_XL,
   DEFAULT_POSITION_OFFSET,
-  HERO_POSITION_OFFSET,
   LARGE_VIEWPORT_MARGIN,
   DEFAULT_VIEWPORT_MARGIN
 } from './Constants'
@@ -54,6 +54,24 @@ const staticStyles = StyleSheet.create({
     zIndex: 1,
     right: Platform.OS === 'web' ? undefined : 40,
     top: 40
+  },
+  heroMainContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    overflow: 'hidden',
+    zIndex: -1
+  },
+  heroSwipeArea: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: -1,
+    flexDirection: 'row'
   }
 })
 
@@ -75,6 +93,11 @@ const selectSwipeAreaStyles = (
   flexDirection: 'row'
 })
 
+const selectHeroContainerStyles = (width, hidden) => ({
+  width,
+  visibility: hidden ? 'hidden' : 'visible'
+})
+
 const getDynamicPositionProperty = (areStylesAppliedOnPreviousButton) =>
   areStylesAppliedOnPreviousButton ? 'left' : 'right'
 
@@ -84,19 +107,13 @@ const selectControlButtonPositionStyles = ({
   positionProperty = getDynamicPositionProperty(),
   spaceBetweenSlideAndButton,
   enablePeeking,
-  enableDisplayMultipleItemsPerSlide,
-  enableHero,
-  viewport
+  enableDisplayMultipleItemsPerSlide
 }) => {
   const styles = {}
   if (positionVariant === 'edge') {
     styles[positionProperty] = -1 * (buttonWidth / 2)
   } else if (positionVariant === 'inside') {
-    if (enableHero && viewport === 'xl') {
-      styles[positionProperty] = HERO_POSITION_OFFSET
-    } else {
-      styles[positionProperty] = DEFAULT_POSITION_OFFSET
-    }
+    styles[positionProperty] = DEFAULT_POSITION_OFFSET
   } else if (positionVariant === 'outside') {
     if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
       styles[positionProperty] = 0
@@ -115,9 +132,7 @@ const selectPreviousNextNavigationButtonStyles = (
   isLastSlide,
   areStylesAppliedOnPreviousButton,
   enablePeeking,
-  enableDisplayMultipleItemsPerSlide,
-  enableHero,
-  viewport
+  enableDisplayMultipleItemsPerSlide
 ) => {
   const styles = {
     zIndex: 1,
@@ -139,9 +154,7 @@ const selectPreviousNextNavigationButtonStyles = (
       positionProperty: getDynamicPositionProperty(areStylesAppliedOnPreviousButton),
       spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
       enablePeeking,
-      enableDisplayMultipleItemsPerSlide,
-      enableHero,
-      viewport
+      enableDisplayMultipleItemsPerSlide
     })
   }
 }
@@ -204,17 +217,14 @@ const selectMainContainerStyles = (enableHero, viewport) => {
   return {}
 }
 
-const selectNavigationStyles = (tabs, tabsPanelHeight, enableHero, viewport) => {
-  let marginTop = 0
+const selectNavigationStyles = (tabs, enableHero, viewport) => {
   let marginHorizontal = 0
 
   if (enableHero && tabs) {
-    marginTop = -tabsPanelHeight
     marginHorizontal = viewport === 'xl' ? LARGE_VIEWPORT_MARGIN : DEFAULT_VIEWPORT_MARGIN
   }
 
   return {
-    marginTop,
     marginHorizontal
   }
 }
@@ -350,6 +360,7 @@ const Carousel = React.forwardRef(
       itemLabel = 'item',
       previousNextNavigationPosition = 'inside',
       stepTrackerVariant,
+      progressBarVariant = { style: 'subtle' },
       previousNextIconSize = 'default',
       minDistanceToCapture = 5,
       minDistanceForAction = 0.2,
@@ -368,7 +379,8 @@ const Carousel = React.forwardRef(
         <CarouselThumbnailNavigation thumbnails={thumbnails} />
       ) : (
         <CarouselStepTracker
-          variant={stepTrackerVariant}
+          stepTrackerVariant={stepTrackerVariant}
+          progressBarVariant={progressBarVariant}
           enableDisplayMultipleItemsPerSlide={enableDisplayMultipleItemsPerSlide}
         />
       ),
@@ -420,6 +432,13 @@ const Carousel = React.forwardRef(
       height: 0
     })
     const containerLayoutRef = React.useRef(containerLayout)
+    const [heroContainerLayout, setHeroContainerLayout] = React.useState({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    })
+    const heroContainerLayoutRef = React.useRef(heroContainerLayout)
 
     const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] =
       React.useState(0)
@@ -427,6 +446,9 @@ const Carousel = React.forwardRef(
     const pan = React.useRef(new Animated.ValueXY()).current
     const animatedX = React.useRef(0)
     const animatedY = React.useRef(0)
+    const heroPan = React.useRef(new Animated.ValueXY()).current
+    const heroAnimatedX = React.useRef(0)
+    const heroAnimatedY = React.useRef(0)
     const [isAnimating, setIsAnimating] = React.useState(false)
     /**
      * While having the same starting point, `isAutoPlayEnabled` and `isCarouselPlaying` are different states
@@ -465,31 +487,40 @@ const Carousel = React.forwardRef(
         y: animatedY.current
       })
       pan.setValue({ x: 0, y: 0 })
-    }, [pan, animatedX])
+      if (enableHero) {
+        heroAnimatedX.current = heroContainerLayoutRef.current.width * activeIndexRef.current * -1
+        heroAnimatedY.current = 0
+        heroPan.setOffset({
+          x: heroAnimatedX.current,
+          y: heroAnimatedY.current
+        })
+        heroPan.setValue({ x: 0, y: 0 })
+      }
+    }, [pan, animatedX, heroPan, heroAnimatedX, enableHero])
 
     const animate = React.useCallback(
-      (toValue, toIndex) => {
+      (panToAnimate, toValue, toIndex) => {
         const handleAnimationEndToIndex = (...args) => handleAnimationEnd(toIndex, ...args)
         if (reduceMotionRef.current || isSwiping.current) {
-          Animated.timing(pan, { toValue, duration: 1, useNativeDriver: false }).start(
+          Animated.timing(panToAnimate, { toValue, duration: 1, useNativeDriver: false }).start(
             handleAnimationEndToIndex
           )
         } else if (isAutoPlayEnabled) {
-          Animated.timing(pan, {
+          Animated.timing(panToAnimate, {
             ...springConfig,
             toValue,
             useNativeDriver: false,
             duration: transitionDuration * 1000
           }).start(handleAnimationEndToIndex)
         } else if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
-          Animated.timing(pan, {
+          Animated.timing(panToAnimate, {
             ...springConfig,
             toValue,
             useNativeDriver: false,
             duration: transitionDuration ? transitionDuration * 1000 : 1000
           }).start(handleAnimationEndToIndex)
         } else {
-          Animated.spring(pan, {
+          Animated.spring(panToAnimate, {
             ...springConfig,
             toValue,
             useNativeDriver: false
@@ -497,7 +528,6 @@ const Carousel = React.forwardRef(
         }
       },
       [
-        pan,
         springConfig,
         handleAnimationEnd,
         transitionDuration,
@@ -534,7 +564,10 @@ const Carousel = React.forwardRef(
 
         const index = activeIndexRef.current + calcDelta
         if (skipChanges) {
-          animate(toValue, index)
+          animate(pan, toValue, index)
+          if (enableHero) {
+            animate(heroPan, toValue, index)
+          }
           return calcDelta
         }
 
@@ -551,7 +584,12 @@ const Carousel = React.forwardRef(
         )
 
         toValue.x = finalWidth * -1 * calcDelta
-        animate(toValue, index)
+        const heroToValue = { x: 0, y: 0 }
+        heroToValue.x = heroContainerLayoutRef.current.width * -1 * calcDelta
+        animate(pan, toValue, index)
+        if (enableHero) {
+          animate(heroPan, heroToValue, index)
+        }
         if (isCarouselPlaying) {
           stopAutoplay()
           if (
@@ -584,7 +622,10 @@ const Carousel = React.forwardRef(
         stopAutoplay,
         isAutoPlayEnabled,
         viewport,
-        enablePeeking
+        enablePeeking,
+        pan,
+        heroPan,
+        enableHero
       ]
     )
 
@@ -625,8 +666,6 @@ const Carousel = React.forwardRef(
       [fixOffsetAndGo]
     )
 
-    const [tabsPanelHeight, setTabsPanelHeight] = React.useState(0)
-
     React.useEffect(() => {
       activeIndexRef.current = activeIndex
     }, [activeIndex])
@@ -639,6 +678,10 @@ const Carousel = React.forwardRef(
       containerLayoutRef.current = containerLayout
     }, [containerLayout])
 
+    React.useEffect(() => {
+      heroContainerLayoutRef.current = heroContainerLayout
+    }, [heroContainerLayout])
+
     React.useEffect(() => {
       pan.x.addListener(({ value }) => {
         animatedX.current = value
@@ -646,6 +689,14 @@ const Carousel = React.forwardRef(
       pan.y.addListener(({ value }) => {
         animatedY.current = value
       })
+      if (enableHero) {
+        heroPan.x.addListener(({ value }) => {
+          heroAnimatedX.current = value
+        })
+        heroPan.y.addListener(({ value }) => {
+          heroAnimatedY.current = value
+        })
+      }
       if (isCarouselPlaying) {
         startAutoplay()
       }
@@ -653,8 +704,21 @@ const Carousel = React.forwardRef(
         stopAutoplay()
         pan.x.removeAllListeners()
         pan.y.removeAllListeners()
+        if (enableHero) {
+          heroPan.x.removeAllListeners()
+          heroPan.y.removeAllListeners()
+        }
       }
-    }, [pan.x, pan.y, startAutoplay, stopAutoplay, isCarouselPlaying])
+    }, [
+      pan.x,
+      pan.y,
+      heroPan.x,
+      heroPan.y,
+      startAutoplay,
+      stopAutoplay,
+      isCarouselPlaying,
+      enableHero
+    ])
 
     React.useEffect(() => {
       const subscription = Dimensions.addEventListener('change', () => {
@@ -682,16 +746,18 @@ const Carousel = React.forwardRef(
       }
     }, [stopAutoplay])
 
-    const onTabsPanelLayout = (event) => {
-      setTabsPanelHeight(event.nativeEvent.layout.height)
-    }
-
     const onContainerLayout = ({
       nativeEvent: {
         layout: { x, y, width, height }
       }
     }) => setContainerLayout((prevState) => ({ ...prevState, x, y, width, height }))
 
+    const onHeroContainerLayout = ({
+      nativeEvent: {
+        layout: { x, y, width, height }
+      }
+    }) => setHeroContainerLayout((prevState) => ({ ...prevState, x, y, width, height }))
+
     const onPreviousNextNavigationButtonLayout = ({
       nativeEvent: {
         layout: { width }
@@ -742,7 +808,7 @@ const Carousel = React.forwardRef(
             const correction = gesture.moveX - gesture.x0
 
             if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
-              animate({ x: 0, y: 0 }, 0)
+              animate(pan, { x: 0, y: 0 }, 0)
             } else {
               const delta = correction > 0 ? -1 : 1
               updateIndex(delta, TRANSITION_MODES.SWIPE)
@@ -752,6 +818,65 @@ const Carousel = React.forwardRef(
           }
         }),
       [
+        pan,
+        updateIndex,
+        updateOffset,
+        animate,
+        isSwipeAllowed,
+        minDistanceForAction,
+        handleAnimationStart,
+        minDistanceToCapture,
+        startAutoplay,
+        stopAutoplay,
+        isCarouselPlaying
+      ]
+    )
+
+    const heroPanResponder = React.useMemo(
+      () =>
+        PanResponder.create({
+          onPanResponderTerminationRequest: () => false,
+          onMoveShouldSetResponderCapture: () => true,
+          onMoveShouldSetPanResponderCapture: (_, gestureState) => {
+            if (!isSwipeAllowed()) {
+              return false
+            }
+
+            handleAnimationStart(activeIndexRef.current)
+
+            const allow = Math.abs(gestureState.dx) > minDistanceToCapture
+
+            if (allow) {
+              isSwiping.current = true
+              stopAutoplay()
+            }
+
+            return allow
+          },
+          onPanResponderGrant: () => {
+            updateOffset()
+          },
+          onPanResponderMove: Animated.event([null, { dx: heroPan.x }], {
+            useNativeDriver: false
+          }),
+          onPanResponderRelease: (_, gesture) => {
+            if (isCarouselPlaying) {
+              startAutoplay()
+            }
+            const correction = gesture.moveX - gesture.x0
+
+            if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
+              animate(heroPan, { x: 0, y: 0 }, 0)
+            } else {
+              const delta = correction > 0 ? -1 : 1
+              updateIndex(delta, TRANSITION_MODES.SWIPE)
+            }
+
+            isSwiping.current = false
+          }
+        }),
+      [
+        heroPan,
         updateIndex,
         updateOffset,
         animate,
@@ -759,7 +884,6 @@ const Carousel = React.forwardRef(
         minDistanceForAction,
         handleAnimationStart,
         minDistanceToCapture,
-        pan.x,
         startAutoplay,
         stopAutoplay,
         isCarouselPlaying
@@ -888,9 +1012,7 @@ const Carousel = React.forwardRef(
                       positionProperty: getDynamicPositionProperty(),
                       spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
                       enablePeeking,
-                      enableDisplayMultipleItemsPerSlide,
-                      enableHero,
-                      viewport
+                      enableDisplayMultipleItemsPerSlide
                     })
                   ]}
                 >
@@ -914,9 +1036,7 @@ const Carousel = React.forwardRef(
                     isLastSlide,
                     true,
                     enablePeeking,
-                    enableDisplayMultipleItemsPerSlide,
-                    enableHero,
-                    viewport
+                    enableDisplayMultipleItemsPerSlide
                   )}
                   testID="previous-button-container"
                 >
@@ -974,9 +1094,7 @@ const Carousel = React.forwardRef(
                       peekingProps: getPeekingProps(viewport),
                       enableDisplayMultipleItemsPerSlide,
                       viewport,
-                      backgroundColor: element.props.backgroundColor,
-                      enableHero,
-                      tabsPanelHeight
+                      backgroundColor: element.props.backgroundColor
                     })
                     return <React.Fragment key={index.toFixed(2)}>{clonedElement}</React.Fragment>
                   })}
@@ -992,9 +1110,7 @@ const Carousel = React.forwardRef(
                     isLastSlide,
                     false,
                     enablePeeking,
-                    enableDisplayMultipleItemsPerSlide,
-                    enableHero,
-                    viewport
+                    enableDisplayMultipleItemsPerSlide
                   )}
                   testID="next-button-container"
                 >
@@ -1012,14 +1128,39 @@ const Carousel = React.forwardRef(
                 </View>
               ) : null}
             </View>
-            <View
-              style={selectNavigationStyles(tabs, tabsPanelHeight, enableHero, viewport)}
-              onLayout={tabs && onTabsPanelLayout}
-            >
+            <View style={selectNavigationStyles(tabs, enableHero, viewport)}>
               {showPanelNavigation ? activePanelNavigation : null}
             </View>
           </CarouselProvider>
         </View>
+        {enableHero && (
+          <View style={staticStyles.heroMainContainer}>
+            <Animated.View
+              style={StyleSheet.flatten([
+                staticStyles.heroSwipeArea,
+                {
+                  transform: [{ translateX: heroPan.x }, { translateY: heroPan.y }]
+                }
+              ])}
+              onLayout={onHeroContainerLayout}
+              {...heroPanResponder.panHandlers}
+              {...getA11yPropsFromHtmlTag(tag)}
+              accessibilityLiveRegion={accessibilityLiveRegion}
+            >
+              {childrenArray.map((element, index) => {
+                const hidden = !isAnimating && index !== activeIndex
+                return (
+                  <View
+                    style={selectHeroContainerStyles(heroContainerLayout.width, hidden)}
+                    key={index.toFixed(2)}
+                  >
+                    <Box flex={1} variant={{ background: element.props.backgroundColor }} />
+                  </View>
+                )
+              })}
+            </Animated.View>
+          </View>
+        )}
       </View>
     )
   }
@@ -1033,6 +1174,10 @@ Carousel.propTypes = {
    * Prop related to StepTracker Variants
    */
   stepTrackerVariant: variantProp.propType,
+  /**
+   * Prop related to ProgressBar Variants
+   */
+  progressBarVariant: variantProp.propType,
   /**
    * Slides to render in Carousel. Wrap individual slides in `Carousel.Item`
    */

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -11,7 +11,6 @@ import {
 } from '../../utils'
 import { useCarousel } from '../CarouselContext'
 import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, GAP_BETWEEN_ITEMS } from '../Constants'
-import Box from '../../Box'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -101,8 +100,6 @@ const CarouselItem = React.forwardRef(
       enableDisplayMultipleItemsPerSlide,
       viewport,
       backgroundColor,
-      enableHero,
-      tabsPanelHeight,
       ...rest
     },
     ref
@@ -131,10 +128,7 @@ const CarouselItem = React.forwardRef(
         {...focusabilityProps}
         ref={ref}
       >
-        <Box variant={{ background: backgroundColor }} space={0} flex={1}>
-          {children}
-          {enableHero && <View style={{ height: tabsPanelHeight }} />}
-        </Box>
+        {children}
       </View>
     )
   }

package/src/Carousel/CarouselStepTracker/CarouselStepTracker.jsx

@@ -9,7 +9,7 @@ import Progress from '../../Progress'
 import { variantProp } from '../../utils'
 
 const CarouselStepTracker = React.forwardRef(
-  ({ variant, enableDisplayMultipleItemsPerSlide }, ref) => {
+  ({ stepTrackerVariant, progressBarVariant, enableDisplayMultipleItemsPerSlide }, ref) => {
     const {
       activeIndex,
       totalItems,
@@ -47,7 +47,7 @@ const CarouselStepTracker = React.forwardRef(
                     items: totalItems,
                     current: activeIndex + 1
                   }}
-                  variant={{ style: 'subtle' }}
+                  variant={progressBarVariant}
                   accessibilityLabel={getCopyWithPlaceholders('stepTrackerLabel')}
                 />
               </Progress>
@@ -66,7 +66,7 @@ const CarouselStepTracker = React.forwardRef(
             stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
           }}
           tokens={stepTrackerTokens}
-          variant={variant}
+          variant={stepTrackerVariant}
         />
       </StackView>
     )
@@ -76,7 +76,8 @@ const CarouselStepTracker = React.forwardRef(
 CarouselStepTracker.displayName = 'CarouselStepTracker'
 
 CarouselStepTracker.propTypes = {
-  variant: variantProp.propType,
+  stepTrackerVariant: variantProp.propType,
+  progressBarVariant: variantProp.propType,
   enableDisplayMultipleItemsPerSlide: PropTypes.bool
 }
 

package/src/ExpandCollapse/Control.jsx

@@ -39,7 +39,9 @@ function selectContainerStyles({
     borderBottomRightRadius,
     borderTopLeftRadius,
     borderBottomLeftRadius,
-    ...verticalAlignRow(verticalAlign, iconPosition === 'right')
+    ...verticalAlignRow(verticalAlign, iconPosition === 'right'),
+    // Updated default alignment due to the change in Pressable's behavior from div to button on web.
+    textAlign: Platform.OS === 'web' ? 'inherit' : undefined
   }
 }
 

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -29,7 +29,7 @@ const ExpandCollapseMini = React.forwardRef(
               // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
               icon: null,
               borderColor: 'transparent',
-              textLine: 'none',
+              textLine: tokens.textLine ?? 'none',
               backgroundColor: 'transparent'
             }}
             // TODO refactor

package/src/List/ListItemBase.jsx

@@ -110,8 +110,7 @@ const staticStyles = StyleSheet.create({
   titleAndContentContainer: {
     flexDirection: 'column',
     flexShrink: 1,
-    flexGrow: 1,
-    textAlign: 'justify'
+    flexGrow: 1
   }
 })
 

package/src/List/ListItemMark.jsx

@@ -27,8 +27,13 @@ const selectBulletPositioningStyles = ({ itemIconSize }) => ({
   height: itemIconSize
 })
 
-const selectBulletContainerStyles = ({ itemBulletContainerWidth, itemBulletContainerAlign }) => ({
+const selectBulletContainerStyles = ({
+  itemBulletContainerWidth,
+  itemBulletContainerHeight,
+  itemBulletContainerAlign
+}) => ({
   width: itemBulletContainerWidth,
+  height: itemBulletContainerHeight,
   alignItems: itemBulletContainerAlign
 })
 
@@ -45,11 +50,12 @@ const ListItemMark = React.forwardRef(({ icon, iconColor, iconSize, tokens = {}
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens
 
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
+  const bulletContainerStyles = selectBulletContainerStyles(themeTokens)
 
   if (icon) {
     const iconTokens = selectItemIconTokens(themeTokens)
     return (
-      <View style={sideItemContainerStyles}>
+      <View style={[sideItemContainerStyles, bulletContainerStyles]}>
         <IconComponent size={iconSize || iconTokens.size} color={iconColor || iconTokens.color} />
       </View>
     )
@@ -66,7 +72,7 @@ const ListItemMark = React.forwardRef(({ icon, iconColor, iconSize, tokens = {}
         style={[staticStyles.bulletPositioning, itemBulletPositioningStyles]}
         testID="unordered-item-bullet"
       >
-        <Icon icon={bulletIcon} tokens={{ color: bulletColor }} />
+        <Icon icon={bulletIcon} tokens={{ color: bulletColor, size: themeTokens.itemIconSize }} />
       </View>
     </View>
   )

package/src/Modal/ModalContent.jsx

@@ -117,7 +117,7 @@ const ModalContent = React.forwardRef(
                 <Typography variant={{ size: subHeadingSize }}>{subHeading}</Typography>
               </View>
             )}
-            {Boolean(bodyText && hasHeadingSection) && <Spacer space={3} />}
+            {Boolean((bodyText || children) && hasHeadingSection) && <Spacer space={3} />}
           </View>
         )}
         {bodyText && (

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -275,9 +275,9 @@ const MultiSelectFilter = React.forwardRef(
                 {subtitle}
               </Typography>
             </Row>
-            <Spacer space={4} />
           </>
         )}
+        <Spacer space={4} />
         <View style={styles.options}>
           <ScrollView onLayout={handleScrollViewLayout}>
             <Row distribute="between" onLayout={handleRowLayout}>