@telus-uds/components-base 2.2.0 → 2.4.0

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -30,14 +30,6 @@ import ModalOverlay from './ModalOverlay'
 
 const { Col, Row } = FlexGrid
 
-const selectSubTitleTokens = ({ subtitleColor }) => ({
-  color: subtitleColor
-})
-
-const selectDividerTokens = ({ dividerColor }) => ({
-  color: dividerColor
-})
-
 const selectHeaderTokens = ({
   contentMarginLeft,
   contentMarginRight,
@@ -113,23 +105,6 @@ const MultiSelectFilter = React.forwardRef(
     const [checkedIds, setCheckedIds] = React.useState(currentValues ?? [])
     const [maxWidth, setMaxWidth] = React.useState(false)
 
-    const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant)
-    const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant)
-    const getButtonTokens = (buttonState) => selectTokens('Button', getItemTokens(buttonState))
-    const getCopy = useCopy({ dictionary, copy })
-    const colSizeNotMobile = items.length > rowLimit ? 2 : 1
-    const colSize = viewport !== 'xs' ? colSizeNotMobile : 1
-    const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit
-    const isSelected = currentValues.length > 0
-    const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length
-
-    React.useEffect(() => {
-      if (colSize === 1) return setMaxWidth(false)
-      return colSize === 2 && setMaxWidth(true)
-    }, [colSize])
-
-    React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues])
-
     const {
       headerFontColor,
       headerFontSize,
@@ -143,6 +118,20 @@ const MultiSelectFilter = React.forwardRef(
       subHeaderLineHeight,
       minHeight,
       minWidth,
+      labelFontName,
+      labelFontSize,
+      labelFontWeight,
+      labelColor,
+      labelLineHeight,
+      labelPaddingTop,
+      labelPaddingBottom,
+      labelPaddingLeft,
+      labelPaddingRight,
+      buttonBorderColor,
+      buttonIconSize,
+      buttonIconPadding,
+      subtitleColor,
+      dividerColor,
       ...restTokens
     } = useThemeTokens(
       'MultiSelectFilter',
@@ -150,6 +139,40 @@ const MultiSelectFilter = React.forwardRef(
       { ...variant, maxHeight, maxWidth },
       { viewport }
     )
+    const dropdownTokens = {
+      borderColor: buttonBorderColor,
+      iconSize: buttonIconSize,
+      iconPadding: buttonIconPadding,
+      lineHeight: labelLineHeight,
+      fontName: labelFontName,
+      fontSize: labelFontSize,
+      fontWeight: labelFontWeight,
+      color: labelColor,
+      paddingTop: labelPaddingTop,
+      paddingBottom: labelPaddingBottom,
+      paddingLeft: labelPaddingLeft,
+      paddingRight: labelPaddingRight
+    }
+    const getButtonDropdownTokens = useThemeTokensCallback(
+      'ButtonDropdown',
+      dropdownTokens,
+      variant
+    )
+    const getButtonTokens = (buttonState) =>
+      selectTokens('ButtonDropdown', getButtonDropdownTokens(buttonState))
+    const getCopy = useCopy({ dictionary, copy })
+    const colSizeNotMobile = items.length > rowLimit ? 2 : 1
+    const colSize = viewport !== 'xs' ? colSizeNotMobile : 1
+    const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit
+    const isSelected = currentValues.length > 0
+    const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length
+
+    React.useEffect(() => {
+      if (colSize === 1) return setMaxWidth(false)
+      return colSize === 2 && setMaxWidth(true)
+    }, [colSize])
+
+    React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues])
 
     const uniqueFields = ['id', 'label']
     if (!containUniqueFields(items, uniqueFields)) {
@@ -199,7 +222,7 @@ const MultiSelectFilter = React.forwardRef(
     const subeHeaderStyles = applyTextStyles({
       fontSize: subHeaderFontSize,
       fontWeight: subHeaderFontWeight,
-      fontColor: selectSubTitleTokens(themeTokens)
+      fontColor: subtitleColor
     })
 
     const { overlaidPosition, onTargetLayout, isReady, sourceRef } = useOverlaidPosition({
@@ -275,7 +298,12 @@ const MultiSelectFilter = React.forwardRef(
     const controlsContent = (
       <>
         {isScrolling ? (
-          <Divider tokens={selectDividerTokens(themeTokens)} space={4} />
+          <Divider
+            tokens={{
+              color: dividerColor
+            }}
+            space={4}
+          />
         ) : (
           <Spacer space={4} />
         )}

package/src/Notification/Notification.jsx

@@ -247,10 +247,16 @@ const Notification = React.forwardRef(
     const viewport = useViewport()
     const getCopy = useCopy({ dictionary, copy })
 
+    // TODO: Remove this once the system style variant is deprecated
+    const isSystemEnabled = system || variant?.style?.includes('system')
+
     const { themeOptions } = useTheme()
     const { enableMediaQueryStyleSheet } = themeOptions
     const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
-    const themeTokens = useTokens('Notification', tokens, variant, { system, viewport })
+    const themeTokens = useTokens('Notification', tokens, variant, {
+      system: isSystemEnabled,
+      viewport
+    })
     const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
 
     const notificationComponentRef = React.useRef({
@@ -281,7 +287,7 @@ const Notification = React.forwardRef(
         mediaIdsRef,
         dismissible,
         viewport,
-        system
+        isSystemEnabled
       )
     } else {
       notificationComponentRef.current = getDefaultStyles(
@@ -290,7 +296,7 @@ const Notification = React.forwardRef(
         maxWidth,
         dismissible,
         viewport,
-        system
+        isSystemEnabled
       )
     }
 

package/src/Search/Search.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View } from 'react-native'
+import { View, Platform } from 'react-native'
 
 import PropTypes from 'prop-types'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
@@ -20,6 +20,7 @@ import TextInputBase from '../TextInput/TextInputBase'
 import ButtonBase from '../Button/ButtonBase'
 import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
+import Icon from '../Icon'
 
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([
   a11yProps,
@@ -44,10 +45,25 @@ const selectInputTokens = ({ searchTokens, buttonTokens, buttonsGapSize }) => {
 
   return { ...selectTokens('TextInput', searchTokens), paddingRight: paddingWithButtons }
 }
-const selectButtonTokens = (tokens) => selectTokens('Button', tokens)
+const selectButtonTokens = (tokens) => selectTokens('SearchButton', tokens)
 
 const selectIconTokens = ({ iconSize, iconColor }) => ({ color: iconColor, size: iconSize })
 
+const selectBorderTokens = ({ borderWidth, mobileBorderWidth, ...tokens }) => ({
+  borderWidth: Platform.OS === 'web' ? borderWidth : mobileBorderWidth,
+  ...tokens
+})
+
+const modifyButtonTokens = (tokens) => {
+  const modifiedTokens = { ...tokens }
+
+  if (Platform.OS !== 'web') {
+    modifiedTokens.backgroundColor = tokens.mobileBackgroundColor
+  }
+
+  return modifiedTokens
+}
+
 /**
  * The `Search` component is a combination of a `TextInput` and 2 different kinds of custom buttons.
  * Use `Search` to feature autocomplete interactions.
@@ -77,6 +93,7 @@ const Search = React.forwardRef(
       tokens,
       variant,
       nativeSubmitBtnID,
+      searchIconPosition = 'right',
       dataSet,
       ...rest
     },
@@ -137,9 +154,9 @@ const Search = React.forwardRef(
           testID={testID}
           {...selectInputProps(rest)}
           ref={ref}
-          tokens={(appearances) =>
+          tokens={(pressableStates) =>
             selectInputTokens({
-              searchTokens: getThemeTokens(appearances),
+              searchTokens: selectBorderTokens(getThemeTokens(pressableStates)),
               buttonTokens,
               buttonsGapSize,
               isEmpty
@@ -155,6 +172,7 @@ const Search = React.forwardRef(
           onSubmitEditing={handleSubmit}
           onFocus={handleFocus}
           accessibilityLabel={a11yLabelText}
+          direction={searchIconPosition}
           buttons={[
             ClearButtonIcon && !isEmpty && (
               <ButtonBase
@@ -163,32 +181,42 @@ const Search = React.forwardRef(
                 inactive={inactive}
                 key="clear"
                 onPress={handleClear}
-                tokens={(appearances) => selectButtonTokens(getButtonTokens(appearances))}
+                tokens={(pressableStates) =>
+                  modifyButtonTokens(selectButtonTokens(getButtonTokens(pressableStates)))
+                }
               >
                 {(buttonState) => (
                   <ClearButtonIcon {...selectIconTokens(getButtonTokens(buttonState))} />
                 )}
               </ButtonBase>
             ),
-            SubmitButtonIcon && (
-              <ButtonBase
-                accessibilityLabel={getCopy('submitButtonAccessibilityLabel')}
-                accessibilityRole="button"
-                inactive={inactive}
-                key="submit"
-                onPress={handleSubmit}
-                tokens={(buttonState) =>
-                  selectButtonTokens(getButtonTokens({ ...buttonState, priority: 'high' }))
-                }
-                nativeID={nativeSubmitBtnID}
-              >
-                {(buttonState) => (
-                  <SubmitButtonIcon
-                    {...selectIconTokens(getButtonTokens({ ...buttonState, priority: 'high' }))}
-                  />
-                )}
-              </ButtonBase>
-            )
+            SubmitButtonIcon &&
+              (searchIconPosition === 'right' ? (
+                <ButtonBase
+                  accessibilityLabel={getCopy('submitButtonAccessibilityLabel')}
+                  accessibilityRole="button"
+                  inactive={inactive}
+                  key="submit-right"
+                  onPress={handleSubmit}
+                  tokens={(buttonState) =>
+                    selectButtonTokens(getButtonTokens({ ...buttonState, priority: 'high' }))
+                  }
+                  nativeID={nativeSubmitBtnID}
+                >
+                  {(buttonState) => (
+                    <SubmitButtonIcon
+                      {...selectIconTokens(getButtonTokens({ ...buttonState, priority: 'high' }))}
+                    />
+                  )}
+                </ButtonBase>
+              ) : (
+                <Icon
+                  icon={SubmitButtonIcon}
+                  key="submitIcon"
+                  testID="iconLeft"
+                  tokens={{ color: themeTokens.iconLeftColor, size: themeTokens.iconLeftSize }}
+                />
+              ))
           ]}
         />
       </View>

package/src/Select/Picker.native.jsx

@@ -7,9 +7,11 @@ import { a11yProps, componentPropType } from '../utils'
 import Group from './Group'
 
 import {
-  ANDROID_HEIGHT_OFFSET,
   ANDROID_HORIZONTAL_PADDING_OFFSET,
-  ANDROID_DEFAULT_PADDING
+  ANDROID_DEFAULT_PADDING,
+  ALLOW_FONT_SCALING,
+  ADJUSTS_FONT_SIZE_TO_FIT,
+  MAX_FONT_SIZE_MULTIPLIER
 } from './constants'
 
 // Styling of the native input is very limited, most of the styles have to be applied to an additional View
@@ -36,8 +38,7 @@ const selectAndroidContainerStyles = ({
       ? paddingRight - ANDROID_HORIZONTAL_PADDING_OFFSET
       : ANDROID_DEFAULT_PADDING,
   paddingBottom: ANDROID_DEFAULT_PADDING,
-  paddingTop: ANDROID_DEFAULT_PADDING,
-  height: rest.height + ANDROID_HEIGHT_OFFSET
+  paddingTop: ANDROID_DEFAULT_PADDING
 })
 
 const Picker = React.forwardRef(
@@ -85,6 +86,11 @@ const Picker = React.forwardRef(
           inputAndroid: selectAndroidInputStyles(style)
         }}
         placeholder={placeholder !== undefined ? placeholder : {}}
+        textInputProps={{
+          allowFontScaling: ALLOW_FONT_SCALING,
+          adjustFontSizeToFit: ADJUSTS_FONT_SIZE_TO_FIT,
+          maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER
+        }}
       />
     )
 

package/src/Select/constants.js

@@ -1,5 +1,8 @@
 // Because Android
 export const ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = 5
-export const ANDROID_HEIGHT_OFFSET = 12
 export const ANDROID_HORIZONTAL_PADDING_OFFSET = 8
 export const ANDROID_DEFAULT_PADDING = 0
+
+export const ALLOW_FONT_SCALING = true
+export const ADJUSTS_FONT_SIZE_TO_FIT = true
+export const MAX_FONT_SIZE_MULTIPLIER = 3

package/src/StepTracker/StepTracker.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { StyleSheet, Text, View } from 'react-native'
+import { Platform, StyleSheet, Text, View } from 'react-native'
 import StackView from '../StackView'
 import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
@@ -105,7 +105,7 @@ const StepTracker = React.forwardRef(
             '%{stepLabel}',
             current < steps.length ? steps[current] : steps[steps.length - 1]
           )
-      : ''
+      : getCopy('stepTrackerLabel')
 
     const getStepLabel = (index) => {
       if (themeTokens.showStepLabel) {
@@ -118,7 +118,6 @@ const StepTracker = React.forwardRef(
     if (!steps.length) return null
     const selectedProps = selectProps({
       accessibilityLabel: stepTrackerLabel,
-      accessibilityLevel: 1,
       accessibilityRole: 'progressbar',
       accessibilityValue: {
         min: 0,
@@ -129,10 +128,16 @@ const StepTracker = React.forwardRef(
       ...rest
     })
 
+    const stepsContainerAccessibilityRole = Platform.OS === 'web' ? 'list' : 'tablist'
+    const stepAccessibilityRole = Platform.OS === 'web' ? 'listitem' : 'tab'
+
     return (
       <View ref={ref} style={selectContainerStyles(themeTokens)} {...selectedProps}>
         <StackView space={0}>
-          <View style={staticStyles.stepsContainer}>
+          <View
+            style={staticStyles.stepsContainer}
+            accessibilityRole={stepsContainerAccessibilityRole}
+          >
             {steps.map((label, index) => {
               return (
                 <Step
@@ -143,6 +148,8 @@ const StepTracker = React.forwardRef(
                   stepIndex={index}
                   stepCount={steps.length}
                   tokens={themeTokens}
+                  accessibilityRole={stepAccessibilityRole}
+                  accessibilityCurrent={current === index && Platform.OS === 'web' && 'step'}
                 />
               )
             })}
@@ -154,7 +161,11 @@ const StepTracker = React.forwardRef(
                 selectStepTrackerLabelContainerStyles(themeTokens)
               ]}
             >
-              <Text style={selectStepTrackerLabelStyles(themeTokens, themeOptions)}>
+              <Text
+                style={selectStepTrackerLabelStyles(themeTokens, themeOptions)}
+                accessibilityRole="header"
+                accessibilityLevel={2}
+              >
                 {stepTrackerLabel}
               </Text>
             </View>

package/src/TextInput/TextArea.jsx

@@ -70,7 +70,6 @@ const TextArea = React.forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
 
   const inputProps = {
     ...selectedProps,
-    variant: { ...variant, validation: supportsProps.validation },
     multiline: true,
     onContentSizeChange: onHeightChange,
     height: inputHeight,
@@ -78,10 +77,18 @@ const TextArea = React.forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
   }
 
   return (
-    <InputSupports {...supportsProps}>
-      {({ inputId, ...props }) => (
-        <TextInputBase ref={ref} {...inputProps} nativeID={inputId} {...props} />
-      )}
+    <InputSupports {...supportsProps} inputValue={selectedProps?.value}>
+      {({ inputId, ...props }) => {
+        return (
+          <TextInputBase
+            ref={ref}
+            nativeID={inputId}
+            {...props}
+            {...inputProps}
+            variant={{ ...variant, validation: props.validation }}
+          />
+        )
+      }}
     </InputSupports>
   )
 })

package/src/TextInput/TextInput.jsx

@@ -47,16 +47,23 @@ const TextInput = React.forwardRef(({ tokens, nativeID, variant = {}, ...rest },
 
   const inputProps = {
     ...selectedProps,
-    tokens,
-    variant: { ...variant, validation: supportsProps.validation }
+    tokens
   }
 
   return (
     <>
-      <InputSupports nativeID={nativeID} {...supportsProps}>
-        {({ inputId, ...propsFromInputSupports }) => (
-          <TextInputBase ref={ref} nativeID={inputId} {...propsFromInputSupports} {...inputProps} />
-        )}
+      <InputSupports nativeID={nativeID} {...supportsProps} inputValue={selectedProps?.value}>
+        {({ inputId, ...propsFromInputSupports }) => {
+          return (
+            <TextInputBase
+              ref={ref}
+              nativeID={inputId}
+              {...propsFromInputSupports}
+              {...inputProps}
+              variant={{ ...variant, validation: propsFromInputSupports.validation }}
+            />
+          )
+        }}
       </InputSupports>
       {rest.children}
     </>

package/src/TextInput/TextInputBase.jsx

@@ -53,7 +53,10 @@ const selectInputStyles = (
   buttonCount = 0,
   buttonSize = 0,
   buttonsGapSize = 0,
-  isPassword
+  isPassword,
+  iconLeftWidth,
+  iconLeftGap,
+  direction
 ) => {
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
@@ -85,6 +88,16 @@ const selectInputStyles = (
     }
   })
 
+  const getPaddingLeft = () => {
+    if (type === 'card') {
+      return offsetBorder(paddingLeft + 34)
+    }
+    if (direction === 'left') {
+      return offsetBorder(iconLeftWidth + iconLeftGap + staticStyles.iconLeftContainer.paddingLeft)
+    }
+    return offsetBorder(paddingLeft)
+  }
+
   const buttonSpacing = isPassword ? buttonsGapSize : -buttonsGapSize
   const adjustedPaddingRight = paddingRight + (buttonCount ? 1 : 0) * (buttonSize + buttonSpacing)
   const adjustedPaddingWithButtons = buttonCount > 1 ? paddingRight : adjustedPaddingRight
@@ -96,7 +109,7 @@ const selectInputStyles = (
     borderWidth,
     borderColor,
     borderRadius,
-    paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
+    paddingLeft: getPaddingLeft(),
     paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(adjustedPaddingWithButtons),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
@@ -136,12 +149,14 @@ const selectIconContainerStyles = (
   paddingBottom
 })
 
-const selectLeftIconContainerStyles = ({ leftIconPaddingBottom }) => ({
-  // not tokenizing paddingLeft as it remains same across brands for now
-  paddingLeft: 10,
+const selectIconCardLeftContainerStyles = ({ leftIconPaddingBottom }) => ({
   paddingBottom: leftIconPaddingBottom
 })
 
+const selectIconLeftContainerStyles = ({ iconLeftPaddingBottom }) => ({
+  paddingBottom: iconLeftPaddingBottom
+})
+
 const selectButtonsContainerStyle = ({ buttonsPaddingRight }) => ({
   paddingRight: buttonsPaddingRight
 })
@@ -189,12 +204,14 @@ const TextInputBase = React.forwardRef(
       variant = {},
       type,
       onKeyPress,
+      direction,
       ...rest
     },
     ref
   ) => {
     const [isFocused, setIsFocused] = React.useState(false)
     const [showPassword, setShowPassword] = React.useState(false)
+
     const handleFocus = (event) => {
       setIsFocused(true)
       if (typeof onFocus === 'function') onFocus(event)
@@ -273,11 +290,17 @@ const TextInputBase = React.forwardRef(
       defaultCreditIcon,
       amexIcon,
       visaIcon,
-      masterCardIcon
+      masterCardIcon,
+      iconLeftGap
     } = themeTokens
     const buttonsGapSize = useSpacingScale(buttonsGap)
     const getCopy = useCopy({ dictionary, copy })
-    const textInputButtons = buttons
+    const textInputButtons =
+      direction === 'left'
+        ? buttons.filter((button) => button && button.key !== 'submitIcon')
+        : buttons
+    const submitIcon =
+      direction === 'left' ? buttons.find((button) => button && button.key === 'submitIcon') : null
 
     if (onClear && isDirty) {
       textInputButtons?.unshift(
@@ -323,6 +346,7 @@ const TextInputBase = React.forwardRef(
     }
 
     const { themeOptions } = useTheme()
+    const iconLeftWidth = submitIcon ? submitIcon.props.tokens.size ?? 0 : 0
     const nativeInputStyle = selectInputStyles(
       { ...themeTokens, height },
       themeOptions,
@@ -331,15 +355,30 @@ const TextInputBase = React.forwardRef(
       buttons?.length,
       themeTokens.buttonSize,
       buttonsGapSize,
-      isPassword
+      isPassword,
+      iconLeftWidth,
+      iconLeftGap,
+      direction
     )
 
+    const shouldShowSubmitIcon = submitIcon && direction === 'left' && !inactive
+
     return (
       <View style={selectOuterBorderStyles(themeTokens)}>
+        {shouldShowSubmitIcon && (
+          <View
+            style={[staticStyles.iconLeftContainer, selectIconLeftContainerStyles(themeTokens)]}
+          >
+            {submitIcon}
+          </View>
+        )}
         {type === 'card' && (
           <View
             pointerEvents="none"
-            style={[staticStyles.leftIconContainer, selectLeftIconContainerStyles(themeTokens)]}
+            style={[
+              staticStyles.iconCardLeftContainer,
+              selectIconCardLeftContainerStyles(themeTokens)
+            ]}
           >
             {getIcon(currentValue, { defaultCreditIcon, amexIcon, visaIcon, masterCardIcon })}
           </View>
@@ -424,7 +463,15 @@ const staticStyles = StyleSheet.create({
     right: 0,
     bottom: 0
   },
-  leftIconContainer: {
+  iconCardLeftContainer: {
+    paddingLeft: 10,
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    zIndex: 1
+  },
+  iconLeftContainer: {
+    paddingLeft: 10,
     position: 'absolute',
     left: 0,
     bottom: 0,

package/src/utils/props/inputSupportsProps.js

@@ -38,7 +38,15 @@ export default {
     /**
      * Use to visually mark an input as valid or invalid.
      */
-    validation: PropTypes.oneOf(['error', 'success'])
+    validation: PropTypes.oneOf(['error', 'success']),
+    /**
+     * The text value from an input field.
+     */
+    inputValue: PropTypes.string,
+    /**
+     * Max number of characters allowed id an input text.
+     */
+    maxCharacterAllowed: PropTypes.number
   },
   select: ({
     copy,
@@ -49,7 +57,9 @@ export default {
     feedbackTokens,
     feedbackProps,
     tooltip,
-    validation
+    validation,
+    inputValue,
+    maxCharacterAllowed
   }) => ({
     supportsProps: {
       copy,
@@ -60,7 +70,9 @@ export default {
       feedbackTokens,
       feedbackProps,
       tooltip,
-      validation
+      validation,
+      inputValue,
+      maxCharacterAllowed
     }
   })
 }