@telus-uds/components-base 1.83.0 → 1.85.0

package/src/OrderedList/OrderedListBase.jsx

@@ -1,11 +1,11 @@
 /* eslint-disable react-native-a11y/has-valid-accessibility-role */
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet } from 'react-native'
 
 import ItemBase from './ItemBase'
 
-const OrderedListBase = forwardRef(({ children, ...rest }, ref) => (
+const OrderedListBase = React.forwardRef(({ children, ...rest }, ref) => (
   <View accessibilityRole="list" ref={ref} style={staticStyles.container} {...rest}>
     {children}
   </View>

package/src/Pagination/PageButton.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import ButtonBase from '../Button/ButtonBase'
@@ -17,7 +17,7 @@ import {
 import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
 
-const PageButton = forwardRef(
+const PageButton = React.forwardRef(
   ({ label, onPress, href, isActive, copy, variant, tokens, ...props }, ref) => {
     const getTokens = useThemeTokensCallback('PaginationPageButton', tokens, variant)
 

package/src/Pagination/Pagination.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { View, Text, StyleSheet } from 'react-native'
 
 import {
@@ -31,7 +31,7 @@ const selectTextStyles = ({ color, fontName, fontSize, fontWeight, lineHeight },
     themeOptions
   })
 
-const Pagination = forwardRef(
+const Pagination = React.forwardRef(
   (
     {
       children,

package/src/Pagination/SideButton.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Text } from 'react-native'
 
 import PropTypes from 'prop-types'
@@ -29,7 +29,7 @@ const directionToSide = {
   next: 'right'
 }
 
-const SideButton = forwardRef(
+const SideButton = React.forwardRef(
   ({ direction = 'previous', onPress, href, copy, variant, tokens, ...props }, ref) => {
     const viewport = useViewport()
     const buttonVariant = { direction, viewport, ...variant }

package/src/PriceLockup/PriceLockup.jsx

@@ -61,95 +61,100 @@ const selectBottomTextTypographyTokens = ({ bottomTextFontSize, bottomTextLineHe
   lineHeight: bottomTextLineHeight
 })
 
-const PriceLockup = ({
-  size = 'medium',
-  signDirection = 'left',
-  footnoteLinks,
-  topText,
-  price,
-  currencySymbol = '$',
-  rateText,
-  ratePosition = 'right',
-  bottomText,
-  onClickFootnote,
-  strikeThrough,
-  a11yText,
-  tokens: priceLockupTokens,
-  variant = {},
-  ...rest
-}) => {
-  const viewport = useViewport()
-  const {
-    footnoteMarginTop,
-    footnoteGap,
-    bottomTextMarginTop,
-    priceMarginBottom,
-    bottomLinksMarginLeft,
-    fontColor,
-    dividerColor,
-    ...themeTokens
-  } = useThemeTokens(
-    'PriceLockup',
-    priceLockupTokens,
-    { ...variant, size },
-    { viewport, strikeThrough }
-  )
-  const currencySymbolTypographyTokens = selectCurrencySymbolTypographyTokens(themeTokens)
-  const amountTypographyTokens = selectAmountTypographyTokens(themeTokens)
-  const centsTypographyTokens = selectCentsTypographyTokens(themeTokens)
-  const rateTypographyTokens = selectRateTypographyTokens(themeTokens)
-  const topTextTypographyTokens = selectTopTextTypographyTokens(themeTokens)
-  const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens)
+const PriceLockup = React.forwardRef(
+  (
+    {
+      size = 'medium',
+      signDirection = 'left',
+      footnoteLinks,
+      topText,
+      price,
+      currencySymbol = '$',
+      rateText,
+      ratePosition = 'right',
+      bottomText,
+      onClickFootnote,
+      strikeThrough,
+      a11yText,
+      tokens: priceLockupTokens,
+      variant = {},
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const {
+      footnoteMarginTop,
+      footnoteGap,
+      bottomTextMarginTop,
+      priceMarginBottom,
+      bottomLinksMarginLeft,
+      fontColor,
+      dividerColor,
+      ...themeTokens
+    } = useThemeTokens(
+      'PriceLockup',
+      priceLockupTokens,
+      { ...variant, size },
+      { viewport, strikeThrough }
+    )
+    const currencySymbolTypographyTokens = selectCurrencySymbolTypographyTokens(themeTokens)
+    const amountTypographyTokens = selectAmountTypographyTokens(themeTokens)
+    const centsTypographyTokens = selectCentsTypographyTokens(themeTokens)
+    const rateTypographyTokens = selectRateTypographyTokens(themeTokens)
+    const topTextTypographyTokens = selectTopTextTypographyTokens(themeTokens)
+    const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens)
 
-  return (
-    <View style={[staticStyles.priceLockupContainer, { ...selectProps(rest) }]}>
-      {topText ? (
-        <View style={staticStyles.topText}>
-          {renderTypography(topText, topTextTypographyTokens)}
-        </View>
-      ) : null}
-      {renderPrice(
-        price,
-        rateText,
-        ratePosition,
-        signDirection,
-        currencySymbol,
-        currencySymbolTypographyTokens,
-        amountTypographyTokens,
-        centsTypographyTokens,
-        rateTypographyTokens,
-        fontColor,
-        strikeThrough,
-        a11yText,
-        bottomText,
-        bottomLinksMarginLeft,
-        footnoteLinks,
-        onClickFootnote,
-        themeTokens
-      )}
-      {bottomText ? (
-        <>
-          <Divider
-            testID="price-lockup-divider"
-            role="separator"
-            tokens={{ color: dividerColor }}
-          />
-          {renderFootnoteContent(
-            footnoteMarginTop,
-            bottomTextMarginTop,
-            bottomText,
-            bottomTextTypographyTokens,
-            fontColor,
-            footnoteLinks,
-            bottomLinksMarginLeft,
-            onClickFootnote,
-            themeTokens
-          )}
-        </>
-      ) : null}
-    </View>
-  )
-}
+    return (
+      <View style={[staticStyles.priceLockupContainer]} ref={ref} {...selectProps(rest)}>
+        {topText ? (
+          <View style={staticStyles.topText}>
+            {renderTypography(topText, topTextTypographyTokens)}
+          </View>
+        ) : null}
+        {renderPrice(
+          price,
+          rateText,
+          ratePosition,
+          signDirection,
+          currencySymbol,
+          currencySymbolTypographyTokens,
+          amountTypographyTokens,
+          centsTypographyTokens,
+          rateTypographyTokens,
+          fontColor,
+          strikeThrough,
+          a11yText,
+          bottomText,
+          bottomLinksMarginLeft,
+          footnoteLinks,
+          onClickFootnote,
+          themeTokens
+        )}
+        {bottomText ? (
+          <>
+            <Divider
+              testID="price-lockup-divider"
+              role="separator"
+              tokens={{ color: dividerColor }}
+            />
+            {renderFootnoteContent(
+              footnoteMarginTop,
+              bottomTextMarginTop,
+              bottomText,
+              bottomTextTypographyTokens,
+              fontColor,
+              footnoteLinks,
+              bottomLinksMarginLeft,
+              onClickFootnote,
+              themeTokens
+            )}
+          </>
+        ) : null}
+      </View>
+    )
+  }
+)
 
 PriceLockup.displayName = 'PriceLockup'
 PriceLockup.propTypes = {

package/src/ProductCard/ProductCard.jsx

@@ -40,100 +40,106 @@ const selectProductCardTokens = ({
   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 ProductCard = React.forwardRef(
+  (
+    {
+      copy = 'en',
+      dictionary = defaultDictionary,
+      image = {
+        src: '',
+        alt: ''
+      },
+      cardId,
+      isSelected,
+      onSelect,
+      tokens,
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const themeTokens = useThemeTokens('ProductCard', tokens, { viewport })
 
-  const getCopy = useCopy({ copy, dictionary })
+    const getCopy = useCopy({ copy, dictionary })
 
-  const { currentValue, setValue } = useInputValue()
-  const hasClicked = isSelected || currentValue
+    const { currentValue, setValue } = useInputValue()
+    const hasClicked = isSelected || currentValue
 
-  const handlePress = (event) => {
-    if (cardId) {
-      onSelect(cardId)
-    } else {
-      setValue(!currentValue, event)
+    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>
-  )
+    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}
+    return (
+      <View
+        {...selectProps(rest)}
+        style={[selectProductCardTokens(themeTokens), staticStyles.container]}
+        ref={ref}
+      >
+        {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" />
+        <View style={staticStyles.textContainer}>
+          <Box left={3}>
+            <StackView space={1}>
+              {getCopy('badgeText') ? (
+                <Badge variant={{ outline: true, purpose: 'editorial' }}>
+                  {getCopy('badgeText')}
+                </Badge>
               ) : 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}
+              <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>
-          </StackView>
-        </Box>
+              <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>
-    </View>
-  )
-}
+    )
+  }
+)
 
 ProductCard.displayName = 'ProductCard'
 

package/src/ProductCardGroup/ProductCardGroup.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 import { selectSystemProps, htmlAttrs, viewProps, a11yProps } from '../utils'
@@ -8,8 +8,8 @@ import { StackWrap } from '../StackView'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps, a11yProps])
 
-const ProductCardGroup = ({ productCards, maxSelection = 1, ...rest }) => {
-  const [selectedCardIds, setSelectedCardIds] = useState([])
+const ProductCardGroup = React.forwardRef(({ productCards, maxSelection = 1, ...rest }, ref) => {
+  const [selectedCardIds, setSelectedCardIds] = React.useState([])
 
   const handleSelect = (id) => {
     const isAlreadySelected = selectedCardIds.includes(id)
@@ -27,7 +27,7 @@ const ProductCardGroup = ({ productCards, maxSelection = 1, ...rest }) => {
   }
 
   return (
-    <View {...selectProps(rest)}>
+    <View {...selectProps(rest)} ref={ref}>
       <StackWrap direction={{ xs: 'column', lg: 'row' }} space={4}>
         {productCards.map((cardProperties, index) => {
           const cardId = cardProperties.id || index
@@ -47,7 +47,7 @@ const ProductCardGroup = ({ productCards, maxSelection = 1, ...rest }) => {
       </StackWrap>
     </View>
   )
-}
+})
 
 ProductCardGroup.displayName = 'ProductCardGroup'
 

package/src/Progress/Progress.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
@@ -50,7 +50,7 @@ const selectProgressStyles = ({
  * role.
  *
  */
-const Progress = forwardRef(({ children, tokens, variant, ...rest }, ref) => {
+const Progress = React.forwardRef(({ children, tokens, variant, ...rest }, ref) => {
   const themeTokens = useThemeTokens('Progress', tokens, variant)
 
   return (

package/src/Progress/ProgressBar.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
@@ -53,7 +53,7 @@ const selectBarStyles = (
  * - `accessibilityValue.text` (`aria-valuetext`): `%{percentage}%`,
  *
  */
-const ProgressBar = forwardRef(
+const ProgressBar = React.forwardRef(
   ({ children = null, percentage = 0, tokens, variant, ...rest }, ref) => {
     const themeTokens = useThemeTokens('ProgressBar', tokens, variant)
     if (percentage < 0) {

package/src/Progress/ProgressBarBackground.jsx

@@ -1,11 +1,12 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { ImageBackground, StyleSheet } from 'react-native'
 
 import { variantProp } from '../utils'
 
 const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='inactive' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23inactive");'%3E%3C/path%3E%3C/svg%3E`
 const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='negative' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='1' shape-rendering='auto' stroke='rgba(255, 255, 255, 0.4)' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23negative");'%3E%3C/path%3E%3C/svg%3E`
-const ProgressBarBackground = forwardRef(({ variant }, ref) => {
+
+const ProgressBarBackground = React.forwardRef(({ variant }, ref) => {
   let source = null
   if (variant?.inactive) {
     source = inactiveBackground
@@ -22,6 +23,7 @@ const ProgressBarBackground = forwardRef(({ variant }, ref) => {
     />
   )
 })
+
 ProgressBarBackground.displayName = 'ProgressBarBackground'
 
 ProgressBarBackground.propTypes = {

package/src/QuickLinks/QuickLinks.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { useThemeTokens } from '../ThemeProvider'
@@ -15,7 +15,7 @@ import QuickLinksCard from './QuickLinksCard'
  *  - If the theme returns `button` token as true and `list` as false, it renders a wrapping horizontal bar of buttons
  *  - If the theme returns `card` token as true, it wraps the above with a `Card`.
  */
-const QuickLinks = forwardRef(
+const QuickLinks = React.forwardRef(
   ({ tokens, variant, listTokens, cardTokens, children, tag = 'ul', ...rest }, ref) => {
     const viewport = useViewport()
     const { dividers, list, card, stackSpace, stackGap, stackJustify } = useThemeTokens(

package/src/QuickLinks/QuickLinksCard.jsx

@@ -11,11 +11,17 @@ import CardBase from '../Card/CardBase'
  * Restyled Card with identical behaviour to Card, but themed according to the
  * QuickLinksCard theme rather than the Card theme.
  */
-const QuickLinksList = ({ tokens, variant, children }) => {
+const QuickLinksList = React.forwardRef(({ tokens, variant, children }, ref) => {
   const themeTokens = useThemeTokens('QuickLinksCard', tokens, variant)
 
-  return <CardBase tokens={themeTokens}>{children}</CardBase>
-}
+  return (
+    <CardBase tokens={themeTokens} ref={ref}>
+      {children}
+    </CardBase>
+  )
+})
+
+QuickLinksList.displayName = 'QuickLinksList'
 
 QuickLinksList.propTypes = {
   tokens: getTokensPropType('QuickLinksCard'),

package/src/QuickLinks/QuickLinksItem.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { getTokensPropType, variantProp, withLinkRouter } from '../utils'
@@ -13,7 +13,7 @@ import ButtonBase from '../Button/ButtonBase'
  *
  * Receives props injected by QuickLinks and renders the appropriate child component.
  */
-const QuickLinksItem = forwardRef(({ tokens, variant, children, ...rest }, ref) => {
+const QuickLinksItem = React.forwardRef(({ tokens, variant, children, ...rest }, ref) => {
   const viewport = useViewport()
   const { list } = useThemeTokens('QuickLinks', tokens, variant, { viewport })