@telus-uds/components-base 3.23.0 → 3.24.0

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/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
@@ -45,6 +46,7 @@ const Icon = React.forwardRef(
     const getIconContentForMobile = () => {
       return (
         <View
+          testID={testID}
           style={{
             backgroundColor: themeTokens.backgroundColor,
             borderRadius: themeTokens.borderRadius,
@@ -58,6 +60,7 @@ const Icon = React.forwardRef(
 
     return Platform.OS === 'web' ? (
       <View
+        testID={testID}
         ref={ref}
         // eslint-disable-next-line react-native/no-inline-styles
         style={{

package/src/Listbox/GroupControl.jsx

@@ -5,6 +5,7 @@ import { useThemeTokens } from '../ThemeProvider'
 import Icon from '../Icon'
 import Spacer from '../Spacer'
 import { useListboxContext } from './ListboxContext'
+import { variantProp } from '../utils'
 
 const styles = StyleSheet.create({
   container: {
@@ -47,39 +48,45 @@ const selectContainerStyles = (tokens) => ({
   borderBottomColor: tokens.groupBorderBottomColor
 })
 
-const GroupControl = React.forwardRef(({ expanded, pressed, hover, focus, label, id }, ref) => {
-  const { selectedId, setSelectedId } = useListboxContext()
-  const tokens = useThemeTokens(
-    'Listbox',
-    {},
-    {},
-    {
-      expanded,
-      pressed,
-      hover,
-      current: selectedId === id && id !== undefined,
-      focus
-    }
-  )
+const GroupControl = React.forwardRef(
+  ({ expanded, pressed, hover, focus, label, id, variant = {} }, ref) => {
+    const { selectedId, setSelectedId } = useListboxContext()
+    const isSecondLevel = variant?.secondLevel === true
+    const tokens = useThemeTokens(
+      'Listbox',
+      variant,
+      {},
+      {
+        expanded,
+        pressed,
+        hover,
+        current: selectedId === id && id !== undefined,
+        focus,
+        secondLevel: isSecondLevel
+      }
+    )
 
-  return (
-    <View
-      onPress={() => setSelectedId(id)}
-      style={[styles.container, selectContainerStyles(tokens)]}
-      ref={ref}
-    >
-      <Text style={selectTextStyles(tokens)}>{label}</Text>
-      <Spacer space={1} direction="row" />
-      {tokens.groupIcon && (
-        <Icon
-          icon={tokens.groupIcon}
-          tokens={{ color: tokens.groupColor }}
-          variant={{ size: 'micro' }}
-        />
-      )}
-    </View>
-  )
-})
+    const displayIcon = isSecondLevel ? tokens.secondLevelParentIcon : tokens.groupIcon
+
+    return (
+      <View
+        onPress={() => setSelectedId(id)}
+        style={[styles.container, selectContainerStyles(tokens)]}
+        ref={ref}
+      >
+        <Text style={selectTextStyles(tokens)}>{label}</Text>
+        <Spacer space={1} direction="row" />
+        {displayIcon && (
+          <Icon
+            icon={displayIcon}
+            tokens={{ color: tokens.groupColor }}
+            variant={{ size: 'micro' }}
+          />
+        )}
+      </View>
+    )
+  }
+)
 
 GroupControl.displayName = 'GroupControl'
 
@@ -89,7 +96,8 @@ GroupControl.propTypes = {
   pressed: PropTypes.bool,
   hover: PropTypes.bool,
   focus: PropTypes.bool,
-  label: PropTypes.string
+  label: PropTypes.string,
+  variant: variantProp.propType
 }
 
 export default GroupControl

package/src/Listbox/Listbox.jsx

@@ -8,11 +8,14 @@ import ListboxGroup from './ListboxGroup'
 import ListboxItem from './ListboxItem'
 import { ListboxContext } from './ListboxContext'
 import DropdownOverlay from './ListboxOverlay'
+import defaultDictionary from './dictionary'
 
 const styles = StyleSheet.create({
   container: {
     padding: 0,
-    margin: 0
+    margin: 0,
+    position: 'relative',
+    overflow: 'visible'
   }
 })
 
@@ -41,6 +44,8 @@ const Listbox = React.forwardRef(
       LinkRouter,
       itemRouterProps,
       onClose,
+      copy = 'en',
+      dictionary = defaultDictionary,
       variant,
       tokens,
       testID
@@ -49,6 +54,7 @@ const Listbox = React.forwardRef(
   ) => {
     const initialOpen = getInitialOpen(items, defaultSelectedId)
     const [selectedId, setSelectedId] = React.useState(defaultSelectedId)
+    const [activeSecondLevelGroup, setActiveSecondLevelGroup] = React.useState(null)
     const listboxTokens = useThemeTokens('Listbox', tokens, variant)
 
     // We need to keep track of each item's ref in order to be able to
@@ -102,8 +108,15 @@ const Listbox = React.forwardRef(
       return () => {}
     }, [onClose, handleKeydown])
 
+    const contextValue = {
+      selectedId,
+      setSelectedId,
+      activeSecondLevelGroup,
+      setActiveSecondLevelGroup
+    }
+
     return (
-      <ListboxContext.Provider value={{ selectedId, setSelectedId }}>
+      <ListboxContext.Provider value={contextValue}>
         <ExpandCollapse initialOpen={initialOpen} maxOpen={1} ref={ref}>
           {(expandProps) => (
             <View
@@ -121,6 +134,10 @@ const Listbox = React.forwardRef(
                   return currentItemRef
                 }
 
+                if (!nestedItems && activeSecondLevelGroup) {
+                  return null
+                }
+
                 return nestedItems ? (
                   <ListboxGroup
                     {...item}
@@ -131,6 +148,11 @@ const Listbox = React.forwardRef(
                     nextItemRef={itemRefs.current[index + 1] ?? null}
                     ref={index === 0 ? firstItemRef : itemRef}
                     key={itemId}
+                    copy={copy}
+                    dictionary={dictionary}
+                    variant={variant}
+                    tokens={tokens}
+                    onClose={onClose}
                   />
                 ) : (
                   <ListboxItem
@@ -142,6 +164,8 @@ const Listbox = React.forwardRef(
                     prevItemRef={itemRefs.current[index - 1] ?? null}
                     nextItemRef={itemRefs.current[index + 1] ?? null}
                     ref={index === 0 ? firstItemRef : itemRef}
+                    variant={variant}
+                    tokens={tokens}
                   />
                 )
               })}
@@ -183,6 +207,21 @@ Listbox.propTypes = {
    * Test ID for testing
    */
   testID: PropTypes.string,
+  /**
+   * Select English or French copy
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: PropTypes.shape({
+      closeMenu: PropTypes.string.isRequired
+    }),
+    fr: PropTypes.shape({
+      closeMenu: PropTypes.string.isRequired
+    })
+  }),
   /**
    * Listbox variant
    */