@telus-uds/components-base 3.15.0 → 3.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +5 -9
  2. package/lib/cjs/Card/PressableCardBase.js +2 -2
  3. package/lib/cjs/PriceLockup/PriceLockup.js +3 -1
  4. package/lib/cjs/PriceLockup/utils/renderPrice.js +4 -2
  5. package/lib/esm/Card/PressableCardBase.js +2 -2
  6. package/lib/esm/PriceLockup/PriceLockup.js +3 -1
  7. package/lib/esm/PriceLockup/utils/renderPrice.js +4 -2
  8. package/lib/package.json +2 -2
  9. package/package.json +2 -2
  10. package/src/Card/PressableCardBase.jsx +2 -1
  11. package/src/PriceLockup/PriceLockup.jsx +6 -1
  12. package/src/PriceLockup/utils/renderPrice.jsx +26 -10
package/CHANGELOG.md CHANGED
@@ -1,21 +1,17 @@
1
1
  # Change Log - @telus-uds/components-base
2
2
 
3
- This log was last generated on Wed, 10 Sep 2025 05:55:42 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 12 Sep 2025 04:42:14 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## 3.15.0
7
+ ## 3.17.0
8
8
 
9
- Wed, 10 Sep 2025 05:55:42 GMT
9
+ Fri, 12 Sep 2025 04:42:14 GMT
10
10
 
11
11
  ### Minor changes
12
12
 
13
- - `MultiSelectFilter`: Positioned fixed instead of absolute on web now (oscar.palencia@telus.com)
14
-
15
- ### Patches
16
-
17
- - `Select`: incorrect position rendering dropdown in mobile devices fixed (35577399+JoshHC@users.noreply.github.com)
18
- - `Expand-Collapse`: Fixing content rendering problems when nesting panels (oscar.palencia@telus.com)
13
+ - `PriceLockup`: add price baseline variant (guillermo.peitzner@telus.com)
14
+ - Bump @telus-uds/system-theme-tokens to v4.14.0
19
15
 
20
16
  ## 3.13.0
21
17
 
package/lib/cjs/Card/PressableCardBase.js CHANGED
@@ -108,8 +108,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
108
108
  onMouseEnter: () => setHovered(true),
109
109
  onMouseLeave: () => setHovered(false),
110
110
  ...selectProps({
111
- ...rest,
112
- accessibilityRole
111
+ ...rest
113
112
  }),
114
113
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
115
114
  href: href,
@@ -136,6 +135,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
136
135
  },
137
136
  style: staticStyles.linkContainer,
138
137
  ...(hrefAttrs || {}),
138
+ role: accessibilityRole,
139
139
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
140
140
  tokens: getCardTokens({
141
141
  pressed,
package/lib/cjs/PriceLockup/PriceLockup.js CHANGED
@@ -17,6 +17,7 @@ var _renderPrice = _interopRequireDefault(require("./utils/renderPrice"));
17
17
  var _renderTypography = _interopRequireDefault(require("./utils/renderTypography"));
18
18
  var _jsxRuntime = require("react/jsx-runtime");
19
19
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
20
+ const PRICE_BASELINE_VARIANT = 'baseline';
20
21
  const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps]);
21
22
  const selectTopTextTypographyTokens = _ref => {
22
23
  let {
@@ -141,6 +142,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
141
142
  const rateTypographyTokens = selectRateTypographyTokens(themeTokens);
142
143
  const topTextTypographyTokens = selectTopTextTypographyTokens(themeTokens);
143
144
  const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens);
145
+ const isPriceBaseline = variant?.price === PRICE_BASELINE_VARIANT;
144
146
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
145
147
  style: [staticStyles.priceLockupContainer, selectContainertokens(themeTokens)],
146
148
  ref: ref,
@@ -148,7 +150,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
148
150
  children: [topText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
149
151
  style: staticStyles.topText,
150
152
  children: (0, _renderTypography.default)(topText, topTextTypographyTokens)
151
- }) : 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, {
153
+ }) : 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, {
152
154
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
153
155
  testID: "price-lockup-divider",
154
156
  role: "separator",
package/lib/cjs/PriceLockup/utils/renderPrice.js CHANGED
@@ -45,7 +45,7 @@ const renderAmount = (amount, amountTypographyTokens, strikeThrough, a11yText, f
45
45
  }
46
46
  return amountText;
47
47
  };
