@telus-uds/components-base 3.13.0 → 3.14.0

package/CHANGELOG.md

@@ -1,12 +1,29 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 15 Aug 2025 00:45:23 GMT and should not be manually modified.
+This log was last generated on Thu, 04 Sep 2025 06:46:41 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.14.0
+
+Thu, 04 Sep 2025 06:46:41 GMT
+
+### Minor changes
+
+- `ViewportProvider`: add default-viewport prop (guillermo.peitzner@telus.com)
+- `Card`: position and align props added (35577399+JoshHC@users.noreply.github.com)
+- `Tabs`: new dropdown feature added for xs and sm viewports (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/system-theme-tokens to v4.13.0
+
+### Patches
+
+- `Card`: fix media queries styles (guillermo.peitzner@telus.com)
+- `FlexGrid`: change limitWidth default prop value from true to false (guillermo.peitzner@telus.com)
+- `Icon - backgroundColor`: update icon documentation with new section (sergio.ramirez@telus.com)
+
 ## 3.13.0
 
-Fri, 15 Aug 2025 00:45:23 GMT
+Fri, 15 Aug 2025 00:52:15 GMT
 
 ### Minor changes
 

package/lib/cjs/BaseProvider/index.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _portal = require("@gorhom/portal");
+var _systemConstants = require("@telus-uds/system-constants");
 var _A11yInfoProvider = _interopRequireDefault(require("../A11yInfoProvider"));
 var _ViewportProvider = _interopRequireDefault(require("../ViewportProvider"));
 var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
@@ -23,6 +24,7 @@ const BaseProvider = /*#__PURE__*/_react.default.forwardRef((_ref, _) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HydrationContext.HydrationProvider, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yInfoProvider.default, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ViewportProvider.default, {
+        defaultViewport: themeOptions?.defaultViewport,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
           defaultTheme: defaultTheme,
           themeOptions: themeOptions,
@@ -40,7 +42,8 @@ BaseProvider.propTypes = {
   defaultTheme: _ThemeProvider.default.propTypes?.defaultTheme,
   themeOptions: _propTypes.default.shape({
     forceAbsoluteFontSizing: _propTypes.default.bool,
-    forceZIndex: _propTypes.default.bool
+    forceZIndex: _propTypes.default.bool,
+    defaultViewport: _propTypes.default.oneOf(_systemConstants.viewports.keys)
   })
 };
 var _default = exports.default = BaseProvider;

package/lib/cjs/Card/Card.js

@@ -11,11 +11,13 @@ var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _ViewportProvider = require("../ViewportProvider");
 var _props = require("../utils/props");
-var _CardBase = _interopRequireDefault(require("./CardBase"));
+var _CardBase = _interopRequireWildcard(require("./CardBase"));
 var _PressableCardBase = _interopRequireDefault(require("./PressableCardBase"));
 var _CheckboxButton = _interopRequireDefault(require("../Checkbox/CheckboxButton"));
 var _RadioButton = _interopRequireDefault(require("../Radio/RadioButton"));
 var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps, _props.linkProps]);
 const SelectionType = {
@@ -189,12 +191,27 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let cardStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
-    const mediaQueryStyleSheet = (0, _utils.createMediaQueryStyles)(themeTokens);
+    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref4) => {
+      let [vp, viewportTokens] = _ref4;
+      const tokensToTransform = selectionType ? (0, _CardBase.selectStyles)({
+        ...viewportTokens,
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0
+      }) : (0, _CardBase.selectStyles)(viewportTokens);
+      acc[vp] = tokensToTransform;
+      return acc;
+    }, {});
+    const mediaQueryStyleSheet = (0, _utils.createMediaQueryStyles)(transformedThemeTokens);
     const {
       ids,
       styles
     } = _utils.StyleSheet.create({
-      card: mediaQueryStyleSheet
+      card: {
+        ...themeTokens[viewport],
+        ...mediaQueryStyleSheet
+      }
     });
     cardStyles = styles.card;
     mediaIds = ids.card;
