@telus-uds/components-web 4.4.1 → 4.4.2

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 (14) hide show
  1. package/CHANGELOG.md +13 -2
  2. package/lib/cjs/BlockQuote/BlockQuote.js +3 -2
  3. package/lib/cjs/Countdown/Countdown.js +5 -4
  4. package/lib/cjs/NavigationBar/NavigationBar.js +2 -0
  5. package/lib/cjs/NavigationBar/NavigationSubMenu.js +1 -1
  6. package/lib/esm/BlockQuote/BlockQuote.js +3 -2
  7. package/lib/esm/Countdown/Countdown.js +5 -4
  8. package/lib/esm/NavigationBar/NavigationBar.js +2 -0
  9. package/lib/esm/NavigationBar/NavigationSubMenu.js +1 -1
  10. package/package.json +2 -2
  11. package/src/BlockQuote/BlockQuote.jsx +4 -3
  12. package/src/Countdown/Countdown.jsx +5 -4
  13. package/src/NavigationBar/NavigationBar.jsx +2 -0
  14. package/src/NavigationBar/NavigationSubMenu.jsx +1 -1
package/CHANGELOG.md CHANGED
@@ -1,12 +1,23 @@
1
1
  # Change Log - @telus-uds/components-web
2
2
 
3
- This log was last generated on Fri, 28 Mar 2025 01:00:41 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 08 Apr 2025 19:33:56 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 4.4.2
8
+
9
+ Tue, 08 Apr 2025 19:33:56 GMT
10
+
11
+ ### Patches
12
+
13
+ - `BlockQuote`: fix component rendering when using RNMQ (guillermo.peitzner@telus.com)
14
+ - `NavigationBar`: tokens propagated through the component to react correctly to overwriting of tokens (35577399+JoshHC@users.noreply.github.com)
15
+ - `Countdown`: fix component render when RNMQ is active (guillermo.peitzner@telus.com)
16
+ - Bump @telus-uds/components-base to v3.5.2
17
+
7
18
  ## 4.4.1
8
19
 
9
- Fri, 28 Mar 2025 01:00:41 GMT
20
+ Fri, 28 Mar 2025 01:02:45 GMT
10
21
 
11
22
  ### Patches
12
23
 
package/lib/cjs/BlockQuote/BlockQuote.js CHANGED
@@ -81,9 +81,10 @@ const BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
81
81
  }
82
82
  } = (0, _componentsBase.useTheme)();
83
83
  const useTokens = enableMediaQueryStyleSheet ? _componentsBase.useResponsiveThemeTokens : _componentsBase.useThemeTokens;
84
- const themeTokens = useTokens('BlockQuote', tokens, variant, !enableMediaQueryStyleSheet && {
84
+ const resolvedTokens = useTokens('BlockQuote', tokens, variant, !enableMediaQueryStyleSheet && {
85
85
  viewport
86
86
  });
87
+ const themeTokens = enableMediaQueryStyleSheet ? resolvedTokens[viewport] : resolvedTokens;
87
88
  const {
88
89
  color,
89
90
  paddingTop,
@@ -129,7 +130,7 @@ const BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
129
130
  styles
130
131
  } = _componentsBase.StyleSheet.create({
131
132
  titleHeading: {
132
- ...selectTitleHeadingTokens(themeTokens[viewport]),
133
+ ...selectTitleHeadingTokens(themeTokens),
133
134
  ...titleHeadingMediaQueryStyles
134
135
  }
135
136
  });
package/lib/cjs/Countdown/Countdown.js CHANGED
@@ -103,9 +103,10 @@ const Countdown = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
103
103
  enableMediaQueryStyleSheet
104
104
  } = themeOptions;
105
105
  const useTokens = enableMediaQueryStyleSheet ? _componentsBase.useResponsiveThemeTokens : _componentsBase.useThemeTokens;
106
- const themeTokens = useTokens('Countdown', tokens, variant, !enableMediaQueryStyleSheet && {
106
+ const resolvedTokens = useTokens('Countdown', tokens, variant, !enableMediaQueryStyleSheet && {
107
107
  viewport
108
108
  });
109
+ const themeTokens = enableMediaQueryStyleSheet ? resolvedTokens[viewport] : resolvedTokens;
109
110
  const segmentFontSize = themeTokens.textFontSize;
110
111
  const semanticGradient = themeTokens.containerGradient && (0, _utils.transformGradient)(themeTokens.containerGradient);
111
112
  const mainTextTokens = getMainTextTokens(themeTokens);
@@ -149,15 +150,15 @@ const Countdown = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
149
150
  styles
150
151
  } = _componentsBase.StyleSheet.create({
151
152
  label: {
152
- ...themeTokens[viewport],
153
+ ...themeTokens,
153
154
  ...labelMediaQueryStyles
154
155
  },
155
156
  mainText: {
156
- ...themeTokens[viewport],
157
+ ...themeTokens,
157
158
  ...mainTestMediaQueryStyles
158
159
  },
159
160
  container: {
160
- ...themeTokens[viewport],
161
+ ...themeTokens,
161
162
  ...containerMediaQueryStyles
162
163
  }
163
164
  });
package/lib/cjs/NavigationBar/NavigationBar.js CHANGED
@@ -44,6 +44,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
44
44
  value,
45
45
  LinkRouter,
46
46
  linkRouterProps,
47
+ tokens,
47
48
  ...rest
48
49
  } = _ref;
49
50
  const {
@@ -209,6 +210,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
209
210
  ...itemLinkRouterProps
210
211
  },
211
212
  items: scrollableNestedItems,
213
+ tokens: tokens,
212
214
  selected: itemId === currentValue,
213
215
  itemsContainerRef: itemsRef,
214
216
  ...itemRest,
package/lib/cjs/NavigationBar/NavigationSubMenu.js CHANGED
@@ -91,7 +91,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
91
91
  };
