@telus-uds/components-web 2.30.0 → 2.31.1

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Mon, 29 Jan 2024 18:26:01 GMT and should not be manually modified.
+This log was last generated on Wed, 14 Feb 2024 02:21:15 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.31.1
+
+Wed, 14 Feb 2024 02:21:15 GMT
+
+### Patches
+
+- `Card` added in `FlexGrid` should become clickable when grown to take entire height (shahzaibkhalidmalik@outlook.com)
+- updated text on the component-web story (chris.tafts@telus.com)
+- Bump @telus-uds/components-base to v1.77.0
+- Bump @telus-uds/system-theme-tokens to v2.51.0
+
+## 2.31.0
+
+Wed, 07 Feb 2024 19:14:08 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:26:01 GMT
+Mon, 29 Jan 2024 18:41:50 GMT
 
 ### Minor changes
 

package/lib/Card/Card.js

@@ -84,10 +84,8 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
   });
   const hasFooter = Boolean(footer);
   const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(borderRadius, fullBleedContentPosition, hasFooter);
-
-  // Make multiple cards in a row have equal heights with even space between content items
   const columnFlex = {
-    flexGrow: 1,
+    flexGrow: 0,
     flexShrink: 1,
     justifyContent: 'space-between'
   };
@@ -100,7 +98,7 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
     paddingRight,
     ...restOfTokens
   } = tokens;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Card, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Card, {
     ref: ref,
     variant: {
       ...variant,
@@ -108,39 +106,35 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
     },
     tokens: restOfTokens,
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+      ref: ref,
+      tokens: getThemeTokens,
+      dataSet: dataSet,
+      onPress: onPress,
+      ...selectProps(rest),
+      children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
+    }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      direction: contentStackDirection,
+      tokens: {
+        ...columnFlex,
+        alignItems: contentStackAlign
+      },
       space: 0,
-      tokens: columnFlex,
-      children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
-        ref: ref,
-        tokens: getThemeTokens,
-        dataSet: dataSet,
-        onPress: onPress,
-        ...selectProps(rest),
-        children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
-        direction: contentStackDirection,
-        tokens: {
-          ...columnFlex,
-          alignItems: contentStackAlign
-        },
-        space: 0,
-        children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
-          tokens: tokens,
-          variant: variant,
-          withFooter: hasFooter,
-          children: children
-        }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
-          borderRadius: fullBleedBorderRadius,
-          ...fullBleedContentProps
-        })]
-      }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardFooter.default, {
-        padding: footerPadding,
+      children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
         tokens: tokens,
         variant: variant,
-        children: footer
+        withFooter: hasFooter,
+        children: children
+      }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+        borderRadius: fullBleedBorderRadius,
+        ...fullBleedContentProps
       })]
-    })
+    }) : null, footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardFooter.default, {
+      padding: footerPadding,
+      tokens: tokens,
+      variant: variant,
+      children: footer
+    })]
   });
 });
 const positionValues = ['none', 'bottom', 'left', 'right', 'top'];

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-module/Card/Card.js

@@ -76,10 +76,8 @@ const Card = /*#__PURE__*/forwardRef(function () {
   });
   const hasFooter = Boolean(footer);
   const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius, fullBleedContentPosition, hasFooter);
-
-  // Make multiple cards in a row have equal heights with even space between content items
   const columnFlex = {
-    flexGrow: 1,
+    flexGrow: 0,
     flexShrink: 1,
     justifyContent: 'space-between'
   };
