@telus-uds/components-base 3.26.0 → 3.28.0

package/lib/esm/SideNav/ItemsGroup.js

@@ -4,6 +4,19 @@ import ItemContent from './ItemContent';
 import ExpandCollapse from '../ExpandCollapse';
 import { getTokensPropType, variantProp, componentPropType, selectTokens } from '../utils';
 import { useThemeTokensCallback } from '../ThemeProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const selectPanelTokens = _ref => {
+  let {
+    borderWidth,
+    borderColor,
+    backgroundColor
+  } = _ref;
+  return {
+    contentPanelBackgroundColor: backgroundColor,
+    borderBottomWidth: borderWidth,
+    borderColor
+  };
+};
 
 /**
  Expandable content areas for use within `SideNav`.
@@ -15,8 +28,7 @@ import { useThemeTokensCallback } from '../ThemeProvider';
  ## Usage Criteria
  - Use `SideNav.ItemsGroup` with large pages that have multiple sections
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-const ItemsGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const ItemsGroup = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     label,
@@ -27,7 +39,7 @@ const ItemsGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     tokens,
     itemTokens,
     onToggle
-  } = _ref;
+  } = _ref2;
   // A SideNav control uses the same style and theme as SideNavItem, with a 'parent' variant,
   // plus control-specific tokens from the SideNavItemsGroup theme (e.g. open/close icon, etc).
   const getAppearance = appearance => ({
@@ -40,28 +52,27 @@ const ItemsGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     type: 'parent'
   });
   const getGroupTokens = useThemeTokensCallback('SideNavItemsGroup', tokens, variant);
-  const getPanelTokens = appearance => {
-    const {
-      panelBorderColor,
-      ...itemsGroupTokens
-    } = getGroupTokens(getAppearance(appearance));
-    const groupTokens = {
-      ...itemsGroupTokens,
-      borderWidth: 0,
-      marginBottom: 0
-    };
-    return selectTokens('ExpandCollapsePanel', groupTokens);
-  };
   const getItemTokens = useThemeTokensCallback('SideNavItem', itemTokens, variant);
-  const getControlTokens = appearance => selectTokens('ExpandCollapseControl', {
-    ...getItemTokens(getItemAppearance(appearance)),
-    // main style from SideNavItem
-    ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc
+  const getPanelTokens = appearance => selectTokens('ExpandCollapsePanel', {
+    ...staticTokens.panel,
+    ...getGroupTokens(getAppearance(appearance)),
+    ...selectPanelTokens(getItemTokens(getItemAppearance(appearance)))
+  });
+  const getControlTokens = appearance => ({
+    ...selectTokens('ExpandCollapseControl', {
+      ...getItemTokens(getItemAppearance(appearance)),
+      // main style from SideNavItem
+      ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc,
+    }),
+    ...staticTokens.control
   });
   const controlContent = controlState => {
     const currentItemTokens = getItemTokens(getItemAppearance(controlState));
     return /*#__PURE__*/_jsx(ItemContent, {
-      tokens: currentItemTokens,
+      tokens: {
+        ...currentItemTokens,
+        ...staticTokens.content
+      },
       children: label
     });
   };
@@ -77,9 +88,23 @@ const ItemsGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       active: isActive
     } // ExpandCollapse.Panel handles expanded state
     ,
+    disableMobileScrollBuffer: true,
     children: children
   });
 });
+const staticTokens = {
+  panel: {
+    borderWidth: 0,
+    marginBottom: 0
+  },
+  control: {
+    borderWidth: 0,
+    textLine: null
+  },
+  content: {
+    accentWidth: 0
+  }
+};
 ItemsGroup.displayName = 'ItemsGroup';
 ItemsGroup.propTypes = {
   /**

package/lib/esm/SideNav/SideNav.js

@@ -6,13 +6,28 @@ import ItemsGroup from './ItemsGroup';
 import { useThemeTokens } from '../ThemeProvider';
 import { a11yProps, componentPropType, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-function selectBorderStyles(tokens) {
+const selectContainerTokens = _ref => {
+  let {
+    borderWidth,
+    borderStyle,
+    borderColor
+  } = _ref;
   return {
-    borderBottomWidth: tokens.borderWidth,
-    borderBottomStyle: tokens.borderStyle,
-    borderBottomColor: tokens.borderColor
+    borderTopWidth: borderWidth,
+    borderStyle,
+    borderColor
   };
-}
+};
+const selectItemTokens = function () {
+  let tokens = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let isLastItem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return {
+    ...tokens,
+    ...(isLastItem ? {
+      borderWidth: 0
+    } : {})
+  };
+};
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
@@ -20,7 +35,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  - Use in conjunction with a large amount of educational / informational content
  - Allow the user to navigate between options frequently and efficiently
  */
-const SideNav = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const SideNav = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     variant = {},
@@ -29,7 +44,7 @@ const SideNav = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     itemTokens,
     groupTokens,
     ...rest
-  } = _ref;
+  } = _ref2;
   const themeTokens = useThemeTokens('SideNav', tokens, variant);
   const [active, setActive] = React.useState({
     groupId: undefined,
@@ -47,14 +62,15 @@ const SideNav = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   return /*#__PURE__*/_jsx(ExpandCollapse, {
     ref: ref,
     maxOpen: accordion ? 1 : null,
-    style: selectBorderStyles(themeTokens),
+    tokens: selectContainerTokens(themeTokens),
     ...selectProps(rest),
-    children: _ref2 => {
+    children: _ref3 => {
       let {
         openIds,
         onToggle
-      } = _ref2;
-      const renderItem = (item, index, groupId) => {
+      } = _ref3;
+      const renderItem = function (item, index, groupId) {
+        let isLastItem = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
         const {
           itemId = `item-${index}`,
           onPress
@@ -72,7 +88,7 @@ const SideNav = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             ...variant,
             type: 'child'
           } : variant,
-          tokens: itemTokens,
+          tokens: selectItemTokens(itemTokens, isLastItem),
           isActive: isItemActive(itemId, groupId),
           onPress: handlePress
         });
@@ -96,7 +112,7 @@ const SideNav = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             openGroups: openIds,
             isActive: isGroupActive,
             onToggle: handleToggle
-          }, React.Children.map(child.props.children, (item, itemIndex) => renderItem(item, itemIndex, groupId)));
+          }, React.Children.map(child.props.children, (item, itemIndex) => renderItem(item, itemIndex, groupId, itemIndex === child.props.children.length - 1)));
         }
         return null;
       });

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.18.0",
+    "@telus-uds/system-theme-tokens": "^4.20.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.26.0",
+  "version": "3.28.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.18.0",
+    "@telus-uds/system-theme-tokens": "^4.20.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.26.0",
+  "version": "3.28.0",
   "types": "types/index.d.ts"
 }

