@telus-uds/components-base 1.87.0 → 1.89.0

package/CHANGELOG.md

@@ -1,12 +1,41 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Mon, 24 Jun 2024 16:19:28 GMT and should not be manually modified.
+This log was last generated on Fri, 19 Jul 2024 18:14:09 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.89.0
+
+Fri, 19 Jul 2024 18:14:09 GMT
+
+### Minor changes
+
+- `PriceLockup`: Add `micro` option to `size` variant (tim.hysniu@telus.com)
+- Add type definitions for `Checkbox` and `CheckboxCardGroup` (evander.owusu@telus.com)
+
+### Patches
+
+- `Carousel`: add accessibilityLabel to autoplay button to resolve accessibility issue (<tony.eng@telus.com>)
+- `TextInput`: make feedback tokens and props work (guillermo.peitzner@telus.com)
+- `CarouselTabsPanel`: add accessibilityRole to resolve accessibility issue (<tony.eng@telus.com>)
+
+## 1.88.0
+
+Thu, 04 Jul 2024 19:35:15 GMT
+
+### Minor changes
+
+- Add data masking to validator component (Mauricio.BatresMontejo@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.59.0
+
+### Patches
+
+- Remove label like unique field in RadioGroup component (Mauricio.BatresMontejo@telus.com)
+- `OrderedList`: fix numbered text alignment (guillermo.peitzner@telus.com)
+
 ## 1.87.0
 
-Mon, 24 Jun 2024 16:19:28 GMT
+Mon, 24 Jun 2024 16:28:34 GMT
 
 ### Minor changes
 

package/lib/Carousel/Carousel.js

@@ -610,6 +610,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         })],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
           icon: isCarouselPlaying ? pauseIcon : playIcon,
+          accessibilityLabel: isCarouselPlaying ? getCopy('pauseButtonLabel') : getCopy('playButtonLabel'),
           variant: previousNextIconButtonVariants,
           onPress: onAnimationControlButtonPress
         })

package/lib/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -50,6 +50,7 @@ const CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
         variant: dividerVariant
       },
       ref: ref,
+      accessibilityRole: "tablist",
       children: items.map((_ref2, index) => {
         let {
           title,

package/lib/Carousel/dictionary.js

@@ -11,7 +11,9 @@ var _default = {
     iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
     stepLabel: '%{itemLabel} %{stepNumber}',
     stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}',
-    skipLink: 'Skip %{title}'
+    skipLink: 'Skip %{title}',
+    playButtonLabel: 'Play',
+    pauseButtonLabel: 'Pause'
   },
   fr: {
     // French translations
@@ -19,7 +21,9 @@ var _default = {
     iconButtonLabel: 'Montrer %{itemLabel} %{targetStep} de %{stepCount}',
     stepLabel: '%{itemLabel} %{stepNumber}',
     stepTrackerLabel: '%{itemLabel} %{stepNumber} de %{stepCount}',
-    skipLink: 'Passer %{title}'
+    skipLink: 'Passer %{title}',
+    playButtonLabel: 'Lancer',
+    pauseButtonLabel: 'Pauser'
   }
 };
 exports.default = _default;

package/lib/InputSupports/InputSupports.js

@@ -23,6 +23,7 @@ const InputSupports = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     hintPosition = 'inline',
     feedback,
     feedbackTokens = {},
+    feedbackProps = {},
     tooltip,
     validation,
     nativeID
@@ -60,7 +61,8 @@ const InputSupports = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       id: feedbackId,
       title: feedback,
       validation: validation,
-      tokens: feedbackTokens
+      tokens: feedbackTokens,
+      ...feedbackProps
     }) : null]
   });
 });
