@telus-uds/components-base 1.77.0 → 1.78.0

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 14 Feb 2024 02:21:15 GMT and should not be manually modified.
+This log was last generated on Fri, 23 Feb 2024 19:32:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.78.0
+
+Fri, 23 Feb 2024 19:32:18 GMT
+
+### Minor changes
+
+- refactoring Card component to add media queries as an option to prevent layout shifts (hoss.agina@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.52.0
+
+### Patches
+
+- Onpress function reverted due to several bugs (35577399+JoshHC@users.noreply.github.com)
+- fix Link component keyboard interaction (guillermo.peitzner@telus.com)
+- prevent typography dataset property to be overruled (guillermo.peitzner@telus.com)
+- New changes of notification component merged with old changes to support the users in the migraiton to the new ones (35577399+JoshHC@users.noreply.github.com)
+
+## 1.77.1
+
+Tue, 20 Feb 2024 23:14:38 GMT
+
+### Patches
+
+- refactor getsteplabel function so step tracker displays multiple labels (evander.owusu@telus.com)
+- fix pagination button-base props warning (guillermo.peitzner@telus.com)
+- fix unexpected scroll when pressing the chevron-link component using the space key (guillermo.peitzner@telus.com)
+
 ## 1.77.0
 
-Wed, 14 Feb 2024 02:21:15 GMT
+Wed, 14 Feb 2024 02:29:37 GMT
 
 ### Minor changes
 

package/lib/Card/Card.js

@@ -78,7 +78,14 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     ...rest
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Card', tokens, variant, {
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokens : _ThemeProvider.useThemeTokens;
+  const themeTokens = useTokens('Card', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
   const getThemeTokens = (0, _ThemeProvider.useThemeTokensCallback)('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
@@ -94,11 +101,28 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     paddingRight,
     ...restOfTokens
   } = themeTokens;
+  let cardStyles;
+  let mediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const mediaQueryStyleSheet = (0, _utils.createMediaQueryStyles)(themeTokens);
+    const {
+      ids,
+      styles
+    } = _utils.StyleSheet.create({
+      card: mediaQueryStyleSheet
+    });
+    cardStyles = styles.card;
+    mediaIds = ids.card;
+  } else {
+    cardStyles = themeTokens;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
       ref: ref,
-      tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : themeTokens,
-      dataSet: dataSet,
+      tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : cardStyles,
+      dataSet: mediaIds && {
+        media: mediaIds
+      },
       ...selectProps(rest),
       children: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableCardBase.default, {

package/lib/Link/ChevronLink.js

@@ -25,7 +25,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     tokens = {},
     variant,
     dataSet,
-    onPress,
     ...otherlinkProps
   } = _ref;
   const getChevronTokens = (0, _ThemeProvider.useThemeTokensCallback)('ChevronLink', tokens, variant);
@@ -54,7 +53,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     tokens: getTokens,
     dataSet: dataSet,
     ref: ref,
-    onPress: onPress,
     children: children
   });
 });

package/lib/Link/InlinePressable.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -25,29 +24,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-/* eslint-disable react/prop-types */const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+// eslint-disable-next-line react/prop-types
+const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
     inlineFlex = true,
     style,
-    onPress,
     ...props
   } = _ref;
-  const handlePress = (0, _react.useCallback)(() => {
-    if (onPress) {
-      onPress();
-    }
-  }, [onPress]);
-  const handleKeyPress = (0, _react.useCallback)(e => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      handlePress();
-    }
-  }, [handlePress]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     style: pressState => [typeof style === 'function' ? style(pressState) : style, staticStyles[inlineFlex ? 'inlineFlex' : 'inline']],
-    onPress: handlePress,
-    onKeyDown: _Platform.default.OS === 'web' ? handleKeyPress : undefined,
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });

package/lib/Link/LinkBase.js

@@ -187,7 +187,6 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     // assuming links without icons should be inline (even if they are long)
     ,
     ref: ref,
-    keyboardShouldPersistTaps: "handled",
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);

