@telus-uds/components-base 1.80.1 → 1.82.0

package/lib-module/index.js

@@ -33,6 +33,8 @@ export { default as Notification } from './Notification';
 export { default as OrderedList } from './OrderedList';
 export { default as Pagination } from './Pagination';
 export { default as PriceLockup } from './PriceLockup';
+export { default as ProductCard } from './ProductCard';
+export { default as ProductCardGroup } from './ProductCardGroup';
 export { default as Progress } from './Progress';
 export { default as QuickLinks } from './QuickLinks';
 export { default as QuickLinksFeature } from './QuickLinksFeature';

package/lib-module/utils/ssr-media-query/create-stylesheet/index.js

@@ -1,7 +1,7 @@
 import { addCss } from '../utils/inject';
 import createDeclarationBlock from '../utils/create-declaration-block';
 import hash from '../hash';
-import { isMediaOrPseudo, deepClone, createCssRule } from '../utils/common';
+import { isMediaOrPseudo, deepClone, createCssRule, sanitizeStyle } from '../utils/common';
 const createStyleSheet = stylesWithQuery => {
   if (!stylesWithQuery) return {
     ids: {},
@@ -15,7 +15,8 @@ const createStyleSheet = stylesWithQuery => {
     const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo);
     mediaQueriesAndPseudoClasses.forEach(query => {
       var _ids;
-      const css = createDeclarationBlock(stylesWithQuery[key][query]);
+      const sanitizedStyle = sanitizeStyle(stylesWithQuery[key][query]);
+      const css = createDeclarationBlock(sanitizedStyle);
       const stringHash = `rnmq-${hash(`${key}${query}${css}`)}`;
       const rule = createCssRule(query, stringHash, css);
       addCss(`${stringHash}`, rule);

package/lib-module/utils/ssr-media-query/utils/common.js

@@ -12,4 +12,22 @@ const createCssRule = (query, stringHash, css) => {
   }
   return rule;
 };
-export { isMedia, isPseudo, isMediaOrPseudo, deepClone, createCssRule };
+
+/**
+ * Sanitizes the style object by converting any functions to their string representation.
+ *
+ * @param {Object} style - The style object to sanitize.
+ * @returns {Object} - The sanitized style object.
+ */
+const sanitizeStyle = style => {
+  const sanitizedStyle = {
+    ...style
+  };
+  Object.keys(sanitizedStyle).forEach(property => {
+    if (typeof sanitizedStyle[property] === 'function') {
+      sanitizedStyle[property] = sanitizedStyle[property].toString();
+    }
+  });
+  return sanitizedStyle;
+};
+export { isMedia, isPseudo, isMediaOrPseudo, deepClone, createCssRule, sanitizeStyle };

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.53.0",
+    "@telus-uds/system-theme-tokens": "^2.54.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -85,6 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.80.1",
+  "version": "1.82.0",
   "types": "types/index.d.ts"
 }

package/src/Autocomplete/Autocomplete.jsx

@@ -217,6 +217,8 @@ const Autocomplete = forwardRef(
       if (!isControlled && inputRef?.current) inputRef.current.value = newValue
 
       if (nested) setNestedSelectedValue(newValue)
+
+      inputRef.current.focus()
     }
 
     /**
@@ -253,11 +255,12 @@ const Autocomplete = forwardRef(
         setNestedSelectedValue(null)
       } else if (
         event.type === 'keydown' &&
-        event.key === 'ArrowDown' &&
+        (event.key === 'ArrowDown' || event.key === 'Tab') &&
         isExpanded &&
         !isLoading &&
         targetRef?.current
       ) {
+        event.preventDefault()
         targetRef.current.focus()
       }
     }

package/src/Badge/Badge.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { View, StyleSheet, Platform } from 'react-native'
+import { View, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 import { useThemeTokens } from '../ThemeProvider'
 import Typography from '../Typography'
@@ -38,15 +38,12 @@ const Badge = forwardRef(({ children, tokens, variant = {}, ...rest }, ref) => {
   return (
     <View
       ref={ref}
-      style={Platform.select({
-        native: {
-          ...staticStyles.container,
-          ...selectContainerBackground(themeTokens),
-          ...selectContainerBorder(themeTokens),
-          ...selectContainerPadding(themeTokens)
-        },
-        web: {}
-      })}
+      style={[
+        staticStyles.container,
+        selectContainerBackground(themeTokens),
+        selectContainerBorder(themeTokens),
+        selectContainerPadding(themeTokens)
+      ]}
       {...selectProps(rest)}
     >
       <Typography

package/src/Fieldset/Fieldset.jsx

@@ -34,7 +34,8 @@ const Fieldset = forwardRef(
       name: fieldsetName,
       children,
       variant = {},
-      tokens = {}
+      tokens = {},
+      ...rest
     },
     ref
   ) => {
@@ -118,6 +119,7 @@ const Fieldset = forwardRef(
         name={fieldsetName}
         borderStyle={borderStyles(themeTokens)}
         showBorderStyle={showErrorBorder}
+        {...rest}
       >
         {stackedContent}
       </FieldsetContainer>

package/src/Fieldset/FieldsetContainer.jsx

@@ -3,6 +3,10 @@ import PropTypes from 'prop-types'
 
 import cssReset from './cssReset'
 
+import { selectSystemProps, a11yProps, htmlAttrs } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, htmlAttrs])
+
 /**
  * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
  */
@@ -14,7 +18,8 @@ const FieldsetContainer = forwardRef(
       accessibilityRole,
       name: fieldsetName,
       showBorderStyle = false,
-      borderStyle
+      borderStyle,
+      ...rest
     },
     ref
   ) => {
@@ -28,6 +33,7 @@ const FieldsetContainer = forwardRef(
         style={styleContainer}
         role={accessibilityRole}
         name={fieldsetName}
+        {...selectProps(rest)}
       >
         {children}
       </fieldset>
@@ -37,6 +43,7 @@ const FieldsetContainer = forwardRef(
 FieldsetContainer.displayName = 'FieldsetContainer'
 
 FieldsetContainer.propTypes = {
+  ...selectedSystemPropTypes,
   accessibilityRole: PropTypes.string,
   children: PropTypes.node,
   inactive: PropTypes.bool,

package/src/Fieldset/FieldsetContainer.native.jsx

@@ -2,16 +2,21 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
+import { selectSystemProps, a11yProps, viewProps } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 // No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
 // If a11y testing finds any additional handling is needed at the container level, add it here.
-const FieldsetContainer = forwardRef(({ children, accessibilityRole }, ref) => (
-  <View ref={ref} accessibilityRole={accessibilityRole}>
+const FieldsetContainer = forwardRef(({ children, accessibilityRole, ...rest }, ref) => (
+  <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)}>
     {children}
   </View>
 ))
 FieldsetContainer.displayName = 'FieldsetContainer'
 
 FieldsetContainer.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.node,
   accessibilityRole: PropTypes.string
 }

package/src/Icon/Icon.jsx

@@ -26,6 +26,31 @@ const Icon = forwardRef(
       <IconComponent title={accessibilityLabel} size={size} color={themeTokens.color} />
     )
 
+    const paddingStyles = variant?.padding
+      ? {
+          padding: themeTokens.width,
+          width: themeTokens.size + themeTokens.width * 2, // sets the diameter of the circle which is the size of the icon plus twice the general padding established to obtain a perfect circle
+          height: themeTokens.size + themeTokens.width * 2
+        }
+      : {}
+
+    const getIconContentForMobile = () => {
+      if (Object.keys(paddingStyles).length) {
+        return (
+          <View
+            style={{
+              backgroundColor: themeTokens.backgroundColor,
+              borderRadius: themeTokens.borderRadius,
+              ...paddingStyles
+            }}
+          >
+            {iconContent}
+          </View>
+        )
+      }
+      return iconContent
+    }
+
     return Platform.OS === 'web' ? (
       <View
         ref={ref}
@@ -41,14 +66,17 @@ const Icon = forwardRef(
           ]
             .filter((exists) => exists)
             .join(' '),
-          ...style
+          ...style,
+          backgroundColor: themeTokens.backgroundColor,
+          borderRadius: themeTokens.borderRadius,
+          ...paddingStyles
         }}
         dataSet={dataSet}
       >
         {iconContent}
       </View>
     ) : (
-      iconContent
+      getIconContentForMobile()
     )
   }
 )

