@telus-uds/components-base 3.13.0 → 3.14.1

package/lib/esm/Card/CardBase.js

@@ -3,15 +3,112 @@ import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
 import ImageBackground from "react-native-web/dist/exports/ImageBackground";
+import Image from "react-native-web/dist/exports/Image";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { applyShadowToken } from '../ThemeProvider';
 import { getTokensPropType, responsiveProps, useResponsiveProp, formatImageSource } from '../utils';
 import { a11yProps, viewProps, selectSystemProps } from '../utils/props';
-import { jsx as _jsx } from "react/jsx-runtime";
+import backgroundImageStylesMap from './backgroundImageStylesMap';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, 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.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__*/_jsx(View, {
+        style: [staticStyles.imageBackground, backgroundImageStyle],
+        role: "img",
+        "aria-label": alt,
+        children: content
+      });
+    }
+    // For React Native, apply positioning styles with full dimensions
+    const positionStyles = backgroundImageStylesMap[positionKey] || {};
+    return /*#__PURE__*/_jsxs(View, {
+      style: [staticStyles.containContainer, {
+        borderRadius: adjustedBorderRadius
+      }],
+      children: [/*#__PURE__*/_jsx(Image, {
+        source: src,
+        resizeMode: backgroundImageResizeMode,
+        style: [staticStyles.containImage, positionStyles],
+        accessible: true,
+        accessibilityLabel: alt,
+        accessibilityIgnoresInvertColors: true
+      }), /*#__PURE__*/_jsx(View, {
+        style: staticStyles.contentOverlay,
+        children: content
+      })]
+    });
+  }
+
+  // Use ImageBackground for all other resize modes and React Native
+  return /*#__PURE__*/_jsx(ImageBackground, {
+    source: src,
+    imageStyle: {
+      borderRadius: adjustedBorderRadius
+    },
+    resizeMode: backgroundImageResizeMode,
+    style: staticStyles.imageBackground,
+    accessible: true,
+    accessibilityLabel: alt,
+    children: content
+  });
+};
 
 // Ensure explicit selection of tokens