package/lib/Pagination/PageButton.js

@@ -11,7 +11,6 @@ var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
 var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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; }
@@ -34,11 +33,11 @@ const PageButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getTokens(buttonState));
   const activeProps = isActive ? {
     selected: true,
-    ..._utils.a11yProps.nonFocusableProps,
+    ..._utils.a11yProps.nonFocusableProps
     // a brute fix for the focus state being stuck on an active item since it becomes non-focusable
     // (see https://github.com/telus/universal-design-system/pull/577#issuecomment-931344107)
-    key: 'active-item'
   } : {};
+  const key = isActive ? 'active-item' : undefined;
   const accessibilityRole = href !== undefined ? 'link' : 'button';
   const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : '';
   const accessibilityLabel = `${getCopy('goToLabel')} ${label}${activeLabel}`;
@@ -54,13 +53,13 @@ const PageButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     hrefAttrs,
     ...rest
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+  return /*#__PURE__*/(0, _react.createElement)(_ButtonBase.default, {
     ref: ref,
     ...buttonProps,
     tokens: getButtonTokens,
-    ...activeProps,
-    children: label
-  });
+    key: key,
+    ...activeProps
+  }, label);
 });
 PageButton.displayName = 'PageButton';
 PageButton.propTypes = {

package/lib/StackView/getStackedContent.js

@@ -68,17 +68,16 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
     const commonProps = {
       testID,
-      key: testID,
       space
     };
     const separator = divider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
       vertical: direction.startsWith('row'),
       ...dividerProps,
       ...commonProps
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+    }, testID) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
       direction: direction.startsWith('row') ? 'row' : 'column',
       ...commonProps
-    });
+    }, testID);
     return [...newChildren, separator, item];
   }, []);
   return content;

package/lib/StepTracker/StepTracker.js

@@ -74,7 +74,7 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
  * ## Usability and A11y guidelines
  *
  * Keep in mind that in its current implementation this is not an interactive
- * component and can’t be used to navigate between steps. The application
+ * component and can't be used to navigate between steps. The application
  * must provide its own navigation mechanism and state control. That is the
  * main reason the component assumes the `progressbar` role in terms of
  * accessibility. This also makes it extremely important to make sure you
@@ -118,7 +118,13 @@ const StepTracker = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     copy
   });
   const stepTrackerLabel = showStepTrackerLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepTrackerLabel : getCopy('stepTrackerLabel')).replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]) : '';
-  const getStepLabel = index => themeTokens.showStepLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepLabel : getCopy('stepLabel')).replace('%{stepNumber}', index + 1) : '';
+  const getStepLabel = index => {
+    if (themeTokens.showStepLabel) {
+      var _getCopy;
+      return (_getCopy = getCopy(index + 1)) === null || _getCopy === void 0 ? void 0 : _getCopy.stepLabel.replace('%{stepNumber}', index + 1);
+    }
+    return '';
+  };
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();

package/lib/StepTracker/dictionary.js

@@ -11,7 +11,7 @@ var _default = {
       stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
     },
     2: {
-      stepLabel: '%{stepNumber}.',
+      stepLabel: 'Step %{stepNumber}',
       stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
     },
     3: {
@@ -25,7 +25,7 @@ var _default = {
       stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
     },
     2: {
-      stepLabel: '%{stepNumber}.',
+      stepLabel: 'Étape %{stepNumber}',
       stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
     },
     3: {

package/lib/Typography/Typography.js

@@ -104,7 +104,6 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   }
   const resolvedTextProps = {
     ...selectTextProps(rest),
-    dataSet,
     maxFontSizeMultiplier
   };
   const containerProps = {
@@ -136,15 +135,17 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     }
     return resetTagStyling(children);
   };
+  const dataSetValue = mediaIds ? {
+    media: mediaIds,
+    ...dataSet
+  } : dataSet;
   return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     ...containerProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       ...resolvedTextProps,
       style: textStyles,
