@telus-uds/components-web 4.11.4 → 4.12.0

package/CHANGELOG.md

@@ -1,16 +1,18 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Fri, 12 Sep 2025 02:39:28 GMT and should not be manually modified.
+This log was last generated on Fri, 12 Sep 2025 04:42:14 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## 4.11.4
+## 4.12.0
 
-Fri, 12 Sep 2025 02:39:28 GMT
+Fri, 12 Sep 2025 04:42:14 GMT
 
-### Patches
+### Minor changes
 
-- Bump @telus-uds/components-base to v3.16.0
+- `PriceLockup`: add price baseline story (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v3.17.0
+- Bump @telus-uds/system-theme-tokens to v4.14.0
 
 ## 4.10.0
 

package/lib/cjs/PriceLockup/PriceLockup.js

@@ -14,6 +14,7 @@ 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 PRICE_BASELINE_VARIANT = 'baseline';
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs, _componentsBase.a11yProps]);
 const PriceLockupContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__PriceLockupContainer",
@@ -199,6 +200,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref16, ref) => {
     viewport,
     strikeThrough
   });
+  const isPriceBaseline = variant?.price === PRICE_BASELINE_VARIANT;
   const typographyTokens = (0, _tokens.default)(themeTokens);
   const priceString = String(price);
   const lastDotPosition = priceString.lastIndexOf('.');
@@ -328,14 +330,23 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref16, ref) => {
     const {
       price: dictionaryPrice,
       priceWithCents,
-      rate
+      priceLeft,
+      priceWithCentsLeft,
+      rate,
+      rateOnly
     } = 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)) {
+    const priceTemplate = isPriceBaseline ? priceLeft : dictionaryPrice;
+    const priceWithCentsTemplate = isPriceBaseline ? priceWithCentsLeft : priceWithCents;
+    let ariaLabel = hasCents ? priceWithCentsTemplate?.replace('%{amount}', amount).replace('%{separator}', separator).replace('%{cents}', cents).replace('%{currency}', currencySymbol) : priceTemplate?.replace('%{amount}', amount).replace('%{currency}', currencySymbol);
+    if (!ariaLabel?.includes(currencySymbol)) {
       ariaLabel = `${ariaLabel} ${currencySymbol}`;
     }
     if (rateText) {
-      ariaLabel += ` ${rate.replace('%{rateText}', getRateText(rateText))}`;
+      if (isPriceBaseline) {
+        ariaLabel += ` ${rateOnly.replace('%{rateText}', getRateText(rateText))}`;
+      } else {
+        ariaLabel += ` ${rate.replace('%{rateText}', getRateText(rateText))}`;
+      }
     }
     return ariaLabel;
   };
@@ -364,7 +375,10 @@ PriceLockup.displayName = 'PriceLockup';
 const dictionaryContentShape = _propTypes.default.shape({
   price: _propTypes.default.string.isRequired,
   priceWithCents: _propTypes.default.string.isRequired,
-  rate: _propTypes.default.string.isRequired
+  priceLeft: _propTypes.default.string.isRequired,
+  priceWithCentsLeft: _propTypes.default.string.isRequired,
+  rate: _propTypes.default.string.isRequired,
+  rateOnly: _propTypes.default.string.isRequired
 });
 PriceLockup.propTypes = {
   ...selectedSystemPropTypes,

package/lib/cjs/PriceLockup/dictionary.js

@@ -8,11 +8,17 @@ var _default = exports.default = {
   en: {
     price: '%{amount} %{currency}',
     priceWithCents: '%{amount} %{currency} and %{cents} cents',
-    rate: 'per %{rateText}'
+    priceLeft: '%{currency} %{amount}',
+    priceWithCentsLeft: '%{currency} %{amount}%{separator}%{cents}',
+    rate: 'per %{rateText}',
+    rateOnly: ' %{rateText}'
   },
   fr: {
     price: '%{amount} %{currency}',
     priceWithCents: '%{amount} %{currency} et %{cents} centimes',
-    rate: 'par %{rateText}'
+    priceLeft: '%{currency} %{amount}',
+    priceWithCentsLeft: '%{currency} %{amount}%{separator}%{cents}',
+    rate: 'par %{rateText}',
+    rateOnly: ' %{rateText}'
   }
 };

package/lib/esm/PriceLockup/PriceLockup.js

@@ -7,6 +7,7 @@ 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 PRICE_BASELINE_VARIANT = 'baseline';
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, a11yProps]);
 const PriceLockupContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__PriceLockupContainer",
