@telus-uds/components-web 4.14.0 → 4.15.0

package/CHANGELOG.md

@@ -1,9 +1,24 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 19 Nov 2025 05:51:40 GMT and should not be manually modified.
+This log was last generated on Fri, 12 Dec 2025 05:37:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 4.15.0
+
+Fri, 12 Dec 2025 05:37:21 GMT
+
+### Minor changes
+
+- `Card`: interative mode added for FullBleedContent (35577399+JoshHC@users.noreply.github.com)
+- `Listbox & NavigationBar`: add `secondLevel` variant (sergio.ramirez@telus.com)
+- Bump @telus-uds/components-base to v3.24.0
+- Bump @telus-uds/system-theme-tokens to v4.17.0
+
+### Patches
+
+- `Card`: problem with hover when overriding the background color fixed (josue.higueroscalderon@telus.com)
+
 ## 4.14.0
 
 Wed, 19 Nov 2025 05:51:40 GMT

package/lib/cjs/Card/Card.js

@@ -18,6 +18,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.viewProps]);
+const GRID_COLUMNS = 12;
 
 /**
  * A basic card component, unstyled by default.
@@ -49,6 +50,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemP
  * `Card` component accepts all the standard accessibility props.
  */
 const DynamicWidthContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  shouldForwardProp: prop => !['marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'height', 'alignSelf'].includes(prop),
   displayName: "Card__DynamicWidthContainer",
   componentId: "components-web__sc-1elbtwd-0"
 })(_ref => {
@@ -56,13 +58,21 @@ const DynamicWidthContainer = /*#__PURE__*/_styledComponents.default.div.withCon
     width,
     display,
     borderRadius,
-    overflow
+    overflow,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight
   } = _ref;
   return {
     width,
     display,
     borderRadius,
-    overflow
+    overflow,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight
   };
 });
 const Card = /*#__PURE__*/_react.default.forwardRef(function () {
@@ -85,6 +95,14 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     }
   };
   let ref = arguments.length > 1 ? arguments[1] : undefined;
+  const {
+    hrefAttrs: cardLevelHrefAttrs,
+    rest: restWithoutHrefAttrs
+  } = _componentsBase.hrefAttrsProp.bundle(rest);
+  const {
+    href: cardLevelHref,
+    ...restProps
+  } = restWithoutHrefAttrs;
   const {
     contentStackAlign,
     contentStackDirection,
@@ -93,18 +111,52 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     fullBleedContentChildrenAlign
   } = (0, _FullBleedContent.useFullBleedContentProps)(fullBleedContent);
   const {
-    imgCol
+    imgCol,
+    interactive: fullBleedInteractive,
+    onPress: fullBleedOnPress,
+    href: fullBleedHref,
+    hrefAttrs: fullBleedHrefAttrs,
+    ...fullBleedContentPropsClean
   } = fullBleedContentProps;
+  const effectiveFullBleedOnPress = fullBleedOnPress || onPress;
+  const effectiveFullBleedHref = fullBleedHref || cardLevelHref;
+  const effectiveFullBleedHrefAttrs = fullBleedHrefAttrs || cardLevelHrefAttrs;
 
   // If the card has rounded corners and a full bleed image, we need to apply
   // those corners on the image as well, but partially
+  const allThemeTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, variant);
   const {
     borderRadius
-  } = (0, _componentsBase.useThemeTokens)('Card', tokens, variant);
+  } = allThemeTokens;
+  const cardBaseBorderWidth = allThemeTokens.borderWidth;
+  const pressableBorderWidth = (0, _componentsBase.useThemeTokens)('Card', {}, {
+    ...variant,
+    interactive: true
+  }).borderWidth;
+  const marginOffset = `${-(cardBaseBorderWidth + pressableBorderWidth) / 2}px`;
   const getThemeTokens = (0, _componentsBase.useThemeTokensCallback)('Card', interactiveCard?.tokens, {
     interactive: true,
     ...(interactiveCard?.variant || {})
   });
