@telus-uds/components-base 3.16.0 → 3.17.0

package/CHANGELOG.md

@@ -1,20 +1,17 @@
 # Change Log - @telus-uds/components-base
 
-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 -->
 
-## 3.16.0
+## 3.17.0
 
-Fri, 12 Sep 2025 02:39:28 GMT
+Fri, 12 Sep 2025 04:42:14 GMT
 
 ### Minor changes
 
-- `Carousel`: stories renamed and re-ordered in alphabetical order (35577399+JoshHC@users.noreply.github.com)
-
-### Patches
-
-- `Card`: Fix an a11y issue that makes a VoiceOver app announce "link" two times. (guillermo.peitzner@telus.com)
+- `PriceLockup`: add price baseline variant (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.14.0
 
 ## 3.13.0
 

package/lib/cjs/PriceLockup/PriceLockup.js

@@ -17,6 +17,7 @@ var _renderPrice = _interopRequireDefault(require("./utils/renderPrice"));
 var _renderTypography = _interopRequireDefault(require("./utils/renderTypography"));
 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, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps]);
 const selectTopTextTypographyTokens = _ref => {
   let {
@@ -141,6 +142,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   const rateTypographyTokens = selectRateTypographyTokens(themeTokens);
   const topTextTypographyTokens = selectTopTextTypographyTokens(themeTokens);
   const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens);
+  const isPriceBaseline = variant?.price === PRICE_BASELINE_VARIANT;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: [staticStyles.priceLockupContainer, selectContainertokens(themeTokens)],
     ref: ref,
@@ -148,7 +150,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     children: [topText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: staticStyles.topText,
       children: (0, _renderTypography.default)(topText, topTextTypographyTokens)
-    }) : null, (0, _renderPrice.default)(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens), bottomText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    }) : null, (0, _renderPrice.default)(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens, isPriceBaseline), bottomText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
         testID: "price-lockup-divider",
         role: "separator",

package/lib/cjs/PriceLockup/utils/renderPrice.js

@@ -45,7 +45,7 @@ const renderAmount = (amount, amountTypographyTokens, strikeThrough, a11yText, f
   }
   return amountText;
 };
-const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens) => {
+const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens, isPriceBaseline) => {
   const priceString = price;
   const lastDotPosition = priceString.lastIndexOf('.');
   const lastCommaPosition = priceString.lastIndexOf(',');
@@ -66,7 +66,9 @@ const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbo
         style: staticStyles.priceContainer,
         children: [signDirection === 'left' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
           children: renderCurrencySymbol(currencySymbol, currencySymbolTypographyTokens, ratePosition, fontColor)
-        }) : null, renderAmount(amount, amountTypographyTokens, strikeThrough, a11yText, fontColor, themeTokens), cents ? (0, _renderTypography.default)(`${separator}${cents}`, centsTypographyTokens, undefined, fontColor) : null, signDirection === 'right' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+          children: [renderAmount(amount, amountTypographyTokens, strikeThrough, a11yText, fontColor, themeTokens), isPriceBaseline && cents && renderAmount(`${separator}${cents}`, centsTypographyTokens, strikeThrough, a11yText, fontColor, themeTokens)]
+        }), cents && !isPriceBaseline ? (0, _renderTypography.default)(`${separator}${cents}`, centsTypographyTokens, undefined, fontColor) : null, signDirection === 'right' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
           style: staticStyles.currencySymbol,
           children: renderCurrencySymbol(currencySymbol, currencySymbolTypographyTokens, ratePosition, fontColor)
         }) : null]

package/lib/esm/PriceLockup/PriceLockup.js

