@telus-uds/components-base 3.13.0 → 3.14.1

package/lib/esm/Tabs/TabsDropdown.js

@@ -0,0 +1,245 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import { useThemeTokensCallback, applyTextStyles, useTheme } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, resolvePressableTokens, selectSystemProps, selectTokens, useOverlaidPosition, useCopy, variantProp, viewProps, withLinkRouter } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import Icon from '../Icon';
+import Listbox from '../Listbox';
+import dictionary from './dictionary';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const selectButtonContentStyles = _ref => {
+  let {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    paddingHorizontal,
+    paddingVertical,
+    marginHorizontal,
+    marginVertical
+  } = _ref;
+  return {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    paddingHorizontal,
+    paddingVertical,
+    marginLeft: marginHorizontal,
+    marginRight: marginHorizontal,
+    marginTop: marginVertical,
+    marginBottom: marginVertical
+  };
+};
+
+/**
+ * TabsDropdown renders a dropdown version of tabs for mobile/tablet viewports.
+ * It shows the currently selected tab as a button that opens a dropdown menu
+ * containing all available tabs.
+ *
+ * This is rendered automatically by `Tabs` on mobile viewports and when variant
+ * is dropdown and isn't intended to be used directly.
+ */
+const TabsDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    itemTokens,
+    variant,
+    value,
+    onChange,
+    items = [],
+    LinkRouter,
+    linkRouterProps,
+    accessibilityRole = 'button',
+    copy = 'en',
+    dictionary: customDictionary = dictionary,
+    ...rest
+  } = _ref2;
+  const {
+    themeOptions
+  } = useTheme();
+  const viewport = useViewport();
+  const [isOpen, setIsOpen] = React.useState(false);
+  const getTokens = useThemeTokensCallback('TabsItem', itemTokens, {
+    viewport,
+    ...variant
+  });
+  const selectedItem = items.find(item => {
+    const itemId = item.id ?? item.label;
+    return value === itemId;
+  }) || items[0];
+  const {
+    overlaidPosition,
+    sourceRef,
+    targetRef,
+    onTargetLayout,
+    isReady
+  } = useOverlaidPosition({
+    isShown: isOpen,
+    offsets: {
+      vertical: 4
+    },
+    align: {
+      top: 'bottom',
+      left: 'left'
+    }
+  });
+  const handleToggle = () => setIsOpen(prev => !prev);
+  const handleClose = () => setIsOpen(false);
+  const handleItemSelect = (item, event) => {
+    const itemId = item.id ?? item.label;
+    setIsOpen(false);
+    if (onChange) onChange(itemId, event);
+    if (item.onPress) item.onPress(event);
+  };
+  const listboxItems = items.map(item => ({
+    ...item,
+    onPress: event => handleItemSelect(item, event)
+  }));
+  const isSelected = Boolean(selectedItem && value);
+  const getCopy = useCopy({
+    dictionary: customDictionary,
+    copy
+  });
+  const selectedProps = selectProps({
+    accessibilityRole,
+    ...rest
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      ref: sourceRef,
+      onPress: handleToggle,
+      ...selectedProps,
+      style: styles.pressable,
+      children: pressableState => {
+        // Use resolvePressableTokens like TabBarItem does for proper state handling
+        const resolvedTokens = resolvePressableTokens(getTokens, pressableState, {
+          viewport,
+          expanded: isOpen,
+          selected: isSelected
+        });
+        const textStyles = applyTextStyles({
+          ...selectTokens('Typography', resolvedTokens),
+          themeOptions
+        });
+
+        // Get dropdown icons from resolved tokens
+        const dropdownIcon = isOpen ? resolvedTokens.dropdownIconExpanded : resolvedTokens.dropdownIcon;
+        return /*#__PURE__*/_jsxs(View, {
+          style: [styles.buttonContent, selectButtonContentStyles(resolvedTokens)],
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: textStyles,
+            children: selectedItem?.label || getCopy('selectTab')
+          }), dropdownIcon && /*#__PURE__*/_jsx(Icon, {
+            icon: dropdownIcon,
+            variant: {
+              size: 'micro'
+            },
+            tokens: {
+              color: textStyles.color
+            }
+          })]
+        });
+      }
+    }), isOpen && /*#__PURE__*/_jsx(Listbox.Overlay, {
+      overlaidPosition: overlaidPosition,
+      maxWidth: 400,
+      minWidth: 200,
+      isReady: isReady,
+      onLayout: onTargetLayout,
+      children: /*#__PURE__*/_jsx(Listbox, {
+        items: listboxItems,
+        firstItemRef: targetRef,
+        parentRef: sourceRef,
+        selectedId: value,
+        onClose: handleClose,
+        LinkRouter: LinkRouter,
+        linkRouterProps: linkRouterProps
+      })
+    })]
+  });
+});
+TabsDropdown.displayName = 'TabsDropdown';
+const dictionaryContentShape = PropTypes.shape({
+  selectTab: PropTypes.string.isRequired
+});
+TabsDropdown.propTypes = {
+  ...selectedSystemPropTypes,
+  ...withLinkRouter.propTypes,
+  /**
+   * Array of tab items
+   */
+  items: PropTypes.arrayOf(PropTypes.shape({
+    ...withLinkRouter.propTypes,
+    /** URL to navigate to when the tab is pressed */
+    href: PropTypes.string,
+    /** Display text for the tab */
+    label: PropTypes.string,
+    /** Unique identifier for the tab */
+    id: PropTypes.string,
+    /** Reference to the tab element */
+    ref: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    /** Custom render function for the tab content */
+    render: PropTypes.func
+  })),
+  /**
+   * Current selected tab id
+   */
+  value: PropTypes.string,
+  /**
+   * Callback for when the selected tab changes
+   */
+  onChange: PropTypes.func,
+  /**
+   * Custom tokens for the main Tabs container
+   */
+  tokens: getTokensPropType('Tabs'),
+  /**
+   * Custom tokens for `TabsItem`
+   */
+  itemTokens: getTokensPropType('TabsItem'),
+  /**
+   * Visual and behavioral variants for the tabs dropdown
+   */
+  variant: variantProp.propType,
+  /**
+   * Select English or French copy for the accessible labels.
+   * You may also pass in a custom dictionary object.
+   */
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  })
+};
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    width: '100%'
+  },
+  pressable: {
+    outlineWidth: 0,
+    outlineStyle: 'none',
+    outlineColor: 'transparent'
+  },
+  buttonContent: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    minHeight: 44,
+    outline: 'none',
+    boxSizing: 'border-box'
+  }
+});
+export default TabsDropdown;

