@telus-uds/components-base 1.88.0 → 1.90.0

package/CHANGELOG.md

@@ -1,12 +1,41 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 04 Jul 2024 19:28:59 GMT and should not be manually modified.
+This log was last generated on Fri, 26 Jul 2024 21:17:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.90.0
+
+Fri, 26 Jul 2024 21:17:56 GMT
+
+### Minor changes
+
+- `Status`: add component (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.60.0
+
+### Patches
+
+- Conditionally add iconSpace on mobile if we have an icon to render (jaime.tuyuc@telus.com)
+- `Carousel`: fix accessibility issue, remove unused accessibilityValue (<tony.eng@telus.com>)
+
+## 1.89.0
+
+Fri, 19 Jul 2024 18:20:50 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:28:59 GMT
+Thu, 04 Jul 2024 19:35:15 GMT
 
 ### Minor changes
 

package/lib/Button/ButtonBase.js

@@ -306,7 +306,7 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
           icon: IconComponent,
           iconPosition: iconPosition,
-          space: iconSpace,
+          space: icon ? iconSpace : 0,
           iconProps: {
             ...iconProps,
             tokens: iconTokens

package/lib/Carousel/Carousel.js

@@ -552,12 +552,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const systemProps = selectProps({
     ...rest,
     accessibilityRole,
-    accessibilityLabel,
-    accessibilityValue: {
-      min: 1,
-      max: childrenArray.length,
-      now: activeIndex + 1
-    }
+    accessibilityLabel
   });
 
   // If container isn't used for focus, give it a label of title if none is passed in,
@@ -610,6 +605,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/Status/Status.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const selectContainerStyles = _ref => {
+  let {
+    backgroundColor,
+    backgroundGradient,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  } = _ref;
+  const styles = {
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  };
+  if (backgroundGradient) {
+    if (_Platform.default.OS === 'web') {
+      styles.background = (0, _utils.transformGradient)(backgroundGradient);
+    } else {
+      const {
+        stops: [stopOne, stopTwo]
+      } = backgroundGradient;
+      styles.gradient = {};
+      styles.gradient.start = {
+        x: 0,
+        y: 0
+      };
+      styles.gradient.end = {
+        x: 1,
+        y: 1
+      };
+      styles.gradient.colors = [stopOne.color, stopTwo.color];
+    }
+  } else {
+    styles.backgroundColor = backgroundColor;
+  }
+  return styles;
+};
+const selectIconProps = _ref2 => {
+  let {
+    icon,
+    iconColor
+  } = _ref2;
+  return {
+    icon,
+    tokens: {
+      color: iconColor
+    },
+    variant: {
+      size: 'small'
+    }
+  };
+};
+const selectTextStyles = _ref3 => {
+  let {
+    textColor,
+    textLineHeight,
+    fontName,
+    fontSize,
+    fontWeight
+  } = _ref3;
+  return (0, _ThemeProvider.applyTextStyles)({
+    fontColor: textColor,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight: _Platform.default.OS === 'web' ? textLineHeight : textLineHeight * 1.2,
+    marginLeft: 8
+  });
+};
+
+/**
+ * Status component displays a status indicator with optional custom gradient.
+ *
+ * @component
+ * @param {object} tokens - The tokens for customizing the status component.
+ * @param {string} variant - The variant of the status component.
+ * @param {ReactNode} children - The content to be displayed inside the status component.
+ * @param {function} customGradient - The custom gradient function for the status component.
+ * @param {object} rest - The rest of the props to be applied to the status component.
+ * @param {React.Ref} ref - The ref to be applied to the status component.
+ * @returns {ReactNode} The rendered status component.
+ */
+const Status = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+  let {
+    tokens,
+    variant,
+    children,
+    customGradient,
+    ...rest
+  } = _ref4;
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Status', tokens, variant);
+  const containerStyles = {
+    ...selectContainerStyles(themeTokens),
+    ...staticStyles.container
+  };
+  let content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      ...selectIconProps(themeTokens)
+    }), (0, _utils.wrapStringsInText)(children, {
+      style: selectTextStyles(themeTokens)
+    })]
+  });
+  if (typeof customGradient === 'function') {
+    content = customGradient(containerStyles.gradient, containerStyles, content);
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    style: containerStyles,
+    ...selectProps(rest),
+    children: content
+  });
+});
+Status.displayName = 'Status';
+Status.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('Status'),
+  variant: _utils.variantProp.propType,
+  /**
+   * The content to be displayed inside the status component.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * The custom gradient function for the status component.
+   */
+  customGradient: _propTypes.default.func
+};
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    ..._Platform.default.select({
+      web: {
+        display: 'inline-flex',
+        width: 'fit-content'
+      },
+      default: {
+        display: 'flex',
+        width: 'auto'
+      }
+    })
+  }
+});
+var _default = Status;
+exports.default = _default;

