@telus-uds/components-base 1.76.0 → 1.77.1

package/lib-module/Box/Box.js

@@ -1,11 +1,16 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import ScrollView from "react-native-web/dist/exports/ScrollView";
 import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import ImageBackground from "react-native-web/dist/exports/ImageBackground";
+import Image from "react-native-web/dist/exports/Image";
 import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, selectSystemProps, spacingProps, useSpacingScale, variantProp, viewProps } from '../utils';
+import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, useSpacingScale, variantProp, viewProps } from '../utils';
+import backgroundImageStylesMap from './backgroundImageStylesMap';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
@@ -56,6 +61,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[`${backgroundImagePosition}-${backgroundImageAlign}`]
+    };
+    return /*#__PURE__*/_jsxs(View, {
+      style: staticStyles.containedContainer,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: containedViewStyle,
+        children: /*#__PURE__*/_jsx(Image, {
+          source: src,
+          alt: alt,
+          style: staticStyles.containedImage,
+          accessibilityIgnoresInvertColors: true
+        })
+      }), content]
+    });
+  }
+  return /*#__PURE__*/_jsx(ImageBackground, {
+    source: src,
+    alt: alt,
+    style: staticStyles.backgroundImageContainer,
+    resizeMode: backgroundImageResizeMode,
+    children: content
+  });
+};
 
 /**
  * A layout utility component. Use Box to create space (padding) around content.
@@ -122,7 +166,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__*/forwardRef((_ref2, ref) => {
+const Box = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     space,
     horizontal = space,
@@ -141,8 +185,9 @@ const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
     testID,
     dataSet,
     customGradient,
+    backgroundImage,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const props = {
     accessibilityRole,
     ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
@@ -157,7 +202,41 @@ const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
     paddingBottom: 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 = useResponsiveProp(resizeMode, 'cover');
+  const backgroundImagePosition = useResponsiveProp(position, 'none');
+  const backgroundImageAlign = useResponsiveProp(align, 'stretch');
+  const [backgroundImageWidth, setBackgroundImageWidth] = useState(0);
+  const [backgroundImageHeight, setBackgroundImageHeight] = useState(0);
+  if (backgroundImage) content = setBackgroundImage({
+    src,
+    alt,
+    backgroundImageResizeMode,
+    backgroundImagePosition,
+    backgroundImageAlign,
+    backgroundImageWidth,
+    backgroundImageHeight,
+    content
+  });
+  useEffect(() => {
+    if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
+      Image.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];
@@ -167,7 +246,7 @@ const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
       testID: testID,
       dataSet: dataSet,
       ref: ref,
-      children: childrenToRender
+      children: content
     });
   }
   return /*#__PURE__*/_jsx(View, {
@@ -176,7 +255,7 @@ const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
     testID: testID,
     dataSet: dataSet,
     ref: ref,
-    children: childrenToRender
+    children: content
   });
 });
 Box.displayName = 'Box';
@@ -264,6 +343,33 @@ Box.propTypes = {
   /**
   Use this prop if need to add a custom gradient for mobile
   */
-  customGradient: PropTypes.func
+  customGradient: PropTypes.func,
+  /**
+   * Use this prop to add a background image to the box.
+   */
+  backgroundImage: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
+    position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['none', 'bottom', 'left', 'right', 'top'])),
+    align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['start', 'end', 'center', 'stretch']))
+  })
 };
-export default Box;
+export default Box;
+const staticStyles = StyleSheet.create({
+  backgroundImageContainer: {
+    flex: 1
+  },
+  containedContainer: {
+    flex: 1,
+    overflow: 'hidden'
+  },
+  containedView: {
+    zIndex: -1,
+    position: 'absolute'
+  },
+  containedImage: {
+    width: '100%',
+    height: '100%'
+  }
+});

package/lib-module/Box/backgroundImageStylesMap.js

@@ -0,0 +1,94 @@
+export 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%'
+  }
+};

package/lib-module/ExpandCollapse/Panel.js