+  const {
+    backgroundColor: _,
+    ...tokensWithoutBg
+  } = tokens;
+  const getFullBleedInteractiveTokens = (0, _componentsBase.useThemeTokensCallback)('Card', tokensWithoutBg, {
+    ...variant,
+    interactive: true
+  });
+  const getFullBleedInteractiveCardTokens = cardState => ({
+    ...getFullBleedInteractiveTokens(cardState),
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    // Suppress gradient if interactiveCard.body exists to avoid border duplication
+    ...(interactiveCard?.body ? {
+      gradient: undefined
+    } : {})
+  });
   const hasFooter = Boolean(footer);
   const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(borderRadius, fullBleedContentPosition, hasFooter);
 
@@ -112,32 +164,35 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
   // card content will adapt to the size of image to add up to 100% width of card width
   // pass as props to ConditionalWrapper
   const imgColCurrentViewport = (0, _componentsBase.useResponsiveProp)(imgCol);
-  const maxCol = 12;
+  const maxCol = GRID_COLUMNS;
   const fullBleedImageWidth = `${imgColCurrentViewport / maxCol * 100}%`;
   const adaptiveContentWidth = `${(maxCol - imgColCurrentViewport) / maxCol * 100}%`;
   const isImageWidthAdjustable = imgCol && (fullBleedContentPosition === 'left' || fullBleedContentPosition === 'right');
   const contentWrapperStyleProps = {
     width: adaptiveContentWidth,
-    display: imgColCurrentViewport >= maxCol ? 'none' : undefined
-  };
-  const imageWrapperStyleProps = {
-    width: fullBleedImageWidth,
-    borderRadius: imgColCurrentViewport >= maxCol ? borderRadius : undefined,
-    overflow: imgColCurrentViewport >= maxCol ? 'hidden' : undefined,
-    display: imgColCurrentViewport === 0 ? 'none' : undefined
+    ...(imgColCurrentViewport >= maxCol && {
+      display: 'none'
+    })
   };
   const columnFlex = {
     flexGrow: interactiveCard?.body ? 0 : 1,
     flexShrink: 1,
     justifyContent: 'space-between'
   };
-  const {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    ...cardBaseTokens
-  } = tokens;
+  const cardBaseTokens = Object.fromEntries(Object.entries(tokens).filter(_ref2 => {
+    let [key] = _ref2;
+    return !['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', ...(backgroundImage ? ['backgroundColor'] : [])].includes(key);
+  }));
+  const imageWrapperStyleProps = {
+    width: fullBleedImageWidth,
+    ...(imgColCurrentViewport >= maxCol && {
+      borderRadius,
+      overflow: 'hidden'
+    }),
+    ...(imgColCurrentViewport === 0 && {
+      display: 'none'
+    })
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Card, {
     ref: ref,
     variant: {
@@ -146,23 +201,102 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     },
     tokens: cardBaseTokens,
     backgroundImage: backgroundImage,
-    onPress: onPress,
+    onPress: fullBleedInteractive ? undefined : onPress,
     ...(interactiveCard?.selectionType && {
-      interactiveCard
+      interactiveCard,
+      id: rest.id
     }),
-    ...selectProps(rest),
-    children: [interactiveCard?.body && !interactiveCard.selectionType ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
-      ref: ref,
-      tokens: getThemeTokens,
-      dataSet: dataSet,
-      onPress: onPress,
-      href: interactiveCard?.href,
-      hrefAttrs: interactiveCard?.hrefAttrs,
-      ...selectProps(rest),
-      children: cardState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: typeof interactiveCard?.body === 'function' ? interactiveCard.body(cardState) : interactiveCard.body
+    ...selectProps(restProps),
+    children: [interactiveCard?.selectionType && children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+      tokens: tokens,
+      variant: variant,
+      withFooter: hasFooter,
+      children: children
+    }) : null, interactiveCard?.body && !interactiveCard.selectionType ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+        ref: ref,
+        tokens: getThemeTokens,
+        dataSet: dataSet,
+        onPress: onPress,
+        href: interactiveCard?.href,
+        hrefAttrs: interactiveCard?.hrefAttrs,
+        ...selectProps(restProps),
+        children: cardState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: typeof interactiveCard?.body === 'function' ? interactiveCard.body(cardState) : interactiveCard.body
+        })
+      }), children && fullBleedContentPosition === 'none' && !fullBleedInteractive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+        tokens: tokens,
+        variant: variant,
+        withFooter: hasFooter,
+        children: children
+      }) : null]
+    }) : null, fullBleedInteractive ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        marginTop: marginOffset,
+        marginBottom: marginOffset,
+        marginLeft: marginOffset,
+        marginRight: marginOffset
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+        ref: ref,
+        tokens: getFullBleedInteractiveCardTokens,
+        dataSet: dataSet,
+        onPress: effectiveFullBleedOnPress,
+        href: effectiveFullBleedHref,
+        hrefAttrs: effectiveFullBleedHrefAttrs,
+        ...selectProps(restProps),
+        children: cardState => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+          direction: contentStackDirection,
+          tokens: {
+            ...columnFlex,
+            alignItems: contentStackAlign
+          },
+          space: 0,
+          children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+            WrapperComponent: DynamicWidthContainer,
+            wrapperProps: contentWrapperStyleProps,
+            condition: isImageWidthAdjustable,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+              tokens: {
+                ...tokensWithoutBg,
+                ...(backgroundImage ? {} : {
+                  backgroundColor: 'transparent'
+                }),
+                ...(fullBleedContentChildrenAlign && {
+                  alignSelf: fullBleedContentChildrenAlign
+                })
+              },
+              variant: variant,
+              withFooter: hasFooter,
+              children: children
+            })
+          }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+            WrapperComponent: DynamicWidthContainer,
+            wrapperProps: imageWrapperStyleProps,
+            condition: isImageWidthAdjustable,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+              borderRadius: fullBleedBorderRadius,
+              ...fullBleedContentPropsClean,
+              position: fullBleedContentPosition,
+              cardState: cardState
+            })
+          })]
+        })
       })