package/src/Listbox/Listbox.jsx

@@ -68,9 +68,14 @@ const Listbox = ({
         // Return focus to the dropdown control after leaving the last item
         parentRef?.current?.focus()
         if (onClose) onClose(event)
+      } else if (!nextItemRef && firstItemRef) {
+        // If the last item is focused, move the focus to the first one
+        event.preventDefault()
+        setFocusedIndex(0)
+        firstItemRef.current?.focus()
       }
     },
-    [focusedIndex, onClose, parentRef]
+    [focusedIndex, onClose, parentRef, firstItemRef]
   )
 
   // Add listeners for mouse clicks outside and for key presses

package/src/Modal/Modal.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useEffect, useRef } from 'react'
 import {
   StyleSheet,
   TouchableWithoutFeedback,
@@ -24,6 +24,7 @@ import IconButton from '../IconButton'
 import dictionary from './dictionary'
 import useScrollBlocking from '../utils/useScrollBlocking'
 import ModalContent from './ModalContent'
+import WebModal from './WebModal'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -138,12 +139,35 @@ const Modal = forwardRef(
     // Hide the close button if `closeButton` is `null`.
     const showCloseButton = closeButton !== null
 
+    // These refs are used to manage focus in the web modal container
+    const focusTrapRef = useRef(null)
+    const closeButtonRef = useRef(null)
+
+    useEffect(() => {
+      if (Platform.OS === 'web') {
+        const handleFocus = () => {
+          // If the focus is on the last item of the web modal container, move it to the close button
+          if (document.activeElement === focusTrapRef.current) {
+            closeButtonRef.current.focus()
+          }
+          return undefined
+        }
+
+        // Add an event listener to manage focus in the web modal container
+        document.addEventListener('focusin', handleFocus)
+
+        // Clean up the event listener
+        return () => document.removeEventListener('focusin', handleFocus)
+      }
+      return undefined
+    }, [])
+
     if (!isOpen) {
       return null
     }
 
-    return (
-      <NativeModal transparent {...selectProps(rest)}>
+    const content = (
+      <>
         <ScrollView contentContainerStyle={[staticStyles.positioningContainer]} ref={modalRef}>
           <View
             style={[staticStyles.sizingContainer, selectContainerStyles(themeTokens)]}
@@ -167,6 +191,7 @@ const Modal = forwardRef(
                       icon={CloseIconComponent}
                       accessibilityRole="button"
                       accessibilityLabel={closeLabel}
+                      ref={closeButtonRef}
                     />
                   )}
                 </View>
@@ -200,6 +225,20 @@ const Modal = forwardRef(
             <View style={[staticStyles.backdrop, selectBackdropStyles(themeTokens)]} />
           </TouchableWithoutFeedback>
         </ScrollView>
+      </>
+    )
+
+    if (Platform.OS === 'web') {
+      return (
+        <WebModal {...selectProps(rest)}>
+          {content}
+          <View accessibilityRole="button" ref={focusTrapRef} />
+        </WebModal>
+      )
+    }
+    return (
+      <NativeModal transparent {...selectProps(rest)}>
+        {content}
       </NativeModal>
     )
   }

package/src/Modal/WebModal.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native'
+import { a11yProps, selectSystemProps, viewProps } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+/**
+ * WebModal component.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {ReactNode} props.children - The content of the modal.
+ * @returns {JSX.Element} The rendered WebModal component.
+ */
+const WebModal = ({ children, ...rest }) => {
+  return (
+    <View style={staticStyles.container} {...selectProps(rest)}>
+      <View style={staticStyles.content}>{children}</View>
+    </View>
+  )
+}
+
+WebModal.propTypes = {
+  ...selectedSystemPropTypes,
+  // children to be rendered within the modal
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
+}
+
+const staticStyles = StyleSheet.create({
+  container: {
+    position: 'fixed',
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    top: 0,
+    right: 0,
+    left: 0,
+    bottom: 0,
+    alignItems: 'stretch',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexBasis: 'auto',
+    flexDirection: 'column',
+    flexShrink: 0,
+    listStyle: 'none',
+    margin: 0,
+    minHeight: 0,
+    minWidth: 0,
+    padding: 0,
+    textDecoration: 'none',
+    zIndex: 1
+  },
+  content: {
+    flex: 1,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0
+  }
+})
+
+export default WebModal

package/src/PriceLockup/PriceLockup.jsx

@@ -85,7 +85,6 @@ const PriceLockup = ({
     bottomTextMarginTop,
     priceMarginBottom,
     bottomLinksMarginLeft,
-    topTextMarginBottom,
     fontColor,
     dividerColor,
     ...themeTokens
@@ -104,7 +103,11 @@ const PriceLockup = ({
 
   return (
     <View style={[staticStyles.priceLockupContainer, { ...selectProps(rest) }]}>
-      {topText ? <View>{renderTypography(topText, topTextTypographyTokens)}</View> : null}
+      {topText ? (
+        <View style={staticStyles.topText}>
+          {renderTypography(topText, topTextTypographyTokens)}
+        </View>
+      ) : null}
       {renderPrice(
         price,
         rateText,
@@ -214,5 +217,8 @@ export default PriceLockup
 const staticStyles = StyleSheet.create({
   priceLockupContainer: {
     alignSelf: 'flex-start'
+  },
+  topText: {
+    marginBottom: 4
   }
 })

package/src/PriceLockup/utils/renderFootnoteContent.jsx

@@ -35,7 +35,7 @@ const renderFootnoteContent = (
         <Text style={selectFootnoteBottomTextContainer({ bottomTextMarginTop })}>
           {renderTypography(bottomText, bottomTextTypographyTokens, undefined, fontColor)}{' '}
         </Text>
-        {footnoteLinks.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? (
+        {footnoteLinks?.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? (
           <View
             style={[
               staticStyles.footnoteLinkContainer,
@@ -46,7 +46,7 @@ const renderFootnoteContent = (
           </View>
         ) : null}
       </View>
-      {footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? (
+      {footnoteLinks?.length > MAX_FOOTNOTE_LINKS_ALLOWED ? (
         <View style={staticStyles.verticalFootnoteLinkContainer}>
           {renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)}
         </View>

package/src/PriceLockup/utils/renderFootnoteLinks.jsx

@@ -14,7 +14,7 @@ const selectFootnoteLinkStyles = (
   // This is used to apply the proper line height when there is 4 or more footnote links
   const MAX_FOOTNOTE_LINKS_ALLOWED = 3
   const lineHeight =
-    footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED
+    footnoteLinks?.length > MAX_FOOTNOTE_LINKS_ALLOWED
       ? footnoteLinkFontSize * footnoteLinkLineHeight
       : undefined
   return {
@@ -27,7 +27,7 @@ const selectFootnoteLinkStyles = (
 }
 
 const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) =>
-  footnoteLinks && footnoteLinks.length > 0 ? (
+  footnoteLinks?.length > 0 ? (
     <FootnoteLink
       tokens={selectFootnoteLinkStyles(themeTokens, footnoteLinks)}
       content={footnoteLinks}

package/src/PriceLockup/utils/renderPrice.jsx

@@ -133,7 +133,7 @@ const renderPrice = (
             {renderTypography(rateText, rateTypographyTokens, ratePosition, fontColor)}
           </Text>
         ) : null}
-        {!bottomText && footnoteLinks.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? (
+        {!bottomText && footnoteLinks?.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? (
           <Text
             style={[
               footnoteLinkPositionStyles,
@@ -144,7 +144,7 @@ const renderPrice = (
           </Text>
         ) : null}
       </View>
-      {!bottomText && footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? (
+      {!bottomText && footnoteLinks?.length > MAX_FOOTNOTE_LINKS_ALLOWED ? (
         <View style={staticStyles.verticalFootnoteLinkContainer}>
           {renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)}
         </View>

package/src/PriceLockup/utils/renderTypography.jsx

@@ -3,7 +3,7 @@ import Typography from '../../Typography'
 
 const renderTypography = (value, themeTokens, ratePosition, fontColor) => {
   const customProps =
-    ratePosition === 'bottom'
+    ratePosition === 'bottom' && value !== '$'
       ? { variant: { size: 'micro' }, tokens: { color: fontColor } }
       : { tokens: { ...themeTokens, color: fontColor } }