@@ -192,6 +193,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
     viewport,
     strikeThrough
   });
+  const isPriceBaseline = variant?.price === PRICE_BASELINE_VARIANT;
   const typographyTokens = getTypographyTokens(themeTokens);
   const priceString = String(price);
   const lastDotPosition = priceString.lastIndexOf('.');
@@ -321,14 +323,23 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
     const {
       price: dictionaryPrice,
       priceWithCents,
-      rate
+      priceLeft,
+      priceWithCentsLeft,
+      rate,
+      rateOnly
     } = 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)) {
+    const priceTemplate = isPriceBaseline ? priceLeft : dictionaryPrice;
+    const priceWithCentsTemplate = isPriceBaseline ? priceWithCentsLeft : priceWithCents;
+    let ariaLabel = hasCents ? priceWithCentsTemplate?.replace('%{amount}', amount).replace('%{separator}', separator).replace('%{cents}', cents).replace('%{currency}', currencySymbol) : priceTemplate?.replace('%{amount}', amount).replace('%{currency}', currencySymbol);
+    if (!ariaLabel?.includes(currencySymbol)) {
       ariaLabel = `${ariaLabel} ${currencySymbol}`;
     }
     if (rateText) {
-      ariaLabel += ` ${rate.replace('%{rateText}', getRateText(rateText))}`;
+      if (isPriceBaseline) {
+        ariaLabel += ` ${rateOnly.replace('%{rateText}', getRateText(rateText))}`;
+      } else {
+        ariaLabel += ` ${rate.replace('%{rateText}', getRateText(rateText))}`;
+      }
     }
     return ariaLabel;
   };
@@ -357,7 +368,10 @@ PriceLockup.displayName = 'PriceLockup';
 const dictionaryContentShape = PropTypes.shape({
   price: PropTypes.string.isRequired,
   priceWithCents: PropTypes.string.isRequired,
-  rate: PropTypes.string.isRequired
+  priceLeft: PropTypes.string.isRequired,
+  priceWithCentsLeft: PropTypes.string.isRequired,
+  rate: PropTypes.string.isRequired,
+  rateOnly: PropTypes.string.isRequired
 });
 PriceLockup.propTypes = {
   ...selectedSystemPropTypes,

package/lib/esm/PriceLockup/dictionary.js

@@ -2,11 +2,17 @@ export default {
   en: {
     price: '%{amount} %{currency}',
     priceWithCents: '%{amount} %{currency} and %{cents} cents',
-    rate: 'per %{rateText}'
+    priceLeft: '%{currency} %{amount}',
+    priceWithCentsLeft: '%{currency} %{amount}%{separator}%{cents}',
+    rate: 'per %{rateText}',
+    rateOnly: ' %{rateText}'
   },
   fr: {
     price: '%{amount} %{currency}',
     priceWithCents: '%{amount} %{currency} et %{cents} centimes',
-    rate: 'par %{rateText}'
+    priceLeft: '%{currency} %{amount}',
+    priceWithCentsLeft: '%{currency} %{amount}%{separator}%{cents}',
+    rate: 'par %{rateText}',
+    rateOnly: ' %{rateText}'
   }
 };

package/package.json

@@ -5,9 +5,9 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^3.16.0",
+    "@telus-uds/components-base": "^3.17.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.13.0",
+    "@telus-uds/system-theme-tokens": "^4.14.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "lodash.throttle": "^4.1.1",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "4.11.4"
+  "version": "4.12.0"
 }

