@telus-uds/components-base 1.89.0 → 1.91.0

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 19 Jul 2024 18:14:09 GMT and should not be manually modified.
+This log was last generated on Mon, 12 Aug 2024 06:26:58 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.91.0
+
+Mon, 12 Aug 2024 06:26:58 GMT
+
+### Minor changes
+
+- OrderedList: add itemTextColor token and pass tokens down to children (jacqui.koroll@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.61.0
+
+### Patches
+
+- `TextInputBase`: Update padding logic for TextInput component based on icon and buttons presence (jaime.tuyuc@telus.com)
+
+## 1.90.0
+
+Fri, 26 Jul 2024 21:24:32 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:14:09 GMT
+Fri, 19 Jul 2024 18:20:50 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,

package/lib/OrderedList/Item.js

@@ -21,13 +21,14 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     itemFontSize,
     itemLineHeight,
     itemFontName,
-    itemColor
+    itemColor,
+    itemTextColor
   } = _ref;
   return (0, _ThemeProvider.applyTextStyles)({
     fontWeight: itemFontHeight,
     fontSize: itemFontSize,
     fontName: itemFontName,
-    color: itemColor,
+    color: itemColor || itemTextColor,
     themeOptions,
     lineHeight: itemLineHeight
   });
@@ -41,10 +42,11 @@ const selectItemCounterStyles = _ref2 => {
     itemFontName,
     itemLineHeight,
     themeOptions,
-    itemColor
+    itemColor,
+    itemTextColor
   } = _ref2;
   return {
-    color: itemColor,
+    color: itemColor || itemTextColor,
     width: itemBulletContainerWidth,
     textAlign: itemBulletTextAlign,
     ...(0, _ThemeProvider.applyTextStyles)({
@@ -82,7 +84,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   const headingTokens = title && {
     lineHeight: themeTokens.itemLineHeight,
     fontSize: themeTokens.itemFontSize,
-    color: themeTokens.itemColor,
+    color: themeTokens.itemColor || themeTokens.itemTextColor,
     fontName: themeTokens.headerFontName,
     fontWeight: themeTokens.headerFontWeight
   };

package/lib/OrderedList/OrderedList.js

@@ -17,29 +17,36 @@ const OrderedList = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children,
     start = 1,
     variant = {},
+    tokens = {},
     ...rest
   } = _ref;
+  // Pass any variants and tokens "OrderedList" receives down to the individual list items.
   const childrenWithParentVariants = _react.default.useMemo(() => {
-    const addVariantToProps = (child, i, isLastChild) => {
-      var _child$props;
+    const addVariantAndTokensToProps = (child, i, isLastChild) => {
+      var _child$props, _child$props2;
       const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+      const existingChildTokens = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tokens) ?? {};
       return /*#__PURE__*/_react.default.cloneElement(child, {
         index: start + i,
         isLastChild,
         variant: {
           ...existingChildVariants,
           ...variant
+        },
+        tokens: {
+          ...existingChildTokens,
+          ...tokens
         }
       });
     };
-    if (variant) {
+    if (variant || tokens) {
       if (Array.isArray(children)) {
-        return children.map((child, i) => addVariantToProps(child, i, i === children.length - 1));
+        return children.map((child, i) => addVariantAndTokensToProps(child, i, i === children.length - 1));
       }
-      return [addVariantToProps(children, 0, true)];
+      return [addVariantAndTokensToProps(children, 0, true)];
     }
     return children;
-  }, [children, variant, start]);
+  }, [children, variant, start, tokens]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedListBase.default, {
     ref: ref,
     ...selectProps(rest),
@@ -56,7 +63,8 @@ OrderedList.propTypes = {
    * The position to start the list with.
    */
   start: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  variant: _utils.variantProp.propType
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('OrderedList')
 };
 OrderedList.displayName = 'OrderedList';
 OrderedList.Item = _Item.default;

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/TextInput/TextInputBase.js

@@ -19,7 +19,7 @@ var _dictionary = _interopRequireDefault(require("./dictionary"));
 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.textInputHandlerProps, _utils.textInputProps, _utils.viewProps]);
-const selectInputStyles = (_ref, themeOptions, inactive, type) => {
+const selectInputStyles = function (_ref, themeOptions, inactive, type) {
   let {
     backgroundColor,
     color,
@@ -35,12 +35,15 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     fontWeight,
     lineHeight,
     icon,
-    iconSize = 0,
     minLines,
     maxLines,
     width,
     height
   } = _ref;
+  let buttonCount = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  let buttonSize = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+  let buttonsGapSize = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
+  let isPassword = arguments.length > 7 ? arguments[7] : undefined;
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
@@ -67,7 +70,10 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     }
   });
 
