@telus-uds/components-web 2.33.2 → 2.34.1

package/src/Ribbon/Ribbon.jsx

@@ -49,92 +49,94 @@ const RibbonCurve = styled.div`
   }
 `
 
-const Ribbon = ({
-  children,
-  tokens,
-  wrap: shouldWrap = false,
-  left,
-  top,
-  variant = {},
-  ...rest
-}) => {
-  const {
-    backgroundColor,
-    borderRadius,
-    boxShadowPaddingBottom,
-    boxShadowPaddingLeft,
-    boxShadowPaddingRight,
-    boxShadowPaddingTop,
-    boxShadowColor,
-    curveAfterBackgroundColor,
-    curveAfterHeight,
-    curveAfterWidth,
-    curveBackgroundColor,
-    curveHeight,
-    curveAfterRadius,
-    curveWidth,
-    curveMarginTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    gradient,
-    fontColor,
-    borderRadiusBottomLeft,
-    borderRadiusBottomRight,
-    fontName,
-    fontWeight,
-    fontSize,
-    lineHeight
-  } = useThemeTokens('Ribbon', tokens, { ...variant, wrap: shouldWrap })
+const Ribbon = React.forwardRef(
+  ({ children, tokens, wrap: shouldWrap = false, left, top, variant = {}, ...rest }, ref) => {
+    const {
+      backgroundColor,
+      borderRadius,
+      boxShadowPaddingBottom,
+      boxShadowPaddingLeft,
+      boxShadowPaddingRight,
+      boxShadowPaddingTop,
+      boxShadowColor,
+      curveAfterBackgroundColor,
+      curveAfterHeight,
+      curveAfterWidth,
+      curveBackgroundColor,
+      curveHeight,
+      curveAfterRadius,
+      curveWidth,
+      curveMarginTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      gradient,
+      fontColor,
+      borderRadiusBottomLeft,
+      borderRadiusBottomRight,
+      fontName,
+      fontWeight,
+      fontSize,
+      lineHeight
+    } = useThemeTokens('Ribbon', tokens, { ...variant, wrap: shouldWrap })
 
-  let background = backgroundColor
-  if (gradient) {
-    const { type: gradientType, angle: gradientAngle, stops: gradientColors } = gradient
-    const gradientBackground = `${gradientType}-gradient(${gradientAngle}deg, ${gradientColors[0].color}, ${gradientColors[1].color})`
-    background = gradientBackground
-  }
-  return (
-    <RibbonWrapper left={left} top={top} data-testid="ribbon-wrapper" {...selectProps(rest)}>
-      <RibbonContainer
-        shouldWrap={shouldWrap}
-        backgroundColor={background}
-        padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
-        borderRadius={`${borderRadius}px`}
-        boxShadow={`${boxShadowPaddingTop}px ${boxShadowPaddingRight}px ${boxShadowPaddingBottom}px ${boxShadowPaddingLeft}px ${boxShadowColor}`}
-        borderRadiusBottomLeft={`${borderRadiusBottomLeft}px`}
-        borderRadiusBottomRight={`${borderRadiusBottomRight}px`}
+    let background = backgroundColor
+    if (gradient) {
+      const { type: gradientType, angle: gradientAngle, stops: gradientColors } = gradient
+      const gradientBackground = `${gradientType}-gradient(${gradientAngle}deg, ${gradientColors[0].color}, ${gradientColors[1].color})`
+      background = gradientBackground
+    }
+    return (
+      <RibbonWrapper
+        left={left}
+        top={top}
+        data-testid="ribbon-wrapper"
+        ref={ref}
+        {...selectProps(rest)}
       >
-        <Typography
-          variant={{ bold: true, inverse: true }}
-          tokens={{
-            color: fontColor,
-            fontName,
-            fontWeight,
-            fontSize,
-            lineHeight
-          }}
+        <RibbonContainer
+          shouldWrap={shouldWrap}
+          backgroundColor={background}
+          padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
+          borderRadius={`${borderRadius}px`}
+          boxShadow={`${boxShadowPaddingTop}px ${boxShadowPaddingRight}px ${boxShadowPaddingBottom}px ${boxShadowPaddingLeft}px ${boxShadowColor}`}
+          borderRadiusBottomLeft={`${borderRadiusBottomLeft}px`}
+          borderRadiusBottomRight={`${borderRadiusBottomRight}px`}
         >
-          {children}
-        </Typography>
-      </RibbonContainer>
-      {shouldWrap && (
-        <RibbonCurve
-          data-testid="ribbon-curve"
-          backgroundColor={backgroundColor}
-          curveMarginTop={`${curveMarginTop}px`}
-          curveWidth={`${curveWidth}px`}
-          curveHeight={`${curveHeight}px`}
-          curveBackgroundColor={curveBackgroundColor}
-          curveAfterRadius={`${curveAfterRadius}px`}
-          curveAfterWidth={`${curveAfterWidth}px`}
-          curveAfterHeight={`${curveAfterHeight}px`}
-          curveAfterBackgroundColor={curveAfterBackgroundColor}
-        />
-      )}
-    </RibbonWrapper>
-  )
-}
+          <Typography
+            variant={{ bold: true, inverse: true }}
+            tokens={{
+              color: fontColor,
+              fontName,
+              fontWeight,
+              fontSize,
+              lineHeight
+            }}
+          >
+            {children}
+          </Typography>
+        </RibbonContainer>
+        {shouldWrap && (
+          <RibbonCurve
+            data-testid="ribbon-curve"
+            backgroundColor={backgroundColor}
+            curveMarginTop={`${curveMarginTop}px`}
+            curveWidth={`${curveWidth}px`}
+            curveHeight={`${curveHeight}px`}
+            curveBackgroundColor={curveBackgroundColor}
+            curveAfterRadius={`${curveAfterRadius}px`}
+            curveAfterWidth={`${curveAfterWidth}px`}
+            curveAfterHeight={`${curveAfterHeight}px`}
+            curveAfterBackgroundColor={curveAfterBackgroundColor}
+          />
+        )}
+      </RibbonWrapper>
+    )
+  }
+)
+
+Ribbon.displayName = 'Ribbon'
 
 Ribbon.propTypes = {
   ...selectedSystemPropTypes,

package/src/SkeletonProvider/SkeletonImage.jsx

@@ -2,23 +2,32 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Skeleton } from '@telus-uds/components-base'
 
