@telus-uds/components-base 1.37.0 → 1.39.0

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Mon, 24 Apr 2023 21:33:59 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.39.0
+
+Mon, 01 May 2023 22:02:12 GMT
+
+### Minor changes
+
+- added adjustments to IconText (kyle.king2@telus.com)
+- list component standardization (akshay.pandey1@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.24.0
+
+## 1.38.0
+
+Thu, 27 Apr 2023 14:41:57 GMT
+
+### Minor changes
+
+- add a new button variant to support responsive width across the different viewports (guillermo.peitzner@telus.com)
+- export use theme call back (mauricio.batresmontejo@telus.com)
+- standarization of activity indicator (ignacio.cuyun@telus.com)
+- conditionally render Icon based on it being defined (kyle.king2@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.23.0
+
 ## 1.37.0
 
-Mon, 24 Apr 2023 21:33:59 GMT
+Mon, 24 Apr 2023 21:42:02 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -1,23 +1,27 @@
 {
   "schema": {
     "components": {
-      "Toast": {
-        "containerBackgroundColor": "color",
-        "containerGap": "size",
-        "animationHeightBefore": "size",
-        "animationHeightAfter": "size",
-        "animationPaddingBottomBefore": "size",
-        "animationPaddingBottomAfter": "size",
-        "animationPaddingTopBefore": "size",
-        "animationPaddingTopAfter": "size",
-        "animationBackgroundColorBefore": "color",
-        "animationBackgroundColorAfter": "color",
-        "animationColorBefore": "color",
-        "animationColorAfter": "color",
-        "animationDivColorBefore": "color",
-        "animationDivColorAfter": "color",
-        "animationFillColorBefore": "color",
-        "animationFillColorAfter": "color"
+      "SplashButton": {
+        "playIcon": "icon",
+        "playIconColor": "color",
+        "buttonContentBackground": "color",
+        "buttonContentChildrenBackground": "color"
+      },
+      "SplashButtonWithDetails": {
+        "playIcon": "icon",
+        "playIconColor": "color",
+        "buttonContentBackground": "color",
+        "buttonContentChildrenBackground": "color",
+        "buttonBackground": "color",
+        "buttonBorderColor": "color",
+        "buttonRadius": "radius",
+        "buttonLeftPosition": "size",
+        "buttonBottomPosition": "size",
+        "buttonMinHeight": "size",
+        "buttonPaddingLeft": "size",
+        "buttonPaddingRight": "size",
+        "detailsContainerPadding": "size",
+        "playIconContainerBackground": "color"
       },
       "Table": {
         "tablePaddingBottom": "size",
@@ -41,6 +45,69 @@
         "size": "size",
         "thickness": "border"
       },
+      "Video": {
+        "borderColor": "color",
+        "pauseIcon": "icon",
+        "replayIcon": "icon",
+        "playIcon": "icon"
+      },
+      "VideoMiddleControlButton": {
+        "width": "size",
+        "height": "size",
+        "background": "color",
+        "iconColor": "color"
+      },
+      "VideoControlBar": {
+        "paddingTop": "size",
+        "paddingBottom": "size",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "paddingLeftCompactMode": "size",
+        "paddingRightCompactMode": "size",
+        "menuBottom": "size",
+        "menuRight": "size",
+        "menuMarginLeft": "size",
+        "captionsIcon": "icon",
+        "settingsIcon": "icon",
+        "minimizeIcon": "icon",
+        "maximizeIcon": "icon"
+      },
+      "VideoButton": {
+        "color": "color"
+      },
+      "VideoMenu": {
+        "padding": "size",
+        "background": "color",
+        "checkMarkWidth": "size",
+        "checkMarkHeight": "size",
+        "checkMarkSelectedColor": "color",
+        "checkMarkHoverColor": "color",
+        "checkMarkFocusColor": "color",
+        "checkMarkUnselectedColor": "color",
+        "checkMarkIcon": "icon"
+      },
+      "VideoProgressBar": {
+        "thumbHeight": "size",
+        "thumbWidth": "size",
+        "thumbBackground": "color",
+        "timestampMarginLeft": "size",
+        "timestampMarginRight": "size",
+        "trackGradientStart": "color",
+        "trackGradientEnd": "color",
+        "rangeBackground": "color"
+      },
+      "VideoVolumeSlider": {
+        "marginLeft": "size",
+        "marginRight": "size",
+        "thumbHeight": "size",
+        "thumbWidth": "size",
+        "thumbBackground": "color",
+        "trackGradientStart": "color",
+        "trackGradientEnd": "color",
+        "rangeBackground": "color",
+        "mutedIcon": "icon",
+        "unmutedIcon": "icon"
+      },
       "Callout": {
         "background": "color",
         "gap": "size",
@@ -61,6 +128,19 @@
         "itemBorderColor": "color",
         "itemPadding": "size"
       },
+      "QuantitySelector": {
+        "leftIcon": "icon",
+        "rightIcon": "icon",
+        "iconSize": "size",
+        "borderColor": "color",
+        "inputBorderColor": "color",
+        "inputBackgroundColor": "color",
+        "inputBorderWidth": "size",
+        "padding": "size",
+        "backgroundColor": "color",
+        "textColor": "color",
+        "iconColor": "color"
+      },
       "Footnote": {
         "footnoteBackground": "color",
         "footnoteBorderTopSizeMd": "border",
@@ -334,7 +414,7 @@
         "labelMarginLeft": "size"
       },
       "ChevronLink": {
-        "height": "size",
+        "fontSize": "fontSize",
         "textLineHeight": "lineHeight",
         "color": "color",
         "outerBorderColor": "color",
@@ -1089,6 +1169,26 @@
         "paddingVertical": "size",
         "borderRadius": "radius"
       },
+      "StoryCard": {
+        "outerBorderColor": "color",
+        "outerBorderGap": "size",
+        "outerBorderWidth": "border",
+        "flex": "integer",
+        "backgroundColor": "color",
+        "borderColor": "color",
+        "borderRadius": "radius",
+        "borderWidth": "border",
+        "paddingBottom": "size",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "paddingTop": "size",
+        "minWidth": "size",
+        "shadow": "shadow",
+        "contentAlignItems": "flexAlign",
+        "contentJustifyContent": "flexJustifyContent",
+        "contentFlexGrow": "integer",
+        "contentFlexShrink": "integer"
+      },
       "Tabs": {
         "nextIcon": "icon",
         "previousIcon": "icon",
@@ -1166,6 +1266,55 @@
         "outerBorderGap": "size",
         "outerBackgroundColor": "color"
       },
+      "Testimonial": {
+        "testimonialContainerGap": "size",
+        "quoteContainerGap": "size",
+        "iconColor": "color",
+        "dividerBorder": "border",
+        "dividerBackgroundColor": "color",
+        "figcaptionGap": "size",
+        "textColor": "color",
+        "imageSize": "size",
+        "icon": "icon"
+      },
+      "TermsAndConditions": {
+        "contentPaddingBottom": "size",
+        "contentPaddingLeft": "size",
+        "mdContentPaddingBottom": "size",
+        "mdContentPaddingLeft": "size",
+        "orderedPadding": "size",
+        "unorderedPadding": "size",
+        "listFontName": "fontName",
+        "listFontWeight": "fontWeight",
+        "listFontSize": "fontSize",
+        "listLineHeight": "lineHeight",
+        "listColor": "color",
+        "listMarginBottom": "size",
+        "listMarginLeft": "size",
+        "titleColor": "color",
+        "titleFontSize": "fontSize",
+        "titleLineHeight": "lineHeight",
+        "titlePaddingLeft": "size",
+        "expandIconContainerBorder": "border",
+        "expandIconContainerBorderColor": "color",
+        "expandIconContainerHeight": "size",
+        "expandIconContainerMarginX": "size",
+        "expandIconContainerMarginY": "size",
+        "expandIconContainerWidth": "size",
+        "expandIconContainerAlignItems": "flexAlign",
+        "expandIconContainerJustifyContent": "flexJustifyContent",
+        "expandTitleColor": "color",
+        "expandTitleFontSize": "size",
+        "expandTitleLineHeight": "lineHeight",
+        "expandTitleMarginX": "size",
+        "expandTitleMarginY": "size",
+        "expandBaseBorderWidth": "border",
+        "expandContentPaddingBottom": "size",
+        "expandContentPaddingLeft": "size",
+        "expandContentPaddingRight": "size",
+        "expandContentPaddingTop": "size",
+        "icon": "icon"
+      },
       "TextArea": {
         "minLines": "integer",
         "maxLines": "integer"
@@ -1197,6 +1346,22 @@
         "iconSize": "size",
         "iconColor": "color"
       },
+      "Toast": {
+        "containerBackgroundColor": "color",
+        "containerGap": "size",
+        "animationHeightBefore": "size",
+        "animationHeightAfter": "size",
+        "animationPaddingBottomBefore": "size",
+        "animationPaddingBottomAfter": "size",
+        "animationPaddingTopBefore": "size",
+        "animationPaddingTopAfter": "size",
+        "animationBackgroundColorBefore": "color",
+        "animationBackgroundColorAfter": "color",
+        "animationColorBefore": "color",
+        "animationColorAfter": "color",
+        "animationDivColorBefore": "color",
+        "animationDivColorAfter": "color"
+      },
       "ToggleSwitch": {
         "borderColor": "color",
         "borderWidth": "border",
@@ -1304,6 +1469,22 @@
         "fontScaleCap": "fontSize",
         "letterSpacing": "letterSpacing"
       },
+      "Countdown": {
+        "containerBorderRadius": "radius",
+        "containerGradient": "gradient",
+        "containerInverseBorder": "border",
+        "containerInverseBorderColor": "color",
+        "containerPaddingBottomTop": "size",
+        "containerPaddingLeftRight": "size",
+        "inverseBorderColor": "color",
+        "labelBorderColor": "color",
+        "textFontSize": "fontSize",
+        "textLineHeight": "lineHeight",
+        "labelFontSize": "fontSize",
+        "labelLineHeight": "lineHeight",
+        "textTimerFontWeight": "fontWeight",
+        "textTimerFontName": "fontName"
+      },
       "Skeleton": {
         "color": "color",
         "size": "size",
@@ -1328,6 +1509,18 @@
           "type": "state"
         }
       },
+      "SplashButton": {
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        }
+      },
       "Button": {
         "focus": {
           "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
@@ -1967,6 +2160,41 @@
           "type": "state"
         }
       },
+      "QuantitySelector": {
+        "focus": {
+          "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "disabled": {
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "pressed": {
+          "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
+          "values": [
+            true
+          ],
+          "type": "state"
+        }
+      },
       "Radio": {
         "checked": {
           "description": "Corresponds to a selected state for a checkbox or radio",
@@ -2219,6 +2447,35 @@
           "type": "state"
         }
       },
+      "StoryCard": {
+        "focus": {
+          "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "pressed": {
+          "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
+          "values": [
+            true
+          ],
+          "type": "state"
+        }
+      },
       "TabsItem": {
         "focus": {
           "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
@@ -2332,6 +2589,15 @@
           "type": "state"
         }
       },
+      "TermsAndConditions": {
+        "expanded": {
+          "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
+          "values": [
+            true
+          ],
+          "type": "state"
+        }
+      },
       "ToggleSwitch": {
         "focus": {
           "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
@@ -12542,10 +12808,14 @@
             "description": ""
           },
           "tokens": {
+            "defaultValue": {
+              "value": "{}",
+              "computed": false
+            },
             "type": {
               "name": "custom",
               "raw": {
-                "height": "size",
+                "fontSize": "fontSize",
                 "textLineHeight": "lineHeight",
                 "color": "color",
                 "outerBorderColor": "color",

package/lib/ActivityIndicator/Spinner.js

@@ -70,6 +70,7 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         r: "20",
         strokeDasharray: reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
         strokeDashoffset: 0,
+        vectorEffect: "non-scaling-stroke",
         children: reduceMotion ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
             attributeName: "stroke-dashoffset",

package/lib/Button/Button.js

@@ -15,6 +15,8 @@ var _ThemeProvider = require("../ThemeProvider");
 
 var _props = require("../utils/props");
 
+var _ViewportProvider = require("../ViewportProvider");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,7 +32,12 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     variant,
     ...props
   } = _ref;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, variant);
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const buttonVariant = {
+    viewport,
+    ...variant
+  };
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, buttonVariant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, { ...props,
     tokens: getTokens,
     accessibilityRole: accessibilityRole,

package/lib/Button/ButtonLink.js

@@ -15,6 +15,8 @@ var _props = require("../utils/props");
 
 var _ThemeProvider = require("../ThemeProvider");
 
+var _ViewportProvider = require("../ViewportProvider");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41,7 +43,12 @@ const ButtonLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     rest
   } = _props.hrefAttrsProp.bundle(props);
 
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, variant);
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const buttonVariant = {
+    viewport,
+    ...variant
+  };
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, buttonVariant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
     ref: ref,
     accessibilityRole: accessibilityRole,

package/lib/Link/ChevronLink.js

@@ -33,7 +33,7 @@ const ChevronLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     direction = 'right',
     children,
-    tokens,
+    tokens = {},
     variant,
     dataSet,
     ...linkProps
@@ -47,10 +47,13 @@ const ChevronLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       iconDisplace,
       height,
       textLineHeight,
+      fontSize,
       ...otherTokens
     } = getChevronTokens(linkState);
-    return { ...(0, _utils.selectTokens)('Link', otherTokens),
+    const linkTokens = (0, _utils.selectTokens)('Link', otherTokens);
+    return { ...linkTokens,
       height,
+      blockFontSize: tokens.fontSize ?? fontSize,
       textLineHeight,
       icon: direction === 'right' ? rightIcon : leftIcon,
       iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0

package/lib/Link/LinkBase.js

@@ -204,15 +204,10 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     ,
     ref: ref,
     style: linkState => {
-      const {
-        height,
-        ...themeTokens
-      } = resolveLinkTokens(linkState);
+      const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      return [height ? {
-        height
-      } : {}, outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -278,7 +273,7 @@ const staticStyles = _StyleSheet.default.create({
     justifyContent: 'flex-start'
   },
   baseline: {
-    alignSelf: 'center'
+    alignSelf: 'baseline'
   }
 });
 

package/lib/List/ListItem.js

@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _ListItemBase = _interopRequireDefault(require("./ListItemBase"));
 
-var _Typography = _interopRequireDefault(require("../Typography"));
-
 var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
@@ -35,17 +33,12 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     ...listItemProps
   } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('List', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListItemBase.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemBase.default, {
     tokens: themeTokens,
     ref: ref,
     ...listItemProps,
-    children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-      variant: {
-        size: 'h4',
-        bold: true
-      },
-      children: title
-    }), children]
+    title: title,
+    children: children
   });
 });
 ListItem.displayName = 'ListItem';

package/lib/List/ListItemBase.js

@@ -21,6 +21,8 @@ var _ListItemContent = _interopRequireDefault(require("./ListItemContent"));
 
 var _ListItemMark = _interopRequireDefault(require("./ListItemMark"));
 
+var _Typography = _interopRequireDefault(require("../Typography"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -66,6 +68,7 @@ const ListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     iconSize,
     showDivider,
     children,
+    title,
     isLastItem,
     accessibilityRole = _Platform.default.select({
       web: 'listitem',
@@ -105,15 +108,30 @@ const ListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       iconColor,
       iconSize,
       isLastItem
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [{
+        flexDirection: 'row',
+        flex: 'wrap'
+      }, !title && {
+        alignItems: 'center'
+      }],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemMark.default, {
         tokens: tokens,
         icon: icon,
         iconColor: iconColor,
         iconSize: iconSize
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemContent.default, {
-        tokens: tokens,
-        children: children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: staticStyles.titleAndContentContainer,
+        children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: {
+            size: 'h4',
+            bold: true
+          },
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemContent.default, {
+          tokens: tokens,
+          children: children
+        })]
       })]
     })
   });
