@telus-uds/components-base 1.81.0 → 1.83.0

package/src/Listbox/Listbox.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
@@ -25,114 +25,126 @@ const getInitialOpen = (items, selectedId) =>
     )
     .map((item) => item.id ?? item.label)
 
-const Listbox = ({
-  items = [],
-  firstItemRef = null, // focus will be moved to this one once within the menu
-  parentRef = null, // to return focus to after leaving the last menu item
-  selectedId: defaultSelectedId,
-  LinkRouter,
-  itemRouterProps,
-  onClose,
-  variant,
-  tokens
-}) => {
-  const initialOpen = getInitialOpen(items, defaultSelectedId)
+const Listbox = forwardRef(
+  (
+    {
+      items = [],
+      firstItemRef = null, // focus will be moved to this one once within the menu
+      parentRef = null, // to return focus to after leaving the last menu item
+      selectedId: defaultSelectedId,
+      LinkRouter,
+      itemRouterProps,
+      onClose,
+      variant,
+      tokens
+    },
+    ref
+  ) => {
+    const initialOpen = getInitialOpen(items, defaultSelectedId)
 
-  const [selectedId, setSelectedId] = useState(defaultSelectedId)
+    const [selectedId, setSelectedId] = useState(defaultSelectedId)
 
-  const { minHeight, minWidth } = useThemeTokens('Listbox', variant, tokens)
+    const { minHeight, minWidth } = useThemeTokens('Listbox', variant, tokens)
 
-  // We need to keep track of each item's ref in order to be able to
-  // focus on a specific item via keyboard navigation
-  const itemRefs = useRef([])
-  if (firstItemRef?.current) itemRefs.current[0] = firstItemRef.current
-  const [focusedIndex, setFocusedIndex] = useState(0)
-  const handleKeydown = useCallback(
-    (event) => {
-      const nextItemRef = itemRefs.current[focusedIndex + 1]
-      const prevItemRef = itemRefs.current[focusedIndex - 1]
-      if (event.key === 'ArrowUp' || (event.shiftKey && event.key === 'Tab')) {
-        // Move the focus to the previous item or to the parent one if on the first
-        if (prevItemRef) {
+    // We need to keep track of each item's ref in order to be able to
+    // focus on a specific item via keyboard navigation
+    const itemRefs = useRef([])
+    if (firstItemRef?.current) itemRefs.current[0] = firstItemRef.current
+    const [focusedIndex, setFocusedIndex] = useState(0)
+    const handleKeydown = useCallback(
+      (event) => {
+        const nextItemRef = itemRefs.current[focusedIndex + 1]
+        const prevItemRef = itemRefs.current[focusedIndex - 1]
+        if (event.key === 'ArrowUp' || (event.shiftKey && event.key === 'Tab')) {
+          // Move the focus to the previous item or to the parent one if on the first
+          if (prevItemRef) {
+            event.preventDefault()
+            prevItemRef.focus()
+          } else if (parentRef) parentRef.current?.focus()
+          setFocusedIndex(focusedIndex - 1)
+        } else if ((event.key === 'ArrowDown' || event.key === 'Tab') && nextItemRef) {
           event.preventDefault()
-          prevItemRef.focus()
-        } else if (parentRef) parentRef.current?.focus()
-        setFocusedIndex(focusedIndex - 1)
-      } else if ((event.key === 'ArrowDown' || event.key === 'Tab') && nextItemRef) {
-        event.preventDefault()
-        setFocusedIndex(focusedIndex + 1)
-        nextItemRef.focus()
-      } else if (event.key === 'Escape') {
-        // Close the dropdown
-        parentRef?.current?.click()
-        // Return focus to the dropdown control after leaving the last item
-        parentRef?.current?.focus()
-        if (onClose) onClose(event)
-      }
-    },
-    [focusedIndex, onClose, parentRef]
-  )
+          setFocusedIndex(focusedIndex + 1)
+          nextItemRef.focus()
+        } else if (event.key === 'Escape') {
+          // Close the dropdown
+          parentRef?.current?.click()
+          // 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, firstItemRef]
+    )
 
-  // Add listeners for mouse clicks outside and for key presses
-  useEffect(() => {
-    if (Platform.OS === 'web') {
-      window.addEventListener('click', onClose)
-      window.addEventListener('keydown', handleKeydown)
-      window.addEventListener('touchstart', onClose)
-      return () => {
-        window.removeEventListener('click', onClose)
-        window.removeEventListener('keydown', handleKeydown)
-        window.removeEventListener('touchstart', onClose)
+    // Add listeners for mouse clicks outside and for key presses
+    useEffect(() => {
+      if (Platform.OS === 'web') {
+        window.addEventListener('click', onClose)
+        window.addEventListener('keydown', handleKeydown)
+        window.addEventListener('touchstart', onClose)
+        return () => {
+          window.removeEventListener('click', onClose)
+          window.removeEventListener('keydown', handleKeydown)
+          window.removeEventListener('touchstart', onClose)
+        }
       }
-    }
-    return () => {}
-  }, [onClose, handleKeydown])
+      return () => {}
+    }, [onClose, handleKeydown])
 
-  return (
-    <ListboxContext.Provider value={{ selectedId, setSelectedId }}>
-      <ExpandCollapse initialOpen={initialOpen} maxOpen={1}>
-        {(expandProps) => (
-          <View style={[styles.list, { minHeight, minWidth }]} role="listbox">
-            {items.map((item, index) => {
-              const { id, label, items: nestedItems } = item
-              const itemId = id ?? label
+    return (
+      <ListboxContext.Provider value={{ selectedId, setSelectedId }}>
+        <ExpandCollapse initialOpen={initialOpen} maxOpen={1} ref={ref}>
+          {(expandProps) => (
+            <View style={[styles.list, { minHeight, minWidth }]} role="listbox">
+              {items.map((item, index) => {
+                const { id, label, items: nestedItems } = item
+                const itemId = id ?? label
 
-              // Give the list of refs.
-              const itemRef = (ref) => {
-                itemRefs.current[index] = ref
-                return ref
-              }
+                // Give the list of refs.
+                const itemRef = (currentItemRef) => {
+                  itemRefs.current[index] = currentItemRef
+                  return currentItemRef
+                }
 
-              return nestedItems ? (
-                <ListboxGroup
-                  {...item}
-                  expandProps={expandProps}
-                  LinkRouter={LinkRouter}
-                  itemRouterProps={itemRouterProps}
-                  prevItemRef={itemRefs.current[index - 1] ?? null}
-                  nextItemRef={itemRefs.current[index + 1] ?? null}
-                  ref={index === 0 ? firstItemRef : itemRef}
-                  key={itemId}
-                />
-              ) : (
-                <ListboxItem
-                  {...item}
-                  key={itemId}
-                  id={itemId}
-                  LinkRouter={LinkRouter}
-                  itemRouterProps={itemRouterProps}
-                  prevItemRef={itemRefs.current[index - 1] ?? null}
-                  nextItemRef={itemRefs.current[index + 1] ?? null}
-                  ref={index === 0 ? firstItemRef : itemRef}
-                />
-              )
-            })}
-          </View>
-        )}
-      </ExpandCollapse>
-    </ListboxContext.Provider>
-  )
-}
+                return nestedItems ? (
+                  <ListboxGroup
+                    {...item}
+                    expandProps={expandProps}
+                    LinkRouter={LinkRouter}
+                    itemRouterProps={itemRouterProps}
+                    prevItemRef={itemRefs.current[index - 1] ?? null}
+                    nextItemRef={itemRefs.current[index + 1] ?? null}
+                    ref={index === 0 ? firstItemRef : itemRef}
+                    key={itemId}
+                  />
+                ) : (
+                  <ListboxItem
+                    {...item}
+                    key={itemId}
+                    id={itemId}
+                    LinkRouter={LinkRouter}
+                    itemRouterProps={itemRouterProps}
+                    prevItemRef={itemRefs.current[index - 1] ?? null}
+                    nextItemRef={itemRefs.current[index + 1] ?? null}
+                    ref={index === 0 ? firstItemRef : itemRef}
+                  />
+                )
+              })}
+            </View>
+          )}
+        </ExpandCollapse>
+      </ListboxContext.Provider>
+    )
+  }
+)
+
+Listbox.displayName = 'Listbox'
 
 Listbox.propTypes = {
   ...withLinkRouter.propTypes,

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/Notification/Notification.jsx

@@ -65,7 +65,7 @@ const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
 })
 
 const selectContentContainerStyle = (maxWidth) => ({
-  width: maxWidth || '100%'
+  maxWidth: maxWidth || '100%'
 })
 
 const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, dismissible) => {

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 } }
 

