@telus-uds/components-web 2.14.0 → 2.15.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 +14 -2
  2. package/lib/Card/CardContent.js +6 -5
  3. package/lib/DatePicker/DatePicker.js +4 -10
  4. package/lib/Toast/Toast.js +19 -7
  5. package/lib-module/Card/CardContent.js +6 -5
  6. package/lib-module/DatePicker/DatePicker.js +4 -10
  7. package/lib-module/Toast/Toast.js +19 -7
  8. package/package.json +3 -3
  9. package/src/Card/CardContent.jsx +6 -5
  10. package/src/DatePicker/DatePicker.jsx +4 -12
  11. package/src/Toast/Toast.jsx +5 -1
package/CHANGELOG.md CHANGED
@@ -1,12 +1,24 @@
1
1
  # Change Log - @telus-uds/components-web
2
2
 
3
- This log was last generated on Fri, 14 Jul 2023 19:38:21 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 21 Jul 2023 00:42:38 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 2.15.0
8
+
9
+ Fri, 21 Jul 2023 00:42:38 GMT
10
+
11
+ ### Minor changes
12
+
13
+ - Adjusted CardContent to subtract borderWidth from padding to prevent a shifting issue(border was pushing content) (kyle.king2@telus.com)
14
+ - added padding token to Toast (kyle.king2@telus.com)
15
+ - Adjusted story for Listbox to not have "href" attributes on the children (kyle.king2@telus.com)
16
+ - Bump @telus-uds/components-base to v1.56.0
17
+ - Bump @telus-uds/system-theme-tokens to v2.39.0
18
+
7
19
  ## 2.14.0
8
20
 
9
- Fri, 14 Jul 2023 19:38:21 GMT
21
+ Fri, 14 Jul 2023 19:47:50 GMT
10
22
 
11
23
  ### Minor changes
12
24
 
package/lib/Card/CardContent.js CHANGED
@@ -35,7 +35,8 @@ const CardContentContainer = /*#__PURE__*/_styledComponents.default.div.withConf
35
35
  contentAlignItems: alignItems,
36
36
  contentFlexGrow: flexGrow,
37
37
  contentFlexShrink: flexShrink,
38
- contentJustifyContent: justifyContent
38
+ contentJustifyContent: justifyContent,
39
+ borderWidth
39
40
  } = _ref;
40
41
  return {
41
42
  // We need to make sure to have sharp corners on the bottom
@@ -44,10 +45,10 @@ const CardContentContainer = /*#__PURE__*/_styledComponents.default.div.withConf
44
45
  borderBottomRightRadius: withFooter ? 0 : borderRadius,
45
46
  borderTopLeftRadius: borderRadius,
46
47
  borderTopRightRadius: borderRadius,
47
- paddingBottom,
48
- paddingLeft,
49
- paddingRight,
50
- paddingTop,
48
+ paddingBottom: paddingBottom - borderWidth,
49
+ paddingLeft: paddingLeft - borderWidth,
50
+ paddingRight: paddingRight - borderWidth,
51
+ paddingTop: paddingTop - borderWidth,
51
52
  display: 'flex',
52
53
  flexDirection: 'column',
53
54
  alignItems,
package/lib/DatePicker/DatePicker.js CHANGED
@@ -46,29 +46,23 @@ const dateFormatWithoutSpaces = 'DD/MM/YYYY';
46
46
  const getResponsiveDaySize = function () {
47
47
  let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
48
48
  let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
49
- let responsiveDaySize;
50
49
 
51
50
  if (viewport === 'xs') {
52
- responsiveDaySize = inline ? undefined : 36;
53
- } else {
54
- responsiveDaySize = inline ? 60 : 44;
51
+ return inline ? undefined : 36;
55
52
  }
56
53
 
57
- return responsiveDaySize;
54
+ return inline ? 60 : 44;
58
55
  };
59
56
 
60
57
  const getResponsiveCircleSize = function () {
61
58
  let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
62
59
  let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
63
- let responsiveCircleSize;
64
60
 
65
61
  if (viewport === 'xs') {
66
- responsiveCircleSize = 26;
67
- } else {
68
- responsiveCircleSize = inline ? 44 : 26;
62
+ return 26;
69
63
  }
70
64
 
71
- return responsiveCircleSize;
65
+ return inline ? 44 : 26;
72
66
  };
73
67
 
74
68
  const MonthCenterContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
package/lib/Toast/Toast.js CHANGED
@@ -39,19 +39,29 @@ const animation = props => (0, _styledComponents.css)(["", " 1s ease-in-out 2s f
39
39
  const ToastContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
40
40
  displayName: "Toast__ToastContainer",
41
41
  componentId: "components-web__sc-p78jdh-0"
42
- })(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
42
+ })(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding-left:", "px;padding-right:", "px;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
43
43
  let {
44
- containerBackgroundColor
44
+ padding
45
45
  } = _ref;
46
- return containerBackgroundColor;
46
+ return padding;
47
47
  }, _ref2 => {
48
48
  let {
49
- containerGap
49
+ padding
50
50
  } = _ref2;
51
+ return padding;
52
+ }, _ref3 => {
53
+ let {
54
+ containerBackgroundColor
55
+ } = _ref3;
56
+ return containerBackgroundColor;
57
+ }, _ref4 => {
58
+ let {
59
+ containerGap
60
+ } = _ref4;
51
61
  return containerGap;
52
62
  }, animation);
