@telus-uds/components-web 2.41.0 → 2.42.0

package/CHANGELOG.md

@@ -1,12 +1,29 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 25 Sep 2024 16:57:49 GMT and should not be manually modified.
+This log was last generated on Sat, 12 Oct 2024 00:31:05 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.42.0
+
+Sat, 12 Oct 2024 00:31:05 GMT
+
+### Minor changes
+
+- `PriceLockup`: alignItemsText token added to the component to align right (flex-end), left (flex-start) or center the content (35577399+JoshHC@users.noreply.github.com)
+- `ProgressBar`: add shadow tokens (jacqui.koroll@telus.com)
+- `TermsAndConditions`: refactor component to use media-query-stylesheet (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v1.96.0
+- Bump @telus-uds/system-theme-tokens to v2.65.0
+
+### Patches
+
+- `List`: Enable `CircleBullet` icon to visualize order of nested lists (jaime.tuyuc@telus.com)
+- `OrderedList`: change display to render correctly (Mauricio.BatresMontejo@telus.com)
+
 ## 2.41.0
 
-Wed, 25 Sep 2024 16:57:49 GMT
+Wed, 25 Sep 2024 17:07:47 GMT
 
 ### Minor changes
 

package/lib/OrderedList/Item.js

@@ -53,11 +53,14 @@ const StyledItemBase = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.def
     counterIncrement: _constants.OL_COUNTER_NAME,
     '::before': {
       content: `counter(${_constants.OL_COUNTER_NAME})'.'`,
-      display: 'inline-flex',
+      display: 'inline-block',
       color: itemColor || itemTextColor,
       width: itemBulletContainerWidth,
       paddingRight: listGutter,
-      justifyContent: itemBulletTextAlign,
+      textAlign: itemBulletTextAlign,
+      flexShrink: 0,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
       ...(0, _componentsBase.applyTextStyles)({
         fontWeight: itemFontWeight,
         fontSize: itemFontSize,
@@ -75,7 +78,9 @@ const ItemContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Item__ItemContent",
   componentId: "components-web__sc-7jzwcq-1"
 })({
-  flex: 1
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 5
 });
 const Item = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
@@ -122,7 +127,9 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         ...themeTokens,
         children: itemContent
       })]
-    }) : itemContent
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContent, {
+      children: itemContent
+    })
   });
 });
 Item.displayName = 'OrderedListItem';

package/lib/PriceLockup/PriceLockup.js

@@ -17,64 +17,69 @@ const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemP
 const PriceLockupContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__PriceLockupContainer",
   componentId: "components-web__sc-1x6duay-0"
-})(["display:flex;flex-direction:column;width:fit-content;"]);
+})(["align-items:", ";display:flex;flex-direction:column;width:fit-content;"], _ref => {
+  let {
+    alignItemsText
+  } = _ref;
+  return alignItemsText;
+});
 const PriceContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__PriceContainer",
   componentId: "components-web__sc-1x6duay-1"
-})(["display:flex;margin-bottom:", ";"], _ref => {
+})(["display:flex;margin-bottom:", ";"], _ref2 => {
   let {
     priceMarginBottom
-  } = _ref;
+  } = _ref2;
   return priceMarginBottom;
 });
 const FootnoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__FootnoteContainer",
   componentId: "components-web__sc-1x6duay-2"
-})(["display:flex;margin-top:", ";gap:", ";"], _ref2 => {
+})(["display:flex;margin-top:", ";gap:", ";"], _ref3 => {
   let {
     footnoteMarginTop
-  } = _ref2;
+  } = _ref3;
   return footnoteMarginTop;
-}, _ref3 => {
+}, _ref4 => {
   let {
     footnoteGap
-  } = _ref3;
+  } = _ref4;
   return footnoteGap;
 });
 const BottomTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__BottomTextContainer",
   componentId: "components-web__sc-1x6duay-3"
-})(["margin-top:", ";"], _ref4 => {
+})(["margin-top:", ";"], _ref5 => {
   let {
     bottomTextMarginTop
-  } = _ref4;
+  } = _ref5;
   return bottomTextMarginTop;
 });
 const BottomLinksContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__BottomLinksContainer",
   componentId: "components-web__sc-1x6duay-4"