package/lib/Status/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Status = _interopRequireDefault(require("./Status"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = _Status.default;
+exports.default = _default;

package/lib/index.js

@@ -54,6 +54,7 @@ var _exportNames = {
   SkipLink: true,
   Spacer: true,
   StackView: true,
+  Status: true,
   StepTracker: true,
   Tabs: true,
   Tags: true,
@@ -398,6 +399,12 @@ Object.defineProperty(exports, "StackView", {
     return _StackView.default;
   }
 });
+Object.defineProperty(exports, "Status", {
+  enumerable: true,
+  get: function () {
+    return _Status.default;
+  }
+});
 Object.defineProperty(exports, "StepTracker", {
   enumerable: true,
   get: function () {
@@ -678,6 +685,7 @@ Object.keys(_StackView).forEach(function (key) {
     }
   });
 });
+var _Status = _interopRequireDefault(require("./Status"));
 var _StepTracker = _interopRequireDefault(require("./StepTracker"));
 var _Tabs = _interopRequireDefault(require("./Tabs"));
 var _Tags = _interopRequireDefault(require("./Tags"));

package/lib/utils/index.js

@@ -16,7 +16,8 @@ var _exportNames = {
   withLinkRouter: true,
   containUniqueFields: true,
   BaseView: true,
-  htmlAttrs: true
+  htmlAttrs: true,
+  transformGradient: true
 };
 Object.defineProperty(exports, "BaseView", {
   enumerable: true,
@@ -42,6 +43,12 @@ Object.defineProperty(exports, "info", {
     return _info.default;
   }
 });
+Object.defineProperty(exports, "transformGradient", {
+  enumerable: true,
+  get: function () {
+    return _transformGradient.transformGradient;
+  }
+});
 Object.defineProperty(exports, "useCopy", {
   enumerable: true,
   get: function () {
@@ -216,6 +223,7 @@ Object.keys(_ssr).forEach(function (key) {
 var _containUniqueFields = _interopRequireDefault(require("./containUniqueFields"));
 var _BaseView = _interopRequireDefault(require("./BaseView"));
 var _htmlAttrs = _interopRequireDefault(require("./htmlAttrs"));
+var _transformGradient = require("./transformGradient");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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/utils/transformGradient.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformGradient = exports.default = void 0;
+/**
+ * Transforms a gradient object into a CSS gradient string.
+ *
+ * @param {Object} gradient - The gradient object to transform.
+ * @param {string} gradient.type - The type of gradient (linear or radial).
+ * @param {number} gradient.angle - The angle of the linear gradient in degrees.
+ * @param {Array} gradient.stops - An array of gradient stops.
+ * @param {string} gradient.stops[].color - The color of the gradient stop.
+ * @param {number} gradient.stops[].stop - The position of the gradient stop as a percentage.
+ * @returns {string} The CSS gradient string.
+ */
+const transformGradient = gradient => `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${gradient.stops[0].stop * 100}%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`;
+exports.transformGradient = transformGradient;
+var _default = {
+  transformGradient
+};
+exports.default = _default;

package/lib-module/Button/ButtonBase.js

@@ -299,7 +299,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
         children: /*#__PURE__*/_jsx(IconText, {
           icon: IconComponent,
           iconPosition: iconPosition,
-          space: iconSpace,
+          space: icon ? iconSpace : 0,
           iconProps: {
             ...iconProps,
             tokens: iconTokens

package/lib-module/Carousel/Carousel.js

@@ -546,12 +546,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const systemProps = selectProps({
     ...rest,
     accessibilityRole,
-    accessibilityLabel,
-    accessibilityValue: {
-      min: 1,
-      max: childrenArray.length,
-      now: activeIndex + 1
-    }
+    accessibilityLabel
   });
 
   // If container isn't used for focus, give it a label of title if none is passed in,
@@ -604,6 +599,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/Status/Status.js

@@ -0,0 +1,162 @@
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { useThemeTokens, applyTextStyles } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps, wrapStringsInText, transformGradient } from '../utils';
+import Icon from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const selectContainerStyles = _ref => {
+  let {
+    backgroundColor,
+    backgroundGradient,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  } = _ref;
+  const styles = {
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  };
+  if (backgroundGradient) {
+    if (Platform.OS === 'web') {
+      styles.background = transformGradient(backgroundGradient);
+    } else {
+      const {
+        stops: [stopOne, stopTwo]
+      } = backgroundGradient;
+      styles.gradient = {};
+      styles.gradient.start = {
+        x: 0,
+        y: 0
+      };
+      styles.gradient.end = {
+        x: 1,
+        y: 1
+      };
+      styles.gradient.colors = [stopOne.color, stopTwo.color];
+    }
+  } else {
+    styles.backgroundColor = backgroundColor;
+  }
+  return styles;
+};
+const selectIconProps = _ref2 => {
+  let {
+    icon,
+    iconColor
+  } = _ref2;
+  return {
+    icon,
+    tokens: {
+      color: iconColor
+    },
+    variant: {
+      size: 'small'
+    }
+  };
+};
+const selectTextStyles = _ref3 => {
+  let {
+    textColor,
+    textLineHeight,
+    fontName,
+    fontSize,
+    fontWeight
+  } = _ref3;
+  return applyTextStyles({
+    fontColor: textColor,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight: Platform.OS === 'web' ? textLineHeight : textLineHeight * 1.2,
+    marginLeft: 8
+  });
+};
+
+/**
+ * Status component displays a status indicator with optional custom gradient.
+ *
+ * @component
+ * @param {object} tokens - The tokens for customizing the status component.
+ * @param {string} variant - The variant of the status component.
+ * @param {ReactNode} children - The content to be displayed inside the status component.
+ * @param {function} customGradient - The custom gradient function for the status component.
+ * @param {object} rest - The rest of the props to be applied to the status component.
+ * @param {React.Ref} ref - The ref to be applied to the status component.
+ * @returns {ReactNode} The rendered status component.
+ */
+const Status = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let {
+    tokens,
+    variant,
+    children,
+    customGradient,
+    ...rest
+  } = _ref4;
+  const themeTokens = useThemeTokens('Status', tokens, variant);
+  const containerStyles = {
+    ...selectContainerStyles(themeTokens),
+    ...staticStyles.container
+  };
+  let content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Icon, {
+      ...selectIconProps(themeTokens)
+    }), wrapStringsInText(children, {
+      style: selectTextStyles(themeTokens)
+    })]
+  });
+  if (typeof customGradient === 'function') {
+    content = customGradient(containerStyles.gradient, containerStyles, content);
+  }
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: containerStyles,
+    ...selectProps(rest),
+    children: content
+  });
+});
+Status.displayName = 'Status';
+Status.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Status'),
+  variant: variantProp.propType,
+  /**
+   * The content to be displayed inside the status component.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The custom gradient function for the status component.
+   */
+  customGradient: PropTypes.func
+};
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    ...Platform.select({
+      web: {
+        display: 'inline-flex',
+        width: 'fit-content'
+      },
+      default: {
+        display: 'flex',
+        width: 'auto'
+      }
+    })
+  }
+});
+export default Status;

