@telus-uds/components-base 1.68.0 → 1.69.0

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 15 Nov 2023 18:34:44 GMT and should not be manually modified.
+This log was last generated on Sat, 18 Nov 2023 02:25:11 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.69.0
+
+Sat, 18 Nov 2023 02:25:11 GMT
+
+### Minor changes
+
+- updating notification stories (srikanthkhari@gmail.com)
+- Bump @telus-uds/system-theme-tokens to v2.46.0
+
+### Patches
+
+- `TermsAndConditions`: Fix unexpected state handling in `ExpandCollapse.Panel` (shahzaibkhalidmalik@outlook.com)
+- fixes to getIcon method for card variant in TextInput (email not defined)
+- removing koodo rebrand iconset from supports (srikanthkhari@gmail.com)
+
 ## 1.68.0
 
-Wed, 15 Nov 2023 18:34:44 GMT
+Wed, 15 Nov 2023 18:45:58 GMT
 
 ### Minor changes
 

package/lib/ExpandCollapse/Panel.js

@@ -174,7 +174,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) =>
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: selectContainerStyles(themeTokens),
-          children: children
+          children: isExpanded ? children : null
         })
       })
     })]

package/lib/TextInput/TextInputBase.js

@@ -152,26 +152,29 @@ const getIcon = function () {
     visaIcon,
     masterCardIcon
   } = arguments.length > 1 ? arguments[1] : undefined;
-  const cardType = {
-    1: {
-      icon: visaIcon,
-      testID: 'visa'
-    },
-    2: {
-      icon: amexIcon,
-      testID: 'amex'
-    },
-    4: {
-      icon: masterCardIcon,
-      testID: 'mastercard'
-    }
-  };
-  const firstDigit = cardNumber ? cardNumber[0] : '';
-  const defaultIcon = {
+  const sanitizedCardNumber = cardNumber.replace(/[^0-9]/g, '');
+  const firstFourDigits = sanitizedCardNumber.slice(0, 4);
+  const number = Number(firstFourDigits);
+  const visaRange = number >= 4000 && number <= 4999;
+  const amexRange = number >= 3400 && number <= 3499 || number >= 3700 && number <= 3799;
+  const masterCardRange = number >= 5100 && number <= 5599 || number >= 2221 && number <= 2720;
+  let selectedIcon = {
     icon: defaultCreditIcon,
     testID: 'default'
   };
-  const selectedIcon = cardNumber.length > 4 ? cardType[firstDigit] || defaultIcon : defaultIcon;
+  const objVisaIcon = {
+    icon: visaIcon,
+    testID: 'visa'
+  };
+  const objAmexIcon = {
+    icon: amexIcon,
+    testID: 'amex'
+  };
+  const objMasterCardIcon = {
+    icon: masterCardIcon,
+    testID: 'mastercard'
+  };
+  if (visaRange) selectedIcon = objVisaIcon;else if (amexRange) selectedIcon = objAmexIcon;else if (masterCardRange) selectedIcon = objMasterCardIcon;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
     icon: selectedIcon.icon,
     variant: {

package/lib-module/ExpandCollapse/Panel.js

@@ -166,7 +166,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref4, ref) => {
         },
         children: /*#__PURE__*/_jsx(View, {
           style: selectContainerStyles(themeTokens),
-          children: children
+          children: isExpanded ? children : null
         })
       })
     })]

package/lib-module/TextInput/TextInputBase.js

@@ -144,26 +144,29 @@ const getIcon = function () {
     visaIcon,
     masterCardIcon
   } = arguments.length > 1 ? arguments[1] : undefined;
-  const cardType = {
-    1: {
-      icon: visaIcon,
-      testID: 'visa'
-    },
-    2: {
-      icon: amexIcon,
-      testID: 'amex'
-    },
-    4: {
-      icon: masterCardIcon,
-      testID: 'mastercard'
-    }
-  };
-  const firstDigit = cardNumber ? cardNumber[0] : '';
-  const defaultIcon = {
+  const sanitizedCardNumber = cardNumber.replace(/[^0-9]/g, '');
+  const firstFourDigits = sanitizedCardNumber.slice(0, 4);
+  const number = Number(firstFourDigits);
+  const visaRange = number >= 4000 && number <= 4999;
+  const amexRange = number >= 3400 && number <= 3499 || number >= 3700 && number <= 3799;
+  const masterCardRange = number >= 5100 && number <= 5599 || number >= 2221 && number <= 2720;
+  let selectedIcon = {
     icon: defaultCreditIcon,
     testID: 'default'
   };
-  const selectedIcon = cardNumber.length > 4 ? cardType[firstDigit] || defaultIcon : defaultIcon;
+  const objVisaIcon = {
+    icon: visaIcon,
+    testID: 'visa'
+  };
+  const objAmexIcon = {
+    icon: amexIcon,
+    testID: 'amex'
+  };
+  const objMasterCardIcon = {
+    icon: masterCardIcon,
+    testID: 'mastercard'
+  };
+  if (visaRange) selectedIcon = objVisaIcon;else if (amexRange) selectedIcon = objAmexIcon;else if (masterCardRange) selectedIcon = objMasterCardIcon;
   return /*#__PURE__*/_jsx(Icon, {
     icon: selectedIcon.icon,
     variant: {

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.45.0",
+    "@telus-uds/system-theme-tokens": "^2.46.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -73,5 +73,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.68.0"
+  "version": "1.69.0"
 }

package/src/ExpandCollapse/Panel.jsx

@@ -168,7 +168,7 @@ const ExpandCollapsePanel = forwardRef(
               })
             }}
           >
-            <View style={selectContainerStyles(themeTokens)}>{children}</View>
+            <View style={selectContainerStyles(themeTokens)}>{isExpanded ? children : null}</View>
           </View>
         </Animated.View>
       </View>

package/src/TextInput/TextInputBase.jsx

@@ -141,15 +141,23 @@ const selectButtonsContainerStyle = ({ 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 sanitizedCardNumber = cardNumber.replace(/[^0-9]/g, '')
+  const firstFourDigits = sanitizedCardNumber.slice(0, 4)
+  const number = Number(firstFourDigits)
+
+  const visaRange = number >= 4000 && number <= 4999
+  const amexRange = (number >= 3400 && number <= 3499) || (number >= 3700 && number <= 3799)
+  const masterCardRange = (number >= 5100 && number <= 5599) || (number >= 2221 && number <= 2720)
+
+  let selectedIcon = { icon: defaultCreditIcon, testID: 'default' }
+  const objVisaIcon = { icon: visaIcon, testID: 'visa' }
+  const objAmexIcon = { icon: amexIcon, testID: 'amex' }
+  const objMasterCardIcon = { icon: masterCardIcon, testID: 'mastercard' }
+
+  if (visaRange) selectedIcon = objVisaIcon
+  else if (amexRange) selectedIcon = objAmexIcon
+  else if (masterCardRange) selectedIcon = objMasterCardIcon
 
-  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} />
 }