package/lib/esm/Tabs/TabsItem.js

@@ -72,8 +72,10 @@ const selectContainerStyles = _ref3 => {
     borderRadius,
     paddingHorizontal: paddingHorizontal - borderWidth,
     paddingVertical: paddingVertical - borderWidth,
-    marginHorizontal,
-    marginVertical
+    marginLeft: marginHorizontal,
+    marginRight: marginHorizontal,
+    marginTop: marginVertical,
+    marginBottom: marginVertical
   };
 };
 

package/lib/esm/Tabs/dictionary.js

@@ -0,0 +1,8 @@
+export default {
+  en: {
+    selectTab: 'Select tab'
+  },
+  fr: {
+    selectTab: 'Sélectionner un onglet'
+  }
+};

package/lib/esm/ViewportProvider/ViewportProvider.js

@@ -6,15 +6,20 @@ import useViewportListener from './useViewportListener';
 
 /**
  * Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook
+ *
+ * @param {React.ReactNode} children - Child components that will have access to viewport context
+ * @param {string} [defaultViewport] - Default viewport to use during server-side rendering.
+ *   Must be one of the viewport keys from system-constants. If not provided, defaults to the smallest viewport.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const ViewportProvider = _ref => {
   let {
-    children
+    children,
+    defaultViewport
   } = _ref;
   // Default to the smallest viewport for mobile-first SSR. On client side, this is updated
   // by useViewportListener in a layout effect before anything is shown to the user.
-  const [viewport, setViewport] = React.useState(viewports.keys[0]);
+  const [viewport, setViewport] = React.useState(defaultViewport || viewports.keys[0]);
   useViewportListener(setViewport);
   return /*#__PURE__*/_jsx(ViewportContext.Provider, {
     value: viewport,
@@ -22,6 +27,7 @@ const ViewportProvider = _ref => {
   });
 };
 ViewportProvider.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  defaultViewport: PropTypes.oneOf(viewports.keys)
 };
 export default ViewportProvider;

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.12.0",
+    "@telus-uds/system-theme-tokens": "^4.13.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.13.0",
+  "version": "3.14.1",
   "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.12.0",
+    "@telus-uds/system-theme-tokens": "^4.13.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.13.0",
+  "version": "3.14.1",
   "types": "types/index.d.ts"
 }

package/src/BaseProvider/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { PortalProvider } from '@gorhom/portal'
+import { viewports } from '@telus-uds/system-constants'
 import A11yInfoProvider from '../A11yInfoProvider'
 import ViewportProvider from '../ViewportProvider'
 import ThemeProvider from '../ThemeProvider'
