@telus-uds/components-web 2.19.2 → 2.19.4

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 (5) hide show
  1. package/CHANGELOG.md +18 -2
  2. package/lib/TermsAndConditions/ExpandCollapse.js +4 -11
  3. package/lib-module/TermsAndConditions/ExpandCollapse.js +5 -12
  4. package/package.json +1 -1
  5. package/src/TermsAndConditions/ExpandCollapse.jsx +7 -17
package/CHANGELOG.md CHANGED
@@ -1,12 +1,28 @@
1
1
  # Change Log - @telus-uds/components-web
2
2
 
3
- This log was last generated on Sat, 16 Sep 2023 01:00:29 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 21 Sep 2023 23:08:57 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 2.19.4
8
+
9
+ Thu, 21 Sep 2023 23:08:57 GMT
10
+
11
+ ### Patches
12
+
13
+ - `TermsAndConditions`: Extra white space when `TermsAndConditions` is rendered at the bottom of page (shahzaibkhalidmalik@outlook.com)
14
+
15
+ ## 2.19.3
16
+
17
+ Wed, 20 Sep 2023 21:45:03 GMT
18
+
19
+ ### Patches
20
+
21
+ - `TermsAndConditions`: Fix content not being rendered (shahzaibkhalidmalik@outlook.com)
22
+
7
23
  ## 2.19.2
8
24
 
9
- Sat, 16 Sep 2023 01:00:29 GMT
25
+ Sat, 16 Sep 2023 01:01:30 GMT
10
26
 
11
27
  ### Patches
12
28
 
package/lib/TermsAndConditions/ExpandCollapse.js CHANGED
@@ -84,13 +84,7 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
84
84
  expandTitleBorderColor,
85
85
  expandTitleUnderline
86
86
  } = getTokens();
87
- const [expand, setExpand] = (0, _react.useState)(false);
88
-
89
- const handleExpandToggle = (expandProps, event, expanded) => {
90
- expandProps.onToggle('ExpandCollapsePanel', event);
91
- setExpand(!expanded);
92
- };
93
-
87
+ const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
94
88
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse, {
95
89
  tokens: {
96
90
  borderWidth: expandBaseBorderWidth
@@ -116,8 +110,8 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
116
110
  } = getTokens({
117
111
  expanded
118
112
  });
113
+ setIsExpanded(expanded);
119
114
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExpandCollapseControl, {
120
- onClick: event => handleExpandToggle(expandProps, event, expanded),
121
115
  ref: ref,
122
116
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseIconContainer, {
123
117
  tokens: getTokens(),
@@ -125,8 +119,7 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
125
119
  icon: icon,
126
120
  variant: {
127
121
  size: 'small'
128
- },
129
- onClick: event => handleExpandToggle(expandProps, event, expanded)
122
+ }
130
123
  })
131
124
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseTitle, {
132
125
  tokens: getTokens(),
@@ -142,7 +135,7 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
142
135
  borderColor: contentBorderColor,
143
136
  marginBottom: contentMarginBottom
144
137
  },
145
- children: expand ? children : null
138
+ children: isExpanded ? children : null
146
139
  })
147
140
  });
148
141
  });
package/lib-module/TermsAndConditions/ExpandCollapse.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { forwardRef, useState } from 'react';
1
+ import React, { useState, forwardRef } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { ExpandCollapse as ExpandCollapseBase, IconButton, useThemeTokensCallback } from '@telus-uds/components-base';
4
4
  import styled from 'styled-components';
@@ -64,13 +64,7 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
64
64
  expandTitleBorderColor,
65
65
  expandTitleUnderline
66
66
  } = getTokens();
