@telus-uds/components-web 2.30.0 → 2.31.0

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # 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, 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:26:01 GMT
+Mon, 29 Jan 2024 18:41:50 GMT
 
 ### Minor changes
 

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/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.76.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.30.0"
+  "version": "2.31.0"
 }

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}