package/src/Card/Card.jsx

@@ -30,10 +30,10 @@ const SelectionType = {
   None: undefined
 }
 
-const selectInputStyle = ({ paddingTop, paddingRight }) => ({
+const selectInputStyle = ({ paddingTop, paddingRight, paddingLeft }, { inputPositionProp }) => ({
   position: 'absolute',
   top: paddingTop,
-  right: paddingRight
+  ...(inputPositionProp === 'left' ? { left: paddingLeft } : { right: paddingRight })
 })
 
 const getInputProps = ({
@@ -108,7 +108,18 @@ const getInputProps = ({
  */
 const Card = React.forwardRef(
   (
-    { children, tokens, variant, dataSet, onPress, id, interactiveCard, backgroundImage, ...rest },
+    {
+      children,
+      tokens,
+      variant,
+      dataSet,
+      onPress,
+      id,
+      interactiveCard,
+      backgroundImage,
+      testID,
+      ...rest
+    },
     ref
   ) => {
     const viewport = useViewport()
@@ -216,6 +227,11 @@ const Card = React.forwardRef(
     }
 
     const renderInputPerSelectionType = (props) => {
+      const containerStyle = selectInputStyle(getThemeTokens(), {
+        inputPositionProp: interactiveCard?.inputPosition
+      })
+      const inputTestID = testID && `${testID}-selection-input`
+
       if (!isControl) {
         return null
       }
@@ -223,13 +239,13 @@ const Card = React.forwardRef(
       switch (selectionType) {
         case SelectionType.Checkbox:
           return (
-            <View style={selectInputStyle(getThemeTokens())}>
+            <View style={containerStyle} testID={inputTestID}>
               <CheckboxButton {...props} tokens={{ ...checkboxTokens, ...props?.tokens }} />
             </View>
           )
         case SelectionType.Radio:
           return (
-            <View style={selectInputStyle(getThemeTokens())}>
+            <View style={containerStyle} testID={inputTestID}>
               <RadioButton {...props} tokens={{ ...radioTokens, ...props?.tokens }} />
             </View>
           )
@@ -245,6 +261,7 @@ const Card = React.forwardRef(
           tokens={interactiveCard?.body ? restOfTokens : cardStyles}
           backgroundImage={backgroundImage}
           dataSet={mediaIds && { media: mediaIds }}
+          testID={testID}
           {...selectProps(rest)}
         >
           {interactiveCard?.body && (
@@ -342,7 +359,8 @@ Card.propTypes = {
     selectionType: PropTypes.oneOf(Object.values(SelectionType)),
     variant: variantProp.propType,
     href: PropTypes.string,
-    hrefAttrs: PropTypes.shape(hrefAttrsProp.types)
+    hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
+    inputPosition: PropTypes.oneOf(['left', 'right'])
   }),
   /**
    * Apply background image to the card.
@@ -365,7 +383,11 @@ Card.propTypes = {
   /**
    * Data set for the card.
    */
-  dataSet: PropTypes.object
+  dataSet: PropTypes.object,
+  /**
+   * Test ID used for e2e testing.
+   */
+  testID: PropTypes.string
 }
 
 export default Card

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,
@@ -195,7 +233,13 @@ export const selectStyles = ({
  */
 const CardBase = React.forwardRef(
   ({ children, tokens, dataSet, backgroundImage, fullBleedContent, cardState, ...rest }, ref) => {
-    const cardStyle = selectStyles(typeof tokens === 'function' ? tokens(cardState) : tokens)
+    const resolvedTokens = typeof tokens === 'function' ? tokens(cardState) : tokens
+    const tokensToUse =
+      backgroundImage && backgroundImage.src
+        ? { ...resolvedTokens, gradient: undefined, backgroundGradient: undefined }
+        : resolvedTokens
+
+    const cardStyle = selectStyles(tokensToUse)
     const props = selectProps(rest)
 
     let content = children
@@ -214,13 +258,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,12 +315,12 @@ const CardBase = React.forwardRef(
         backgroundImageResizeMode,
         backgroundImagePosition,
         backgroundImageAlign,
-        content: paddedContent,
-        cardStyle: containerStyle
+        content: contentWithOverlay,
+        cardStyle: { ...containerStyle, borderRadius }
       })
 
       return (
-        <View style={containerStyle} dataSet={dataSet} ref={ref} {...props}>
+        <View style={{ ...containerStyle, borderRadius }} dataSet={dataSet} ref={ref} {...props}>
           {content}
         </View>
       )
@@ -313,8 +399,8 @@ const staticStyles = StyleSheet.create({
   contentOverlay: {
     position: 'relative',
     width: '100%',
-    height: '100%',
-    zIndex: 1
+    minHeight: '100%',
+    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'
   }
 })