-      dataSet: mediaIds && {
-        media: mediaIds
-      },
+      dataSet: dataSetValue,
       children: sanitizeChildren(children)
     })
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
@@ -152,9 +153,7 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ...containerProps,
     ...resolvedTextProps,
     style: textStyles,
-    dataSet: mediaIds && {
-      media: mediaIds
-    },
+    dataSet: dataSetValue,
     children: sanitizeChildren(children)
   });
 });
@@ -199,7 +198,11 @@ Typography.propTypes = {
   /**
    * Same children allowed as a React Native <Text> node
    */
-  children: _propTypes.default.node
+  children: _propTypes.default.node,
+  /**
+   * Data attributes to be added to the element
+   */
+  dataSet: _propTypes.default.object
 };
 var _default = Typography;
 exports.default = _default;

package/lib-module/Card/Card.js

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { getTokensPropType, variantProp } from '../utils';
+import { useThemeTokens, useThemeTokensCallback, useResponsiveThemeTokens, useTheme } from '../ThemeProvider';
+import { getTokensPropType, variantProp, StyleSheet, createMediaQueryStyles } from '../utils';
 import { useViewport } from '../ViewportProvider';
 import { a11yProps, selectSystemProps, viewProps } from '../utils/props';
 import CardBase from './CardBase';
@@ -71,7 +71,14 @@ const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   const viewport = useViewport();
-  const themeTokens = useThemeTokens('Card', tokens, variant, {
+  const {
+    themeOptions
+  } = useTheme();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
+  const themeTokens = useTokens('Card', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
   const getThemeTokens = useThemeTokensCallback('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
@@ -87,11 +94,28 @@ const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
     paddingRight,
     ...restOfTokens
   } = themeTokens;
+  let cardStyles;
+  let mediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const mediaQueryStyleSheet = createMediaQueryStyles(themeTokens);
+    const {
+      ids,
+      styles
+    } = StyleSheet.create({
+      card: mediaQueryStyleSheet
+    });
+    cardStyles = styles.card;
+    mediaIds = ids.card;
+  } else {
+    cardStyles = themeTokens;
+  }
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(CardBase, {
       ref: ref,
-      tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : themeTokens,
-      dataSet: dataSet,
+      tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : cardStyles,
+      dataSet: mediaIds && {
+        media: mediaIds
+      },
       ...selectProps(rest),
       children: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(PressableCardBase, {

package/lib-module/Link/ChevronLink.js

@@ -18,7 +18,6 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
     tokens = {},
     variant,
     dataSet,
-    onPress,
     ...otherlinkProps
   } = _ref;
   const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant);
@@ -47,7 +46,6 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
     tokens: getTokens,
     dataSet: dataSet,
     ref: ref,
-    onPress: onPress,
     children: children
   });
 });

package/lib-module/Link/InlinePressable.js

@@ -1,7 +1,6 @@
-import React, { forwardRef, useCallback } from 'react';
+import React, { forwardRef } from 'react';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Platform from "react-native-web/dist/exports/Platform";
 /**
  * @typedef {import('react-native').PressableProps} PressableProps
  */
@@ -14,31 +13,18 @@ import Platform from "react-native-web/dist/exports/Platform";
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-/* eslint-disable react/prop-types */
+// eslint-disable-next-line react/prop-types
 import { jsx as _jsx } from "react/jsx-runtime";
 const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     inlineFlex = true,
     style,
-    onPress,
     ...props
   } = _ref;
-  const handlePress = useCallback(() => {
-    if (onPress) {
-      onPress();
-    }
-  }, [onPress]);
-  const handleKeyPress = useCallback(e => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      handlePress();
-    }
-  }, [handlePress]);
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     style: pressState => [typeof style === 'function' ? style(pressState) : style, staticStyles[inlineFlex ? 'inlineFlex' : 'inline']],
-    onPress: handlePress,
-    onKeyDown: Platform.OS === 'web' ? handleKeyPress : undefined,
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });

package/lib-module/Link/LinkBase.js

