@telus-uds/components-web 2.8.1 → 2.9.0

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 14 Jun 2023 19:30:33 GMT and should not be manually modified.
+This log was last generated on Fri, 16 Jun 2023 21:05:00 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.9.0
+
+Fri, 16 Jun 2023 21:05:00 GMT
+
+### Minor changes
+
+- refactored Countdown to take a borderColor for feature variant (kyle.king2@telus.com)
+- Toast component modified due to multibrand standardization, new tokens and validations added (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v1.51.0
+- Bump @telus-uds/system-theme-tokens to v2.33.0
+
+### Patches
+
+- remove secondary color from typography in preview card (mauricio.batresmontejo@telus.com)
+
 ## 2.8.1
 
-Wed, 14 Jun 2023 19:30:33 GMT
+Wed, 14 Jun 2023 19:33:52 GMT
 
 ### Patches
 

package/component-docs.json

@@ -8429,6 +8429,17 @@
           "required": false,
           "description": "The options a user may select."
         },
+        "maxHeight": {
+          "defaultValue": {
+            "value": "false",
+            "computed": false
+          },
+          "type": {
+            "name": "bool"
+          },
+          "required": false,
+          "description": "If provided sets maxHeight to be active"
+        },
         "copy": {
           "defaultValue": {
             "value": "'en'",
@@ -9374,8 +9385,12 @@
                 "contentDirection": "direction",
                 "contentSpace": "integer",
                 "contentAlignItems": "flexAlign",
+                "gap": "size",
                 "textAlign": "textAlign",
-                "outerBorderColor": "color"
+                "outerBorderColor": "color",
+                "fontWeight": "fontWeight",
+                "fontName": "fontName",
+                "fontSize": "fontSize"
               }
             },
             "required": false,
@@ -11677,7 +11692,7 @@
         },
         "dictionary": {
           "defaultValue": {
-            "value": "{\n  en: {\n    stepLabel: 'Step %{stepNumber}',\n    stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'\n  },\n  fr: {\n    stepLabel: 'Étape %{stepNumber}',\n    stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'\n  }\n}",
+            "value": "{\n  en: {\n    1: {\n      stepLabel: 'Step %{stepNumber}',\n      stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'\n    },\n    2: {\n      stepLabel: '%{stepNumber}.',\n      stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'\n    },\n    3: {\n      stepLabel: 'Step %{stepNumber}',\n      stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'\n    }\n  },\n  fr: {\n    1: {\n      stepLabel: 'Étape %{stepNumber}',\n      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'\n    },\n    2: {\n      stepLabel: '%{stepNumber}.',\n      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'\n    },\n    3: {\n      stepLabel: 'Étape %{stepNumber}',\n      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'\n    }\n  }\n}",
             "computed": false
           },
           "type": {
@@ -11758,7 +11773,13 @@
               "labelPaddingRight": "size",
               "showStepLabel": "show",
               "showStepName": "show",
-              "showStepTrackerLabel": "show"
+              "showStepTrackerLabel": "show",
+              "textStepTrackerLabel": "integer",
+              "stepLabelColor": "color",
+              "stepLabelFontSize": "fontSize",
+              "stepLabelFontWeight": "fontWeight",
+              "stepLabelFontName": "fontName",
+              "stepLabelLineHeight": "lineHeight"
             }
           },
           "required": false,

package/lib/Countdown/Countdown.js

@@ -49,12 +49,15 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
     themeTokens,
     gradient
   } = _ref;
-  return { ...(large || feature && {
+  return { ...(large || feature ? {
       display: 'flex',
       flex: 0
-    }),
+    } : {}),
     ...(feature && {
       borderRadius: themeTokens.containerBorderRadius,
+      borderColor: themeTokens.containerBorderColor,
+      borderStyle: 'solid',
+      borderWidth: `${themeTokens.containerBorderWidth}px`,
       justifyContent: 'center',
       paddingBottom: `${themeTokens.containerPaddingBottomTop}px`,
       paddingLeft: `${themeTokens.containerPaddingLeftRight}px`,
@@ -62,38 +65,44 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
       paddingTop: `${themeTokens.containerPaddingBottomTop}px`,
       width: 'fit-content'
     }),
-    ...(feature && !inverse && {
-      background: `linear-gradient(#fff 0 0) padding-box, ${gradient} border-box`,
-      border: `${themeTokens.containerInverseBorder}px solid transparent`
-    }),
-    ...(feature && inverse && {
-      border: `${themeTokens.containerInverseBorder}px solid ${themeTokens.inverseBorderColor}`
+    ...(feature && !inverse && gradient && {
+      background: `linear-gradient(#fff 0 0) padding-box, ${gradient} border-box`
     })
   };
 });
 
 const getLabelTokens = themeTokens => ({
   color: themeTokens.labelBorderColor,
-  fontWeight: themeTokens.textTimerFontWeight,
-  fontSize: `${themeTokens.labelFontSize}`,
-  lineHeight: `${themeTokens.labelLineHeight}`
+  fontSize: themeTokens.labelFontSize,
+  fontWeight: themeTokens.labelFontWeight,
+  lineHeight: themeTokens.labelLineHeight
 });
 
-const getMainTextTokens = themeTokens => ({
-  color: themeTokens.labelBorderColor,
-  fontWeight: themeTokens.textTimerFontWeight,
-  fontSize: themeTokens.textFontSize,
-  lineHeight: themeTokens.textLineHeight
-});
+const getMainTextTokens = _ref2 => {
+  let {
+    labelBorderColor,
+    textTimerFontWeight,
+    textFontSize,
+    textLineHeight,
+    textTimerFontName
+  } = _ref2;
+  return {
+    color: labelBorderColor,
+    lineHeight: textLineHeight,
+    fontWeight: textTimerFontWeight,
+    fontSize: textFontSize,
+    fontName: textTimerFontName
+  };
+};
 
-const Countdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const Countdown = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     copy = 'en',
     targetTime,
     tokens,
     variant = {},
     ...rest
-  } = _ref2;
+  } = _ref3;
   const [days, hours, minutes, seconds] = (0, _useCountdown.default)(targetTime);
   const viewport = (0, _componentsBase.useViewport)();
   const {
@@ -118,13 +127,13 @@ const Countdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   // StackView-based subcontainer adds a 1-step space on the each side of the divider
   (0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
     direction: "row",
-    space: (feature || large) && viewport !== _systemConstants.viewports.xs ? 7 : 2
+    space: (feature || large) && viewport !== _systemConstants.viewports.xs ? 4 : 1
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
     tokens: mainTextTokens,
     children: ":"
   });
   const labelTokens = getLabelTokens(themeTokens);