-    }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    }) : null, !fullBleedInteractive && !interactiveCard?.body && fullBleedContentPosition === 'none' && children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+      tokens: {
+        ...tokens,
+        ...(backgroundImage ? {
+          backgroundColor: 'transparent'
+        } : {}),
+        ...(fullBleedContentChildrenAlign && {
+          alignSelf: fullBleedContentChildrenAlign
+        })
+      },
+      variant: variant,
+      withFooter: hasFooter,
+      children: children
+    }) : null, !fullBleedInteractive && fullBleedContentPosition !== 'none' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       direction: contentStackDirection,
       tokens: {
         ...columnFlex,
@@ -184,14 +318,15 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
           withFooter: hasFooter,
           children: children
         })
-      }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
         WrapperComponent: DynamicWidthContainer,
         wrapperProps: imageWrapperStyleProps,
         condition: isImageWidthAdjustable,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
           borderRadius: fullBleedBorderRadius,
-          ...fullBleedContentProps,
-          position: fullBleedContentPosition
+          ...fullBleedContentPropsClean,
+          position: fullBleedContentPosition,
+          cardState: undefined
         })
       })]
     }) : null, footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardFooter.default, {
@@ -208,6 +343,26 @@ const PositionedFullBleedContentPropType = _propTypes.default.shape({
   position: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(positionValues)).isRequired,
   align: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(alignValues)),
   contentAlign: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(alignValues)),
+  /**
+   * Make the full bleed content interactive.
+   * When true, the entire card (including the full bleed content) becomes interactive.
+   */
+  interactive: _propTypes.default.bool,
+  /**
+   * Function to call when the full bleed content is pressed.
+   * If not provided, falls back to the Card's onPress prop for backward compatibility.
+   */
+  onPress: _propTypes.default.func,
+  /**
+   * URL to navigate to when the full bleed content is pressed.
+   * If not provided, falls back to the Card's href prop for backward compatibility.
+   */
+  href: _propTypes.default.string,
+  /**
+   * Additional attributes for the href link.
+   * If not provided, falls back to the Card's hrefAttrs prop for backward compatibility.
+   */
+  hrefAttrs: _propTypes.default.shape(_componentsBase.hrefAttrsProp.types),
   // eslint-disable-next-line react/forbid-foreign-prop-types
   ..._FullBleedContent.default.propTypes
 });