-const SkeletonImage = ({
-  rounded,
-  imgHeight,
-  size,
-  sizeIndex,
-  // Size automatically from image height, unless any size prop is passed in
-  sizePixels = !(size || sizeIndex) ? imgHeight : undefined,
-  show,
-  children
-}) => {
-  if (!show) {
-    return children
+const SkeletonImage = React.forwardRef(
+  (
+    {
+      rounded,
+      imgHeight,
+      size,
+      sizeIndex,
+      // Size automatically from image height, unless any size prop is passed in
+      sizePixels = !(size || sizeIndex) ? imgHeight : undefined,
+      show,
+      children
+    },
+    ref
+  ) => {
+    if (!show) {
+      return children
+    }
+
+    const shape = rounded !== 'circle' ? 'box' : rounded
+    return (
+      <Skeleton size={size} sizePixels={sizePixels} sizeIndex={sizeIndex} shape={shape} ref={ref} />
+    )
   }
+)
 
-  const shape = rounded !== 'circle' ? 'box' : rounded
-  return <Skeleton size={size} sizePixels={sizePixels} sizeIndex={sizeIndex} shape={shape} />
-}
+SkeletonImage.displayName = 'SkeletonImage'
 
 SkeletonImage.propTypes = {
   imgHeight: PropTypes.number,

package/src/SkeletonProvider/SkeletonProvider.jsx

@@ -1,4 +1,4 @@
-import React, { Children, cloneElement } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Typography } from '@telus-uds/components-base'
 import Image from '../Image'
@@ -22,7 +22,7 @@ const SkeletonProvider = ({ children, show }) => {
       const mappedChildren = Array.isArray(elementChildren)
         ? elementChildren.map(mapChild)
         : mapChild(elementChildren)
-      childElement = cloneElement(childElement, {
+      childElement = React.cloneElement(childElement, {
         children: mappedChildren
       })
     }
@@ -51,7 +51,7 @@ const SkeletonProvider = ({ children, show }) => {
     return childElement
   }
 
-  return <>{Children.map(children, mapChild)}</>
+  return <>{React.Children.map(children, mapChild)}</>
 }
 
 SkeletonProvider.propTypes = {

package/src/SkeletonProvider/SkeletonTypography.jsx

@@ -2,21 +2,26 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Skeleton } from '@telus-uds/components-base'
 
-const SkeletonTypography = ({ show, size, sizeIndex, sizePixels, characters, lines, children }) => {
-  if (!show) {
-    return children
+const SkeletonTypography = React.forwardRef(
+  ({ show, size, sizeIndex, sizePixels, characters, lines, children }, ref) => {
+    if (!show) {
+      return children
+    }
+
+    return (
+      <Skeleton
+        size={size}
+        sizeIndex={sizeIndex}
+        sizePixels={sizePixels}
+        characters={characters}
+        lines={lines}
+        ref={ref}
+      />
+    )
   }
+)
 
-  return (
-    <Skeleton
-      size={size}
-      sizeIndex={sizeIndex}
-      sizePixels={sizePixels}
-      characters={characters}
-      lines={lines}
-    />
-  )
-}
+SkeletonTypography.displayName = 'SkeletonTypography'
 
 SkeletonTypography.propTypes = {
   show: PropTypes.bool.isRequired,

package/src/Span/Span.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'
 
@@ -15,14 +15,16 @@ const StyledSpan = styled.span`${({ flex }) => (flex ? 'display: inline-flex' :
  * Span may be used in cases where an inline span or direct access to HTML attributes is required.
  * In most cases, `Typography` should be used for text, or Paragraph for body text.
  */
-const Span = ({ children, variant, tokens, testID, flex, ...rest }) => {
+const Span = React.forwardRef(({ children, variant, tokens, testID, flex, ...rest }, ref) => {
   const style = useTypographyTheme(variant, tokens)
   return (
-    <StyledSpan data-testid={testID} flex={flex} style={style} {...selectProps(rest)}>
+    <StyledSpan data-testid={testID} flex={flex} style={style} ref={ref} {...selectProps(rest)}>
       {children}
     </StyledSpan>
   )
-}
+})
+
+Span.displayName = 'Span'
 
 Span.propTypes = {
   ...selectedSystemPropTypes,
@@ -39,7 +41,7 @@ Span.propTypes = {
   /**
    * Span takes the same tokens overrides as Typography
    */
-  tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
+  tokens: getTokensPropType('Typography'),
   /**
    * Span can take any of Typography's theme variants
    */

package/src/Spinner/Spinner.jsx

@@ -64,100 +64,107 @@ const recursiveMap = (children, fn) =>
 /**
  * Loading indicator.
  */
-const Spinner = ({
-  children,
-  fullScreen = false,
-  inline = false,
-  label,
-  labelPosition,
-  show = false,
-  isStatic = false,
-  tokens,
-  variant = {},
-  ...rest
-}) => {
-  const { fullScreenOverLayBackground, size, thickness } = useThemeTokens(
-    'Spinner',
-    tokens,
-    variant
-  )
-
-  const { size: sizeVariant = 'large' } = variant
-
-  useScrollBlocking([fullScreen, show])
-
-  if (!show) {
-    return children ?? null
-  }
-
-  // Full screen spinner
-  if (fullScreen) {
-    return (
-      <Portal>
-        <FullscreenOverlay fullScreenOverLayBackground={fullScreenOverLayBackground}>
-          <SpinnerContainer
-            inline={inline}
-            fullScreen={fullScreen}
-            aria-live="assertive"
-            {...selectProps(rest)}
-          >
-            <SpinnerContent
-              label={label}
-              labelPosition={labelPosition}
-              overlay={true}
-              size={size}
-              thickness={thickness}
-              sizeVariant={sizeVariant}
-              isStatic={isStatic}
-            />
-          </SpinnerContainer>
-        </FullscreenOverlay>
-      </Portal>
+const Spinner = React.forwardRef(
+  (
+    {
+      children,
+      fullScreen = false,
+      inline = false,
+      label,
+      labelPosition,
+      show = false,
+      isStatic = false,
+      tokens,
+      variant = {},
+      ...rest
+    },
+    ref
+  ) => {
+    const { fullScreenOverLayBackground, size, thickness } = useThemeTokens(
+      'Spinner',
+      tokens,
+      variant
     )
-  }
 
-  // Overlay spinner
-  if (children) {
+    const { size: sizeVariant = 'large' } = variant
+
+    useScrollBlocking([fullScreen, show])
+
+    if (!show) {
+      return children ?? null
+    }
+
+    // Full screen spinner
+    if (fullScreen) {
+      return (
+        <Portal>
+          <FullscreenOverlay fullScreenOverLayBackground={fullScreenOverLayBackground}>
+            <SpinnerContainer
+              inline={inline}
+              fullScreen={fullScreen}
+              aria-live="assertive"
+              {...selectProps(rest)}
+            >
+              <SpinnerContent
+                label={label}
+                labelPosition={labelPosition}
+                overlay={true}
+                size={size}
+                thickness={thickness}
+                sizeVariant={sizeVariant}
+                isStatic={isStatic}
+              />
+            </SpinnerContainer>
+          </FullscreenOverlay>
+        </Portal>
+      )
+    }
+
+    // Overlay spinner
+    if (children) {
+      return (
+        <SpinnerContainer inline={inline} aria-live="assertive" {...selectProps(rest)}>
+          <SpinnerContent
+            label={label}
+            labelPosition={labelPosition}
+            overlay={true}
+            size={size}
+            thickness={thickness}
+            sizeVariant={sizeVariant}
+            isStatic={isStatic}
+          />
+
+          <ContentOverlay />
+
+          <OpaqueContainer inert="true">
+            {recursiveMap(children, (c) => {
+              if (c) {
+                return React.cloneElement(c, { tabIndex: '-1', 'aria-hidden': 'true' })
+              }
+              return undefined
+            })}
+          </OpaqueContainer>
+        </SpinnerContainer>
+      )
+    }
+
+    // Standalone spinner
     return (
-      <SpinnerContainer inline={inline} aria-live="assertive" {...selectProps(rest)}>
+      <SpinnerContainer ref={ref} {...selectProps(rest)}>
         <SpinnerContent
           label={label}
           labelPosition={labelPosition}
-          overlay={true}
           size={size}
           thickness={thickness}
           sizeVariant={sizeVariant}
           isStatic={isStatic}
         />
-
-        <ContentOverlay />
-
-        <OpaqueContainer inert="true">
-          {recursiveMap(children, (c) => {
-            if (c) {
-              return React.cloneElement(c, { tabIndex: '-1', 'aria-hidden': 'true' })
-            }
-            return undefined
-          })}
-        </OpaqueContainer>
       </SpinnerContainer>
     )
   }
+)
 
-  // Standalone spinner
-  return (
-    <SpinnerContainer {...selectProps(rest)}>
-      <SpinnerContent
-        label={label}
-        labelPosition={labelPosition}
-        size={size}
-        thickness={thickness}
-        sizeVariant={sizeVariant}
-        isStatic={isStatic}
-      />
-    </SpinnerContainer>
-  )
-}
+Spinner.displayName = 'Spinner'
 
 Spinner.propTypes = {
   ...selectedSystemPropTypes,

package/src/Spinner/SpinnerContent.jsx

@@ -25,41 +25,39 @@ const Container = styled.div(({ overlay }) => ({
   })
 }))
 
-const SpinnerContent = ({
-  label,
-  labelPosition,
-  overlay = false,
-  sizeVariant,
-  size,
-  thickness,
-  isStatic,
-  ...rest
-}) => {
-  const labelMapping = {
-    top: 'column-reverse',
-    bottom: 'column',
-    left: 'row-reverse',
-    right: 'row'
+const SpinnerContent = React.forwardRef(
+  (
+    { label, labelPosition, overlay = false, sizeVariant, size, thickness, isStatic, ...rest },
+    ref
+  ) => {
+    const labelMapping = {
+      top: 'column-reverse',
+      bottom: 'column',
+      left: 'row-reverse',
+      right: 'row'
+    }
+
+    return (
+      <Container overlay={overlay} ref={ref}>
+        <StackView
+          space={3}
+          tokens={{ alignItems: 'center' }}
+          direction={labelMapping[labelPosition]}
+        >
+          <ActivityIndicator
+            label={label}
+            tokens={{ size, thickness }}
+            isStatic={isStatic}
+            {...selectProps(rest)}
+          />
+          {sizeVariant === LARGE && <Typography>{label}</Typography>}
+        </StackView>
+      </Container>
+    )
   }
+)
 
-  return (
-    <Container overlay={overlay}>
-      <StackView
-        space={3}
-        tokens={{ alignItems: 'center' }}
-        direction={labelMapping[labelPosition]}
-      >
-        <ActivityIndicator
-          label={label}
-          tokens={{ size, thickness }}
-          isStatic={isStatic}
-          {...selectProps(rest)}
-        />
-        {sizeVariant === LARGE && <Typography>{label}</Typography>}
-      </StackView>
-    </Container>
-  )
-}
+SpinnerContent.displayName = 'SpinnerContent'
 
 SpinnerContent.propTypes = {
   ...selectedSystemPropTypes,

package/src/StoryCard/StoryCard.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 {
   Box,
@@ -54,7 +53,7 @@ const FullBleedOffsetInner = styled.div(({ borderOffset }) => ({
  * - Use `href` to set the target URL
  * - Use `fullBleedContent` to set the thumbnail image
  */
-const StoryCard = forwardRef(
+const StoryCard = React.forwardRef(
   (
     {
       tag,

package/src/Table/Body.jsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const Body = ({ children }) => {
-  return <tbody>{children}</tbody>
-}
+const Body = React.forwardRef(({ children }, ref) => {
+  return <tbody ref={ref}>{children}</tbody>
+})
+
+Body.displayName = 'Body'
 
 Body.propTypes = {
   children: PropTypes.node