@telus-uds/components-web 4.0.0 → 4.2.0

package/CHANGELOG.md

@@ -1,12 +1,44 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Fri, 31 Jan 2025 20:49:19 GMT and should not be manually modified.
+This log was last generated on Fri, 14 Feb 2025 18:59:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 4.2.0
+
+Fri, 14 Feb 2025 18:59:39 GMT
+
+### Minor changes
+
+- `PriceLockup`: ability to receive jsx elements in rateText prop added (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v3.2.0
+- Bump @telus-uds/system-theme-tokens to v4.2.0
+
+### Patches
+
+- `DatePicker`: remove warnings when opening the component (Mauricio.BatresMontejo@telus.com)
+- `Test`: Update snapshots (sergio.ramirez@telus.com)
+- `Spinner`: fix positioning when overlying a button (guillermo.peitzner@telus.com)
+
+## 4.1.0
+
+Mon, 10 Feb 2025 17:36:47 GMT
+
+### Minor changes
+
+- `PriceLockup`: aria-label added for all the group of elements (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v3.1.0
+- Bump @telus-uds/system-theme-tokens to v4.1.0
+
+### Patches
+
+- QuantitySelector: update snapshot tests (guillermo.peitzner@telus.com)
+- `Table`: new tokens added at row and cell level to achieve new designs (35577399+JoshHC@users.noreply.github.com)
+- `Listbox`: Include export type members for components-web (jaime.tuyuc@telus.com)
+
 ## 4.0.0
 
-Fri, 31 Jan 2025 20:49:19 GMT
+Fri, 31 Jan 2025 20:53:28 GMT
 
 ### Major changes
 

package/lib/cjs/DatePicker/DatePicker.js

@@ -73,6 +73,10 @@ const getInitialVisibleMonth = (initialVisibleMonth, inputDate) => {
   }
   return () => (0, _moment.default)(initialVisibleMonth);
 };
+const HiddenInputFieldContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "DatePicker__HiddenInputFieldContainer",
+  componentId: "components-web__sc-mz8fi3-3"
+})(["height:", ";width:", ";overflow:hidden;"], props => props.height, props => props.width);
 
 /**
  * Use DatePicker to select a date on a calendar.
@@ -258,10 +262,6 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const viewport = (0, _componentsBase.useViewport)();
   const daySize = getResponsiveDaySize(inline, viewport);
   const circleSize = getResponsiveCircleSize(inline, viewport);
-  const HiddenInputFieldContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
-    displayName: "DatePicker__HiddenInputFieldContainer",
-    componentId: "components-web__sc-mz8fi3-3"
-  })(["height:", ";width:", ";overflow:hidden;"], props => props.height, props => props.width);
   const {
     hiddenInputFieldContainerHeight,
     hiddenInputFieldContainerWidth,

package/lib/cjs/PriceLockup/PriceLockup.js

@@ -11,9 +11,10 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _FootnoteLink = _interopRequireDefault(require("../Footnote/FootnoteLink"));
 var _tokens = _interopRequireDefault(require("./tokens"));
 var _utils = require("../utils");
+var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs, _componentsBase.a11yProps]);
 const PriceLockupContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__PriceLockupContainer",
   componentId: "components-web__sc-1x6duay-0"
@@ -23,7 +24,9 @@ const PriceLockupContainer = /*#__PURE__*/_styledComponents.default.div.withConf
   } = _ref;
   return alignItemsText;
 });
-const PriceContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const PriceContainer = /*#__PURE__*/_styledComponents.default.div.attrs({
+  'aria-hidden': 'true'
+}).withConfig({
   displayName: "PriceLockup__PriceContainer",
   componentId: "components-web__sc-1x6duay-1"
 })(["display:flex;margin-bottom:", ";"], _ref2 => {
@@ -64,7 +67,9 @@ const BottomLinksContainer = /*#__PURE__*/_styledComponents.default.div.withConf
   } = _ref6;
   return bottomLinksMarginLeft;
 });
