@telus-uds/components-web 2.41.0 → 2.43.0

package/CHANGELOG.md

@@ -1,12 +1,46 @@
 # 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 Thu, 31 Oct 2024 05:02:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.43.0
+
+Thu, 31 Oct 2024 05:02:44 GMT
+
+### Minor changes
+
+- `Breadcrumbs`: add expander item on xs viewport (guillermo.peitzner@telus.com)
+- `Modal`: Enable `footerTopWidth` token for `Modal` component (jaime.tuyuc@telus.com)
+- `Types`: Export BaseProviderProps and add FileUpload types (6854874+kyletsang@users.noreply.github.com)
+- Bump @telus-uds/components-base to v1.97.0
+- Bump @telus-uds/system-theme-tokens to v2.66.0
+
+### Patches
+
+- `DatePicker`: calendar misalignment and static overlay behavior fixed when the component is inside a modal (35577399+JoshHC@users.noreply.github.com)
+- `Table`: added null check for container during resizing (kristina.kirpichnikova@telus.com)
+
+## 2.42.0
+
+Sat, 12 Oct 2024 00:40:49 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/Breadcrumbs/Breadcrumbs.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _reactHelmetAsync = require("react-helmet-async");
+var _lodash = require("lodash");
 var _componentsBase = require("@telus-uds/components-base");
 var _utils = require("../utils");
 var _Item = _interopRequireDefault(require("./Item/Item"));
@@ -79,10 +80,11 @@ const getItems = (items, params, concatenatePaths) => {
     } = item;
     return {
       breadcrumbName,
-      href,
+      href: item.isExpander ? '#' : href,
       current: isLast,
       LinkRouter,
       linkRouterProps,
+      onPress: item.onPress,
       ...omitProps(selectProps(item))
     };
   });
@@ -97,6 +99,7 @@ const getStructuredData = (items, baseUrl) => {
     }
   }));
 };
+const MAX_ITEMS_ON_XS_VIEWPORT = 4;
 
 /**
  * Display a hierarchy of links, commonly used for navigation.
@@ -138,7 +141,33 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       ...itemRest
     };
   }) : routes.filter(route => route.path && route.breadcrumbName);
-  const items = getItems(activeRoutes, params, !children);
+  const [optionsHidden, setOptionsHidden] = _react.default.useState(false);
+  const [itemsToBeRendered, setItemsToBeRendered] = _react.default.useState([]);
+  const viewport = (0, _componentsBase.useViewport)();
+  _react.default.useEffect(() => {
+    if (optionsHidden) {
+      if (viewport !== 'xs' && !(0, _lodash.isEqual)(itemsToBeRendered, activeRoutes)) {
+        setItemsToBeRendered(activeRoutes);
+      }
+      return;
+    }
+    if (viewport === 'xs' && activeRoutes.length >= MAX_ITEMS_ON_XS_VIEWPORT) {
+      const newItems = [...activeRoutes.slice(0, 2), {
+        path: '#',
+        breadcrumbName: '...',
+        onPress: event => {
+          event.preventDefault();
+          setItemsToBeRendered(activeRoutes);
+        },
+        isExpander: true
+      }, activeRoutes[activeRoutes.length - 1]];
+      setItemsToBeRendered(newItems);
+      setOptionsHidden(true);
+    } else if (!(0, _lodash.isEqual)(itemsToBeRendered, activeRoutes)) {
+      setItemsToBeRendered(activeRoutes);
+    }
+  }, [viewport, activeRoutes, optionsHidden, itemsToBeRendered]);
+  const items = getItems(itemsToBeRendered, params, !children);
   const themeTokens = (0, _componentsBase.useThemeTokens)('Breadcrumbs', tokens, variant);
   const metadata = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHelmetAsync.HelmetProvider, {
     context: helmetContext,
@@ -168,6 +197,7 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           breadcrumbName,
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps,
+          onPress,
           ...itemRest
         } = _ref4;
         return /*#__PURE__*/(0, _react.createElement)(_Item.default, {
@@ -184,7 +214,8 @@ const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
             ...variant,
             size: 'micro'
           },
-          LinkRouter: ItemLinkRouter
+          LinkRouter: ItemLinkRouter,
+          onPress: onPress
         }, breadcrumbName);
       })
     }), metadata]

package/lib/Breadcrumbs/Item/Item.js

@@ -86,6 +86,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     // `light` variant (shared with the `Link` component) is default by design
     LinkRouter,
     linkRouterProps,
+    onPress,
     ...rest
   } = _ref8;
   const {
@@ -132,6 +133,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
         LinkRouter: LinkRouter,
         linkRouterProps: linkRouterProps,
         variant: variant,
+        onPress: onPress,
         children: children
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
         iconPadding: iconPadding,
@@ -169,7 +171,11 @@ Item.propTypes = {
    */
   variant: _propTypes.default.shape({
     inverse: _propTypes.default.bool
-  })
+  }),
+  /**
+   * Function to be called when the Item is clicked.
+   */
+  onPress: _propTypes.default.func
 };
 var _default = Item;
 exports.default = _default;

package/lib/DatePicker/DatePicker.js

@@ -124,25 +124,39 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     left: 0,
     top: 0
   });
