@telus-uds/components-web 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Thu, 27 Apr 2023 14:32:16 GMT and should not be manually modified.
+This log was last generated on Mon, 01 May 2023 22:02:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.10.0
+
+Mon, 01 May 2023 22:02:12 GMT
+
+### Minor changes
+
+- `Footnote`: Allow `content` prop to take custom JSX, override copy with custom `dictionary` (shahzaibkhalidmalik@outlook.com)
+- Set Item size to micro in Breadcrumbs (wlsdud194@hotmail.com)
+- List Box merged with List changes (akshay.pandey1@telus.com)
+- Added label to Breadcrumb component (wlsdud194@hotmail.com)
+- update snapshots (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.39.0
+- Bump @telus-uds/system-theme-tokens to v2.24.0
+
 ## 1.9.0
 
-Thu, 27 Apr 2023 14:32:16 GMT
+Thu, 27 Apr 2023 14:41:57 GMT
 
 ### Minor changes
 

package/lib/Breadcrumbs/Breadcrumbs.js

@@ -39,7 +39,8 @@ const StyledList = /*#__PURE__*/_styledComponents.default.ol.withConfig({
   listStyle: 'none',
   listStylePosition: 'inside',
   margin: 0,
-  padding: 0
+  padding: 0,
+  alignItems: 'baseline'
 });
 
 const omitProps = _ref => {
@@ -173,7 +174,9 @@ const Breadcrumbs = _ref2 => {
       })
     })
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", { ...selectProps(rest),
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", {
+    "aria-label": "Breadcrumb",
+    ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
       children: items.map(_ref4 => {
         let {
@@ -194,7 +197,9 @@ const Breadcrumbs = _ref2 => {
             itemLinkRouterProps
           },
           reactRouterLinkComponent: linkComponent,
-          variant: variant,
+          variant: { ...variant,
+            size: 'micro'
+          },
           LinkRouter: ItemLinkRouter
         }, breadcrumbName);
       })

package/lib/Footnote/Footnote.js

@@ -228,6 +228,19 @@ const ContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   };
 });
 