@@ -10,7 +11,7 @@ import { HydrationProvider } from './HydrationContext'
 const BaseProvider = React.forwardRef(({ defaultTheme, children, themeOptions }, _) => (
   <HydrationProvider>
     <A11yInfoProvider>
-      <ViewportProvider>
+      <ViewportProvider defaultViewport={themeOptions?.defaultViewport}>
         <ThemeProvider defaultTheme={defaultTheme} themeOptions={themeOptions}>
           <PortalProvider>{children}</PortalProvider>
         </ThemeProvider>
@@ -26,7 +27,8 @@ BaseProvider.propTypes = {
   defaultTheme: ThemeProvider.propTypes?.defaultTheme,
   themeOptions: PropTypes.shape({
     forceAbsoluteFontSizing: PropTypes.bool,
-    forceZIndex: PropTypes.bool
+    forceZIndex: PropTypes.bool,
+    defaultViewport: PropTypes.oneOf(viewports.keys)
   })
 }
 

package/src/Card/Card.jsx

@@ -17,7 +17,7 @@ import {
   responsiveProps,
   hrefAttrsProp
 } from '../utils/props'
-import CardBase from './CardBase'
+import CardBase, { selectStyles } from './CardBase'
 import PressableCardBase from './PressableCardBase'
 import CheckboxButton from '../Checkbox/CheckboxButton'
 import RadioButton from '../Radio/RadioButton'
@@ -186,10 +186,28 @@ const Card = React.forwardRef(
     let mediaIds
 
     if (enableMediaQueryStyleSheet) {
-      const mediaQueryStyleSheet = createMediaQueryStyles(themeTokens)
+      const transformedThemeTokens = Object.entries(themeTokens).reduce(
+        (acc, [vp, viewportTokens]) => {
+          const tokensToTransform = selectionType
+            ? selectStyles({
+                ...viewportTokens,
+                paddingTop: 0,
+                paddingBottom: 0,
+                paddingLeft: 0,
+                paddingRight: 0
+              })
+            : selectStyles(viewportTokens)
+
+          acc[vp] = tokensToTransform
+          return acc
+        },
+        {}
+      )
+
+      const mediaQueryStyleSheet = createMediaQueryStyles(transformedThemeTokens)
 
       const { ids, styles } = StyleSheet.create({
-        card: mediaQueryStyleSheet
+        card: { ...themeTokens[viewport], ...mediaQueryStyleSheet }
       })
       cardStyles = styles.card
       mediaIds = ids.card
@@ -336,6 +354,12 @@ Card.propTypes = {
     alt: PropTypes.string,
     resizeMode: responsiveProps.getTypeOptionallyByViewport(
       PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])
+    ),
+    position: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['bottom', 'left', 'right', 'top'])
+    ),
+    align: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['start', 'end', 'center', 'stretch'])
     )
   }),
   /**

package/src/Card/CardBase.jsx

@@ -1,15 +1,117 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View, Platform, ImageBackground, StyleSheet } from 'react-native'
+import { View, Platform, ImageBackground, Image, StyleSheet } from 'react-native'
 
 import { applyShadowToken } from '../ThemeProvider'
 import { getTokensPropType, responsiveProps, useResponsiveProp, formatImageSource } from '../utils'
 import { a11yProps, viewProps, selectSystemProps } from '../utils/props'
+import backgroundImageStylesMap from './backgroundImageStylesMap'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const setBackgroundImage = ({
+  src,
+  alt,
+  backgroundImageResizeMode,
+  backgroundImagePosition,
+  backgroundImageAlign,
+  content,
+  cardStyle
+}) => {
+  const borderRadius = cardStyle?.borderRadius || 0
+  const borderWidth = cardStyle?.borderWidth || 0
+  const adjustedBorderRadius = Math.max(0, borderRadius - borderWidth)
+
+  // For contain mode with position and align, use CSS background properties for web
+  if (backgroundImageResizeMode === 'contain' && backgroundImagePosition && backgroundImageAlign) {
+    const positionKey = `${backgroundImagePosition}-${backgroundImageAlign}`
+
+    if (Platform.OS === 'web') {
+      // Create background position based on position and align
+      let backgroundPosition
+
+      switch (positionKey) {
+        case 'top-start':
+          backgroundPosition = 'left top'
+          break
+        case 'top-center':
+          backgroundPosition = 'center top'
+          break
+        case 'top-end':
+          backgroundPosition = 'right top'
+          break
+        case 'bottom-start':
+          backgroundPosition = 'left bottom'
+          break
+        case 'bottom-center':
+          backgroundPosition = 'center bottom'
+          break
+        case 'bottom-end':
+          backgroundPosition = 'right bottom'
+          break
+        case 'left-center':
+          backgroundPosition = 'left center'
+          break
+        case 'right-center':
+          backgroundPosition = 'right center'
+          break
+        default:
+          backgroundPosition = 'center center'
+      }
+
+      const backgroundImageStyle = {
+        backgroundImage: `url(${src})`,
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition,
+        borderRadius: adjustedBorderRadius
+      }
+
+      return (
+        <View
+          style={[staticStyles.imageBackground, backgroundImageStyle]}
+          role="img"
+          aria-label={alt}
+        >
+          {content}
+        </View>
+      )
+    }
+    // For React Native, apply positioning styles with full dimensions
+    const positionStyles = backgroundImageStylesMap[positionKey] || {}
+
+    return (
+      <View style={[staticStyles.containContainer, { borderRadius: adjustedBorderRadius }]}>
+        <Image
+          source={src}
+          resizeMode={backgroundImageResizeMode}
+          style={[staticStyles.containImage, positionStyles]}
+          accessible={true}
+          accessibilityLabel={alt}
+          accessibilityIgnoresInvertColors={true}
+        />
+        <View style={staticStyles.contentOverlay}>{content}</View>
+      </View>
+    )
+  }
+
+  // Use ImageBackground for all other resize modes and React Native
+  return (
+    <ImageBackground
+      source={src}
+      imageStyle={{ borderRadius: adjustedBorderRadius }}
+      resizeMode={backgroundImageResizeMode}
+      style={staticStyles.imageBackground}
+      accessible={true}
+      accessibilityLabel={alt}
+    >
+      {content}
+    </ImageBackground>
+  )
+}
+
 // Ensure explicit selection of tokens
-const selectStyles = ({
+export const selectStyles = ({
   flex,
   backgroundColor,
   borderColor,
@@ -64,34 +166,72 @@ const CardBase = React.forwardRef(
     const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens)
     const props = selectProps(rest)
 
-    const { src = '', alt = '', resizeMode = '' } = backgroundImage || {}
+    let content = children
+
+    const { src = '', alt = '', resizeMode = '', position = '', align = '' } = backgroundImage || {}
     const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover')
+    const backgroundImagePosition = useResponsiveProp(position)
+    const backgroundImageAlign = useResponsiveProp(align)
     const imageSourceViewport = formatImageSource(useResponsiveProp(src))
 
+    if (backgroundImage && src) {
+      // When there's a background image, separate the padding from the container style
+      // so the image can fill the entire container without padding interference
+      const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...containerStyle } = cardStyle
+
+      // Only create padding wrapper if there's actually padding defined
+      const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight
+      const paddedContent = hasPadding ? (
+        <View style={{ paddingTop, paddingBottom, paddingLeft, paddingRight }}>{children}</View>
+      ) : (
+        children
+      )
+
+      content = setBackgroundImage({
+        src: imageSourceViewport,
+        alt,
+        backgroundImageResizeMode,
+        backgroundImagePosition,
+        backgroundImageAlign,
+        content: paddedContent,
+        cardStyle: containerStyle
+      })
+
+      return (
+        <View style={containerStyle} dataSet={dataSet} ref={ref} {...props}>
+          {content}
+        </View>
+      )
+    }
+
     return (
       <View style={cardStyle} dataSet={dataSet} ref={ref} {...props}>
-        {src ? (
-          <ImageBackground
-            source={imageSourceViewport}
-            imageStyle={{ borderRadius: cardStyle?.borderRadius - cardStyle?.borderWidth }}
-            resizeMode={backgroundImageResizeMode}
-            style={styles.imageBackground}
-            accessible={true}
-            accessibilityLabel={alt}
-          >
-            {children}
-          </ImageBackground>
-        ) : (
-          children
-        )}
+        {content}
       </View>
     )
   }
 )
 CardBase.displayName = 'CardBase'
 
-const styles = StyleSheet.create({
-  imageBackground: { width: '100%', height: '100%' }
+const staticStyles = StyleSheet.create({
+  imageBackground: { width: '100%', height: '100%' },
+  contentOverlay: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    zIndex: 1
+  },
+  containContainer: {
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    position: 'relative'
+  },
+  containImage: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%'
+  }
 })
 
 CardBase.propTypes = {
@@ -108,6 +248,12 @@ CardBase.propTypes = {
     alt: PropTypes.string,
     resizeMode: responsiveProps.getTypeOptionallyByViewport(
       PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])
+    ),
+    position: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['bottom', 'left', 'right', 'top'])
+    ),
+    align: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['start', 'end', 'center', 'stretch'])
     )
   })
 }