@telus-uds/components-base 1.81.0 → 1.82.0

package/lib-module/ProductCard/dictionary.js

@@ -0,0 +1,38 @@
+export default {
+  en: {
+    badgeText: '',
+    brandName: 'Brand name',
+    productName: 'Product name',
+    primaryPrice: {
+      price: '00',
+      signDirection: 'left',
+      rateText: '/month'
+    },
+    secondaryPrice: {
+      price: '',
+      signDirection: 'left',
+      rateText: 'Upfront'
+    },
+    term: '24 months | 0% APR Bring-it-Back applied',
+    buttonLabel: 'Select this phone',
+    selectedButtonLabel: 'Selected phone'
+  },
+  fr: {
+    badgeText: '',
+    brandName: 'Brand name',
+    productName: 'Product name',
+    primaryPrice: {
+      price: '00',
+      signDirection: 'right',
+      rateText: '/mois'
+    },
+    secondaryPrice: {
+      price: '',
+      signDirection: 'right',
+      rateText: "d'acompte"
+    },
+    term: '24 mois | TAP de 0% | avec Option retour',
+    buttonLabel: 'Sélectionner ce téléphone',
+    selectedButtonLabel: 'Téléphone sélectionné'
+  }
+};

package/lib-module/ProductCard/index.js

@@ -0,0 +1,2 @@
+import ProductCard from './ProductCard';
+export default ProductCard;

package/lib-module/ProductCardGroup/ProductCardGroup.js

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import { selectSystemProps, htmlAttrs, viewProps, a11yProps } from '../utils';
+import ProductCard from '../ProductCard';
+import { StackWrap } from '../StackView';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps, a11yProps]);
+const ProductCardGroup = _ref => {
+  let {
+    productCards,
+    maxSelection = 1,
+    ...rest
+  } = _ref;
+  const [selectedCardIds, setSelectedCardIds] = useState([]);
+  const handleSelect = id => {
+    const isAlreadySelected = selectedCardIds.includes(id);
+    let updatedSelectedCardIds;
+    if (isAlreadySelected) {
+      updatedSelectedCardIds = selectedCardIds.filter(cardId => cardId !== id);
+    } else if (maxSelection && selectedCardIds.length >= maxSelection) {
+      updatedSelectedCardIds = selectedCardIds.filter((_, index) => index !== 0).concat(id);
+    } else {
+      updatedSelectedCardIds = [...selectedCardIds, id];
+    }
+    setSelectedCardIds(updatedSelectedCardIds);
+  };
+  return /*#__PURE__*/_jsx(View, {
+    ...selectProps(rest),
+    children: /*#__PURE__*/_jsx(StackWrap, {
+      direction: {
+        xs: 'column',
+        lg: 'row'
+      },
+      space: 4,
+      children: productCards.map((cardProperties, index) => {
+        const cardId = cardProperties.id || index;
+        return /*#__PURE__*/_jsx(View, {
+          children: /*#__PURE__*/_jsx(ProductCard, {
+            cardId: cardId,
+            isSelected: selectedCardIds.includes(cardId),
+            onSelect: handleSelect,
+            ...cardProperties
+          }, cardId)
+        }, cardId);
+      })
+    })
+  });
+};
+ProductCardGroup.displayName = 'ProductCardGroup';
+ProductCardGroup.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The maximum number of ProductCards a user may select at once. Defaults to 1.
+   * To have no limit and allow any number of selections, pass `null`.
+   */
+  maxSelection: PropTypes.number,
+  /**
+   * Props to be passed to the `ProductCard` component.
+   * id is required for each card.
+   * You may also pass in a custom dictionary object.
+   */
+  productCards: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    image: PropTypes.object,
+    dictionary: PropTypes.object
+  })).isRequired
+};
+export default ProductCardGroup;

package/lib-module/ProductCardGroup/index.js

@@ -0,0 +1,2 @@
+import ProductCardGroup from './ProductCardGroup';
+export default ProductCardGroup;

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/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.81.0",
+  "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/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 } }
 

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%'
+  }
+})