@@ -92,6 +94,10 @@ InputSupports.propTypes = {
    * Additional tokens to override the default feedback tokens.
    */
   feedbackTokens: (0, _utils.getTokensPropType)('Feedback'),
+  /**
+   * Additional props to pass to the `Feedback` component.
+   */
+  feedbackProps: _propTypes.default.object,
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */

package/lib/OrderedList/Item.js

@@ -10,7 +10,6 @@ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Vi
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _utils = require("../utils");
 var _ThemeProvider = require("../ThemeProvider");
-var _StackView = _interopRequireDefault(require("../StackView"));
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _ItemBase = _interopRequireDefault(require("./ItemBase"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -36,20 +35,18 @@ const selectItemTextStyles = (_ref, themeOptions) => {
 const selectItemCounterStyles = _ref2 => {
   let {
     itemBulletContainerWidth,
-    itemBulletContainerAlign,
+    itemBulletTextAlign,
     itemFontWeight,
     itemFontSize,
     itemFontName,
     itemLineHeight,
     themeOptions,
-    listGutter,
     itemColor
   } = _ref2;
   return {
     color: itemColor,
     width: itemBulletContainerWidth,
-    paddingRight: listGutter,
-    textAlign: itemBulletContainerAlign,
+    textAlign: itemBulletTextAlign,
     ...(0, _ThemeProvider.applyTextStyles)({
       fontWeight: itemFontWeight,
       fontSize: itemFontSize,
@@ -62,10 +59,12 @@ const selectItemCounterStyles = _ref2 => {
 const selectItemContentStyles = (_ref3, isLastChild) => {
   let {
     interItemMargin,
+    listGutter,
     ...themeTokens
   } = _ref3;
   return {
     ...themeTokens,
+    marginLeft: listGutter,
     marginBottom: !isLastChild ? interItemMargin : 0
   };
 };
@@ -106,27 +105,19 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [staticStyles.itemCounter, selectItemCounterStyles(themeTokens)],
       children: itemCounter
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: staticStyles.itemContent,
-      children: title ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
-        tokens: {
-          flexShrink: 1
-        },
-        space: 0,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.itemContent, selectItemContentStyles(themeTokens, isLastChild)],
+      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           variant: {
             size: 'h4'
           },
           tokens: headingTokens,
           children: title
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: selectItemContentStyles(themeTokens, isLastChild),
-          children: itemContent
-        })]
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: selectItemContentStyles(themeTokens, isLastChild),
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         children: itemContent
-      })
+      })]
     })]
   });
 });
@@ -162,13 +153,13 @@ var _default = Item;
 exports.default = _default;
 const staticStyles = _StyleSheet.default.create({
   container: {
+    flex: 1,
     flexDirection: 'row'
   },
   itemCounter: {
-    flexWrap: 'wrap'
+    alignItems: 'flex-end'
   },
   itemContent: {
-    flexDirection: 'column',
-    marginLeft: 8
+    flexShrink: 1
   }
 });

package/lib/Radio/RadioGroup.js

@@ -121,7 +121,7 @@ const RadioGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     onChange,
     readOnly: readOnly || inactive
   });
-  const uniqueFields = ['id', 'label'];
+  const uniqueFields = ['id'];
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
     throw new Error(`RadioGroup items must have unique ${uniqueFields.join(', ')}`);
   }

package/lib/Validator/Validator.js

@@ -32,6 +32,7 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     value = '',
     inactive,
+    mask = '',
     onChange,
     tokens = {},
     variant = {},
@@ -77,32 +78,36 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       [codeId]: val
     });
   };
+  const changeDataMasking = boxElement => {
+    let charMasking = '';
+    const element = boxElement;
+    if (mask && mask.length === 1) charMasking = mask;else if (mask && mask.length > 1) charMasking = mask.substring(0, 1);
+    if (charMasking) element.value = charMasking;
+  };
   const handleChangeCode = () => {
     let code = '';
     for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i];
     if (typeof onChange === 'function') onChange(code, singleCodes);
   };
   const handleChangeCodeValues = (event, codeId, nextIndex) => {
-    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value, _codeElement$value2;
+    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value;
     const codeElement = (_codeReferences$codeI = codeReferences[codeId]) === null || _codeReferences$codeI === void 0 ? void 0 : _codeReferences$codeI.current;
     const val = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.value) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
     if (Number(val).toString() === 'NaN') {
       codeElement.value = singleCodes[codeId] ?? '';
       return;
     }
-    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value = codeElement.value) === null || _codeElement$value === void 0 ? void 0 : _codeElement$value.length) > 1) {
-      const oldValue = singleCodes[codeId];
-      const newValue = codeElement.value.replace(oldValue, '');
-      codeElement.value = newValue;
-      handleSingleCodes(codeId, codeElement.value, 'success');
-    }
     handleSingleCodes(codeId, (codeElement === null || codeElement === void 0 ? void 0 : codeElement.value) ?? singleCodes[codeId], 'success');
     handleChangeCode();
     if (nextIndex === validatorsLength) {
       codeElement.blur();
+      changeDataMasking(codeElement);
       return;
     }
