@telus-uds/components-web 2.29.0 → 2.31.0

package/CHANGELOG.md

@@ -1,12 +1,40 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Thu, 18 Jan 2024 22:43:26 GMT and should not be manually modified.
+This log was last generated on Wed, 07 Feb 2024 19:09:40 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.31.0
+
+Wed, 07 Feb 2024 19:09:40 GMT
+
+### Minor changes
+
+- updating optimizeimage to support ssr (sergiy.andronov1@telus.com)
+- migrate pricelockup to component-base (chris.tafts@telus.com)
+- Bump @telus-uds/components-base to v1.76.0
+
+### Patches
+
+- fix ordered-list component single child render (guillermo.peitzner@telus.com)
+
+## 2.30.0
+
+Mon, 29 Jan 2024 18:41:50 GMT
+
+### Minor changes
+
+- Add "use client" directive to Image (wlsdud194@hotmail.com)
+- Bump @telus-uds/components-base to v1.75.0
+- Bump @telus-uds/system-theme-tokens to v2.50.1
+
+### Patches
+
+- fix termsAndCondition component visual states (guillermo.peitzner@telus.com)
+
 ## 2.29.0
 
-Thu, 18 Jan 2024 22:43:26 GMT
+Thu, 18 Jan 2024 22:55:53 GMT
 
 ### Minor changes
 

package/lib/Footnote/FootnoteLink.js

@@ -87,6 +87,7 @@ const FootnoteLink = _ref2 => {
       "aria-label": getCopy('a11yLabel'),
       ref: refs[index],
       onClick: event => handleOnClick(event, index),
+      tabIndex: 0,
       ...selectProps(rest),
       ...themeTokens,
       fontSize: fontSize,

package/lib/Image/index.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/lib/OptimizeImage/OptimizeImage.js

@@ -29,21 +29,15 @@ const OptimizeImage = _ref => {
     disableRetina = false,
     ...rest
   } = _ref;
-  const [imgUrls, setImgUrls] = (0, _react.useState)();
-
   // `useHeight` is a deprecated TDS prop, replaced by `sizeByHeight`
   const dimension = sizeByHeight || rest.useHeight ? 'h' : 'w';
+  // by default assuming webP support for SSR
+  const [imgUrls, setImgUrls] = (0, _react.useState)((0, _utils.getImageUrls)(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, true));
   (0, _react.useEffect)(() => {
-    // Currently not all browsers support webP
+    // Checking for webP support for CSR
     (0, _utils.hasWebpSupport)().then(supportsWebp => {
-      setImgUrls({
-        xsSrc: (0, _utils.getOptimizedUrl)(contentfulAssetUrl, dimension, xs, quality, disableRetina, supportsWebp),
-        smSrc: (0, _utils.getOptimizedUrl)(contentfulAssetUrl, dimension, sm, quality, disableRetina, supportsWebp),
-        mdSrc: (0, _utils.getOptimizedUrl)(contentfulAssetUrl, dimension, md, quality, disableRetina, supportsWebp),
-        lgSrc: (0, _utils.getOptimizedUrl)(contentfulAssetUrl, dimension, lg, quality, disableRetina, supportsWebp),
-        xlSrc: (0, _utils.getOptimizedUrl)(contentfulAssetUrl, dimension, xl, quality, disableRetina, supportsWebp),
-        fallbackSrc: (0, _utils.getFallbackUrl)(contentfulAssetUrl, dimension, xl, quality)
-      });
+      const imageUrls = (0, _utils.getImageUrls)(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, supportsWebp);
+      setImgUrls(imageUrls);
     });
   }, [contentfulAssetUrl, dimension, disableRetina, lg, md, quality, sm, xl, xs]);
   if (!imgUrls) return null;

package/lib/OptimizeImage/utils/getImageUrls.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getImageUrls;
+var _getOptimizedUrl = _interopRequireDefault(require("./getOptimizedUrl"));
+var _getFallbackUrl = _interopRequireDefault(require("./getFallbackUrl"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, supportsWebp) {
+  return {
+    xsSrc: (0, _getOptimizedUrl.default)(contentfulAssetUrl, dimension, xs, quality, disableRetina, supportsWebp),
+    smSrc: (0, _getOptimizedUrl.default)(contentfulAssetUrl, dimension, sm, quality, disableRetina, supportsWebp),
+    mdSrc: (0, _getOptimizedUrl.default)(contentfulAssetUrl, dimension, md, quality, disableRetina, supportsWebp),
+    lgSrc: (0, _getOptimizedUrl.default)(contentfulAssetUrl, dimension, lg, quality, disableRetina, supportsWebp),
+    xlSrc: (0, _getOptimizedUrl.default)(contentfulAssetUrl, dimension, xl, quality, disableRetina, supportsWebp),
+    fallbackSrc: (0, _getFallbackUrl.default)(contentfulAssetUrl, dimension, xl, quality)
+  };
+}

package/lib/OptimizeImage/utils/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "getFallbackUrl", {
     return _getFallbackUrl.default;
   }
 });