-const TopTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const TopTextContainer = /*#__PURE__*/_styledComponents.default.div.attrs({
+  'aria-hidden': 'true'
+}).withConfig({
   displayName: "PriceLockup__TopTextContainer",
   componentId: "components-web__sc-1x6duay-5"
 })(["margin-bottom:", ";"], _ref7 => {
@@ -165,6 +170,8 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref16, ref) => {
     a11yText,
     tokens: priceLockupTokens,
     variant = {},
+    copy = 'en',
+    dictionary = _dictionary.default,
     ...rest
   } = _ref16;
   const viewport = (0, _componentsBase.useViewport)();
@@ -277,10 +284,48 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref16, ref) => {
   if (strikeThrough && !a11yText) {
     (0, _utils.warn)('PriceLockup', 'a11yText must be provided with strikethrough pricing');
   }
+
+  /**
+   * Converts rateText to string if rateText is an JSX.
+   */
+  function getRateText(rateTextValue) {
+    if (!rateTextValue) return '';
+    switch (typeof rateTextValue) {
+      case 'string':
+        return rateTextValue.replace('/', '');
+      case 'object':
+        if (/*#__PURE__*/_react.default.isValidElement(rateTextValue)) {
+          return _react.default.Children.toArray(rateTextValue.props.children).map(getRateText).join('');
+        }
+        // If it's an object but not a React element, return empty string
+        break;
+      default:
+        break;
+    }
+    return '';
+  }
+  const getAriaContent = () => {
+    const {
+      price: dictionaryPrice,
+      priceWithCents,
+      rate
+    } = dictionary[copy];
+    let ariaLabel = hasCents ? priceWithCents.replace('%{amount}', amount).replace('%{cents}', cents).replace('%{currency}', currencySymbol) : dictionaryPrice.replace('%{amount}', amount).replace('%{currency}', currencySymbol);
+    if (!ariaLabel.includes(currencySymbol)) {
+      ariaLabel = `${ariaLabel} ${currencySymbol}`;
+    }
+    if (rateText) {
+      ariaLabel += ` ${rate.replace('%{rateText}', getRateText(rateText))}`;
+    }
+    return ariaLabel;
+  };
+  const ariaLabel = selectProps(rest)['aria-label'] ?? getAriaContent();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceLockupContainer, {
     ...selectProps(rest),
     alignItemsText: alignItemsText,
     ref: ref,
+    role: "group",
+    "aria-label": ariaLabel,
     children: [topText && /*#__PURE__*/(0, _jsxRuntime.jsx)(TopTextContainer, {
       topTextMarginBottom: `${topTextMarginBottom}px`,
       children: renderTypography(topText, typographyTokens.topText)
@@ -294,6 +339,13 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref16, ref) => {
   });
 });
 PriceLockup.displayName = 'PriceLockup';
+
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = _propTypes.default.shape({
+  price: _propTypes.default.string.isRequired,
+  priceWithCents: _propTypes.default.string.isRequired,
+  rate: _propTypes.default.string.isRequired
+});
 PriceLockup.propTypes = {
   ...selectedSystemPropTypes,
   /**
@@ -317,7 +369,7 @@ PriceLockup.propTypes = {
   /**
    * Shows month/year unit
    */
-  rateText: _propTypes.default.string,
+  rateText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
   /**
    * Shows additional info below the price with a `Divider`
    */
@@ -348,6 +400,16 @@ PriceLockup.propTypes = {
    * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
    */
   a11yText: _propTypes.default.string,
+  /**
+   * Select English or French copy for the accessible label.
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+  /* Custom dictionary containing the labels
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
   /**
    * `PriceLockup` tokens
    */

package/lib/cjs/PriceLockup/dictionary.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  en: {
+    price: '%{amount} %{currency}',
+    priceWithCents: '%{amount} %{currency} and %{cents} cents',
+    rate: 'per %{rateText}'
+  },
+  fr: {
+    price: '%{amount} %{currency}',
+    priceWithCents: '%{amount} %{currency} et %{cents} centimes',
+    rate: 'par %{rateText}'
+  }
+};

package/lib/cjs/Spinner/Spinner.js

@@ -21,12 +21,13 @@ const SpinnerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
 })(_ref => {
   let {
     inline,
-    fullScreen
+    fullScreen,
+    overlay
   } = _ref;
   return {
     position: 'relative',
     ...(inline && {
-      display: 'block',
+      display: overlay ? 'inline-block' : 'block',
       ...(0, _utils.media)().from('md').css({
         display: 'inline-block'
       })
@@ -139,6 +140,7 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SpinnerContainer, {
       inline: inline,
       "aria-live": "assertive",
+      overlay: true,
       ...selectProps(rest),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
         label: label,

package/lib/cjs/Table/Cell.js

@@ -34,17 +34,20 @@ const sharedStyles = /*#__PURE__*/(0, _styledComponents.css)(["", ""], _ref2 =>
     cellPaddingRight,
     cellPaddingBottom,
     cellPaddingLeft,
+    cellBorderWidth,
+    cellBorderColor,
+    cellBorderTopWidth,
     cellMinWidth,
     cellBackground,
     cellStickyShadow,
     stickyBackgroundColor,
     type
   } = _ref2;
-  return (0, _styledComponents.css)(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
+  return (0, _styledComponents.css)(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";border-style:", ";border-color:", ";border-width:", ";border-top-width:", ";"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
     type,
     cellStickyShadow,
     stickyBackgroundColor
-  }));
+  }), cellBorderWidth || cellBorderTopWidth ? 'solid' : 'none', cellBorderColor, cellBorderWidth, cellBorderTopWidth || cellBorderWidth);
 });
 const createStyledCell = htmlElement => _styledComponents.default[htmlElement].withConfig({
   displayName: "Cell__createStyledCell",
@@ -93,6 +96,9 @@ const Cell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     cellPaddingRight,
     cellPaddingLeft,
     cellPaddingBottom,
+    cellBorderWidth,
+    cellBorderColor,
+    cellBorderTopWidth,
     fontName,
     fontWeight,
     fontSize,
@@ -116,6 +122,9 @@ const Cell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     cellPaddingRight,
     cellPaddingLeft,
     cellPaddingBottom,
+    cellBorderWidth,
+    cellBorderColor,
+    cellBorderTopWidth,
     stickyBackgroundColor,
     cellBoxShadowColor,
     display,

package/lib/cjs/Table/Row.js

@@ -13,22 +13,47 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const StyledTR = /*#__PURE__*/_styledComponents.default.tr.withConfig({
   displayName: "Row__StyledTR",
   componentId: "components-web__sc-6pbb9a-0"
-})(["&:hover{background-color:", " !important;}"], _ref => {
+})(["&:hover{background-color:", " !important;}border-style:", ";border-color:", ";border-width:", ";border-top-width:", ";"], _ref => {
   let {
-    rowHoverBackgroundColor
+    tokens
   } = _ref;
-  return rowHoverBackgroundColor;
-});
-const Row = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  return tokens?.rowHoverBackgroundColor;
+}, _ref2 => {
   let {
-    children
+    tokens
   } = _ref2;
+  return tokens?.rowBorderWidth || tokens?.rowBorderTopWidth ? 'solid' : 'none';
+}, _ref3 => {
+  let {
+    tokens
+  } = _ref3;
+  return tokens?.rowBorderColor;
+}, _ref4 => {
+  let {
+    tokens
+  } = _ref4;
+  return tokens?.rowBorderWidth || '0px';
+}, _ref5 => {
+  let {
+    tokens
+  } = _ref5;
+  return tokens?.rowBorderTopWidth || tokens?.rowBorderWidth;
+});
+const Row = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+  let {
+    children,
+    tokens: rowTokens
+  } = _ref6;
   const {
     themeTokens
   } = (0, _Table.useTableContext)();