package/lib-module/Status/index.js

@@ -0,0 +1,2 @@
+import Status from './Status';
+export default Status;

package/lib-module/index.js

@@ -53,6 +53,7 @@ export { default as SkipLink } from './SkipLink';
 export { default as Spacer } from './Spacer';
 export { default as StackView } from './StackView';
 export * from './StackView';
+export { default as Status } from './Status';
 export { default as StepTracker } from './StepTracker';
 export { default as Tabs } from './Tabs';
 export { default as Tags } from './Tags';

package/lib-module/utils/index.js

@@ -19,4 +19,5 @@ export { default as withLinkRouter } from './withLinkRouter';
 export * from './ssr';
 export { default as containUniqueFields } from './containUniqueFields';
 export { default as BaseView } from './BaseView';
-export { default as htmlAttrs } from './htmlAttrs';
+export { default as htmlAttrs } from './htmlAttrs';
+export { transformGradient } from './transformGradient';

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/lib-module/utils/transformGradient.js

@@ -0,0 +1,15 @@
+/**
+ * Transforms a gradient object into a CSS gradient string.
+ *
+ * @param {Object} gradient - The gradient object to transform.
+ * @param {string} gradient.type - The type of gradient (linear or radial).
+ * @param {number} gradient.angle - The angle of the linear gradient in degrees.
+ * @param {Array} gradient.stops - An array of gradient stops.
+ * @param {string} gradient.stops[].color - The color of the gradient stop.
+ * @param {number} gradient.stops[].stop - The position of the gradient stop as a percentage.
+ * @returns {string} The CSS gradient string.
+ */
+export const transformGradient = gradient => `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${gradient.stops[0].stop * 100}%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`;
+export default {
+  transformGradient
+};

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.59.0",
+    "@telus-uds/system-theme-tokens": "^2.60.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.88.0",
+  "version": "1.90.0",
   "types": "types/index.d.ts"
 }

