@telus-uds/components-base 3.26.0 → 3.27.0

package/src/Carousel/CarouselContext.jsx

@@ -14,7 +14,9 @@ const CarouselProvider = ({
   themeTokens,
   totalItems,
   width,
-  maximumItemsForSlide
+  maximumItemsForSlide,
+  maxWidth,
+  viewportWidth
 }) => {
   const value = React.useMemo(
     () => ({
@@ -26,7 +28,9 @@ const CarouselProvider = ({
       themeTokens,
       totalItems,
       width,
-      maximumItemsForSlide
+      maximumItemsForSlide,
+      maxWidth,
+      viewportWidth
     }),
     [
       activeIndex,
@@ -37,7 +41,9 @@ const CarouselProvider = ({
       totalItems,
       themeTokens,
       width,
-      maximumItemsForSlide
+      maximumItemsForSlide,
+      maxWidth,
+      viewportWidth
     ]
   )
   return <CarouselContext.Provider value={value}>{children}</CarouselContext.Provider>
@@ -61,7 +67,9 @@ CarouselProvider.propTypes = {
   themeTokens: getTokensPropType('Carousel'),
   totalItems: PropTypes.number.isRequired,
   width: PropTypes.number.isRequired,
-  maximumItemsForSlide: PropTypes.number
+  maximumItemsForSlide: PropTypes.number,
+  maxWidth: PropTypes.number,
+  viewportWidth: PropTypes.number
 }
 
 export { CarouselProvider, useCarousel }

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -18,27 +18,28 @@ const selectContainerStyle = ({
   width,
   elementIndex,
   enablePeeking,
-  peekingMarginLeft,
   peekingGap,
   hidden,
   enableDisplayMultipleItemsPerSlide,
   viewport,
-  peekingMiddleSpace
+  peekingMiddleSpace,
+  maxWidth,
+  viewportWidth
 }) => {
   let adjustedWidth = width
   let marginLeft = 0
 
   if (enablePeeking) {
     const isFirst = elementIndex === 0
-    adjustedWidth = width - (peekingMiddleSpace * 2 + peekingGap * 2)
+    const baseWidth = maxWidth || width
+    adjustedWidth = baseWidth - peekingMiddleSpace * 2
     if (isFirst) {
-      marginLeft = peekingMarginLeft
+      marginLeft = peekingMiddleSpace + (viewportWidth - maxWidth) / 2
     } else {
       marginLeft = peekingGap
     }
   }
 
-  // Adjust width and margins for multiple items per slide.
   if (enableDisplayMultipleItemsPerSlide) {
     switch (viewport) {
       case 'xs':
@@ -102,7 +103,8 @@ const CarouselItem = React.forwardRef(
     },
     ref
   ) => {
-    const { width, activeIndex, goTo, maximumItemsForSlide } = useCarousel()
+    const { width, activeIndex, goTo, maximumItemsForSlide, maxWidth, viewportWidth } =
+      useCarousel()
 
     const selectedProps = selectProps({
       ...rest,
@@ -162,6 +164,8 @@ const CarouselItem = React.forwardRef(
           enablePeeking,
           enableDisplayMultipleItemsPerSlide,
           viewport,
+          maxWidth,
+          viewportWidth,
           ...peekingProps
         })}
         {...selectedProps}

package/src/Carousel/Constants.js

@@ -23,3 +23,13 @@ export const SWIPE_RELEASE_STYLES = {
 
 export const INSTANT_ANIMATION_DURATION = 1
 export const DEFAULT_SWIPE_RELEASE_DURATION = 500
+export const POSITION_VARIANTS = {
+  EDGE: 'edge',
+  INSIDE: 'inside',
+  OUTSIDE: 'outside'
+}
+
+export const POSITION_PROPERTIES = {
+  LEFT: 'left',
+  RIGHT: 'right'
+}

package/src/Checkbox/Checkbox.jsx

@@ -109,6 +109,25 @@ const selectFeedbackTokens = ({ feedbackMarginBottom, feedbackMarginTop, feedbac
   feedbackMarginTop
 })
 
+const selectPressableStyles = ({
+  padding,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingBottom
+}) => ({
+  padding,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingBottom
+})
+
+const selectContainerStyles = ({ iconContainerHeight, iconContainerWidth }) => ({
+  height: iconContainerHeight,
+  width: iconContainerWidth
+})
+
 /**
  * Basic Checkbox component.
  *
@@ -160,6 +179,7 @@ const Checkbox = React.forwardRef(
       tokens,
       value,
       variant,
+      testID,
       ...rest
     },
     ref
@@ -211,24 +231,22 @@ const Checkbox = React.forwardRef(
       <View style={staticStyles.wrapper} ref={ref}>
         <StackView direction={feedbackPosition === 'top' ? 'column-reverse' : 'column'} space={0}>
           <Pressable
+            testID={testID && `${testID}-pressable`}
             disabled={inactive}
             onKeyDown={handleKeyDown}
             onPress={handleChange}
             {...selectedProps}
-            style={staticStyles.removeOutline}
+            style={[staticStyles.removeOutline, selectPressableStyles(defaultTokens)]}
           >
             {({ focused: focus, hovered: hover, pressed }) => {
               const { icon: IconComponent, ...stateTokens } = getTokens({ focus, hover, pressed })
               const iconTokens = selectIconTokens(stateTokens)
               const labelStyles = selectLabelStyles(stateTokens, themeOptions)
-              const alignWithLabel = label
-                ? [staticStyles.alignWithLabel, { height: labelStyles.lineHeight }]
-                : null
 
               return (
                 <StackView space={0}>
                   <View style={staticStyles.container}>
-                    <View style={alignWithLabel}>
+                    <View style={[staticStyles.iconContainer, selectContainerStyles(stateTokens)]}>
                       <View
                         style={[
                           staticStyles.defaultInputStyles,
@@ -335,7 +353,11 @@ Checkbox.propTypes = {
   /**
    * An optional Checkbox description.
    */
-  description: PropTypes.string
+  description: PropTypes.string,
+  /**
+   * A identifier for testing purposes.
+   */
+  testID: PropTypes.string
 }
 
 export default Checkbox
@@ -344,6 +366,6 @@ const staticStyles = StyleSheet.create({
   wrapper: { backgroundColor: 'transparent' },
   container: { flexDirection: 'row', alignItems: 'center' },
   defaultInputStyles: { alignItems: 'center', justifyContent: 'center' },
-  alignWithLabel: { alignSelf: 'flex-start', justifyContent: 'center' },
+  iconContainer: { display: 'flex', justifyContent: 'center', alignItems: 'center' },
   removeOutline: { outlineStyle: 'none' }
 })

package/src/List/List.jsx

@@ -5,10 +5,22 @@ import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const LIST_ITEM_TYPE = 'ListItem'
+const LINKS_ITEM_TYPE = 'LinksItem'
+
 const isListItem = (element) => {
-  const elementName = element?.type?.displayName || element?.type?.name
-  // Match our own ListItem, and also, custom list items
-  return Boolean(elementName.match(/Item/))
+  if (!element?.type) return false
+
+  if (element.type.__UDS_COMPONENT_TYPE__ === LIST_ITEM_TYPE) {
+    return true
+  }
+
+  const elementName = element.type.displayName || element.type.name || ''
+  return (
+    elementName === LIST_ITEM_TYPE ||
+    elementName.includes(LIST_ITEM_TYPE) ||
+    elementName.includes(LINKS_ITEM_TYPE)
+  )
 }
 
 /**
@@ -22,6 +34,7 @@ const List = React.forwardRef(
       showDivider,
       tokens,
       variant,
+      iconVerticalAlign,
       accessibilityRole = Platform.select({ web: 'list', default: undefined }),
       ...rest
     },
@@ -30,13 +43,19 @@ const List = React.forwardRef(
     const items = React.Children.map(children, (child, index) => {
       // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
       if (isListItem(child)) {
-        return React.cloneElement(child, {
-          showDivider,
-          isLastItem: index + 1 === React.Children.count(children),
+        const childProps = {
           tokens,
           variant,
-          ...child.props
-        })
+          ...child.props,
+          showDivider,
+          isLastItem: index + 1 === React.Children.count(children)
+        }
+
+        if (!child.props.iconVerticalAlign && iconVerticalAlign) {
+          childProps.iconVerticalAlign = iconVerticalAlign
+        }
+
+        return React.cloneElement(child, childProps)
       }
       return child
     })
@@ -76,7 +95,12 @@ List.propTypes = {
   /**
    * In case it is not the last item allow display divider
    */
-  showDivider: PropTypes.bool
+  showDivider: PropTypes.bool,
+  /**
+   * The vertical alignment of the icon in ListItems.
+   * This prop is passed down to ListItem components and can be overridden in individual List.Item components.
+   */
+  iconVerticalAlign: PropTypes.oneOf(['top', 'center', 'bottom'])
 }
 
 export default List

package/src/List/ListItem.jsx

@@ -1,25 +1,47 @@
 import React from 'react'
-
+import PropTypes from 'prop-types'
 import ListItemBase from './ListItemBase'
 import { useThemeTokens } from '../ThemeProvider'
-import { variantProp } from '../utils'
+import { getTokensPropType, variantProp } from '../utils'
 
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-const ListItem = React.forwardRef(({ tokens, variant, children, title, ...listItemProps }, ref) => {
-  const themeTokens = useThemeTokens('List', tokens, variant)
-  return (
-    <ListItemBase tokens={themeTokens} ref={ref} {...listItemProps} title={title}>
-      {children}
-    </ListItemBase>
-  )
-})
+const ListItem = React.forwardRef(
+  ({ tokens, variant, children, title, iconVerticalAlign = 'top', ...listItemProps }, ref) => {
+    const themeTokens = useThemeTokens('List', tokens, variant)
+    return (
+      <ListItemBase
+        tokens={themeTokens}
+        ref={ref}
+        {...listItemProps}
+        title={title}
+        iconVerticalAlign={iconVerticalAlign}
+      >
+        {children}
+      </ListItemBase>
+    )
+  }
+)
 ListItem.displayName = 'ListItem'
 
 ListItem.propTypes = {
+  /** Theme tokens for styling */
+  tokens: getTokensPropType('List'),
+  /** Variant configuration for the component */
   variant: variantProp.propType,
-  ...ListItemBase.propTypes
+  /** Content to be rendered within the list item */
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  /** Title of the list item */
+  title: PropTypes.node,
+  /** Controls the vertical alignment of the icon */
+  iconVerticalAlign: PropTypes.oneOf(['top', 'center', 'bottom']),
+  /** Icon to be displayed */
+  icon: PropTypes.elementType,
+  /** Color of the icon */
+  iconColor: PropTypes.string,
+  /** Size of the icon */
+  iconSize: PropTypes.number
 }
 
 export default ListItem

package/src/List/ListItemBase.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
-
 import ListItemContent from './ListItemContent'
 import ListItemMark from './ListItemMark'
 import Typography from '../Typography'
@@ -10,6 +9,14 @@ import { useThemeTokens } from '../ThemeProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const VERTICAL_CENTERING_DIVISOR = 2
+
+const alignmentMap = {
+  top: 'flex-start',
+  center: 'center',
+  bottom: 'flex-end'
+}
+
 const selectItemBlockStyles = ({ interItemMargin }) => ({
   marginBottom: interItemMargin
 })
@@ -21,9 +28,17 @@ const selectDividerStyles = ({ dividerColor, dividerSize, interItemMarginWithDiv
   paddingBottom: interItemMarginWithDivider
 })
 
+const selectAlignmentStyles = (iconVerticalAlign) => ({
+  alignItems: alignmentMap[iconVerticalAlign]
+})
+
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
+const calculateIconMarginTop = (itemIconSize, fontSize, lineHeightRatio) => {
+  return (fontSize * lineHeightRatio - itemIconSize) / VERTICAL_CENTERING_DIVISOR
+}
+
 const ListItemBase = React.forwardRef(
   (
     {
@@ -35,6 +50,7 @@ const ListItemBase = React.forwardRef(
       children,
       title,
       isLastItem,
+      iconVerticalAlign = 'top',
       accessibilityRole = Platform.select({ web: 'listitem', default: undefined }),
       ...rest
     },
@@ -45,15 +61,15 @@ const ListItemBase = React.forwardRef(
     const itemBlockStyles = selectItemBlockStyles(themeTokens)
     const dividerStyles = selectDividerStyles(themeTokens)
     const { iconMarginTop, itemIconSize } = themeTokens
-    let adjustedIconMarginTop = iconMarginTop
     const { fontSize, lineHeight: lineHeightRatio } = useThemeTokens(
       'Typography',
       {},
       { size: 'h4', bold: true }
     )
-    if (title) {
-      adjustedIconMarginTop = (fontSize * lineHeightRatio - itemIconSize) / 2
-    }
+    const adjustedIconMarginTop = title
+      ? calculateIconMarginTop(itemIconSize, fontSize, lineHeightRatio)
+      : iconMarginTop
+
     /**
      * Function responsible returning styling, in case the item is the last shouldn't
      * add extra margin on the bottom, if "showDivider" is true it should add a divider
@@ -81,14 +97,14 @@ const ListItemBase = React.forwardRef(
         {typeof children === 'function' ? (
           children({ tokens, icon, iconColor, iconSize, isLastItem })
         ) : (
-          <View style={staticStyles.container}>
+          <View style={[staticStyles.innerContainer, selectAlignmentStyles(iconVerticalAlign)]}>
             <ListItemMark
               tokens={{ ...tokens, iconMarginTop: adjustedIconMarginTop }}
               icon={icon}
               iconColor={iconColor}
               iconSize={iconSize}
             />
-            <View style={staticStyles.titleAndContentContainer}>
+            <View style={[staticStyles.titleAndContentContainer]}>
               {Boolean(title) && (
                 <Typography variant={{ size: 'h4', bold: true }}>{title}</Typography>
               )}
@@ -101,16 +117,22 @@ const ListItemBase = React.forwardRef(
   }
 )
 ListItemBase.displayName = 'ListItem'
+ListItemBase.__UDS_COMPONENT_TYPE__ = 'ListItem'
 
 const staticStyles = StyleSheet.create({
   container: {
+    flexDirection: 'row',
+    width: '100%'
+  },
+  innerContainer: {
     flex: 1,
     flexDirection: 'row'
   },
   titleAndContentContainer: {
     flexDirection: 'column',
-    flexShrink: 1,
-    flexGrow: 1
+    flex: 1,
+    flexGrow: 1,
+    flexShrink: 1
   }
 })
 
@@ -119,6 +141,8 @@ ListItemBase.propTypes = {
   tokens: getTokensPropType('List'),
   variant: variantProp.propType,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  /** Controls the vertical alignment of the icon */
+  iconVerticalAlign: PropTypes.oneOf(['top', 'center', 'bottom']),
   /**
    * Renders side item icon
    */

package/src/List/ListItemMark.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
-import { View, StyleSheet } from 'react-native'
+import { View } from 'react-native'
 import Icon from '../Icon'
 import { useVariants } from '../utils'
 
@@ -9,33 +8,21 @@ export const tokenTypes = {
   itemIconSize: PropTypes.number.isRequired,
   itemIconColor: PropTypes.string.isRequired,
   listGutter: PropTypes.number.isRequired,
-  iconMarginTop: PropTypes.number.isRequired
+  iconMarginTop: PropTypes.number.isRequired,
+  bulletIcon: PropTypes.elementType.isRequired
 }
 
-const selectItemIconTokens = ({ itemIconSize, itemIconColor }) => ({
-  size: itemIconSize,
-  color: itemIconColor
-})
-
-const selectSideItemContainerStyles = ({ listGutter, iconMarginTop }) => ({
-  marginTop: iconMarginTop,
-  marginRight: listGutter
+const selectContainerStyles = ({ listGutter }) => ({
+  marginInlineEnd: listGutter,
+  display: 'flex',
+  alignItems: 'flex-start'
 })
-
-// Align bullets with the top line of text the same way icons are aligned
-const selectBulletPositioningStyles = ({ itemIconSize }) => ({
+const selectBulletStyles = ({ itemIconSize }) => ({
   width: itemIconSize,
-  height: itemIconSize
-})
-
-const selectBulletContainerStyles = ({
-  itemBulletContainerWidth,
-  itemBulletContainerHeight,
-  itemBulletContainerAlign
-}) => ({
-  width: itemBulletContainerWidth,
-  height: itemBulletContainerHeight,
-  alignItems: itemBulletContainerAlign
+  height: itemIconSize,
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0
 })
 
 const getIconColorVariants = (iconVariants) =>
@@ -50,26 +37,24 @@ const getIconColorVariants = (iconVariants) =>
  */
 const ListItemMark = React.forwardRef(({ icon, iconColor, iconSize, tokens = {} }, ref) => {
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens
+  const containerStyles = selectContainerStyles(themeTokens)
 
-  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
-  const bulletContainerStyles = selectBulletContainerStyles(themeTokens)
-
-  // TODO: Remove it when iconColor custom colors are deprecated.
   const iconVariants = useVariants('Icon')
   const iconColorVariants = getIconColorVariants(iconVariants)
 
   if (icon) {
-    const iconTokens = selectItemIconTokens(themeTokens)
+    const { itemIconSize, itemIconColor } = themeTokens
+    const finalIconSize = iconSize ?? itemIconSize
+    const finalIconColor =
+      iconColor && !iconColorVariants?.includes(iconColor) ? iconColor : itemIconColor
+
     return (
-      <View style={[sideItemContainerStyles, bulletContainerStyles]}>
+      <View style={containerStyles}>
         <Icon
           icon={icon}
           tokens={{
-            size: iconSize ?? iconTokens.size,
-            ...(((iconColor && !iconColorVariants?.includes(iconColor)) || !iconColor) && {
-              color:
-                iconColor && !iconColorVariants?.includes(iconColor) ? iconColor : iconTokens.color
-            })
+            size: finalIconSize,
+            color: finalIconColor
           }}
           variant={{
             ...(iconColorVariants?.includes(iconColor) && { color: iconColor })
@@ -79,18 +64,19 @@ const ListItemMark = React.forwardRef(({ icon, iconColor, iconSize, tokens = {}
     )
   }
 
-  const bulletColor = themeTokens.itemBulletColor
-  const { bulletIcon } = themeTokens
-  const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens)
-  const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens)
+  const { itemIconSize, itemIconColor } = themeTokens
+  const bulletStyles = selectBulletStyles(themeTokens)
 
   return (
-    <View style={[sideItemContainerStyles, itemBulletContainerStyles]} ref={ref}>
-      <View
-        style={[staticStyles.bulletPositioning, itemBulletPositioningStyles]}
-        testID="unordered-item-bullet"
-      >
-        <Icon icon={bulletIcon} tokens={{ color: bulletColor, size: themeTokens.itemIconSize }} />
+    <View style={containerStyles} ref={ref}>
+      <View style={bulletStyles}>
+        <Icon
+          icon={themeTokens.bulletIcon}
+          tokens={{
+            color: itemIconColor,
+            size: itemIconSize
+          }}
+        />
       </View>
     </View>
   )
@@ -114,11 +100,4 @@ ListItemMark.propTypes = {
   iconSize: PropTypes.number
 }
 
-const staticStyles = StyleSheet.create({
-  bulletPositioning: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-})
-
 export default ListItemMark

package/src/List/PressableListItemBase.jsx

@@ -81,6 +81,7 @@ const PressableListItemBase = React.forwardRef(
 )
 
 PressableListItemBase.displayName = 'PressableListItemBase'
+PressableListItemBase.__UDS_COMPONENT_TYPE__ = 'ListItem'
 
 const staticStyles = StyleSheet.create({
   itemContainer: {