@telus-uds/components-base 1.76.0 → 1.77.1

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 07 Feb 2024 19:09:40 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Feb 2024 23:07:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.77.1
+
+Tue, 20 Feb 2024 23:07:37 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:29:37 GMT
+
+### Minor changes
+
+- add background-image to box component (guillermo.peitzner@telus.com)
+- skeleton border radius for line shape (tim.hysniu@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.51.0
+
+### Patches
+
+- fix expand-collapse visual states for koodo theme (guillermo.peitzner@telus.com)
+
 ## 1.76.0
 
-Wed, 07 Feb 2024 19:09:40 GMT
+Wed, 07 Feb 2024 19:14:07 GMT
 
 ### Minor changes
 

package/lib/Box/Box.js

@@ -9,8 +9,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ImageBackground"));
+var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
+var _backgroundImageStylesMap = _interopRequireDefault(require("./backgroundImageStylesMap"));
 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); }
@@ -65,6 +69,45 @@ const selectBoxStyles = (_ref, customGradient) => {
   });
   return styles;
 };
+const setBackgroundImage = _ref2 => {
+  let {
+    src,
+    alt,
+    backgroundImageResizeMode,
+    backgroundImagePosition,
+    backgroundImageAlign,
+    backgroundImageWidth,
+    backgroundImageHeight,
+    content
+  } = _ref2;
+  if (backgroundImageResizeMode === 'contain') {
+    const containedViewStyle = {
+      ...staticStyles.containedView,
+      width: backgroundImageWidth,
+      height: backgroundImageHeight,
+      ..._backgroundImageStylesMap.default[`${backgroundImagePosition}-${backgroundImageAlign}`]
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: staticStyles.containedContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: containedViewStyle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+          source: src,
+          alt: alt,
+          style: staticStyles.containedImage,
+          accessibilityIgnoresInvertColors: true
+        })
+      }), content]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
+    source: src,
+    alt: alt,
+    style: staticStyles.backgroundImageContainer,
+    resizeMode: backgroundImageResizeMode,
+    children: content
+  });
+};
 
 /**
  * A layout utility component. Use Box to create space (padding) around content.
@@ -131,7 +174,7 @@ const selectBoxStyles = (_ref, customGradient) => {
  * text content is inside a scrollable box, as screens are not scrollable by default and even very
  * short text will require scrolling on small devices at the highest accessibility text scaling settings.
  */
-const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     space,
     horizontal = space,
@@ -150,8 +193,9 @@ const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     testID,
     dataSet,
     customGradient,
+    backgroundImage,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const props = {
     accessibilityRole,
     ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
@@ -166,7 +210,41 @@ const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     paddingBottom: (0, _utils.useSpacingScale)(bottom),
     ...selectBoxStyles(themeTokens, customGradient)
   };
-  const childrenToRender = typeof customGradient === 'function' ? customGradient(styles.colors, styles)(children) : children;
+  let content = children;
+  if (typeof customGradient === 'function') content = customGradient(styles.colors, styles)(children);
+  const {
+    src = '',
+    alt = '',
+    resizeMode = '',
+    position = '',
+    align = ''
+  } = backgroundImage || {};
+  const backgroundImageResizeMode = (0, _utils.useResponsiveProp)(resizeMode, 'cover');
+  const backgroundImagePosition = (0, _utils.useResponsiveProp)(position, 'none');
+  const backgroundImageAlign = (0, _utils.useResponsiveProp)(align, 'stretch');
+  const [backgroundImageWidth, setBackgroundImageWidth] = (0, _react.useState)(0);
+  const [backgroundImageHeight, setBackgroundImageHeight] = (0, _react.useState)(0);
+  if (backgroundImage) content = setBackgroundImage({
+    src,
+    alt,
+    backgroundImageResizeMode,
+    backgroundImagePosition,
+    backgroundImageAlign,
+    backgroundImageWidth,
+    backgroundImageHeight,
+    content
+  });
+  (0, _react.useEffect)(() => {
+    if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
+      _Image.default.getSize(src, (width, height) => {
+        // Only update the state if the size has changed
+        if (width !== backgroundImageWidth || height !== backgroundImageHeight) {
+          setBackgroundImageWidth(width);
+          setBackgroundImageHeight(height);
+        }
+      });
+    }
+  }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src]);
   if (scroll) {
     const scrollProps = typeof scroll === 'object' ? scroll : {};
     scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle];
@@ -176,7 +254,7 @@ const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
       testID: testID,
       dataSet: dataSet,
       ref: ref,
-      children: childrenToRender
+      children: content
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -185,7 +263,7 @@ const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     testID: testID,
     dataSet: dataSet,
     ref: ref,
-    children: childrenToRender
+    children: content
   });
 });
 Box.displayName = 'Box';
@@ -273,7 +351,34 @@ Box.propTypes = {
   /**
   Use this prop if need to add a custom gradient for mobile
   */
-  customGradient: _propTypes.default.func
+  customGradient: _propTypes.default.func,
+  /**
+   * Use this prop to add a background image to the box.
+   */
+  backgroundImage: _propTypes.default.shape({
+    src: _propTypes.default.string.isRequired,
+    alt: _propTypes.default.string,
+    resizeMode: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
+    position: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['none', 'bottom', 'left', 'right', 'top'])),
+    align: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']))
+  })
 };
 var _default = Box;