+const StyledCustomContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Footnote__StyledCustomContentContainer",
+  componentId: "components-web__sc-1563bo5-8"
+})(_ref11 => {
+  let {
+    color
+  } = _ref11;
+  return {
+    color,
+    fontFamily: 'HelveticaNow400normal'
+  };
+});
+
 const usePrevious = value => {
   const ref = (0, _react.useRef)();
   (0, _react.useEffect)(() => {
@@ -271,6 +284,7 @@ const Footnote = props => {
     isOpen,
     tokens,
     variant = {},
+    dictionary = _dictionary.default,
     ...rest
   } = props;
   const {
@@ -303,7 +317,7 @@ const Footnote = props => {
   const footnoteRef = (0, _react.useRef)(null);
   const headerRef = (0, _react.useRef)(null);
   const bodyRef = (0, _react.useRef)(null);
-  const listRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
   const headingRef = (0, _react.useRef)(null);
   const [data, setData] = (0, _react.useState)({
     content: null,
@@ -314,7 +328,7 @@ const Footnote = props => {
   const [isVisible, setIsVisible] = (0, _react.useState)(false);
   const [isTextVisible, setIsTextVisible] = (0, _react.useState)(true);
   const getCopy = (0, _componentsBase.useCopy)({
-    dictionary: _dictionary.default,
+    dictionary,
     copy
   });
   const prevProps = usePrevious(props);
@@ -345,7 +359,7 @@ const Footnote = props => {
   }, [closeFootnote]);
 
   const saveCurrentHeight = () => {
-    const oldHeight = listRef.current.offsetHeight;
+    const oldHeight = contentRef.current.offsetHeight;
     setBodyHeight(oldHeight);
   };
 
@@ -372,14 +386,14 @@ const Footnote = props => {
         number
       });
 
-      if (bodyHeight !== listRef.current.offsetHeight) {
+      if (bodyHeight !== contentRef.current.offsetHeight) {
         // Set new height
-        setBodyHeight(listRef.current.offsetHeight);
+        setBodyHeight(contentRef.current.offsetHeight);
       } else {
         setIsTextVisible(true);
       }
     } else {
-      setBodyHeight(listRef.current.offsetHeight);
+      setBodyHeight(contentRef.current.offsetHeight);
     }
 
     if (event.propertyName === 'height' && !isTextVisible) {
@@ -448,6 +462,35 @@ const Footnote = props => {
   }, [number, isOpen, prevProps.isOpen, prevProps.number]); // Reset footnote on close
 
   (0, _react.useEffect)(resetFootnote, [isOpen]);
+  const getFootnoteBodyContent = (0, _react.useCallback)(() => {
+    if (!data.number || !data.content) {
+      return null;
+    }
+
+    if ( /*#__PURE__*/_react.default.isValidElement(data.content)) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCustomContentContainer, {
+        ref: contentRef,
+        children: data.content
+      });
+    }
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
+      start: data.number,
+      ref: contentRef,
+      listPaddingLeft: listPaddingLeft,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
+        listItemMarkerFontSize: listItemMarkerFontSize,
+        listItemMarkerLineHeight: listItemMarkerLineHeight,
+        listItemColor: listItemColor,
+        listItemFontSize: listItemFontSize,
+        listItemLineHeight: listItemLineHeight,
+        listItemPaddingLeft: listItemPaddingLeft,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          children: (0, _utils.renderStructuredContent)(data.content)
+        })
+      })
+    });
+  }, [data.content, data.number, listItemColor, listItemFontSize, listItemLineHeight, listItemMarkerFontSize, listItemMarkerLineHeight, listItemPaddingLeft, listPaddingLeft]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Portal, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...selectProps(rest),
       children: [isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalBodyScrollLock, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFootnote, {
@@ -501,22 +544,7 @@ const Footnote = props => {
             maxWidth: theme.contentMaxWidth,
             footnoteBodyBackground: footnoteBodyBackground,
             footnoteBodyPadding: `${footnoteBodyPaddingTop}px ${footnoteBodyPaddingRight}px ${footnoteBodyPaddingBottom}px ${footnoteBodyPaddingLeft}px`,
-            children: data.number && data.content && /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
-              start: data.number,
-              ref: listRef,
-              listPaddingLeft: listPaddingLeft,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
-                listItemMarkerFontSize: listItemMarkerFontSize,
-                listItemMarkerLineHeight: listItemMarkerLineHeight,
-                listItemColor: listItemColor,
-                listItemFontSize: listItemFontSize,
-                listItemLineHeight: listItemLineHeight,
-                listItemPaddingLeft: listItemPaddingLeft,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
-                  children: (0, _utils.renderStructuredContent)(data.content)
-                })
-              })
-            })
+            children: getFootnoteBodyContent()
           })]
         })
       })]