92
92
  const {
93
93
  icoMenu
94
- } = (0, _componentsBase.useThemeTokens)('NavigationBar', {}, {}, {
94
+ } = (0, _componentsBase.useThemeTokens)('NavigationBar', tokens, {}, {
95
95
  expanded: isOpen
96
96
  });
97
97
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
package/lib/esm/BlockQuote/BlockQuote.js CHANGED
@@ -74,9 +74,10 @@ const BlockQuote = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
74
74
  }
75
75
  } = useTheme();
76
76
  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
77
- const themeTokens = useTokens('BlockQuote', tokens, variant, !enableMediaQueryStyleSheet && {
77
+ const resolvedTokens = useTokens('BlockQuote', tokens, variant, !enableMediaQueryStyleSheet && {
78
78
  viewport
79
79
  });
80
+ const themeTokens = enableMediaQueryStyleSheet ? resolvedTokens[viewport] : resolvedTokens;
80
81
  const {
81
82
  color,
82
83
  paddingTop,
@@ -122,7 +123,7 @@ const BlockQuote = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
122
123
  styles
123
124
  } = StyleSheet.create({
124
125
  titleHeading: {
125
- ...selectTitleHeadingTokens(themeTokens[viewport]),
126
+ ...selectTitleHeadingTokens(themeTokens),
126
127
  ...titleHeadingMediaQueryStyles
127
128
  }
128
129
  });
package/lib/esm/Countdown/Countdown.js CHANGED
@@ -95,9 +95,10 @@ const Countdown = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
95
95
  enableMediaQueryStyleSheet
96
96
  } = themeOptions;
97
97
  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
98
- const themeTokens = useTokens('Countdown', tokens, variant, !enableMediaQueryStyleSheet && {
98
+ const resolvedTokens = useTokens('Countdown', tokens, variant, !enableMediaQueryStyleSheet && {
99
99
  viewport
100
100
  });
101
+ const themeTokens = enableMediaQueryStyleSheet ? resolvedTokens[viewport] : resolvedTokens;
101
102
  const segmentFontSize = themeTokens.textFontSize;
102
103
  const semanticGradient = themeTokens.containerGradient && transformGradient(themeTokens.containerGradient);
103
104
  const mainTextTokens = getMainTextTokens(themeTokens);
@@ -141,15 +142,15 @@ const Countdown = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
141
142
  styles
142
143
  } = StyleSheet.create({
143
144
  label: {
144
- ...themeTokens[viewport],
145
+ ...themeTokens,
145
146
  ...labelMediaQueryStyles
146
147
  },
147
148
  mainText: {
148
- ...themeTokens[viewport],
149
+ ...themeTokens,
149
150
  ...mainTestMediaQueryStyles
150
151
  },
151
152
  container: {
152
- ...themeTokens[viewport],
153
+ ...themeTokens,
153
154
  ...containerMediaQueryStyles
154
155
  }
155
156
  });
package/lib/esm/NavigationBar/NavigationBar.js CHANGED
@@ -37,6 +37,7 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
37
37
  value,
38
38
  LinkRouter,
39
39
  linkRouterProps,
40
+ tokens,
40
41
  ...rest
41
42
  } = _ref;
42
43
  const {
@@ -202,6 +203,7 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
202
203
  ...itemLinkRouterProps
203
204
  },
204
205
  items: scrollableNestedItems,
206
+ tokens: tokens,
205
207
  selected: itemId === currentValue,
206
208
  itemsContainerRef: itemsRef,
207
209
  ...itemRest,
package/lib/esm/NavigationBar/NavigationSubMenu.js CHANGED
@@ -86,7 +86,7 @@ const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
86
86
  };