-    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value2 = codeElement.value) === null || _codeElement$value2 === void 0 ? void 0 : _codeElement$value2.length) > 0) codeReferences[prefix + nextIndex].current.focus();
+    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value = codeElement.value) === null || _codeElement$value === void 0 ? void 0 : _codeElement$value.length) > 0) {
+      codeReferences[prefix + nextIndex].current.focus();
+      changeDataMasking(codeElement);
+    }
   };
   const handleKeyPress = (event, currentIndex, previousIndex) => {
     if (!(event.keyCode === 8 || event.code === 'Backspace')) return;
@@ -150,7 +155,7 @@ const Validator = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   /* eslint-disable react-hooks/exhaustive-deps */
   _react.default.useEffect(() => {
     for (let i = 0; i < validatorsLength; i += 1) {
-      codeReferences[prefix + i].current.value = text[i] ?? '';
+      if (mask && text[i]) codeReferences[prefix + i].current.value = mask;else codeReferences[prefix + i].current.value = text[i] ?? '';
       handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '');
     }
   }, [text]);
@@ -207,6 +212,10 @@ Validator.propTypes = {
    * If true, the component is inactive and non editable.
    */
   inactive: _propTypes.default.bool,
+  /**
+   * Show masked characters and obscure the actual input. For example: '*'
+   */
+  mask: _propTypes.default.string,
   /**
    * Use to react upon input's value changes. Required when the `value` prop is set. Will receive the input's value as an argument.
    */

package/lib/utils/props/inputSupportsProps.js

@@ -29,6 +29,14 @@ var _default = {
      * Visual variant is determined based on the `validation` prop.
      */
     feedback: _propTypes.default.string,
+    /**
+     * Tokens to be passed to the feedback component.
+     */
+    feedbackTokens: _propTypes.default.object,
+    /**
+     * Props to be passed to the feedback component.
+     */
+    feedbackProps: _propTypes.default.object,
     /**
      * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
      */
@@ -45,6 +53,8 @@ var _default = {
       hint,
       hintPosition,
       feedback,
+      feedbackTokens,
+      feedbackProps,
       tooltip,
       validation
     } = _ref;
@@ -55,6 +65,8 @@ var _default = {
         hint,
         hintPosition,
         feedback,
+        feedbackTokens,
+        feedbackProps,
         tooltip,
         validation
       }

package/lib-module/Carousel/Carousel.js

@@ -604,6 +604,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         })],
         children: /*#__PURE__*/_jsx(IconButton, {
           icon: isCarouselPlaying ? pauseIcon : playIcon,
+          accessibilityLabel: isCarouselPlaying ? getCopy('pauseButtonLabel') : getCopy('playButtonLabel'),
           variant: previousNextIconButtonVariants,
           onPress: onAnimationControlButtonPress
         })

package/lib-module/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -44,6 +44,7 @@ const CarouselTabsPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         variant: dividerVariant
       },
       ref: ref,
+      accessibilityRole: "tablist",
       children: items.map((_ref2, index) => {
         let {
           title,

package/lib-module/Carousel/dictionary.js

@@ -5,7 +5,9 @@ export default {
     iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
     stepLabel: '%{itemLabel} %{stepNumber}',
     stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}',
-    skipLink: 'Skip %{title}'
+    skipLink: 'Skip %{title}',
+    playButtonLabel: 'Play',
+    pauseButtonLabel: 'Pause'
   },
   fr: {
     // French translations
@@ -13,6 +15,8 @@ export default {
     iconButtonLabel: 'Montrer %{itemLabel} %{targetStep} de %{stepCount}',
     stepLabel: '%{itemLabel} %{stepNumber}',
     stepTrackerLabel: '%{itemLabel} %{stepNumber} de %{stepCount}',
-    skipLink: 'Passer %{title}'
+    skipLink: 'Passer %{title}',
+    playButtonLabel: 'Lancer',
+    pauseButtonLabel: 'Pauser'
   }
 };

package/lib-module/InputSupports/InputSupports.js

@@ -17,6 +17,7 @@ const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     hintPosition = 'inline',
     feedback,
     feedbackTokens = {},
+    feedbackProps = {},
     tooltip,
     validation,
     nativeID
@@ -54,7 +55,8 @@ const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       id: feedbackId,
       title: feedback,
       validation: validation,
-      tokens: feedbackTokens
+      tokens: feedbackTokens,
+      ...feedbackProps
     }) : null]
   });
 });