-})(["align-self:center;margin-left:", ";"], _ref5 => {
+})(["align-self:center;margin-left:", ";"], _ref6 => {
   let {
     bottomLinksMarginLeft
-  } = _ref5;
+  } = _ref6;
   return bottomLinksMarginLeft;
 });
 const TopTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__TopTextContainer",
   componentId: "components-web__sc-1x6duay-5"
-})(["margin-bottom:", ";"], _ref6 => {
+})(["margin-bottom:", ";"], _ref7 => {
   let {
     topTextMarginBottom
-  } = _ref6;
+  } = _ref7;
   return topTextMarginBottom;
 });
 const PriceTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__PriceTextContainer",
   componentId: "components-web__sc-1x6duay-6"
-})(["display:flex;flex-direction:", ";"], _ref7 => {
+})(["display:flex;flex-direction:", ";"], _ref8 => {
   let {
     ratePosition
-  } = _ref7;
+  } = _ref8;
   return ratePosition === 'bottom' ? 'column' : 'row';
 });
 const RateContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
@@ -84,38 +89,38 @@ const RateContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
 const RateTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__RateTextContainer",
   componentId: "components-web__sc-1x6duay-8"
-})(["align-self:", ";"], _ref8 => {
+})(["align-self:", ";"], _ref9 => {
   let {
     ratePosition
-  } = _ref8;
+  } = _ref9;
   return ratePosition === 'bottom' ? 'flex-start' : 'flex-end';
 });
 const StrikeThroughContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__StrikeThroughContainer",
   componentId: "components-web__sc-1x6duay-9"
-})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref9 => {
+})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref10 => {
   let {
     strikeThroughPosition
-  } = _ref9;
+  } = _ref10;
   return `${strikeThroughPosition}px`;
-}, _ref10 => {
+}, _ref11 => {
   let {
     strikeThroughHeight
-  } = _ref10;
+  } = _ref11;
   return `${strikeThroughHeight}px`;
-}, _ref11 => {
+}, _ref12 => {
   let {
     strikeThroughColor
-  } = _ref11;
+  } = _ref12;
   return strikeThroughColor;
 });
-const selectFootnoteLinkStyles = _ref12 => {
+const selectFootnoteLinkStyles = _ref13 => {
   let {
     footnoteLinkColor,
     footnoteLinkFontName,
     footnoteLinkFontWeight,
     footnoteLinkLineHeight
-  } = _ref12;
+  } = _ref13;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
@@ -123,19 +128,19 @@ const selectFootnoteLinkStyles = _ref12 => {
     lineHeight: footnoteLinkLineHeight
   };
 };
-const selectStrikeThroughTokens = _ref13 => {
+const selectStrikeThroughTokens = _ref14 => {
   let {
     strikeThroughPosition,
     strikeThroughHeight,
     strikeThroughColor
-  } = _ref13;
+  } = _ref14;
   return {
     strikeThroughHeight,
     strikeThroughPosition,
     strikeThroughColor
   };
 };