87
87
  const {
88
88
  icoMenu
89
- } = useThemeTokens('NavigationBar', {}, {}, {
89
+ } = useThemeTokens('NavigationBar', tokens, {}, {
90
90
  expanded: isOpen
91
91
  });
92
92
  return /*#__PURE__*/_jsxs(_Fragment, {
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  ],
6
6
  "dependencies": {
7
7
  "@gorhom/portal": "^1.0.14",
8
- "@telus-uds/components-base": "^3.5.1",
8
+ "@telus-uds/components-base": "^3.5.2",
9
9
  "@telus-uds/system-constants": "^3.0.0",
10
10
  "fscreen": "^1.2.0",
11
11
  "lodash.omit": "^4.5.0",
@@ -82,5 +82,5 @@
82
82
  "skip": true
83
83
  },
84
84
  "types": "types/index.d.ts",
85
- "version": "4.4.1"
85
+ "version": "4.4.2"
86
86
  }
package/src/BlockQuote/BlockQuote.jsx CHANGED
@@ -71,13 +71,14 @@ const BlockQuote = React.forwardRef(
71
71
  } = useTheme()
72
72
 
73
73
  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
74
-
75
- const themeTokens = useTokens(
74
+ const resolvedTokens = useTokens(
76
75
  'BlockQuote',
77
76
  tokens,
78
77
  variant,
79
78
  !enableMediaQueryStyleSheet && { viewport }
80
79
  )
80
+ const themeTokens = enableMediaQueryStyleSheet ? resolvedTokens[viewport] : resolvedTokens
81
+
81
82
  const {
82
83
  color,
83
84
  paddingTop,
@@ -126,7 +127,7 @@ const BlockQuote = React.forwardRef(
126
127
 
127
128
  const { ids, styles } = StyleSheet.create({
128
129
  titleHeading: {
129
- ...selectTitleHeadingTokens(themeTokens[viewport]),
130
+ ...selectTitleHeadingTokens(themeTokens),
130
131
  ...titleHeadingMediaQueryStyles
131
132
  }
132
133
  })
package/src/Countdown/Countdown.jsx CHANGED
@@ -93,12 +93,13 @@ const Countdown = React.forwardRef(
93
93
  const { enableMediaQueryStyleSheet } = themeOptions
94
94
 
95
95
  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
96
- const themeTokens = useTokens(
96
+ const resolvedTokens = useTokens(
97
97
  'Countdown',
98
98
  tokens,
99
99
  variant,
100
100
  !enableMediaQueryStyleSheet && { viewport }
101
101
  )
102
+ const themeTokens = enableMediaQueryStyleSheet ? resolvedTokens[viewport] : resolvedTokens
102
103
 
103
104
  const segmentFontSize = themeTokens.textFontSize
104
105
  const semanticGradient =
@@ -147,15 +148,15 @@ const Countdown = React.forwardRef(
147
148
 
148
149
  const { ids, styles } = StyleSheet.create({
149
150
  label: {
150
- ...themeTokens[viewport],
151
+ ...themeTokens,
151
152
  ...labelMediaQueryStyles
152
153
  },
153
154
  mainText: {
154
- ...themeTokens[viewport],
155
+ ...themeTokens,
155
156
  ...mainTestMediaQueryStyles
156
157
  },
157
158
  container: {
158
- ...themeTokens[viewport],
159
+ ...themeTokens,
159
160
  ...containerMediaQueryStyles
160
161
  }
161
162
  })
package/src/NavigationBar/NavigationBar.jsx CHANGED
@@ -41,6 +41,7 @@ const NavigationBar = React.forwardRef(
41
41
  value,
42
42
  LinkRouter,
43
43
  linkRouterProps,
44
+ tokens,
44
45
  ...rest
45
46
  },
46
47
  ref
@@ -218,6 +219,7 @@ const NavigationBar = React.forwardRef(
218
219
  LinkRouter={ItemLinkRouter}
219
220
  linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
220
221
  items={scrollableNestedItems}
222
+ tokens={tokens}
221
223
  selected={itemId === currentValue}
222
224
  itemsContainerRef={itemsRef}
223
225
  {...itemRest}
package/src/NavigationBar/NavigationSubMenu.jsx CHANGED
@@ -61,7 +61,7 @@ const NavigationSubMenu = React.forwardRef(
61
61
  if (typeof onClick === 'function') onClick(event)
62
62
  }
63
63
 
64
- const { icoMenu } = useThemeTokens('NavigationBar', {}, {}, { expanded: isOpen })
64
+ const { icoMenu } = useThemeTokens('NavigationBar', tokens, {}, { expanded: isOpen })
65
65
 
66
66
  return (
67
67
  <>