@telus-uds/components-web 2.29.0 → 2.30.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 -2
  2. package/lib/Footnote/FootnoteLink.js +1 -0
  3. package/lib/Image/index.js +1 -0
  4. package/lib/TermsAndConditions/ExpandCollapse.js +26 -9
  5. package/lib-module/Footnote/FootnoteLink.js +1 -0
  6. package/lib-module/Image/index.js +2 -0
  7. package/lib-module/TermsAndConditions/ExpandCollapse.js +26 -9
  8. package/package.json +3 -3
  9. package/src/Footnote/FootnoteLink.jsx +1 -0
  10. package/src/Image/index.js +2 -0
  11. package/src/TermsAndConditions/ExpandCollapse.jsx +20 -2
package/CHANGELOG.md CHANGED
@@ -1,12 +1,26 @@
1
1
  # Change Log - @telus-uds/components-web
2
2
 
3
- This log was last generated on Thu, 18 Jan 2024 22:43:26 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 29 Jan 2024 18:26:01 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 2.30.0
8
+
9
+ Mon, 29 Jan 2024 18:26:01 GMT
10
+
11
+ ### Minor changes
12
+
13
+ - Add "use client" directive to Image (wlsdud194@hotmail.com)
14
+ - Bump @telus-uds/components-base to v1.75.0
15
+ - Bump @telus-uds/system-theme-tokens to v2.50.1
16
+
17
+ ### Patches
18
+
19
+ - fix termsAndCondition component visual states (guillermo.peitzner@telus.com)
20
+
7
21
  ## 2.29.0
8
22
 
9
- Thu, 18 Jan 2024 22:43:26 GMT
23
+ Thu, 18 Jan 2024 22:55:53 GMT
10
24
 
11
25
  ### Minor changes
12
26
 
package/lib/Footnote/FootnoteLink.js CHANGED
@@ -87,6 +87,7 @@ const FootnoteLink = _ref2 => {
87
87
  "aria-label": getCopy('a11yLabel'),
88
88
  ref: refs[index],
89
89
  onClick: event => handleOnClick(event, index),
90
+ tabIndex: 0,
90
91
  ...selectProps(rest),
91
92
  ...themeTokens,
92
93
  fontSize: fontSize,
package/lib/Image/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ 'use client';
2
3
 
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
package/lib/TermsAndConditions/ExpandCollapse.js CHANGED
@@ -52,12 +52,32 @@ const ExpandCollapseTitle = /*#__PURE__*/_styledComponents.default.h4.withConfig
52
52
  margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
53
53
  };
54
54
  });
55
- const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
55
+ const getIconButtonTokens = _ref3 => {
56
+ let {
57
+ icon,
58
+ iconBackgroundColor,
59
+ iconBorderColor,
60
+ iconColor,
61
+ iconOuterBorderColor,
62
+ iconOuterBorderGap,
63
+ iconOuterBorderWidth
64
+ } = _ref3;
65
+ return {
66
+ icon,
67
+ backgroundColor: iconBackgroundColor,
68
+ borderColor: iconBorderColor,
69
+ iconColor,
70
+ outerBorderColor: iconOuterBorderColor,
71
+ outerBorderGap: iconOuterBorderGap,
72
+ outerBorderWidth: iconOuterBorderWidth
73
+ };
74
+ };
75
+ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
56
76
  let {
57
77
  children,
58
78
  collapseTitle,
59
79
  expandTitle = collapseTitle
60
- } = _ref3;
80
+ } = _ref4;
61
81
  const getTokens = (0, _componentsBase.useThemeTokensCallback)('TermsAndConditions', {}, {});
62
82
  const {
63
83
  expandBaseBorderWidth,
@@ -94,20 +114,17 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
94
114
  const {
95
115
  expanded
96
116
  } = pressableState || {};
97
- const {
98
- icon
99
- } = getTokens({
100
- expanded
101
- });
117
+ const iconTokens = getIconButtonTokens(getTokens(pressableState || {}));
102
118
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExpandCollapseControl, {
103
119
  ref: ref,
104
120
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseIconContainer, {
105
121
  tokens: getTokens(),
106
122
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
107
- icon: icon,
108
123
  variant: {
109
124
  size: 'small'
110
- }
125
+ },
126
+ tokens: iconTokens,
127
+ focusable: false
111
128
  })
112
129
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseTitle, {
113
130
  tokens: getTokens(),
package/lib-module/Footnote/FootnoteLink.js CHANGED
@@ -81,6 +81,7 @@ const FootnoteLink = _ref2 => {
81
81
  "aria-label": getCopy('a11yLabel'),
82
82
  ref: refs[index],
83
83
  onClick: event => handleOnClick(event, index),
84
+ tabIndex: 0,
84
85
  ...selectProps(rest),
85
86
  ...themeTokens,
86
87
  fontSize: fontSize,
package/lib-module/Image/index.js CHANGED
@@ -1,3 +1,5 @@
1
+ 'use client';
2
+
1
3
  import Image from './Image';
2
4
  import withClientTheme from '../utils/theming/with-client-theme';
3
5
 
package/lib-module/TermsAndConditions/ExpandCollapse.js CHANGED
@@ -44,12 +44,32 @@ const ExpandCollapseTitle = /*#__PURE__*/styled.h4.withConfig({
44
44
  margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
45
45
  };
46
46
  });
47
- const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
47
+ const getIconButtonTokens = _ref3 => {
48
+ let {
49
+ icon,
50
+ iconBackgroundColor,
51
+ iconBorderColor,
52
+ iconColor,
53
+ iconOuterBorderColor,
54
+ iconOuterBorderGap,
55
+ iconOuterBorderWidth
56
+ } = _ref3;
57
+ return {
58
+ icon,
59
+ backgroundColor: iconBackgroundColor,
60
+ borderColor: iconBorderColor,
61
+ iconColor,
62
+ outerBorderColor: iconOuterBorderColor,
63
+ outerBorderGap: iconOuterBorderGap,
64
+ outerBorderWidth: iconOuterBorderWidth
65
+ };
66
+ };
67
+ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref4, ref) => {
48
68
  let {
49
69
  children,
50
70
  collapseTitle,
51
71
  expandTitle = collapseTitle
52
- } = _ref3;
72
+ } = _ref4;
53
73
  const getTokens = useThemeTokensCallback('TermsAndConditions', {}, {});
