@telus-uds/components-base 3.1.0 → 3.2.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 (15) hide show
  1. package/CHANGELOG.md +17 -2
  2. package/lib/cjs/List/ListItemMark.js +6 -2
  3. package/lib/cjs/Modal/ModalContent.js +1 -1
  4. package/lib/cjs/Notification/Notification.js +15 -25
  5. package/lib/cjs/Typography/Typography.js +1 -1
  6. package/lib/esm/List/ListItemMark.js +6 -2
  7. package/lib/esm/Modal/ModalContent.js +1 -1
  8. package/lib/esm/Notification/Notification.js +16 -26
  9. package/lib/esm/Typography/Typography.js +1 -1
  10. package/lib/package.json +2 -2
  11. package/package.json +2 -2
  12. package/src/List/ListItemMark.jsx +9 -3
  13. package/src/Modal/ModalContent.jsx +1 -1
  14. package/src/Notification/Notification.jsx +14 -17
  15. package/src/Typography/Typography.jsx +1 -1
package/CHANGELOG.md CHANGED
@@ -1,12 +1,27 @@
1
1
  # Change Log - @telus-uds/components-base
2
2
 
3
- This log was last generated on Mon, 10 Feb 2025 17:30:58 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 14 Feb 2025 18:59:39 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 3.2.0
8
+
9
+ Fri, 14 Feb 2025 18:59:39 GMT
10
+
11
+ ### Minor changes
12
+
13
+ - `Link`: refactoring component for koodo brand (Mauricio.BatresMontejo@telus.com)
14
+ - Bump @telus-uds/system-theme-tokens to v4.2.0
15
+
16
+ ### Patches
17
+
18
+ - `Notification`: fix system variant (guillermo.peitzner@telus.com)
19
+ - `Typography`: add default value in text-align (sergio.ramirez@telus.com)
20
+ - `Modal`: Added space below the title when content is passed as a child. (Mauricio.BatresMontejo@telus.com)
21
+
7
22
  ## 3.1.0
8
23
 
9
- Mon, 10 Feb 2025 17:30:58 GMT
24
+ Mon, 10 Feb 2025 17:36:47 GMT
10
25
 
11
26
  ### Minor changes
12
27
 
package/lib/cjs/List/ListItemMark.js CHANGED
@@ -51,10 +51,12 @@ const selectBulletPositioningStyles = _ref3 => {
51
51
  const selectBulletContainerStyles = _ref4 => {
52
52
  let {
53
53
  itemBulletContainerWidth,
54
+ itemBulletContainerHeight,
54
55
  itemBulletContainerAlign
55
56
  } = _ref4;
56
57
  return {
57
58
  width: itemBulletContainerWidth,
59
+ height: itemBulletContainerHeight,
58
60
  alignItems: itemBulletContainerAlign
59
61
  };
60
62
  };
@@ -76,10 +78,11 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
76
78
  const IconComponent = icon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
77
79
  const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
78
80
  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
81
+ const bulletContainerStyles = selectBulletContainerStyles(themeTokens);
79
82
  if (icon) {
80
83
  const iconTokens = selectItemIconTokens(themeTokens);
81
84
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
82
- style: sideItemContainerStyles,
85
+ style: [sideItemContainerStyles, bulletContainerStyles],
83
86
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
84
87
  size: iconSize || iconTokens.size,
85
88
  color: iconColor || iconTokens.color
@@ -101,7 +104,8 @@ const ListItemMark = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
101
104
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
102
105
  icon: bulletIcon,
103
106
  tokens: {
104
- color: bulletColor
107
+ color: bulletColor,
108
+ size: themeTokens.itemIconSize
105
109
  }
106
110
  })
107
111
  })
package/lib/cjs/Modal/ModalContent.js CHANGED
@@ -135,7 +135,7 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
135
135
  },
136
136
  children: subHeading
137
137
  })