@@ -123,6 +141,9 @@ ListItemBase.displayName = 'ListItem';
 const staticStyles = _StyleSheet.default.create({
   itemContainer: {
     flexDirection: 'row'
+  },
+  titleAndContentContainer: {
+    flexDirection: 'column'
   }
 });
 

package/lib/index.js

@@ -60,6 +60,7 @@ var _exportNames = {
   useTheme: true,
   useSetTheme: true,
   useThemeTokens: true,
+  useThemeTokensCallback: true,
   getThemeTokens: true,
   applyOuterBorder: true,
   applyTextStyles: true,
@@ -426,6 +427,12 @@ Object.defineProperty(exports, "useThemeTokens", {
     return _ThemeProvider.useThemeTokens;
   }
 });
+Object.defineProperty(exports, "useThemeTokensCallback", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.useThemeTokensCallback;
+  }
+});
 Object.defineProperty(exports, "useViewport", {
   enumerable: true,
   get: function () {

package/lib-module/ActivityIndicator/Spinner.js

@@ -57,6 +57,7 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
         r: "20",
         strokeDasharray: reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
         strokeDashoffset: 0,
+        vectorEffect: "non-scaling-stroke",
         children: reduceMotion ? null : /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("animate", {
             attributeName: "stroke-dashoffset",

package/lib-module/Button/Button.js

@@ -3,6 +3,7 @@ import ButtonBase from './ButtonBase';
 import buttonPropTypes, { textAndA11yText } from './propTypes';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps } from '../utils/props';
+import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -11,7 +12,12 @@ const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
     variant,
     ...props
   } = _ref;
-  const getTokens = useThemeTokensCallback('Button', tokens, variant);
+  const viewport = useViewport();
+  const buttonVariant = {
+    viewport,
+    ...variant
+  };
+  const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant);
   return /*#__PURE__*/_jsx(ButtonBase, { ...props,
     tokens: getTokens,
     accessibilityRole: accessibilityRole,

package/lib-module/Button/ButtonLink.js

@@ -3,6 +3,7 @@ import ButtonBase from './ButtonBase';
 import buttonPropTypes, { textAndA11yText } from './propTypes';
 import { a11yProps, hrefAttrsProp, linkProps } from '../utils/props';
 import { useThemeTokensCallback } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
 /**
  * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
  * ButtonLink is a block-level component and should not be used inline.
@@ -21,7 +22,12 @@ const ButtonLink = /*#__PURE__*/forwardRef((_ref, ref) => {
     hrefAttrs,
     rest
   } = hrefAttrsProp.bundle(props);
-  const getTokens = useThemeTokensCallback('Button', tokens, variant);
+  const viewport = useViewport();
+  const buttonVariant = {
+    viewport,
+    ...variant
+  };
+  const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant);
   return /*#__PURE__*/_jsx(ButtonBase, {
     ref: ref,
     accessibilityRole: accessibilityRole,

package/lib-module/Link/ChevronLink.js

@@ -15,7 +15,7 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     direction = 'right',
     children,
-    tokens,
+    tokens = {},
     variant,
     dataSet,
     ...linkProps
@@ -29,10 +29,13 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
       iconDisplace,
       height,
       textLineHeight,
+      fontSize,
       ...otherTokens
     } = getChevronTokens(linkState);
-    return { ...selectTokens('Link', otherTokens),
+    const linkTokens = selectTokens('Link', otherTokens);
+    return { ...linkTokens,
       height,
+      blockFontSize: tokens.fontSize ?? fontSize,
       textLineHeight,
       icon: direction === 'right' ? rightIcon : leftIcon,
       iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0

package/lib-module/Link/LinkBase.js

@@ -176,15 +176,10 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     ,
     ref: ref,
     style: linkState => {
-      const {
-        height,
-        ...themeTokens
-      } = resolveLinkTokens(linkState);
+      const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      return [height ? {
-        height
-      } : {}, outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -249,7 +244,7 @@ const staticStyles = StyleSheet.create({
     justifyContent: 'flex-start'
   },
   baseline: {
-    alignSelf: 'center'
+    alignSelf: 'baseline'
   }
 });
 export default withLinkRouter(LinkBase);

package/lib-module/List/ListItem.js

@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import ListItemBase from './ListItemBase';
-import Typography from '../Typography';
 import { useThemeTokens } from '../ThemeProvider';
 import { variantProp } from '../utils';
 /**
@@ -8,7 +7,6 @@ import { variantProp } from '../utils';
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const ListItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     tokens,
@@ -18,17 +16,12 @@ const ListItem = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...listItemProps
   } = _ref;
   const themeTokens = useThemeTokens('List', tokens, variant);
-  return /*#__PURE__*/_jsxs(ListItemBase, {
+  return /*#__PURE__*/_jsx(ListItemBase, {
     tokens: themeTokens,
     ref: ref,
     ...listItemProps,
-    children: [Boolean(title) && /*#__PURE__*/_jsx(Typography, {
-      variant: {
-        size: 'h4',
-        bold: true
-      },
-      children: title
-    }), children]
+    title: title,
+    children: children
   });
 });
 ListItem.displayName = 'ListItem';

package/lib-module/List/ListItemBase.js

@@ -6,8 +6,8 @@ import PropTypes from 'prop-types';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 import ListItemContent from './ListItemContent';
 import ListItemMark from './ListItemMark';
+import Typography from '../Typography';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
@@ -46,6 +46,7 @@ const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
     iconSize,
     showDivider,
     children,
+    title,
     isLastItem,
     accessibilityRole = Platform.select({
       web: 'listitem',
@@ -85,15 +86,30 @@ const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
       iconColor,
       iconSize,
       isLastItem
-    }) : /*#__PURE__*/_jsxs(_Fragment, {
+    }) : /*#__PURE__*/_jsxs(View, {
+      style: [{
+        flexDirection: 'row',
+        flex: 'wrap'
+      }, !title && {
+        alignItems: 'center'
+      }],
       children: [/*#__PURE__*/_jsx(ListItemMark, {
         tokens: tokens,
         icon: icon,
         iconColor: iconColor,
         iconSize: iconSize
-      }), /*#__PURE__*/_jsx(ListItemContent, {
-        tokens: tokens,
-        children: children
+      }), /*#__PURE__*/_jsxs(View, {
+        style: staticStyles.titleAndContentContainer,
+        children: [Boolean(title) && /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: 'h4',
+            bold: true
+          },
+          children: title
+        }), /*#__PURE__*/_jsx(ListItemContent, {
+          tokens: tokens,
+          children: children
+        })]
       })]
     })
   });
@@ -102,6 +118,9 @@ ListItemBase.displayName = 'ListItem';
 const staticStyles = StyleSheet.create({
   itemContainer: {
     flexDirection: 'row'
+  },
+  titleAndContentContainer: {
+    flexDirection: 'column'
   }
 });
 ListItemBase.propTypes = { ...selectedSystemPropTypes,

package/lib-module/index.js

@@ -54,6 +54,6 @@ export { default as BaseProvider } from './BaseProvider';
 export { useHydrationContext } from './BaseProvider/HydrationContext';
 export { default as Validator } from './Validator';
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
-export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider';
+export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, useThemeTokensCallback, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider';
 export * from './utils';
 export { Portal } from '@gorhom/portal';

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.0",
-    "@telus-uds/system-theme-tokens": "^2.22.0",
+    "@telus-uds/system-theme-tokens": "^2.24.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.37.0"
+  "version": "1.39.0"
 }

package/src/ActivityIndicator/Spinner.jsx

@@ -53,6 +53,7 @@ const Spinner = forwardRef(({ size, color, thickness, label, isStatic = false },
           r="20"
           strokeDasharray={reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE]}
           strokeDashoffset={0}
+          vectorEffect="non-scaling-stroke"
         >
           {reduceMotion ? null : (
             <>

package/src/Button/Button.jsx

@@ -4,9 +4,12 @@ import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import { a11yProps } from '../utils/props'
+import { useViewport } from '../ViewportProvider'
 
 const Button = forwardRef(({ accessibilityRole = 'button', tokens, variant, ...props }, ref) => {
-  const getTokens = useThemeTokensCallback('Button', tokens, variant)
+  const viewport = useViewport()
+  const buttonVariant = { viewport, ...variant }
+  const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant)
   return (
     <ButtonBase {...props} tokens={getTokens} accessibilityRole={accessibilityRole} ref={ref} />
   )

package/src/Button/ButtonLink.jsx

@@ -3,6 +3,7 @@ import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
 import { a11yProps, hrefAttrsProp, linkProps } from '../utils/props'
 import { useThemeTokensCallback } from '../ThemeProvider'
+import { useViewport } from '../ViewportProvider'
 
 /**
  * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
@@ -11,7 +12,9 @@ import { useThemeTokensCallback } from '../ThemeProvider'
 const ButtonLink = forwardRef(
   ({ accessibilityRole = 'link', tokens, variant, dataSet, ...props }, ref) => {
     const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
-    const getTokens = useThemeTokensCallback('Button', tokens, variant)
+    const viewport = useViewport()
+    const buttonVariant = { viewport, ...variant }
+    const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant)
     return (
       <ButtonBase
         ref={ref}

package/src/Link/ChevronLink.jsx

@@ -12,14 +12,24 @@ import LinkBase from './LinkBase'
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
 const ChevronLink = forwardRef(
-  ({ direction = 'right', children, tokens, variant, dataSet, ...linkProps }, ref) => {
+  ({ direction = 'right', children, tokens = {}, variant, dataSet, ...linkProps }, ref) => {
     const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
     const applyChevronTokens = (linkState) => {
-      const { leftIcon, rightIcon, iconDisplace, height, textLineHeight, ...otherTokens } =
-        getChevronTokens(linkState)
+      const {
+        leftIcon,
+        rightIcon,
+        iconDisplace,
+        height,
+        textLineHeight,
+        fontSize,
+        ...otherTokens
+      } = getChevronTokens(linkState)
+      const linkTokens = selectTokens('Link', otherTokens)
+
       return {
-        ...selectTokens('Link', otherTokens),
+        ...linkTokens,
         height,
+        blockFontSize: tokens.fontSize ?? fontSize,
         textLineHeight,
         icon: direction === 'right' ? rightIcon : leftIcon,
         iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0

package/src/Link/LinkBase.jsx

@@ -150,12 +150,11 @@ const LinkBase = forwardRef(
         inlineFlex={hasIcon} // assuming links without icons should be inline (even if they are long)
         ref={ref}
         style={(linkState) => {
-          const { height, ...themeTokens } = resolveLinkTokens(linkState)
+          const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)
           const decorationStyles = selectDecorationStyles(themeTokens)
 
           return [
-            height ? { height } : {},
             outerBorderStyles,
             blockLeftStyle,
             decorationStyles,
@@ -226,7 +225,7 @@ const staticStyles = StyleSheet.create({
     justifyContent: 'flex-start'
   },
   baseline: {
-    alignSelf: 'center'
+    alignSelf: 'baseline'
   }
 })
 

package/src/List/ListItem.jsx

@@ -1,7 +1,6 @@
 import React, { forwardRef } from 'react'
 
 import ListItemBase from './ListItemBase'
-import Typography from '../Typography'
 import { useThemeTokens } from '../ThemeProvider'
 import { variantProp } from '../utils'
 
@@ -11,8 +10,7 @@ import { variantProp } from '../utils'
 const ListItem = forwardRef(({ tokens, variant, children, title, ...listItemProps }, ref) => {
   const themeTokens = useThemeTokens('List', tokens, variant)
   return (
-    <ListItemBase tokens={themeTokens} ref={ref} {...listItemProps}>
-      {Boolean(title) && <Typography variant={{ size: 'h4', bold: true }}>{title}</Typography>}
+    <ListItemBase tokens={themeTokens} ref={ref} {...listItemProps} title={title}>
       {children}
     </ListItemBase>
   )

package/src/List/ListItemBase.jsx

@@ -5,6 +5,7 @@ import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps
 
 import ListItemContent from './ListItemContent'
 import ListItemMark from './ListItemMark'
+import Typography from '../Typography'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -31,6 +32,7 @@ const ListItemBase = forwardRef(
       iconSize,
       showDivider,
       children,
+      title,
       isLastItem,
       accessibilityRole = Platform.select({ web: 'listitem', default: undefined }),
       ...rest
@@ -69,10 +71,23 @@ const ListItemBase = forwardRef(
         {typeof children === 'function' ? (
           children({ tokens, icon, iconColor, iconSize, isLastItem })
         ) : (
-          <>
+          <View
+            style={[
+              {
+                flexDirection: 'row',
+                flex: 'wrap'
+              },
+              !title && { alignItems: 'center' }
+            ]}
+          >
             <ListItemMark tokens={tokens} icon={icon} iconColor={iconColor} iconSize={iconSize} />
-            <ListItemContent tokens={tokens}>{children}</ListItemContent>
-          </>
+            <View style={staticStyles.titleAndContentContainer}>
+              {Boolean(title) && (
+                <Typography variant={{ size: 'h4', bold: true }}>{title}</Typography>
+              )}
+              <ListItemContent tokens={tokens}>{children}</ListItemContent>
+            </View>
+          </View>
         )}
       </View>
     )
@@ -83,7 +98,8 @@ ListItemBase.displayName = 'ListItem'
 const staticStyles = StyleSheet.create({
   itemContainer: {
     flexDirection: 'row'
-  }
+  },
+  titleAndContentContainer: { flexDirection: 'column' }
 })
 
 ListItemBase.propTypes = {

package/src/index.js

@@ -60,6 +60,7 @@ export {
   useTheme,
   useSetTheme,
   useThemeTokens,
+  useThemeTokensCallback,
   getThemeTokens,
   applyOuterBorder,
   applyTextStyles,