+  const mergedTokens = {
+    ...themeTokens,
+    ...rowTokens
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTR, {
     ref: ref,
-    rowHoverBackgroundColor: themeTokens?.rowHoverBackgroundColor,
+    tokens: mergedTokens,
     children: _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.cloneElement(child, {
       isFirstInRow: index === 0
     }))
@@ -36,6 +61,14 @@ const Row = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 });
 Row.displayName = 'Row';
 Row.propTypes = {
+  tokens: _propTypes.default.shape({
+    borderColor: _propTypes.default.string,
+    topBorderWidth: _propTypes.default.string,
+    bottomBorderWidth: _propTypes.default.string,
+    leftBorderWidth: _propTypes.default.string,
+    rightBorderWidth: _propTypes.default.string,
+    rowHoverBackgroundColor: _propTypes.default.string
+  }),
   children: _propTypes.default.node
 };
 var _default = exports.default = Row;

package/lib/esm/DatePicker/DatePicker.js

@@ -66,6 +66,10 @@ const getInitialVisibleMonth = (initialVisibleMonth, inputDate) => {
   }
   return () => moment(initialVisibleMonth);
 };
+const HiddenInputFieldContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DatePicker__HiddenInputFieldContainer",
+  componentId: "components-web__sc-mz8fi3-3"
+})(["height:", ";width:", ";overflow:hidden;"], props => props.height, props => props.width);
 
 /**
  * Use DatePicker to select a date on a calendar.
@@ -251,10 +255,6 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const viewport = useViewport();
   const daySize = getResponsiveDaySize(inline, viewport);
   const circleSize = getResponsiveCircleSize(inline, viewport);
-  const HiddenInputFieldContainer = /*#__PURE__*/styled.div.withConfig({
-    displayName: "DatePicker__HiddenInputFieldContainer",
-    componentId: "components-web__sc-mz8fi3-3"
-  })(["height:", ";width:", ";overflow:hidden;"], props => props.height, props => props.width);
   const {
     hiddenInputFieldContainerHeight,
     hiddenInputFieldContainerWidth,

package/lib/esm/PriceLockup/PriceLockup.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { A11yText, Divider, selectSystemProps, Typography, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
+import { A11yText, Divider, selectSystemProps, Typography, useThemeTokens, useViewport, getTokensPropType, a11yProps } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import FootnoteLink from '../Footnote/FootnoteLink';
 import getTypographyTokens from './tokens';
 import { htmlAttrs, warn } from '../utils';
+import defaultDictionary from './dictionary';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, a11yProps]);
 const PriceLockupContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__PriceLockupContainer",
   componentId: "components-web__sc-1x6duay-0"