-  const paddingWithIcon = iconSize + paddingRight;
+  const buttonSpacing = isPassword ? buttonsGapSize : -buttonsGapSize;
+  const adjustedPaddingRight = paddingRight + (buttonCount ? 1 : 0) * (buttonSize + buttonSpacing);
+  const adjustedPaddingWithButtons = buttonCount > 1 ? paddingRight : adjustedPaddingRight;
+  const paddingWithIcon = buttonSize + adjustedPaddingRight;
   return {
     backgroundColor,
     color,
@@ -75,7 +81,7 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     borderColor,
     borderRadius,
     paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
-    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
+    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(adjustedPaddingWithButtons),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
     minHeight,
@@ -343,7 +349,7 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   const nativeInputStyle = selectInputStyles({
     ...themeTokens,
     height
-  }, themeOptions, inactive, type);
+  }, themeOptions, inactive, type, buttons === null || buttons === void 0 ? void 0 : buttons.length, themeTokens.buttonSize, buttonsGapSize, isPassword);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectOuterBorderStyles(themeTokens),
     children: [type === 'card' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.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/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,

package/lib-module/OrderedList/Item.js

@@ -15,13 +15,14 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     itemFontSize,
     itemLineHeight,
     itemFontName,
-    itemColor
+    itemColor,
+    itemTextColor
   } = _ref;
   return applyTextStyles({
     fontWeight: itemFontHeight,
     fontSize: itemFontSize,
     fontName: itemFontName,
-    color: itemColor,
+    color: itemColor || itemTextColor,
     themeOptions,
     lineHeight: itemLineHeight
   });
@@ -35,10 +36,11 @@ const selectItemCounterStyles = _ref2 => {
     itemFontName,
     itemLineHeight,
     themeOptions,
-    itemColor
+    itemColor,
+    itemTextColor
   } = _ref2;
   return {
-    color: itemColor,
+    color: itemColor || itemTextColor,
     width: itemBulletContainerWidth,
     textAlign: itemBulletTextAlign,
     ...applyTextStyles({
@@ -76,7 +78,7 @@ const Item = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   const headingTokens = title && {
     lineHeight: themeTokens.itemLineHeight,
     fontSize: themeTokens.itemFontSize,
-    color: themeTokens.itemColor,
+    color: themeTokens.itemColor || themeTokens.itemTextColor,
     fontName: themeTokens.headerFontName,
     fontWeight: themeTokens.headerFontWeight
   };

package/lib-module/OrderedList/OrderedList.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { htmlAttrs, selectSystemProps, variantProp, viewProps } from '../utils';
+import { htmlAttrs, selectSystemProps, variantProp, viewProps, getTokensPropType } from '../utils';
 import OrderedListBase from './OrderedListBase';
 import Item from './Item';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,29 +10,36 @@ const OrderedList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children,
     start = 1,
     variant = {},
+    tokens = {},
     ...rest
   } = _ref;
+  // Pass any variants and tokens "OrderedList" receives down to the individual list items.
   const childrenWithParentVariants = React.useMemo(() => {
-    const addVariantToProps = (child, i, isLastChild) => {
-      var _child$props;
+    const addVariantAndTokensToProps = (child, i, isLastChild) => {
+      var _child$props, _child$props2;
       const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+      const existingChildTokens = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tokens) ?? {};
       return /*#__PURE__*/React.cloneElement(child, {
         index: start + i,
         isLastChild,
         variant: {
           ...existingChildVariants,
           ...variant
+        },
+        tokens: {
+          ...existingChildTokens,
+          ...tokens
         }
       });
     };
-    if (variant) {
+    if (variant || tokens) {
       if (Array.isArray(children)) {
-        return children.map((child, i) => addVariantToProps(child, i, i === children.length - 1));
+        return children.map((child, i) => addVariantAndTokensToProps(child, i, i === children.length - 1));
       }
-      return [addVariantToProps(children, 0, true)];
+      return [addVariantAndTokensToProps(children, 0, true)];
     }
     return children;
-  }, [children, variant, start]);
+  }, [children, variant, start, tokens]);
   return /*#__PURE__*/_jsx(OrderedListBase, {
     ref: ref,
     ...selectProps(rest),
@@ -49,7 +56,8 @@ OrderedList.propTypes = {
    * The position to start the list with.
    */
   start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  tokens: getTokensPropType('OrderedList')
 };
 OrderedList.displayName = 'OrderedList';
 OrderedList.Item = Item;

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/TextInput/TextInputBase.js

@@ -13,7 +13,7 @@ import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, textInputProps, viewProps]);
-const selectInputStyles = (_ref, themeOptions, inactive, type) => {
+const selectInputStyles = function (_ref, themeOptions, inactive, type) {
   let {
     backgroundColor,
     color,
@@ -29,12 +29,15 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     fontWeight,
     lineHeight,
     icon,
-    iconSize = 0,
     minLines,
     maxLines,
     width,
     height
   } = _ref;
+  let buttonCount = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  let buttonSize = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+  let buttonsGapSize = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
+  let isPassword = arguments.length > 7 ? arguments[7] : undefined;
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
@@ -61,7 +64,10 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     }
   });
 