package/src/ProductCard/ProductCard.jsx

@@ -0,0 +1,193 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, View, Image } from 'react-native'
+import { useViewport } from '../ViewportProvider'
+import { useThemeTokens } from '../ThemeProvider'
+import defaultDictionary from './dictionary'
+import {
+  selectSystemProps,
+  getTokensPropType,
+  htmlAttrs,
+  viewProps,
+  useInputValue,
+  useCopy,
+  a11yProps
+} from '../utils'
+
+import Badge from '../Badge'
+import PriceLockup from '../PriceLockup'
+import Typography from '../Typography'
+import { Button } from '../Button'
+import StackView from '../StackView'
+import Box from '../Box'
+import Icon from '../Icon'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps, a11yProps])
+
+const selectProductCardTokens = ({
+  borderStyle,
+  borderColor,
+  borderWidth,
+  borderRadius,
+  paddingHorizontal,
+  paddingVertical
+}) => ({
+  borderStyle,
+  borderColor,
+  borderWidth,
+  borderRadius,
+  paddingHorizontal,
+  paddingVertical
+})
+
+const ProductCard = ({
+  copy = 'en',
+  dictionary = defaultDictionary,
+  image = {
+    src: '',
+    alt: ''
+  },
+  cardId,
+  isSelected,
+  onSelect,
+  tokens,
+  ...rest
+}) => {
+  const viewport = useViewport()
+  const themeTokens = useThemeTokens('ProductCard', tokens, { viewport })
+
+  const getCopy = useCopy({ copy, dictionary })
+
+  const { currentValue, setValue } = useInputValue()
+  const hasClicked = isSelected || currentValue
+
+  const handlePress = (event) => {
+    if (cardId) {
+      onSelect(cardId)
+    } else {
+      setValue(!currentValue, event)
+    }
+  }
+
+  const renderButton = hasClicked ? (
+    <Box vertical={1}>
+      <StackView space={2} direction="row">
+        <Icon icon={themeTokens.selectedButtonIcon} variant={{ color: 'success' }} />
+        <Typography variant={{ size: 'h4' }} tokens={{ fontWeight: 400 }}>
+          {getCopy('selectedButtonLabel')}
+        </Typography>
+      </StackView>
+    </Box>
+  ) : (
+    <Button onPress={handlePress} variant={{ purpose: 'primary', size: 'small', width: 'full' }}>
+      {getCopy('buttonLabel')}
+    </Button>
+  )
+
+  return (
+    <View
+      {...selectProps(rest)}
+      style={[selectProductCardTokens(themeTokens), staticStyles.container]}
+    >
+      {image?.src ? (
+        <View style={staticStyles.imageContainer}>
+          <Image
+            source={image.src}
+            style={staticStyles.image}
+            alt={image.alt}
+            accessibilityLabel={image.alt}
+            resizeMethod="resize"
+            accessibilityIgnoresInvertColors
+          />
+        </View>
+      ) : null}
+
+      <View style={staticStyles.textContainer}>
+        <Box left={3}>
+          <StackView space={1}>
+            {getCopy('badgeText') ? (
+              <Badge variant={{ outline: true, purpose: 'editorial' }}>
+                {getCopy('badgeText')}
+              </Badge>
+            ) : null}
+            <Typography variant={{ size: 'h6' }}>{getCopy('brandName')}</Typography>
+            <Typography variant={{ size: 'h4', colour: 'brand' }} tokens={{ fontWeight: 400 }}>
+              {getCopy('productName')}
+            </Typography>
+            <StackView space={3} divider direction="row">
+              <PriceLockup {...getCopy('primaryPrice')} size="small" ratePosition="bottom" />
+              {getCopy('secondaryPrice')?.price ? (
+                <PriceLockup {...getCopy('secondaryPrice')} size="small" ratePosition="bottom" />
+              ) : null}
+            </StackView>
+            <Box top={2}>
+              <StackView space={2}>
+                <Typography variant={{ size: 'h6' }} tokens={{ fontWeight: 500 }}>
+                  {getCopy('term')}
+                </Typography>
+                {getCopy('buttonLabel') ? <Box top={1}>{renderButton}</Box> : null}
+              </StackView>
+            </Box>
+          </StackView>
+        </Box>
+      </View>
+    </View>
+  )
+}
+
+ProductCard.displayName = 'ProductCard'
+
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = PropTypes.shape({
+  badgeText: PropTypes.string,
+  brandName: PropTypes.string.isRequired,
+  productName: PropTypes.string.isRequired,
+  primaryPrice: PropTypes.object.isRequired,
+  secondaryPrice: PropTypes.object,
+  term: PropTypes.string.isRequired,
+  buttonLabel: PropTypes.string.isRequired,
+  selectedButtonLabel: PropTypes.string.isRequired
+})
+
+ProductCard.propTypes = {
+  ...selectedSystemPropTypes,
+  image: PropTypes.shape({
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    alt: PropTypes.string
+  }),
+  /**
+   * Select English or French copy for the place holder labels.
+   * You may also pass in a custom dictionary object.
+   */
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr'])]),
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  tokens: getTokensPropType('ProductCard')
+}
+export default ProductCard
+
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flex: 1
+  },
+  imageContainer: {
+    width: '30%',
+    minWidth: 96,
+    maxWidth: 96
+  },
+  image: {
+    resizeMode: 'contain',
+    width: '100%',
+    height: undefined, // This is to maintain the aspect ratio
+    aspectRatio: 0.8
+  },
+  textContainer: {
+    width: '70%'
+  }
+})