package/src/Button/ButtonBase.jsx

@@ -276,7 +276,7 @@ const ButtonBase = React.forwardRef(
               <IconText
                 icon={IconComponent}
                 iconPosition={iconPosition}
-                space={iconSpace}
+                space={icon ? iconSpace : 0}
                 iconProps={{ ...iconProps, tokens: iconTokens }}
               >
                 {wrapStringsInText(

package/src/Carousel/Carousel.jsx

@@ -616,12 +616,7 @@ const Carousel = React.forwardRef(
     const systemProps = selectProps({
       ...rest,
       accessibilityRole,
-      accessibilityLabel,
-      accessibilityValue: {
-        min: 1,
-        max: childrenArray.length,
-        now: activeIndex + 1
-      }
+      accessibilityLabel
     })
 
     // If container isn't used for focus, give it a label of title if none is passed in,
@@ -687,6 +682,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/Status/Status.jsx

@@ -0,0 +1,142 @@
+import React from 'react'
+import { Platform, StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import { useThemeTokens, applyTextStyles } from '../ThemeProvider'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  variantProp,
+  viewProps,
+  wrapStringsInText,
+  transformGradient
+} from '../utils'
+
+import Icon from '../Icon'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+const selectContainerStyles = ({
+  backgroundColor,
+  backgroundGradient,
+  borderColor,
+  borderRadius,
+  borderWidth,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingTop
+}) => {
+  const styles = {
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  }
+
+  if (backgroundGradient) {
+    if (Platform.OS === 'web') {
+      styles.background = transformGradient(backgroundGradient)
+    } else {
+      const {
+        stops: [stopOne, stopTwo]
+      } = backgroundGradient
+      styles.gradient = {}
+      styles.gradient.start = { x: 0, y: 0 }
+      styles.gradient.end = { x: 1, y: 1 }
+      styles.gradient.colors = [stopOne.color, stopTwo.color]
+    }
+  } else {
+    styles.backgroundColor = backgroundColor
+  }
+
+  return styles
+}
+
+const selectIconProps = ({ icon, iconColor }) => ({
+  icon,
+  tokens: { color: iconColor },
+  variant: { size: 'small' }
+})
+
+const selectTextStyles = ({ textColor, textLineHeight, fontName, fontSize, fontWeight }) =>
+  applyTextStyles({
+    fontColor: textColor,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight: Platform.OS === 'web' ? textLineHeight : textLineHeight * 1.2,
+    marginLeft: 8
+  })
+
+/**
+ * Status component displays a status indicator with optional custom gradient.
+ *
+ * @component
+ * @param {object} tokens - The tokens for customizing the status component.
+ * @param {string} variant - The variant of the status component.
+ * @param {ReactNode} children - The content to be displayed inside the status component.
+ * @param {function} customGradient - The custom gradient function for the status component.
+ * @param {object} rest - The rest of the props to be applied to the status component.
+ * @param {React.Ref} ref - The ref to be applied to the status component.
+ * @returns {ReactNode} The rendered status component.
+ */
+const Status = React.forwardRef(({ tokens, variant, children, customGradient, ...rest }, ref) => {
+  const themeTokens = useThemeTokens('Status', tokens, variant)
+  const containerStyles = { ...selectContainerStyles(themeTokens), ...staticStyles.container }
+
+  let content = (
+    <>
+      <Icon {...selectIconProps(themeTokens)} />
+      {wrapStringsInText(children, { style: selectTextStyles(themeTokens) })}
+    </>
+  )
+  if (typeof customGradient === 'function') {
+    content = customGradient(containerStyles.gradient, containerStyles, content)
+  }
+
+  return (
+    <View ref={ref} style={containerStyles} {...selectProps(rest)}>
+      {content}
+    </View>
+  )
+})
+
+Status.displayName = 'Status'
+
+Status.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Status'),
+  variant: variantProp.propType,
+  /**
+   * The content to be displayed inside the status component.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The custom gradient function for the status component.
+   */
+  customGradient: PropTypes.func
+}
+
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    ...Platform.select({
+      web: {
+        display: 'inline-flex',
+        width: 'fit-content'
+      },
+      default: {
+        display: 'flex',
+        width: 'auto'
+      }
+    })
+  }
+})
+
+export default Status