@@ -10,6 +10,7 @@ import renderFootnoteContent from './utils/renderFootnoteContent';
 import renderPrice from './utils/renderPrice';
 import renderTypography from './utils/renderTypography';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const PRICE_BASELINE_VARIANT = 'baseline';
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
 const selectTopTextTypographyTokens = _ref => {
   let {
@@ -134,6 +135,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   const rateTypographyTokens = selectRateTypographyTokens(themeTokens);
   const topTextTypographyTokens = selectTopTextTypographyTokens(themeTokens);
   const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens);
+  const isPriceBaseline = variant?.price === PRICE_BASELINE_VARIANT;
   return /*#__PURE__*/_jsxs(View, {
     style: [staticStyles.priceLockupContainer, selectContainertokens(themeTokens)],
     ref: ref,
@@ -141,7 +143,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     children: [topText ? /*#__PURE__*/_jsx(View, {
       style: staticStyles.topText,
       children: renderTypography(topText, topTextTypographyTokens)
-    }) : null, renderPrice(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens), bottomText ? /*#__PURE__*/_jsxs(_Fragment, {
+    }) : null, renderPrice(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens, isPriceBaseline), bottomText ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Divider, {
         testID: "price-lockup-divider",
         role: "separator",

package/lib/esm/PriceLockup/utils/renderPrice.js

@@ -38,7 +38,7 @@ const renderAmount = (amount, amountTypographyTokens, strikeThrough, a11yText, f
   }
   return amountText;
 };
-const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens) => {
+const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens, isPriceBaseline) => {
   const priceString = price;
   const lastDotPosition = priceString.lastIndexOf('.');
   const lastCommaPosition = priceString.lastIndexOf(',');
@@ -59,7 +59,9 @@ const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbo
         style: staticStyles.priceContainer,
         children: [signDirection === 'left' ? /*#__PURE__*/_jsx(Text, {
           children: renderCurrencySymbol(currencySymbol, currencySymbolTypographyTokens, ratePosition, fontColor)
-        }) : null, renderAmount(amount, amountTypographyTokens, strikeThrough, a11yText, fontColor, themeTokens), cents ? renderTypography(`${separator}${cents}`, centsTypographyTokens, undefined, fontColor) : null, signDirection === 'right' ? /*#__PURE__*/_jsx(Text, {
+        }) : null, /*#__PURE__*/_jsxs(Text, {
+          children: [renderAmount(amount, amountTypographyTokens, strikeThrough, a11yText, fontColor, themeTokens), isPriceBaseline && cents && renderAmount(`${separator}${cents}`, centsTypographyTokens, strikeThrough, a11yText, fontColor, themeTokens)]
+        }), cents && !isPriceBaseline ? renderTypography(`${separator}${cents}`, centsTypographyTokens, undefined, fontColor) : null, signDirection === 'right' ? /*#__PURE__*/_jsx(Text, {
           style: staticStyles.currencySymbol,
           children: renderCurrencySymbol(currencySymbol, currencySymbolTypographyTokens, ratePosition, fontColor)
         }) : null]

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.13.0",
+    "@telus-uds/system-theme-tokens": "^4.14.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.16.0",
+  "version": "3.17.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.13.0",
+    "@telus-uds/system-theme-tokens": "^4.14.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.16.0",
+  "version": "3.17.0",
   "types": "types/index.d.ts"
 }

package/src/PriceLockup/PriceLockup.jsx

@@ -9,6 +9,8 @@ import renderFootnoteContent from './utils/renderFootnoteContent'
 import renderPrice from './utils/renderPrice'
 import renderTypography from './utils/renderTypography'
 
+const PRICE_BASELINE_VARIANT = 'baseline'
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
 
 const selectTopTextTypographyTokens = ({ topTextFontSize, topTextLineHeight }) => ({
@@ -109,6 +111,8 @@ const PriceLockup = React.forwardRef(
     const topTextTypographyTokens = selectTopTextTypographyTokens(themeTokens)
     const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens)
 
+    const isPriceBaseline = variant?.price === PRICE_BASELINE_VARIANT
+
     return (
       <View
         style={[staticStyles.priceLockupContainer, selectContainertokens(themeTokens)]}
@@ -137,7 +141,8 @@ const PriceLockup = React.forwardRef(
           bottomLinksMarginLeft,
           footnoteLinks,
           onClickFootnote,
-          themeTokens
+          themeTokens,
+          isPriceBaseline
         )}
         {bottomText ? (
           <>

package/src/PriceLockup/utils/renderPrice.jsx

@@ -59,7 +59,8 @@ const renderPrice = (
   bottomLinksMarginLeft,
   footnoteLinks,
   onClickFootnote,
-  themeTokens
+  themeTokens,
+  isPriceBaseline
 ) => {
   const priceString = price
   const lastDotPosition = priceString.lastIndexOf('.')
@@ -80,6 +81,7 @@ const renderPrice = (
     : staticStyles.footnoteLinksWithoutBottomTextAndRateText
 
   const MAX_FOOTNOTE_LINKS_ALLOWED = 3
+
   return (
     <>
       <View
@@ -100,15 +102,29 @@ const renderPrice = (
               )}
             </Text>
           ) : null}
-          {renderAmount(
-            amount,
-            amountTypographyTokens,
-            strikeThrough,
-            a11yText,
-            fontColor,
-            themeTokens
-          )}
-          {cents
+          {
+            <Text>
+              {renderAmount(
+                amount,
+                amountTypographyTokens,
+                strikeThrough,
+                a11yText,
+                fontColor,
+                themeTokens
+              )}
+              {isPriceBaseline &&
+                cents &&
+                renderAmount(
+                  `${separator}${cents}`,
+                  centsTypographyTokens,
+                  strikeThrough,
+                  a11yText,
+                  fontColor,
+                  themeTokens
+                )}
+            </Text>
+          }
+          {cents && !isPriceBaseline
             ? renderTypography(`${separator}${cents}`, centsTypographyTokens, undefined, fontColor)
             : null}
           {signDirection === 'right' ? (