-const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref14, ref) => {
+const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref15, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -152,7 +157,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref14, ref) => {
     tokens: priceLockupTokens,
     variant = {},
     ...rest
-  } = _ref14;
+  } = _ref15;
   const viewport = (0, _componentsBase.useViewport)();
   const {
     footnoteMarginTop,
@@ -164,6 +169,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref14, ref) => {
     fontColor,
     dividerColor,
     footnoteLinkFontSize,
+    alignItemsText,
     ...themeTokens
   } = (0, _componentsBase.useThemeTokens)('PriceLockup', priceLockupTokens, {
     ...variant,
@@ -257,6 +263,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref14, ref) => {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceLockupContainer, {
     ...selectProps(rest),
+    alignItemsText: alignItemsText,
     ref: ref,
     children: [topText && /*#__PURE__*/(0, _jsxRuntime.jsx)(TopTextContainer, {
       topTextMarginBottom: `${topTextMarginBottom}px`,

package/lib/Progress/ProgressBar.js

@@ -22,20 +22,20 @@ const Gradient = /*#__PURE__*/_styledComponents.default.div.attrs({
   componentId: "components-web__sc-1vmzyq5-0"
 })(_ref => {
   let {
-    percentage,
     gradient: {
       angle,
       stops,
       type
-    }
+    },
+    borderRadius,
+    shadow
   } = _ref;
   return {
     height: '100%',
-    // As per the design specs, we need to have the gradient expanding to 100% and being
-    // revealed by bar width, so we need to stretch it beyond the parent (progress element)
-    // to the full length of the progress bar
-    width: `${100 * 100 / percentage}%`,
-    background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`
+    width: '100%',
+    background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`,
+    borderRadius,
+    ...(0, _componentsBase.applyShadowToken)(shadow)
   };
 });
 
@@ -66,8 +66,7 @@ const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ref: ref,
     ...selectedProps,
     children: themeTokens.gradient && /*#__PURE__*/(0, _jsxRuntime.jsx)(Gradient, {
-      ...themeTokens,
-      percentage: percentage
+      ...themeTokens
     })
   });
 });

package/lib/TermsAndConditions/TermsAndConditions.js

@@ -122,9 +122,60 @@ const TermsAndConditions = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) =
   const hasIndexedContent = indexedContent.length > 0;
   const hasNonIndexedContent = nonIndexedContent.length > 0;
   const viewport = (0, _componentsBase.useViewport)();
-  const themeTokens = (0, _componentsBase.useThemeTokens)('TermsAndConditions', tokens, variant, {
+  const {
+    themeOptions
+  } = (0, _componentsBase.useTheme)();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? _componentsBase.useResponsiveThemeTokens : _componentsBase.useThemeTokens;
+  const themeTokens = useTokens('TermsAndConditions', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
+  let listItemStyles;
+  let listItemMediaIds;
+  let nonIndexedContentStyles;
+  let nonIndexedContentMediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const {
+      transformedListItemThemeTokens,
+      transformedNonIndexedContentThemeTokens
+    } = Object.entries(themeTokens).reduce((acc, _ref7) => {
+      let [vp, viewportTokens] = _ref7;
+      acc.transformedListItemThemeTokens[vp] = {
+        marginLeft: viewportTokens.listMarginLeft
+      };
+      acc.transformedNonIndexedContentThemeTokens[vp] = {
+        paddingLeft: viewportTokens.titlePaddingLeft
+      };
+      return acc;
+    }, {
+      transformedListItemThemeTokens: {},
+      transformedNonIndexedContentThemeTokens: {}
+    });
+    const listItemMediaQueryStyles = (0, _componentsBase.createMediaQueryStyles)(transformedListItemThemeTokens);
+    const nonIndexedContentMediaQueryStyles = (0, _componentsBase.createMediaQueryStyles)(transformedNonIndexedContentThemeTokens);
+    const {
+      ids,
+      styles
+    } = _componentsBase.StyleSheet.create({
+      listItem: {
+        ...themeTokens[viewport],
+        ...listItemMediaQueryStyles
+      },
+      nonIndexedContent: {
+        ...themeTokens[viewport],
+        ...nonIndexedContentMediaQueryStyles
+      }
+    });
+    listItemStyles = styles.listItem;
+    listItemMediaIds = ids.listItem;
+    nonIndexedContentStyles = styles.nonIndexedContent;
+    nonIndexedContentMediaIds = ids.nonIndexedContent;
+  } else {
+    listItemStyles = themeTokens;
+    nonIndexedContentStyles = themeTokens;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {
@@ -145,13 +196,15 @@ const TermsAndConditions = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) =
           /*#__PURE__*/
           // eslint-disable-next-line react/no-array-index-key
           (0, _jsxRuntime.jsx)(ListItem, {
-            tokens: themeTokens,
+            tokens: listItemStyles,
+            media: listItemMediaIds,
             children: (0, _utils.renderStructuredContent)(contentItem)
           }, idx))
         }), hasNonIndexedContent && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Box, {
           between: 3,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NonIndexedContentTitle, {
-            tokens: themeTokens,
+            tokens: nonIndexedContentStyles,
+            media: nonIndexedContentMediaIds,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
               block: true,
               heading: true,
@@ -169,7 +222,8 @@ const TermsAndConditions = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) =
             /*#__PURE__*/
             // eslint-disable-next-line react/no-array-index-key
             (0, _jsxRuntime.jsx)(ListItem, {
-              tokens: themeTokens,
+              tokens: listItemStyles,
+              media: listItemMediaIds,
               children: (0, _utils.renderStructuredContent)(contentItem)
             }, idx))
           })]