-exports.default = _default;
+exports.default = _default;
+const staticStyles = _StyleSheet.default.create({
+  backgroundImageContainer: {
+    flex: 1
+  },
+  containedContainer: {
+    flex: 1,
+    overflow: 'hidden'
+  },
+  containedView: {
+    zIndex: -1,
+    position: 'absolute'
+  },
+  containedImage: {
+    width: '100%',
+    height: '100%'
+  }
+});

package/lib/Box/backgroundImageStylesMap.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  'top-start': {
+    top: 0
+  },
+  'top-center': {
+    left: 0,
+    right: 0,
+    marginHorizontal: 'auto'
+  },
+  'top-end': {
+    top: 0,
+    right: 0
+  },
+  'right-start': {
+    top: 0,
+    right: 0
+  },
+  'left-start': {
+    top: 0
+  },
+  'left-center': {
+    top: 0,
+    bottom: 0,
+    marginVertical: 'auto'
+  },
+  'none-start': {
+    top: 0,
+    bottom: 0,
+    marginVertical: 'auto'
+  },
+  'none-center': {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    margin: 'auto'
+  },
+  'right-center': {
+    top: 0,
+    bottom: 0,
+    right: 0,
+    marginVertical: 'auto'
+  },
+  'none-end': {
+    top: 0,
+    bottom: 0,
+    right: 0,
+    marginVertical: 'auto'
+  },
+  'bottom-start': {
+    bottom: 0,
+    left: 0
+  },
+  'left-end': {
+    bottom: 0,
+    left: 0
+  },
+  'bottom-center': {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    marginHorizontal: 'auto'
+  },
+  'bottom-end': {
+    right: 0,
+    bottom: 0
+  },
+  'right-end': {
+    right: 0,
+    bottom: 0
+  },
+  'top-stretch': {
+    left: 0,
+    right: 0,
+    width: '100%'
+  },
+  'left-stretch': {
+    top: 0,
+    bottom: 0,
+    height: '100%'
+  },
+  'right-stretch': {
+    top: 0,
+    bottom: 0,
+    right: 0,
+    height: '100%'
+  },
+  'bottom-stretch': {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: '100%'
+  }
+};
+exports.default = _default;

package/lib/ExpandCollapse/Panel.js

@@ -76,6 +76,14 @@ const selectContentPanelStyles = _ref3 => {
     marginBottom
   };
 };
+const selectControlPanelStyles = _ref4 => {
+  let {
+    contentPanelBackgroundColor
+  } = _ref4;
+  return {
+    backgroundColor: contentPanelBackgroundColor
+  };
+};
 
 /**
  * An item in an `ExpandCollapse` which contains collapsible `children` and a `control` that opens
@@ -87,7 +95,7 @@ const selectContentPanelStyles = _ref3 => {
  * The panel does not need to be a direct child of the `<ExpandCollapse>` (unless this is required
  * by the chosen accessibility props for a particular accessibility tools).
  */
-const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   let {
     openIds = [],
     panelId,
@@ -101,7 +109,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) =>
     controlRef,
     content,
     ...rest
-  } = _ref4;
+  } = _ref5;
   const [containerHeight, setContainerHeight] = (0, _react.useState)(null);
   const isExpanded = openIds.includes(panelId);
   const selectedProps = selectProps({
@@ -143,14 +151,17 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) =>
   }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     ref: ref,
     style: themeTokens,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Control.default, {
-      ...selectedProps,
-      isExpanded: isExpanded,
-      tokens: controlTokens,
-      variant: variant,
-      onPress: handleControlPress,
-      ref: controlRef,
-      children: control
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectControlPanelStyles(themeTokens),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Control.default, {
+        ...selectedProps,
+        isExpanded: isExpanded,
+        tokens: controlTokens,
+        variant: variant,
+        onPress: handleControlPress,
+        ref: controlRef,
+        children: control
+      })
     }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: {
         borderTopColor: themeTokens.expandDividerColor,

package/lib/Link/InlinePressable.js

@@ -39,6 +39,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     }
   }, [onPress]);
   const handleKeyPress = (0, _react.useCallback)(e => {
+    e.preventDefault();
     if (e.key === 'Enter' || e.key === ' ') {
       handlePress();
     }

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

@@ -34,11 +34,13 @@ const selectSkeletonStyles = _ref => {
 const selectLineStyles = _ref2 => {
   let {
     skeletonHeight,
-    lineWidth
+    lineWidth,
+    radius
   } = _ref2;
   return {
     width: lineWidth,
-    height: skeletonHeight
+    height: skeletonHeight,
+    borderRadius: radius
   };
 };
 const selectShapeStyles = _ref3 => {
@@ -121,7 +123,8 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     }
     return selectLineStyles({
       skeletonHeight,
-      lineWidth: getLineWidth()
+      lineWidth: getLineWidth(),
+      radius: themeTokens.lineRadius
     });
   };
   const renderSkeleton = function () {

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: {