@telus-uds/components-web 4.15.0 → 4.16.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 (11) hide show
  1. package/CHANGELOG.md +16 -1
  2. package/lib/cjs/Card/Card.js +9 -4
  3. package/lib/cjs/NavigationBar/NavigationSubMenu.js +0 -1
  4. package/lib/cjs/shared/FullBleedContent/useFullBleedContentProps.js +1 -1
  5. package/lib/esm/Card/Card.js +9 -4
  6. package/lib/esm/NavigationBar/NavigationSubMenu.js +0 -1
  7. package/lib/esm/shared/FullBleedContent/useFullBleedContentProps.js +1 -1
  8. package/package.json +3 -3
  9. package/src/Card/Card.jsx +16 -9
  10. package/src/NavigationBar/NavigationSubMenu.jsx +0 -1
  11. package/src/shared/FullBleedContent/useFullBleedContentProps.js +1 -1
package/CHANGELOG.md CHANGED
@@ -1,9 +1,24 @@
1
1
  # Change Log - @telus-uds/components-web
2
2
 
3
- This log was last generated on Fri, 12 Dec 2025 05:37:21 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 12 Jan 2026 14:55:22 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 4.16.0
8
+
9
+ Mon, 12 Jan 2026 14:55:22 GMT
10
+
11
+ ### Minor changes
12
+
13
+ - `IconButton`: Update the UI to match the design intention, add an inactive prop and selected variant (guillermo.peitzner@telus.com)
14
+ - Bump @telus-uds/components-base to v3.25.0
15
+ - Bump @telus-uds/system-theme-tokens to v4.18.0
16
+
17
+ ### Patches
18
+
19
+ - `NavigationBar`: fix sub-menus navigation on mobile (guillermo.peitzner@telus.com)
20
+ - `Card`: fix prop imgCol prevents contentAlign to work (sergio.ramirez@telus.com)
21
+
7
22
  ## 4.15.0
8
23
 
9
24
  Fri, 12 Dec 2025 05:37:21 GMT
package/lib/cjs/Card/Card.js CHANGED
@@ -62,7 +62,8 @@ const DynamicWidthContainer = /*#__PURE__*/_styledComponents.default.div.withCon
62
62
  marginTop,
63
63
  marginBottom,
64
64
  marginLeft,
65
- marginRight
65
+ marginRight,
66
+ alignSelf
66
67
  } = _ref;
67
68
  return {
68
69
  width,
@@ -72,7 +73,8 @@ const DynamicWidthContainer = /*#__PURE__*/_styledComponents.default.div.withCon
72
73
  marginTop,
73
74
  marginBottom,
74
75
  marginLeft,
75
- marginRight
76
+ marginRight,
77
+ alignSelf
76
78
  };
77
79
  });