@@ -86,6 +88,10 @@ InputSupports.propTypes = {
    * Additional tokens to override the default feedback tokens.
    */
   feedbackTokens: getTokensPropType('Feedback'),
+  /**
+   * Additional props to pass to the `Feedback` component.
+   */
+  feedbackProps: PropTypes.object,
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */

package/lib-module/OrderedList/Item.js

@@ -4,7 +4,6 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { getTokensPropType, htmlAttrs, selectSystemProps, variantProp, viewProps, wrapStringsInText } from '../utils';
 import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
-import StackView from '../StackView';
 import Typography from '../Typography';
 import ItemBase from './ItemBase';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -30,20 +29,18 @@ const selectItemTextStyles = (_ref, themeOptions) => {
 const selectItemCounterStyles = _ref2 => {
   let {
     itemBulletContainerWidth,
-    itemBulletContainerAlign,
+    itemBulletTextAlign,
     itemFontWeight,
     itemFontSize,
     itemFontName,
     itemLineHeight,
     themeOptions,
-    listGutter,
     itemColor
   } = _ref2;
   return {
     color: itemColor,
     width: itemBulletContainerWidth,
-    paddingRight: listGutter,
-    textAlign: itemBulletContainerAlign,
+    textAlign: itemBulletTextAlign,
     ...applyTextStyles({
       fontWeight: itemFontWeight,
       fontSize: itemFontSize,
@@ -56,10 +53,12 @@ const selectItemCounterStyles = _ref2 => {
 const selectItemContentStyles = (_ref3, isLastChild) => {
   let {
     interItemMargin,
+    listGutter,
     ...themeTokens
   } = _ref3;
   return {
     ...themeTokens,
+    marginLeft: listGutter,
     marginBottom: !isLastChild ? interItemMargin : 0
   };
 };
@@ -100,27 +99,19 @@ const Item = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     children: [/*#__PURE__*/_jsx(View, {
       style: [staticStyles.itemCounter, selectItemCounterStyles(themeTokens)],
       children: itemCounter
-    }), /*#__PURE__*/_jsx(View, {
-      style: staticStyles.itemContent,
-      children: title ? /*#__PURE__*/_jsxs(StackView, {
-        tokens: {
-          flexShrink: 1
-        },
-        space: 0,
-        children: [/*#__PURE__*/_jsx(Typography, {
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [staticStyles.itemContent, selectItemContentStyles(themeTokens, isLastChild)],
+      children: [title && /*#__PURE__*/_jsx(View, {
+        children: /*#__PURE__*/_jsx(Typography, {
           variant: {
             size: 'h4'
           },
           tokens: headingTokens,
           children: title
-        }), /*#__PURE__*/_jsx(View, {
-          style: selectItemContentStyles(themeTokens, isLastChild),
-          children: itemContent
-        })]
-      }) : /*#__PURE__*/_jsx(View, {
-        style: selectItemContentStyles(themeTokens, isLastChild),
+        })
+      }), /*#__PURE__*/_jsx(View, {
         children: itemContent
-      })
+      })]
     })]
   });
 });
@@ -155,13 +146,13 @@ Item.displayName = 'OrderedListItem';
 export default Item;
 const staticStyles = StyleSheet.create({
   container: {
+    flex: 1,
     flexDirection: 'row'
   },
   itemCounter: {
-    flexWrap: 'wrap'
+    alignItems: 'flex-end'
   },
   itemContent: {
-    flexDirection: 'column',
-    marginLeft: 8
+    flexShrink: 1
   }
 });

package/lib-module/Radio/RadioGroup.js

@@ -114,7 +114,7 @@ const RadioGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange,
     readOnly: readOnly || inactive
   });
-  const uniqueFields = ['id', 'label'];
+  const uniqueFields = ['id'];
   if (!containUniqueFields(items, uniqueFields)) {
     throw new Error(`RadioGroup items must have unique ${uniqueFields.join(', ')}`);
   }

package/lib-module/Validator/Validator.js

@@ -25,6 +25,7 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     value = '',
     inactive,
+    mask = '',
     onChange,
     tokens = {},
     variant = {},
@@ -70,32 +71,36 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       [codeId]: val
     });
   };
+  const changeDataMasking = boxElement => {
+    let charMasking = '';
+    const element = boxElement;
+    if (mask && mask.length === 1) charMasking = mask;else if (mask && mask.length > 1) charMasking = mask.substring(0, 1);
+    if (charMasking) element.value = charMasking;
+  };
   const handleChangeCode = () => {
     let code = '';
     for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i];
     if (typeof onChange === 'function') onChange(code, singleCodes);
   };
   const handleChangeCodeValues = (event, codeId, nextIndex) => {
-    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value, _codeElement$value2;
+    var _codeReferences$codeI, _event$nativeEvent, _event$target, _codeElement$value;
     const codeElement = (_codeReferences$codeI = codeReferences[codeId]) === null || _codeReferences$codeI === void 0 ? void 0 : _codeReferences$codeI.current;
     const val = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.value) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
     if (Number(val).toString() === 'NaN') {
       codeElement.value = singleCodes[codeId] ?? '';
       return;
     }
