@telus-uds/components-base 1.65.0 → 1.67.0

package/src/TextInput/TextInputBase.jsx

@@ -4,6 +4,7 @@ import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-
 import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider'
 import StackView from '../StackView'
 import IconButton from '../IconButton'
+import Icon from '../Icon'
 import {
   a11yProps,
   getTokensPropType,
@@ -48,7 +49,8 @@ const selectInputStyles = (
     height
   },
   themeOptions,
-  inactive
+  inactive,
+  type
 ) => {
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
@@ -88,7 +90,7 @@ const selectInputStyles = (
     borderWidth,
     borderColor,
     borderRadius,
-    paddingLeft: offsetBorder(paddingLeft),
+    paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
     paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
@@ -128,10 +130,29 @@ const selectIconContainerStyles = (
   paddingBottom
 })
 
+const selectLeftIconContainerStyles = ({ leftIconPaddingBottom }) => ({
+  // not tokenizing paddingLeft as it remains same across brands for now
+  paddingLeft: 10,
+  paddingBottom: leftIconPaddingBottom
+})
+
 const selectButtonsContainerStyle = ({ buttonsPaddingRight }) => ({
   paddingRight: buttonsPaddingRight
 })
 
+const getIcon = (cardNumber = '', { defaultCreditIcon, amexIcon, visaIcon, masterCardIcon }) => {
+  const cardType = {
+    1: { icon: visaIcon, testID: 'visa' },
+    2: { icon: amexIcon, testID: 'amex' },
+    4: { icon: masterCardIcon, testID: 'mastercard' }
+  }
+
+  const firstDigit = cardNumber ? cardNumber[0] : ''
+  const defaultIcon = { icon: defaultCreditIcon, testID: 'default' }
+  const selectedIcon = cardNumber.length > 4 ? cardType[firstDigit] || defaultIcon : defaultIcon
+  return <Icon icon={selectedIcon.icon} variant={{ size: 'large' }} testID={selectedIcon.testID} />
+}
+
 const TextInputBase = forwardRef(
   (
     {
@@ -152,6 +173,7 @@ const TextInputBase = forwardRef(
       tokens,
       value,
       variant = {},
+      type,
       ...rest
     },
     ref
@@ -187,6 +209,9 @@ const TextInputBase = forwardRef(
       onChange,
       readOnly
     })
+    const { password, numeric } = variant
+    const isNumeric = numeric || type === 'card' || type === 'number'
+    const isPassword = password || type === 'password'
 
     const element = inputRef?.current
     useEffect(() => {
@@ -198,9 +223,14 @@ const TextInputBase = forwardRef(
     }, [element, pattern])
 
     const handleChangeText = (event) => {
-      const { numeric } = variant
       const text = event.nativeEvent?.text || event.target?.value
-      const filteredText = numeric ? text.replace(/[^\d]/g, '') : text
+      let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') : text
+      if (type === 'card' && filteredText) {
+        const formattedValue = filteredText.replace(/[^a-zA-Z0-9]/g, '')
+        const regex = new RegExp(`([a-zA-Z0-9]{4})(?=[a-zA-Z0-9])`, 'g')
+        // Add a space every 4 digits starting from the 5th position
+        filteredText = formattedValue.replace(regex, '$1 ').trim()
+      }
       setValue(filteredText, event)
       if (typeof onChangeText === 'function') onChangeText(filteredText, event)
     }
@@ -224,7 +254,11 @@ const TextInputBase = forwardRef(
       clearButtonIcon: ClearButtonIcon,
       icon: IconComponent,
       passwordShowButtonIcon,
-      passwordHideButtonIcon
+      passwordHideButtonIcon,
+      defaultCreditIcon,
+      amexIcon,
+      visaIcon,
+      masterCardIcon
     } = themeTokens
     const buttonsGapSize = useSpacingScale(buttonsGap)
     const getCopy = useCopy({ dictionary, copy })
@@ -242,7 +276,7 @@ const TextInputBase = forwardRef(
       )
     }
 
-    if (variant.password) {
+    if (isPassword) {
       textInputButtons?.unshift(
         <IconButton
           accessibilityLabel={
@@ -268,27 +302,41 @@ const TextInputBase = forwardRef(
       onMouseOut: handleMouseOut,
       onChange: handleChangeText,
       defaultValue: initialValue,
+      maxLength: type === 'card' ? 19 : undefined,
       value: isControlled ? currentValue : undefined
     }
 
     const { themeOptions } = useTheme()
-    const nativeInputStyle = selectInputStyles({ ...themeTokens, height }, themeOptions, inactive)
+    const nativeInputStyle = selectInputStyles(
+      { ...themeTokens, height },
+      themeOptions,
+      inactive,
+      type
+    )
 
     return (
       <View style={selectOuterBorderStyles(themeTokens)}>
+        {type === 'card' && (
+          <View
+            pointerEvents="none"
+            style={[staticStyles.leftIconContainer, selectLeftIconContainerStyles(themeTokens)]}
+          >
+            {getIcon(currentValue, { defaultCreditIcon, amexIcon, visaIcon, masterCardIcon })}
+          </View>
+        )}
         <NativeTextInput
           ref={inputRef}
-          keyboardType={variant.numeric && 'numeric'}
-          inputMode={variant.numeric && 'numeric'}
+          keyboardType={isNumeric && 'numeric'}
+          inputMode={isNumeric && 'numeric'}
           style={nativeInputStyle}
-          secureTextEntry={variant.password && !showPassword}
+          secureTextEntry={isPassword && !showPassword}
           {...inputProps}
         />
         {IconComponent && (
           <View
             pointerEvents="none" // avoid hijacking input press events
             style={[
-              staticStyles.iconContainer,
+              staticStyles.rightIconContainer,
               selectIconContainerStyles({ ...themeTokens, buttonsGapSize }, buttons?.length)
             ]}
           >
@@ -321,6 +369,7 @@ TextInputBase.propTypes = {
       clearButtonAccessibilityLabel: PropTypes.string
     })
   ]),
+  type: PropTypes.oneOfType([PropTypes.oneOf(['password', 'card', 'number'])]),
   height: PropTypes.number,
   inactive: PropTypes.bool,
   initialValue: PropTypes.string,
@@ -349,9 +398,15 @@ const staticStyles = StyleSheet.create({
     bottom: 0,
     justifyContent: 'center'
   },
-  iconContainer: {
+  rightIconContainer: {
     position: 'absolute',
     right: 0,
     bottom: 0
+  },
+  leftIconContainer: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    zIndex: 1
   }
 })

package/src/TextInput/propTypes.js

@@ -8,6 +8,10 @@ const textInputPropTypes = {
    * together with the `onChange` to pass down and update the lifted state.
    */
   value: PropTypes.string,
+  /**
+   * Use this to set the type of the input. Defaults to `text`.
+   */
+  type: PropTypes.string,
   /**
    * Use this to set the initial value of an uncontrolled input.
    * Updating `initialValue` will **not** update the actual value.

package/src/index.js

@@ -9,6 +9,7 @@ export { default as Listbox } from './Listbox'
 export { default as Checkbox } from './Checkbox'
 export * from './Checkbox'
 export { default as CheckboxCard } from './CheckboxCard'
+export { default as CheckboxCardGroup } from './CheckboxCardGroup'
 export { default as Divider } from './Divider'
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse'
 export { default as Feedback } from './Feedback'

package/src/utils/props/textInputProps.js

@@ -20,6 +20,7 @@ const textProps = {
  */
 const inputValueProps = {
   value: PropTypes.string,
+  type: PropTypes.string,
   initialValue: PropTypes.string,
   readOnly: PropTypes.bool,
   inactive: PropTypes.bool