@@ -92,7 +90,7 @@ const Card = /*#__PURE__*/forwardRef(function () {
     paddingRight,
     ...restOfTokens
   } = tokens;
-  return /*#__PURE__*/_jsx(CardBase, {
+  return /*#__PURE__*/_jsxs(CardBase, {
     ref: ref,
     variant: {
       ...variant,
@@ -100,39 +98,35 @@ const Card = /*#__PURE__*/forwardRef(function () {
     },
     tokens: restOfTokens,
     ...selectProps(rest),
-    children: /*#__PURE__*/_jsxs(StackView, {
+    children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsx(PressableCardBase, {
+      ref: ref,
+      tokens: getThemeTokens,
+      dataSet: dataSet,
+      onPress: onPress,
+      ...selectProps(rest),
+      children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
+    }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/_jsxs(StackView, {
+      direction: contentStackDirection,
+      tokens: {
+        ...columnFlex,
+        alignItems: contentStackAlign
+      },
       space: 0,
-      tokens: columnFlex,
-      children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsx(PressableCardBase, {
-        ref: ref,
-        tokens: getThemeTokens,
-        dataSet: dataSet,
-        onPress: onPress,
-        ...selectProps(rest),
-        children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
-      }) : null, /*#__PURE__*/_jsxs(StackView, {
-        direction: contentStackDirection,
-        tokens: {
-          ...columnFlex,
-          alignItems: contentStackAlign
-        },
-        space: 0,
-        children: [children ? /*#__PURE__*/_jsx(CardContent, {
-          tokens: tokens,
-          variant: variant,
-          withFooter: hasFooter,
-          children: children
-        }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/_jsx(FullBleedContent, {
-          borderRadius: fullBleedBorderRadius,
-          ...fullBleedContentProps
-        })]
-      }), footer && /*#__PURE__*/_jsx(CardFooter, {
-        padding: footerPadding,
+      children: [children ? /*#__PURE__*/_jsx(CardContent, {
         tokens: tokens,
         variant: variant,
-        children: footer
+        withFooter: hasFooter,
+        children: children
+      }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/_jsx(FullBleedContent, {
+        borderRadius: fullBleedBorderRadius,
+        ...fullBleedContentProps
       })]
-    })
+    }) : null, footer && /*#__PURE__*/_jsx(CardFooter, {
+      padding: footerPadding,
+      tokens: tokens,
+      variant: variant,
+      children: footer
+    })]
   });
 });
 const positionValues = ['none', 'bottom', 'left', 'right', 'top'];

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/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.75.0",
+    "@telus-uds/components-base": "1.77.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.1",
+    "@telus-uds/system-theme-tokens": "^2.51.0",
     "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.30.0"
+  "version": "2.31.1"
 }

package/src/Card/Card.jsx

@@ -93,9 +93,8 @@ const Card = forwardRef(
       hasFooter
     )
 
-    // Make multiple cards in a row have equal heights with even space between content items
     const columnFlex = {
-      flexGrow: 1,
+      flexGrow: 0,
       flexShrink: 1,
       justifyContent: 'space-between'
     }
@@ -110,18 +109,18 @@ const Card = forwardRef(
         tokens={restOfTokens}
         {...selectProps(rest)}
       >
-        <StackView space={0} tokens={columnFlex}>
-          {interactiveCard?.body ? (
-            <PressableCardBase
-              ref={ref}
-              tokens={getThemeTokens}
-              dataSet={dataSet}
-              onPress={onPress}
-              {...selectProps(rest)}
-            >
-              {interactiveCard?.body}
-            </PressableCardBase>
-          ) : null}
+        {interactiveCard?.body ? (
+          <PressableCardBase
+            ref={ref}
+            tokens={getThemeTokens}
+            dataSet={dataSet}
+            onPress={onPress}
+            {...selectProps(rest)}
+          >
+            {interactiveCard?.body}
+          </PressableCardBase>
+        ) : null}
+        {children || fullBleedContentPosition !== 'none' ? (
           <StackView
             direction={contentStackDirection}
             tokens={{ ...columnFlex, alignItems: contentStackAlign }}
@@ -136,12 +135,12 @@ const Card = forwardRef(
               <FullBleedContent borderRadius={fullBleedBorderRadius} {...fullBleedContentProps} />
             )}
           </StackView>
-          {footer && (
-            <CardFooter padding={footerPadding} tokens={tokens} variant={variant}>
-              {footer}
-            </CardFooter>
-          )}
-        </StackView>
+        ) : null}
+        {footer && (
+          <CardFooter padding={footerPadding} tokens={tokens} variant={variant}>
+            {footer}
+          </CardFooter>
+        )}
       </CardBase>
     )
   }

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}