@telus-uds/components-base 3.25.0 → 3.27.0

package/lib/esm/Card/CardBase.js

@@ -107,9 +107,51 @@ const setBackgroundImage = _ref => {
     children: content
   });
 };
+const selectPaddedContentStyles = _ref2 => {
+  let {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    borderWidth,
+    borderColor,
+    borderRadius,
+    hasInteractiveBorder
+  } = _ref2;
+  return {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    ...(hasInteractiveBorder ? {
+      borderWidth,
+      borderColor,
+      borderRadius
+    } : {})
+  };
+};
+const selectInteractiveOverlayStyles = _ref3 => {
+  let {
+    backgroundColor,
+    borderRadius,
+    borderWidth
+  } = _ref3;
+  const adjustedBorderRadius = Math.max(0, borderRadius - borderWidth);
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor,
+    borderRadius: adjustedBorderRadius,
+    pointerEvents: 'none',
+    zIndex: 1
+  };
+};
 
 // Ensure explicit selection of tokens
-export const selectStyles = _ref2 => {
+export const selectStyles = _ref4 => {
   let {
     flex,
     backgroundColor,
@@ -130,7 +172,7 @@ export const selectStyles = _ref2 => {
     gradient,
     maxHeight,
     overflowY
-  } = _ref2;
+  } = _ref4;
   const hasGradient = (gradient || backgroundGradient) && Platform.OS === 'web';
   let backgroundImageValue = null;
   if (hasGradient) {
@@ -176,7 +218,7 @@ export const selectStyles = _ref2 => {
  * 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((_ref3, ref) => {
+const CardBase = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     children,
     tokens,
@@ -185,7 +227,7 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     fullBleedContent,
     cardState,
     ...rest
-  } = _ref3;
+  } = _ref5;
   const cardStyle = selectStyles(typeof tokens === 'function' ? tokens(cardState) : tokens);
   const props = selectProps(rest);
   let content = children;
@@ -212,26 +254,51 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       paddingBottom,
       paddingLeft,
       paddingRight,
+      borderWidth,
+      borderColor,
+      borderRadius,
+      backgroundColor,
       ...containerStyle
     } = cardStyle;
     const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight;
-    const paddedContent = hasPadding ? /*#__PURE__*/_jsx(View, {
-      style: {
+    const hasInteractiveBorder = borderWidth && borderWidth > 0;
+    const hasInteractiveOverlay = isOverlayColor(backgroundColor);
+    const paddedContent = hasPadding || hasInteractiveBorder ? /*#__PURE__*/_jsx(View, {
+      style: selectPaddedContentStyles({
         paddingTop,
         paddingBottom,
         paddingLeft,
-        paddingRight
-      },
+        paddingRight,
+        borderWidth,
+        borderColor,
+        borderRadius,
+        hasInteractiveBorder
+      }),
       children: children
     }) : children;
+    const contentWithOverlay = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [hasInteractiveOverlay && Platform.OS === 'web' && /*#__PURE__*/_jsx(View, {
+        style: selectInteractiveOverlayStyles({
+          backgroundColor,
+          borderRadius,
+          borderWidth
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: staticStyles.contentOverlay,
+        children: paddedContent
+      })]
+    });
     content = setBackgroundImage({
       src: imageSourceViewport,
       alt,
       backgroundImageResizeMode,
       backgroundImagePosition,
       backgroundImageAlign,
-      content: paddedContent,
-      cardStyle: containerStyle
+      content: contentWithOverlay,
+      cardStyle: {
+        ...containerStyle,
+        borderRadius
+      }
     });
     return /*#__PURE__*/_jsx(View, {
       style: containerStyle,
@@ -313,7 +380,7 @@ const staticStyles = StyleSheet.create({
     position: 'relative',
     width: '100%',
     height: '100%',
-    zIndex: 1
+    zIndex: 2
   },
   containContainer: {
     width: '100%',

package/lib/esm/Card/PressableCardBase.js

@@ -8,8 +8,74 @@ import { useViewport } from '../ViewportProvider';
 import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider';
 import { a11yProps, clickProps, focusHandlerProps, getTokensSetPropType, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
 import CardBase, { fullBleedContentPropTypes } from './CardBase';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
+const selectFocusOverlayContainerStyles = tokens => {
+  const {
+    flex,
+    minWidth,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight
+  } = tokens;
+  return {
+    flex: flex || 1,
+    minWidth: minWidth || 0,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight
+  };
+};
+const selectFocusBorderStyles = tokens => {
+  const {
+    borderWidth,
+    borderColor,
+    borderRadius
+  } = tokens;
+  return {
+    borderWidth,
+    borderColor,
+    borderRadius: borderRadius || 0
+  };
+};
+const FocusBorderOverlay = _ref => {
+  let {
+    tokens,
+    pressableState,
+    children
+  } = _ref;
+  const {
+    borderWidth = 0
+  } = tokens;
+  const showFocusBorder = pressableState.focused && borderWidth > 0;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [staticStyles.focusOverlayContainer, selectFocusOverlayContainerStyles(tokens), Platform.OS === 'web' && staticStyles.webOutlineNone],
+    children: [children, showFocusBorder && /*#__PURE__*/_jsx(View, {
+      style: [staticStyles.focusBorder, selectFocusBorderStyles(tokens)],
+      accessible: false,
+      importantForAccessibility: "no"
+    })]
+  });
+};
+FocusBorderOverlay.propTypes = {
+  tokens: PropTypes.shape({
+    flex: PropTypes.number,
+    minWidth: PropTypes.number,
+    marginTop: PropTypes.number,
+    marginBottom: PropTypes.number,
+    marginLeft: PropTypes.number,
+    marginRight: PropTypes.number,
+    borderColor: PropTypes.string,
+    borderWidth: PropTypes.number,
+    borderRadius: PropTypes.number
+  }).isRequired,
+  pressableState: PropTypes.shape({
+    focused: PropTypes.bool
+  }).isRequired,
+  children: PropTypes.node
+};
 const tokenKeys = ['flex', 'backgroundColor', 'borderColor', 'gradient', 'borderRadius', 'borderWidth', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'minWidth', 'shadow', 'contentAlignItems', 'contentJustifyContent', 'contentFlexGrow', 'contentFlexShrink',
 // Outer border tokens. TODO: centralise common token sets like these as part of
 // https://github.com/telus/universal-design-system/issues/782
@@ -21,7 +87,7 @@ export const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.
  * based on these to an outer border and a base Card component. Not intended to be used in
  * apps or sites directly: build themed components on top of this.
  */
-const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
@@ -35,7 +101,7 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     fullBleedContent,
     accessibilityRole = href ? 'link' : undefined,
     ...rawRest
-  } = _ref;
+  } = _ref2;
   const {
     onPress,
     ...rest
@@ -52,11 +118,62 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     partial: true,
     allowFunction: true
   }), 'PressableCard');
-  const getCardTokens = pressableState => selectTokens('Card', getTokens(pressableState));
+  const getCardTokens = pressableState => {
+    const allTokens = getTokens(pressableState);
+    const cardTokens = selectTokens('Card', allTokens);
+
+    // Handle focus border transparency to avoid double borders
+    if (pressableState.focused && allTokens.borderWidth > 0) {
+      const result = {
+        ...cardTokens,
+        borderColor: 'transparent'
+      };
+
+      // Also handle backgroundImage for interactive states
+      if (backgroundImage) {
+        const {
+          hovered,
+          pressed,
+          focused
+        } = pressableState || {};
+        const isInteractiveState = hovered || pressed || focused;
+        if (!isInteractiveState) {
+          const {
+            backgroundColor,
+            ...restTokens
+          } = result;
+          return restTokens;
+        }
+      }
+      return result;
+    }
+
+    // Handle backgroundImage when not in focus state
+    if (backgroundImage) {
+      const {
+        hovered,
+        pressed,
+        focused
+      } = pressableState || {};
+      const isInteractiveState = hovered || pressed || focused;
+      if (!isInteractiveState) {
+        const {
+          backgroundColor,
+          ...restTokens
+        } = cardTokens;
+        return restTokens;
+      }
+    }
+    return cardTokens;
+  };
   const getOuterBorderStyle = pressableState => {
     const {
       flex,
       minWidth,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
       outerBorderColor,
       outerBorderGap = 0,
       outerBorderWidth = 0,
@@ -65,6 +182,10 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     return {
       flex,
       minWidth: minWidth + outerBorderGap + outerBorderWidth,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
       ...applyOuterBorder({
         outerBorderColor,
         outerBorderGap,
@@ -158,11 +279,15 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ...rest,
       accessibilityRole
     }),
-    children: pressableState => /*#__PURE__*/_jsx(CardBase, {
-      tokens: getCardTokens(pressableState),
-      backgroundImage: backgroundImage,
-      fullBleedContent: fullBleedContent,
-      children: typeof children === 'function' ? children(getCardState(pressableState)) : children
+    children: pressableState => /*#__PURE__*/_jsx(FocusBorderOverlay, {
+      tokens: getTokens(pressableState),
+      pressableState: pressableState,
+      children: /*#__PURE__*/_jsx(CardBase, {
+        tokens: getCardTokens(pressableState),
+        backgroundImage: backgroundImage,
+        fullBleedContent: fullBleedContent,
+        children: typeof children === 'function' ? children(getCardState(pressableState)) : children
+      })
     })
   });
 });
@@ -177,6 +302,20 @@ const staticStyles = StyleSheet.create({
     alignItems: 'stretch',
     justifyContent: 'flex-start',
     textDecorationLine: 'none'
+  },
+  focusOverlayContainer: {
+    position: 'relative'
+  },
+  webOutlineNone: {
+    outline: 'none'
+  },
+  focusBorder: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'none'
   }
 });
 PressableCardBase.displayName = 'PressableCardBase';