@telus-uds/components-web 2.19.3 → 2.19.5

package/CHANGELOG.md

@@ -1,12 +1,29 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 20 Sep 2023 21:43:57 GMT and should not be manually modified.
+This log was last generated on Wed, 27 Sep 2023 20:45:15 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.19.5
+
+Wed, 27 Sep 2023 20:45:15 GMT
+
+### Patches
+
+- Clicking on any clickable area should bubble event to relevant `Pressable` element (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/components-base to v1.62.1
+
+## 2.19.4
+
+Thu, 21 Sep 2023 23:09:58 GMT
+
+### Patches
+
+- `TermsAndConditions`: Extra white space when `TermsAndConditions` is rendered at the bottom of page (shahzaibkhalidmalik@outlook.com)
+
 ## 2.19.3
 
-Wed, 20 Sep 2023 21:43:57 GMT
+Wed, 20 Sep 2023 21:45:03 GMT
 
 ### Patches
 

package/component-docs.json

@@ -4736,6 +4736,11 @@
                 "name": "bool",
                 "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
                 "required": false
+              },
+              "style": {
+                "name": "object",
+                "description": "Custom style object to be applied to the icon component.\nThis is useful for overriding the default icon style but for cases where desires styles are not available as tokens.\n\nNote: This prop is only used in web.\n\n@example\n<Icon style={{ color: 'red' }}",
+                "required": false
               }
             }
           },
@@ -4919,6 +4924,11 @@
                 "name": "bool",
                 "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
                 "required": false
+              },
+              "style": {
+                "name": "object",
+                "description": "Custom style object to be applied to the icon component.\nThis is useful for overriding the default icon style but for cases where desires styles are not available as tokens.\n\nNote: This prop is only used in web.\n\n@example\n<Icon style={{ color: 'red' }}",
+                "required": false
               }
             }
           },
@@ -5359,6 +5369,11 @@
                 "name": "bool",
                 "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
                 "required": false
+              },
+              "style": {
+                "name": "object",
+                "description": "Custom style object to be applied to the icon component.\nThis is useful for overriding the default icon style but for cases where desires styles are not available as tokens.\n\nNote: This prop is only used in web.\n\n@example\n<Icon style={{ color: 'red' }}",
+                "required": false
               }
             }
           },
@@ -8403,6 +8418,17 @@
           "required": false,
           "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling."
         },
+        "style": {
+          "defaultValue": {
+            "value": "{}",
+            "computed": false
+          },
+          "type": {
+            "name": "object"
+          },
+          "required": false,
+          "description": "Custom style object to be applied to the icon component.\nThis is useful for overriding the default icon style but for cases where desires styles are not available as tokens.\n\nNote: This prop is only used in web.\n\n@example\n<Icon style={{ color: 'red' }}"
+        },
         "variant": {
           "type": {
             "name": "objectOf",
@@ -13803,6 +13829,13 @@
           "required": false,
           "description": "The message. Can be raw text or text components."
         },
+        "nativeID": {
+          "type": {
+            "name": "string"
+          },
+          "required": false,
+          "description": "The `id` of the tooltip button."
+        },
         "tokens": {
           "type": {
             "name": "custom",

package/lib/TermsAndConditions/ExpandCollapse.js

@@ -84,6 +84,7 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     expandTitleBorderColor,
     expandTitleUnderline
   } = getTokens();
+  const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse, {
     tokens: {
       borderWidth: expandBaseBorderWidth
@@ -109,6 +110,7 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         } = getTokens({
           expanded
         });
+        setIsExpanded(expanded);
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExpandCollapseControl, {
           ref: ref,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseIconContainer, {
@@ -133,7 +135,7 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         borderColor: contentBorderColor,
         marginBottom: contentMarginBottom
       },
-      children: children
+      children: isExpanded ? children : null
     })
   });
 });

package/lib-module/TermsAndConditions/ExpandCollapse.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { useState, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { ExpandCollapse as ExpandCollapseBase, IconButton, useThemeTokensCallback } from '@telus-uds/components-base';
 import styled from 'styled-components';
@@ -64,6 +64,7 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
     expandTitleBorderColor,
     expandTitleUnderline
   } = getTokens();
+  const [isExpanded, setIsExpanded] = useState(false);
   return /*#__PURE__*/_jsx(ExpandCollapseBase, {
     tokens: {
       borderWidth: expandBaseBorderWidth
@@ -89,6 +90,7 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
         } = getTokens({
           expanded
         });
+        setIsExpanded(expanded);
         return /*#__PURE__*/_jsxs(ExpandCollapseControl, {
           ref: ref,
           children: [/*#__PURE__*/_jsx(ExpandCollapseIconContainer, {
@@ -113,7 +115,7 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
         borderColor: contentBorderColor,
         marginBottom: contentMarginBottom
       },
-      children: children
+      children: isExpanded ? children : null
     })
   });
 });

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.62.0",
+    "@telus-uds/components-base": "1.62.1",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -63,5 +63,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.19.3"
+  "version": "2.19.5"
 }

package/src/TermsAndConditions/ExpandCollapse.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React, { useState, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import {
   ExpandCollapse as ExpandCollapseBase,
@@ -47,6 +47,7 @@ const ExpandCollapse = forwardRef(
       expandTitleBorderColor,
       expandTitleUnderline
     } = getTokens()
+    const [isExpanded, setIsExpanded] = useState(false)
 
     return (
       <ExpandCollapseBase
@@ -71,6 +72,7 @@ const ExpandCollapse = forwardRef(
             control={(pressableState) => {
               const { expanded } = pressableState || {}
               const { icon } = getTokens({ expanded })
+              setIsExpanded(expanded)
 
               return (
                 <ExpandCollapseControl ref={ref}>
@@ -93,7 +95,7 @@ const ExpandCollapse = forwardRef(
               marginBottom: contentMarginBottom
             }}
           >
-            {children}
+            {isExpanded ? children : null}
           </ExpandCollapseBase.Panel>
         )}
       </ExpandCollapseBase>