-  const commonProps = {
+  const segmentProps = {
     copy,
     labelTokens,
     numberTokens: mainTextTokens,
@@ -148,21 +157,21 @@ const Countdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
           labelKey: "day",
           number: days,
           segmentWidth: String(days).length,
-          ...commonProps
+          ...segmentProps
         }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Segment.default, {
           labelKey: "hour",
           number: hours,
-          ...commonProps,
+          ...segmentProps,
           ...(0, _componentsBase.applyTextStyles)(themeTokens)
         }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Segment.default, {
           labelKey: "minute",
           number: minutes,
-          ...commonProps,
+          ...segmentProps,
           ...(0, _componentsBase.applyTextStyles)(themeTokens)
         }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Segment.default, {
           labelKey: "second",
           number: seconds,
-          ...commonProps,
+          ...segmentProps,
           ...(0, _componentsBase.applyTextStyles)(themeTokens)
         })]
       })

package/lib/Countdown/Segment.js

@@ -23,6 +23,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// !TODO: put this back
 // Pads with zeros on the left if it's a single digit number
 const pad = function (number) {
   let segmentWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
@@ -44,6 +45,7 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
     justifyContent: 'space-evenly',
     display: 'inline-flex',
     ...(feature && {
+      // This is required because when the numbers for Countdown change, the character widths will change and thereby effecting the container demensions.
       width: `${segmentFontSize * _constants.SEGMENT_WIDTH_TO_FONT_SIZE_RATIO * segmentWidth}px`,
       display: 'flex'
     })

package/lib/Countdown/constants.js

@@ -8,7 +8,7 @@ const DEFAULT_FONT_SIZE = 16;
 exports.DEFAULT_FONT_SIZE = DEFAULT_FONT_SIZE;
 const LARGE_FONT_SIZE = 64;
 exports.LARGE_FONT_SIZE = LARGE_FONT_SIZE;
-const SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = 0.8;
-exports.SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = SEGMENT_WIDTH_TO_FONT_SIZE_RATIO;
 const XS_FONT_SIZE = 28;
-exports.XS_FONT_SIZE = XS_FONT_SIZE;
+exports.XS_FONT_SIZE = XS_FONT_SIZE;
+const SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = 0.8;
+exports.SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = SEGMENT_WIDTH_TO_FONT_SIZE_RATIO;

package/lib/Footnote/Footnote.js

@@ -198,6 +198,7 @@ const CloseButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
   let {
     closeButtonBorder,
     closeButtonHeight,
+    closeButtonBackgroundColor,
     closeButtonMargin,
     closeButtonWidth
   } = _ref9;
@@ -207,7 +208,7 @@ const CloseButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
     cursor: 'pointer',
     display: 'flex',
     justifyContent: 'center',
-    backgroundColor: 'white',
+    backgroundColor: closeButtonBackgroundColor,
     border: closeButtonBorder,
     height: closeButtonHeight,
     margin: closeButtonMargin,
@@ -237,10 +238,16 @@ const StyledCustomContentContainer = /*#__PURE__*/_styledComponents.default.div.
   componentId: "components-web__sc-1563bo5-8"
 })(_ref11 => {
   let {
-    color
+    listItemColor,
+    listItemFontSize,
+    listItemLineHeight,
+    listItemPaddingLeft
   } = _ref11;
   return {
-    color,
+    fontSize: listItemFontSize,
+    lineHeight: listItemLineHeight,
+    paddingLeft: listItemPaddingLeft,
+    color: listItemColor,
     fontFamily: 'HelveticaNow400normal'
   };
 });