@@ -527,6 +555,13 @@ const Footnote = props => {
 const copyShape = _propTypes.default.shape({
   close: _propTypes.default.string.isRequired,
   heading: _propTypes.default.string.isRequired
+}); // If a language dictionary entry is provided, it must contain every key
+
+
+const dictionaryContentShape = _propTypes.default.shape({
+  a11yLabel: _propTypes.default.string.isRequired,
+  close: _propTypes.default.string.isRequired,
+  heading: _propTypes.default.string.isRequired
 });
 
 Footnote.propTypes = { ...selectedSystemPropTypes,
@@ -534,7 +569,7 @@ Footnote.propTypes = { ...selectedSystemPropTypes,
   /**
    * The content.
    */
-  content: _propTypes.default.string,
+  content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
 
   /**
    * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
@@ -559,7 +594,15 @@ Footnote.propTypes = { ...selectedSystemPropTypes,
    * @param {Object} options Custom options
    * @param {boolean} options.returnFocus Should the `Footnote` return focus on close
    */
-  onClose: _propTypes.default.func.isRequired
+  onClose: _propTypes.default.func.isRequired,
+
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  })
 };
 Footnote.defaultProps = {
   isOpen: false,

package/lib/Toast/Toast.js

@@ -34,12 +34,12 @@ const slideDown = property => function (from, to) {
   return (0, _styledComponents.keyframes)(["0%{", ":", ";}99%{", ":", ";}100%{", ":", ";}"], property, from, property, to, property, end);
 };
 
-const animation = props => (0, _styledComponents.css)(["", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 3.2s forwards;& *{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}& > a svg{animation:", " 1s ease-in-out 3s forwards;}"], slideDown('height')(`${props.animationHeightBefore}px`, `${props.animationHeightAfter}px`, 'auto'), transform('padding-bottom')(`${props.animationPaddingBottomBefore}px`, `${props.animationPaddingBottomAfter}px`), transform('padding-top')(`${props.animationPaddingTopBefore}px`, `${props.animationPaddingTopAfter}px`), transform('background')(props.animationBackgroundColorBefore, props.animationBackgroundColorAfter), transform('color')(props.animationColorBefore, props.animationColorAfter), transform('color')(props.animationDivColorBefore, props.animationDivColorAfter), transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter));
+const animation = props => (0, _styledComponents.css)(["", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 3.2s forwards;& *{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}& > a svg{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}"], slideDown('height')(`${props.animationHeightBefore}px`, `${props.animationHeightAfter}px`, 'auto'), transform('padding-bottom')(`${props.animationPaddingBottomBefore}px`, `${props.animationPaddingBottomAfter}px`), transform('padding-top')(`${props.animationPaddingTopBefore}px`, `${props.animationPaddingTopAfter}px`), transform('background')(props.animationBackgroundColorBefore, props.animationBackgroundColorAfter), transform('color')(props.animationColorBefore, props.animationColorAfter), transform('color')(props.animationDivColorBefore, props.animationDivColorAfter), transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter), transform('color')(props.animationFillColorBefore, props.animationFillColorAfter));
 
 const ToastContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Toast__ToastContainer",
   componentId: "components-web__sc-p78jdh-0"
-})(["display:flex;justify-content:center;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
+})(["display:flex;justify-content:center;align-items:center;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
   let {
     containerBackgroundColor
   } = _ref;
@@ -73,10 +73,17 @@ const Toast = _ref3 => {
     animationBackgroundColorBefore,
     animationBackgroundColorAfter,
     animationColorBefore,
-    animationColorAfter,
-    animationFillColorBefore,
-    animationFillColorAfter
-  } = (0, _componentsBase.useThemeTokens)('Toast', tokens, variant);
+    animationColorAfter
+  } = (0, _componentsBase.useThemeTokens)('Toast', tokens, variant); // inherit ChevronLink tokens for animation colors
+
+  const {
+    color: chevronDefaultColor
+  } = (0, _componentsBase.useThemeTokens)('ChevronLink', {}, {});
+  const {
+    color: chevronInverseColor
+  } = (0, _componentsBase.useThemeTokens)('ChevronLink', {}, {
+    inverse: true
+  });
 
   if (!toast) {
     return null;
@@ -95,8 +102,8 @@ const Toast = _ref3 => {
     animationBackgroundColorAfter: animationBackgroundColorAfter,
     animationColorBefore: animationColorBefore,
     animationColorAfter: animationColorAfter,
-    animationFillColorBefore: animationFillColorBefore,
-    animationFillColorAfter: animationFillColorAfter,
+    animationFillColorBefore: chevronInverseColor,
+    animationFillColorAfter: chevronDefaultColor,
     ...selectProps(rest),
     children: [headline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
       variant: {

package/lib-module/Breadcrumbs/Breadcrumbs.js

@@ -19,7 +19,8 @@ const StyledList = /*#__PURE__*/styled.ol.withConfig({
   listStyle: 'none',
   listStylePosition: 'inside',
   margin: 0,
-  padding: 0
+  padding: 0,
+  alignItems: 'baseline'
 });
 
 const omitProps = _ref => {
@@ -155,7 +156,9 @@ const Breadcrumbs = _ref2 => {
     })
   });
 
-  return /*#__PURE__*/_jsxs("nav", { ...selectProps(rest),
+  return /*#__PURE__*/_jsxs("nav", {
+    "aria-label": "Breadcrumb",
+    ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(StyledList, {
       children: items.map(_ref4 => {
         let {
@@ -176,7 +179,9 @@ const Breadcrumbs = _ref2 => {
             itemLinkRouterProps
           },
           reactRouterLinkComponent: linkComponent,
-          variant: variant,
+          variant: { ...variant,
+            size: 'micro'
+          },
           LinkRouter: ItemLinkRouter
         }, breadcrumbName);
       })

package/lib-module/Footnote/Footnote.js

@@ -5,7 +5,7 @@ import { Icon, Portal, selectSystemProps, Typography, useCopy, useTheme, useResp
 import Close from '../../__fixtures__/icons/Close';
 import OrderedListBase from '../OrderedList/OrderedListBase';
 import { htmlAttrs, media, renderStructuredContent } from '../utils';
-import dictionary from './dictionary';
+import defaultDictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
@@ -199,6 +199,18 @@ const ContentContainer = /*#__PURE__*/styled.div.withConfig({
     width: maxWidth
   };
 });
+const StyledCustomContentContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Footnote__StyledCustomContentContainer",
+  componentId: "components-web__sc-1563bo5-8"
+})(_ref11 => {
+  let {
+    color
+  } = _ref11;
+  return {
+    color,
+    fontFamily: 'HelveticaNow400normal'
+  };
+});
 
 const usePrevious = value => {
   const ref = useRef();
@@ -243,6 +255,7 @@ const Footnote = props => {
     isOpen,
     tokens,
     variant = {},
+    dictionary = defaultDictionary,
     ...rest
   } = props;
   const {
@@ -275,7 +288,7 @@ const Footnote = props => {
   const footnoteRef = useRef(null);
   const headerRef = useRef(null);
   const bodyRef = useRef(null);
-  const listRef = useRef(null);
+  const contentRef = useRef(null);
   const headingRef = useRef(null);
   const [data, setData] = useState({
     content: null,
@@ -317,7 +330,7 @@ const Footnote = props => {
   }, [closeFootnote]);
 
   const saveCurrentHeight = () => {
-    const oldHeight = listRef.current.offsetHeight;
+    const oldHeight = contentRef.current.offsetHeight;
     setBodyHeight(oldHeight);
   };
 
@@ -344,14 +357,14 @@ const Footnote = props => {
         number
       });
 
-      if (bodyHeight !== listRef.current.offsetHeight) {
+      if (bodyHeight !== contentRef.current.offsetHeight) {
         // Set new height
-        setBodyHeight(listRef.current.offsetHeight);
+        setBodyHeight(contentRef.current.offsetHeight);
       } else {
         setIsTextVisible(true);
       }
     } else {
-      setBodyHeight(listRef.current.offsetHeight);
+      setBodyHeight(contentRef.current.offsetHeight);
     }
 
     if (event.propertyName === 'height' && !isTextVisible) {
@@ -420,6 +433,35 @@ const Footnote = props => {
   }, [number, isOpen, prevProps.isOpen, prevProps.number]); // Reset footnote on close
 
   useEffect(resetFootnote, [isOpen]);
+  const getFootnoteBodyContent = useCallback(() => {
+    if (!data.number || !data.content) {
+      return null;
+    }
+
+    if ( /*#__PURE__*/React.isValidElement(data.content)) {
+      return /*#__PURE__*/_jsx(StyledCustomContentContainer, {
+        ref: contentRef,
+        children: data.content
+      });
+    }
+
+    return /*#__PURE__*/_jsx(List, {
+      start: data.number,
+      ref: contentRef,
+      listPaddingLeft: listPaddingLeft,
+      children: /*#__PURE__*/_jsx(ListItem, {
+        listItemMarkerFontSize: listItemMarkerFontSize,
+        listItemMarkerLineHeight: listItemMarkerLineHeight,
+        listItemColor: listItemColor,
+        listItemFontSize: listItemFontSize,
+        listItemLineHeight: listItemLineHeight,
+        listItemPaddingLeft: listItemPaddingLeft,
+        children: /*#__PURE__*/_jsx(Typography, {
+          children: renderStructuredContent(data.content)
+        })
+      })
+    });
+  }, [data.content, data.number, listItemColor, listItemFontSize, listItemLineHeight, listItemMarkerFontSize, listItemMarkerLineHeight, listItemPaddingLeft, listPaddingLeft]);
   return /*#__PURE__*/_jsx(Portal, {
     children: /*#__PURE__*/_jsxs("div", { ...selectProps(rest),
       children: [isOpen && /*#__PURE__*/_jsx(GlobalBodyScrollLock, {}), /*#__PURE__*/_jsx(StyledFootnote, {
@@ -473,22 +515,7 @@ const Footnote = props => {
             maxWidth: theme.contentMaxWidth,
             footnoteBodyBackground: footnoteBodyBackground,
             footnoteBodyPadding: `${footnoteBodyPaddingTop}px ${footnoteBodyPaddingRight}px ${footnoteBodyPaddingBottom}px ${footnoteBodyPaddingLeft}px`,
-            children: data.number && data.content && /*#__PURE__*/_jsx(List, {
-              start: data.number,
-              ref: listRef,
-              listPaddingLeft: listPaddingLeft,
-              children: /*#__PURE__*/_jsx(ListItem, {
-                listItemMarkerFontSize: listItemMarkerFontSize,
-                listItemMarkerLineHeight: listItemMarkerLineHeight,
-                listItemColor: listItemColor,
-                listItemFontSize: listItemFontSize,
-                listItemLineHeight: listItemLineHeight,
-                listItemPaddingLeft: listItemPaddingLeft,
-                children: /*#__PURE__*/_jsx(Typography, {
-                  children: renderStructuredContent(data.content)
-                })
-              })
-            })
+            children: getFootnoteBodyContent()
           })]
         })
       })]
@@ -499,13 +526,19 @@ const Footnote = props => {
 const copyShape = PropTypes.shape({
   close: PropTypes.string.isRequired,
   heading: PropTypes.string.isRequired
+}); // If a language dictionary entry is provided, it must contain every key
+
+const dictionaryContentShape = PropTypes.shape({
+  a11yLabel: PropTypes.string.isRequired,
+  close: PropTypes.string.isRequired,
+  heading: PropTypes.string.isRequired
 });
 Footnote.propTypes = { ...selectedSystemPropTypes,
 
   /**
    * The content.
    */
-  content: PropTypes.string,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 
   /**
    * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
@@ -530,7 +563,15 @@ Footnote.propTypes = { ...selectedSystemPropTypes,
    * @param {Object} options Custom options
    * @param {boolean} options.returnFocus Should the `Footnote` return focus on close
    */
-  onClose: PropTypes.func.isRequired
+  onClose: PropTypes.func.isRequired,
+
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  })
 };
 Footnote.defaultProps = {
   isOpen: false,

package/lib-module/Toast/Toast.js

@@ -16,12 +16,12 @@ const slideDown = property => function (from, to) {
   return keyframes(["0%{", ":", ";}99%{", ":", ";}100%{", ":", ";}"], property, from, property, to, property, end);
 };
 
-const animation = props => css(["", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 3.2s forwards;& *{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}& > a svg{animation:", " 1s ease-in-out 3s forwards;}"], slideDown('height')(`${props.animationHeightBefore}px`, `${props.animationHeightAfter}px`, 'auto'), transform('padding-bottom')(`${props.animationPaddingBottomBefore}px`, `${props.animationPaddingBottomAfter}px`), transform('padding-top')(`${props.animationPaddingTopBefore}px`, `${props.animationPaddingTopAfter}px`), transform('background')(props.animationBackgroundColorBefore, props.animationBackgroundColorAfter), transform('color')(props.animationColorBefore, props.animationColorAfter), transform('color')(props.animationDivColorBefore, props.animationDivColorAfter), transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter));
+const animation = props => css(["", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 3.2s forwards;& *{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}& > a svg{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}"], slideDown('height')(`${props.animationHeightBefore}px`, `${props.animationHeightAfter}px`, 'auto'), transform('padding-bottom')(`${props.animationPaddingBottomBefore}px`, `${props.animationPaddingBottomAfter}px`), transform('padding-top')(`${props.animationPaddingTopBefore}px`, `${props.animationPaddingTopAfter}px`), transform('background')(props.animationBackgroundColorBefore, props.animationBackgroundColorAfter), transform('color')(props.animationColorBefore, props.animationColorAfter), transform('color')(props.animationDivColorBefore, props.animationDivColorAfter), transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter), transform('color')(props.animationFillColorBefore, props.animationFillColorAfter));
 
 const ToastContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Toast__ToastContainer",
   componentId: "components-web__sc-p78jdh-0"
-})(["display:flex;justify-content:center;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
+})(["display:flex;justify-content:center;align-items:center;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
   let {
     containerBackgroundColor
   } = _ref;
@@ -55,10 +55,17 @@ const Toast = _ref3 => {
     animationBackgroundColorBefore,
     animationBackgroundColorAfter,
     animationColorBefore,
-    animationColorAfter,
-    animationFillColorBefore,
-    animationFillColorAfter
-  } = useThemeTokens('Toast', tokens, variant);
+    animationColorAfter
+  } = useThemeTokens('Toast', tokens, variant); // inherit ChevronLink tokens for animation colors
+
+  const {
+    color: chevronDefaultColor
+  } = useThemeTokens('ChevronLink', {}, {});
+  const {
+    color: chevronInverseColor
+  } = useThemeTokens('ChevronLink', {}, {
+    inverse: true
+  });
 
   if (!toast) {
     return null;
@@ -77,8 +84,8 @@ const Toast = _ref3 => {
     animationBackgroundColorAfter: animationBackgroundColorAfter,
     animationColorBefore: animationColorBefore,
     animationColorAfter: animationColorAfter,
-    animationFillColorBefore: animationFillColorBefore,
-    animationFillColorAfter: animationFillColorAfter,
+    animationFillColorBefore: chevronInverseColor,
+    animationFillColorAfter: chevronDefaultColor,
     ...selectProps(rest),
     children: [headline && /*#__PURE__*/_jsx(Typography, {
       variant: {

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.38.0",
+    "@telus-uds/components-base": "1.39.0",
     "@telus-uds/system-constants": "^1.2.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.23.0",
+    "@telus-uds/system-theme-tokens": "^2.24.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0"
@@ -61,5 +61,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "1.9.0"
+  "version": "1.10.0"
 }

package/src/Breadcrumbs/Breadcrumbs.jsx

@@ -22,7 +22,8 @@ const StyledList = styled.ol({
   listStyle: 'none',
   listStylePosition: 'inside',
   margin: 0,
-  padding: 0
+  padding: 0,
+  alignItems: 'baseline'
 })
 
 const omitProps = ({
@@ -149,7 +150,7 @@ const Breadcrumbs = ({
   )
 
   return (
-    <nav {...selectProps(rest)}>
+    <nav aria-label="Breadcrumb" {...selectProps(rest)}>
       <StyledList>
         {items.map(
           ({
@@ -169,7 +170,7 @@ const Breadcrumbs = ({
               key={href}
               linkRouterProps={{ ...linkRouterProps, itemLinkRouterProps }}
               reactRouterLinkComponent={linkComponent}
-              variant={variant}
+              variant={{ ...variant, size: 'micro' }}
               LinkRouter={ItemLinkRouter}
             >
               {breadcrumbName}

package/src/Footnote/Footnote.jsx

@@ -15,7 +15,7 @@ import {
 import Close from '../../__fixtures__/icons/Close'
 import OrderedListBase from '../OrderedList/OrderedListBase'
 import { htmlAttrs, media, renderStructuredContent } from '../utils'
-import dictionary from './dictionary'
+import defaultDictionary from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
@@ -154,6 +154,10 @@ const ContentContainer = styled.div(
   })
 )
 
+const StyledCustomContentContainer = styled.div(({ color }) => ({
+  color,
+  fontFamily: 'HelveticaNow400normal'
+}))
 const usePrevious = (value) => {
   const ref = useRef()
   useEffect(() => {
@@ -184,7 +188,17 @@ const usePrevious = (value) => {
  * - When `Footnote` is closed, focus must return to the initiating element
  */
 const Footnote = (props) => {
-  const { copy, number, content, onClose, isOpen, tokens, variant = {}, ...rest } = props
+  const {
+    copy,
+    number,
+    content,
+    onClose,
+    isOpen,
+    tokens,
+    variant = {},
+    dictionary = defaultDictionary,
+    ...rest
+  } = props
   const {
     footnoteBackground,
     footnoteBorderTopSizeMd,
@@ -216,7 +230,7 @@ const Footnote = (props) => {
   const footnoteRef = useRef(null)
   const headerRef = useRef(null)
   const bodyRef = useRef(null)
-  const listRef = useRef(null)
+  const contentRef = useRef(null)
   const headingRef = useRef(null)
   const [data, setData] = useState({ content: null, number: null })
   const [headerHeight, setHeaderHeight] = useState('auto')
@@ -265,7 +279,7 @@ const Footnote = (props) => {
   )
 
   const saveCurrentHeight = () => {
-    const oldHeight = listRef.current.offsetHeight
+    const oldHeight = contentRef.current.offsetHeight
     setBodyHeight(oldHeight)
   }
 
@@ -287,14 +301,14 @@ const Footnote = (props) => {
     event.persist()
     if (event.propertyName === 'opacity' && !isTextVisible) {
       setData({ content, number })
-      if (bodyHeight !== listRef.current.offsetHeight) {
+      if (bodyHeight !== contentRef.current.offsetHeight) {
         // Set new height
-        setBodyHeight(listRef.current.offsetHeight)
+        setBodyHeight(contentRef.current.offsetHeight)
       } else {
         setIsTextVisible(true)
       }
     } else {
-      setBodyHeight(listRef.current.offsetHeight)
+      setBodyHeight(contentRef.current.offsetHeight)
     }
 
     if (event.propertyName === 'height' && !isTextVisible) {
@@ -359,6 +373,41 @@ const Footnote = (props) => {
   // Reset footnote on close
   useEffect(resetFootnote, [isOpen])
 
+  const getFootnoteBodyContent = useCallback(() => {
+    if (!data.number || !data.content) {
+      return null
+    }
+    if (React.isValidElement(data.content)) {
+      return (
+        <StyledCustomContentContainer ref={contentRef}>{data.content}</StyledCustomContentContainer>
+      )
+    }
+    return (
+      <List start={data.number} ref={contentRef} listPaddingLeft={listPaddingLeft}>
+        <ListItem
+          listItemMarkerFontSize={listItemMarkerFontSize}
+          listItemMarkerLineHeight={listItemMarkerLineHeight}
+          listItemColor={listItemColor}
+          listItemFontSize={listItemFontSize}
+          listItemLineHeight={listItemLineHeight}
+          listItemPaddingLeft={listItemPaddingLeft}
+        >
+          <Typography>{renderStructuredContent(data.content)}</Typography>
+        </ListItem>
+      </List>
+    )
+  }, [
+    data.content,
+    data.number,
+    listItemColor,
+    listItemFontSize,
+    listItemLineHeight,
+    listItemMarkerFontSize,
+    listItemMarkerLineHeight,
+    listItemPaddingLeft,
+    listPaddingLeft
+  ])
+
   return (
     <Portal>
       <div {...selectProps(rest)}>
@@ -402,20 +451,7 @@ const Footnote = (props) => {
               footnoteBodyBackground={footnoteBodyBackground}
               footnoteBodyPadding={`${footnoteBodyPaddingTop}px ${footnoteBodyPaddingRight}px ${footnoteBodyPaddingBottom}px ${footnoteBodyPaddingLeft}px`}
             >
-              {data.number && data.content && (
-                <List start={data.number} ref={listRef} listPaddingLeft={listPaddingLeft}>
-                  <ListItem
-                    listItemMarkerFontSize={listItemMarkerFontSize}
-                    listItemMarkerLineHeight={listItemMarkerLineHeight}
-                    listItemColor={listItemColor}
-                    listItemFontSize={listItemFontSize}
-                    listItemLineHeight={listItemLineHeight}
-                    listItemPaddingLeft={listItemPaddingLeft}
-                  >
-                    <Typography>{renderStructuredContent(data.content)}</Typography>
-                  </ListItem>
-                </List>
-              )}
+              {getFootnoteBodyContent()}
             </StyledFootnoteBody>
           </ContentContainer>
         </StyledFootnote>
@@ -429,12 +465,19 @@ const copyShape = PropTypes.shape({
   heading: PropTypes.string.isRequired
 })
 
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = PropTypes.shape({
+  a11yLabel: PropTypes.string.isRequired,
+  close: PropTypes.string.isRequired,
+  heading: PropTypes.string.isRequired
+})
+
 Footnote.propTypes = {
   ...selectedSystemPropTypes,
   /**
    * The content.
    */
-  content: PropTypes.string,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   /**
    * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
    * To provide your own, pass a JSON object with the keys `heading` and `close`.
@@ -455,7 +498,14 @@ Footnote.propTypes = {
    * @param {Object} options Custom options
    * @param {boolean} options.returnFocus Should the `Footnote` return focus on close
    */
-  onClose: PropTypes.func.isRequired
+  onClose: PropTypes.func.isRequired,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  })
 }
 
 Footnote.defaultProps = {

package/src/Toast/Toast.jsx

@@ -67,11 +67,16 @@ const animation = (props) => css`
     animation: ${transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter)}
       1s ease-in-out 3s forwards;
   }
+  & > a div {
+    animation: ${transform('color')(props.animationFillColorBefore, props.animationFillColorAfter)}
+      1s ease-in-out 3s forwards;
+  }
 `
 
 const ToastContainer = styled.div`
   display: flex;
   justify-content: center;
+  align-items: center;
   background: ${({ containerBackgroundColor }) => containerBackgroundColor};
   gap: ${({ containerGap }) => containerGap};
   height: 0;
@@ -92,11 +97,13 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
     animationBackgroundColorBefore,
     animationBackgroundColorAfter,
     animationColorBefore,
-    animationColorAfter,
-    animationFillColorBefore,
-    animationFillColorAfter
+    animationColorAfter
   } = useThemeTokens('Toast', tokens, variant)
 
+  // inherit ChevronLink tokens for animation colors
+  const { color: chevronDefaultColor } = useThemeTokens('ChevronLink', {}, {})
+  const { color: chevronInverseColor } = useThemeTokens('ChevronLink', {}, { inverse: true })
+
   if (!toast) {
     return null
   }
@@ -115,8 +122,8 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
       animationBackgroundColorAfter={animationBackgroundColorAfter}
       animationColorBefore={animationColorBefore}
       animationColorAfter={animationColorAfter}
-      animationFillColorBefore={animationFillColorBefore}
-      animationFillColorAfter={animationFillColorAfter}
+      animationFillColorBefore={chevronInverseColor}
+      animationFillColorAfter={chevronDefaultColor}
       {...selectProps(rest)}
     >
       {headline && <Typography variant={{ bold: true, inverse: true }}>{headline}</Typography>}