@telus-uds/components-base 1.38.0 → 1.40.0

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # Change Log - @telus-uds/components-base
 
-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 Tue, 09 May 2023 00:20:29 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.40.0
+
+Tue, 09 May 2023 00:20:29 GMT
+
+### Minor changes
+
+- Added 'strikeThrough' property (kyle.king2@telus.com)
+- remove screenReaderChanged event from A11yInfoProvider and event tracking (mauricio.batresmontejo@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.25.0
+
+## 1.39.0
+
+Mon, 01 May 2023 22:09:07 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:32:16 GMT
+Thu, 27 Apr 2023 14:41:57 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -23,6 +23,39 @@
         "detailsContainerPadding": "size",
         "playIconContainerBackground": "color"
       },
+      "VideoPickerThumbnail": {
+        "splashButtonRadius": "radius",
+        "borderWidth": "border",
+        "borderColor": "color",
+        "borderRadius": "radius",
+        "pressablePaddingVertical": "size",
+        "pressablePaddingHorizontal": "size",
+        "pressableBorderTopWidth": "border",
+        "pressableBorderTopColor": "color",
+        "pressablePaddingBottom": "size",
+        "titleColor": "color",
+        "subTitleColor": "color"
+      },
+      "VideoPickerSlider": {
+        "previousIcon": "icon",
+        "nextIcon": "icon"
+      },
+      "VideoPicker": {
+        "framedMaxHeight": "size",
+        "framedContainerBackgroundColor": "color",
+        "framedContainerBorderWidth": "border",
+        "framedContainerBorderColor": "color",
+        "framedContainerBorderRadius": "radius",
+        "framedContainerPadding": "size",
+        "stackViewDividerColor": "color"
+      },
+      "Disclaimer": {
+        "color": "color",
+        "fontName": "fontName",
+        "fontWeight": "fontWeight",
+        "fontSize": "fontSize",
+        "lineHeight": "lineHeight"
+      },
       "Table": {
         "tablePaddingBottom": "size",
         "cellHeadingBackground": "color",
@@ -35,7 +68,10 @@
         "cellPaddingTop": "size",
         "cellPaddingRight": "size",
         "cellPaddingLeft": "size",
-        "cellPaddingBottom": "size"
+        "cellPaddingBottom": "size",
+        "fontWeight": "fontWeight",
+        "fontName": "fontName",
+        "fontSize": "fontSize"
       },
       "Image": {
         "borderRadius": "radius"
@@ -121,7 +157,10 @@
       "FootnoteLink": {
         "lineHeight": "lineHeight",
         "paddingLeft": "size",
-        "paddingRight": "size"
+        "paddingRight": "size",
+        "color": "color",
+        "fontName": "fontName",
+        "fontWeight": "fontWeight"
       },
       "WaffleGrid": {
         "rowBorderWidth": "border",
@@ -166,9 +205,12 @@
         "closeButtonMarginRight": "size",
         "closeButtonMarginBottom": "size",
         "closeButtonWidth": "size",
-        "closeButtonIconSize": "size"
+        "closeButtonIconSize": "size",
+        "closeIcon": "icon"
       },
       "PriceLockup": {
+        "fontName": "fontName",
+        "fontWeight": "fontWeight",
         "footnoteMarginTop": "size",
         "footnoteGap": "size",
         "bottomTextMarginTop": "size",
@@ -176,9 +218,36 @@
         "bottomLinksMarginLeft": "size",
         "topTextMarginBottom": "size",
         "strikeThroughHeight": "size",
-        "strikeThroughBackground": "color",
+        "strikeThroughColor": "color",
         "fontColor": "color",
-        "dividerColor": "color"
+        "dividerColor": "color",
+        "topTextFontSize": "fontSize",
+        "topTextLineHeight": "lineHeight",
+        "currencySymbolFontSize": "fontSize",
+        "currencySymbolLineHeight": "lineHeight",
+        "currencySymbolFontName": "fontName",
+        "currencySymbolFontWeight": "fontWeight",
+        "amountFontSize": "fontSize",
+        "amountLineHeight": "lineHeight",
+        "amountLetterSpacing": "letterSpacing",
+        "amountFontWeight": "fontWeight",
+        "amountFontName": "fontName",
+        "centsFontSize": "fontSize",
+        "centsLineHeight": "lineHeight",
+        "centsFontName": "fontName",
+        "centsFontWeight": "fontWeight",
+        "topTextFontName": "fontName",
+        "topTextFontWeight": "fontWeight",
+        "rateFontSize": "fontSize",
+        "rateLineHeight": "lineHeight",
+        "rateFontName": "fontName",
+        "rateFontWeight": "fontWeight",
+        "bottomTextFontSize": "fontSize",
+        "bottomTextLineHeight": "lineHeight",
+        "footnoteLinkColor": "color",
+        "footnoteLinkFontName": "fontName",
+        "footnoteLinkFontWeight": "fontWeight",
+        "footnoteLinkFontSize": "fontSize"
       },
       "ActivityIndicator": {
         "size": "size",
@@ -414,7 +483,7 @@
         "labelMarginLeft": "size"
       },
       "ChevronLink": {
-        "height": "size",
+        "fontSize": "fontSize",
         "textLineHeight": "lineHeight",
         "color": "color",
         "outerBorderColor": "color",
@@ -718,6 +787,32 @@
         "closeIconSize": "size",
         "closePadding": "size"
       },
+      "NavigationBar": {
+        "alignSelf": "flexAlign",
+        "backgroundColor": "color",
+        "borderColor": "color",
+        "borderRadius": "radius",
+        "borderWidth": "border",
+        "color": "color",
+        "fontName": "fontName",
+        "fontSize": "fontSize",
+        "fontWeight": "fontWeight",
+        "lineHeight": "lineHeight",
+        "minWidth": "size",
+        "opacity": "opacity",
+        "outerBackgroundColor": "color",
+        "outerBorderColor": "color",
+        "outerBorderGap": "size",
+        "outerBorderWidth": "border",
+        "paddingBottom": "size",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "paddingTop": "size",
+        "shadow": "shadow",
+        "textAlign": "flexJustifyContent",
+        "width": "size",
+        "icoMenu": "icon"
+      },
       "Notification": {
         "backgroundColor": "color",
         "borderBottomWidth": "border",
@@ -1001,7 +1096,10 @@
         "curveWidth": "size",
         "curveAfterBackgroundColor": "color",
         "curveAfterHeight": "size",
-        "gradient": "gradient"
+        "gradient": "gradient",
+        "fontColor": "color",
+        "borderRadiusBottomLeft": "size",
+        "borderRadiusBottomRight": "size"
       },
       "Search": {
         "backgroundColor": "color",
@@ -1360,9 +1458,7 @@
         "animationColorBefore": "color",
         "animationColorAfter": "color",
         "animationDivColorBefore": "color",
-        "animationDivColorAfter": "color",
-        "animationFillColorBefore": "color",
-        "animationFillColorAfter": "color"
+        "animationDivColorAfter": "color"
       },
       "ToggleSwitch": {
         "borderColor": "color",
@@ -1410,8 +1506,14 @@
         "flexShrink": "integer"
       },
       "Breadcrumbs": {
+        "fontWeight": "fontWeight",
+        "fontName": "fontName",
+        "fontSize": "fontSize",
+        "color": "color",
+        "currentColor": "color",
         "icon": "icon",
         "iconColor": "color",
+        "iconSize": "size",
         "iconPadding": "size",
         "listItemPadding": "size"
       },
@@ -2021,6 +2123,60 @@
           "type": "state"
         }
       },
