@telus-uds/components-web 4.14.0 → 4.16.0

package/src/Card/Card.jsx

@@ -28,6 +28,8 @@ import ConditionalWrapper from '../shared/ConditionalWrapper'
 // Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const GRID_COLUMNS = 12
+
 /**
  * A basic card component, unstyled by default.
  *
@@ -57,12 +59,34 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * ## Accessibility
  * `Card` component accepts all the standard accessibility props.
  */
-const DynamicWidthContainer = styled.div(({ width, display, borderRadius, overflow }) => ({
-  width,
-  display,
-  borderRadius,
-  overflow
-}))
+const DynamicWidthContainer = styled.div.withConfig({
+  shouldForwardProp: (prop) =>
+    !['marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'height', 'alignSelf'].includes(
+      prop
+    )
+})(
+  ({
+    width,
+    display,
+    borderRadius,
+    overflow,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    alignSelf
+  }) => ({
+    width,
+    display,
+    borderRadius,
+    overflow,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    alignSelf
+  })
+)
 
 const Card = React.forwardRef(
   (
@@ -84,6 +108,9 @@ const Card = React.forwardRef(
     },
     ref
   ) => {
+    const { hrefAttrs: cardLevelHrefAttrs, rest: restWithoutHrefAttrs } = hrefAttrsProp.bundle(rest)
+    const { href: cardLevelHref, ...restProps } = restWithoutHrefAttrs
+
     const {
       contentStackAlign,
       contentStackDirection,
@@ -92,15 +119,54 @@ const Card = React.forwardRef(
       fullBleedContentChildrenAlign
     } = useFullBleedContentProps(fullBleedContent)
 
-    const { imgCol } = fullBleedContentProps
+    const {
+      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 { borderRadius } = useThemeTokens('Card', tokens, variant)
+    const allThemeTokens = useThemeTokens('Card', tokens, variant)
+    const { borderRadius } = allThemeTokens
+
+    const cardBaseBorderWidth = allThemeTokens.borderWidth
+    const pressableBorderWidth = useThemeTokens(
+      'Card',
+      {},
+      { ...variant, interactive: true }
+    ).borderWidth
+    const marginOffset = `${-(cardBaseBorderWidth + pressableBorderWidth) / 2}px`
+
     const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
       interactive: true,
       ...(interactiveCard?.variant || {})
     })
+
+    const { backgroundColor: _, ...tokensWithoutBg } = tokens
+
+    const getFullBleedInteractiveTokens = 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 = getFullBleedBorderRadius(
       borderRadius,
@@ -112,7 +178,7 @@ const Card = React.forwardRef(
     // 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 = useResponsiveProp(imgCol)
-    const maxCol = 12
+    const maxCol = GRID_COLUMNS
     const fullBleedImageWidth = `${(imgColCurrentViewport / maxCol) * 100}%`
     const adaptiveContentWidth = `${((maxCol - imgColCurrentViewport) / maxCol) * 100}%`
 
@@ -121,14 +187,10 @@ const Card = React.forwardRef(
 
     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' }),
+      ...(fullBleedContentChildrenAlign && {
+        alignSelf: fullBleedContentChildrenAlign
+      })
     }
 
     const columnFlex = {
@@ -137,7 +199,24 @@ const Card = React.forwardRef(
       justifyContent: 'space-between'
     }
 
-    const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...cardBaseTokens } = tokens
+    const cardBaseTokens = Object.fromEntries(
+      Object.entries(tokens).filter(
+        ([key]) =>
+          ![
+            'paddingTop',
+            'paddingBottom',
+            'paddingLeft',
+            'paddingRight',
+            ...(backgroundImage ? ['backgroundColor'] : [])
+          ].includes(key)
+      )
+    )
+
+    const imageWrapperStyleProps = {
+      width: fullBleedImageWidth,
+      ...(imgColCurrentViewport >= maxCol && { borderRadius, overflow: 'hidden' }),
+      ...(imgColCurrentViewport === 0 && { display: 'none' })
+    }
 
     return (
       <CardBase
@@ -145,30 +224,125 @@ const Card = React.forwardRef(
         variant={{ ...variant, padding: 'custom' }}
         tokens={cardBaseTokens}
         backgroundImage={backgroundImage}
-        onPress={onPress}
-        {...(interactiveCard?.selectionType && { interactiveCard })}
-        {...selectProps(rest)}
+        onPress={fullBleedInteractive ? undefined : onPress}
+        {...(interactiveCard?.selectionType && { interactiveCard, id: rest.id })}
+        {...selectProps(restProps)}
       >
+        {interactiveCard?.selectionType && children ? (
+          <CardContent tokens={tokens} variant={variant} withFooter={hasFooter}>
+            {children}
+          </CardContent>
+        ) : null}
         {interactiveCard?.body && !interactiveCard.selectionType ? (
-          <PressableCardBase
-            ref={ref}
-            tokens={getThemeTokens}
-            dataSet={dataSet}
-            onPress={onPress}
-            href={interactiveCard?.href}
-            hrefAttrs={interactiveCard?.hrefAttrs}
-            {...selectProps(rest)}
+          <>
+            <PressableCardBase
+              ref={ref}
+              tokens={getThemeTokens}
+              dataSet={dataSet}
+              onPress={onPress}
+              href={interactiveCard?.href}
+              hrefAttrs={interactiveCard?.hrefAttrs}
+              {...selectProps(restProps)}
+            >
+              {(cardState) => (
+                <>
+                  {typeof interactiveCard?.body === 'function'
+                    ? interactiveCard.body(cardState)
+                    : interactiveCard.body}
+                </>
+              )}
+            </PressableCardBase>
+            {children && fullBleedContentPosition === 'none' && !fullBleedInteractive ? (
+              <CardContent tokens={tokens} variant={variant} withFooter={hasFooter}>
+                {children}
+              </CardContent>
+            ) : null}
+          </>
+        ) : null}
+        {fullBleedInteractive ? (
+          <div
+            style={{
+              marginTop: marginOffset,
+              marginBottom: marginOffset,
+              marginLeft: marginOffset,
+              marginRight: marginOffset
+            }}
           >
-            {(cardState) => (
-              <>
-                {typeof interactiveCard?.body === 'function'
-                  ? interactiveCard.body(cardState)
-                  : interactiveCard.body}
-              </>
-            )}
-          </PressableCardBase>
+            <PressableCardBase
+              ref={ref}
+              tokens={getFullBleedInteractiveCardTokens}
+              dataSet={dataSet}
+              onPress={effectiveFullBleedOnPress}
+              href={effectiveFullBleedHref}
+              hrefAttrs={effectiveFullBleedHrefAttrs}
+              {...selectProps(restProps)}
+            >
+              {(cardState) => (
+                <StackView
+                  direction={contentStackDirection}
+                  tokens={{ ...columnFlex, alignItems: contentStackAlign }}
+                  space={0}
+                >
+                  {children ? (
+                    <ConditionalWrapper
+                      WrapperComponent={DynamicWidthContainer}
+                      wrapperProps={contentWrapperStyleProps}
+                      condition={isImageWidthAdjustable}
+                    >
+                      <CardContent
+                        tokens={{
+                          ...tokensWithoutBg,
+                          ...(backgroundImage ? {} : { backgroundColor: 'transparent' }),
+                          ...(!isImageWidthAdjustable &&
+                            fullBleedContentChildrenAlign && {
+                              alignSelf: fullBleedContentChildrenAlign
+                            })
+                        }}
+                        variant={variant}
+                        withFooter={hasFooter}
+                      >
+                        {children}
+                      </CardContent>
+                    </ConditionalWrapper>
+                  ) : null}
+                  {fullBleedContentPosition !== 'none' && (
+                    <ConditionalWrapper
+                      WrapperComponent={DynamicWidthContainer}
+                      wrapperProps={imageWrapperStyleProps}
+                      condition={isImageWidthAdjustable}
+                    >
+                      <FullBleedContent
+                        borderRadius={fullBleedBorderRadius}
+                        {...fullBleedContentPropsClean}
+                        position={fullBleedContentPosition}
+                        cardState={cardState}
+                      />
+                    </ConditionalWrapper>
+                  )}
+                </StackView>
+              )}
+            </PressableCardBase>
+          </div>
         ) : null}
-        {children || fullBleedContentPosition !== 'none' ? (
+        {!fullBleedInteractive &&
+        !interactiveCard?.body &&
+        fullBleedContentPosition === 'none' &&
+        children ? (
+          <CardContent
+            tokens={{
+              ...tokens,
+              ...(backgroundImage ? { backgroundColor: 'transparent' } : {}),
+              ...(fullBleedContentChildrenAlign && {
+                alignSelf: fullBleedContentChildrenAlign
+              })
+            }}
+            variant={variant}
+            withFooter={hasFooter}
+          >
+            {children}
+          </CardContent>
+        ) : null}
+        {!fullBleedInteractive && fullBleedContentPosition !== 'none' ? (
           <StackView
             direction={contentStackDirection}
             tokens={{ ...columnFlex, alignItems: contentStackAlign }}
@@ -183,9 +357,10 @@ const Card = React.forwardRef(
                 <CardContent
                   tokens={{
                     ...tokens,
-                    ...(fullBleedContentChildrenAlign && {
-                      alignSelf: fullBleedContentChildrenAlign
-                    })
+                    ...(!isImageWidthAdjustable &&
+                      fullBleedContentChildrenAlign && {
+                        alignSelf: fullBleedContentChildrenAlign
+                      })
                   }}
                   variant={variant}
                   withFooter={hasFooter}
@@ -194,19 +369,18 @@ const Card = React.forwardRef(
                 </CardContent>
               </ConditionalWrapper>
             ) : null}
-            {fullBleedContentPosition !== 'none' && (
-              <ConditionalWrapper
-                WrapperComponent={DynamicWidthContainer}
-                wrapperProps={imageWrapperStyleProps}
-                condition={isImageWidthAdjustable}
-              >
-                <FullBleedContent
-                  borderRadius={fullBleedBorderRadius}
-                  {...fullBleedContentProps}
-                  position={fullBleedContentPosition}
-                />
-              </ConditionalWrapper>
-            )}
+            <ConditionalWrapper
+              WrapperComponent={DynamicWidthContainer}
+              wrapperProps={imageWrapperStyleProps}
+              condition={isImageWidthAdjustable}
+            >
+              <FullBleedContent
+                borderRadius={fullBleedBorderRadius}
+                {...fullBleedContentPropsClean}
+                position={fullBleedContentPosition}
+                cardState={undefined}
+              />
+            </ConditionalWrapper>
           </StackView>
         ) : null}
         {footer && (
@@ -225,6 +399,26 @@ const PositionedFullBleedContentPropType = PropTypes.shape({
   position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(positionValues)).isRequired,
   align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(alignValues)),
   contentAlign: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(alignValues)),
+  /**
+   * Make the full bleed content interactive.
+   * When true, the entire card (including the full bleed content) becomes interactive.
+   */
+  interactive: PropTypes.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.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.string,
+  /**
+   * Additional attributes for the href link.
+   * If not provided, falls back to the Card's hrefAttrs prop for backward compatibility.
+   */
+  hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
   // eslint-disable-next-line react/forbid-foreign-prop-types
   ...FullBleedContent.propTypes
 })

package/src/Card/CardContent.jsx

@@ -27,7 +27,8 @@ const CardContentContainer = styled.div(
     contentFlexShrink: flexShrink,
     contentJustifyContent: justifyContent,
     borderWidth,
-    alignSelf
+    alignSelf,
+    backgroundColor
   }) => ({
     // We need to make sure to have sharp corners on the bottom
     // if the card has a footer
@@ -45,7 +46,8 @@ const CardContentContainer = styled.div(
     flexGrow,
     flexShrink,
     justifyContent,
-    alignSelf
+    alignSelf,
+    backgroundColor
   })
 )
 

package/src/NavigationBar/NavigationBar.jsx

@@ -7,7 +7,8 @@ import {
   useHash,
   useInputValue,
   useResponsiveProp,
-  withLinkRouter
+  withLinkRouter,
+  variantProp
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import { htmlAttrs, scrollToAnchor } from '../utils'
@@ -42,6 +43,7 @@ const NavigationBar = React.forwardRef(
       LinkRouter,
       linkRouterProps,
       tokens,
+      variant,
       ...rest
     },
     ref
@@ -220,6 +222,7 @@ const NavigationBar = React.forwardRef(
                 linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
                 items={scrollableNestedItems}
                 tokens={tokens}
+                variant={variant}
                 selected={itemId === currentValue}
                 itemsContainerRef={itemsRef}
                 {...itemRest}
@@ -295,7 +298,11 @@ NavigationBar.propTypes = {
   /**
    * Accesibility role for stackview
    */
-  accessibilityRole: PropTypes.string
+  accessibilityRole: PropTypes.string,
+  /**
+   * Variant configuration
+   */
+  variant: variantProp.propType
 }
 
 export default NavigationBar

package/src/NavigationBar/NavigationSubMenu.jsx

@@ -23,6 +23,7 @@ const NavigationSubMenu = React.forwardRef(
       id,
       isOpen = false,
       tokens = {},
+      variant = {},
       label,
       onClick,
       selectedId,
@@ -93,6 +94,7 @@ const NavigationSubMenu = React.forwardRef(
               isReady={isReady}
               onLayout={onTargetLayout}
               ref={openOverlayRef}
+              variant={variant}
             >
               <Listbox
                 items={items}
@@ -101,6 +103,7 @@ const NavigationSubMenu = React.forwardRef(
                 selectedId={selectedId}
                 LinkRouter={LinkRouter}
                 linkRouterProps={linkRouterProps}
+                variant={variant}
                 ref={itemsContainerRef || ref}
               />
             </Listbox.Overlay>
@@ -133,7 +136,8 @@ NavigationSubMenu.propTypes = {
   openOverlayRef: PropTypes.object,
   LinkRouter: PropTypes.elementType,
   linkRouterProps: PropTypes.object,
-  itemsContainerRef: PropTypes.object
+  itemsContainerRef: PropTypes.object,
+  variant: PropTypes.object
 }
 
 export default NavigationSubMenu

package/src/shared/FullBleedContent/FullBleedContent.jsx

@@ -34,13 +34,18 @@ const FullBleedContentContainer = styled.div(
     borderBottomLeftRadius,
     borderBottomRightRadius,
     borderTopLeftRadius,
-    borderTopRightRadius
+    borderTopRightRadius,
+    opacity,
+    transform
   }) => ({
     overflow: 'hidden',
     borderBottomLeftRadius,
     borderBottomRightRadius,
     borderTopLeftRadius,
-    borderTopRightRadius
+    borderTopRightRadius,
+    opacity,
+    transform,
+    transition: 'opacity 0.2s ease, transform 0.2s ease'
   })
 )
 
@@ -49,11 +54,13 @@ const FullBleedContentContainer = styled.div(
  * a number of sources corresponding to the `ResponsiveImage` component API,
  * or a custom component.
  */
-const FullBleedContent = ({ borderRadius, content, ...rest }) => (
-  <FullBleedContentContainer {...borderRadius}>
-    {content ?? <ResponsiveImage {...selectFullBleedContentProps(rest)} />}
-  </FullBleedContentContainer>
-)
+const FullBleedContent = ({ borderRadius, content, cardState, ...rest }) => {
+  return (
+    <FullBleedContentContainer {...borderRadius}>
+      {content ?? <ResponsiveImage {...selectFullBleedContentProps(rest)} />}
+    </FullBleedContentContainer>
+  )
+}
 
 FullBleedContent.propTypes = {
   /**
@@ -69,6 +76,14 @@ FullBleedContent.propTypes = {
    * Custom JSX to be used for rendering the content (defaults to `ResponsiveImage` receiving other props).
    */
   content: PropTypes.node,
+  /**
+   * Card state object containing interactive states (hovered, pressed, focused).
+   */
+  cardState: PropTypes.shape({
+    hovered: PropTypes.bool,
+    pressed: PropTypes.bool,
+    focused: PropTypes.bool
+  }),
   /**
    * Image source.
    */

package/src/shared/FullBleedContent/useFullBleedContentProps.js

@@ -55,7 +55,7 @@ const useFullBleedContentProps = (fullBleedContent) => {
 
   const fullBleedContentChildrenAlign = useResponsiveProp(
     fullBleedContentChildrenAlignProp,
-    'stretch'
+    fullBleedContentAlign
   )
 
   return {

package/types/Listbox.d.ts

@@ -43,6 +43,29 @@ type ListboxTokens = {
   itemHeight?: number
   groupHeight?: number
   lineHeight?: number
+  secondLevelHeaderBackgroundColor?: string
+  secondLevelHeaderPaddingTop?: number
+  secondLevelHeaderPaddingBottom?: number
+  secondLevelHeaderPaddingLeft?: number
+  secondLevelHeaderPaddingRight?: number
+  secondLevelBackIcon?: string
+  secondLevelBackIconColor?: string
+  secondLevelBackIconSize?: number
+  secondLevelBackLinkColor?: string
+  secondLevelBackLinkFontSize?: number
+  secondLevelBackLinkFontName?: string
+  secondLevelBackLinkFontWeight?: string
+  secondLevelCloseIcon?: string
+  secondLevelCloseIconColor?: string
+  secondLevelCloseIconSize?: number
+  secondLevelCloseButtonBackgroundColor?: string
+  secondLevelCloseButtonBorderColor?: string
+  secondLevelCloseButtonBorderWidth?: number | string
+  secondLevelCloseButtonBorderRadius?: number | string
+  secondLevelCloseButtonPadding?: number
+  secondLevelDividerColor?: string
+  secondLevelDividerWidth?: number
+  secondLevelParentIcon?: string
 }
 
 type ListboxItems = {
@@ -58,6 +81,7 @@ export interface ListboxProps {
   LinkRouter?: ElementType
   linkRouterProps?: object
   tokens?: ListboxTokens
+  variant?: { secondLevel?: boolean }
   selectedId?: string
   onClose?: () => void
 }