-const selectStyles = _ref => {
+export const selectStyles = _ref2 => {
   let {
     flex,
     backgroundColor,
@@ -28,7 +125,7 @@ const selectStyles = _ref => {
     gradient,
     maxHeight,
     overflowY
-  } = _ref;
+  } = _ref2;
   return {
     flex,
     backgroundColor,
@@ -61,46 +158,97 @@ 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.forwardRef((_ref2, ref) => {
+const CardBase = /*#__PURE__*/React.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 = useResponsiveProp(resizeMode, 'cover');
+  const backgroundImagePosition = useResponsiveProp(position);
+  const backgroundImageAlign = useResponsiveProp(align);
   const imageSourceViewport = formatImageSource(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__*/_jsx(View, {
+      style: {
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight
+      },
+      children: children
+    }) : children;
+    content = setBackgroundImage({
+      src: imageSourceViewport,
+      alt,
+      backgroundImageResizeMode,
+      backgroundImagePosition,
+      backgroundImageAlign,
+      content: paddedContent,
+      cardStyle: containerStyle
+    });
+    return /*#__PURE__*/_jsx(View, {
+      style: containerStyle,
+      dataSet: dataSet,
+      ref: ref,
+      ...props,
+      children: content
+    });
+  }
   return /*#__PURE__*/_jsx(View, {
     style: cardStyle,
     dataSet: dataSet,
     ref: ref,
     ...props,
-    children: src ? /*#__PURE__*/_jsx(ImageBackground, {
-      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.create({
+const staticStyles = StyleSheet.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 = {
@@ -115,7 +263,9 @@ CardBase.propTypes = {
     // src is an object when used responsively to provide different image sources for different screen sizes
     src: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
     alt: PropTypes.string,
-    resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
+    resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
+    position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['bottom', 'left', 'right', 'top'])),
+    align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['start', 'end', 'center', 'stretch']))
   })
 };
 export default CardBase;

package/lib/esm/Card/PressableCardBase.js

@@ -31,6 +31,7 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     href,
     hrefAttrs,
     dataSet,
+    backgroundImage,
     accessibilityRole = href ? 'link' : undefined,
     ...rawRest
   } = _ref;
@@ -125,10 +126,7 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           setFocused(false);
           setPressed(false);
         },
-        style: {
-          ...staticStyles.container,
-          textDecoration: 'none'
-        },
+        style: staticStyles.linkContainer,
         ...(hrefAttrs || {}),
         children: /*#__PURE__*/_jsx(CardBase, {
           tokens: getCardTokens({
@@ -136,6 +134,7 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             focused,
             hovered
           }),
+          backgroundImage: backgroundImage,
           children: typeof children === 'function' ? children(getCardState({
             pressed,
             focused,
@@ -159,6 +158,7 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }),
     children: pressableState => /*#__PURE__*/_jsx(CardBase, {
       tokens: getCardTokens(pressableState),
+      backgroundImage: backgroundImage,
       children: typeof children === 'function' ? children(getCardState(pressableState)) : children
     })
   });
@@ -167,6 +167,11 @@ const staticStyles = StyleSheet.create({
   container: {
     flex: 1,
     display: 'flex'
+  },
+  linkContainer: {
+    flex: 1,
+    display: 'flex',
+    textDecoration: 'none'
   }
 });
 PressableCardBase.displayName = 'PressableCardBase';
@@ -177,6 +182,15 @@ PressableCardBase.propTypes = {
     partial: true,
     allowFunction: true
   }),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  backgroundImage: PropTypes.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.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
+    alt: PropTypes.string,
+    resizeMode: PropTypes.oneOfType([PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']), PropTypes.object]),
+    position: PropTypes.oneOfType([PropTypes.oneOf(['bottom', 'left', 'right', 'top']), PropTypes.object]),
+    align: PropTypes.oneOfType([PropTypes.oneOf(['start', 'end', 'center', 'stretch']), PropTypes.object])
+  })
 };
 export default withLinkRouter(PressableCardBase);

package/lib/esm/Card/backgroundImageStylesMap.js

@@ -0,0 +1,190 @@
+import Platform from "react-native-web/dist/exports/Platform";
+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%'
+  }
+};
+export default Platform.OS === 'web' ? webStyles : nativeStyles;

package/lib/esm/FlexGrid/FlexGrid.js

@@ -17,17 +17,14 @@ const CONTENT_FULL_WIDTH = 'full';
  * Resolves the maximum width for content based on the provided value and responsive width.
  *
  * @param {number|string|null|undefined} contentMinWidthValue - The minimum width value for the content.
- *        Can be a number (pixels), a string constant (e.g., CONTENT_FULL_WIDTH, CONTENT_MAX_WIDTH), or null/undefined.
- * @param {number|string} responsiveWidth - The responsive width to use when contentMinWidthValue is CONTENT_MAX_WIDTH.
- * @returns {number|string|null} The resolved maximum width value, which can be a number, a string (e.g., '100%'), or null.
+ *        Can be a number, a special string constant (e.g., CONTENT_FULL_WIDTH, CONTENT_MAX_WIDTH), or null/undefined.
+ * @param {number} responsiveWidth - The responsive width to use when contentMinWidthValue is CONTENT_MAX_WIDTH.
+ * @returns {number|string|null} The resolved maximum width value, or null if full width is desired.
  */
 const resolveContentMaxWidth = (contentMinWidthValue, responsiveWidth) => {
-  if (!contentMinWidthValue) {
+  if (!contentMinWidthValue || contentMinWidthValue === CONTENT_FULL_WIDTH) {
     return null;
   }
-  if (contentMinWidthValue === CONTENT_FULL_WIDTH) {
-    return '100%';
-  }
   if (Number.isFinite(contentMinWidthValue)) {
     return contentMinWidthValue;
   }
@@ -37,6 +34,25 @@ const resolveContentMaxWidth = (contentMinWidthValue, responsiveWidth) => {
   return contentMinWidthValue;
 };
 
+/**
+ * Calculates the maximum width for a given viewport based on limitWidth and contentMinWidth settings.
+ *
+ * @param {string} viewportKey - The viewport key ('xs', 'sm', 'md', 'lg', 'xl')
+ * @param {boolean} limitWidth - Whether to limit the width to viewport breakpoints
+ * @param {any} contentMinWidth - The contentMinWidth prop value
+ * @param {number|string|null} maxWidth - The resolved max width value
+ * @returns {number|string|null} The calculated maximum width for the viewport
+ */
+const getMaxWidthForViewport = (viewportKey, limitWidth, contentMinWidth, maxWidth) => {
+  if (limitWidth) {
+    return viewports.map.get(viewportKey === 'xs' ? 'sm' : viewportKey);
+  }
+  if (contentMinWidth) {
+    return maxWidth;
+  }
+  return viewportKey === 'xl' ? viewports.map.get('xl') : null;
+};
+
 /**
  * A mobile-first flexbox grid.
  */
@@ -73,23 +89,23 @@ const FlexGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const maxWidth = resolveContentMaxWidth(contentMinWidthValue, responsiveWidth);
   const stylesByViewport = {
     xs: {
-      maxWidth: limitWidth ? viewports.map.get('sm') : maxWidth,
+      maxWidth: getMaxWidthForViewport('xs', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[0] ? 'column-reverse' : 'column'
     },
     sm: {
-      maxWidth: limitWidth ? viewports.map.get('sm') : maxWidth,
+      maxWidth: getMaxWidthForViewport('sm', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[1] ? 'column-reverse' : 'column'
     },
     md: {
-      maxWidth: limitWidth ? viewports.map.get('md') : maxWidth,
+      maxWidth: getMaxWidthForViewport('md', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[2] ? 'column-reverse' : 'column'
     },
     lg: {
-      maxWidth: limitWidth ? viewports.map.get('lg') : maxWidth,
+      maxWidth: getMaxWidthForViewport('lg', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[3] ? 'column-reverse' : 'column'
     },
     xl: {
-      maxWidth: limitWidth ? viewports.map.get('xl') : maxWidth,
+      maxWidth: getMaxWidthForViewport('xl', limitWidth, contentMinWidth, maxWidth),
       flexDirection: reverseLevel[4] ? 'column-reverse' : 'column'
     }
   };

package/lib/esm/Tabs/Tabs.js

@@ -4,9 +4,10 @@ import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import StackView from '../StackView';
-import { a11yProps, getTokensPropType, focusHandlerProps, pressProps, selectSystemProps, useHash, useInputValue, variantProp, viewProps, withLinkRouter } from '../utils';
+import { a11yProps, getTokensPropType, focusHandlerProps, pressProps, selectSystemProps, useHash, useInputValue, useResponsiveProp, variantProp, viewProps, withLinkRouter } from '../utils';
 import HorizontalScroll, { horizontalScrollUtils, HorizontalScrollButton } from '../HorizontalScroll';
 import TabsItem from './TabsItem';
+import TabsDropdown from './TabsDropdown';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
@@ -39,6 +40,12 @@ const getStackViewTokens = variant => {
  * Tabs renders a horizontally-scrolling menu of selectable buttons which may link
  * to a page or control what content is displayed on this page.
  *
+ * By default, Tabs always renders as horizontal scrolling tabs regardless of viewport.
+ * To enable dropdown mode, you must explicitly pass `variant={{ dropdown: true }}`.
+ * When dropdown is enabled, it will only render as a dropdown on mobile and tablet
+ * viewports (XS and SM). On larger viewports (MD, LG, XL), it will still render as
+ * horizontal tabs even with dropdown enabled.
+ *
  * If you are using Tabs to navigate to a new page (web-only) you should pass
  * `navigation`as the `accessibilityRole` to te Tabs component, this will cause
  * TabItems to default to a role of link and obtain aria-current behaviour.
@@ -84,6 +91,31 @@ const Tabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const parentAccessibilityRole = restProps.accessibilityRole ?? 'tablist';
   const defaultTabItemAccessibiltyRole = getDefaultTabItemAccessibilityRole(parentAccessibilityRole);
   const stackViewTokens = getStackViewTokens(variant);
+
+  // Render dropdown only if explicitly requested via variant AND viewport is xs or sm
+  const isSmallViewport = useResponsiveProp({
+    xs: true,
+    sm: true,
+    md: false,
+    lg: false,
+    xl: false
+  }, false);
+  const shouldRenderDropdown = variant?.dropdown === true && isSmallViewport;
+  if (shouldRenderDropdown) {
+    return /*#__PURE__*/_jsx(TabsDropdown, {
+      ref: ref,
+      tokens: tokens,
+      itemTokens: itemTokens,
+      variant: variant,
+      value: currentValue,
+      onChange: setValue,
+      items: items,
+      LinkRouter: LinkRouter,
+      linkRouterProps: linkRouterProps,
+      accessibilityRole: parentAccessibilityRole === 'tablist' ? 'button' : parentAccessibilityRole,
+      ...restProps
+    });
+  }
   return /*#__PURE__*/_jsx(HorizontalScroll, {
     ref: ref,
     ScrollButton: HorizontalScrollButton,
@@ -143,13 +175,13 @@ const Tabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 Tabs.displayName = 'Tabs';
 Tabs.propTypes = {
   ...selectedSystemPropTypes,
-  ...withLinkRouter.PropTypes,
+  ...withLinkRouter.propTypes,
   /**
    * Array of `TabsItem`s
    */
   items: PropTypes.arrayOf(PropTypes.shape({
     ...selectedItemPropTypes,
-    ...withLinkRouter.PropTypes,
+    ...withLinkRouter.propTypes,
     href: PropTypes.string,
     label: PropTypes.string,
     id: PropTypes.string,