package/src/PriceLockup/PriceLockup.jsx

@@ -16,6 +16,8 @@ import getTypographyTokens from './tokens'
 import { htmlAttrs, warn } from '../utils'
 import defaultDictionary from './dictionary'
 
+const PRICE_BASELINE_VARIANT = 'baseline'
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, a11yProps])
 
 const PriceLockupContainer = styled.div`
@@ -168,6 +170,8 @@ const PriceLockup = React.forwardRef(
       { viewport, strikeThrough }
     )
 
+    const isPriceBaseline = variant?.price === PRICE_BASELINE_VARIANT
+
     const typographyTokens = getTypographyTokens(themeTokens)
     const priceString = String(price)
     const lastDotPosition = priceString.lastIndexOf('.')
@@ -315,20 +319,36 @@ const PriceLockup = React.forwardRef(
     }
 
     const getAriaContent = () => {
-      const { price: dictionaryPrice, priceWithCents, rate } = dictionary[copy]
+      const {
+        price: dictionaryPrice,
+        priceWithCents,
+        priceLeft,
+        priceWithCentsLeft,
+        rate,
+        rateOnly
+      } = dictionary[copy]
+
+      const priceTemplate = isPriceBaseline ? priceLeft : dictionaryPrice
+      const priceWithCentsTemplate = isPriceBaseline ? priceWithCentsLeft : priceWithCents
+
       let ariaLabel = hasCents
-        ? priceWithCents
-            .replace('%{amount}', amount)
+        ? priceWithCentsTemplate
+            ?.replace('%{amount}', amount)
+            .replace('%{separator}', separator)
             .replace('%{cents}', cents)
             .replace('%{currency}', currencySymbol)
-        : dictionaryPrice.replace('%{amount}', amount).replace('%{currency}', currencySymbol)
+        : priceTemplate?.replace('%{amount}', amount).replace('%{currency}', currencySymbol)
 
-      if (!ariaLabel.includes(currencySymbol)) {
+      if (!ariaLabel?.includes(currencySymbol)) {
         ariaLabel = `${ariaLabel} ${currencySymbol}`
       }
 
       if (rateText) {
-        ariaLabel += ` ${rate.replace('%{rateText}', getRateText(rateText))}`
+        if (isPriceBaseline) {
+          ariaLabel += ` ${rateOnly.replace('%{rateText}', getRateText(rateText))}`
+        } else {
+          ariaLabel += ` ${rate.replace('%{rateText}', getRateText(rateText))}`
+        }
       }
       return ariaLabel
     }
@@ -368,7 +388,10 @@ PriceLockup.displayName = 'PriceLockup'
 const dictionaryContentShape = PropTypes.shape({
   price: PropTypes.string.isRequired,
   priceWithCents: PropTypes.string.isRequired,
-  rate: PropTypes.string.isRequired
+  priceLeft: PropTypes.string.isRequired,
+  priceWithCentsLeft: PropTypes.string.isRequired,
+  rate: PropTypes.string.isRequired,
+  rateOnly: PropTypes.string.isRequired
 })
 
 PriceLockup.propTypes = {

package/src/PriceLockup/dictionary.js

@@ -2,11 +2,17 @@ export default {
   en: {
     price: '%{amount} %{currency}',
     priceWithCents: '%{amount} %{currency} and %{cents} cents',
-    rate: 'per %{rateText}'
+    priceLeft: '%{currency} %{amount}',
+    priceWithCentsLeft: '%{currency} %{amount}%{separator}%{cents}',
+    rate: 'per %{rateText}',
+    rateOnly: ' %{rateText}'
   },
   fr: {
     price: '%{amount} %{currency}',
     priceWithCents: '%{amount} %{currency} et %{cents} centimes',
-    rate: 'par %{rateText}'
+    priceLeft: '%{currency} %{amount}',
+    priceWithCentsLeft: '%{currency} %{amount}%{separator}%{cents}',
+    rate: 'par %{rateText}',
+    rateOnly: ' %{rateText}'
   }
 }