@telus-uds/components-base 1.76.0 → 1.77.0

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # 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 Wed, 14 Feb 2024 02:21:15 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.77.0
+
+Wed, 14 Feb 2024 02:21:15 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/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-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/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/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,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.76.0"
+  "version": "1.77.0"
 }

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%'
+  }
+})

package/src/Box/backgroundImageStylesMap.js

@@ -0,0 +1,21 @@
+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/src/ExpandCollapse/Panel.jsx

@@ -64,6 +64,10 @@ const selectContentPanelStyles = ({
   marginBottom
 })
 
+const selectControlPanelStyles = ({ contentPanelBackgroundColor }) => ({
+  backgroundColor: contentPanelBackgroundColor
+})
+
 /**
  * An item in an `ExpandCollapse` which contains collapsible `children` and a `control` that opens
  * and closes the collapsible children when pressed.
@@ -136,16 +140,18 @@ const ExpandCollapsePanel = forwardRef(
       </View>
     ) : (
       <View ref={ref} style={themeTokens}>
-        <ExpandCollapseControl
-          {...selectedProps}
-          isExpanded={isExpanded}
-          tokens={controlTokens}
-          variant={variant}
-          onPress={handleControlPress}
-          ref={controlRef}
-        >
-          {control}
-        </ExpandCollapseControl>
+        <View style={selectControlPanelStyles(themeTokens)}>
+          <ExpandCollapseControl
+            {...selectedProps}
+            isExpanded={isExpanded}
+            tokens={controlTokens}
+            variant={variant}
+            onPress={handleControlPress}
+            ref={controlRef}
+          >
+            {control}
+          </ExpandCollapseControl>
+        </View>
         {isExpanded && (
           <View
             style={{

package/src/Skeleton/Skeleton.jsx

@@ -25,9 +25,10 @@ const selectSkeletonStyles = ({ color, radius }) => ({
   maxWidth: '100%'
 })
 
-const selectLineStyles = ({ skeletonHeight, lineWidth }) => ({
+const selectLineStyles = ({ skeletonHeight, lineWidth, radius }) => ({
   width: lineWidth,
-  height: skeletonHeight
+  height: skeletonHeight,
+  borderRadius: radius
 })
 
 const selectShapeStyles = ({ skeletonHeight }) => ({
@@ -101,7 +102,11 @@ const Skeleton = forwardRef(
         ]
       }
 
-      return selectLineStyles({ skeletonHeight, lineWidth: getLineWidth() })
+      return selectLineStyles({
+        skeletonHeight,
+        lineWidth: getLineWidth(),
+        radius: themeTokens.lineRadius
+      })
     }
 
     const renderSkeleton = (index = 0) => {

package/types/Typography.d.ts

@@ -23,6 +23,7 @@ export type TypographyVariants = {
   characters?: number
   spaceBetweenLines?: number
   squareRadius?: number
+  lineRadius?: number
   inverse?: boolean
 }