138
- }), Boolean(bodyText && hasHeadingSection) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
138
+ }), Boolean((bodyText || children) && hasHeadingSection) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
139
139
  space: 3
140
140
  })]
141
141
  }), bodyText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
package/lib/cjs/Notification/Notification.js CHANGED
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _react = _interopRequireDefault(require("react"));
8
8
  var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
9
- var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
10
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
10
+ var _systemConstants = require("@telus-uds/system-constants");
11
11
  var _ThemeProvider = require("../ThemeProvider");
12
12
  var _utils = require("../utils");
13
13
  var _IconButton = _interopRequireDefault(require("../IconButton"));
@@ -71,12 +71,12 @@ const selectDismissButtonContainerStyles = _ref4 => {
71
71
  };
72
72
  };
73
73
  const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
74
- maxWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
75
- minWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
74
+ maxWidth: viewport === 'xl' && system === true ? maxWidth : '100%',
75
+ width: '100%',
76
76
  paddingRight: themeTokens?.containerPaddingRight,
77
77
  paddingLeft: themeTokens?.containerPaddingLeft
78
78
  });
79
- const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system) => {
79
+ const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, system) => {
80
80
  const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
81
81
  let [vp, viewportTokens] = _ref5;
82
82
  acc[vp] = selectContainerStyles({
@@ -90,7 +90,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
90
90
  styles: containerStyles
91
91
  } = _utils.StyleSheet.create({
92
92
  container: {
93
- flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
93
+ flexDirection: 'column',
94
94
  ...selectContainerMediaQueryStyles
95
95
  }
96
96
  });
@@ -102,22 +102,9 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
102
102
  flexDirection: 'row',
103
103
  flexShrink: 1,
104
104
  justifyContent: 'space-between',
105
- ...(0, _utils.createMediaQueryStyles)({
106
- xs: {
107
- maxWidth: themeOptions?.contentMaxWidth?.xs || '100%'
108
- },
109
- md: {
110
- maxWidth: themeOptions?.contentMaxWidth?.md || '100%'
111
- },
112
- lg: {
113
- maxWidth: themeOptions?.contentMaxWidth?.lg || '100%'
114
- },
115
- sm: {
116
- maxWidth: themeOptions?.contentMaxWidth?.sm || '100%'
117
- },
118
- xl: {
119
- maxWidth: themeOptions?.contentMaxWidth?.xl || '100%'
120
- }
105
+ ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
106
+ ...(system && {
107
+ alignSelf: 'center'
121
108
  })
122
109
  }
123
110
  });
@@ -182,7 +169,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
182
169
  const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
183
170
  containerStyles: {
184
171
  container: {
185
- flexDirection: system === true && viewport === 'xl' || _Platform.default.OS === 'android' ? 'row' : 'inherit',
172
+ flexDirection: 'column',
186
173
  ...selectContainerStyles(themeTokens)
187
174
  }
188
175
  },
@@ -191,7 +178,10 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
191
178
  flexDirection: 'row',
192
179
  flexShrink: 1,
193
180
  justifyContent: 'space-between',
194
- ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system)
181
+ ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
182
+ ...(system && {
183
+ alignSelf: 'center'
184
+ })
195
185
  }
196
186
  },
197
187
  staticContentContainerStyles: {
@@ -309,7 +299,7 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
309
299
  system: isSystemEnabled,
310
300
  viewport
311
301
  });
312
- const maxWidth = (0, _utils.useResponsiveProp)(themeOptions?.contentMaxWidth);
302
+ const maxWidth = _systemConstants.viewports.map.get(_systemConstants.viewports.xl);
313
303
  const notificationComponentRef = _react.default.useRef({
314
304
  containerStyles: {},
315
305
  contentContainerStyles: {},
@@ -331,7 +321,7 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
331
321
  selectDismissIconPropsIds: {}
332
322
  });
