@telus-uds/components-base 3.22.0 → 3.24.0

package/src/Button/propTypes.js

@@ -10,6 +10,12 @@ export const textAndA11yText = ABBPropTypes.childrenOf(
 
 const buttonPropTypes = {
   tokens: getTokensPropType('Button'),
+  /**
+   * If true, the button will honor the align-items value from its parent flex container.
+   * If false, the button will always align to 'flex-start' in a flex container.
+   * Currently, `heightFull`'s default behaviour will expand to the full height of its parent's flex container. In an upcoming major release, the default behaviour will be changed to expand based on the content. To maintain the expected behaviour, you must explicitly set `heightFull: true`
+   */
+  heightFull: PropTypes.bool,
   /**
    * If true, prevents the button from being pressed, changes the cursor (on web) and accessibility
    * attributes to communicate this to the user, and applies `inactive: true` appearances from the theme

package/src/Card/CardBase.jsx

@@ -6,9 +6,18 @@ import { applyShadowToken } from '../ThemeProvider'
 import { getTokensPropType, responsiveProps, useResponsiveProp, formatImageSource } from '../utils'
 import { a11yProps, viewProps, selectSystemProps } from '../utils/props'
 import backgroundImageStylesMap from './backgroundImageStylesMap'
+import FlexGrid from '../FlexGrid/FlexGrid'
+import FlexGridRow from '../FlexGrid/Row'
+import FlexGridCol from '../FlexGrid/Col'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const GRID_COLUMNS = 12
+
+const isOverlayColor = (color) => {
+  return color && typeof color === 'string' && color.startsWith('rgba(')
+}
+
 const setBackgroundImage = ({
   src,
   alt,
@@ -22,12 +31,10 @@ const setBackgroundImage = ({
   const borderWidth = cardStyle?.borderWidth || 0
   const adjustedBorderRadius = Math.max(0, borderRadius - borderWidth)
 
-  // For contain mode with position and align, use CSS background properties for web
   if (backgroundImageResizeMode === 'contain' && backgroundImagePosition && backgroundImageAlign) {
     const positionKey = `${backgroundImagePosition}-${backgroundImageAlign}`
 
     if (Platform.OS === 'web') {
-      // Create background position based on position and align
       let backgroundPosition
 
       switch (positionKey) {
@@ -77,7 +84,7 @@ const setBackgroundImage = ({
         </View>
       )
     }
-    // For React Native, apply positioning styles with full dimensions
+
     const positionStyles = backgroundImageStylesMap[positionKey] || {}
 
     return (
@@ -95,7 +102,6 @@ const setBackgroundImage = ({
     )
   }
 
-  // Use ImageBackground for all other resize modes and React Native
   return (
     <ImageBackground
       source={src}
@@ -121,6 +127,10 @@ export const selectStyles = ({
   paddingLeft,
   paddingRight,
   paddingTop,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
   minWidth,
   shadow,
   backgroundGradient,
@@ -128,9 +138,27 @@ export const selectStyles = ({
   maxHeight,
   overflowY
 }) => {
+  const hasGradient = (gradient || backgroundGradient) && Platform.OS === 'web'
+
+  let backgroundImageValue = null
+
+  if (hasGradient) {
+    const gradientObj = gradient || backgroundGradient
+    const gradientString = `linear-gradient(${gradientObj.angle}deg, ${gradientObj.stops[0].color}, ${gradientObj.stops[1].color})`
+    const shouldApplyOverlay =
+      (gradient || (backgroundGradient && backgroundColor && backgroundColor !== 'transparent')) &&
+      isOverlayColor(backgroundColor)
+
+    backgroundImageValue = shouldApplyOverlay
+      ? `linear-gradient(${backgroundColor}, ${backgroundColor}), ${gradientString}`
+      : gradientString
+  }
+
+  const boxShadowColor = isOverlayColor(backgroundColor) ? backgroundColor : 'white'
+
   return {
     flex,
-    backgroundColor,
+    backgroundColor: hasGradient ? 'transparent' : backgroundColor,
     borderColor,
     borderRadius,
     borderWidth,
@@ -138,19 +166,23 @@ export const selectStyles = ({
     paddingLeft,
     paddingRight,
     paddingTop,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
     minWidth,
     ...applyShadowToken(shadow),
     ...(gradient && Platform.OS === 'web'
       ? {
-          backgroundImage: `linear-gradient(${gradient.angle}deg, ${gradient.stops[0].color}, ${gradient.stops[1].color})`,
+          backgroundImage: backgroundImageValue,
           backgroundOrigin: `border-box`,
-          boxShadow: `inset 0 1000px white`,
+          boxShadow: `inset 0 1000px ${boxShadowColor}`,
           border: `${borderWidth}px solid transparent`
         }
       : {}),
     ...(backgroundGradient && Platform.OS === 'web'
       ? {
-          backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
+          backgroundImage: backgroundImageValue
         }
       : {}),
     ...(Platform.OS === 'web' ? { maxHeight, overflowY } : {})
@@ -162,8 +194,8 @@ export const selectStyles = ({
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
 const CardBase = React.forwardRef(
-  ({ children, tokens, dataSet, backgroundImage, ...rest }, ref) => {
-    const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens)
+  ({ children, tokens, dataSet, backgroundImage, fullBleedContent, cardState, ...rest }, ref) => {
+    const cardStyle = selectStyles(typeof tokens === 'function' ? tokens(cardState) : tokens)
     const props = selectProps(rest)
 
     let content = children
@@ -174,12 +206,16 @@ const CardBase = React.forwardRef(
     const backgroundImageAlign = useResponsiveProp(align)
     const imageSourceViewport = formatImageSource(useResponsiveProp(src))
 
+    const {
+      content: fullBleedImageContent,
+      position: fullBleedContentPosition,
+      imgCol
+    } = fullBleedContent || {}
+    const fullBleedPosition = useResponsiveProp(fullBleedContentPosition, 'bottom')
+
     if (backgroundImage && src) {
-      // When there's a background image, separate the padding from the container style
-      // so the image can fill the entire container without padding interference
       const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...containerStyle } = cardStyle
 
-      // Only create padding wrapper if there's actually padding defined
       const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight
       const paddedContent = hasPadding ? (
         <View style={{ paddingTop, paddingBottom, paddingLeft, paddingRight }}>{children}</View>
@@ -204,6 +240,53 @@ const CardBase = React.forwardRef(
       )
     }
 
+    if (fullBleedContent && fullBleedImageContent) {
+      const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...containerStyle } = cardStyle
+      const imageColumns = imgCol || { xs: GRID_COLUMNS }
+
+      const textColumns = {}
+      Object.keys(imageColumns).forEach((breakpoint) => {
+        textColumns[breakpoint] = GRID_COLUMNS - (imageColumns[breakpoint] || GRID_COLUMNS)
+      })
+
+      const imageFirst = fullBleedPosition === 'top' || fullBleedPosition === 'left'
+
+      const imageColContent = (
+        <FlexGridCol {...imageColumns} style={staticStyles.fullBleedImageCol}>
+          {fullBleedImageContent}
+        </FlexGridCol>
+      )
+
+      const textColContent = (
+        <FlexGridCol
+          {...textColumns}
+          style={{ paddingTop, paddingBottom, paddingLeft, paddingRight }}
+        >
+          {children}
+        </FlexGridCol>
+      )
+
+      return (
+        <View style={containerStyle} dataSet={dataSet} ref={ref} {...props}>
+          <FlexGrid>
+            <FlexGridRow>
+              {imageFirst ? (
+                <>
+                  {imageColContent}
+                  {textColContent}
+                </>
+              ) : (
+                <>
+                  {textColContent}
+                  {imageColContent}
+                </>
+              )}
+            </FlexGridRow>
+          </FlexGrid>
+        </View>
+      )
+    }
+
     return (
       <View style={cardStyle} dataSet={dataSet} ref={ref} {...props}>
         {content}
@@ -213,6 +296,18 @@ const CardBase = React.forwardRef(
 )
 CardBase.displayName = 'CardBase'
 
+export const fullBleedContentPropTypes = PropTypes.shape({
+  content: PropTypes.node.isRequired,
+  alt: PropTypes.string,
+  position: responsiveProps.getTypeOptionallyByViewport(
+    PropTypes.oneOf(['bottom', 'left', 'right', 'top'])
+  ),
+  align: responsiveProps.getTypeOptionallyByViewport(
+    PropTypes.oneOf(['start', 'end', 'center', 'stretch'])
+  ),
+  imgCol: PropTypes.object
+})
+
 const staticStyles = StyleSheet.create({
   imageBackground: { width: '100%', height: '100%' },
   contentOverlay: {
@@ -231,6 +326,9 @@ const staticStyles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
     height: '100%'
+  },
+  fullBleedImageCol: {
+    padding: 0
   }
 })
 
@@ -255,7 +353,8 @@ CardBase.propTypes = {
     align: responsiveProps.getTypeOptionallyByViewport(
       PropTypes.oneOf(['start', 'end', 'center', 'stretch'])
     )
-  })
+  }),
+  fullBleedContent: fullBleedContentPropTypes
 }
 
 export default CardBase

package/src/Card/PressableCardBase.jsx

@@ -18,7 +18,7 @@ import {
   viewProps,
   withLinkRouter
 } from '../utils'
-import CardBase from './CardBase'
+import CardBase, { fullBleedContentPropTypes } from './CardBase'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
@@ -37,6 +37,10 @@ const tokenKeys = [
   'paddingLeft',
   'paddingRight',
   'paddingTop',
+  'marginTop',
+  'marginBottom',
+  'marginLeft',
+  'marginRight',
   'minWidth',
   'shadow',
   'contentAlignItems',
@@ -81,6 +85,7 @@ const PressableCardBase = React.forwardRef(
       hrefAttrs,
       dataSet,
       backgroundImage,
+      fullBleedContent,
       accessibilityRole = href ? 'link' : undefined,
       ...rawRest
     },
@@ -159,13 +164,14 @@ const PressableCardBase = React.forwardRef(
               setFocused(false)
               setPressed(false)
             }}
-            style={{ ...staticStyles.linkContainer, textDecoration: 'none' }}
+            style={staticStyles.linkContainer}
             {...(hrefAttrs || {})}
             role={accessibilityRole}
           >
             <CardBase
               tokens={getCardTokens({ pressed, focused, hovered })}
               backgroundImage={backgroundImage}
+              fullBleedContent={fullBleedContent}
             >
               {typeof children === 'function'
                 ? children(getCardState({ pressed, focused, hovered }))
@@ -188,7 +194,11 @@ const PressableCardBase = React.forwardRef(
         {...selectProps({ ...rest, accessibilityRole })}
       >
         {(pressableState) => (
-          <CardBase tokens={getCardTokens(pressableState)} backgroundImage={backgroundImage}>
+          <CardBase
+            tokens={getCardTokens(pressableState)}
+            backgroundImage={backgroundImage}
+            fullBleedContent={fullBleedContent}
+          >
             {typeof children === 'function' ? children(getCardState(pressableState)) : children}
           </CardBase>
         )}
@@ -206,7 +216,8 @@ const staticStyles = StyleSheet.create({
     flex: 1,
     display: 'flex',
     alignItems: 'stretch',
-    justifyContent: 'flex-start'
+    justifyContent: 'flex-start',
+    textDecorationLine: 'none'
   }
 })
 
@@ -234,7 +245,8 @@ PressableCardBase.propTypes = {
       PropTypes.oneOf(['start', 'end', 'center', 'stretch']),
       PropTypes.object
     ])
-  })
+  }),
+  fullBleedContent: fullBleedContentPropTypes
 }
 
 export default withLinkRouter(PressableCardBase)

package/src/Carousel/Carousel.jsx

@@ -407,6 +407,7 @@ const Carousel = React.forwardRef(
     ref
   ) => {
     let childrenArray = unpackFragment(children)
+    const isTransitioningRef = React.useRef(false)
     const viewport = useViewport()
     const totalItems = getTotalItems(enableDisplayMultipleItemsPerSlide, childrenArray, viewport)
     const autoPlayFeatureEnabled =
@@ -482,10 +483,14 @@ const Carousel = React.forwardRef(
     )
     const handleAnimationEnd = React.useCallback(
       (...args) => {
-        if (typeof onAnimationEnd === 'function') onAnimationEnd(...args)
-        setIsAnimating(false)
+        const result = args[args.length - 1]
+        if (result?.finished) {
+          if (typeof onAnimationEnd === 'function') onAnimationEnd(...args)
+          setIsAnimating(false)
+          isTransitioningRef.current = false
+        }
       },
-      [onAnimationEnd]
+      [onAnimationEnd, isTransitioningRef]
     )
 
     const updateOffset = React.useCallback(() => {
@@ -602,7 +607,9 @@ const Carousel = React.forwardRef(
 
         const index = activeIndexRef.current + calcDelta
         if (skipChanges) {
+          isTransitioningRef.current = true
           animate(pan, toValue, index)
+
           if (enableHero) {
             animate(heroPan, toValue, index)
           }
@@ -622,6 +629,7 @@ const Carousel = React.forwardRef(
         toValue.x = finalWidth * -1 * calcDelta
         const heroToValue = { x: 0, y: 0 }
         heroToValue.x = heroContainerLayoutRef.current.width * -1 * calcDelta
+        isTransitioningRef.current = true
         animate(pan, toValue, index)
         if (enableHero) {
           animate(heroPan, heroToValue, index)
@@ -1012,6 +1020,15 @@ const Carousel = React.forwardRef(
       setisCarouselPlaying((prevState) => !prevState)
     }, [isCarouselPlaying, stopAutoplay, startAutoplay])
 
+    const handleKeyDown = React.useCallback(
+      (event) => {
+        if (isTransitioningRef.current && event.key === 'Tab') {
+          event.preventDefault()
+        }
+      },
+      [isTransitioningRef]
+    )
+
     return (
       <View style={selectRootContainerStyles(enableHero, viewport)}>
         <View style={selectMainContainerStyles(enableHero, viewport)}>
@@ -1041,6 +1058,7 @@ const Carousel = React.forwardRef(
               ref={ref}
               {...systemProps}
               {...containerProps}
+              {...(Platform.OS === 'web' ? { onKeyDown: handleKeyDown } : {})}
             >
               {isAutoPlayEnabled ? (
                 <View
@@ -1130,10 +1148,45 @@ const Carousel = React.forwardRef(
                   accessibilityLiveRegion={accessibilityLiveRegion}
                 >
                   {childrenArray.map((element, index) => {
-                    const hidden = !isAnimating && index !== activeIndex
+                    let hidden = !isAnimating && index !== activeIndex
+
+                    if (enablePeeking && !isAnimating) {
+                      if (enableDisplayMultipleItemsPerSlide) {
+                        const maxItemsForSlide = getMaximumItemsForSlide(
+                          enableDisplayMultipleItemsPerSlide,
+                          viewport
+                        )
+                        if (
+                          index >= activeIndex * maxItemsForSlide - 1 &&
+                          index < activeIndex * maxItemsForSlide + maxItemsForSlide + 1
+                        ) {
+                          hidden = false
+                        } else {
+                          hidden = true
+                        }
+                      } else if (index >= activeIndex - 1 && index <= activeIndex + 1) {
+                        hidden = false
+                      }
+                    } else if (
+                      !enablePeeking &&
+                      enableDisplayMultipleItemsPerSlide &&
+                      !isAnimating
+                    ) {
+                      const maxItemsForSlide = getMaximumItemsForSlide(
+                        enableDisplayMultipleItemsPerSlide,
+                        viewport
+                      )
+                      if (
+                        index >= activeIndex * maxItemsForSlide &&
+                        index < activeIndex * maxItemsForSlide + maxItemsForSlide
+                      ) {
+                        hidden = false
+                      }
+                    }
+
                     const clonedElement = React.cloneElement(element, {
                       elementIndex: index,
-                      hidden: enablePeeking || enableDisplayMultipleItemsPerSlide ? false : hidden,
+                      hidden,
                       enablePeeking,
                       peekingProps: getPeekingProps(viewport),
                       enableDisplayMultipleItemsPerSlide,

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -114,15 +114,43 @@ const CarouselItem = React.forwardRef(
 
     const handleFocus = React.useCallback(
       (event) => {
-        if (Platform.OS === 'web' && elementIndex >= maximumItemsForSlide * (activeIndex + 1)) {
-          goTo(activeIndex + 1)
+        if (Platform.OS === 'web') {
+          if (enablePeeking) {
+            if (enableDisplayMultipleItemsPerSlide) {
+              const startIndex = maximumItemsForSlide * activeIndex
+              const endIndex = startIndex + maximumItemsForSlide - 1
+              if (elementIndex < startIndex) {
+                if (activeIndex - 1 < 0) {
+                  goTo(0)
+                } else {
+                  goTo(activeIndex - 1)
+                }
+              } else if (elementIndex > endIndex) {
+                goTo(activeIndex + 1)
+              }
+            } else if (elementIndex !== activeIndex) {
+              if (elementIndex > activeIndex) {
+                goTo(activeIndex + 1)
+              } else if (elementIndex < activeIndex) {
+                goTo(activeIndex - 1)
+              }
+            }
+          }
         }
 
         if (rest.onFocus) {
           rest.onFocus(event)
         }
       },
-      [elementIndex, activeIndex, goTo, maximumItemsForSlide, rest]
+      [
+        elementIndex,
+        activeIndex,
+        goTo,
+        maximumItemsForSlide,
+        rest,
+        enablePeeking,
+        enableDisplayMultipleItemsPerSlide
+      ]
     )
 
     return (

package/src/HorizontalScroll/HorizontalScroll.jsx

@@ -8,6 +8,7 @@ import {
   getTokensSetPropType,
   selectSystemProps,
   selectTokens,
+  variantProp,
   viewProps
 } from '../utils'
 import ScrollViewEnd from './ScrollViewEnd'
@@ -38,7 +39,7 @@ const selectBorderStyles = (borderBottomWidth, borderBottomColor) => ({
  * @TODO revisit `ScrollButton` after IconButton is stable.
  */
 const HorizontalScroll = React.forwardRef(
-  ({ ScrollButton, tokens, itemPositions, children, ...rest }, ref) => {
+  ({ ScrollButton, tokens, itemPositions, variant, children, ...rest }, ref) => {
     const {
       nextIcon,
       previousIcon,
@@ -74,8 +75,9 @@ const HorizontalScroll = React.forwardRef(
     }
 
     const scrollMax = Math.max(0, contentWidth - containerWidth)
-    const showNextButton = scrollOffset < scrollMax
-    const showPreviousButton = scrollOffset > 0
+    const hideNavigationButtons = variant?.hideNavigationButtons || false
+    const showNextButton = scrollOffset < scrollMax && !hideNavigationButtons
+    const showPreviousButton = scrollOffset > 0 && !hideNavigationButtons
 
     const scrollRef = React.useRef(null)
     const scrollTo = (targetX) => {
@@ -173,6 +175,7 @@ HorizontalScroll.propTypes = {
   itemPositions: itemPositionsPropType,
   ScrollButton: PropTypes.elementType,
   tokens: getTokensSetPropType(tokenKeys, { allowFunction: true }),
+  variant: variantProp.propType,
   children: PropTypes.node
 }
 

package/src/Icon/Icon.jsx

@@ -14,6 +14,7 @@ const Icon = React.forwardRef(
       tokens,
       scalesWithText = false,
       style = {},
+      testID,
       dataSet
     },
     ref
@@ -43,24 +44,23 @@ const Icon = React.forwardRef(
         }
 
     const getIconContentForMobile = () => {
-      if (Object.keys(paddingStyles).length) {
-        return (
-          <View
-            style={{
-              backgroundColor: themeTokens.backgroundColor,
-              borderRadius: themeTokens.borderRadius,
-              ...paddingStyles
-            }}
-          >
-            {iconContent}
-          </View>
-        )
-      }
-      return iconContent
+      return (
+        <View
+          testID={testID}
+          style={{
+            backgroundColor: themeTokens.backgroundColor,
+            borderRadius: themeTokens.borderRadius,
+            ...paddingStyles
+          }}
+        >
+          {iconContent}
+        </View>
+      )
     }
 
     return Platform.OS === 'web' ? (
       <View
+        testID={testID}
         ref={ref}
         // eslint-disable-next-line react-native/no-inline-styles
         style={{

package/src/Icon/IconText.jsx

@@ -90,7 +90,6 @@ IconText.propTypes = {
    * `<Typography>` component, or a component that renders `<Text>`.
    */
   children: PropTypes.node
-  /* eslint-enable react/no-unused-prop-types */
 }
 
 const staticStyles = StyleSheet.create({