@@ -307,8 +314,6 @@ const Footnote = props => {
     footnoteHeaderPaddingBottom,
     headerLineHeight,
     headerFontSize,
-    headerFontName,
-    headerFontWeight,
     listPaddingLeft,
     listItemMarkerFontSize,
     listItemMarkerLineHeight,
@@ -318,6 +323,7 @@ const Footnote = props => {
     listItemPaddingLeft,
     closeButtonBorderSize,
     closeButtonBorderColor,
+    closeButtonBackgroundColor,
     closeButtonHeight,
     closeButtonMarginTop,
     closeButtonMarginLeft,
@@ -486,6 +492,10 @@ const Footnote = props => {
 
     if ( /*#__PURE__*/_react.default.isValidElement(data.content)) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCustomContentContainer, {
+        listItemColor: listItemColor,
+        listItemFontSize: listItemFontSize,
+        listItemLineHeight: listItemLineHeight,
+        listItemPaddingLeft: listItemPaddingLeft,
         ref: contentRef,
         children: data.content
       });
@@ -503,6 +513,10 @@ const Footnote = props => {
         listItemLineHeight: listItemLineHeight,
         listItemPaddingLeft: listItemPaddingLeft,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          tokens: {
+            fontSize: listItemFontSize,
+            lineHeight: listItemLineHeight
+          },
           children: (0, _utils.renderStructuredContent)(data.content)
         })
       })
@@ -529,17 +543,20 @@ const Footnote = props => {
               footnoteHeaderPaddingTop: footnoteHeaderPaddingTop,
               footnoteHeaderPaddingBottom: footnoteHeaderPaddingBottom,
               headerMargin: headerMargin,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-                style: {
-                  fontSize: `${headerFontSize}px`,
-                  lineHeight: `${headerLineHeight}px`,
-                  fontFamily: `${headerFontName}${headerFontWeight}normal`
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+                tokens: {
+                  fontSize: headerFontSize,
+                  lineHeight: headerLineHeight
+                },
+                variant: {
+                  size: 'h4'
                 },
                 children: getCopy('heading')
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
-                closeButtonBorder: `${closeButtonBorderSize}px solid ${closeButtonBorderColor}`,
+                closeButtonBorder: `${closeButtonBorderSize} solid ${closeButtonBorderColor}`,
                 closeButtonWidth: `${closeButtonWidth}px`,
                 closeButtonHeight: `${closeButtonHeight}px`,
+                closeButtonBackgroundColor: closeButtonBackgroundColor,
                 closeButtonMargin: `${closeButtonMarginTop}px ${closeButtonMarginRight}px ${closeButtonMarginBottom}px ${closeButtonMarginLeft}px`,
                 onClick: event => {
                   closeFootnote(event, {

package/lib/Modal/ModalContent.js

@@ -21,7 +21,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/* eslint-disable react/jsx-filename-extension */
 const StyledModalContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "ModalContent__StyledModalContent",
   componentId: "components-web__sc-k40cwb-0"

package/lib/PreviewCard/PreviewCard.js

@@ -149,8 +149,7 @@ const PreviewCard = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
           children: [Boolean(tag) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
               variant: {
-                size: 'eyebrow',
-                colour: 'secondary'
+                size: 'eyebrow'
               },
               children: tag
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
@@ -158,8 +157,7 @@ const PreviewCard = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
             variant: {
-              size: 'h4',
-              colour: 'secondary'
+              size: 'h4'
             },
             children: title
           }), Boolean(footer) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -167,8 +165,7 @@ const PreviewCard = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
               space: 2
             }), typeof footer === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
               variant: {
-                size: 'small',
-                colour: 'secondary'
+                size: 'small'
               },
               children: footer
             }) : footer]

package/lib/Toast/Toast.js

@@ -61,6 +61,8 @@ const Toast = _ref3 => {
     variant = {},
     ...rest
   } = _ref3;