+      "NavigationBar": {
+        "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"
+          ]
+        },
+        "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"
+        },
+        "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"
+          ]
+        },
+        "selected": {
+          "description": "Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.",
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "expanded": {
+          "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "viewport": {
+          "description": "The size label for the current screen viewport based on the current screen width",
+          "values": [
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl"
+          ],
+          "type": "state"
+        }
+      },
       "Notification": {
         "system": {
           "values": [
@@ -10300,6 +10456,17 @@
             "required": false,
             "description": "Works the same as css text-align, note that RN doesn't support \"start\" or \"end\" (see https://reactnative.dev/docs/text-style-props#textalign)\nJustify is known to make text harder to read, especially for people with dyslexia (see https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#accessibility_concerns)"
           },
+          "strikeThrough": {
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            },
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "Renders the text with \"text-decoration: 'line-through'\" applied."
+          },
           "tokens": {
             "type": {
               "name": "custom",
@@ -12810,10 +12977,14 @@
             "description": ""
           },
           "tokens": {
+            "defaultValue": {
+              "value": "{}",
+              "computed": false
+            },
             "type": {
               "name": "custom",
               "raw": {
-                "height": "size",
+                "fontSize": "fontSize",
                 "textLineHeight": "lineHeight",
                 "color": "color",
                 "outerBorderColor": "color",

package/lib/A11yInfoProvider/index.js

@@ -39,8 +39,6 @@ const A11yInfoProvider = _ref => {
 
     const motionSubscription = _AccessibilityInfo.default.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
 
-    const screenReaderSubscription = _AccessibilityInfo.default.addEventListener('screenReaderChanged', setScreenReaderEnabled);
-
     const setInitialA11yInfo = async () => {
       const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([_AccessibilityInfo.default.isReduceMotionEnabled(), _AccessibilityInfo.default.isScreenReaderEnabled()]); // Browsers can't detect screen readers; in RNW isScreenReaderEnabled() is always `true`
       // https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/AccessibilityInfo/index.js#L14
@@ -61,12 +59,6 @@ const A11yInfoProvider = _ref => {
       } else if (typeof _AccessibilityInfo.default.removeEventListener === 'function') {
         _AccessibilityInfo.default.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
       }
-
-      if (typeof (screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove) === 'function') {
-        screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove();
-      } else if (typeof _AccessibilityInfo.default.removeEventListener === 'function') {
-        _AccessibilityInfo.default.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
-      }
     };
   }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ReducedMotionContext.Provider, {

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

@@ -71,6 +71,7 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     align = undefined,
     tokens,
     dataSet,
+    strikeThrough = false,
     ...rest
   } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -117,16 +118,24 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     return resetTagStyling(children);
   };
 
+  const textDecorationLine = strikeThrough ? 'line-through' : 'none';
+  const textStyles = resolvedTextProps.style ? { ...resolvedTextProps.style,
+    textDecorationLine
+  } : {
+    textDecorationLine
+  };
   return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     ...containerProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...resolvedTextProps,
+      style: textStyles,
       children: sanitizeChildren(children)
     })
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
     ref: ref,
     ...containerProps,
     ...resolvedTextProps,
+    style: textStyles,
     children: sanitizeChildren(children)
   });
 });