78
80
  const Card = /*#__PURE__*/_react.default.forwardRef(function () {
@@ -172,6 +174,9 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
172
174
  width: adaptiveContentWidth,
173
175
  ...(imgColCurrentViewport >= maxCol && {
174
176
  display: 'none'
177
+ }),
178
+ ...(fullBleedContentChildrenAlign && {
179
+ alignSelf: fullBleedContentChildrenAlign
175
180
  })
176
181
  };
177
182
  const columnFlex = {
@@ -262,7 +267,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
262
267
  ...(backgroundImage ? {} : {
263
268
  backgroundColor: 'transparent'
264
269
  }),
265
- ...(fullBleedContentChildrenAlign && {
270
+ ...(!isImageWidthAdjustable && fullBleedContentChildrenAlign && {
266
271
  alignSelf: fullBleedContentChildrenAlign
267
272
  })
268
273
  },
@@ -310,7 +315,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
310
315
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
311
316
  tokens: {
312
317
  ...tokens,
313
- ...(fullBleedContentChildrenAlign && {
318
+ ...(!isImageWidthAdjustable && fullBleedContentChildrenAlign && {
314
319
  alignSelf: fullBleedContentChildrenAlign
315
320
  })
316
321
  },
package/lib/cjs/NavigationBar/NavigationSubMenu.js CHANGED
@@ -135,7 +135,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
135
135
  LinkRouter: LinkRouter,
136
136
  linkRouterProps: linkRouterProps,
137
137
  variant: variant,
138
- onClose: onClick,
139
138
  ref: itemsContainerRef || ref
140
139
  })
141
140
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
package/lib/cjs/shared/FullBleedContent/useFullBleedContentProps.js CHANGED
@@ -52,7 +52,7 @@ const useFullBleedContentProps = fullBleedContent => {
52
52
  const contentStackDirection = getContentStackDirection(fullBleedContentPosition);
53
53
  const fullBleedContentAlign = (0, _componentsBase.useResponsiveProp)(fullBleedContentAlignProp, 'stretch');
54
54
  const contentStackAlign = getContentStackAlign(fullBleedContentAlign);
55
- const fullBleedContentChildrenAlign = (0, _componentsBase.useResponsiveProp)(fullBleedContentChildrenAlignProp, 'stretch');
55
+ const fullBleedContentChildrenAlign = (0, _componentsBase.useResponsiveProp)(fullBleedContentChildrenAlignProp, fullBleedContentAlign);
56
56
  return {
57
57
  contentStackAlign,
58
58
  contentStackDirection,
package/lib/esm/Card/Card.js CHANGED
@@ -54,7 +54,8 @@ const DynamicWidthContainer = /*#__PURE__*/styled.div.withConfig({
54
54
  marginTop,
55
55
  marginBottom,
56
56
  marginLeft,
57
- marginRight
57
+ marginRight,
58
+ alignSelf
58
59
  } = _ref;
59
60
  return {
60
61
  width,
@@ -64,7 +65,8 @@ const DynamicWidthContainer = /*#__PURE__*/styled.div.withConfig({
64
65
  marginTop,
65
66
  marginBottom,
66
67
  marginLeft,
67
- marginRight
68
+ marginRight,
69
+ alignSelf
68
70
  };
69
71
  });
70
72
  const Card = /*#__PURE__*/React.forwardRef(function () {
@@ -164,6 +166,9 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
164
166
  width: adaptiveContentWidth,
165
167
  ...(imgColCurrentViewport >= maxCol && {
166
168
  display: 'none'
169
+ }),
170
+ ...(fullBleedContentChildrenAlign && {
171
+ alignSelf: fullBleedContentChildrenAlign
167
172
  })
168
173
  };
169
174
  const columnFlex = {
@@ -254,7 +259,7 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
254
259
  ...(backgroundImage ? {} : {
255
260
  backgroundColor: 'transparent'
256
261
  }),
257
- ...(fullBleedContentChildrenAlign && {
262
+ ...(!isImageWidthAdjustable && fullBleedContentChildrenAlign && {
258
263
  alignSelf: fullBleedContentChildrenAlign
259
264
  })
260
265
  },
@@ -302,7 +307,7 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
302
307
  children: /*#__PURE__*/_jsx(CardContent, {
303
308
  tokens: {
304
309
  ...tokens,
305
- ...(fullBleedContentChildrenAlign && {
310
+ ...(!isImageWidthAdjustable && fullBleedContentChildrenAlign && {
306
311
  alignSelf: fullBleedContentChildrenAlign
307
312
  })
308
313
  },
package/lib/esm/NavigationBar/NavigationSubMenu.js CHANGED
@@ -130,7 +130,6 @@ const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
130
130
  LinkRouter: LinkRouter,
131
131
  linkRouterProps: linkRouterProps,
132
132
  variant: variant,
133
- onClose: onClick,
134
133
  ref: itemsContainerRef || ref
135
134
  })
136
135
  }), /*#__PURE__*/_jsx("div", {
package/lib/esm/shared/FullBleedContent/useFullBleedContentProps.js CHANGED
@@ -46,7 +46,7 @@ const useFullBleedContentProps = fullBleedContent => {
46
46
  const contentStackDirection = getContentStackDirection(fullBleedContentPosition);
47
47
  const fullBleedContentAlign = useResponsiveProp(fullBleedContentAlignProp, 'stretch');
48
48
  const contentStackAlign = getContentStackAlign(fullBleedContentAlign);
49
- const fullBleedContentChildrenAlign = useResponsiveProp(fullBleedContentChildrenAlignProp, 'stretch');
49
+ const fullBleedContentChildrenAlign = useResponsiveProp(fullBleedContentChildrenAlignProp, fullBleedContentAlign);
50
50
  return {
51
51
  contentStackAlign,
52
52
  contentStackDirection,
package/package.json CHANGED
@@ -5,9 +5,9 @@
5
5
  ],
6
6
  "dependencies": {
7
7
  "@gorhom/portal": "^1.0.14",
8
- "@telus-uds/components-base": "^3.24.0",
8
+ "@telus-uds/components-base": "^3.25.0",
9
9
  "@telus-uds/system-constants": "^3.0.0",
10
- "@telus-uds/system-theme-tokens": "^4.17.0",
10
+ "@telus-uds/system-theme-tokens": "^4.18.0",
11
11
  "fscreen": "^1.2.0",
12
12
  "lodash.omit": "^4.5.0",
13
13
  "lodash.throttle": "^4.1.1",
@@ -82,5 +82,5 @@
82
82
  "skip": true
83
83
  },
84
84
  "types": "types/index.d.ts",
85
- "version": "4.15.0"
85
+ "version": "4.16.0"
86
86
  }
package/src/Card/Card.jsx CHANGED
@@ -73,7 +73,8 @@ const DynamicWidthContainer = styled.div.withConfig({
73
73
  marginTop,
74
74
  marginBottom,
75
75
  marginLeft,
76
- marginRight
76
+ marginRight,
77
+ alignSelf
77
78
  }) => ({
78
79
  width,
79
80
  display,
@@ -82,7 +83,8 @@ const DynamicWidthContainer = styled.div.withConfig({
82
83
  marginTop,
83
84
  marginBottom,
84
85
  marginLeft,
85
- marginRight
86
+ marginRight,
87
+ alignSelf
86
88
  })
87
89
  )
88
90
 
@@ -185,7 +187,10 @@ const Card = React.forwardRef(
185
187
 
186
188
  const contentWrapperStyleProps = {
187
189
  width: adaptiveContentWidth,
188
- ...(imgColCurrentViewport >= maxCol && { display: 'none' })
190
+ ...(imgColCurrentViewport >= maxCol && { display: 'none' }),
191
+ ...(fullBleedContentChildrenAlign && {
192
+ alignSelf: fullBleedContentChildrenAlign
193
+ })
189
194
  }
190
195
 
191
196
  const columnFlex = {
@@ -288,9 +293,10 @@ const Card = React.forwardRef(
288
293
  tokens={{
289
294
  ...tokensWithoutBg,
290
295
  ...(backgroundImage ? {} : { backgroundColor: 'transparent' }),
291
- ...(fullBleedContentChildrenAlign && {
292
- alignSelf: fullBleedContentChildrenAlign
293
- })
296
+ ...(!isImageWidthAdjustable &&
297
+ fullBleedContentChildrenAlign && {
298
+ alignSelf: fullBleedContentChildrenAlign
299
+ })
294
300
  }}
295
301
  variant={variant}
296
302
  withFooter={hasFooter}
@@ -351,9 +357,10 @@ const Card = React.forwardRef(
351
357
  <CardContent
352
358
  tokens={{
353
359
  ...tokens,
354
- ...(fullBleedContentChildrenAlign && {
355
- alignSelf: fullBleedContentChildrenAlign
356
- })
360
+ ...(!isImageWidthAdjustable &&
361
+ fullBleedContentChildrenAlign && {
362
+ alignSelf: fullBleedContentChildrenAlign
363
+ })
357
364
  }}
358
365
  variant={variant}
359
366
  withFooter={hasFooter}
package/src/NavigationBar/NavigationSubMenu.jsx CHANGED
@@ -104,7 +104,6 @@ const NavigationSubMenu = React.forwardRef(
104
104
  LinkRouter={LinkRouter}
105
105
  linkRouterProps={linkRouterProps}
106
106
  variant={variant}
107
- onClose={onClick}
108
107
  ref={itemsContainerRef || ref}
109
108
  />
110
109
  </Listbox.Overlay>
package/src/shared/FullBleedContent/useFullBleedContentProps.js CHANGED
@@ -55,7 +55,7 @@ const useFullBleedContentProps = (fullBleedContent) => {
55
55
 
56
56
  const fullBleedContentChildrenAlign = useResponsiveProp(
57
57
  fullBleedContentChildrenAlignProp,
58
- 'stretch'
58
+ fullBleedContentAlign
59
59
  )
60
60
 
61
61
  return {