+  // viewport hook added to work adjust the padding to different sizes
+  const viewport = (0, _componentsBase.useViewport)();
   const {
     containerBackgroundColor,
     containerGap,
@@ -73,8 +75,11 @@ const Toast = _ref3 => {
     animationBackgroundColorBefore,
     animationBackgroundColorAfter,
     animationColorBefore,
-    animationColorAfter
-  } = (0, _componentsBase.useThemeTokens)('Toast', tokens, variant); // inherit ChevronLink tokens for animation colors
+    animationColorAfter,
+    chevronlinkFontWeight
+  } = (0, _componentsBase.useThemeTokens)('Toast', tokens, variant, {
+    viewport
+  }); // inherit ChevronLink tokens for animation colors
 
   const {
     color: chevronDefaultColor
@@ -111,15 +116,24 @@ const Toast = _ref3 => {
         inverse: true
       },
       children: headline
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+      space: 2,
+      direction: "row"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
       variant: {
         inverse: true
       },
       children: copy
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+      space: 2,
+      direction: "row"
     }), link && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ChevronLink, {
       variant: {
         inverse: true
       },
+      tokens: {
+        blockFontWeight: chevronlinkFontWeight
+      },
       href: link.href,
       LinkRouter: link.LinkRouter,
       linkRouterProps: link.linkRouterProps,

package/lib-module/Countdown/Countdown.js

@@ -26,12 +26,15 @@ const Container = /*#__PURE__*/styled.div.withConfig({
     themeTokens,
     gradient
   } = _ref;
-  return { ...(large || feature && {
+  return { ...(large || feature ? {
       display: 'flex',
       flex: 0
-    }),
+    } : {}),
     ...(feature && {
       borderRadius: themeTokens.containerBorderRadius,
+      borderColor: themeTokens.containerBorderColor,
+      borderStyle: 'solid',
+      borderWidth: `${themeTokens.containerBorderWidth}px`,
       justifyContent: 'center',
       paddingBottom: `${themeTokens.containerPaddingBottomTop}px`,
       paddingLeft: `${themeTokens.containerPaddingLeftRight}px`,
@@ -39,38 +42,44 @@ const Container = /*#__PURE__*/styled.div.withConfig({
       paddingTop: `${themeTokens.containerPaddingBottomTop}px`,
       width: 'fit-content'
     }),
-    ...(feature && !inverse && {
-      background: `linear-gradient(#fff 0 0) padding-box, ${gradient} border-box`,
-      border: `${themeTokens.containerInverseBorder}px solid transparent`
-    }),
-    ...(feature && inverse && {
-      border: `${themeTokens.containerInverseBorder}px solid ${themeTokens.inverseBorderColor}`
+    ...(feature && !inverse && gradient && {
+      background: `linear-gradient(#fff 0 0) padding-box, ${gradient} border-box`
     })
   };
 });
 
 const getLabelTokens = themeTokens => ({
   color: themeTokens.labelBorderColor,
-  fontWeight: themeTokens.textTimerFontWeight,
-  fontSize: `${themeTokens.labelFontSize}`,
-  lineHeight: `${themeTokens.labelLineHeight}`
+  fontSize: themeTokens.labelFontSize,
+  fontWeight: themeTokens.labelFontWeight,
+  lineHeight: themeTokens.labelLineHeight
 });
 
-const getMainTextTokens = themeTokens => ({
-  color: themeTokens.labelBorderColor,
-  fontWeight: themeTokens.textTimerFontWeight,
-  fontSize: themeTokens.textFontSize,
-  lineHeight: themeTokens.textLineHeight
-});
+const getMainTextTokens = _ref2 => {
+  let {
+    labelBorderColor,
+    textTimerFontWeight,
+    textFontSize,
+    textLineHeight,
+    textTimerFontName
+  } = _ref2;
+  return {
+    color: labelBorderColor,
+    lineHeight: textLineHeight,
+    fontWeight: textTimerFontWeight,
+    fontSize: textFontSize,
+    fontName: textTimerFontName
+  };
+};
 
-const Countdown = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const Countdown = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     copy = 'en',
     targetTime,
     tokens,
     variant = {},
     ...rest
-  } = _ref2;
+  } = _ref3;
   const [days, hours, minutes, seconds] = useCountdown(targetTime);
   const viewport = useViewport();
   const {
@@ -95,13 +104,13 @@ const Countdown = /*#__PURE__*/forwardRef((_ref2, ref) => {
   // StackView-based subcontainer adds a 1-step space on the each side of the divider
   _jsx(Spacer, {
     direction: "row",
-    space: (feature || large) && viewport !== viewports.xs ? 7 : 2
+    space: (feature || large) && viewport !== viewports.xs ? 4 : 1
   }) : /*#__PURE__*/_jsx(Typography, {
     tokens: mainTextTokens,
     children: ":"
   });
   const labelTokens = getLabelTokens(themeTokens);
-  const commonProps = {
+  const segmentProps = {
     copy,
     labelTokens,
     numberTokens: mainTextTokens,
@@ -125,21 +134,21 @@ const Countdown = /*#__PURE__*/forwardRef((_ref2, ref) => {
           labelKey: "day",
           number: days,
           segmentWidth: String(days).length,
-          ...commonProps
+          ...segmentProps
         }), divider, /*#__PURE__*/_jsx(Segment, {
           labelKey: "hour",
           number: hours,
-          ...commonProps,
+          ...segmentProps,
           ...applyTextStyles(themeTokens)
         }), divider, /*#__PURE__*/_jsx(Segment, {
           labelKey: "minute",
           number: minutes,
-          ...commonProps,
+          ...segmentProps,
           ...applyTextStyles(themeTokens)
         }), divider, /*#__PURE__*/_jsx(Segment, {
           labelKey: "second",
           number: seconds,
-          ...commonProps,
+          ...segmentProps,
           ...applyTextStyles(themeTokens)
         })]
       })

package/lib-module/Countdown/Segment.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import { StackView, Typography, useCopy } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import dictionary from './dictionary';
-import { countdownVariantPropType, dictionaryContentShape } from './types';
+import { countdownVariantPropType, dictionaryContentShape } from './types'; // !TODO: put this back
+
 import { SEGMENT_WIDTH_TO_FONT_SIZE_RATIO } from './constants'; // Pads with zeros on the left if it's a single digit number
 
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -29,6 +30,7 @@ const Container = /*#__PURE__*/styled.div.withConfig({
     justifyContent: 'space-evenly',
     display: 'inline-flex',
     ...(feature && {
+      // This is required because when the numbers for Countdown change, the character widths will change and thereby effecting the container demensions.
       width: `${segmentFontSize * SEGMENT_WIDTH_TO_FONT_SIZE_RATIO * segmentWidth}px`,
       display: 'flex'
     })

package/lib-module/Countdown/constants.js

@@ -1,4 +1,4 @@
 export const DEFAULT_FONT_SIZE = 16;
 export const LARGE_FONT_SIZE = 64;
-export const SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = 0.8;
-export const XS_FONT_SIZE = 28;
+export const XS_FONT_SIZE = 28;
+export const SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = 0.8;

package/lib-module/Footnote/Footnote.js

@@ -172,6 +172,7 @@ const CloseButton = /*#__PURE__*/styled.button.withConfig({
   let {
     closeButtonBorder,
     closeButtonHeight,
+    closeButtonBackgroundColor,
     closeButtonMargin,
     closeButtonWidth
   } = _ref9;
@@ -181,7 +182,7 @@ const CloseButton = /*#__PURE__*/styled.button.withConfig({
     cursor: 'pointer',
     display: 'flex',
     justifyContent: 'center',
-    backgroundColor: 'white',
+    backgroundColor: closeButtonBackgroundColor,
     border: closeButtonBorder,
     height: closeButtonHeight,
     margin: closeButtonMargin,
@@ -209,10 +210,16 @@ const StyledCustomContentContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1563bo5-8"
 })(_ref11 => {
   let {
-    color
+    listItemColor,
+    listItemFontSize,
+    listItemLineHeight,
+    listItemPaddingLeft
   } = _ref11;
   return {
-    color,
+    fontSize: listItemFontSize,
+    lineHeight: listItemLineHeight,
+    paddingLeft: listItemPaddingLeft,
+    color: listItemColor,
     fontFamily: 'HelveticaNow400normal'
   };
 });
@@ -279,8 +286,6 @@ const Footnote = props => {
     footnoteHeaderPaddingBottom,
     headerLineHeight,
     headerFontSize,
-    headerFontName,
-    headerFontWeight,
     listPaddingLeft,
     listItemMarkerFontSize,
     listItemMarkerLineHeight,
@@ -290,6 +295,7 @@ const Footnote = props => {
     listItemPaddingLeft,
     closeButtonBorderSize,
     closeButtonBorderColor,
+    closeButtonBackgroundColor,
     closeButtonHeight,
     closeButtonMarginTop,
     closeButtonMarginLeft,
@@ -458,6 +464,10 @@ const Footnote = props => {
 
     if ( /*#__PURE__*/React.isValidElement(data.content)) {
       return /*#__PURE__*/_jsx(StyledCustomContentContainer, {
+        listItemColor: listItemColor,
+        listItemFontSize: listItemFontSize,
+        listItemLineHeight: listItemLineHeight,
+        listItemPaddingLeft: listItemPaddingLeft,
         ref: contentRef,
         children: data.content
       });
@@ -475,6 +485,10 @@ const Footnote = props => {
         listItemLineHeight: listItemLineHeight,
         listItemPaddingLeft: listItemPaddingLeft,
         children: /*#__PURE__*/_jsx(Typography, {
+          tokens: {
+            fontSize: listItemFontSize,
+            lineHeight: listItemLineHeight
+          },
           children: renderStructuredContent(data.content)
         })
       })
@@ -501,17 +515,20 @@ const Footnote = props => {
               footnoteHeaderPaddingTop: footnoteHeaderPaddingTop,
               footnoteHeaderPaddingBottom: footnoteHeaderPaddingBottom,
               headerMargin: headerMargin,
-              children: [/*#__PURE__*/_jsx("h2", {
-                style: {
-                  fontSize: `${headerFontSize}px`,
-                  lineHeight: `${headerLineHeight}px`,
-                  fontFamily: `${headerFontName}${headerFontWeight}normal`
+              children: [/*#__PURE__*/_jsx(Typography, {
+                tokens: {
+                  fontSize: headerFontSize,
+                  lineHeight: headerLineHeight
+                },
+                variant: {
+                  size: 'h4'
                 },
                 children: getCopy('heading')
               }), /*#__PURE__*/_jsx(CloseButton, {
-                closeButtonBorder: `${closeButtonBorderSize}px solid ${closeButtonBorderColor}`,
+                closeButtonBorder: `${closeButtonBorderSize} solid ${closeButtonBorderColor}`,
                 closeButtonWidth: `${closeButtonWidth}px`,
                 closeButtonHeight: `${closeButtonHeight}px`,
+                closeButtonBackgroundColor: closeButtonBackgroundColor,
                 closeButtonMargin: `${closeButtonMarginTop}px ${closeButtonMarginRight}px ${closeButtonMarginBottom}px ${closeButtonMarginLeft}px`,
                 onClick: event => {
                   closeFootnote(event, {

package/lib-module/Modal/ModalContent.js

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-filename-extension */
 import React, { useState } from 'react';
 import { Box, Button, Spacer, TextButton, Typography, useThemeTokens, useViewport } from '@telus-uds/components-base';
 import styled from 'styled-components';

package/lib-module/PreviewCard/PreviewCard.js

@@ -127,8 +127,7 @@ const PreviewCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
           children: [Boolean(tag) && /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsx(Typography, {
               variant: {
-                size: 'eyebrow',
-                colour: 'secondary'
+                size: 'eyebrow'
               },
               children: tag
             }), /*#__PURE__*/_jsx(Spacer, {
@@ -136,8 +135,7 @@ const PreviewCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
             })]
           }), /*#__PURE__*/_jsx(Typography, {
             variant: {
-              size: 'h4',
-              colour: 'secondary'
+              size: 'h4'
             },
             children: title
           }), Boolean(footer) && /*#__PURE__*/_jsxs(_Fragment, {
@@ -145,8 +143,7 @@ const PreviewCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
               space: 2
             }), typeof footer === 'string' ? /*#__PURE__*/_jsx(Typography, {
               variant: {
-                size: 'small',
-                colour: 'secondary'
+                size: 'small'
               },
               children: footer
             }) : footer]

package/lib-module/Toast/Toast.js

@@ -2,7 +2,7 @@ var _withLinkRouter$propT, _withLinkRouter$propT2;
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ChevronLink, selectSystemProps, useThemeTokens, Typography, withLinkRouter } from '@telus-uds/components-base';
+import { ChevronLink, selectSystemProps, useThemeTokens, Typography, withLinkRouter, Spacer, useViewport } from '@telus-uds/components-base';
 import styled, { keyframes, css } from 'styled-components';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -43,6 +43,8 @@ const Toast = _ref3 => {
     variant = {},
     ...rest
   } = _ref3;
+  // viewport hook added to work adjust the padding to different sizes
+  const viewport = useViewport();
   const {
     containerBackgroundColor,
     containerGap,
@@ -55,8 +57,11 @@ const Toast = _ref3 => {
     animationBackgroundColorBefore,
     animationBackgroundColorAfter,
     animationColorBefore,
-    animationColorAfter
-  } = useThemeTokens('Toast', tokens, variant); // inherit ChevronLink tokens for animation colors
+    animationColorAfter,
+    chevronlinkFontWeight
+  } = useThemeTokens('Toast', tokens, variant, {
+    viewport
+  }); // inherit ChevronLink tokens for animation colors
 
   const {
     color: chevronDefaultColor
@@ -93,15 +98,24 @@ const Toast = _ref3 => {
         inverse: true
       },
       children: headline
+    }), /*#__PURE__*/_jsx(Spacer, {
+      space: 2,
+      direction: "row"
     }), /*#__PURE__*/_jsx(Typography, {
       variant: {
         inverse: true
       },
       children: copy
+    }), /*#__PURE__*/_jsx(Spacer, {
+      space: 2,
+      direction: "row"
     }), link && /*#__PURE__*/_jsx(ChevronLink, {
       variant: {
         inverse: true
       },
+      tokens: {
+        blockFontWeight: chevronlinkFontWeight
+      },
       href: link.href,
       LinkRouter: link.LinkRouter,
       linkRouterProps: link.linkRouterProps,

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.50.0",
+    "@telus-uds/components-base": "1.51.0",
     "@telus-uds/system-constants": "^1.2.1",
     "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.32.0",
+    "@telus-uds/system-theme-tokens": "^2.33.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -63,5 +63,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.8.1"
+  "version": "2.9.0"
 }

package/src/Countdown/Countdown.jsx

@@ -22,9 +22,12 @@ import { countdownVariantPropType, dictionaryContentShape } from './types'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const Container = styled.div(({ variant: { feature, inverse, large }, themeTokens, gradient }) => ({
-  ...(large || (feature && { display: 'flex', flex: 0 })),
+  ...(large || feature ? { display: 'flex', flex: 0 } : {}),
   ...(feature && {
     borderRadius: themeTokens.containerBorderRadius,
+    borderColor: themeTokens.containerBorderColor,
+    borderStyle: 'solid',
+    borderWidth: `${themeTokens.containerBorderWidth}px`,
     justifyContent: 'center',
     paddingBottom: `${themeTokens.containerPaddingBottomTop}px`,
     paddingLeft: `${themeTokens.containerPaddingLeftRight}px`,
@@ -33,28 +36,31 @@ const Container = styled.div(({ variant: { feature, inverse, large }, themeToken
     width: 'fit-content'
   }),
   ...(feature &&
-    !inverse && {
-      background: `linear-gradient(#fff 0 0) padding-box, ${gradient} border-box`,
-      border: `${themeTokens.containerInverseBorder}px solid transparent`
-    }),
-  ...(feature &&
-    inverse && {
-      border: `${themeTokens.containerInverseBorder}px solid ${themeTokens.inverseBorderColor}`
+    !inverse &&
+    gradient && {
+      background: `linear-gradient(#fff 0 0) padding-box, ${gradient} border-box`
     })
 }))
 
 const getLabelTokens = (themeTokens) => ({
   color: themeTokens.labelBorderColor,
-  fontWeight: themeTokens.textTimerFontWeight,
-  fontSize: `${themeTokens.labelFontSize}`,
-  lineHeight: `${themeTokens.labelLineHeight}`
+  fontSize: themeTokens.labelFontSize,
+  fontWeight: themeTokens.labelFontWeight,
+  lineHeight: themeTokens.labelLineHeight
 })
 
-const getMainTextTokens = (themeTokens) => ({
-  color: themeTokens.labelBorderColor,
-  fontWeight: themeTokens.textTimerFontWeight,
-  fontSize: themeTokens.textFontSize,
-  lineHeight: themeTokens.textLineHeight
+const getMainTextTokens = ({
+  labelBorderColor,
+  textTimerFontWeight,
+  textFontSize,
+  textLineHeight,
+  textTimerFontName
+}) => ({
+  color: labelBorderColor,
+  lineHeight: textLineHeight,
+  fontWeight: textTimerFontWeight,
+  fontSize: textFontSize,
+  fontName: textTimerFontName
 })
 
 const Countdown = forwardRef(({ copy = 'en', targetTime, tokens, variant = {}, ...rest }, ref) => {
@@ -68,18 +74,18 @@ const Countdown = forwardRef(({ copy = 'en', targetTime, tokens, variant = {}, .
   const segmentFontSize = themeTokens.textFontSize
   const semanticGradient =
     themeTokens.containerGradient && transformGradient(themeTokens.containerGradient)
-
   const mainTextTokens = getMainTextTokens(themeTokens)
 
   const divider =
     noDivider === true ? (
       // StackView-based subcontainer adds a 1-step space on the each side of the divider
-      <Spacer direction="row" space={(feature || large) && viewport !== viewports.xs ? 7 : 2} />
+      <Spacer direction="row" space={(feature || large) && viewport !== viewports.xs ? 4 : 1} />
     ) : (
       <Typography tokens={mainTextTokens}>:</Typography>
     )
   const labelTokens = getLabelTokens(themeTokens)
-  const commonProps = {
+
+  const segmentProps = {
     copy,
     labelTokens,
     numberTokens: mainTextTokens,
@@ -98,26 +104,31 @@ const Countdown = forwardRef(({ copy = 'en', targetTime, tokens, variant = {}, .
       gradient={semanticGradient}
     >
       <StackView direction="row" space={1}>
-        <Segment labelKey="day" number={days} segmentWidth={String(days).length} {...commonProps} />
+        <Segment
+          labelKey="day"
+          number={days}
+          segmentWidth={String(days).length}
+          {...segmentProps}
+        />
         {divider}
         <Segment
           labelKey="hour"
           number={hours}
-          {...commonProps}
+          {...segmentProps}
           {...applyTextStyles(themeTokens)}
         />
         {divider}
         <Segment
           labelKey="minute"
           number={minutes}
-          {...commonProps}
+          {...segmentProps}
           {...applyTextStyles(themeTokens)}
         />
         {divider}
         <Segment
           labelKey="second"
           number={seconds}
-          {...commonProps}
+          {...segmentProps}
           {...applyTextStyles(themeTokens)}
         />
       </StackView>

package/src/Countdown/Segment.jsx

@@ -4,6 +4,7 @@ import { StackView, Typography, useCopy } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import dictionary from './dictionary'
 import { countdownVariantPropType, dictionaryContentShape } from './types'
+// !TODO: put this back
 import { SEGMENT_WIDTH_TO_FONT_SIZE_RATIO } from './constants'
 
 // Pads with zeros on the left if it's a single digit number
@@ -13,11 +14,11 @@ const Container = styled.div(({ segmentFontSize, segmentWidth = 2, variant: { fe
   justifyContent: 'space-evenly',
   display: 'inline-flex',
   ...(feature && {
+    // This is required because when the numbers for Countdown change, the character widths will change and thereby effecting the container demensions.
     width: `${segmentFontSize * SEGMENT_WIDTH_TO_FONT_SIZE_RATIO * segmentWidth}px`,
     display: 'flex'
   })
 }))
-
 // A segment of the countdown string: we need to make sure it
 // keeps its width constant to prevent the whole component from
 // being automatically resized while using variable size fonts

package/src/Countdown/constants.js

@@ -1,4 +1,4 @@
 export const DEFAULT_FONT_SIZE = 16
 export const LARGE_FONT_SIZE = 64
-export const SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = 0.8
 export const XS_FONT_SIZE = 28
+export const SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = 0.8

package/src/Footnote/Footnote.jsx

@@ -137,13 +137,19 @@ const ListItem = styled(OrderedListBase.Item)(
 )
 
 const CloseButton = styled.button(
-  ({ closeButtonBorder, closeButtonHeight, closeButtonMargin, closeButtonWidth }) => ({
+  ({
+    closeButtonBorder,
+    closeButtonHeight,
+    closeButtonBackgroundColor,
+    closeButtonMargin,
+    closeButtonWidth
+  }) => ({
     alignItems: 'center',
     borderRadius: '50%',
     cursor: 'pointer',
     display: 'flex',
     justifyContent: 'center',
-    backgroundColor: 'white',
+    backgroundColor: closeButtonBackgroundColor,
     border: closeButtonBorder,
     height: closeButtonHeight,
     margin: closeButtonMargin,
@@ -163,10 +169,16 @@ const ContentContainer = styled.div(
   })
 )
 
-const StyledCustomContentContainer = styled.div(({ color }) => ({
-  color,
-  fontFamily: 'HelveticaNow400normal'
-}))
+const StyledCustomContentContainer = styled.div(
+  ({ listItemColor, listItemFontSize, listItemLineHeight, listItemPaddingLeft }) => ({
+    fontSize: listItemFontSize,
+    lineHeight: listItemLineHeight,
+    paddingLeft: listItemPaddingLeft,
+    color: listItemColor,
+    fontFamily: 'HelveticaNow400normal'
+  })
+)
+
 const usePrevious = (value) => {
   const ref = useRef()
   useEffect(() => {
@@ -224,8 +236,6 @@ const Footnote = (props) => {
     footnoteHeaderPaddingBottom,
     headerLineHeight,
     headerFontSize,
-    headerFontName,
-    headerFontWeight,
     listPaddingLeft,
     listItemMarkerFontSize,
     listItemMarkerLineHeight,
@@ -235,6 +245,7 @@ const Footnote = (props) => {
     listItemPaddingLeft,
     closeButtonBorderSize,
     closeButtonBorderColor,
+    closeButtonBackgroundColor,
     closeButtonHeight,
     closeButtonMarginTop,
     closeButtonMarginLeft,
@@ -401,7 +412,15 @@ const Footnote = (props) => {
     }
     if (React.isValidElement(data.content)) {
       return (
-        <StyledCustomContentContainer ref={contentRef}>{data.content}</StyledCustomContentContainer>
+        <StyledCustomContentContainer
+          listItemColor={listItemColor}
+          listItemFontSize={listItemFontSize}
+          listItemLineHeight={listItemLineHeight}
+          listItemPaddingLeft={listItemPaddingLeft}
+          ref={contentRef}
+        >
+          {data.content}
+        </StyledCustomContentContainer>
       )
     }
     return (
@@ -414,7 +433,14 @@ const Footnote = (props) => {
           listItemLineHeight={listItemLineHeight}
           listItemPaddingLeft={listItemPaddingLeft}
         >
-          <Typography>{renderStructuredContent(data.content)}</Typography>
+          <Typography
+            tokens={{
+              fontSize: listItemFontSize,
+              lineHeight: listItemLineHeight
+            }}
+          >
+            {renderStructuredContent(data.content)}
+          </Typography>
         </ListItem>
       </List>
     )
@@ -453,19 +479,20 @@ const Footnote = (props) => {
                 footnoteHeaderPaddingBottom={footnoteHeaderPaddingBottom}
                 headerMargin={headerMargin}
               >
-                <h2
-                  style={{
-                    fontSize: `${headerFontSize}px`,
-                    lineHeight: `${headerLineHeight}px`,
-                    fontFamily: `${headerFontName}${headerFontWeight}normal`
+                <Typography
+                  tokens={{
+                    fontSize: headerFontSize,
+                    lineHeight: headerLineHeight
                   }}
+                  variant={{ size: 'h4' }}
                 >
                   {getCopy('heading')}
-                </h2>
+                </Typography>
                 <CloseButton
-                  closeButtonBorder={`${closeButtonBorderSize}px solid ${closeButtonBorderColor}`}
+                  closeButtonBorder={`${closeButtonBorderSize} solid ${closeButtonBorderColor}`}
                   closeButtonWidth={`${closeButtonWidth}px`}
                   closeButtonHeight={`${closeButtonHeight}px`}
+                  closeButtonBackgroundColor={closeButtonBackgroundColor}
                   closeButtonMargin={`${closeButtonMarginTop}px ${closeButtonMarginRight}px ${closeButtonMarginBottom}px ${closeButtonMarginLeft}px`}
                   onClick={(event) => {
                     closeFootnote(event, { returnFocus: true })

package/src/Modal/ModalContent.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-filename-extension */
 import React, { useState } from 'react'
 import {
   Box,

package/src/PreviewCard/PreviewCard.jsx

@@ -120,20 +120,16 @@ const PreviewCard = forwardRef(
               >
                 {Boolean(tag) && (
                   <>
-                    <Typography variant={{ size: 'eyebrow', colour: 'secondary' }}>
-                      {tag}
-                    </Typography>
+                    <Typography variant={{ size: 'eyebrow' }}>{tag}</Typography>
                     <Spacer space={2} />
                   </>
                 )}
-                <Typography variant={{ size: 'h4', colour: 'secondary' }}>{title}</Typography>
+                <Typography variant={{ size: 'h4' }}>{title}</Typography>
                 {Boolean(footer) && (
                   <>
                     <Spacer space={2} />
                     {typeof footer === 'string' ? (
-                      <Typography variant={{ size: 'small', colour: 'secondary' }}>
-                        {footer}
-                      </Typography>
+                      <Typography variant={{ size: 'small' }}>{footer}</Typography>
                     ) : (
                       footer
                     )}

package/src/Toast/Toast.jsx

@@ -5,7 +5,9 @@ import {
   selectSystemProps,
   useThemeTokens,
   Typography,
-  withLinkRouter
+  withLinkRouter,
+  Spacer,
+  useViewport
 } from '@telus-uds/components-base'
 import styled, { keyframes, css } from 'styled-components'
 import { htmlAttrs } from '../utils'
@@ -86,6 +88,9 @@ const ToastContainer = styled.div`
 `
 
 const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) => {
+  // viewport hook added to work adjust the padding to different sizes
+  const viewport = useViewport()
+
   const {
     containerBackgroundColor,
     containerGap,
@@ -98,8 +103,9 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
     animationBackgroundColorBefore,
     animationBackgroundColorAfter,
     animationColorBefore,
-    animationColorAfter
-  } = useThemeTokens('Toast', tokens, variant)
+    animationColorAfter,
+    chevronlinkFontWeight
+  } = useThemeTokens('Toast', tokens, variant, { viewport })
 
   // inherit ChevronLink tokens for animation colors
   const { color: chevronDefaultColor } = useThemeTokens('ChevronLink', {}, {})
@@ -128,10 +134,15 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
       {...selectProps(rest)}
     >
       {headline && <Typography variant={{ bold: true, inverse: true }}>{headline}</Typography>}
+      <Spacer space={2} direction="row" />
       <Typography variant={{ inverse: true }}>{copy}</Typography>
+      <Spacer space={2} direction="row" />
       {link && (
         <ChevronLink
-          variant={{ inverse: true }}
+          variant={{
+            inverse: true
+          }}
+          tokens={{ blockFontWeight: chevronlinkFontWeight }}
           href={link.href}
           LinkRouter={link.LinkRouter}
           linkRouterProps={link.linkRouterProps}