package/lib-module/OrderedList/Item.js

@@ -47,11 +47,14 @@ const StyledItemBase = /*#__PURE__*/styled(ItemBase).withConfig({
     counterIncrement: OL_COUNTER_NAME,
     '::before': {
       content: `counter(${OL_COUNTER_NAME})'.'`,
-      display: 'inline-flex',
+      display: 'inline-block',
       color: itemColor || itemTextColor,
       width: itemBulletContainerWidth,
       paddingRight: listGutter,
-      justifyContent: itemBulletTextAlign,
+      textAlign: itemBulletTextAlign,
+      flexShrink: 0,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
       ...applyTextStyles({
         fontWeight: itemFontWeight,
         fontSize: itemFontSize,
@@ -69,7 +72,9 @@ const ItemContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "Item__ItemContent",
   componentId: "components-web__sc-7jzwcq-1"
 })({
-  flex: 1
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 5
 });
 const Item = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
@@ -116,7 +121,9 @@ const Item = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         ...themeTokens,
         children: itemContent
       })]
-    }) : itemContent
+    }) : /*#__PURE__*/_jsx(ItemContent, {
+      children: itemContent
+    })
   });
 });
 Item.displayName = 'OrderedListItem';

package/lib-module/PriceLockup/PriceLockup.js

@@ -12,64 +12,69 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const PriceLockupContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__PriceLockupContainer",
   componentId: "components-web__sc-1x6duay-0"
-})(["display:flex;flex-direction:column;width:fit-content;"]);
+})(["align-items:", ";display:flex;flex-direction:column;width:fit-content;"], _ref => {
+  let {
+    alignItemsText
+  } = _ref;
+  return alignItemsText;
+});
 const PriceContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__PriceContainer",
   componentId: "components-web__sc-1x6duay-1"
-})(["display:flex;margin-bottom:", ";"], _ref => {
+})(["display:flex;margin-bottom:", ";"], _ref2 => {
   let {
     priceMarginBottom
-  } = _ref;
+  } = _ref2;
   return priceMarginBottom;
 });
 const FootnoteContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__FootnoteContainer",
   componentId: "components-web__sc-1x6duay-2"
-})(["display:flex;margin-top:", ";gap:", ";"], _ref2 => {
+})(["display:flex;margin-top:", ";gap:", ";"], _ref3 => {
   let {
     footnoteMarginTop
-  } = _ref2;
+  } = _ref3;
   return footnoteMarginTop;
-}, _ref3 => {
+}, _ref4 => {
   let {
     footnoteGap
-  } = _ref3;
+  } = _ref4;
   return footnoteGap;
 });
 const BottomTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__BottomTextContainer",
   componentId: "components-web__sc-1x6duay-3"
-})(["margin-top:", ";"], _ref4 => {
+})(["margin-top:", ";"], _ref5 => {
   let {
     bottomTextMarginTop
-  } = _ref4;
+  } = _ref5;
   return bottomTextMarginTop;
 });
 const BottomLinksContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__BottomLinksContainer",
   componentId: "components-web__sc-1x6duay-4"
-})(["align-self:center;margin-left:", ";"], _ref5 => {
+})(["align-self:center;margin-left:", ";"], _ref6 => {
   let {
     bottomLinksMarginLeft
-  } = _ref5;
+  } = _ref6;
   return bottomLinksMarginLeft;
 });
 const TopTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__TopTextContainer",
   componentId: "components-web__sc-1x6duay-5"
-})(["margin-bottom:", ";"], _ref6 => {
+})(["margin-bottom:", ";"], _ref7 => {
   let {
     topTextMarginBottom
-  } = _ref6;
+  } = _ref7;
   return topTextMarginBottom;
 });
 const PriceTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__PriceTextContainer",
   componentId: "components-web__sc-1x6duay-6"