333
323
  if (enableMediaQueryStyleSheet) {
334
- notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, isSystemEnabled);
324
+ notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, isSystemEnabled);
335
325
  } else {
336
326
  notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, isSystemEnabled);
337
327
  }
package/lib/cjs/Typography/Typography.js CHANGED
@@ -69,7 +69,7 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
69
69
  tag = typeof heading === 'string' ? heading : undefined,
70
70
  accessibilityRole = heading === true ? 'header' : undefined,
71
71
  block = false,
72
- align = undefined,
72
+ align = _Platform.default.OS === 'web' ? 'inherit' : undefined,
73
73
  tokens,
74
74
  dataSet,
75
75
  strikeThrough = false,
package/lib/esm/List/ListItemMark.js CHANGED
@@ -44,10 +44,12 @@ const selectBulletPositioningStyles = _ref3 => {
44
44
  const selectBulletContainerStyles = _ref4 => {
45
45
  let {
46
46
  itemBulletContainerWidth,
47
+ itemBulletContainerHeight,
47
48
  itemBulletContainerAlign
48
49
  } = _ref4;
49
50
  return {
50
51
  width: itemBulletContainerWidth,
52
+ height: itemBulletContainerHeight,
51
53
  alignItems: itemBulletContainerAlign
52
54
  };
53
55
  };
@@ -69,10 +71,11 @@ const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
69
71
  const IconComponent = icon || /*#__PURE__*/_jsx(_Fragment, {});
70
72
  const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
71
73
  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
74
+ const bulletContainerStyles = selectBulletContainerStyles(themeTokens);
72
75
  if (icon) {
73
76
  const iconTokens = selectItemIconTokens(themeTokens);
74
77
  return /*#__PURE__*/_jsx(View, {
75
- style: sideItemContainerStyles,
78
+ style: [sideItemContainerStyles, bulletContainerStyles],
76
79
  children: /*#__PURE__*/_jsx(IconComponent, {
77
80
  size: iconSize || iconTokens.size,
78
81
  color: iconColor || iconTokens.color
@@ -94,7 +97,8 @@ const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
94
97
  children: /*#__PURE__*/_jsx(Icon, {
95
98
  icon: bulletIcon,
96
99
  tokens: {
97
- color: bulletColor
100
+ color: bulletColor,
101
+ size: themeTokens.itemIconSize
98
102
  }
99
103
  })
100
104
  })
package/lib/esm/Modal/ModalContent.js CHANGED
@@ -128,7 +128,7 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
128
128
  },
129
129
  children: subHeading
130
130
  })
131
- }), Boolean(bodyText && hasHeadingSection) && /*#__PURE__*/_jsx(Spacer, {
131
+ }), Boolean((bodyText || children) && hasHeadingSection) && /*#__PURE__*/_jsx(Spacer, {
132
132
  space: 3
133
133
  })]
134
134
  }), bodyText && /*#__PURE__*/_jsx(Box, {
package/lib/esm/Notification/Notification.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from 'react';
2
2
  import View from "react-native-web/dist/exports/View";
3
- import Platform from "react-native-web/dist/exports/Platform";
4
3
  import PropTypes from 'prop-types';
4
+ import { viewports } from '@telus-uds/system-constants';
5
5
  import { applyTextStyles, useTheme, useThemeTokens, useResponsiveThemeTokens } from '../ThemeProvider';
6
- import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, useResponsiveProp, createMediaQueryStyles, StyleSheet } from '../utils';
6
+ import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, createMediaQueryStyles, StyleSheet } from '../utils';
7
7
  import IconButton from '../IconButton';
8
8
  import useCopy from '../utils/useCopy';
9
9
  import dictionary from './dictionary';
@@ -64,12 +64,12 @@ const selectDismissButtonContainerStyles = _ref4 => {
64
64
  };
65
65
  };
66
66
  const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