53
63
 
54
- const Toast = _ref3 => {
64
+ const Toast = _ref5 => {
55
65
  let {
56
66
  toast,
57
67
  copy,
@@ -60,7 +70,7 @@ const Toast = _ref3 => {
60
70
  tokens,
61
71
  variant = {},
62
72
  ...rest
63
- } = _ref3;
73
+ } = _ref5;
64
74
  // viewport hook added to work adjust the padding to different sizes
65
75
  const viewport = (0, _componentsBase.useViewport)();
66
76
  const {
@@ -76,7 +86,8 @@ const Toast = _ref3 => {
76
86
  animationBackgroundColorAfter,
77
87
  animationColorBefore,
78
88
  animationColorAfter,
79
- chevronlinkFontWeight
89
+ chevronlinkFontWeight,
90
+ ...extraTokens
80
91
  } = (0, _componentsBase.useThemeTokens)('Toast', tokens, variant, {
81
92
  viewport
82
93
  }); // inherit ChevronLink tokens for animation colors
@@ -109,6 +120,7 @@ const Toast = _ref3 => {
109
120
  animationColorAfter: animationColorAfter,
110
121
  animationFillColorBefore: chevronInverseColor,
111
122
  animationFillColorAfter: chevronDefaultColor,
123
+ ...extraTokens,
112
124
  ...selectProps(rest),
113
125
  children: [headline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
114
126
  variant: {
package/lib-module/Card/CardContent.js CHANGED
@@ -19,7 +19,8 @@ const CardContentContainer = /*#__PURE__*/styled.div.withConfig({
19
19
  contentAlignItems: alignItems,
20
20
  contentFlexGrow: flexGrow,
21
21
  contentFlexShrink: flexShrink,
22
- contentJustifyContent: justifyContent
22
+ contentJustifyContent: justifyContent,
23
+ borderWidth
23
24
  } = _ref;
24
25
  return {
25
26
  // We need to make sure to have sharp corners on the bottom
@@ -28,10 +29,10 @@ const CardContentContainer = /*#__PURE__*/styled.div.withConfig({
28
29
  borderBottomRightRadius: withFooter ? 0 : borderRadius,
29
30
  borderTopLeftRadius: borderRadius,
30
31
  borderTopRightRadius: borderRadius,
31
- paddingBottom,
32
- paddingLeft,
33
- paddingRight,
34
- paddingTop,
32
+ paddingBottom: paddingBottom - borderWidth,
33
+ paddingLeft: paddingLeft - borderWidth,
34
+ paddingRight: paddingRight - borderWidth,
35
+ paddingTop: paddingTop - borderWidth,
35
36
  display: 'flex',
36
37
  flexDirection: 'column',
37
38
  alignItems,
package/lib-module/DatePicker/DatePicker.js CHANGED
@@ -21,29 +21,23 @@ const dateFormatWithoutSpaces = 'DD/MM/YYYY';
21
21
  const getResponsiveDaySize = function () {
22
22
  let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
23
23
  let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
24
- let responsiveDaySize;
25
24
 
26
25
  if (viewport === 'xs') {
27
- responsiveDaySize = inline ? undefined : 36;
28
- } else {
29
- responsiveDaySize = inline ? 60 : 44;
26
+ return inline ? undefined : 36;
30
27
  }
31
28
 
32
- return responsiveDaySize;
29
+ return inline ? 60 : 44;
33
30
  };
34
31
 
35
32
  const getResponsiveCircleSize = function () {
36
33
  let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
37
34
  let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
38
- let responsiveCircleSize;
39
35
 
40
36
  if (viewport === 'xs') {
41
- responsiveCircleSize = 26;
42
- } else {
43
- responsiveCircleSize = inline ? 44 : 26;
37
+ return 26;
44
38
  }
45
39
 
46
- return responsiveCircleSize;
40
+ return inline ? 44 : 26;
47
41
  };
48
42
 
49
43
  const MonthCenterContainer = /*#__PURE__*/styled.div.withConfig({
package/lib-module/Toast/Toast.js CHANGED
@@ -21,19 +21,29 @@ const animation = props => css(["", " 1s ease-in-out 2s forwards,", " 1s ease-in
21
21
  const ToastContainer = /*#__PURE__*/styled.div.withConfig({
22
22
  displayName: "Toast__ToastContainer",
23
23
  componentId: "components-web__sc-p78jdh-0"
24
- })(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
24
+ })(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding-left:", "px;padding-right:", "px;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
25
25
  let {
26
- containerBackgroundColor
26
+ padding
27
27
  } = _ref;
28
- return containerBackgroundColor;
28
+ return padding;
29
29
  }, _ref2 => {
30
30
  let {
31
- containerGap
31
+ padding
32
32
  } = _ref2;
33
+ return padding;
34
+ }, _ref3 => {
35
+ let {
36
+ containerBackgroundColor
37
+ } = _ref3;
38
+ return containerBackgroundColor;
39
+ }, _ref4 => {
40
+ let {
41
+ containerGap
42
+ } = _ref4;
33
43
  return containerGap;
34
44
  }, animation);
35
45
 
36
- const Toast = _ref3 => {
46
+ const Toast = _ref5 => {
37
47
  let {
38
48
  toast,
39
49
  copy,
@@ -42,7 +52,7 @@ const Toast = _ref3 => {
42
52
  tokens,
43
53
  variant = {},
44
54
  ...rest
45
- } = _ref3;
55
+ } = _ref5;
46
56
  // viewport hook added to work adjust the padding to different sizes
47
57
  const viewport = useViewport();
48
58
  const {
@@ -58,7 +68,8 @@ const Toast = _ref3 => {
58
68
  animationBackgroundColorAfter,
59
69
  animationColorBefore,
60
70
  animationColorAfter,
61
- chevronlinkFontWeight
71
+ chevronlinkFontWeight,
72
+ ...extraTokens
62
73
  } = useThemeTokens('Toast', tokens, variant, {
63
74
  viewport
64
75
  }); // inherit ChevronLink tokens for animation colors
@@ -91,6 +102,7 @@ const Toast = _ref3 => {
91
102
  animationColorAfter: animationColorAfter,
92
103
  animationFillColorBefore: chevronInverseColor,
93
104
  animationFillColorAfter: chevronDefaultColor,
105
+ ...extraTokens,
94
106
  ...selectProps(rest),
95
107
  children: [headline && /*#__PURE__*/_jsx(Typography, {
96
108
  variant: {
package/package.json CHANGED
@@ -5,14 +5,14 @@
5
5
  ],
6
6
  "dependencies": {
7
7
  "@gorhom/portal": "^1.0.14",
8
- "@telus-uds/components-base": "1.55.0",
8
+ "@telus-uds/components-base": "1.56.0",
9
9
  "@telus-uds/system-constants": "^1.3.0",
10
10
  "fscreen": "^1.2.0",
11
11
  "lodash.omit": "^4.5.0",
12
12
  "react-dates": "^21.8.0",
13
13
  "react-helmet-async": "^1.3.0",
14
14
  "react-moment-proptypes": "^1.8.1",
15
- "@telus-uds/system-theme-tokens": "^2.38.0",
15
+ "@telus-uds/system-theme-tokens": "^2.39.0",
16
16
  "prop-types": "^15.7.2",
17
17
  "lodash.throttle": "^4.1.1",
18
18
  "react-youtube": "^10.1.0",
@@ -63,5 +63,5 @@
63
63
  "skip": true
64
64
  },
65
65
  "types": "types/index.d.ts",
66
- "version": "2.14.0"
66
+ "version": "2.15.0"
67
67
  }
package/src/Card/CardContent.jsx CHANGED
@@ -23,7 +23,8 @@ const CardContentContainer = styled.div(
23
23
  contentAlignItems: alignItems,
24
24
  contentFlexGrow: flexGrow,
25
25
  contentFlexShrink: flexShrink,
26
- contentJustifyContent: justifyContent
26
+ contentJustifyContent: justifyContent,
27
+ borderWidth
27
28
  }) => ({
28
29
  // We need to make sure to have sharp corners on the bottom
29
30
  // if the card has a footer
@@ -31,10 +32,10 @@ const CardContentContainer = styled.div(
31
32
  borderBottomRightRadius: withFooter ? 0 : borderRadius,
32
33
  borderTopLeftRadius: borderRadius,
33
34
  borderTopRightRadius: borderRadius,
34
- paddingBottom,
35
- paddingLeft,
36
- paddingRight,
37
- paddingTop,
35
+ paddingBottom: paddingBottom - borderWidth,
36
+ paddingLeft: paddingLeft - borderWidth,
37
+ paddingRight: paddingRight - borderWidth,
38
+ paddingTop: paddingTop - borderWidth,
38
39
  display: 'flex',
39
40
  flexDirection: 'column',
40
41
  alignItems,
package/src/DatePicker/DatePicker.jsx CHANGED
@@ -24,25 +24,17 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
24
24
  const dateFormat = 'DD / MM / YYYY'
25
25
  const dateFormatWithoutSpaces = 'DD/MM/YYYY'
26
26
  const getResponsiveDaySize = (inline = false, viewport = 'md') => {
27
- let responsiveDaySize
28
27
  if (viewport === 'xs') {
29
- responsiveDaySize = inline ? undefined : 36
30
- } else {
31
- responsiveDaySize = inline ? 60 : 44
28
+ return inline ? undefined : 36
32
29
  }
33
-
34
- return responsiveDaySize
30
+ return inline ? 60 : 44
35
31
  }
36
32
 
37
33
  const getResponsiveCircleSize = (inline = false, viewport = 'md') => {
38
- let responsiveCircleSize
39
34
  if (viewport === 'xs') {
40
- responsiveCircleSize = 26
41
- } else {
42
- responsiveCircleSize = inline ? 44 : 26
35
+ return 26
43
36
  }
44
-
45
- return responsiveCircleSize
37
+ return inline ? 44 : 26
46
38
  }
47
39
 
48
40
  const MonthCenterContainer = styled.div({
package/src/Toast/Toast.jsx CHANGED
@@ -80,6 +80,8 @@ const ToastContainer = styled.div`
80
80
  justify-content: center;
81
81
  align-items: center;
82
82
  flex-wrap: wrap;
83
+ padding-left: ${({ padding }) => padding}px;
84
+ padding-right: ${({ padding }) => padding}px;
83
85
  background: ${({ containerBackgroundColor }) => containerBackgroundColor};
84
86
  gap: ${({ containerGap }) => containerGap};
85
87
  height: 0;
@@ -104,7 +106,8 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
104
106
  animationBackgroundColorAfter,
105
107
  animationColorBefore,
106
108
  animationColorAfter,
107
- chevronlinkFontWeight
109
+ chevronlinkFontWeight,
110
+ ...extraTokens
108
111
  } = useThemeTokens('Toast', tokens, variant, { viewport })
109
112
 
110
113
  // inherit ChevronLink tokens for animation colors
@@ -131,6 +134,7 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
131
134
  animationColorAfter={animationColorAfter}
132
135
  animationFillColorBefore={chevronInverseColor}
133
136
  animationFillColorAfter={chevronDefaultColor}
137
+ {...extraTokens}
134
138
  {...selectProps(rest)}
135
139
  >
136
140
  {headline && <Typography variant={{ bold: true, inverse: true }}>{headline}</Typography>}