@@ -136,6 +145,11 @@ Typography.propTypes = { ...selectedContainerPropTypes,
   tokens: (0, _utils2.getTokensPropType)('Typography'),
   variant: _utils2.variantProp.propType,
 
+  /**
+   * Renders the text with "text-decoration: 'line-through'" applied.
+   */
+  strikeThrough: _propTypes.default.bool,
+
   /**
    * Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.
    *

package/lib-module/A11yInfoProvider/index.js

@@ -20,7 +20,6 @@ const A11yInfoProvider = _ref => {
     }
 
     const motionSubscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
-    const screenReaderSubscription = AccessibilityInfo.addEventListener('screenReaderChanged', setScreenReaderEnabled);
 
     const setInitialA11yInfo = async () => {
       const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([AccessibilityInfo.isReduceMotionEnabled(), AccessibilityInfo.isScreenReaderEnabled()]); // Browsers can't detect screen readers; in RNW isScreenReaderEnabled() is always `true`
@@ -42,12 +41,6 @@ const A11yInfoProvider = _ref => {
       } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
         AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
       }
-
-      if (typeof (screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove) === 'function') {
-        screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove();
-      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
-        AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
-      }
     };
   }, []);
   return /*#__PURE__*/_jsx(ReducedMotionContext.Provider, {

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

@@ -50,6 +50,7 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     align = undefined,
     tokens,
     dataSet,
+    strikeThrough = false,
     ...rest
   } = _ref2;
   const viewport = useViewport();
@@ -95,16 +96,24 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     return resetTagStyling(children);
   };
 
+  const textDecorationLine = strikeThrough ? 'line-through' : 'none';
+  const textStyles = resolvedTextProps.style ? { ...resolvedTextProps.style,
+    textDecorationLine
+  } : {
+    textDecorationLine
+  };
   return block ? /*#__PURE__*/_jsx(View, {
     ref: ref,
     ...containerProps,
     children: /*#__PURE__*/_jsx(Text, { ...resolvedTextProps,
+      style: textStyles,
       children: sanitizeChildren(children)
     })
   }) : /*#__PURE__*/_jsx(Text, {
     ref: ref,
     ...containerProps,
     ...resolvedTextProps,
+    style: textStyles,
     children: sanitizeChildren(children)
   });
 });