-    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value = codeElement.value) === null || _codeElement$value === void 0 ? void 0 : _codeElement$value.length) > 1) {
-      const oldValue = singleCodes[codeId];
-      const newValue = codeElement.value.replace(oldValue, '');
-      codeElement.value = newValue;
-      handleSingleCodes(codeId, codeElement.value, 'success');
-    }
     handleSingleCodes(codeId, (codeElement === null || codeElement === void 0 ? void 0 : codeElement.value) ?? singleCodes[codeId], 'success');
     handleChangeCode();
     if (nextIndex === validatorsLength) {
       codeElement.blur();
+      changeDataMasking(codeElement);
       return;
     }
-    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value2 = codeElement.value) === null || _codeElement$value2 === void 0 ? void 0 : _codeElement$value2.length) > 0) codeReferences[prefix + nextIndex].current.focus();
+    if ((codeElement === null || codeElement === void 0 ? void 0 : (_codeElement$value = codeElement.value) === null || _codeElement$value === void 0 ? void 0 : _codeElement$value.length) > 0) {
+      codeReferences[prefix + nextIndex].current.focus();
+      changeDataMasking(codeElement);
+    }
   };
   const handleKeyPress = (event, currentIndex, previousIndex) => {
     if (!(event.keyCode === 8 || event.code === 'Backspace')) return;
@@ -143,7 +148,7 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   /* eslint-disable react-hooks/exhaustive-deps */
   React.useEffect(() => {
     for (let i = 0; i < validatorsLength; i += 1) {
-      codeReferences[prefix + i].current.value = text[i] ?? '';
+      if (mask && text[i]) codeReferences[prefix + i].current.value = mask;else codeReferences[prefix + i].current.value = text[i] ?? '';
       handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '');
     }
   }, [text]);