@@ -16,7 +17,9 @@ const PriceLockupContainer = /*#__PURE__*/styled.div.withConfig({
   } = _ref;
   return alignItemsText;
 });
-const PriceContainer = /*#__PURE__*/styled.div.withConfig({
+const PriceContainer = /*#__PURE__*/styled.div.attrs({
+  'aria-hidden': 'true'
+}).withConfig({
   displayName: "PriceLockup__PriceContainer",
   componentId: "components-web__sc-1x6duay-1"
 })(["display:flex;margin-bottom:", ";"], _ref2 => {
@@ -57,7 +60,9 @@ const BottomLinksContainer = /*#__PURE__*/styled.div.withConfig({
   } = _ref6;
   return bottomLinksMarginLeft;
 });
-const TopTextContainer = /*#__PURE__*/styled.div.withConfig({
+const TopTextContainer = /*#__PURE__*/styled.div.attrs({
+  'aria-hidden': 'true'
+}).withConfig({
   displayName: "PriceLockup__TopTextContainer",
   componentId: "components-web__sc-1x6duay-5"
 })(["margin-bottom:", ";"], _ref7 => {
@@ -158,6 +163,8 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
     a11yText,
     tokens: priceLockupTokens,
     variant = {},
+    copy = 'en',
+    dictionary = defaultDictionary,
     ...rest
   } = _ref16;
   const viewport = useViewport();
@@ -270,10 +277,48 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   if (strikeThrough && !a11yText) {
     warn('PriceLockup', 'a11yText must be provided with strikethrough pricing');
   }
+
+  /**
+   * Converts rateText to string if rateText is an JSX.
+   */
+  function getRateText(rateTextValue) {
+    if (!rateTextValue) return '';
+    switch (typeof rateTextValue) {
+      case 'string':
+        return rateTextValue.replace('/', '');
+      case 'object':
+        if (/*#__PURE__*/React.isValidElement(rateTextValue)) {
+          return React.Children.toArray(rateTextValue.props.children).map(getRateText).join('');
+        }
+        // If it's an object but not a React element, return empty string
+        break;
+      default:
+        break;
+    }
+    return '';
+  }
+  const getAriaContent = () => {
+    const {
+      price: dictionaryPrice,
+      priceWithCents,
+      rate
+    } = dictionary[copy];
+    let ariaLabel = hasCents ? priceWithCents.replace('%{amount}', amount).replace('%{cents}', cents).replace('%{currency}', currencySymbol) : dictionaryPrice.replace('%{amount}', amount).replace('%{currency}', currencySymbol);
+    if (!ariaLabel.includes(currencySymbol)) {
+      ariaLabel = `${ariaLabel} ${currencySymbol}`;
+    }
+    if (rateText) {
+      ariaLabel += ` ${rate.replace('%{rateText}', getRateText(rateText))}`;
+    }
+    return ariaLabel;
+  };
+  const ariaLabel = selectProps(rest)['aria-label'] ?? getAriaContent();
   return /*#__PURE__*/_jsxs(PriceLockupContainer, {
     ...selectProps(rest),
     alignItemsText: alignItemsText,
     ref: ref,
+    role: "group",
+    "aria-label": ariaLabel,
     children: [topText && /*#__PURE__*/_jsx(TopTextContainer, {
       topTextMarginBottom: `${topTextMarginBottom}px`,
       children: renderTypography(topText, typographyTokens.topText)
@@ -287,6 +332,13 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   });
 });
 PriceLockup.displayName = 'PriceLockup';
+
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = PropTypes.shape({
+  price: PropTypes.string.isRequired,
+  priceWithCents: PropTypes.string.isRequired,
+  rate: PropTypes.string.isRequired
+});
 PriceLockup.propTypes = {
   ...selectedSystemPropTypes,
   /**
@@ -310,7 +362,7 @@ PriceLockup.propTypes = {
   /**
    * Shows month/year unit
    */
-  rateText: PropTypes.string,
+  rateText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   /**
    * Shows additional info below the price with a `Divider`
    */
@@ -341,6 +393,16 @@ PriceLockup.propTypes = {
    * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
    */
   a11yText: PropTypes.string,
+  /**
+   * Select English or French copy for the accessible label.
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+  /* Custom dictionary containing the labels
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
   /**
    * `PriceLockup` tokens
    */

package/lib/esm/PriceLockup/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    price: '%{amount} %{currency}',
+    priceWithCents: '%{amount} %{currency} and %{cents} cents',
+    rate: 'per %{rateText}'
+  },
+  fr: {
+    price: '%{amount} %{currency}',
+    priceWithCents: '%{amount} %{currency} et %{cents} centimes',
+    rate: 'par %{rateText}'
+  }
+};

package/lib/esm/Spinner/Spinner.js

@@ -14,12 +14,13 @@ const SpinnerContainer = /*#__PURE__*/styled.div.withConfig({
 })(_ref => {
   let {
     inline,
-    fullScreen
+    fullScreen,
+    overlay
   } = _ref;
   return {
     position: 'relative',
     ...(inline && {
-      display: 'block',
+      display: overlay ? 'inline-block' : 'block',
       ...media().from('md').css({
         display: 'inline-block'
       })
@@ -132,6 +133,7 @@ const Spinner = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     return /*#__PURE__*/_jsxs(SpinnerContainer, {
       inline: inline,
       "aria-live": "assertive",
+      overlay: true,
       ...selectProps(rest),
       children: [/*#__PURE__*/_jsx(SpinnerContent, {
         label: label,

package/lib/esm/Table/Cell.js

@@ -25,17 +25,20 @@ const sharedStyles = /*#__PURE__*/css(["", ""], _ref2 => {
     cellPaddingRight,
     cellPaddingBottom,
     cellPaddingLeft,
+    cellBorderWidth,
+    cellBorderColor,
+    cellBorderTopWidth,
     cellMinWidth,
     cellBackground,
     cellStickyShadow,
     stickyBackgroundColor,
     type
   } = _ref2;
-  return css(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
+  return css(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";border-style:", ";border-color:", ";border-width:", ";border-top-width:", ";"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
     type,
     cellStickyShadow,
     stickyBackgroundColor
-  }));
+  }), cellBorderWidth || cellBorderTopWidth ? 'solid' : 'none', cellBorderColor, cellBorderWidth, cellBorderTopWidth || cellBorderWidth);
 });
 const createStyledCell = htmlElement => styled[htmlElement].withConfig({
   displayName: "Cell__createStyledCell",
@@ -84,6 +87,9 @@ const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     cellPaddingRight,
     cellPaddingLeft,
     cellPaddingBottom,
+    cellBorderWidth,
+    cellBorderColor,
+    cellBorderTopWidth,
     fontName,
     fontWeight,
     fontSize,
@@ -107,6 +113,9 @@ const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     cellPaddingRight,
     cellPaddingLeft,
     cellPaddingBottom,
+    cellBorderWidth,
+    cellBorderColor,
+    cellBorderTopWidth,
     stickyBackgroundColor,
     cellBoxShadowColor,
     display,

package/lib/esm/Table/Row.js

@@ -6,22 +6,47 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const StyledTR = /*#__PURE__*/styled.tr.withConfig({
   displayName: "Row__StyledTR",
   componentId: "components-web__sc-6pbb9a-0"
-})(["&:hover{background-color:", " !important;}"], _ref => {
+})(["&:hover{background-color:", " !important;}border-style:", ";border-color:", ";border-width:", ";border-top-width:", ";"], _ref => {
   let {
-    rowHoverBackgroundColor
+    tokens
   } = _ref;
-  return rowHoverBackgroundColor;
-});
-const Row = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  return tokens?.rowHoverBackgroundColor;
+}, _ref2 => {
   let {
-    children
+    tokens
   } = _ref2;
+  return tokens?.rowBorderWidth || tokens?.rowBorderTopWidth ? 'solid' : 'none';
+}, _ref3 => {
+  let {
+    tokens
+  } = _ref3;
+  return tokens?.rowBorderColor;
+}, _ref4 => {
+  let {
+    tokens
+  } = _ref4;
+  return tokens?.rowBorderWidth || '0px';
+}, _ref5 => {
+  let {
+    tokens
+  } = _ref5;
+  return tokens?.rowBorderTopWidth || tokens?.rowBorderWidth;
+});
+const Row = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+    children,
+    tokens: rowTokens
+  } = _ref6;
   const {
     themeTokens
   } = useTableContext();
+  const mergedTokens = {
+    ...themeTokens,
+    ...rowTokens
+  };
   return /*#__PURE__*/_jsx(StyledTR, {
     ref: ref,
-    rowHoverBackgroundColor: themeTokens?.rowHoverBackgroundColor,
+    tokens: mergedTokens,
     children: React.Children.map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
       isFirstInRow: index === 0
     }))
@@ -29,6 +54,14 @@ const Row = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 });
 Row.displayName = 'Row';
 Row.propTypes = {
+  tokens: PropTypes.shape({
+    borderColor: PropTypes.string,
+    topBorderWidth: PropTypes.string,
+    bottomBorderWidth: PropTypes.string,
+    leftBorderWidth: PropTypes.string,
+    rightBorderWidth: PropTypes.string,
+    rowHoverBackgroundColor: PropTypes.string
+  }),
   children: PropTypes.node
 };
 export default Row;

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^3.0.0",
+    "@telus-uds/components-base": "^3.2.0",
     "@telus-uds/system-constants": "^3.0.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -13,7 +13,7 @@
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^4.0.0",
+    "@telus-uds/system-theme-tokens": "^4.2.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -82,5 +82,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "4.0.0"
+  "version": "4.2.0"
 }

package/src/DatePicker/DatePicker.jsx

@@ -61,6 +61,12 @@ const getInitialVisibleMonth = (initialVisibleMonth, inputDate) => {
   return () => moment(initialVisibleMonth)
 }
 
+const HiddenInputFieldContainer = styled.div`
+  height: ${(props) => props.height};
+  width: ${(props) => props.width};
+  overflow: hidden;
+`
+
 /**
  * Use DatePicker to select a date on a calendar.
  *
@@ -260,12 +266,6 @@ const DatePicker = React.forwardRef(
     const daySize = getResponsiveDaySize(inline, viewport)
     const circleSize = getResponsiveCircleSize(inline, viewport)
 
-    const HiddenInputFieldContainer = styled.div`
-      height: ${(props) => props.height};
-      width: ${(props) => props.width};
-      overflow: hidden;
-    `
-
     const {
       hiddenInputFieldContainerHeight,
       hiddenInputFieldContainerWidth,

package/src/PriceLockup/PriceLockup.jsx

@@ -7,14 +7,16 @@ import {
   Typography,
   useThemeTokens,
   useViewport,
-  getTokensPropType
+  getTokensPropType,
+  a11yProps
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import FootnoteLink from '../Footnote/FootnoteLink'
 import getTypographyTokens from './tokens'
 import { htmlAttrs, warn } from '../utils'
+import defaultDictionary from './dictionary'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, a11yProps])
 
 const PriceLockupContainer = styled.div`
   align-items: ${({ alignItemsText }) => alignItemsText};
@@ -22,12 +24,12 @@ const PriceLockupContainer = styled.div`
   flex-direction: column;
   width: fit-content;
 `
-
-const PriceContainer = styled.div`
+const PriceContainer = styled.div.attrs({
+  'aria-hidden': 'true'
+})`
   display: flex;
   margin-bottom: ${({ priceMarginBottom }) => priceMarginBottom};
 `
-
 const FootnoteContainer = styled.div`
   display: flex;
   margin-top: ${({ footnoteMarginTop }) => footnoteMarginTop};
@@ -43,7 +45,9 @@ const BottomLinksContainer = styled.div`
   margin-left: ${({ bottomLinksMarginLeft }) => bottomLinksMarginLeft};
 `
 
-const TopTextContainer = styled.div`
+const TopTextContainer = styled.div.attrs({
+  'aria-hidden': 'true'
+})`
   margin-bottom: ${({ topTextMarginBottom }) => topTextMarginBottom};
 `
 
@@ -119,6 +123,8 @@ const PriceLockup = React.forwardRef(
       a11yText,
       tokens: priceLockupTokens,
       variant = {},
+      copy = 'en',
+      dictionary = defaultDictionary,
       ...rest
     },
     ref
@@ -245,8 +251,59 @@ const PriceLockup = React.forwardRef(
       warn('PriceLockup', 'a11yText must be provided with strikethrough pricing')
     }
 
+    /**
+     * Converts rateText to string if rateText is an JSX.
+     */
+    function getRateText(rateTextValue) {
+      if (!rateTextValue) return ''
+
+      switch (typeof rateTextValue) {
+        case 'string':
+          return rateTextValue.replace('/', '')
+
+        case 'object':
+          if (React.isValidElement(rateTextValue)) {
+            return React.Children.toArray(rateTextValue.props.children).map(getRateText).join('')
+          }
+          // If it's an object but not a React element, return empty string
+          break
+
+        default:
+          break
+      }
+
+      return ''
+    }
+
+    const getAriaContent = () => {
+      const { price: dictionaryPrice, priceWithCents, rate } = dictionary[copy]
+      let ariaLabel = hasCents
+        ? priceWithCents
+            .replace('%{amount}', amount)
+            .replace('%{cents}', cents)
+            .replace('%{currency}', currencySymbol)
+        : dictionaryPrice.replace('%{amount}', amount).replace('%{currency}', currencySymbol)
+
+      if (!ariaLabel.includes(currencySymbol)) {
+        ariaLabel = `${ariaLabel} ${currencySymbol}`
+      }
+
+      if (rateText) {
+        ariaLabel += ` ${rate.replace('%{rateText}', getRateText(rateText))}`
+      }
+      return ariaLabel
+    }
+
+    const ariaLabel = selectProps(rest)['aria-label'] ?? getAriaContent()
+
     return (
-      <PriceLockupContainer {...selectProps(rest)} alignItemsText={alignItemsText} ref={ref}>
+      <PriceLockupContainer
+        {...selectProps(rest)}
+        alignItemsText={alignItemsText}
+        ref={ref}
+        role="group"
+        aria-label={ariaLabel}
+      >
         {topText && (
           <TopTextContainer topTextMarginBottom={`${topTextMarginBottom}px`}>
             {renderTypography(topText, typographyTokens.topText)}
@@ -268,6 +325,13 @@ const PriceLockup = React.forwardRef(
 
 PriceLockup.displayName = 'PriceLockup'
 
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = PropTypes.shape({
+  price: PropTypes.string.isRequired,
+  priceWithCents: PropTypes.string.isRequired,
+  rate: PropTypes.string.isRequired
+})
+
 PriceLockup.propTypes = {
   ...selectedSystemPropTypes,
   /**
@@ -291,7 +355,7 @@ PriceLockup.propTypes = {
   /**
    * Shows month/year unit
    */
-  rateText: PropTypes.string,
+  rateText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   /**
    * Shows additional info below the price with a `Divider`
    */
@@ -322,6 +386,16 @@ PriceLockup.propTypes = {
    * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
    */
   a11yText: PropTypes.string,
+  /**
+   * Select English or French copy for the accessible label.
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+  /* Custom dictionary containing the labels
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
   /**
    * `PriceLockup` tokens
    */

package/src/PriceLockup/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    price: '%{amount} %{currency}',
+    priceWithCents: '%{amount} %{currency} and %{cents} cents',
+    rate: 'per %{rateText}'
+  },
+  fr: {
+    price: '%{amount} %{currency}',
+    priceWithCents: '%{amount} %{currency} et %{cents} centimes',
+    rate: 'par %{rateText}'
+  }
+}

package/src/Spinner/Spinner.jsx

@@ -14,10 +14,10 @@ import { BACKDROP_OPACITY, BACKDROP_Z_INDEX } from './constants'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const SpinnerContainer = styled.div(({ inline, fullScreen }) => ({
+const SpinnerContainer = styled.div(({ inline, fullScreen, overlay }) => ({
   position: 'relative',
   ...(inline && {
-    display: 'block',
+    display: overlay ? 'inline-block' : 'block',
     ...media().from('md').css({
       display: 'inline-block'
     })
@@ -123,7 +123,7 @@ const Spinner = React.forwardRef(
     // Overlay spinner
     if (children) {
       return (
-        <SpinnerContainer inline={inline} aria-live="assertive" {...selectProps(rest)}>
+        <SpinnerContainer inline={inline} aria-live="assertive" overlay {...selectProps(rest)}>
           <SpinnerContent
             label={label}
             labelPosition={labelPosition}

package/src/Table/Cell.jsx

@@ -39,6 +39,9 @@ const sharedStyles = css`
     cellPaddingRight,
     cellPaddingBottom,
     cellPaddingLeft,
+    cellBorderWidth,
+    cellBorderColor,
+    cellBorderTopWidth,
     cellMinWidth,
     cellBackground,
     cellStickyShadow,
@@ -50,6 +53,10 @@ const sharedStyles = css`
     padding: ${cellPaddingTop}px ${cellPaddingRight}px ${cellPaddingBottom}px ${cellPaddingLeft}px;
     background-color: ${cellBackground};
     ${isSticky && stickyStyles({ type, cellStickyShadow, stickyBackgroundColor })};
+    border-style: ${cellBorderWidth || cellBorderTopWidth ? 'solid' : 'none'};
+    border-color: ${cellBorderColor};
+    border-width: ${cellBorderWidth};
+    border-top-width: ${cellBorderTopWidth || cellBorderWidth};
   `}
 `
 const createStyledCell = (htmlElement) => styled[htmlElement]`
@@ -88,6 +95,9 @@ const Cell = React.forwardRef(
       cellPaddingRight,
       cellPaddingLeft,
       cellPaddingBottom,
+      cellBorderWidth,
+      cellBorderColor,
+      cellBorderTopWidth,
       fontName,
       fontWeight,
       fontSize,
@@ -107,6 +117,9 @@ const Cell = React.forwardRef(
       cellPaddingRight,
       cellPaddingLeft,
       cellPaddingBottom,
+      cellBorderWidth,
+      cellBorderColor,
+      cellBorderTopWidth,
       stickyBackgroundColor,
       cellBoxShadowColor,
       display,

package/src/Table/Row.jsx

@@ -1,20 +1,25 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
 import styled from 'styled-components'
 import { useTableContext } from './Table'
 
 const StyledTR = styled.tr`
   &:hover {
-    background-color: ${({ rowHoverBackgroundColor }) => rowHoverBackgroundColor} !important;
+    background-color: ${({ tokens }) => tokens?.rowHoverBackgroundColor} !important;
   }
+  border-style: ${({ tokens }) =>
+    tokens?.rowBorderWidth || tokens?.rowBorderTopWidth ? 'solid' : 'none'};
+  border-color: ${({ tokens }) => tokens?.rowBorderColor};
+  border-width: ${({ tokens }) => tokens?.rowBorderWidth || '0px'};
+  border-top-width: ${({ tokens }) => tokens?.rowBorderTopWidth || tokens?.rowBorderWidth};
 `
 
-const Row = React.forwardRef(({ children }, ref) => {
+const Row = React.forwardRef(({ children, tokens: rowTokens }, ref) => {
   const { themeTokens } = useTableContext()
+  const mergedTokens = { ...themeTokens, ...rowTokens }
 
   return (
-    <StyledTR ref={ref} rowHoverBackgroundColor={themeTokens?.rowHoverBackgroundColor}>
+    <StyledTR ref={ref} tokens={mergedTokens}>
       {React.Children.map(children, (child, index) =>
         React.cloneElement(child, { isFirstInRow: index === 0 })
       )}
@@ -25,6 +30,14 @@ const Row = React.forwardRef(({ children }, ref) => {
 Row.displayName = 'Row'
 
 Row.propTypes = {
+  tokens: PropTypes.shape({
+    borderColor: PropTypes.string,
+    topBorderWidth: PropTypes.string,
+    bottomBorderWidth: PropTypes.string,
+    leftBorderWidth: PropTypes.string,
+    rightBorderWidth: PropTypes.string,
+    rowHoverBackgroundColor: PropTypes.string
+  }),
   children: PropTypes.node
 }
 

package/types/Listbox.d.ts

@@ -0,0 +1,67 @@
+// TODO: Duplicate of the one in components-base. TS module resolution doesn't seem to be working from web -> base.
+import type { ComponentType, ElementType } from 'react'
+
+type ListboxTokens = {
+  groupBorderRadius?: number | string
+  groupBorderWidth?: number | string
+  groupFontSize?: number
+  groupFontName?: string
+  groupFontWeight?: string
+  groupColor?: string
+  groupBorderColor?: string
+  groupBackgroundColor?: string
+  groupPaddingTop?: number
+  groupPaddingBottom?: number
+  groupPaddingLeft?: number
+  groupPaddingRight?: number
+  groupIcon?: string
+  itemDisplay?: boolean
+  itemFontName?: string
+  itemFontWeight?: string
+  itemFontSize?: number
+  itemPaddingTop?: number
+  itemPaddingBottom?: number
+  itemPaddingLeft?: number
+  itemPaddingRight?: number
+  itemColor?: string
+  itemBackgroundColor?: string
+  itemBorderLeftColor?: string
+  itemBorderLeftWidth?: number | string
+  itemBorderWidth?: number | string
+  itemTextDecoration?: string
+  itemOutline?: number | string
+  shadow?: string
+  itemBorderRightColor?: string
+  itemBorderBottomColor?: string
+  itemBorderTopColor?: string
+  itemBorderRightWidth?: number | string
+  itemBorderBottomWidth?: number | string
+  itemBorderTopWidth?: number | string
+  itemBorderRadius?: number | string
+  minWidth?: number
+  minHeight?: number
+  itemHeight?: number
+  groupHeight?: number
+  lineHeight?: number
+}
+
+type ListboxItems = {
+  label: string
+  href: string
+  tokens?: ListboxTokens
+}
+
+export interface ListboxProps {
+  items: ListboxItems[]
+  firstItemRef?: object
+  parentRef?: object
+  LinkRouter?: ElementType
+  linkRouterProps?: object
+  tokens?: ListboxTokens
+  selectedId?: string
+  onClose?: () => void
+}
+
+declare const Listbox: ComponentType<ListboxProps>
+
+export default Listbox

package/types/index.d.ts

@@ -42,6 +42,9 @@ declare const ExpandCollapseMini: ComponentType<Props>
 export { default as FileUpload } from './FileUpload'
 export type { FileUploadProps, FileUploadTokens } from './FileUpload'
 
+// Listbox Exports
+export { default as Listbox } from './Listbox'
+
 declare const Footnote: ComponentType<Props> & {
   Link: ComponentType<Props>
 }