67
- maxWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
68
- minWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
67
+ maxWidth: viewport === 'xl' && system === true ? maxWidth : '100%',
68
+ width: '100%',
69
69
  paddingRight: themeTokens?.containerPaddingRight,
70
70
  paddingLeft: themeTokens?.containerPaddingLeft
71
71
  });
72
- const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system) => {
72
+ const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, system) => {
73
73
  const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
74
74
  let [vp, viewportTokens] = _ref5;
75
75
  acc[vp] = selectContainerStyles({
@@ -83,7 +83,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
83
83
  styles: containerStyles
84
84
  } = StyleSheet.create({
85
85
  container: {
86
- flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
86
+ flexDirection: 'column',
87
87
  ...selectContainerMediaQueryStyles
88
88
  }
89
89
  });
@@ -95,22 +95,9 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
95
95
  flexDirection: 'row',
96
96
  flexShrink: 1,
97
97
  justifyContent: 'space-between',
98
- ...createMediaQueryStyles({
99
- xs: {
100
- maxWidth: themeOptions?.contentMaxWidth?.xs || '100%'
101
- },
102
- md: {
103
- maxWidth: themeOptions?.contentMaxWidth?.md || '100%'
104
- },
105
- lg: {
106
- maxWidth: themeOptions?.contentMaxWidth?.lg || '100%'
107
- },
108
- sm: {
109
- maxWidth: themeOptions?.contentMaxWidth?.sm || '100%'
110
- },
111
- xl: {
112
- maxWidth: themeOptions?.contentMaxWidth?.xl || '100%'
113
- }
98
+ ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
99
+ ...(system && {
100
+ alignSelf: 'center'
114
101
  })
115
102
  }
116
103
  });
@@ -175,7 +162,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
175
162
  const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
176
163
  containerStyles: {
177
164
  container: {
178
- flexDirection: system === true && viewport === 'xl' || Platform.OS === 'android' ? 'row' : 'inherit',
165
+ flexDirection: 'column',
179
166
  ...selectContainerStyles(themeTokens)
180
167
  }
181
168
  },
@@ -184,7 +171,10 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
184
171
  flexDirection: 'row',
185
172
  flexShrink: 1,
186
173
  justifyContent: 'space-between',
187
- ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system)
174
+ ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
175
+ ...(system && {
176
+ alignSelf: 'center'
177
+ })
188
178
  }
189
179
  },
190
180
  staticContentContainerStyles: {
@@ -302,7 +292,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
302
292
  system: isSystemEnabled,
303
293
  viewport
304
294
  });
305
- const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth);
295
+ const maxWidth = viewports.map.get(viewports.xl);
306
296
  const notificationComponentRef = React.useRef({
307
297
  containerStyles: {},
308
298
  contentContainerStyles: {},
@@ -324,7 +314,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
324
314
  selectDismissIconPropsIds: {}
325
315
  });
326
316
  if (enableMediaQueryStyleSheet) {
327
- notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, isSystemEnabled);
317
+ notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, isSystemEnabled);
328
318
  } else {
329
319
  notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, isSystemEnabled);
330
320
  }
package/lib/esm/Typography/Typography.js CHANGED
@@ -63,7 +63,7 @@ const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
63
63
  tag = typeof heading === 'string' ? heading : undefined,
64
64
  accessibilityRole = heading === true ? 'header' : undefined,
65
65
  block = false,
66
- align = undefined,
66
+ align = Platform.OS === 'web' ? 'inherit' : undefined,
67
67
  tokens,
68
68
  dataSet,
69
69
  strikeThrough = false,
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.1.0",
15
+ "@telus-uds/system-theme-tokens": "^4.2.0",
16
16
  "airbnb-prop-types": "^2.16.0",
17
17
  "css-mediaquery": "^0.1.2",
18
18
  "expo-document-picker": "^13.0.1",
@@ -83,6 +83,6 @@
83
83
  "standard-engine": {
84
84
  "skip": true
85
85
  },