@@ -200,6 +205,10 @@ Validator.propTypes = {
    * If true, the component is inactive and non editable.
    */
   inactive: PropTypes.bool,
+  /**
+   * Show masked characters and obscure the actual input. For example: '*'
+   */
+  mask: PropTypes.string,
   /**
    * Use to react upon input's value changes. Required when the `value` prop is set. Will receive the input's value as an argument.
    */

package/lib-module/utils/props/inputSupportsProps.js

@@ -22,6 +22,14 @@ export default {
      * Visual variant is determined based on the `validation` prop.
      */
     feedback: PropTypes.string,
+    /**
+     * Tokens to be passed to the feedback component.
+     */
+    feedbackTokens: PropTypes.object,
+    /**
+     * Props to be passed to the feedback component.
+     */
+    feedbackProps: PropTypes.object,
     /**
      * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
      */
@@ -38,6 +46,8 @@ export default {
       hint,
       hintPosition,
       feedback,
+      feedbackTokens,
+      feedbackProps,
       tooltip,
       validation
     } = _ref;
@@ -48,6 +58,8 @@ export default {
         hint,
         hintPosition,
         feedback,
+        feedbackTokens,
+        feedbackProps,
         tooltip,
         validation
       }

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.58.0",
+    "@telus-uds/system-theme-tokens": "^2.59.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -85,6 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.87.0",
+  "version": "1.89.0",
   "types": "types/index.d.ts"
 }

package/src/Carousel/Carousel.jsx

@@ -687,6 +687,9 @@ const Carousel = React.forwardRef(
             >
               <IconButton
                 icon={isCarouselPlaying ? pauseIcon : playIcon}
+                accessibilityLabel={
+                  isCarouselPlaying ? getCopy('pauseButtonLabel') : getCopy('playButtonLabel')
+                }
                 variant={previousNextIconButtonVariants}
                 onPress={onAnimationControlButtonPress}
               />

package/src/Carousel/CarouselTabs/CarouselTabsPanel.jsx

@@ -32,7 +32,13 @@ const CarouselTabsPanel = React.forwardRef(({ items }, ref) => {
 
   return (
     <View style={selectTabPanelStyle()}>
-      <StackView direction="row" space={3} divider={{ variant: dividerVariant }} ref={ref}>
+      <StackView
+        direction="row"
+        space={3}
+        divider={{ variant: dividerVariant }}
+        ref={ref}
+        accessibilityRole="tablist"
+      >
         {items.map(({ title, onPress, inverse, ...panelItemProps }, index) => {
           const selected = index === activeIndex
           const isNext = index === activeIndex + 1

package/src/Carousel/dictionary.js

@@ -5,7 +5,9 @@ export default {
     iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
     stepLabel: '%{itemLabel} %{stepNumber}',
     stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}',
-    skipLink: 'Skip %{title}'
+    skipLink: 'Skip %{title}',
+    playButtonLabel: 'Play',
+    pauseButtonLabel: 'Pause'
   },
   fr: {
     // French translations
@@ -13,6 +15,8 @@ export default {
     iconButtonLabel: 'Montrer %{itemLabel} %{targetStep} de %{stepCount}',
     stepLabel: '%{itemLabel} %{stepNumber}',
     stepTrackerLabel: '%{itemLabel} %{stepNumber} de %{stepCount}',
-    skipLink: 'Passer %{title}'
+    skipLink: 'Passer %{title}',
+    playButtonLabel: 'Lancer',
+    pauseButtonLabel: 'Pauser'
   }
 }

package/src/InputSupports/InputSupports.jsx

@@ -18,6 +18,7 @@ const InputSupports = React.forwardRef(
       hintPosition = 'inline',
       feedback,
       feedbackTokens = {},
+      feedbackProps = {},
       tooltip,
       validation,
       nativeID
@@ -54,6 +55,7 @@ const InputSupports = React.forwardRef(
             title={feedback}
             validation={validation}
             tokens={feedbackTokens}
+            {...feedbackProps}
           />
         ) : null}
       </StackView>
@@ -89,6 +91,10 @@ InputSupports.propTypes = {
    * Additional tokens to override the default feedback tokens.
    */
   feedbackTokens: getTokensPropType('Feedback'),
+  /**
+   * Additional props to pass to the `Feedback` component.
+   */
+  feedbackProps: PropTypes.object,
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */

package/src/OrderedList/Item.jsx

@@ -11,7 +11,6 @@ import {
   wrapStringsInText
 } from '../utils'
 import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
-import StackView from '../StackView'
 import Typography from '../Typography'
 import ItemBase from './ItemBase'
 
@@ -32,19 +31,17 @@ const selectItemTextStyles = (
 
 const selectItemCounterStyles = ({
   itemBulletContainerWidth,
-  itemBulletContainerAlign,
+  itemBulletTextAlign,
   itemFontWeight,
   itemFontSize,
   itemFontName,
   itemLineHeight,
   themeOptions,
-  listGutter,
   itemColor
 }) => ({
   color: itemColor,
   width: itemBulletContainerWidth,
-  paddingRight: listGutter,
-  textAlign: itemBulletContainerAlign,
+  textAlign: itemBulletTextAlign,
   ...applyTextStyles({
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
@@ -54,8 +51,9 @@ const selectItemCounterStyles = ({
   lineHeight: itemLineHeight * itemFontSize
 })
 
-const selectItemContentStyles = ({ interItemMargin, ...themeTokens }, isLastChild) => ({
+const selectItemContentStyles = ({ interItemMargin, listGutter, ...themeTokens }, isLastChild) => ({
   ...themeTokens,
+  marginLeft: listGutter,
   marginBottom: !isLastChild ? interItemMargin : 0
 })
 
@@ -87,17 +85,15 @@ const Item = React.forwardRef(
         <View style={[staticStyles.itemCounter, selectItemCounterStyles(themeTokens)]}>
           {itemCounter}
         </View>
-        <View style={staticStyles.itemContent}>
-          {title ? (
-            <StackView tokens={{ flexShrink: 1 }} space={0}>
+        <View style={[staticStyles.itemContent, selectItemContentStyles(themeTokens, isLastChild)]}>
+          {title && (
+            <View>
               <Typography variant={{ size: 'h4' }} tokens={headingTokens}>
                 {title}
               </Typography>
-              <View style={selectItemContentStyles(themeTokens, isLastChild)}>{itemContent}</View>
-            </StackView>
-          ) : (
-            <View style={selectItemContentStyles(themeTokens, isLastChild)}>{itemContent}</View>
+            </View>
           )}
+          <View>{itemContent}</View>
         </View>
       </ItemBase>
     )
@@ -138,13 +134,13 @@ export default Item
 
 const staticStyles = StyleSheet.create({
   container: {
+    flex: 1,
     flexDirection: 'row'
   },
   itemCounter: {
-    flexWrap: 'wrap'
+    alignItems: 'flex-end'
   },
   itemContent: {
-    flexDirection: 'column',
-    marginLeft: 8
+    flexShrink: 1
   }
 })

package/src/Radio/RadioGroup.jsx

@@ -131,7 +131,7 @@ const RadioGroup = React.forwardRef(
       readOnly: readOnly || inactive
     })
 
-    const uniqueFields = ['id', 'label']
+    const uniqueFields = ['id']
     if (!containUniqueFields(items, uniqueFields)) {
       throw new Error(`RadioGroup items must have unique ${uniqueFields.join(', ')}`)
     }

package/src/Validator/Validator.jsx

@@ -18,7 +18,7 @@ const selectCodeTextInputTokens = ({ outerBorderColor, outerBackgroundColor }) =
 }
 
 const Validator = React.forwardRef(
-  ({ value = '', inactive, onChange, tokens = {}, variant = {}, ...rest }, ref) => {
+  ({ value = '', inactive, mask = '', onChange, tokens = {}, variant = {}, ...rest }, ref) => {
     const defaultRef = React.useRef()
     const codeRef = ref ?? defaultRef
 
@@ -62,6 +62,15 @@ const Validator = React.forwardRef(
       })
     }
 
+    const changeDataMasking = (boxElement) => {
+      let charMasking = ''
+      const element = boxElement
+      if (mask && mask.length === 1) charMasking = mask
+      else if (mask && mask.length > 1) charMasking = mask.substring(0, 1)
+
+      if (charMasking) element.value = charMasking
+    }
+
     const handleChangeCode = () => {
       let code = ''
       for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i]
@@ -76,20 +85,18 @@ const Validator = React.forwardRef(
         codeElement.value = singleCodes[codeId] ?? ''
         return
       }
-      if (codeElement?.value?.length > 1) {
-        const oldValue = singleCodes[codeId]
-        const newValue = codeElement.value.replace(oldValue, '')
-        codeElement.value = newValue
-        handleSingleCodes(codeId, codeElement.value, 'success')
-      }
 
       handleSingleCodes(codeId, codeElement?.value ?? singleCodes[codeId], 'success')
       handleChangeCode()
       if (nextIndex === validatorsLength) {
         codeElement.blur()
+        changeDataMasking(codeElement)
         return
       }
-      if (codeElement?.value?.length > 0) codeReferences[prefix + nextIndex].current.focus()
+      if (codeElement?.value?.length > 0) {
+        codeReferences[prefix + nextIndex].current.focus()
+        changeDataMasking(codeElement)
+      }
     }
 
     const handleKeyPress = (event, currentIndex, previousIndex) => {
@@ -138,7 +145,8 @@ const Validator = React.forwardRef(
     /* eslint-disable react-hooks/exhaustive-deps */
     React.useEffect(() => {
       for (let i = 0; i < validatorsLength; i += 1) {
-        codeReferences[prefix + i].current.value = text[i] ?? ''
+        if (mask && text[i]) codeReferences[prefix + i].current.value = mask
+        else codeReferences[prefix + i].current.value = text[i] ?? ''
         handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '')
       }
     }, [text])
@@ -203,6 +211,10 @@ Validator.propTypes = {
    * If true, the component is inactive and non editable.
    */
   inactive: PropTypes.bool,
+  /**
+   * Show masked characters and obscure the actual input. For example: '*'
+   */
+  mask: PropTypes.string,
   /**
    * Use to react upon input's value changes. Required when the `value` prop is set. Will receive the input's value as an argument.
    */

package/src/utils/props/inputSupportsProps.js

@@ -23,6 +23,14 @@ export default {
      * Visual variant is determined based on the `validation` prop.
      */
     feedback: PropTypes.string,
+    /**
+     * Tokens to be passed to the feedback component.
+     */
+    feedbackTokens: PropTypes.object,
+    /**
+     * Props to be passed to the feedback component.
+     */
+    feedbackProps: PropTypes.object,
     /**
      * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
      */
@@ -32,13 +40,25 @@ export default {
      */
     validation: PropTypes.oneOf(['error', 'success'])
   },
-  select: ({ copy, label, hint, hintPosition, feedback, tooltip, validation }) => ({
+  select: ({
+    copy,
+    label,
+    hint,
+    hintPosition,
+    feedback,
+    feedbackTokens,
+    feedbackProps,
+    tooltip,
+    validation
+  }) => ({
     supportsProps: {
       copy,
       label,
       hint,
       hintPosition,
       feedback,
+      feedbackTokens,
+      feedbackProps,
       tooltip,
       validation
     }

package/types/Checkbox.d.ts

@@ -0,0 +1,47 @@
+import { StyleProp, ViewStyle, TextStyle } from 'react-native'
+import { Tokens, Variant } from '../ThemeProvider'
+
+type CheckboxProps = {
+  checked?: boolean
+  defaultChecked?: boolean
+  error?: boolean
+  feedback?: string
+  id?: string
+  inactive?: boolean
+  label?: string
+  name?: string
+  onChange?: (value: boolean, event: any) => void
+  tokens?: Tokens
+  value?: string | number | boolean
+  variant?: Variant
+  style?: StyleProp<ViewStyle>
+  labelStyle?: StyleProp<TextStyle>
+  containerStyle?: StyleProp<ViewStyle>
+}
+
+type CheckboxTokens = {
+  containerBackgroundColor?: string
+  feedbackMarginBottom?: number
+  feedbackMarginTop?: number
+  feedbackPosition?: string
+  icon?: string
+  iconBackgroundColor?: string
+  iconColor?: string
+  iconSize?: number
+  inputBackgroundColor?: string
+  inputBorderColor?: string
+  inputBorderRadius?: number | string
+  inputBorderWidth?: number | string
+  inputHeight?: number
+  inputOutlineColor?: string
+  inputOutlineOffset?: number
+  inputOutlineWidth?: number | string
+  inputShadow?: string
+  inputWidth?: number
+  labelColor?: string
+  labelFontName?: string
+  labelFontSize?: number
+  labelFontWeight?: number
+  labelLineHeight?: number
+  labelMarginLeft?: number
+}

package/types/CheckboxCardGroup.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react'
+import { Direction, ResponsiveDirection } from './Common'
+
+type CheckboxCardGroupProps = {
+  copy?: 'en' | 'fr'
+  variant?: 'fullWidth'
+  legend?: string
+  tooltip?: string
+  hint?: string
+  hintPosition?: 'inline' | 'below'
+  validation?: 'error' | 'success'
+  feedback?: string
+  initialCheckedIds?: string[]
+  checkedIds?: string[]
+  onChange?: (checkedIds: string[]) => void
+  readOnly?: boolean
+  inactive?: boolean
+}
+
+type CheckboxCardGroupTokens = {
+  borderBottomLeftRadius?: number
+  borderBottomRightRadius?: number
+  borderTopLeftRadius?: number
+  borderTopRightRadius?: number
+  direction?: Direction | ResponsiveDirection
+  fieldSpace?: number
+  outlineOffset?: number
+  outlineWidth?: number
+  showIcon?: boolean
+  space?: number
+}
+
+type checkboxCardTokens = {
+  outerBorderColer?: string
+  outerBorderWidth?: number
+  outerBorderGap?: number
+  flex?: number
+  backgroundColor?: string
+  borderColor?: string
+  borderRadius?: number
+  borderWidth?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  paddingRight?: number
+  paddingTop?: number
+  minWidth?: number
+  shadow?: string
+  contentAlignItems?: string
+  contentJustifyContent?: string
+  contentFlexGrow?: number
+  contentFlexShrink?: number
+  checkboxCheckedBackgroundColor?: string
+  checkboxCheckedSize?: number
+  checkboxInputBackgroundColor?: string
+  checkboxInputBorderColor?: string
+  checkboxInputBorderWidth?: number
+  checkboxInputOutlineColor?: string
+  checkboxInputOutlineWidth?: number
+  checkboxInputSize?: number
+  checkboxOuterBorderColor?: string
+  checkboxOuterBorderWidth?: number
+  checkboxOuterBorderGap?: number
+  fontSize?: number
+  fontName?: string
+  lineHeight?: number
+  color?: string
+  letterSpacing?: string
+  textTransform?: string
+  fontWeight?: number
+  checkboxSpace?: number
+  contentSpace?: number
+}

package/types/index.d.ts

@@ -7,6 +7,16 @@ export type { BoxVariants, BoxTokens, BoxProps } from './Box'
 export { default as ChevronLink } from './ChevronLink'
 export { ChevronLinkTokens, ChevronLinkProps, HrefProps } from './ChevronLink'
 
+export { default as Checkbox } from './Checkbox'
+export { CheckboxProps, CheckboxTokens } from './Checkbox'
+
+export { default as CheckboxCardGroup } from './CheckboxCardGroup'
+export {
+  CheckboxCardGroupProps,
+  CheckboxCardGroupTokens,
+  checkboxCardTokens
+} from './CheckboxCardGroup'
+
 export { default as Divider } from './Divider'
 export { DividerVariants, DividerProps, DividerTokens } from './Divider'