package/lib/cjs/Card/CardContent.js

@@ -28,7 +28,8 @@ const CardContentContainer = /*#__PURE__*/_styledComponents.default.div.withConf
     contentFlexShrink: flexShrink,
     contentJustifyContent: justifyContent,
     borderWidth,
-    alignSelf
+    alignSelf,
+    backgroundColor
   } = _ref;
   return {
     // We need to make sure to have sharp corners on the bottom
@@ -47,7 +48,8 @@ const CardContentContainer = /*#__PURE__*/_styledComponents.default.div.withConf
     flexGrow,
     flexShrink,
     justifyContent,
-    alignSelf
+    alignSelf,
+    backgroundColor
   };
 });
 

package/lib/cjs/NavigationBar/NavigationBar.js

@@ -45,6 +45,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     LinkRouter,
     linkRouterProps,
     tokens,
+    variant,
     ...rest
   } = _ref;
   const {
@@ -211,6 +212,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         },
         items: scrollableNestedItems,
         tokens: tokens,
+        variant: variant,
         selected: itemId === currentValue,
         itemsContainerRef: itemsRef,
         ...itemRest,
@@ -279,6 +281,10 @@ NavigationBar.propTypes = {
   /**
    * Accesibility role for stackview
    */
-  accessibilityRole: _propTypes.default.string
+  accessibilityRole: _propTypes.default.string,
+  /**
+   * Variant configuration
+   */
+  variant: _componentsBase.variantProp.propType
 };
 var _default = exports.default = NavigationBar;

package/lib/cjs/NavigationBar/NavigationSubMenu.js

@@ -22,6 +22,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     id,
     isOpen = false,
     tokens = {},
+    variant = {},
     label,
     onClick,
     selectedId,
@@ -125,6 +126,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
         isReady: isReady,
         onLayout: onTargetLayout,
         ref: openOverlayRef,
+        variant: variant,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Listbox, {
           items: items,
           firstItemRef: targetRef,
@@ -132,6 +134,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
           selectedId: selectedId,
           LinkRouter: LinkRouter,
           linkRouterProps: linkRouterProps,
+          variant: variant,
+          onClose: onClick,
           ref: itemsContainerRef || ref
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -159,6 +163,7 @@ NavigationSubMenu.propTypes = {
   openOverlayRef: _propTypes.default.object,
   LinkRouter: _propTypes.default.elementType,
   linkRouterProps: _propTypes.default.object,
-  itemsContainerRef: _propTypes.default.object
+  itemsContainerRef: _propTypes.default.object,
+  variant: _propTypes.default.object
 };
 var _default = exports.default = NavigationSubMenu;

package/lib/cjs/shared/FullBleedContent/FullBleedContent.js

@@ -46,14 +46,19 @@ const FullBleedContentContainer = /*#__PURE__*/_styledComponents.default.div.wit
     borderBottomLeftRadius,
     borderBottomRightRadius,
     borderTopLeftRadius,
-    borderTopRightRadius
+    borderTopRightRadius,
+    opacity,
+    transform
   } = _ref2;
   return {
     overflow: 'hidden',
     borderBottomLeftRadius,
     borderBottomRightRadius,
     borderTopLeftRadius,
-    borderTopRightRadius
+    borderTopRightRadius,
+    opacity,
+    transform,
+    transition: 'opacity 0.2s ease, transform 0.2s ease'
   };
 });
 
@@ -66,6 +71,7 @@ const FullBleedContent = _ref3 => {
   let {
     borderRadius,
     content,
+    cardState,
     ...rest
   } = _ref3;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedContentContainer, {
@@ -89,6 +95,14 @@ FullBleedContent.propTypes = {
    * Custom JSX to be used for rendering the content (defaults to `ResponsiveImage` receiving other props).
    */
   content: _propTypes.default.node,
+  /**
+   * Card state object containing interactive states (hovered, pressed, focused).
+   */
+  cardState: _propTypes.default.shape({
+    hovered: _propTypes.default.bool,
+    pressed: _propTypes.default.bool,
+    focused: _propTypes.default.bool
+  }),
   /**
    * Image source.
    */