-})(["display:flex;flex-direction:", ";"], _ref7 => {
+})(["display:flex;flex-direction:", ";"], _ref8 => {
   let {
     ratePosition
-  } = _ref7;
+  } = _ref8;
   return ratePosition === 'bottom' ? 'column' : 'row';
 });
 const RateContainer = /*#__PURE__*/styled.div.withConfig({
@@ -79,38 +84,38 @@ const RateContainer = /*#__PURE__*/styled.div.withConfig({
 const RateTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__RateTextContainer",
   componentId: "components-web__sc-1x6duay-8"
-})(["align-self:", ";"], _ref8 => {
+})(["align-self:", ";"], _ref9 => {
   let {
     ratePosition
-  } = _ref8;
+  } = _ref9;
   return ratePosition === 'bottom' ? 'flex-start' : 'flex-end';
 });
 const StrikeThroughContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__StrikeThroughContainer",
   componentId: "components-web__sc-1x6duay-9"
-})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref9 => {
+})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref10 => {
   let {
     strikeThroughPosition
-  } = _ref9;
+  } = _ref10;
   return `${strikeThroughPosition}px`;
-}, _ref10 => {
+}, _ref11 => {
   let {
     strikeThroughHeight
-  } = _ref10;
+  } = _ref11;
   return `${strikeThroughHeight}px`;
-}, _ref11 => {
+}, _ref12 => {
   let {
     strikeThroughColor
-  } = _ref11;
+  } = _ref12;
   return strikeThroughColor;
 });
-const selectFootnoteLinkStyles = _ref12 => {
+const selectFootnoteLinkStyles = _ref13 => {
   let {
     footnoteLinkColor,
     footnoteLinkFontName,
     footnoteLinkFontWeight,
     footnoteLinkLineHeight
-  } = _ref12;
+  } = _ref13;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
@@ -118,19 +123,19 @@ const selectFootnoteLinkStyles = _ref12 => {
     lineHeight: footnoteLinkLineHeight
   };
 };
-const selectStrikeThroughTokens = _ref13 => {
+const selectStrikeThroughTokens = _ref14 => {
   let {
     strikeThroughPosition,
     strikeThroughHeight,
     strikeThroughColor
-  } = _ref13;
+  } = _ref14;
   return {
     strikeThroughHeight,
     strikeThroughPosition,
     strikeThroughColor
   };
 };
-const PriceLockup = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
+const PriceLockup = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -147,7 +152,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
     tokens: priceLockupTokens,
     variant = {},
     ...rest
-  } = _ref14;
+  } = _ref15;
   const viewport = useViewport();
   const {
     footnoteMarginTop,
@@ -159,6 +164,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
     fontColor,
     dividerColor,
     footnoteLinkFontSize,
+    alignItemsText,
     ...themeTokens
   } = useThemeTokens('PriceLockup', priceLockupTokens, {
     ...variant,
@@ -252,6 +258,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
   }
   return /*#__PURE__*/_jsxs(PriceLockupContainer, {
     ...selectProps(rest),
+    alignItemsText: alignItemsText,
     ref: ref,
     children: [topText && /*#__PURE__*/_jsx(TopTextContainer, {
       topTextMarginBottom: `${topTextMarginBottom}px`,

package/lib-module/Progress/ProgressBar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getTokensPropType, Progress, selectSystemProps, useThemeTokens, a11yProps, viewProps, variantProp } from '@telus-uds/components-base';
+import { getTokensPropType, Progress, selectSystemProps, useThemeTokens, a11yProps, viewProps, variantProp, applyShadowToken } from '@telus-uds/components-base';
 import styled from 'styled-components';
 
 // Passes React Native-oriented system props through UDS Progress
@@ -16,20 +16,20 @@ const Gradient = /*#__PURE__*/styled.div.attrs({
   componentId: "components-web__sc-1vmzyq5-0"
 })(_ref => {
   let {
-    percentage,
     gradient: {
       angle,
       stops,
       type
-    }
+    },
+    borderRadius,
+    shadow
   } = _ref;
   return {
     height: '100%',
-    // As per the design specs, we need to have the gradient expanding to 100% and being
-    // revealed by bar width, so we need to stretch it beyond the parent (progress element)
-    // to the full length of the progress bar
-    width: `${100 * 100 / percentage}%`,
-    background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`
+    width: '100%',
+    background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`,
+    borderRadius,
+    ...applyShadowToken(shadow)
   };
 });
 
@@ -60,8 +60,7 @@ const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ref: ref,
     ...selectedProps,
     children: themeTokens.gradient && /*#__PURE__*/_jsx(Gradient, {
-      ...themeTokens,
-      percentage: percentage
+      ...themeTokens
     })
   });
 });