-  const paddingWithIcon = iconSize + paddingRight;
+  const buttonSpacing = isPassword ? buttonsGapSize : -buttonsGapSize;
+  const adjustedPaddingRight = paddingRight + (buttonCount ? 1 : 0) * (buttonSize + buttonSpacing);
+  const adjustedPaddingWithButtons = buttonCount > 1 ? paddingRight : adjustedPaddingRight;
+  const paddingWithIcon = buttonSize + adjustedPaddingRight;
   return {
     backgroundColor,
     color,
@@ -69,7 +75,7 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     borderColor,
     borderRadius,
     paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
-    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
+    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(adjustedPaddingWithButtons),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
     minHeight,
@@ -337,7 +343,7 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   const nativeInputStyle = selectInputStyles({
     ...themeTokens,
     height
-  }, themeOptions, inactive, type);
+  }, themeOptions, inactive, type, buttons === null || buttons === void 0 ? void 0 : buttons.length, themeTokens.buttonSize, buttonsGapSize, isPassword);
   return /*#__PURE__*/_jsxs(View, {
     style: selectOuterBorderStyles(themeTokens),
     children: [type === 'card' && /*#__PURE__*/_jsx(View, {

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/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.61.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.89.0",
+  "version": "1.91.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,

package/src/OrderedList/Item.jsx

@@ -17,14 +17,14 @@ import ItemBase from './ItemBase'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
 
 const selectItemTextStyles = (
-  { itemFontHeight, itemFontSize, itemLineHeight, itemFontName, itemColor },
+  { itemFontHeight, itemFontSize, itemLineHeight, itemFontName, itemColor, itemTextColor },
   themeOptions
 ) =>
   applyTextStyles({
     fontWeight: itemFontHeight,
     fontSize: itemFontSize,
     fontName: itemFontName,
-    color: itemColor,
+    color: itemColor || itemTextColor,
     themeOptions,
     lineHeight: itemLineHeight
   })
@@ -37,9 +37,10 @@ const selectItemCounterStyles = ({
   itemFontName,
   itemLineHeight,
   themeOptions,
-  itemColor
+  itemColor,
+  itemTextColor
 }) => ({
-  color: itemColor,
+  color: itemColor || itemTextColor,
   width: itemBulletContainerWidth,
   textAlign: itemBulletTextAlign,
   ...applyTextStyles({
@@ -63,7 +64,7 @@ const Item = React.forwardRef(
     const headingTokens = title && {
       lineHeight: themeTokens.itemLineHeight,
       fontSize: themeTokens.itemFontSize,
-      color: themeTokens.itemColor,
+      color: themeTokens.itemColor || themeTokens.itemTextColor,
       fontName: themeTokens.headerFontName,
       fontWeight: themeTokens.headerFontWeight
     }

package/src/OrderedList/OrderedList.jsx

@@ -1,39 +1,47 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { htmlAttrs, selectSystemProps, variantProp, viewProps } from '../utils'
+import { htmlAttrs, selectSystemProps, variantProp, viewProps, getTokensPropType } from '../utils'
 import OrderedListBase from './OrderedListBase'
 import Item from './Item'
 
 const [selectProps, selectedSystemPropsTypes] = selectSystemProps([htmlAttrs, viewProps])
 
-const OrderedList = React.forwardRef(({ children, start = 1, variant = {}, ...rest }, ref) => {
-  const childrenWithParentVariants = React.useMemo(() => {
-    const addVariantToProps = (child, i, isLastChild) => {
-      const existingChildVariants = child.props?.variant ?? {}
-      return React.cloneElement(child, {
-        index: start + i,
-        isLastChild,
-        variant: { ...existingChildVariants, ...variant }
-      })
-    }
-
-    if (variant) {
-      if (Array.isArray(children)) {
-        return children.map((child, i) => addVariantToProps(child, i, i === children.length - 1))
+const OrderedList = React.forwardRef(
+  ({ children, start = 1, variant = {}, tokens = {}, ...rest }, ref) => {
+    // Pass any variants and tokens "OrderedList" receives down to the individual list items.
+    const childrenWithParentVariants = React.useMemo(() => {
+      const addVariantAndTokensToProps = (child, i, isLastChild) => {
+        const existingChildVariants = child.props?.variant ?? {}
+        const existingChildTokens = child.props?.tokens ?? {}
+
+        return React.cloneElement(child, {
+          index: start + i,
+          isLastChild,
+          variant: { ...existingChildVariants, ...variant },
+          tokens: { ...existingChildTokens, ...tokens }
+        })
+      }
+
+      if (variant || tokens) {
+        if (Array.isArray(children)) {
+          return children.map((child, i) =>
+            addVariantAndTokensToProps(child, i, i === children.length - 1)
+          )
+        }
+        return [addVariantAndTokensToProps(children, 0, true)]
       }
-      return [addVariantToProps(children, 0, true)]
-    }
 
-    return children
-  }, [children, variant, start])
+      return children
+    }, [children, variant, start, tokens])
 
-  return (
-    <OrderedListBase ref={ref} {...selectProps(rest)}>
-      {childrenWithParentVariants}
-    </OrderedListBase>
-  )
-})
+    return (
+      <OrderedListBase ref={ref} {...selectProps(rest)}>
+        {childrenWithParentVariants}
+      </OrderedListBase>
+    )
+  }
+)
 
 OrderedList.propTypes = {
   ...selectedSystemPropsTypes,
@@ -45,7 +53,8 @@ OrderedList.propTypes = {
    * The position to start the list with.
    */
   start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  tokens: getTokensPropType('OrderedList')
 }
 
 OrderedList.displayName = 'OrderedList'

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/TextInput/TextInputBase.jsx

@@ -42,7 +42,6 @@ const selectInputStyles = (
     fontWeight,
     lineHeight,
     icon,
-    iconSize = 0,
     minLines,
     maxLines,
     width,
@@ -50,7 +49,11 @@ const selectInputStyles = (
   },
   themeOptions,
   inactive,
-  type
+  type,
+  buttonCount = 0,
+  buttonSize = 0,
+  buttonsGapSize = 0,
+  isPassword
 ) => {
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
@@ -82,7 +85,10 @@ const selectInputStyles = (
     }
   })
 
-  const paddingWithIcon = iconSize + paddingRight
+  const buttonSpacing = isPassword ? buttonsGapSize : -buttonsGapSize
+  const adjustedPaddingRight = paddingRight + (buttonCount ? 1 : 0) * (buttonSize + buttonSpacing)
+  const adjustedPaddingWithButtons = buttonCount > 1 ? paddingRight : adjustedPaddingRight
+  const paddingWithIcon = buttonSize + adjustedPaddingRight
 
   return {
     backgroundColor,
@@ -91,7 +97,7 @@ const selectInputStyles = (
     borderColor,
     borderRadius,
     paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
-    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
+    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(adjustedPaddingWithButtons),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
     minHeight,
@@ -321,7 +327,11 @@ const TextInputBase = React.forwardRef(
       { ...themeTokens, height },
       themeOptions,
       inactive,
-      type
+      type,
+      buttons?.length,
+      themeTokens.buttonSize,
+      buttonsGapSize,
+      isPassword
     )
 
     return (

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/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 }