+Object.defineProperty(exports, "getImageUrls", {
+  enumerable: true,
+  get: function () {
+    return _getImageUrls.default;
+  }
+});
 Object.defineProperty(exports, "getOptimizedUrl", {
   enumerable: true,
   get: function () {
@@ -24,4 +30,5 @@ Object.defineProperty(exports, "hasWebpSupport", {
 var _getOptimizedUrl = _interopRequireDefault(require("./getOptimizedUrl"));
 var _getFallbackUrl = _interopRequireDefault(require("./getFallbackUrl"));
 var _hasWebpSupport = _interopRequireDefault(require("./hasWebpSupport"));
+var _getImageUrls = _interopRequireDefault(require("./getImageUrls"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/OrderedList/OrderedList.js

@@ -41,21 +41,29 @@ const OrderedList = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     variant,
     ...rest
   } = _ref2;
+  // Check if children is an array
+  const isChildrenArray = Array.isArray(children);
+
   // Pass any variants "OrderedList" receives down to the individual list items.
-  const childrenWithParentVariants = variant ? children.map(child => {
-    var _child$props;
-    const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
-    return {
-      ...child,
-      props: {
-        ...child.props,
+  const childrenWithParentVariants = (0, _react.useMemo)(() => {
+    const addVariantToProps = child => {
+      var _child$props;
+      const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+      return /*#__PURE__*/_react.default.cloneElement(child, {
         variant: {
           ...existingChildVariants,
           ...variant
         }
-      }
+      });
     };
-  }) : children;
+    if (variant) {
+      if (isChildrenArray) {
+        return children.map(addVariantToProps);
+      }
+      return [addVariantToProps(children)];
+    }
+    return children;
+  }, [children, variant, isChildrenArray]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledOrderedListBase, {
     ...selectProps(rest),
     ref: ref,

package/lib/TermsAndConditions/ExpandCollapse.js

@@ -52,12 +52,32 @@ const ExpandCollapseTitle = /*#__PURE__*/_styledComponents.default.h4.withConfig
     margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
   };
 });
-const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const getIconButtonTokens = _ref3 => {
+  let {
+    icon,
+    iconBackgroundColor,
+    iconBorderColor,
+    iconColor,
+    iconOuterBorderColor,
+    iconOuterBorderGap,
+    iconOuterBorderWidth
+  } = _ref3;
+  return {
+    icon,
+    backgroundColor: iconBackgroundColor,
+    borderColor: iconBorderColor,
+    iconColor,
+    outerBorderColor: iconOuterBorderColor,
+    outerBorderGap: iconOuterBorderGap,
+    outerBorderWidth: iconOuterBorderWidth
+  };
+};
+const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   let {
     children,
     collapseTitle,
     expandTitle = collapseTitle
-  } = _ref3;
+  } = _ref4;
   const getTokens = (0, _componentsBase.useThemeTokensCallback)('TermsAndConditions', {}, {});
   const {
     expandBaseBorderWidth,
@@ -94,20 +114,17 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         const {
           expanded
         } = pressableState || {};
-        const {
-          icon
-        } = getTokens({
-          expanded
-        });
+        const iconTokens = getIconButtonTokens(getTokens(pressableState || {}));
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExpandCollapseControl, {
           ref: ref,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseIconContainer, {
             tokens: getTokens(),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
-              icon: icon,
               variant: {
                 size: 'small'
-              }
+              },
+              tokens: iconTokens,
+              focusable: false
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseTitle, {
             tokens: getTokens(),

package/lib-module/Footnote/FootnoteLink.js

@@ -81,6 +81,7 @@ const FootnoteLink = _ref2 => {
       "aria-label": getCopy('a11yLabel'),
       ref: refs[index],
       onClick: event => handleOnClick(event, index),
+      tabIndex: 0,
       ...selectProps(rest),
       ...themeTokens,
       fontSize: fontSize,

package/lib-module/Image/index.js

@@ -1,3 +1,5 @@
+'use client';
+
 import Image from './Image';
 import withClientTheme from '../utils/theming/with-client-theme';
 

package/lib-module/OptimizeImage/OptimizeImage.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps } from '@telus-uds/components-base';
 import ResponsiveImage from '../ResponsiveImage';
-import { hasWebpSupport, getOptimizedUrl, getFallbackUrl } from './utils';
+import { hasWebpSupport, getImageUrls } from './utils';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
@@ -20,21 +20,15 @@ const OptimizeImage = _ref => {
     disableRetina = false,
     ...rest
   } = _ref;
-  const [imgUrls, setImgUrls] = useState();
-
   // `useHeight` is a deprecated TDS prop, replaced by `sizeByHeight`
   const dimension = sizeByHeight || rest.useHeight ? 'h' : 'w';
+  // by default assuming webP support for SSR
+  const [imgUrls, setImgUrls] = useState(getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, true));
   useEffect(() => {
-    // Currently not all browsers support webP
+    // Checking for webP support for CSR
     hasWebpSupport().then(supportsWebp => {
-      setImgUrls({
-        xsSrc: getOptimizedUrl(contentfulAssetUrl, dimension, xs, quality, disableRetina, supportsWebp),
-        smSrc: getOptimizedUrl(contentfulAssetUrl, dimension, sm, quality, disableRetina, supportsWebp),
-        mdSrc: getOptimizedUrl(contentfulAssetUrl, dimension, md, quality, disableRetina, supportsWebp),
-        lgSrc: getOptimizedUrl(contentfulAssetUrl, dimension, lg, quality, disableRetina, supportsWebp),
-        xlSrc: getOptimizedUrl(contentfulAssetUrl, dimension, xl, quality, disableRetina, supportsWebp),
-        fallbackSrc: getFallbackUrl(contentfulAssetUrl, dimension, xl, quality)
-      });
+      const imageUrls = getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, supportsWebp);
+      setImgUrls(imageUrls);
     });
   }, [contentfulAssetUrl, dimension, disableRetina, lg, md, quality, sm, xl, xs]);
   if (!imgUrls) return null;

package/lib-module/OptimizeImage/utils/getImageUrls.js

@@ -0,0 +1,12 @@
+import getOptimizedUrl from './getOptimizedUrl';
+import getFallbackUrl from './getFallbackUrl';
+export default function getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, supportsWebp) {
+  return {
+    xsSrc: getOptimizedUrl(contentfulAssetUrl, dimension, xs, quality, disableRetina, supportsWebp),
+    smSrc: getOptimizedUrl(contentfulAssetUrl, dimension, sm, quality, disableRetina, supportsWebp),
+    mdSrc: getOptimizedUrl(contentfulAssetUrl, dimension, md, quality, disableRetina, supportsWebp),
+    lgSrc: getOptimizedUrl(contentfulAssetUrl, dimension, lg, quality, disableRetina, supportsWebp),
+    xlSrc: getOptimizedUrl(contentfulAssetUrl, dimension, xl, quality, disableRetina, supportsWebp),
+    fallbackSrc: getFallbackUrl(contentfulAssetUrl, dimension, xl, quality)
+  };
+}

package/lib-module/OptimizeImage/utils/index.js

@@ -1,4 +1,5 @@
 import getOptimizedUrl from './getOptimizedUrl';
 import getFallbackUrl from './getFallbackUrl';
 import hasWebpSupport from './hasWebpSupport';
-export { getOptimizedUrl, getFallbackUrl, hasWebpSupport };
+import getImageUrls from './getImageUrls';
+export { getOptimizedUrl, getFallbackUrl, hasWebpSupport, getImageUrls };

package/lib-module/OrderedList/OrderedList.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { selectSystemProps, getTokensPropType, variantProp } from '@telus-uds/components-base';
@@ -32,21 +32,29 @@ const OrderedList = /*#__PURE__*/forwardRef((_ref2, ref) => {
     variant,
     ...rest
   } = _ref2;
+  // Check if children is an array
+  const isChildrenArray = Array.isArray(children);
+
   // Pass any variants "OrderedList" receives down to the individual list items.
-  const childrenWithParentVariants = variant ? children.map(child => {
-    var _child$props;
-    const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
-    return {
-      ...child,
-      props: {
-        ...child.props,
+  const childrenWithParentVariants = useMemo(() => {
+    const addVariantToProps = child => {
+      var _child$props;
+      const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+      return /*#__PURE__*/React.cloneElement(child, {
         variant: {
           ...existingChildVariants,
           ...variant
         }
-      }
+      });
     };
-  }) : children;
+    if (variant) {
+      if (isChildrenArray) {
+        return children.map(addVariantToProps);
+      }
+      return [addVariantToProps(children)];
+    }
+    return children;
+  }, [children, variant, isChildrenArray]);
   return /*#__PURE__*/_jsx(StyledOrderedListBase, {
     ...selectProps(rest),
     ref: ref,

package/lib-module/TermsAndConditions/ExpandCollapse.js

@@ -44,12 +44,32 @@ const ExpandCollapseTitle = /*#__PURE__*/styled.h4.withConfig({
     margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
   };
 });
-const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const getIconButtonTokens = _ref3 => {
+  let {
+    icon,
+    iconBackgroundColor,
+    iconBorderColor,
+    iconColor,
+    iconOuterBorderColor,
+    iconOuterBorderGap,
+    iconOuterBorderWidth
+  } = _ref3;
+  return {
+    icon,
+    backgroundColor: iconBackgroundColor,
+    borderColor: iconBorderColor,
+    iconColor,
+    outerBorderColor: iconOuterBorderColor,
+    outerBorderGap: iconOuterBorderGap,
+    outerBorderWidth: iconOuterBorderWidth
+  };
+};
+const ExpandCollapse = /*#__PURE__*/forwardRef((_ref4, ref) => {
   let {
     children,
     collapseTitle,
     expandTitle = collapseTitle
-  } = _ref3;
+  } = _ref4;
   const getTokens = useThemeTokensCallback('TermsAndConditions', {}, {});
   const {
     expandBaseBorderWidth,
@@ -86,20 +106,17 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
         const {
           expanded
         } = pressableState || {};
-        const {
-          icon
-        } = getTokens({
-          expanded
-        });
+        const iconTokens = getIconButtonTokens(getTokens(pressableState || {}));
         return /*#__PURE__*/_jsxs(ExpandCollapseControl, {
           ref: ref,
           children: [/*#__PURE__*/_jsx(ExpandCollapseIconContainer, {
             tokens: getTokens(),
             children: /*#__PURE__*/_jsx(IconButton, {
-              icon: icon,
               variant: {
                 size: 'small'
-              }
+              },
+              tokens: iconTokens,
+              focusable: false
             })
           }), /*#__PURE__*/_jsx(ExpandCollapseTitle, {
             tokens: getTokens(),

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.74.0",
+    "@telus-uds/components-base": "1.76.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -13,7 +13,7 @@
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.50.0",
+    "@telus-uds/system-theme-tokens": "^2.50.1",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.29.0"
+  "version": "2.31.0"
 }

package/src/Footnote/FootnoteLink.jsx

@@ -80,6 +80,7 @@ const FootnoteLink = ({
           key={num}
           ref={refs[index]}
           onClick={(event) => handleOnClick(event, index)}
+          tabIndex={0}
           {...selectProps(rest)}
           {...themeTokens}
           fontSize={fontSize}

package/src/Image/index.js

@@ -1,3 +1,5 @@
+'use client'
+
 import Image from './Image'
 import withClientTheme from '../utils/theming/with-client-theme'
 

package/src/OptimizeImage/OptimizeImage.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { selectSystemProps } from '@telus-uds/components-base'
 import ResponsiveImage from '../ResponsiveImage'
-import { hasWebpSupport, getOptimizedUrl, getFallbackUrl } from './utils'
+import { hasWebpSupport, getImageUrls } from './utils'
 import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
@@ -20,57 +20,29 @@ const OptimizeImage = ({
   disableRetina = false,
   ...rest
 }) => {
-  const [imgUrls, setImgUrls] = useState()
-
   // `useHeight` is a deprecated TDS prop, replaced by `sizeByHeight`
   const dimension = sizeByHeight || rest.useHeight ? 'h' : 'w'
+  // by default assuming webP support for SSR
+  const [imgUrls, setImgUrls] = useState(
+    getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, true)
+  )
 
   useEffect(() => {
-    // Currently not all browsers support webP
+    // Checking for webP support for CSR
     hasWebpSupport().then((supportsWebp) => {
-      setImgUrls({
-        xsSrc: getOptimizedUrl(
-          contentfulAssetUrl,
-          dimension,
-          xs,
-          quality,
-          disableRetina,
-          supportsWebp
-        ),
-        smSrc: getOptimizedUrl(
-          contentfulAssetUrl,
-          dimension,
-          sm,
-          quality,
-          disableRetina,
-          supportsWebp
-        ),
-        mdSrc: getOptimizedUrl(
-          contentfulAssetUrl,
-          dimension,
-          md,
-          quality,
-          disableRetina,
-          supportsWebp
-        ),
-        lgSrc: getOptimizedUrl(
-          contentfulAssetUrl,
-          dimension,
-          lg,
-          quality,
-          disableRetina,
-          supportsWebp
-        ),
-        xlSrc: getOptimizedUrl(
-          contentfulAssetUrl,
-          dimension,
-          xl,
-          quality,
-          disableRetina,
-          supportsWebp
-        ),
-        fallbackSrc: getFallbackUrl(contentfulAssetUrl, dimension, xl, quality)
-      })
+      const imageUrls = getImageUrls(
+        contentfulAssetUrl,
+        dimension,
+        xs,
+        sm,
+        md,
+        lg,
+        xl,
+        quality,
+        disableRetina,
+        supportsWebp
+      )
+      setImgUrls(imageUrls)
     })
   }, [contentfulAssetUrl, dimension, disableRetina, lg, md, quality, sm, xl, xs])
 

package/src/OptimizeImage/utils/getImageUrls.js

@@ -0,0 +1,24 @@
+import getOptimizedUrl from './getOptimizedUrl'
+import getFallbackUrl from './getFallbackUrl'
+
+export default function getImageUrls(
+  contentfulAssetUrl,
+  dimension,
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  quality,
+  disableRetina,
+  supportsWebp
+) {
+  return {
+    xsSrc: getOptimizedUrl(contentfulAssetUrl, dimension, xs, quality, disableRetina, supportsWebp),
+    smSrc: getOptimizedUrl(contentfulAssetUrl, dimension, sm, quality, disableRetina, supportsWebp),
+    mdSrc: getOptimizedUrl(contentfulAssetUrl, dimension, md, quality, disableRetina, supportsWebp),
+    lgSrc: getOptimizedUrl(contentfulAssetUrl, dimension, lg, quality, disableRetina, supportsWebp),
+    xlSrc: getOptimizedUrl(contentfulAssetUrl, dimension, xl, quality, disableRetina, supportsWebp),
+    fallbackSrc: getFallbackUrl(contentfulAssetUrl, dimension, xl, quality)
+  }
+}

package/src/OptimizeImage/utils/index.js

@@ -1,5 +1,6 @@
 import getOptimizedUrl from './getOptimizedUrl'
 import getFallbackUrl from './getFallbackUrl'
 import hasWebpSupport from './hasWebpSupport'
+import getImageUrls from './getImageUrls'
 
-export { getOptimizedUrl, getFallbackUrl, hasWebpSupport }
+export { getOptimizedUrl, getFallbackUrl, hasWebpSupport, getImageUrls }

package/src/OrderedList/OrderedList.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { selectSystemProps, getTokensPropType, variantProp } from '@telus-uds/components-base'
@@ -19,22 +19,31 @@ const StyledOrderedListBase = styled(OrderedListBase)(({ start }) => ({
  * Themed semantic ordered list.
  */
 const OrderedList = forwardRef(({ children, start, variant, ...rest }, ref) => {
+  // Check if children is an array
+  const isChildrenArray = Array.isArray(children)
+
   // Pass any variants "OrderedList" receives down to the individual list items.
-  const childrenWithParentVariants = variant
-    ? children.map((child) => {
-        const existingChildVariants = child.props?.variant ?? {}
-        return {
-          ...child,
-          props: {
-            ...child.props,
-            variant: {
-              ...existingChildVariants,
-              ...variant
-            }
-          }
+  const childrenWithParentVariants = useMemo(() => {
+    const addVariantToProps = (child) => {
+      const existingChildVariants = child.props?.variant ?? {}
+      return React.cloneElement(child, {
+        variant: {
+          ...existingChildVariants,
+          ...variant
         }
       })
-    : children
+    }
+
+    if (variant) {
+      if (isChildrenArray) {
+        return children.map(addVariantToProps)
+      }
+      return [addVariantToProps(children)]
+    }
+
+    return children
+  }, [children, variant, isChildrenArray])
+
   return (
     <StyledOrderedListBase {...selectProps(rest)} ref={ref} start={start}>
       {childrenWithParentVariants}

package/src/TermsAndConditions/ExpandCollapse.jsx

@@ -31,6 +31,24 @@ const ExpandCollapseTitle = styled.h4(({ tokens }) => ({
   margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
 }))
 
+const getIconButtonTokens = ({
+  icon,
+  iconBackgroundColor,
+  iconBorderColor,
+  iconColor,
+  iconOuterBorderColor,
+  iconOuterBorderGap,
+  iconOuterBorderWidth
+}) => ({
+  icon,
+  backgroundColor: iconBackgroundColor,
+  borderColor: iconBorderColor,
+  iconColor,
+  outerBorderColor: iconOuterBorderColor,
+  outerBorderGap: iconOuterBorderGap,
+  outerBorderWidth: iconOuterBorderWidth
+})
+
 const ExpandCollapse = forwardRef(
   ({ children, collapseTitle, expandTitle = collapseTitle }, ref) => {
     const getTokens = useThemeTokensCallback('TermsAndConditions', {}, {})
@@ -69,13 +87,13 @@ const ExpandCollapse = forwardRef(
             // eslint-disable-next-line react/no-unstable-nested-components
             control={(pressableState) => {
               const { expanded } = pressableState || {}
-              const { icon } = getTokens({ expanded })
+              const iconTokens = getIconButtonTokens(getTokens(pressableState || {}))
 
               return (
                 <ExpandCollapseControl ref={ref}>
                   <ExpandCollapseIconContainer tokens={getTokens()}>
                     {/* Can use `Icon` instead of `IconButton` but `Icon` does not have required stylistic variants */}
-                    <IconButton icon={icon} variant={{ size: 'small' }} />
+                    <IconButton variant={{ size: 'small' }} tokens={iconTokens} focusable={false} />
                   </ExpandCollapseIconContainer>
                   <ExpandCollapseTitle tokens={getTokens()}>
                     {expanded ? expandTitle : collapseTitle}