@@ -178,7 +178,6 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     // assuming links without icons should be inline (even if they are long)
     ,
     ref: ref,
-    keyboardShouldPersistTaps: "handled",
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);

package/lib-module/Pagination/PageButton.js

@@ -5,7 +5,7 @@ import { useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps, copyPropTypes, getTokensPropType, hrefAttrsProp, linkProps, selectTokens, variantProp, withLinkRouter } from '../utils';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 const PageButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     label,
@@ -25,11 +25,11 @@ const PageButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
   const activeProps = isActive ? {
     selected: true,
-    ...a11yProps.nonFocusableProps,
+    ...a11yProps.nonFocusableProps
     // a brute fix for the focus state being stuck on an active item since it becomes non-focusable
     // (see https://github.com/telus/universal-design-system/pull/577#issuecomment-931344107)
-    key: 'active-item'
   } : {};
+  const key = isActive ? 'active-item' : undefined;
   const accessibilityRole = href !== undefined ? 'link' : 'button';
   const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : '';
   const accessibilityLabel = `${getCopy('goToLabel')} ${label}${activeLabel}`;
@@ -45,13 +45,13 @@ const PageButton = /*#__PURE__*/forwardRef((_ref, ref) => {
     hrefAttrs,
     ...rest
   };
-  return /*#__PURE__*/_jsx(ButtonBase, {
+  return /*#__PURE__*/_createElement(ButtonBase, {
     ref: ref,
     ...buttonProps,
     tokens: getButtonTokens,
-    ...activeProps,
-    children: label
-  });
+    key: key,
+    ...activeProps
+  }, label);
 });
 PageButton.displayName = 'PageButton';
 PageButton.propTypes = {

package/lib-module/StackView/getStackedContent.js

@@ -62,17 +62,16 @@ const getStackedContent = (children, _ref) => {
     const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
     const commonProps = {
       testID,
-      key: testID,
       space
     };
     const separator = divider ? /*#__PURE__*/_jsx(Divider, {
       vertical: direction.startsWith('row'),
       ...dividerProps,
       ...commonProps
-    }) : /*#__PURE__*/_jsx(Spacer, {
+    }, testID) : /*#__PURE__*/_jsx(Spacer, {
       direction: direction.startsWith('row') ? 'row' : 'column',
       ...commonProps
-    });
+    }, testID);
     return [...newChildren, separator, item];
   }, []);
   return content;

package/lib-module/StepTracker/StepTracker.js

@@ -66,7 +66,7 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
  * ## Usability and A11y guidelines
  *
  * Keep in mind that in its current implementation this is not an interactive
- * component and can’t be used to navigate between steps. The application
+ * component and can't be used to navigate between steps. The application
  * must provide its own navigation mechanism and state control. That is the
  * main reason the component assumes the `progressbar` role in terms of
  * accessibility. This also makes it extremely important to make sure you
@@ -110,7 +110,13 @@ const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
     copy
   });
   const stepTrackerLabel = showStepTrackerLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepTrackerLabel : getCopy('stepTrackerLabel')).replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]) : '';
-  const getStepLabel = index => themeTokens.showStepLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepLabel : getCopy('stepLabel')).replace('%{stepNumber}', index + 1) : '';
+  const getStepLabel = index => {
+    if (themeTokens.showStepLabel) {
+      var _getCopy;
+      return (_getCopy = getCopy(index + 1)) === null || _getCopy === void 0 ? void 0 : _getCopy.stepLabel.replace('%{stepNumber}', index + 1);
+    }
+    return '';
+  };
   const {
     themeOptions
   } = useTheme();

package/lib-module/StepTracker/dictionary.js

