@telus-uds/components-web 2.33.2 → 2.34.1

package/src/OrderedList/Item.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {
@@ -67,38 +67,41 @@ const ItemContent = styled.div({
   flex: 1
 })
 
-const Item = forwardRef(({ children, counterName, title, tokens, variant, ...rest }, ref) => {
-  // We are reusing some tokens from the list component here in order to provide a unified
-  // experience
-  const themeTokens = useThemeTokens('OrderedList', tokens, variant)
-  const headingTokens = title && {
-    lineHeight: themeTokens.itemLineHeight,
-    fontSize: themeTokens.itemFontSize,
-    color: themeTokens.itemColor,
-    fontName: themeTokens.headerFontName,
-    fontWeight: themeTokens.headerFontWeight
-  }
+const Item = React.forwardRef(
+  ({ children, counterName, title, tokens = {}, variant, ...rest }, ref) => {
+    // We are reusing some tokens from the list component here in order to provide a unified
+    // experience
+    const themeTokens = useThemeTokens('OrderedList', tokens, variant)
+    const headingTokens = title && {
+      lineHeight: themeTokens.itemLineHeight,
+      fontSize: themeTokens.itemFontSize,
+      color: themeTokens.itemColor,
+      fontName: themeTokens.headerFontName,
+      fontWeight: themeTokens.headerFontWeight
+    }
 
-  const { themeOptions } = useTheme()
-  const itemContent = wrapStringsInText(children, {
-    style: selectItemTextStyles(themeTokens, themeOptions)
-  })
+    const { themeOptions } = useTheme()
+    const itemContent = wrapStringsInText(children, {
+      style: selectItemTextStyles(themeTokens, themeOptions)
+    })
+
+    return (
+      <StyledItemBase ref={ref} themeOptions={themeOptions} {...themeTokens} {...selectProps(rest)}>
+        {title ? (
+          <StackView tokens={{ flexShrink: 1 }} space={0}>
+            <Typography variant={{ size: 'h4' }} tokens={headingTokens}>
+              {title}
+            </Typography>
+            <ItemContent {...themeTokens}>{itemContent}</ItemContent>
+          </StackView>
+        ) : (
+          itemContent
+        )}
+      </StyledItemBase>
+    )
+  }
+)
 
-  return (
-    <StyledItemBase ref={ref} themeOptions={themeOptions} {...themeTokens} {...selectProps(rest)}>
-      {title ? (
-        <StackView tokens={{ flexShrink: 1 }} space={0}>
-          <Typography variant={{ size: 'h4' }} tokens={headingTokens}>
-            {title}
-          </Typography>
-          <ItemContent {...themeTokens}>{itemContent}</ItemContent>
-        </StackView>
-      ) : (
-        itemContent
-      )}
-    </StyledItemBase>
-  )
-})
 Item.displayName = 'OrderedListItem'
 
 Item.propTypes = {
@@ -116,9 +119,5 @@ Item.propTypes = {
    */
   tokens: getTokensPropType('List')
 }
-Item.defaultProps = {
-  title: undefined,
-  tokens: {}
-}
 
 export default Item

package/src/OrderedList/OrderedList.jsx

@@ -1,7 +1,7 @@
-import React, { forwardRef, useMemo } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { selectSystemProps, getTokensPropType, variantProp } from '@telus-uds/components-base'
+import { selectSystemProps, variantProp } from '@telus-uds/components-base'
 import { htmlAttrs } from '../utils'
 import OrderedListBase from './OrderedListBase'
 import Item from './Item'
@@ -18,12 +18,12 @@ const StyledOrderedListBase = styled(OrderedListBase)(({ start }) => ({
 /**
  * Themed semantic ordered list.
  */
-const OrderedList = forwardRef(({ children, start, variant, ...rest }, ref) => {
+const OrderedList = React.forwardRef(({ children, start = 1, variant = {}, ...rest }, ref) => {
   // Check if children is an array
   const isChildrenArray = Array.isArray(children)
 
   // Pass any variants "OrderedList" receives down to the individual list items.
-  const childrenWithParentVariants = useMemo(() => {
+  const childrenWithParentVariants = React.useMemo(() => {
     const addVariantToProps = (child) => {
       const existingChildVariants = child.props?.variant ?? {}
       return React.cloneElement(child, {
@@ -54,7 +54,6 @@ OrderedList.displayName = 'OrderedList'
 
 OrderedList.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: getTokensPropType('OrderedList'),
   /**
    * A list of ordered items wrapped in `OrderedList.Item`.
    */
@@ -65,7 +64,6 @@ OrderedList.propTypes = {
   start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   variant: variantProp.propType
 }
-OrderedList.defaultProps = { start: 1, tokens: {}, variant: {} }
 
 OrderedList.Item = Item
 

package/src/OrderedList/OrderedListBase.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import ItemBase from './ItemBase'
@@ -14,7 +14,7 @@ const StyledList = styled.ol({
 /**
  * Semantic ordered list.
  */
-const OrderedListBase = forwardRef(({ children, start, ...rest }, ref) => (
+const OrderedListBase = React.forwardRef(({ children, start = 1, ...rest }, ref) => (
   <StyledList {...rest} ref={ref} start={start}>
     {children}
   </StyledList>
@@ -31,7 +31,6 @@ OrderedListBase.propTypes = {
    */
   start: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 }
-OrderedListBase.defaultProps = { start: 1 }
 
 OrderedListBase.Item = ItemBase
 

package/src/Paragraph/Paragraph.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { selectSystemProps } from '@telus-uds/components-base'
+import { getTokensPropType, selectSystemProps } from '@telus-uds/components-base'
 
 import { htmlAttrs, useTypographyTheme } from '../utils'
 
@@ -31,20 +31,25 @@ const StyledParagraph = styled.p`
 	contrast.
 	* - All Allium Typography variants other than header size variants are supported.
 	*/
-const Paragraph = ({ children, variant, tokens, testID, align, linesBetween = 1, ...rest }) => {
-  const style = useTypographyTheme(variant, tokens)
-  return (
-    <StyledParagraph
-      linesBetween={linesBetween}
-      data-testid={testID}
-      align={align}
-      style={style}
-      {...selectProps(rest)}
-    >
-      {children}
-    </StyledParagraph>
-  )
-}
+const Paragraph = React.forwardRef(
+  ({ children, variant, tokens, testID, align, linesBetween = 1, ...rest }, ref) => {
+    const style = useTypographyTheme(variant, tokens)
+    return (
+      <StyledParagraph
+        ref={ref}
+        linesBetween={linesBetween}
+        data-testid={testID}
+        align={align}
+        style={style}
+        {...selectProps(rest)}
+      >
+        {children}
+      </StyledParagraph>
+    )
+  }
+)
+
+Paragraph.displayName = 'Paragraph'
 
 Paragraph.propTypes = {
   ...selectedSystemPropTypes,
@@ -67,7 +72,7 @@ Paragraph.propTypes = {
   /**
    * Paragraph takes the same tokens overrides as Typography
    */
-  tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
+  tokens: getTokensPropType('Typography'),
   /**
    * Paragraph takes any of Typography's theme variants except for header sizes
    */

package/src/PreviewCard/PreviewCard.jsx

@@ -1,5 +1,4 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import omit from 'lodash.omit'
 import {
@@ -62,7 +61,7 @@ const defaultTokens = {
  * - Use `href` to set the target URL
  * - Use `fullBleedContent` to set the thumbnail image
  */
-const PreviewCard = forwardRef(
+const PreviewCard = React.forwardRef(
   (
     {
       tag,

package/src/PriceLockup/PriceLockup.jsx

@@ -97,156 +97,163 @@ const selectStrikeThroughTokens = ({
   strikeThroughColor
 })
 
-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,
-    topTextMarginBottom,
-    fontColor,
-    dividerColor,
-    footnoteLinkFontSize,
-    ...themeTokens
-  } = useThemeTokens(
-    'PriceLockup',
-    priceLockupTokens,
-    { ...variant, size },
-    { viewport, strikeThrough }
-  )
-  const typographyTokens = getTypographyTokens(themeTokens)
-  const priceString = String(price)
-  const lastDotPosition = priceString.lastIndexOf('.')
-  const lastCommaPosition = priceString.lastIndexOf(',')
-  const [separator, separatorPosition] =
-    lastDotPosition > lastCommaPosition ? ['.', lastDotPosition] : [',', lastCommaPosition]
+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,
+      topTextMarginBottom,
+      fontColor,
+      dividerColor,
+      footnoteLinkFontSize,
+      ...themeTokens
+    } = useThemeTokens(
+      'PriceLockup',
+      priceLockupTokens,
+      { ...variant, size },
+      { viewport, strikeThrough }
+    )
+    const typographyTokens = getTypographyTokens(themeTokens)
+    const priceString = String(price)
+    const lastDotPosition = priceString.lastIndexOf('.')
+    const lastCommaPosition = priceString.lastIndexOf(',')
+    const [separator, separatorPosition] =
+      lastDotPosition > lastCommaPosition ? ['.', lastDotPosition] : [',', lastCommaPosition]
 
-  // If the separator is at the fourth character from the end of the string or more, it's most probably
-  // a part of the amount, and the cents are not included in the price string
-  const hasCents = separatorPosition !== -1 && separatorPosition >= priceString.length - 3
-  const amount = hasCents ? priceString.substring(0, separatorPosition) : priceString
-  const cents = hasCents ? priceString.substring(separatorPosition + 1) : null
+    // If the separator is at the fourth character from the end of the string or more, it's most probably
+    // a part of the amount, and the cents are not included in the price string
+    const hasCents = separatorPosition !== -1 && separatorPosition >= priceString.length - 3
+    const amount = hasCents ? priceString.substring(0, separatorPosition) : priceString
+    const cents = hasCents ? priceString.substring(separatorPosition + 1) : null
 
-  const renderTypography = (value, tokens, position) => {
-    const customProps =
-      position === 'bottom'
-        ? { variant: { size: 'micro' }, tokens: { color: fontColor } }
-        : { tokens: { ...tokens, color: fontColor } }
-    return <Typography {...customProps}>{value}</Typography>
-  }
+    const renderTypography = (value, tokens, position) => {
+      const customProps =
+        position === 'bottom'
+          ? { variant: { size: 'micro' }, tokens: { color: fontColor } }
+          : { tokens: { ...tokens, color: fontColor } }
+      return <Typography {...customProps}>{value}</Typography>
+    }
 
-  const renderCurrencySymbol = () =>
-    renderTypography(`${currencySymbol}`, typographyTokens.dollarSign)
+    const renderCurrencySymbol = () =>
+      renderTypography(`${currencySymbol}`, typographyTokens.dollarSign)
 
-  const renderFootnoteLinks = () =>
-    footnoteLinks && footnoteLinks.length > 0 ? (
-      <FootnoteLink
-        fontSize={footnoteLinkFontSize}
-        tokens={selectFootnoteLinkStyles(themeTokens)}
-        number={footnoteLinks}
-        onClick={onClickFootnote}
-      />
-    ) : null
+    const renderFootnoteLinks = () =>
+      footnoteLinks && footnoteLinks.length > 0 ? (
+        <FootnoteLink
+          fontSize={footnoteLinkFontSize}
+          tokens={selectFootnoteLinkStyles(themeTokens)}
+          number={footnoteLinks}
+          onClick={onClickFootnote}
+        />
+      ) : null
+
+    const renderAmount = () => {
+      const amountComponent = renderTypography(amount, typographyTokens.amount)
+      if (strikeThrough) {
+        return (
+          <>
+            <A11yText text={a11yText} />
+            <StrikeThroughContainer {...selectStrikeThroughTokens(themeTokens)}>
+              {amountComponent}
+            </StrikeThroughContainer>
+          </>
+        )
+      }
 
-  const renderAmount = () => {
-    const amountComponent = renderTypography(amount, typographyTokens.amount)
-    if (strikeThrough) {
-      return (
-        <>
-          <A11yText text={a11yText} />
-          <StrikeThroughContainer {...selectStrikeThroughTokens(themeTokens)}>
-            {amountComponent}
-          </StrikeThroughContainer>
-        </>
-      )
+      return amountComponent
     }
 
-    return amountComponent
-  }
+    const renderPrice = () => (
+      <>
+        <PriceContainer priceMarginBottom={`${priceMarginBottom}px`}>
+          <PriceTextContainer ratePosition={ratePosition}>
+            <RateContainer>
+              {signDirection === 'left' && renderCurrencySymbol()}
+              {renderAmount()}
+              {cents && renderTypography(`${separator}${cents}`, typographyTokens.cents)}
+              {signDirection === 'right' && <>&nbsp;{renderCurrencySymbol()}</>}
+            </RateContainer>
+            {rateText && (
+              <RateTextContainer ratePosition={ratePosition}>
+                {renderTypography(rateText, typographyTokens.rate, ratePosition)}
+              </RateTextContainer>
+            )}
+          </PriceTextContainer>
 
-  const renderPrice = () => (
-    <>
-      <PriceContainer priceMarginBottom={`${priceMarginBottom}px`}>
-        <PriceTextContainer ratePosition={ratePosition}>
-          <RateContainer>
-            {signDirection === 'left' && renderCurrencySymbol()}
-            {renderAmount()}
-            {cents && renderTypography(`${separator}${cents}`, typographyTokens.cents)}
-            {signDirection === 'right' && <>&nbsp;{renderCurrencySymbol()}</>}
-          </RateContainer>
-          {rateText && (
-            <RateTextContainer ratePosition={ratePosition}>
-              {renderTypography(rateText, typographyTokens.rate, ratePosition)}
-            </RateTextContainer>
+          {!bottomText && footnoteLinks.length <= 3 && (
+            <BottomLinksContainer bottomLinksMarginLeft={`${bottomLinksMarginLeft}px`}>
+              {renderFootnoteLinks()}
+            </BottomLinksContainer>
           )}
-        </PriceTextContainer>
+        </PriceContainer>
+        {!bottomText && footnoteLinks.length > 3 && renderFootnoteLinks()}
+      </>
+    )
 
-        {!bottomText && footnoteLinks.length <= 3 && (
-          <BottomLinksContainer bottomLinksMarginLeft={`${bottomLinksMarginLeft}px`}>
-            {renderFootnoteLinks()}
-          </BottomLinksContainer>
-        )}
-      </PriceContainer>
-      {!bottomText && footnoteLinks.length > 3 && renderFootnoteLinks()}
-    </>
-  )
+    const renderFootnoteContent = () => (
+      <>
+        <FootnoteContainer
+          footnoteMarginTop={`${footnoteMarginTop}px`}
+          footnoteGap={`${footnoteGap}px`}
+        >
+          <BottomTextContainer bottomTextMarginTop={`${bottomTextMarginTop}px`}>
+            {renderTypography(bottomText, typographyTokens.bottomText)}
+          </BottomTextContainer>
+          {footnoteLinks.length <= 3 && renderFootnoteLinks()}
+        </FootnoteContainer>
+        {footnoteLinks.length > 3 && renderFootnoteLinks()}
+      </>
+    )
 
-  const renderFootnoteContent = () => (
-    <>
-      <FootnoteContainer
-        footnoteMarginTop={`${footnoteMarginTop}px`}
-        footnoteGap={`${footnoteGap}px`}
-      >
-        <BottomTextContainer bottomTextMarginTop={`${bottomTextMarginTop}px`}>
-          {renderTypography(bottomText, typographyTokens.bottomText)}
-        </BottomTextContainer>
-        {footnoteLinks.length <= 3 && renderFootnoteLinks()}
-      </FootnoteContainer>
-      {footnoteLinks.length > 3 && renderFootnoteLinks()}
-    </>
-  )
+    if (strikeThrough && !a11yText) {
+      warn('PriceLockup', 'a11yText must be provided with strikethrough pricing')
+    }
 
-  if (strikeThrough && !a11yText) {
-    warn('PriceLockup', 'a11yText must be provided with strikethrough pricing')
+    return (
+      <PriceLockupContainer {...selectProps(rest)} ref={ref}>
+        {topText && (
+          <TopTextContainer topTextMarginBottom={`${topTextMarginBottom}px`}>
+            {renderTypography(topText, typographyTokens.topText)}
+          </TopTextContainer>
+        )}
+        {renderPrice()}
+        {bottomText && (
+          <Divider
+            testID="price-lockup-divider"
+            role="separator"
+            tokens={{ color: dividerColor ?? 'rgba(0, 0, 0, 0)' }}
+          />
+        )}
+        {bottomText && renderFootnoteContent()}
+      </PriceLockupContainer>
+    )
   }
+)
 
-  return (
-    <PriceLockupContainer {...selectProps(rest)}>
-      {topText && (
-        <TopTextContainer topTextMarginBottom={`${topTextMarginBottom}px`}>
-          {renderTypography(topText, typographyTokens.topText)}
-        </TopTextContainer>
-      )}
-      {renderPrice()}
-      {bottomText && (
-        <Divider
-          testID="price-lockup-divider"
-          role="separator"
-          tokens={{ color: dividerColor ?? 'rgba(0, 0, 0, 0)' }}
-        />
-      )}
-      {bottomText && renderFootnoteContent()}
-    </PriceLockupContainer>
-  )
-}
+PriceLockup.displayName = 'PriceLockup'
 
 PriceLockup.propTypes = {
   ...selectedSystemPropTypes,

package/src/Progress/ProgressBar.jsx

@@ -37,16 +37,24 @@ const Gradient = styled.div.attrs({ 'data-testid': 'ProgressBar-Gradient' })(
  * `gradient` is being used here to provide gradient filling.
  *
  */
-const ProgressBar = ({ percentage, tokens, variant, ...rest }) => {
+const ProgressBar = React.forwardRef(({ percentage, tokens, variant, ...rest }, ref) => {
   const themeTokens = useThemeTokens('ProgressBar', tokens, variant)
   const selectedProps = selectProps(rest)
 
   return (
-    <ProgressBarBase percentage={percentage} tokens={tokens} variant={variant} {...selectedProps}>
+    <ProgressBarBase
+      percentage={percentage}
+      tokens={tokens}
+      variant={variant}
+      ref={ref}
+      {...selectedProps}
+    >
       {themeTokens.gradient && <Gradient {...themeTokens} percentage={percentage} />}
     </ProgressBarBase>
   )
-}
+})
+
+ProgressBar.displayName = 'ProgressBar'
 
 ProgressBar.propTypes = {
   ...selectedSystemPropTypes,