package/lib-module/TermsAndConditions/TermsAndConditions.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Box, Divider, selectSystemProps, Typography, useCopy, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
+import { Box, Divider, selectSystemProps, Typography, useCopy, useThemeTokens, useViewport, getTokensPropType, useTheme, useResponsiveThemeTokens, createMediaQueryStyles, StyleSheet } from '@telus-uds/components-base';
 import ExpandCollapse from './ExpandCollapse';
 import OrderedListBase from '../OrderedList/OrderedListBase';
 import { htmlAttrs, media, renderStructuredContent } from '../utils';
@@ -116,9 +116,60 @@ const TermsAndConditions = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   const hasIndexedContent = indexedContent.length > 0;
   const hasNonIndexedContent = nonIndexedContent.length > 0;
   const viewport = useViewport();
-  const themeTokens = useThemeTokens('TermsAndConditions', tokens, variant, {
+  const {
+    themeOptions
+  } = useTheme();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
+  const themeTokens = useTokens('TermsAndConditions', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
+  let listItemStyles;
+  let listItemMediaIds;
+  let nonIndexedContentStyles;
+  let nonIndexedContentMediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const {
+      transformedListItemThemeTokens,
+      transformedNonIndexedContentThemeTokens
+    } = Object.entries(themeTokens).reduce((acc, _ref7) => {
+      let [vp, viewportTokens] = _ref7;
+      acc.transformedListItemThemeTokens[vp] = {
+        marginLeft: viewportTokens.listMarginLeft
+      };
+      acc.transformedNonIndexedContentThemeTokens[vp] = {
+        paddingLeft: viewportTokens.titlePaddingLeft
+      };
+      return acc;
+    }, {
+      transformedListItemThemeTokens: {},
+      transformedNonIndexedContentThemeTokens: {}
+    });
+    const listItemMediaQueryStyles = createMediaQueryStyles(transformedListItemThemeTokens);
+    const nonIndexedContentMediaQueryStyles = createMediaQueryStyles(transformedNonIndexedContentThemeTokens);
+    const {
+      ids,
+      styles
+    } = StyleSheet.create({
+      listItem: {
+        ...themeTokens[viewport],
+        ...listItemMediaQueryStyles
+      },
+      nonIndexedContent: {
+        ...themeTokens[viewport],
+        ...nonIndexedContentMediaQueryStyles
+      }
+    });
+    listItemStyles = styles.listItem;
+    listItemMediaIds = ids.listItem;
+    nonIndexedContentStyles = styles.nonIndexedContent;
+    nonIndexedContentMediaIds = ids.nonIndexedContent;
+  } else {
+    listItemStyles = themeTokens;
+    nonIndexedContentStyles = themeTokens;
+  }
   return /*#__PURE__*/_jsxs("div", {
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(Divider, {
@@ -139,13 +190,15 @@ const TermsAndConditions = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
           /*#__PURE__*/
           // eslint-disable-next-line react/no-array-index-key
           _jsx(ListItem, {
-            tokens: themeTokens,
+            tokens: listItemStyles,
+            media: listItemMediaIds,
             children: renderStructuredContent(contentItem)
           }, idx))
         }), hasNonIndexedContent && /*#__PURE__*/_jsxs(Box, {
           between: 3,
           children: [/*#__PURE__*/_jsx(NonIndexedContentTitle, {
-            tokens: themeTokens,
+            tokens: nonIndexedContentStyles,
+            media: nonIndexedContentMediaIds,
             children: /*#__PURE__*/_jsx(Typography, {
               block: true,
               heading: true,
@@ -163,7 +216,8 @@ const TermsAndConditions = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
             /*#__PURE__*/
             // eslint-disable-next-line react/no-array-index-key
             _jsx(ListItem, {
-              tokens: themeTokens,
+              tokens: listItemStyles,
+              media: listItemMediaIds,
               children: renderStructuredContent(contentItem)
             }, idx))
           })]

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.95.0",
+    "@telus-uds/components-base": "1.96.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.64.0",
+    "@telus-uds/system-theme-tokens": "^2.65.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.41.0"
+  "version": "2.42.0"
 }

package/src/OrderedList/Item.jsx

@@ -47,11 +47,14 @@ const StyledItemBase = styled(ItemBase)(
     counterIncrement: OL_COUNTER_NAME,
     '::before': {
       content: `counter(${OL_COUNTER_NAME})'.'`,
-      display: 'inline-flex',
+      display: 'inline-block',
       color: itemColor || itemTextColor,
       width: itemBulletContainerWidth,
       paddingRight: listGutter,
-      justifyContent: itemBulletTextAlign,
+      textAlign: itemBulletTextAlign,
+      flexShrink: 0,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
       ...applyTextStyles({
         fontWeight: itemFontWeight,
         fontSize: itemFontSize,
@@ -65,7 +68,9 @@ const StyledItemBase = styled(ItemBase)(
 )
 
 const ItemContent = styled.div({
-  flex: 1
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 5
 })
 
 const Item = React.forwardRef(
@@ -96,7 +101,7 @@ const Item = React.forwardRef(
             <ItemContent {...themeTokens}>{itemContent}</ItemContent>
           </StackView>
         ) : (
-          itemContent
+          <ItemContent>{itemContent}</ItemContent>
         )}
       </StyledItemBase>
     )

package/src/PriceLockup/PriceLockup.jsx

@@ -17,6 +17,7 @@ import { htmlAttrs, warn } from '../utils'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const PriceLockupContainer = styled.div`
+  align-items: ${({ alignItemsText }) => alignItemsText};
   display: flex;
   flex-direction: column;
   width: fit-content;
@@ -129,6 +130,7 @@ const PriceLockup = React.forwardRef(
       fontColor,
       dividerColor,
       footnoteLinkFontSize,
+      alignItemsText,
       ...themeTokens
     } = useThemeTokens(
       'PriceLockup',
@@ -234,7 +236,7 @@ const PriceLockup = React.forwardRef(
     }
 
     return (
-      <PriceLockupContainer {...selectProps(rest)} ref={ref}>
+      <PriceLockupContainer {...selectProps(rest)} alignItemsText={alignItemsText} ref={ref}>
         {topText && (
           <TopTextContainer topTextMarginBottom={`${topTextMarginBottom}px`}>
             {renderTypography(topText, typographyTokens.topText)}

package/src/Progress/ProgressBar.jsx

@@ -7,7 +7,8 @@ import {
   useThemeTokens,
   a11yProps,
   viewProps,
-  variantProp
+  variantProp,
+  applyShadowToken
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 
@@ -16,13 +17,12 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const { Bar: ProgressBarBase } = Progress
 const Gradient = styled.div.attrs({ 'data-testid': 'ProgressBar-Gradient' })(
-  ({ percentage, gradient: { angle, stops, type } }) => ({
+  ({ gradient: { angle, stops, type }, borderRadius, shadow }) => ({
     height: '100%',
-    // As per the design specs, we need to have the gradient expanding to 100% and being
-    // revealed by bar width, so we need to stretch it beyond the parent (progress element)
-    // to the full length of the progress bar
-    width: `${(100 * 100) / percentage}%`,
-    background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`
+    width: '100%',
+    background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`,
+    borderRadius,
+    ...applyShadowToken(shadow)
   })
 )
 
@@ -49,7 +49,7 @@ const ProgressBar = React.forwardRef(({ percentage, tokens, variant, ...rest },
       ref={ref}
       {...selectedProps}
     >
-      {themeTokens.gradient && <Gradient {...themeTokens} percentage={percentage} />}
+      {themeTokens.gradient && <Gradient {...themeTokens} />}
     </ProgressBarBase>
   )
 })

package/src/TermsAndConditions/TermsAndConditions.jsx

@@ -9,7 +9,11 @@ import {
   useCopy,
   useThemeTokens,
   useViewport,
-  getTokensPropType
+  getTokensPropType,
+  useTheme,
+  useResponsiveThemeTokens,
+  createMediaQueryStyles,
+  StyleSheet
 } from '@telus-uds/components-base'
 import ExpandCollapse from './ExpandCollapse'
 import OrderedListBase from '../OrderedList/OrderedListBase'
@@ -90,7 +94,65 @@ const TermsAndConditions = React.forwardRef(
     const hasNonIndexedContent = nonIndexedContent.length > 0
 
     const viewport = useViewport()
-    const themeTokens = useThemeTokens('TermsAndConditions', tokens, variant, { viewport })
+    const { themeOptions } = useTheme()
+
+    const { enableMediaQueryStyleSheet } = themeOptions
+
+    const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
+    const themeTokens = useTokens(
+      'TermsAndConditions',
+      tokens,
+      variant,
+      !enableMediaQueryStyleSheet && { viewport }
+    )
+
+    let listItemStyles
+    let listItemMediaIds
+    let nonIndexedContentStyles
+    let nonIndexedContentMediaIds
+
+    if (enableMediaQueryStyleSheet) {
+      const { transformedListItemThemeTokens, transformedNonIndexedContentThemeTokens } =
+        Object.entries(themeTokens).reduce(
+          (acc, [vp, viewportTokens]) => {
+            acc.transformedListItemThemeTokens[vp] = {
+              marginLeft: viewportTokens.listMarginLeft
+            }
+            acc.transformedNonIndexedContentThemeTokens[vp] = {
+              paddingLeft: viewportTokens.titlePaddingLeft
+            }
+            return acc
+          },
+          {
+            transformedListItemThemeTokens: {},
+            transformedNonIndexedContentThemeTokens: {}
+          }
+        )
+
+      const listItemMediaQueryStyles = createMediaQueryStyles(transformedListItemThemeTokens)
+      const nonIndexedContentMediaQueryStyles = createMediaQueryStyles(
+        transformedNonIndexedContentThemeTokens
+      )
+
+      const { ids, styles } = StyleSheet.create({
+        listItem: {
+          ...themeTokens[viewport],
+          ...listItemMediaQueryStyles
+        },
+        nonIndexedContent: {
+          ...themeTokens[viewport],
+          ...nonIndexedContentMediaQueryStyles
+        }
+      })
+
+      listItemStyles = styles.listItem
+      listItemMediaIds = ids.listItem
+      nonIndexedContentStyles = styles.nonIndexedContent
+      nonIndexedContentMediaIds = ids.nonIndexedContent
+    } else {
+      listItemStyles = themeTokens
+      nonIndexedContentStyles = themeTokens
+    }
 
     return (
       <div {...selectProps(rest)}>
@@ -107,7 +169,7 @@ const TermsAndConditions = React.forwardRef(
               <Ordered tokens={themeTokens}>
                 {indexedContent.map((contentItem, idx) => (
                   // eslint-disable-next-line react/no-array-index-key
-                  <ListItem tokens={themeTokens} key={idx}>
+                  <ListItem tokens={listItemStyles} key={idx} media={listItemMediaIds}>
                     {renderStructuredContent(contentItem)}
                   </ListItem>
                 ))}
@@ -115,7 +177,10 @@ const TermsAndConditions = React.forwardRef(
             )}
             {hasNonIndexedContent && (
               <Box between={3}>
-                <NonIndexedContentTitle tokens={themeTokens}>
+                <NonIndexedContentTitle
+                  tokens={nonIndexedContentStyles}
+                  media={nonIndexedContentMediaIds}
+                >
                   <Typography
                     block
                     heading
@@ -132,7 +197,7 @@ const TermsAndConditions = React.forwardRef(
                 <Unordered tokens={themeTokens}>
                   {nonIndexedContent.map((contentItem, idx) => (
                     // eslint-disable-next-line react/no-array-index-key
-                    <ListItem tokens={themeTokens} key={idx}>
+                    <ListItem tokens={listItemStyles} key={idx} media={listItemMediaIds}>
                       {renderStructuredContent(contentItem)}
                     </ListItem>
                   ))}