@@ -114,6 +123,11 @@ Typography.propTypes = { ...selectedContainerPropTypes,
   tokens: getTokensPropType('Typography'),
   variant: variantProp.propType,
 
+  /**
+   * Renders the text with "text-decoration: 'line-through'" applied.
+   */
+  strikeThrough: PropTypes.bool,
+
   /**
    * Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.
    *

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.23.0",
+    "@telus-uds/system-theme-tokens": "^2.25.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.38.0"
+  "version": "1.40.0"
 }

package/src/A11yInfoProvider/index.jsx

@@ -20,10 +20,6 @@ const A11yInfoProvider = ({ children }) => {
       'reduceMotionChanged',
       setReduceMotionEnabled
     )
-    const screenReaderSubscription = AccessibilityInfo.addEventListener(
-      'screenReaderChanged',
-      setScreenReaderEnabled
-    )
 
     const setInitialA11yInfo = async () => {
       const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([
@@ -50,12 +46,6 @@ const A11yInfoProvider = ({ children }) => {
       } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
         AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled)
       }
-
-      if (typeof screenReaderSubscription?.remove === 'function') {
-        screenReaderSubscription?.remove()
-      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
-        AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled)
-      }
     }
   }, [])
 

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/Typography/Typography.jsx

@@ -53,6 +53,7 @@ const Typography = forwardRef(
       align = undefined,
       tokens,
       dataSet,
+      strikeThrough = false,
       ...rest
     },
     ref
@@ -100,12 +101,18 @@ const Typography = forwardRef(
       return resetTagStyling(children)
     }
 
+    const textDecorationLine = strikeThrough ? 'line-through' : 'none'
+    const textStyles = resolvedTextProps.style
+      ? { ...resolvedTextProps.style, textDecorationLine }
+      : { textDecorationLine }
     return block ? (
       <View ref={ref} {...containerProps}>
-        <Text {...resolvedTextProps}>{sanitizeChildren(children)}</Text>
+        <Text {...resolvedTextProps} style={textStyles}>
+          {sanitizeChildren(children)}
+        </Text>
       </View>
     ) : (
-      <Text ref={ref} {...containerProps} {...resolvedTextProps}>
+      <Text ref={ref} {...containerProps} {...resolvedTextProps} style={textStyles}>
         {sanitizeChildren(children)}
       </Text>
     )
@@ -118,6 +125,10 @@ Typography.propTypes = {
   ...selectedTextPropTypes,
   tokens: getTokensPropType('Typography'),
   variant: variantProp.propType,
+  /**
+   * Renders the text with "text-decoration: 'line-through'" applied.
+   */
+  strikeThrough: PropTypes.bool,
   /**
    * Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.
    *