86
- "version": "3.1.0",
86
+ "version": "3.2.0",
87
87
  "types": "types/index.d.ts"
88
88
  }
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.1.0",
15
+ "@telus-uds/system-theme-tokens": "^4.2.0",
16
16
  "airbnb-prop-types": "^2.16.0",
17
17
  "css-mediaquery": "^0.1.2",
18
18
  "expo-document-picker": "^13.0.1",
@@ -83,6 +83,6 @@
83
83
  "standard-engine": {
84
84
  "skip": true
85
85
  },
86
- "version": "3.1.0",
86
+ "version": "3.2.0",
87
87
  "types": "types/index.d.ts"
88
88
  }
package/src/List/ListItemMark.jsx CHANGED
@@ -27,8 +27,13 @@ const selectBulletPositioningStyles = ({ itemIconSize }) => ({
27
27
  height: itemIconSize
28
28
  })
29
29
 
30
- const selectBulletContainerStyles = ({ itemBulletContainerWidth, itemBulletContainerAlign }) => ({
30
+ const selectBulletContainerStyles = ({
31
+ itemBulletContainerWidth,
32
+ itemBulletContainerHeight,
33
+ itemBulletContainerAlign
34
+ }) => ({
31
35
  width: itemBulletContainerWidth,
36
+ height: itemBulletContainerHeight,
32
37
  alignItems: itemBulletContainerAlign
33
38
  })
34
39
 
@@ -45,11 +50,12 @@ const ListItemMark = React.forwardRef(({ icon, iconColor, iconSize, tokens = {}
45
50
  const themeTokens = typeof tokens === 'function' ? tokens() : tokens
46
51
 
47
52
  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
53
+ const bulletContainerStyles = selectBulletContainerStyles(themeTokens)
48
54
 
49
55
  if (icon) {
50
56
  const iconTokens = selectItemIconTokens(themeTokens)
51
57
  return (
52
- <View style={sideItemContainerStyles}>
58
+ <View style={[sideItemContainerStyles, bulletContainerStyles]}>
53
59
  <IconComponent size={iconSize || iconTokens.size} color={iconColor || iconTokens.color} />
54
60
  </View>
55
61
  )
@@ -66,7 +72,7 @@ const ListItemMark = React.forwardRef(({ icon, iconColor, iconSize, tokens = {}
66
72
  style={[staticStyles.bulletPositioning, itemBulletPositioningStyles]}
67
73
  testID="unordered-item-bullet"
68
74
  >
69
- <Icon icon={bulletIcon} tokens={{ color: bulletColor }} />
75
+ <Icon icon={bulletIcon} tokens={{ color: bulletColor, size: themeTokens.itemIconSize }} />
70
76
  </View>
71
77
  </View>
72
78
  )
package/src/Modal/ModalContent.jsx CHANGED
@@ -117,7 +117,7 @@ const ModalContent = React.forwardRef(
117
117
  <Typography variant={{ size: subHeadingSize }}>{subHeading}</Typography>
118
118
  </View>
119
119
  )}
120
- {Boolean(bodyText && hasHeadingSection) && <Spacer space={3} />}
120
+ {Boolean((bodyText || children) && hasHeadingSection) && <Spacer space={3} />}
121
121
  </View>
122
122
  )}
123
123
  {bodyText && (
package/src/Notification/Notification.jsx CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react'
2
- import { View, Platform } from 'react-native'
3
-
2
+ import { View } from 'react-native'
4
3
  import PropTypes from 'prop-types'
4
+ import { viewports } from '@telus-uds/system-constants'
5
+
5
6
  import {
6
7
  applyTextStyles,
7
8
  useTheme,
@@ -16,7 +17,6 @@ import {
16
17
  variantProp,
17
18
  viewProps,
18
19
  wrapStringsInText,
19
- useResponsiveProp,
20
20
  createMediaQueryStyles,
21
21
  StyleSheet
22
22
  } from '../utils'
@@ -65,8 +65,8 @@ const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
65
65
  })
66
66
 
67
67
  const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
68
- maxWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
69
- minWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
68
+ maxWidth: viewport === 'xl' && system === true ? maxWidth : '100%',
69
+ width: '100%',
70
70
  paddingRight: themeTokens?.containerPaddingRight,
71
71
  paddingLeft: themeTokens?.containerPaddingLeft
72
72
  })
@@ -74,6 +74,7 @@ const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) =>
74
74
  const getMediaQueryStyles = (
75
75
  themeTokens,
76
76
  themeOptions,
77
+ maxWidth,
77
78
  mediaIdsRef,
78
79
  dismissible,
79
80
  viewport,
@@ -91,7 +92,7 @@ const getMediaQueryStyles = (
91
92
 
92
93
  const { ids: containerIds, styles: containerStyles } = StyleSheet.create({
93
94
  container: {
94
- flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
95
+ flexDirection: 'column',
95
96
  ...selectContainerMediaQueryStyles
96
97
  }
97
98
  })
@@ -101,13 +102,8 @@ const getMediaQueryStyles = (
101
102
  flexDirection: 'row',
102
103
  flexShrink: 1,
103
104
  justifyContent: 'space-between',
104
- ...createMediaQueryStyles({
105
- xs: { maxWidth: themeOptions?.contentMaxWidth?.xs || '100%' },
106
- md: { maxWidth: themeOptions?.contentMaxWidth?.md || '100%' },
107
- lg: { maxWidth: themeOptions?.contentMaxWidth?.lg || '100%' },
108
- sm: { maxWidth: themeOptions?.contentMaxWidth?.sm || '100%' },
109
- xl: { maxWidth: themeOptions?.contentMaxWidth?.xl || '100%' }
110
- })
105
+ ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
106
+ ...(system && { alignSelf: 'center' })
111
107
  }
112
108
  })
113
109
 
@@ -162,8 +158,7 @@ const getMediaQueryStyles = (
162
158
  const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
163
159
  containerStyles: {
164
160
  container: {
165
- flexDirection:
166
- (system === true && viewport === 'xl') || Platform.OS === 'android' ? 'row' : 'inherit',
161
+ flexDirection: 'column',
167
162
  ...selectContainerStyles(themeTokens)
168
163
  }
169
164
  },
@@ -172,7 +167,8 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
172
167
  flexDirection: 'row',
173
168
  flexShrink: 1,
174
169
  justifyContent: 'space-between',
175
- ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system)
170
+ ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system),
171
+ ...(system && { alignSelf: 'center' })
176
172
  }
177
173
  },
178
174
  staticContentContainerStyles: {
@@ -256,7 +252,7 @@ const Notification = React.forwardRef(
256
252
  system: isSystemEnabled,
257
253
  viewport
258
254
  })
259
- const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
255
+ const maxWidth = viewports.map.get(viewports.xl)
260
256
 
261
257
  const notificationComponentRef = React.useRef({
262
258
  containerStyles: {},
@@ -283,6 +279,7 @@ const Notification = React.forwardRef(
283
279
  notificationComponentRef.current = getMediaQueryStyles(
284
280
  themeTokens,
285
281
  themeOptions,
282
+ maxWidth,
286
283
  mediaIdsRef,
287
284
  dismissible,
288
285
  viewport,
package/src/Typography/Typography.jsx CHANGED
@@ -74,7 +74,7 @@ const Typography = React.forwardRef(
74
74
  tag = typeof heading === 'string' ? heading : undefined,
75
75
  accessibilityRole = heading === true ? 'header' : undefined,
76
76
  block = false,
77
- align = undefined,
77
+ align = Platform.OS === 'web' ? 'inherit' : undefined,
78
78
  tokens,
79
79
  dataSet,
80
80
  strikeThrough = false,