@@ -5,7 +5,7 @@ export default {
       stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
     },
     2: {
-      stepLabel: '%{stepNumber}.',
+      stepLabel: 'Step %{stepNumber}',
       stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
     },
     3: {
@@ -19,7 +19,7 @@ export default {
       stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
     },
     2: {
-      stepLabel: '%{stepNumber}.',
+      stepLabel: 'Étape %{stepNumber}',
       stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
     },
     3: {

package/lib-module/Typography/Typography.js

@@ -96,7 +96,6 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
   }
   const resolvedTextProps = {
     ...selectTextProps(rest),
-    dataSet,
     maxFontSizeMultiplier
   };
   const containerProps = {
@@ -128,15 +127,17 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     }
     return resetTagStyling(children);
   };
+  const dataSetValue = mediaIds ? {
+    media: mediaIds,
+    ...dataSet
+  } : dataSet;
   return block ? /*#__PURE__*/_jsx(View, {
     ref: ref,
     ...containerProps,
     children: /*#__PURE__*/_jsx(Text, {
       ...resolvedTextProps,
       style: textStyles,
-      dataSet: mediaIds && {
-        media: mediaIds
-      },
+      dataSet: dataSetValue,
       children: sanitizeChildren(children)
     })
   }) : /*#__PURE__*/_jsx(Text, {
@@ -144,9 +145,7 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...containerProps,
     ...resolvedTextProps,
     style: textStyles,
-    dataSet: mediaIds && {
-      media: mediaIds
-    },
+    dataSet: dataSetValue,
     children: sanitizeChildren(children)
   });
 });
@@ -191,6 +190,10 @@ Typography.propTypes = {
   /**
    * Same children allowed as a React Native <Text> node
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+  /**
+   * Data attributes to be added to the element
+   */
+  dataSet: PropTypes.object
 };
 export default Typography;

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.51.0",
+    "@telus-uds/system-theme-tokens": "^2.52.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -85,5 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.77.0"
+  "version": "1.78.0",
+  "types": "types/index.d.ts"
 }

package/src/Card/Card.jsx

@@ -2,8 +2,13 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils'
+import {
+  useThemeTokens,
+  useThemeTokensCallback,
+  useResponsiveThemeTokens,
+  useTheme
+} from '../ThemeProvider'
+import { getTokensPropType, variantProp, StyleSheet, createMediaQueryStyles } from '../utils'
 import { useViewport } from '../ViewportProvider'
 import { a11yProps, selectSystemProps, viewProps } from '../utils/props'
 import CardBase from './CardBase'