54
74
  const {
55
75
  expandBaseBorderWidth,
@@ -86,20 +106,17 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
86
106
  const {
87
107
  expanded
88
108
  } = pressableState || {};
89
- const {
90
- icon
91
- } = getTokens({
92
- expanded
93
- });
109
+ const iconTokens = getIconButtonTokens(getTokens(pressableState || {}));
94
110
  return /*#__PURE__*/_jsxs(ExpandCollapseControl, {
95
111
  ref: ref,
96
112
  children: [/*#__PURE__*/_jsx(ExpandCollapseIconContainer, {
97
113
  tokens: getTokens(),
98
114
  children: /*#__PURE__*/_jsx(IconButton, {
99
- icon: icon,
100
115
  variant: {
101
116
  size: 'small'
102
- }
117
+ },
118
+ tokens: iconTokens,
119
+ focusable: false
103
120
  })
104
121
  }), /*#__PURE__*/_jsx(ExpandCollapseTitle, {
105
122
  tokens: getTokens(),
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": "1.74.0",
8
+ "@telus-uds/components-base": "1.75.0",
9
9
  "@telus-uds/system-constants": "^1.3.0",
10
10
  "fscreen": "^1.2.0",
11
11
  "lodash.omit": "^4.5.0",
@@ -13,7 +13,7 @@
13
13
  "react-dates": "^21.8.0",
14
14
  "react-helmet-async": "^1.3.0",
15
15
  "react-moment-proptypes": "^1.8.1",
16
- "@telus-uds/system-theme-tokens": "^2.50.0",
16
+ "@telus-uds/system-theme-tokens": "^2.50.1",
17
17
  "prop-types": "^15.7.2",
18
18
  "lodash.throttle": "^4.1.1",
19
19
  "react-youtube": "^10.1.0",
@@ -83,5 +83,5 @@
83
83
  "skip": true
84
84
  },
85
85
  "types": "types/index.d.ts",
86
- "version": "2.29.0"
86
+ "version": "2.30.0"
87
87
  }
package/src/Footnote/FootnoteLink.jsx CHANGED
@@ -80,6 +80,7 @@ const FootnoteLink = ({
80
80
  key={num}
81
81
  ref={refs[index]}
82
82
  onClick={(event) => handleOnClick(event, index)}
83
+ tabIndex={0}
83
84
  {...selectProps(rest)}
84
85
  {...themeTokens}
85
86
  fontSize={fontSize}
package/src/Image/index.js CHANGED
@@ -1,3 +1,5 @@
1
+ 'use client'
2
+
1
3
  import Image from './Image'
2
4
  import withClientTheme from '../utils/theming/with-client-theme'
3
5
 
package/src/TermsAndConditions/ExpandCollapse.jsx CHANGED
@@ -31,6 +31,24 @@ const ExpandCollapseTitle = styled.h4(({ tokens }) => ({
31
31
  margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
32
32
  }))
33
33
 
34
+ const getIconButtonTokens = ({
35
+ icon,
36
+ iconBackgroundColor,
37
+ iconBorderColor,
38
+ iconColor,
39
+ iconOuterBorderColor,
40
+ iconOuterBorderGap,
41
+ iconOuterBorderWidth
42
+ }) => ({
43
+ icon,
44
+ backgroundColor: iconBackgroundColor,
45
+ borderColor: iconBorderColor,
46
+ iconColor,
47
+ outerBorderColor: iconOuterBorderColor,
48
+ outerBorderGap: iconOuterBorderGap,
49
+ outerBorderWidth: iconOuterBorderWidth
50
+ })
51
+
34
52
  const ExpandCollapse = forwardRef(
35
53
  ({ children, collapseTitle, expandTitle = collapseTitle }, ref) => {
36
54
  const getTokens = useThemeTokensCallback('TermsAndConditions', {}, {})
@@ -69,13 +87,13 @@ const ExpandCollapse = forwardRef(
69
87
  // eslint-disable-next-line react/no-unstable-nested-components
70
88
  control={(pressableState) => {
71
89
  const { expanded } = pressableState || {}
72
- const { icon } = getTokens({ expanded })
90
+ const iconTokens = getIconButtonTokens(getTokens(pressableState || {}))
73
91
 
74
92
  return (
75
93
  <ExpandCollapseControl ref={ref}>
76
94
  <ExpandCollapseIconContainer tokens={getTokens()}>
77
95
  {/* Can use `Icon` instead of `IconButton` but `Icon` does not have required stylistic variants */}
78
- <IconButton icon={icon} variant={{ size: 'small' }} />
96
+ <IconButton variant={{ size: 'small' }} tokens={iconTokens} focusable={false} />
79
97
  </ExpandCollapseIconContainer>
80
98
  <ExpandCollapseTitle tokens={getTokens()}>
81
99
  {expanded ? expandTitle : collapseTitle}