@@ -68,6 +68,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
@@ -79,7 +87,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__*/forwardRef((_ref4, ref) => {
+const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref5, ref) => {
   let {
     openIds = [],
     panelId,
@@ -93,7 +101,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref4, ref) => {
     controlRef,
     content,
     ...rest
-  } = _ref4;
+  } = _ref5;
   const [containerHeight, setContainerHeight] = useState(null);
   const isExpanded = openIds.includes(panelId);
   const selectedProps = selectProps({
@@ -135,14 +143,17 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref4, ref) => {
   }) : /*#__PURE__*/_jsxs(View, {
     ref: ref,
     style: themeTokens,
-    children: [/*#__PURE__*/_jsx(ExpandCollapseControl, {
-      ...selectedProps,
-      isExpanded: isExpanded,
-      tokens: controlTokens,
-      variant: variant,
-      onPress: handleControlPress,
-      ref: controlRef,
-      children: control
+    children: [/*#__PURE__*/_jsx(View, {
+      style: selectControlPanelStyles(themeTokens),
+      children: /*#__PURE__*/_jsx(ExpandCollapseControl, {
+        ...selectedProps,
+        isExpanded: isExpanded,
+        tokens: controlTokens,
+        variant: variant,
+        onPress: handleControlPress,
+        ref: controlRef,
+        children: control
+      })
     }), isExpanded && /*#__PURE__*/_jsx(View, {
       style: {
         borderTopColor: themeTokens.expandDividerColor,

package/lib-module/Link/InlinePressable.js

@@ -30,6 +30,7 @@ const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   }, [onPress]);
   const handleKeyPress = useCallback(e => {
+    e.preventDefault();
     if (e.key === 'Enter' || e.key === ' ') {
       handlePress();
     }

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

@@ -25,11 +25,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 => {
@@ -112,7 +114,8 @@ const Skeleton = /*#__PURE__*/forwardRef((_ref5, ref) => {
     }
     return selectLineStyles({
       skeletonHeight,
-      lineWidth: getLineWidth()
+      lineWidth: getLineWidth(),
+      radius: themeTokens.lineRadius
     });
   };
   const renderSkeleton = function () {

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/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.50.1",
+    "@telus-uds/system-theme-tokens": "^2.51.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.76.0"
+  "version": "1.77.1",
+  "types": "types/index.d.ts"
 }

package/src/Box/Box.jsx

@@ -1,18 +1,21 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
-import { View, ScrollView, Platform } from 'react-native'
+import { View, ScrollView, Platform, StyleSheet, ImageBackground, Image } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
   getA11yPropsFromHtmlTag,
   getTokensPropType,
   layoutTags,
+  responsiveProps,
   selectSystemProps,
   spacingProps,
+  useResponsiveProp,
   useSpacingScale,
   variantProp,
   viewProps
 } from '../utils'
+import backgroundImageStylesMap from './backgroundImageStylesMap'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -69,6 +72,50 @@ const selectBoxStyles = (
   return styles
 }
 
+const setBackgroundImage = ({
+  src,
+  alt,
+  backgroundImageResizeMode,
+  backgroundImagePosition,
+  backgroundImageAlign,
+  backgroundImageWidth,
+  backgroundImageHeight,
+  content
+}) => {
+  if (backgroundImageResizeMode === 'contain') {
+    const containedViewStyle = {
+      ...staticStyles.containedView,
+      width: backgroundImageWidth,
+      height: backgroundImageHeight,
+      ...backgroundImageStylesMap[`${backgroundImagePosition}-${backgroundImageAlign}`]
+    }
+
+    return (
+      <View style={staticStyles.containedContainer}>
+        <View style={containedViewStyle}>
+          <Image
+            source={src}
+            alt={alt}
+            style={staticStyles.containedImage}
+            accessibilityIgnoresInvertColors
+          />
+        </View>
+        {content}
+      </View>
+    )
+  }
+  return (
+    <ImageBackground
+      source={src}
+      alt={alt}
+      style={staticStyles.backgroundImageContainer}
+      resizeMode={backgroundImageResizeMode}
+    >
+      {content}
+    </ImageBackground>
+  )
+}
+
 /**
  * A layout utility component. Use Box to create space (padding) around content.
  *
@@ -154,6 +201,7 @@ const Box = forwardRef(
       testID,
       dataSet,
       customGradient,
+      backgroundImage,
       ...rest
     },
     ref
@@ -174,23 +222,52 @@ const Box = forwardRef(
       ...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 = useResponsiveProp(resizeMode, 'cover')
+    const backgroundImagePosition = useResponsiveProp(position, 'none')
+    const backgroundImageAlign = useResponsiveProp(align, 'stretch')
+    const [backgroundImageWidth, setBackgroundImageWidth] = useState(0)
+    const [backgroundImageHeight, setBackgroundImageHeight] = useState(0)
+    if (backgroundImage)
+      content = setBackgroundImage({
+        src,
+        alt,
+        backgroundImageResizeMode,
+        backgroundImagePosition,
+        backgroundImageAlign,
+        backgroundImageWidth,
+        backgroundImageHeight,
+        content
+      })
+
+    useEffect(() => {
+      if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
+        Image.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]
       return (
         <ScrollView {...scrollProps} {...props} testID={testID} dataSet={dataSet} ref={ref}>
-          {childrenToRender}
+          {content}
         </ScrollView>
       )
     }
     return (
       <View {...props} style={styles} testID={testID} dataSet={dataSet} ref={ref}>
-        {childrenToRender}
+        {content}
       </View>
     )
   }
@@ -284,7 +361,41 @@ Box.propTypes = {
   /**
   Use this prop if need to add a custom gradient for mobile
   */
-  customGradient: PropTypes.func
+  customGradient: PropTypes.func,
+  /**
+   * Use this prop to add a background image to the box.
+   */
+  backgroundImage: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    resizeMode: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])
+    ),
+    position: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['none', 'bottom', 'left', 'right', 'top'])
+    ),
+    align: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['start', 'end', 'center', 'stretch'])
+    )
+  })
 }
 
 export default Box
+
+const staticStyles = StyleSheet.create({
+  backgroundImageContainer: {
+    flex: 1
+  },
+  containedContainer: {
+    flex: 1,
+    overflow: 'hidden'
+  },
+  containedView: {
+    zIndex: -1,
+    position: 'absolute'
+  },
+  containedImage: {
+    width: '100%',
+    height: '100%'
+  }
+})