@telus-uds/components-base 3.25.0 → 3.27.0

package/src/Card/CardBase.jsx

@@ -116,6 +116,44 @@ const setBackgroundImage = ({
   )
 }
 
+const selectPaddedContentStyles = ({
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  borderWidth,
+  borderColor,
+  borderRadius,
+  hasInteractiveBorder
+}) => ({
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  ...(hasInteractiveBorder
+    ? {
+        borderWidth,
+        borderColor,
+        borderRadius
+      }
+    : {})
+})
+
+const selectInteractiveOverlayStyles = ({ backgroundColor, borderRadius, borderWidth }) => {
+  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 = ({
   flex,
@@ -214,13 +252,55 @@ const CardBase = React.forwardRef(
     const fullBleedPosition = useResponsiveProp(fullBleedContentPosition, 'bottom')
 
     if (backgroundImage && src) {
-      const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...containerStyle } = cardStyle
+      const {
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight,
+        borderWidth,
+        borderColor,
+        borderRadius,
+        backgroundColor,
+        ...containerStyle
+      } = cardStyle
 
       const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight
-      const paddedContent = hasPadding ? (
-        <View style={{ paddingTop, paddingBottom, paddingLeft, paddingRight }}>{children}</View>
-      ) : (
-        children
+      const hasInteractiveBorder = borderWidth && borderWidth > 0
+      const hasInteractiveOverlay = isOverlayColor(backgroundColor)
+
+      const paddedContent =
+        hasPadding || hasInteractiveBorder ? (
+          <View
+            style={selectPaddedContentStyles({
+              paddingTop,
+              paddingBottom,
+              paddingLeft,
+              paddingRight,
+              borderWidth,
+              borderColor,
+              borderRadius,
+              hasInteractiveBorder
+            })}
+          >
+            {children}
+          </View>
+        ) : (
+          children
+        )
+
+      const contentWithOverlay = (
+        <>
+          {hasInteractiveOverlay && Platform.OS === 'web' && (
+            <View
+              style={selectInteractiveOverlayStyles({
+                backgroundColor,
+                borderRadius,
+                borderWidth
+              })}
+            />
+          )}
+          <View style={staticStyles.contentOverlay}>{paddedContent}</View>
+        </>
       )
 
       content = setBackgroundImage({
@@ -229,8 +309,8 @@ const CardBase = React.forwardRef(
         backgroundImageResizeMode,
         backgroundImagePosition,
         backgroundImageAlign,
-        content: paddedContent,
-        cardStyle: containerStyle
+        content: contentWithOverlay,
+        cardStyle: { ...containerStyle, borderRadius }
       })
 
       return (
@@ -314,7 +394,7 @@ const staticStyles = StyleSheet.create({
     position: 'relative',
     width: '100%',
     height: '100%',
-    zIndex: 1
+    zIndex: 2
   },
   containContainer: {
     width: '100%',

package/src/Card/PressableCardBase.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, Platform, View, StyleSheet } from 'react-native'
-
 import { useViewport } from '../ViewportProvider'
 import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider'
 import {
@@ -26,6 +25,71 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   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 = ({ tokens, pressableState, children }) => {
+  const { borderWidth = 0 } = tokens
+  const showFocusBorder = pressableState.focused && borderWidth > 0
+
+  return (
+    <View
+      style={[
+        staticStyles.focusOverlayContainer,
+        selectFocusOverlayContainerStyles(tokens),
+        Platform.OS === 'web' && staticStyles.webOutlineNone
+      ]}
+    >
+      {children}
+      {showFocusBorder && (
+        <View
+          style={[staticStyles.focusBorder, selectFocusBorderStyles(tokens)]}
+          accessible={false}
+          importantForAccessibility="no"
+        />
+      )}
+    </View>
+  )
+}
+
+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',
@@ -103,11 +167,53 @@ const PressableCardBase = React.forwardRef(
         '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,
@@ -116,6 +222,10 @@ const PressableCardBase = React.forwardRef(
       return {
         flex,
         minWidth: minWidth + outerBorderGap + outerBorderWidth,
+        marginTop,
+        marginBottom,
+        marginLeft,
+        marginRight,
         ...applyOuterBorder({ outerBorderColor, outerBorderGap, outerBorderWidth, borderRadius }),
         ...Platform.select({ web: { outline: 'none' } })
       }
@@ -194,13 +304,15 @@ const PressableCardBase = React.forwardRef(
         {...selectProps({ ...rest, accessibilityRole })}
       >
         {(pressableState) => (
-          <CardBase
-            tokens={getCardTokens(pressableState)}
-            backgroundImage={backgroundImage}
-            fullBleedContent={fullBleedContent}
-          >
-            {typeof children === 'function' ? children(getCardState(pressableState)) : children}
-          </CardBase>
+          <FocusBorderOverlay tokens={getTokens(pressableState)} pressableState={pressableState}>
+            <CardBase
+              tokens={getCardTokens(pressableState)}
+              backgroundImage={backgroundImage}
+              fullBleedContent={fullBleedContent}
+            >
+              {typeof children === 'function' ? children(getCardState(pressableState)) : children}
+            </CardBase>
+          </FocusBorderOverlay>
         )}
       </Pressable>
     )
@@ -218,6 +330,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'
   }
 })