@telus-uds/components-web 4.1.0 → 4.2.0

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Mon, 10 Feb 2025 17:30:58 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:30:58 GMT
+Mon, 10 Feb 2025 17:36:47 GMT
 
 ### Minor 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

@@ -284,9 +284,29 @@ 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 {
-      dictionaryPrice = price,
+      price: dictionaryPrice,
       priceWithCents,
       rate
     } = dictionary[copy];
@@ -295,7 +315,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref16, ref) => {
       ariaLabel = `${ariaLabel} ${currencySymbol}`;
     }
     if (rateText) {
-      ariaLabel += ` ${rate.replace('%{rateText}', rateText.replace('/', ''))}`;
+      ariaLabel += ` ${rate.replace('%{rateText}', getRateText(rateText))}`;
     }
     return ariaLabel;
   };
@@ -349,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`
    */

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

@@ -277,9 +277,29 @@ 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 {
-      dictionaryPrice = price,
+      price: dictionaryPrice,
       priceWithCents,
       rate
     } = dictionary[copy];
@@ -288,7 +308,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
       ariaLabel = `${ariaLabel} ${currencySymbol}`;
     }
     if (rateText) {
-      ariaLabel += ` ${rate.replace('%{rateText}', rateText.replace('/', ''))}`;
+      ariaLabel += ` ${rate.replace('%{rateText}', getRateText(rateText))}`;
     }
     return ariaLabel;
   };
@@ -342,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`
    */

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/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^3.1.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.1.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.1.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

@@ -251,8 +251,32 @@ 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 { dictionaryPrice = price, priceWithCents, rate } = dictionary[copy]
+      const { price: dictionaryPrice, priceWithCents, rate } = dictionary[copy]
       let ariaLabel = hasCents
         ? priceWithCents
             .replace('%{amount}', amount)
@@ -265,7 +289,7 @@ const PriceLockup = React.forwardRef(
       }
 
       if (rateText) {
-        ariaLabel += ` ${rate.replace('%{rateText}', rateText.replace('/', ''))}`
+        ariaLabel += ` ${rate.replace('%{rateText}', getRateText(rateText))}`
       }
       return ariaLabel
     }
@@ -331,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`
    */

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}