67
- const [expand, setExpand] = useState(false);
68
-
69
- const handleExpandToggle = (expandProps, event, expanded) => {
70
- expandProps.onToggle('ExpandCollapsePanel', event);
71
- setExpand(!expanded);
72
- };
73
-
67
+ const [isExpanded, setIsExpanded] = useState(false);
74
68
  return /*#__PURE__*/_jsx(ExpandCollapseBase, {
75
69
  tokens: {
76
70
  borderWidth: expandBaseBorderWidth
@@ -96,8 +90,8 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
96
90
  } = getTokens({
97
91
  expanded
98
92
  });
93
+ setIsExpanded(expanded);
99
94
  return /*#__PURE__*/_jsxs(ExpandCollapseControl, {
100
- onClick: event => handleExpandToggle(expandProps, event, expanded),
101
95
  ref: ref,
102
96
  children: [/*#__PURE__*/_jsx(ExpandCollapseIconContainer, {
103
97
  tokens: getTokens(),
@@ -105,8 +99,7 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
105
99
  icon: icon,
106
100
  variant: {
107
101
  size: 'small'
108
- },
109
- onClick: event => handleExpandToggle(expandProps, event, expanded)
102
+ }
110
103
  })
111
104
  }), /*#__PURE__*/_jsx(ExpandCollapseTitle, {
112
105
  tokens: getTokens(),
@@ -122,7 +115,7 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
122
115
  borderColor: contentBorderColor,
123
116
  marginBottom: contentMarginBottom
124
117
  },
125
- children: expand ? children : null
118
+ children: isExpanded ? children : null
126
119
  })
127
120
  });
128
121
  });
package/package.json CHANGED
@@ -63,5 +63,5 @@
63
63
  "skip": true
64
64
  },
65
65
  "types": "types/index.d.ts",
66
- "version": "2.19.2"
66
+ "version": "2.19.4"
67
67
  }
package/src/TermsAndConditions/ExpandCollapse.jsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { forwardRef, useState } from 'react'
1
+ import React, { useState, forwardRef } from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import {
4
4
  ExpandCollapse as ExpandCollapseBase,
@@ -47,12 +47,7 @@ const ExpandCollapse = forwardRef(
47
47
  expandTitleBorderColor,
48
48
  expandTitleUnderline
49
49
  } = getTokens()
50
- const [expand, setExpand] = useState(false)
51
-
52
- const handleExpandToggle = (expandProps, event, expanded) => {
53
- expandProps.onToggle('ExpandCollapsePanel', event)
54
- setExpand(!expanded)
55
- }
50
+ const [isExpanded, setIsExpanded] = useState(false)
56
51
 
57
52
  return (
58
53
  <ExpandCollapseBase
@@ -77,18 +72,13 @@ const ExpandCollapse = forwardRef(
77
72
  control={(pressableState) => {
78
73
  const { expanded } = pressableState || {}
79
74
  const { icon } = getTokens({ expanded })
75
+ setIsExpanded(expanded)
80
76
 
81
77
  return (
82
- <ExpandCollapseControl
83
- onClick={(event) => handleExpandToggle(expandProps, event, expanded)}
84
- ref={ref}
85
- >
78
+ <ExpandCollapseControl ref={ref}>
86
79
  <ExpandCollapseIconContainer tokens={getTokens()}>
87
- <IconButton
88
- icon={icon}
89
- variant={{ size: 'small' }}
90
- onClick={(event) => handleExpandToggle(expandProps, event, expanded)}
91
- />
80
+ {/* Can use `Icon` instead of `IconButton` but `Icon` does not have required stylistic variants */}
81
+ <IconButton icon={icon} variant={{ size: 'small' }} />
92
82
  </ExpandCollapseIconContainer>
93
83
  <ExpandCollapseTitle tokens={getTokens()}>
94
84
  {expanded ? expandTitle : collapseTitle}
@@ -105,7 +95,7 @@ const ExpandCollapse = forwardRef(
105
95
  marginBottom: contentMarginBottom
106
96
  }}
107
97
  >
108
- {expand ? children : null}
98
+ {isExpanded ? children : null}
109
99
  </ExpandCollapseBase.Panel>
110
100
  )}
111
101
  </ExpandCollapseBase>