@telus-uds/components-base 3.12.2 → 3.14.0

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

@@ -3,7 +3,7 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps, contentfulProps } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps, contentfulProps, useUniqueId } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps, contentfulProps]);
 function selectBorderStyles(tokens) {
@@ -33,6 +33,7 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     dataSet,
     ...rest
   } = _ref;
+  const instanceId = useUniqueId('ExpandCollapse');
   const {
     currentValues: openIds,
     toggleOneValue: onToggle,
@@ -58,7 +59,8 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         onToggle,
         resetValues,
         setValues,
-        unsetValues
+        unsetValues,
+        instanceId
       }) : children
     })
   });

package/lib/esm/ExpandCollapseMini/ExpandCollapseMini.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ExpandCollapse from '../ExpandCollapse';
-import { getTokensPropType, selectSystemProps, contentfulProps } from '../utils';
+import { getTokensPropType, selectSystemProps, contentfulProps, useUniqueId } from '../utils';
 import { variantProp } from '../utils/props';
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,7 +16,7 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     dataSet,
     ...rest
   } = _ref;
-  const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel';
+  const expandCollapeMiniPanelId = useUniqueId('ExpandCollapseMiniPanel');
   const handleChange = (openPanels, event) => {
     if (typeof onToggle === 'function') {
       const isOpen = openPanels.length > 0;

package/lib/esm/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -45,7 +45,9 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     pressed
   });
   const {
-    size,
+    fontSize,
+    lineHeight,
+    iconSize,
     icon
   } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, {
     expanded,
@@ -62,18 +64,38 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       hover: linkHover
     } = linkState || {};
     const isHovered = hover || linkHover;
+    const iconBaselineOffset = 0;
+    const hoverTranslateY = 4;
+
+    // Calculate baseline alignment to vertically center icon with text
+    // This combines font and icon metrics with adjustments for visual balance
+    const fontBaseline = fontSize / hoverTranslateY; // Quarter of font size - adjusts for text's visual center point
+    const iconBaseline = iconSize / hoverTranslateY; // Quarter of icon size - adjusts for icon's visual center point
+    const staticOffset = hoverTranslateY; // Fixed downward adjustment to fine-tune vertical alignment
+    const sizeCompensation = -Math.abs(iconSize - fontSize); // Compensates when icon and text sizes differ significantly
+
+    const baselineAlignment = fontBaseline + iconBaseline - staticOffset + sizeCompensation;
     if (Platform.OS !== 'web') {
+      // For native platforms, use baseline alignment with optional offset
       return {
-        iconTranslateY: -1
+        iconTranslateY: baselineAlignment + iconBaselineOffset
       };
     }
     if (isHovered) {
-      // Include vertical icon animation on hover alongside built-in Link theme, the size is size4
+      // Apply animation offset to the baseline-aligned position
+      // When expanded: move icon UP (1.3 the hover distance for clear movement)
+      // When collapsed: move icon DOWN (single hover distance)
+      const hoverMovementDistance = 1.3;
+      const animationOffset = expanded ? -(hoverTranslateY * hoverMovementDistance) : hoverTranslateY;
       return {
-        iconTranslateY: (expanded ? -1 : 1) * size
+        iconTranslateY: baselineAlignment + iconBaselineOffset + animationOffset
       };
     }
-    return {};
+
+    // Default state uses baseline alignment with optional offset
+    return {
+      iconTranslateY: baselineAlignment + iconBaselineOffset
+    };
   };
   return /*#__PURE__*/_jsx(Link, {
     variant: appearance,
@@ -81,7 +103,9 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     iconPosition: iconPosition,
     tokens: linkState => ({
       ...linkTokens,
-      ...getTokens(linkState)
+      ...getTokens(linkState),
+      iconSize,
+      blockLineHeight: lineHeight
     }),
     ref: ref,
     ...presentationOnly,