48
- const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens) => {
48
+ const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens, isPriceBaseline) => {
49
49
  const priceString = price;
50
50
  const lastDotPosition = priceString.lastIndexOf('.');
51
51
  const lastCommaPosition = priceString.lastIndexOf(',');
@@ -66,7 +66,9 @@ const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbo
66
66
  style: staticStyles.priceContainer,
67
67
  children: [signDirection === 'left' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
68
68
  children: renderCurrencySymbol(currencySymbol, currencySymbolTypographyTokens, ratePosition, fontColor)
69
- }) : 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, {
69
+ }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
70
+ children: [renderAmount(amount, amountTypographyTokens, strikeThrough, a11yText, fontColor, themeTokens), isPriceBaseline && cents && renderAmount(`${separator}${cents}`, centsTypographyTokens, strikeThrough, a11yText, fontColor, themeTokens)]
71
+ }), cents && !isPriceBaseline ? (0, _renderTypography.default)(`${separator}${cents}`, centsTypographyTokens, undefined, fontColor) : null, signDirection === 'right' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
70
72
  style: staticStyles.currencySymbol,
71
73
  children: renderCurrencySymbol(currencySymbol, currencySymbolTypographyTokens, ratePosition, fontColor)
72
74
  }) : null]
package/lib/esm/Card/PressableCardBase.js CHANGED
@@ -100,8 +100,7 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
100
100
  onMouseEnter: () => setHovered(true),
101
101
  onMouseLeave: () => setHovered(false),
102
102
  ...selectProps({
103
- ...rest,
104
- accessibilityRole
103
+ ...rest
105
104
  }),