@@ -62,7 +67,19 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 const Card = forwardRef(
   ({ children, tokens, variant, dataSet, onPress, interactiveCard, ...rest }, ref) => {
     const viewport = useViewport()
-    const themeTokens = useThemeTokens('Card', tokens, variant, { viewport })
+    const { themeOptions } = useTheme()
+
+    const { enableMediaQueryStyleSheet } = themeOptions
+
+    const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
+
+    const themeTokens = useTokens(
+      'Card',
+      tokens,
+      variant,
+      !enableMediaQueryStyleSheet && { viewport }
+    )
+
     const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
       interactive: true,
       ...(interactiveCard?.variant || {})
@@ -71,12 +88,27 @@ const Card = forwardRef(
     // to individual Card sections, not Card as a whole
     const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...restOfTokens } = themeTokens
 
+    let cardStyles
+    let mediaIds
+
+    if (enableMediaQueryStyleSheet) {
+      const mediaQueryStyleSheet = createMediaQueryStyles(themeTokens)
+
+      const { ids, styles } = StyleSheet.create({
+        card: mediaQueryStyleSheet
+      })
+      cardStyles = styles.card
+      mediaIds = ids.card
+    } else {
+      cardStyles = themeTokens
+    }
+
     return (
       <>
         <CardBase
           ref={ref}
-          tokens={interactiveCard?.body ? restOfTokens : themeTokens}
-          dataSet={dataSet}
+          tokens={interactiveCard?.body ? restOfTokens : cardStyles}
+          dataSet={mediaIds && { media: mediaIds }}
           {...selectProps(rest)}
         >
           {interactiveCard?.body ? (

package/src/Link/ChevronLink.jsx

@@ -12,10 +12,7 @@ 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, onPress, ...otherlinkProps },
-    ref
-  ) => {
+  ({ direction = 'right', children, tokens = {}, variant, dataSet, ...otherlinkProps }, ref) => {
     const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
     const applyChevronTokens = (linkState) => {
       const { leftIcon, rightIcon, iconDisplace, height, fontSize, ...otherTokens } =
@@ -41,7 +38,6 @@ const ChevronLink = forwardRef(
         tokens={getTokens}
         dataSet={dataSet}
         ref={ref}
-        onPress={onPress}
       >
         {children}
       </LinkBase>

package/src/Link/InlinePressable.jsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, useCallback } from 'react'
-import { Pressable, StyleSheet, Platform } from 'react-native'
+import React, { forwardRef } from 'react'
+import { Pressable, StyleSheet } from 'react-native'
 
 /**
  * @typedef {import('react-native').PressableProps} PressableProps
@@ -14,40 +14,20 @@ import { Pressable, StyleSheet, Platform } from 'react-native'
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-/* eslint-disable react/prop-types */
-const InlinePressable = forwardRef(
-  ({ children, inlineFlex = true, style, onPress, ...props }, ref) => {
-    const handlePress = useCallback(() => {
-      if (onPress) {
-        onPress()
-      }
-    }, [onPress])
+// eslint-disable-next-line react/prop-types
+const InlinePressable = forwardRef(({ children, inlineFlex = true, style, ...props }, ref) => (
+  <Pressable
+    ref={ref}
+    style={(pressState) => [
+      typeof style === 'function' ? style(pressState) : style,
+      staticStyles[inlineFlex ? 'inlineFlex' : 'inline']
+    ]}
+    {...props}
+  >
+    {(pressState) => (typeof children === 'function' ? children(pressState) : children)}
+  </Pressable>
+))
 
-    const handleKeyPress = useCallback(
-      (e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          handlePress()
-        }
-      },
-      [handlePress]
-    )
-
-    return (
-      <Pressable
-        ref={ref}
-        style={(pressState) => [
-          typeof style === 'function' ? style(pressState) : style,
-          staticStyles[inlineFlex ? 'inlineFlex' : 'inline']
-        ]}
-        onPress={handlePress}
-        onKeyDown={Platform.OS === 'web' ? handleKeyPress : undefined}
-        {...props}
-      >
-        {(pressState) => (typeof children === 'function' ? children(pressState) : children)}
-      </Pressable>
-    )
-  }
-)
 InlinePressable.displayName = 'InlinePressable'
 
 const staticStyles = StyleSheet.create({

package/src/Link/LinkBase.jsx

@@ -162,7 +162,6 @@ const LinkBase = forwardRef(
         inlineFlex={hasIcon}
         // assuming links without icons should be inline (even if they are long)
         ref={ref}
-        keyboardShouldPersistTaps="handled"
         style={(linkState) => {
           const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)

package/src/Pagination/PageButton.jsx

@@ -28,12 +28,12 @@ const PageButton = forwardRef(
     const activeProps = isActive
       ? {
           selected: true,
-          ...a11yProps.nonFocusableProps,
+          ...a11yProps.nonFocusableProps
           // a brute fix for the focus state being stuck on an active item since it becomes non-focusable
           // (see https://github.com/telus/universal-design-system/pull/577#issuecomment-931344107)
-          key: 'active-item'
         }
       : {}
+    const key = isActive ? 'active-item' : undefined
 
     const accessibilityRole = href !== undefined ? 'link' : 'button'
     const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : ''
@@ -50,7 +50,7 @@ const PageButton = forwardRef(
     }
 
     return (
-      <ButtonBase ref={ref} {...buttonProps} tokens={getButtonTokens} {...activeProps}>
+      <ButtonBase ref={ref} {...buttonProps} tokens={getButtonTokens} key={key} {...activeProps}>
         {label}
       </ButtonBase>
     )

package/src/StackView/getStackedContent.jsx

@@ -54,11 +54,20 @@ const getStackedContent = (
     if (!index || (!space && !divider)) return [...newChildren, item]
 
     const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`
-    const commonProps = { testID, key: testID, space }
+    const commonProps = { testID, space }
     const separator = divider ? (
-      <Divider vertical={direction.startsWith('row')} {...dividerProps} {...commonProps} />
+      <Divider
+        vertical={direction.startsWith('row')}
+        key={testID}
+        {...dividerProps}
+        {...commonProps}
+      />
     ) : (
-      <Spacer direction={direction.startsWith('row') ? 'row' : 'column'} {...commonProps} />
+      <Spacer
+        direction={direction.startsWith('row') ? 'row' : 'column'}
+        key={testID}
+        {...commonProps}
+      />
     )
     return [...newChildren, separator, item]
   }, [])

package/src/StepTracker/StepTracker.jsx

@@ -51,7 +51,7 @@ const selectStepTrackerLabelStyles = (
  * ## Usability and A11y guidelines
  *
  * Keep in mind that in its current implementation this is not an interactive
- * component and can’t be used to navigate between steps. The application
+ * component and can't be used to navigate between steps. The application
  * must provide its own navigation mechanism and state control. That is the
  * main reason the component assumes the `progressbar` role in terms of
  * accessibility. This also makes it extremely important to make sure you
@@ -106,13 +106,14 @@ const StepTracker = forwardRef(
             current < steps.length ? steps[current] : steps[steps.length - 1]
           )
       : ''
-    const getStepLabel = (index) =>
-      themeTokens.showStepLabel
-        ? (typeof copy === 'string'
-            ? getCopy(textStepTrackerLabel ?? 1).stepLabel
-            : getCopy('stepLabel')
-          ).replace('%{stepNumber}', index + 1)
-        : ''
+
+    const getStepLabel = (index) => {
+      if (themeTokens.showStepLabel) {
+        return getCopy(index + 1)?.stepLabel.replace('%{stepNumber}', index + 1)
+      }
+      return ''
+    }
+
     const { themeOptions } = useTheme()
     if (!steps.length) return null
     const selectedProps = selectProps({

package/src/StepTracker/dictionary.js

@@ -5,7 +5,7 @@ export default {
       stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
     },
     2: {
-      stepLabel: '%{stepNumber}.',
+      stepLabel: 'Step %{stepNumber}',
       stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
     },
     3: {
@@ -19,7 +19,7 @@ export default {
       stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
     },
     2: {
-      stepLabel: '%{stepNumber}.',
+      stepLabel: 'Étape %{stepNumber}',
       stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
     },
     3: {

package/src/Typography/Typography.jsx

@@ -124,7 +124,6 @@ const Typography = forwardRef(
 
     const resolvedTextProps = {
       ...selectTextProps(rest),
-      dataSet,
       maxFontSizeMultiplier
     }
 
@@ -158,9 +157,11 @@ const Typography = forwardRef(
       return resetTagStyling(children)
     }
 
+    const dataSetValue = mediaIds ? { media: mediaIds, ...dataSet } : dataSet
+
     return block ? (
       <View ref={ref} {...containerProps}>
-        <Text {...resolvedTextProps} style={textStyles} dataSet={mediaIds && { media: mediaIds }}>
+        <Text {...resolvedTextProps} style={textStyles} dataSet={dataSetValue}>
           {sanitizeChildren(children)}
         </Text>
       </View>
@@ -170,7 +171,7 @@ const Typography = forwardRef(
         {...containerProps}
         {...resolvedTextProps}
         style={textStyles}
-        dataSet={mediaIds && { media: mediaIds }}
+        dataSet={dataSetValue}
       >
         {sanitizeChildren(children)}
       </Text>
@@ -219,7 +220,11 @@ Typography.propTypes = {
   /**
    * Same children allowed as a React Native <Text> node
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+  /**
+   * Data attributes to be added to the element
+   */
+  dataSet: PropTypes.object
 }
 
 export default Typography