@@ -328,7 +345,9 @@ Card.propTypes = {
     // src is an object when used responsively to provide different image sources for different screen sizes
     src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
     alt: _propTypes.default.string,
-    resizeMode: _props.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
+    resizeMode: _props.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
+    position: _props.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['bottom', 'left', 'right', 'top'])),
+    align: _props.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']))
   }),
   /**
    * Data set for the card.

package/lib/cjs/Card/CardBase.js

@@ -3,22 +3,119 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.selectStyles = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ImageBackground"));
+var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _props = require("../utils/props");
+var _backgroundImageStylesMap = _interopRequireDefault(require("./backgroundImageStylesMap"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
+const setBackgroundImage = _ref => {
+  let {
+    src,
+    alt,
+    backgroundImageResizeMode,
+    backgroundImagePosition,
+    backgroundImageAlign,
+    content,
+    cardStyle
+  } = _ref;
+  const borderRadius = cardStyle?.borderRadius || 0;
+  const borderWidth = cardStyle?.borderWidth || 0;
+  const adjustedBorderRadius = Math.max(0, borderRadius - borderWidth);
+
+  // For contain mode with position and align, use CSS background properties for web
+  if (backgroundImageResizeMode === 'contain' && backgroundImagePosition && backgroundImageAlign) {
+    const positionKey = `${backgroundImagePosition}-${backgroundImageAlign}`;
+    if (_Platform.default.OS === 'web') {
+      // Create background position based on position and align
+      let backgroundPosition;
+      switch (positionKey) {
+        case 'top-start':
+          backgroundPosition = 'left top';
+          break;
+        case 'top-center':
+          backgroundPosition = 'center top';
+          break;
+        case 'top-end':
+          backgroundPosition = 'right top';
+          break;
+        case 'bottom-start':
+          backgroundPosition = 'left bottom';
+          break;
+        case 'bottom-center':
+          backgroundPosition = 'center bottom';
+          break;
+        case 'bottom-end':
+          backgroundPosition = 'right bottom';
+          break;
+        case 'left-center':
+          backgroundPosition = 'left center';
+          break;
+        case 'right-center':
+          backgroundPosition = 'right center';
+          break;
+        default:
+          backgroundPosition = 'center center';
+      }
+      const backgroundImageStyle = {
+        backgroundImage: `url(${src})`,
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition,
+        borderRadius: adjustedBorderRadius
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [staticStyles.imageBackground, backgroundImageStyle],
+        role: "img",
+        "aria-label": alt,
+        children: content
+      });
+    }
+    // For React Native, apply positioning styles with full dimensions
+    const positionStyles = _backgroundImageStylesMap.default[positionKey] || {};
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.containContainer, {
+        borderRadius: adjustedBorderRadius
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+        source: src,
+        resizeMode: backgroundImageResizeMode,
+        style: [staticStyles.containImage, positionStyles],
+        accessible: true,
+        accessibilityLabel: alt,
+        accessibilityIgnoresInvertColors: true
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.contentOverlay,
+        children: content
+      })]
+    });
+  }
+
+  // Use ImageBackground for all other resize modes and React Native
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
+    source: src,
+    imageStyle: {
+      borderRadius: adjustedBorderRadius
+    },
+    resizeMode: backgroundImageResizeMode,
+    style: staticStyles.imageBackground,
+    accessible: true,
+    accessibilityLabel: alt,
+    children: content
+  });
+};
 
 // Ensure explicit selection of tokens
-const selectStyles = _ref => {
+const selectStyles = _ref2 => {
   let {
     flex,
     backgroundColor,
@@ -35,7 +132,7 @@ const selectStyles = _ref => {
     gradient,
     maxHeight,
     overflowY
-  } = _ref;
+  } = _ref2;
   return {
     flex,
     backgroundColor,
@@ -68,46 +165,98 @@ const selectStyles = _ref => {
  * A themeless base component for Card which components can apply theme tokens to. Not
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
-const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+exports.selectStyles = selectStyles;
+const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     children,
     tokens,
     dataSet,
     backgroundImage,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens);
   const props = selectProps(rest);
+  let content = children;
   const {
     src = '',
     alt = '',
-    resizeMode = ''
+    resizeMode = '',
+    position = '',
+    align = ''
   } = backgroundImage || {};
   const backgroundImageResizeMode = (0, _utils.useResponsiveProp)(resizeMode, 'cover');
+  const backgroundImagePosition = (0, _utils.useResponsiveProp)(position);
+  const backgroundImageAlign = (0, _utils.useResponsiveProp)(align);
   const imageSourceViewport = (0, _utils.formatImageSource)((0, _utils.useResponsiveProp)(src));
+  if (backgroundImage && src) {
+    // When there's a background image, separate the padding from the container style
+    // so the image can fill the entire container without padding interference
+    const {
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      ...containerStyle
+    } = cardStyle;
+
+    // Only create padding wrapper if there's actually padding defined
+    const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight;
+    const paddedContent = hasPadding ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: {
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight
+      },
+      children: children
+    }) : children;
+    content = setBackgroundImage({
+      src: imageSourceViewport,
+      alt,
+      backgroundImageResizeMode,
+      backgroundImagePosition,
+      backgroundImageAlign,
+      content: paddedContent,
+      cardStyle: containerStyle
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: containerStyle,
+      dataSet: dataSet,
+      ref: ref,
+      ...props,
+      children: content
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: cardStyle,
     dataSet: dataSet,
     ref: ref,
     ...props,
-    children: src ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
-      source: imageSourceViewport,
-      imageStyle: {
-        borderRadius: cardStyle?.borderRadius - cardStyle?.borderWidth
-      },
-      resizeMode: backgroundImageResizeMode,
-      style: styles.imageBackground,
-      accessible: true,
-      accessibilityLabel: alt,
-      children: children
-    }) : children
+    children: content
   });
 });
 CardBase.displayName = 'CardBase';
-const styles = _StyleSheet.default.create({
+const staticStyles = _StyleSheet.default.create({
   imageBackground: {
     width: '100%',
     height: '100%'
+  },
+  contentOverlay: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    zIndex: 1
+  },
+  containContainer: {
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    position: 'relative'
+  },
+  containImage: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%'
   }
 });
 CardBase.propTypes = {
@@ -122,7 +271,9 @@ CardBase.propTypes = {
     // src is an object when used responsively to provide different image sources for different screen sizes
     src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
     alt: _propTypes.default.string,
-    resizeMode: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
+    resizeMode: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
+    position: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['bottom', 'left', 'right', 'top'])),
+    align: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']))
   })
 };
 var _default = exports.default = CardBase;

package/lib/cjs/Card/PressableCardBase.js

@@ -39,6 +39,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     href,
     hrefAttrs,
     dataSet,
+    backgroundImage,
     accessibilityRole = href ? 'link' : undefined,
     ...rawRest
   } = _ref;
@@ -133,10 +134,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
           setFocused(false);
           setPressed(false);
         },
-        style: {
-          ...staticStyles.container,
-          textDecoration: 'none'
-        },
+        style: staticStyles.linkContainer,
         ...(hrefAttrs || {}),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
           tokens: getCardTokens({
@@ -144,6 +142,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
             focused,
             hovered
           }),
+          backgroundImage: backgroundImage,
           children: typeof children === 'function' ? children(getCardState({
             pressed,
             focused,
@@ -167,6 +166,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     }),
     children: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
       tokens: getCardTokens(pressableState),
+      backgroundImage: backgroundImage,
       children: typeof children === 'function' ? children(getCardState(pressableState)) : children
     })
   });
@@ -175,6 +175,11 @@ const staticStyles = _StyleSheet.default.create({
   container: {
     flex: 1,
     display: 'flex'
+  },
+  linkContainer: {
+    flex: 1,
+    display: 'flex',
+    textDecoration: 'none'
   }
 });
 PressableCardBase.displayName = 'PressableCardBase';
@@ -185,6 +190,15 @@ PressableCardBase.propTypes = {
     partial: true,
     allowFunction: true
   }),
-  variant: _utils.variantProp.propType
+  variant: _utils.variantProp.propType,
+  backgroundImage: _propTypes.default.shape({
+    // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
+    // src is an object when used responsively to provide different image sources for different screen sizes
+    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
+    alt: _propTypes.default.string,
+    resizeMode: _propTypes.default.oneOfType([_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']), _propTypes.default.object]),
+    position: _propTypes.default.oneOfType([_propTypes.default.oneOf(['bottom', 'left', 'right', 'top']), _propTypes.default.object]),
+    align: _propTypes.default.oneOfType([_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']), _propTypes.default.object])
+  })
 };
 var _default = exports.default = (0, _utils.withLinkRouter)(PressableCardBase);

package/lib/cjs/Card/backgroundImageStylesMap.js

@@ -0,0 +1,197 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const webStyles = {
+  'top-start': {
+    top: 0,
+    left: 0
+  },
+  'top-center': {
+    top: 0,
+    left: '50%',
+    transform: [{
+      translateX: '-50%'
+    }]
+  },
+  'top-end': {
+    top: 0,
+    right: 0
+  },
+  'right-start': {
+    top: 0,
+    right: 0
+  },
+  'left-start': {
+    top: 0,
+    left: 0
+  },
+  'left-center': {
+    top: '50%',
+    left: 0,
+    transform: [{
+      translateY: '-50%'
+    }]
+  },
+  'right-center': {
+    top: '50%',
+    right: 0,
+    transform: [{
+      translateY: '-50%'
+    }]
+  },
+  'bottom-start': {
+    bottom: 0,
+    left: 0
+  },
+  'left-end': {
+    bottom: 0,
+    left: 0
+  },
+  'bottom-center': {
+    bottom: 0,
+    left: '50%',
+    transform: [{
+      translateX: '-50%'
+    }]
+  },
+  'bottom-end': {
+    bottom: 0,
+    right: 0
+  },
+  'right-end': {
+    bottom: 0,
+    right: 0
+  },
+  'top-stretch': {
+    top: 0,
+    left: 0,
+    right: 0,
+    width: '100%'
+  },
+  'left-stretch': {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    height: '100%'
+  },
+  'right-stretch': {
+    top: 0,
+    bottom: 0,
+    right: 0,
+    height: '100%'
+  },
+  'bottom-stretch': {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    width: '100%'
+  }
+};
+const nativeStyles = {
+  'top-start': {
+    top: 0,
+    left: 0,
+    width: 150,
+    height: 200
+  },
+  'top-center': {
+    top: 0,
+    left: '50%',
+    marginLeft: -75,
+    width: 150,
+    height: 200
+  },
+  'top-end': {
+    top: 0,
+    right: 0,
+    width: 150,
+    height: 200
+  },
+  'right-start': {
+    top: 0,
+    right: 0,
+    width: 150,
+    height: 200
+  },
+  'left-start': {
+    top: 0,
+    left: 0,
+    width: 150,
+    height: 200
+  },
+  'left-center': {
+    left: 0,
+    top: '50%',
+    marginTop: -100,
+    width: 150,
+    height: 200
+  },
+  'right-center': {
+    right: 0,
+    top: '50%',
+    marginTop: -100,
+    width: 150,
+    height: 200
+  },
+  'bottom-start': {
+    bottom: 0,
+    left: 0,
+    width: 150,
+    height: 200
+  },
+  'left-end': {
+    bottom: 0,
+    left: 0,
+    width: 150,
+    height: 200
+  },
+  'bottom-center': {
+    bottom: 0,
+    left: '50%',
+    marginLeft: -75,
+    width: 150,
+    height: 200
+  },
+  'bottom-end': {
+    bottom: 0,
+    right: 0,
+    width: 150,
+    height: 200
+  },
+  'right-end': {
+    bottom: 0,
+    right: 0,
+    width: 150,
+    height: 200
+  },
+  'top-stretch': {
+    top: 0,
+    left: 0,
+    right: 0,
+    width: '100%'
+  },
+  'left-stretch': {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    height: '100%'
+  },
+  'right-stretch': {
+    top: 0,
+    bottom: 0,
+    right: 0,
+    height: '100%'
+  },
+  'bottom-stretch': {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    width: '100%'
+  }
+};
+var _default = exports.default = _Platform.default.OS === 'web' ? webStyles : nativeStyles;