package/src/Status/index.js

@@ -0,0 +1,3 @@
+import Status from './Status'
+
+export default Status

package/src/index.js

@@ -53,6 +53,7 @@ export { default as SkipLink } from './SkipLink'
 export { default as Spacer } from './Spacer'
 export { default as StackView } from './StackView'
 export * from './StackView'
+export { default as Status } from './Status'
 export { default as StepTracker } from './StepTracker'
 export { default as Tabs } from './Tabs'
 export { default as Tags } from './Tags'

package/src/utils/index.js

@@ -20,3 +20,4 @@ export * from './ssr'
 export { default as containUniqueFields } from './containUniqueFields'
 export { default as BaseView } from './BaseView'
 export { default as htmlAttrs } from './htmlAttrs'
+export { transformGradient } from './transformGradient'

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/src/utils/transformGradient.js

@@ -0,0 +1,17 @@
+/**
+ * Transforms a gradient object into a CSS gradient string.
+ *
+ * @param {Object} gradient - The gradient object to transform.
+ * @param {string} gradient.type - The type of gradient (linear or radial).
+ * @param {number} gradient.angle - The angle of the linear gradient in degrees.
+ * @param {Array} gradient.stops - An array of gradient stops.
+ * @param {string} gradient.stops[].color - The color of the gradient stop.
+ * @param {number} gradient.stops[].stop - The position of the gradient stop as a percentage.
+ * @returns {string} The CSS gradient string.
+ */
+export const transformGradient = (gradient) =>
+  `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${
+    gradient.stops[0].stop * 100
+  }%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`
+
+export default { transformGradient }

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'