106
105
  children: /*#__PURE__*/_jsx("a", {
107
106
  href: href,
@@ -128,6 +127,7 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
128
127
  },
129
128
  style: staticStyles.linkContainer,
130
129
  ...(hrefAttrs || {}),
130
+ role: accessibilityRole,
131
131
  children: /*#__PURE__*/_jsx(CardBase, {
132
132
  tokens: getCardTokens({
133
133
  pressed,
package/lib/esm/PriceLockup/PriceLockup.js CHANGED
@@ -10,6 +10,7 @@ import renderFootnoteContent from './utils/renderFootnoteContent';
10
10
  import renderPrice from './utils/renderPrice';
11
11
  import renderTypography from './utils/renderTypography';
12
12
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
13
+ const PRICE_BASELINE_VARIANT = 'baseline';
13
14
  const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
14
15
  const selectTopTextTypographyTokens = _ref => {
15
16
  let {
@@ -134,6 +135,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
134
135
  const rateTypographyTokens = selectRateTypographyTokens(themeTokens);
135
136
  const topTextTypographyTokens = selectTopTextTypographyTokens(themeTokens);
136
137
  const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens);
138
+ const isPriceBaseline = variant?.price === PRICE_BASELINE_VARIANT;
137
139
  return /*#__PURE__*/_jsxs(View, {
138
140
  style: [staticStyles.priceLockupContainer, selectContainertokens(themeTokens)],
139
141
  ref: ref,
@@ -141,7 +143,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
141
143
  children: [topText ? /*#__PURE__*/_jsx(View, {
142
144
  style: staticStyles.topText,
143
145
  children: renderTypography(topText, topTextTypographyTokens)
144
- }) : null, renderPrice(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens), bottomText ? /*#__PURE__*/_jsxs(_Fragment, {
146
+ }) : null, renderPrice(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens, isPriceBaseline), bottomText ? /*#__PURE__*/_jsxs(_Fragment, {
145
147
  children: [/*#__PURE__*/_jsx(Divider, {
146
148
  testID: "price-lockup-divider",
147
149
  role: "separator",
package/lib/esm/PriceLockup/utils/renderPrice.js CHANGED
@@ -38,7 +38,7 @@ const renderAmount = (amount, amountTypographyTokens, strikeThrough, a11yText, f
38
38
  }
39
39
  return amountText;
40
40
  };
41
- const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens) => {
41
+ const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens, isPriceBaseline) => {
42
42
  const priceString = price;
43
43
  const lastDotPosition = priceString.lastIndexOf('.');
44
44
  const lastCommaPosition = priceString.lastIndexOf(',');
@@ -59,7 +59,9 @@ const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbo
59
59
  style: staticStyles.priceContainer,
60
60
  children: [signDirection === 'left' ? /*#__PURE__*/_jsx(Text, {
61
61
  children: renderCurrencySymbol(currencySymbol, currencySymbolTypographyTokens, ratePosition, fontColor)
62
- }) : null, renderAmount(amount, amountTypographyTokens, strikeThrough, a11yText, fontColor, themeTokens), cents ? renderTypography(`${separator}${cents}`, centsTypographyTokens, undefined, fontColor) : null, signDirection === 'right' ? /*#__PURE__*/_jsx(Text, {
62
+ }) : null, /*#__PURE__*/_jsxs(Text, {
63
+ children: [renderAmount(amount, amountTypographyTokens, strikeThrough, a11yText, fontColor, themeTokens), isPriceBaseline && cents && renderAmount(`${separator}${cents}`, centsTypographyTokens, strikeThrough, a11yText, fontColor, themeTokens)]
64
+ }), cents && !isPriceBaseline ? renderTypography(`${separator}${cents}`, centsTypographyTokens, undefined, fontColor) : null, signDirection === 'right' ? /*#__PURE__*/_jsx(Text, {
63
65
  style: staticStyles.currencySymbol,
64
66
  children: renderCurrencySymbol(currencySymbol, currencySymbolTypographyTokens, ratePosition, fontColor)
65
67
  }) : null]
package/lib/package.json CHANGED
@@ -12,7 +12,7 @@
12
12
  "@gorhom/portal": "^1.0.14",
13
13
  "@react-native-picker/picker": "^2.9.0",
14
14
  "@telus-uds/system-constants": "^3.0.0",
15
- "@telus-uds/system-theme-tokens": "^4.13.0",
15
+ "@telus-uds/system-theme-tokens": "^4.14.0",
16
16
  "airbnb-prop-types": "^2.16.0",
17
17
  "css-mediaquery": "^0.1.2",
18
18
  "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
84
84
  "standard-engine": {
85
85
  "skip": true
86
86
  },
87
- "version": "3.15.0",
87
+ "version": "3.17.0",
88
88
  "types": "types/index.d.ts"
89
89
  }
package/package.json CHANGED
@@ -12,7 +12,7 @@
12
12
  "@gorhom/portal": "^1.0.14",
13
13
  "@react-native-picker/picker": "^2.9.0",
14
14
  "@telus-uds/system-constants": "^3.0.0",
15
- "@telus-uds/system-theme-tokens": "^4.13.0",
15
+ "@telus-uds/system-theme-tokens": "^4.14.0",
16
16
  "airbnb-prop-types": "^2.16.0",
17
17
  "css-mediaquery": "^0.1.2",
18
18
  "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
84
84
  "standard-engine": {
85
85
  "skip": true
86
86
  },
87
- "version": "3.15.0",
87
+ "version": "3.17.0",
88
88
  "types": "types/index.d.ts"
89
89
  }
package/src/Card/PressableCardBase.jsx CHANGED
@@ -134,7 +134,7 @@ const PressableCardBase = React.forwardRef(
134
134
  dataSet={dataSet}
135
135
  onMouseEnter={() => setHovered(true)}
136
136
  onMouseLeave={() => setHovered(false)}
137
- {...selectProps({ ...rest, accessibilityRole })}
137
+ {...selectProps({ ...rest })}
138
138
  >
139
139
  <a
140
140
  href={href}
@@ -161,6 +161,7 @@ const PressableCardBase = React.forwardRef(
161
161
  }}
162
162
  style={staticStyles.linkContainer}
163
163
  {...(hrefAttrs || {})}
164
+ role={accessibilityRole}
164
165
  >
165
166
  <CardBase
166
167
  tokens={getCardTokens({ pressed, focused, hovered })}
package/src/PriceLockup/PriceLockup.jsx CHANGED
@@ -9,6 +9,8 @@ import renderFootnoteContent from './utils/renderFootnoteContent'
9
9
  import renderPrice from './utils/renderPrice'
10
10
  import renderTypography from './utils/renderTypography'
11
11
 
12
+ const PRICE_BASELINE_VARIANT = 'baseline'
13
+
12
14
  const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
13
15
 
14
16
  const selectTopTextTypographyTokens = ({ topTextFontSize, topTextLineHeight }) => ({
@@ -109,6 +111,8 @@ const PriceLockup = React.forwardRef(
109
111
  const topTextTypographyTokens = selectTopTextTypographyTokens(themeTokens)
110
112
  const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens)
111
113
 
114
+ const isPriceBaseline = variant?.price === PRICE_BASELINE_VARIANT
115
+
112
116
  return (
113
117
  <View
114
118
  style={[staticStyles.priceLockupContainer, selectContainertokens(themeTokens)]}
@@ -137,7 +141,8 @@ const PriceLockup = React.forwardRef(
137
141
  bottomLinksMarginLeft,
138
142
  footnoteLinks,
139
143
  onClickFootnote,
140
- themeTokens
144
+ themeTokens,
145
+ isPriceBaseline
141
146
  )}
142
147
  {bottomText ? (
143
148
  <>
package/src/PriceLockup/utils/renderPrice.jsx CHANGED
@@ -59,7 +59,8 @@ const renderPrice = (
59
59
  bottomLinksMarginLeft,
60
60
  footnoteLinks,
61
61
  onClickFootnote,
62
- themeTokens
62
+ themeTokens,
63
+ isPriceBaseline
63
64
  ) => {
64
65
  const priceString = price
65
66
  const lastDotPosition = priceString.lastIndexOf('.')
@@ -80,6 +81,7 @@ const renderPrice = (
80
81
  : staticStyles.footnoteLinksWithoutBottomTextAndRateText
81
82
 
82
83
  const MAX_FOOTNOTE_LINKS_ALLOWED = 3
84
+
83
85
  return (
84
86
  <>
85
87
  <View
@@ -100,15 +102,29 @@ const renderPrice = (
100
102
  )}
101
103
  </Text>
102
104
  ) : null}
103
- {renderAmount(
104
- amount,
105
- amountTypographyTokens,
106
- strikeThrough,
107
- a11yText,
108
- fontColor,
109
- themeTokens
110
- )}
111
- {cents
105
+ {
106
+ <Text>
107
+ {renderAmount(
108
+ amount,
109
+ amountTypographyTokens,
110
+ strikeThrough,
111
+ a11yText,
112
+ fontColor,
113
+ themeTokens
114
+ )}
115
+ {isPriceBaseline &&
116
+ cents &&
117
+ renderAmount(
118
+ `${separator}${cents}`,
119
+ centsTypographyTokens,
120
+ strikeThrough,
121
+ a11yText,
122
+ fontColor,
123
+ themeTokens
124
+ )}
125
+ </Text>
126
+ }
127
+ {cents && !isPriceBaseline
112
128
  ? renderTypography(`${separator}${cents}`, centsTypographyTokens, undefined, fontColor)
113
129
  : null}
114
130
  {signDirection === 'right' ? (