+  const datePickerRef = _react.default.useRef(null);
   (0, _componentsBase.useSafeLayoutEffect)(() => {
-    const updateDimensions = () => {
-      if (inline || !textInputRef.current) return;
+    const updateDatePickerPosition = () => {
+      if (inline || !(textInputRef !== null && textInputRef !== void 0 && textInputRef.current)) return;
       const {
         left,
         top
       } = textInputRef.current.getBoundingClientRect();
       const inputTop = top + window.scrollY;
+      const inputLeft = left + window.scrollX;
       setDatePickerPosition({
-        left,
-        top: inputTop + textInputRef.current.offsetHeight
+        top: inputTop + textInputRef.current.offsetHeight,
+        left: inputLeft
       });
     };
-    const throttledUpdateDimensions = (0, _lodash.throttle)(updateDimensions, 100, {
+    const throttledUpdate = (0, _lodash.throttle)(updateDatePickerPosition, 100, {
       leading: false
     });
-    throttledUpdateDimensions();
-    window.addEventListener('resize', throttledUpdateDimensions);
-    return () => window.removeEventListener('resize', throttledUpdateDimensions);
+
+    // Initial call to set the position
+    updateDatePickerPosition();
+
+    // Register event listeners
+    window.addEventListener('resize', throttledUpdate);
+    window.addEventListener('scroll', updateDatePickerPosition, {
+      capture: true
+    });
+    return () => {
+      window.removeEventListener('resize', throttledUpdate);
+      window.removeEventListener('scroll', updateDatePickerPosition, {
+        capture: true
+      });
+    };
   }, []);
   const [isFocused, setIsFocused] = _react.default.useState(false);
   const [isClickedInside, setIsClickedInside] = _react.default.useState(false);
@@ -369,6 +383,7 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PortalPositionedContainer, {
             top: datePickerPosition.top,
             left: datePickerPosition.left,
+            ref: datePickerRef,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarContainer.default, {
               ...selectProps(rest),
               daySize: daySize,

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/Table/Table.js

@@ -66,8 +66,9 @@ const Table = _ref2 => {
   const [tableWidth, setTableWidth] = _react.default.useState(0);
   (0, _componentsBase.useSafeLayoutEffect)(() => {
     const updateDimensions = () => {
-      const containerClientWidth = containerRef.current.clientWidth;
-      const responsiveTableWidth = fullWidth ? containerClientWidth : tableRef.current.clientWidth;
+      var _containerRef$current, _tableRef$current;
+      const containerClientWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientWidth;
+      const responsiveTableWidth = fullWidth ? containerClientWidth : (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.clientWidth;
       setContainerWidth(containerClientWidth);
       setTableWidth(responsiveTableWidth);
     };

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/Breadcrumbs/Breadcrumbs.js

@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import { componentPropType, selectSystemProps, unpackFragment, withLinkRouter, getTokensPropType, useThemeTokens } from '@telus-uds/components-base';
+import { isEqual } from 'lodash';
+import { componentPropType, selectSystemProps, unpackFragment, withLinkRouter, getTokensPropType, useThemeTokens, useViewport } from '@telus-uds/components-base';
 import { htmlAttrs } from '../utils';
 import Item from './Item/Item';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -72,10 +73,11 @@ const getItems = (items, params, concatenatePaths) => {
     } = item;
     return {
       breadcrumbName,
-      href,
+      href: item.isExpander ? '#' : href,
       current: isLast,
       LinkRouter,
       linkRouterProps,
+      onPress: item.onPress,
       ...omitProps(selectProps(item))
     };
   });
@@ -90,6 +92,7 @@ const getStructuredData = (items, baseUrl) => {
     }
   }));
 };
+const MAX_ITEMS_ON_XS_VIEWPORT = 4;
 
 /**
  * Display a hierarchy of links, commonly used for navigation.
@@ -131,7 +134,33 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       ...itemRest
     };
   }) : routes.filter(route => route.path && route.breadcrumbName);
-  const items = getItems(activeRoutes, params, !children);
+  const [optionsHidden, setOptionsHidden] = React.useState(false);
+  const [itemsToBeRendered, setItemsToBeRendered] = React.useState([]);
+  const viewport = useViewport();
+  React.useEffect(() => {
+    if (optionsHidden) {
+      if (viewport !== 'xs' && !isEqual(itemsToBeRendered, activeRoutes)) {
+        setItemsToBeRendered(activeRoutes);
+      }
+      return;
+    }
+    if (viewport === 'xs' && activeRoutes.length >= MAX_ITEMS_ON_XS_VIEWPORT) {
+      const newItems = [...activeRoutes.slice(0, 2), {
+        path: '#',
+        breadcrumbName: '...',
+        onPress: event => {
+          event.preventDefault();
+          setItemsToBeRendered(activeRoutes);
+        },
+        isExpander: true
+      }, activeRoutes[activeRoutes.length - 1]];
+      setItemsToBeRendered(newItems);
+      setOptionsHidden(true);
+    } else if (!isEqual(itemsToBeRendered, activeRoutes)) {
+      setItemsToBeRendered(activeRoutes);
+    }
+  }, [viewport, activeRoutes, optionsHidden, itemsToBeRendered]);
+  const items = getItems(itemsToBeRendered, params, !children);
   const themeTokens = useThemeTokens('Breadcrumbs', tokens, variant);
   const metadata = /*#__PURE__*/_jsx(HelmetProvider, {
     context: helmetContext,
@@ -161,6 +190,7 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           breadcrumbName,
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps,
+          onPress,
           ...itemRest
         } = _ref4;
         return /*#__PURE__*/_createElement(Item, {
@@ -177,7 +207,8 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
             ...variant,
             size: 'micro'
           },
-          LinkRouter: ItemLinkRouter
+          LinkRouter: ItemLinkRouter,
+          onPress: onPress
         }, breadcrumbName);
       })
     }), metadata]