@telus-uds/components-web 2.33.2 → 2.34.1

package/src/Table/Cell.jsx

@@ -68,81 +68,91 @@ const createStyledCell = (htmlElement) => styled[htmlElement]`
 const StyledHeaderCell = createStyledCell('th')
 const StyledDataCell = createStyledCell('td')
 
-const Cell = ({ children, isFirstInRow, align = 'left', tokens: cellTokens, type = 'default' }) => {
-  const { text, isScrollable: isTableScrollable, tokens: tableTokens, spacing } = useTableContext()
-  const themeTokens = { ...tableTokens, ...cellTokens }
+const Cell = React.forwardRef(
+  ({ children, isFirstInRow, align = 'left', tokens: cellTokens, type = 'default' }, ref) => {
+    const {
+      text,
+      isScrollable: isTableScrollable,
+      tokens: tableTokens,
+      spacing
+    } = useTableContext()
+    const themeTokens = { ...tableTokens, ...cellTokens }
 
-  const {
-    cellMinWidth,
-    cellBoxShadowColor,
-    cellBackground,
-    cellStickyShadow,
-    cellPaddingTop,
-    cellPaddingRight,
-    cellPaddingLeft,
-    cellPaddingBottom,
-    fontName,
-    fontWeight,
-    fontSize,
-    lineHeight,
-    stickyBackgroundColor,
-    fontColor,
-    display
-  } = useThemeTokens('Table', themeTokens, { spacing, type, text })
+    const {
+      cellMinWidth,
+      cellBoxShadowColor,
+      cellBackground,
+      cellStickyShadow,
+      cellPaddingTop,
+      cellPaddingRight,
+      cellPaddingLeft,
+      cellPaddingBottom,
+      fontName,
+      fontWeight,
+      fontSize,
+      lineHeight,
+      stickyBackgroundColor,
+      fontColor,
+      display
+    } = useThemeTokens('Table', themeTokens, { spacing, type, text })
 
-  const sharedProps = {
-    align,
-    isSticky: isTableScrollable && isFirstInRow,
-    cellBackground,
-    cellMinWidth,
-    cellStickyShadow: applyShadowToken(cellStickyShadow).boxShadow,
-    cellPaddingTop,
-    cellPaddingRight,
-    cellPaddingLeft,
-    cellPaddingBottom,
-    stickyBackgroundColor,
-    cellBoxShadowColor,
-    display
-  }
+    const sharedProps = {
+      align,
+      isSticky: isTableScrollable && isFirstInRow,
+      cellBackground,
+      cellMinWidth,
+      cellStickyShadow: applyShadowToken(cellStickyShadow).boxShadow,
+      cellPaddingTop,
+      cellPaddingRight,
+      cellPaddingLeft,
+      cellPaddingBottom,
+      stickyBackgroundColor,
+      cellBoxShadowColor,
+      display,
+      ref
+    }
 
-  const typographyTokens = {
-    fontName,
-    fontWeight,
-    fontSize,
-    lineHeight,
-    color: fontColor
-  }
+    const typographyTokens = {
+      fontName,
+      fontWeight,
+      fontSize,
+      lineHeight,
+      color: fontColor
+    }
 
-  switch (type) {
-    case HEADER_TYPE.HEADING:
-      return (
-        <StyledHeaderCell scope="col" {...sharedProps} type={type}>
-          <Typography tokens={typographyTokens}>{children}</Typography>
-        </StyledHeaderCell>
-      )
+    switch (type) {
+      case HEADER_TYPE.HEADING:
+        return (
+          <StyledHeaderCell scope="col" {...sharedProps} type={type}>
+            <Typography tokens={typographyTokens}>{children}</Typography>
+          </StyledHeaderCell>
+        )
 
-    case HEADER_TYPE.SUBHEADING:
-      return (
-        <StyledHeaderCell scope="col" {...sharedProps} type={type}>
-          <Typography tokens={typographyTokens}>{children}</Typography>
-        </StyledHeaderCell>
-      )
+      case HEADER_TYPE.SUBHEADING:
+        return (
+          <StyledHeaderCell scope="col" {...sharedProps} type={type}>
+            <Typography tokens={typographyTokens}>{children}</Typography>
+          </StyledHeaderCell>
+        )
 
-    case HEADER_TYPE.ROWHEADING:
-      return (
-        <StyledHeaderCell scope="row" {...sharedProps} type={type}>
-          <Typography tokens={typographyTokens}>{children}</Typography>
-        </StyledHeaderCell>
-      )
+      case HEADER_TYPE.ROWHEADING:
+        return (
+          <StyledHeaderCell scope="row" {...sharedProps} type={type}>
+            <Typography tokens={typographyTokens}>{children}</Typography>
+          </StyledHeaderCell>
+        )
 
-    default:
-      return (
-        <StyledDataCell {...sharedProps}>
-          <Typography tokens={typographyTokens}>{children}</Typography>
-        </StyledDataCell>
-      )
+      default:
+        return (
+          <StyledDataCell {...sharedProps}>
+            <Typography tokens={typographyTokens}>{children}</Typography>
+          </StyledDataCell>
+        )
+    }
   }
-}
+)
+
+Cell.displayName = 'Cell'
 
 Cell.propTypes = {
   type: PropTypes.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),

package/src/Table/Header.jsx

@@ -1,19 +1,21 @@
-import React, { cloneElement } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import Row from './Row'
 
-const Header = ({ children }) => {
+const Header = React.forwardRef(({ children }, ref) => {
   return (
-    <thead>
+    <thead ref={ref}>
       <Row>
         {React.Children.map(children, (child) =>
           // TO DO: pass type as a variant instead of prop
-          cloneElement(child, { type: 'heading' })
+          React.cloneElement(child, { type: 'heading' })
         )}
       </Row>
     </thead>
   )
-}
+})
+
+Header.displayName = 'Header'
 
 Header.propTypes = {
   children: PropTypes.node

package/src/Table/Row.jsx

@@ -1,15 +1,17 @@
-import React, { cloneElement } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
-const Row = ({ children }) => {
+const Row = React.forwardRef(({ children }, ref) => {
   return (
-    <tr>
+    <tr ref={ref}>
       {React.Children.map(children, (child, index) =>
-        cloneElement(child, { isFirstInRow: index === 0 })
+        React.cloneElement(child, { isFirstInRow: index === 0 })
       )}
     </tr>
   )
-}
+})
+
+Row.displayName = 'Row'
 
 Row.propTypes = {
   children: PropTypes.node

package/src/Table/SubHeading.jsx

@@ -1,17 +1,19 @@
-import React, { cloneElement } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import Row from './Row'
 
-const Header = ({ children }) => {
+const Header = React.forwardRef(({ children }, ref) => {
   return (
-    <Row>
+    <Row ref={ref}>
       {React.Children.map(children, (child) =>
         // TO DO: pass type as a variant instead of prop
-        cloneElement(child, { type: 'subHeading' })
+        React.cloneElement(child, { type: 'subHeading' })
       )}
     </Row>
   )
-}
+})
+
+Header.displayName = 'Header'
 
 Header.propTypes = {
   children: PropTypes.node

package/src/Table/Table.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useRef, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {
@@ -26,7 +26,7 @@ const StyledTable = styled.table`
 
 const TableContext = React.createContext({})
 
-export const useTableContext = () => useContext(TableContext)
+export const useTableContext = () => React.useContext(TableContext)
 
 /**
  * Use `Table` to display tabular data.
@@ -52,11 +52,11 @@ const Table = ({
   ...rest
 }) => {
   const { tablePaddingBottom, borderColor, borderWidth } = useThemeTokens('Table', tokens, variant)
-  const containerRef = useRef()
-  const tableRef = useRef()
+  const containerRef = React.useRef()
+  const tableRef = React.useRef()
 
-  const [containerWidth, setContainerWidth] = useState(0)
-  const [tableWidth, setTableWidth] = useState(0)
+  const [containerWidth, setContainerWidth] = React.useState(0)
+  const [tableWidth, setTableWidth] = React.useState(0)
 
   useSafeLayoutEffect(() => {
     const updateDimensions = () => {

package/src/TermsAndConditions/ExpandCollapse.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import {
   ExpandCollapse as ExpandCollapseBase,
@@ -49,7 +49,7 @@ const getIconButtonTokens = ({
   outerBorderWidth: iconOuterBorderWidth
 })
 
-const ExpandCollapse = forwardRef(
+const ExpandCollapse = React.forwardRef(
   ({ children, collapseTitle, expandTitle = collapseTitle }, ref) => {
     const getTokens = useThemeTokensCallback('TermsAndConditions', {}, {})
     const {
@@ -128,8 +128,4 @@ ExpandCollapse.propTypes = {
   expandTitle: PropTypes.string
 }
 
-ExpandCollapse.defaultProps = {
-  expandTitle: undefined
-}
-
 export default ExpandCollapse

package/src/TermsAndConditions/TermsAndConditions.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 {
@@ -76,13 +76,13 @@ const MainContainer = styled.div`
  * - Responsive display based on breakpoints
  * - Use `copy` to set language, ‘en’ for English or ‘fr’ for French
  */
-const TermsAndConditions = forwardRef(
+const TermsAndConditions = React.forwardRef(
   (
     {
       copy = 'en',
-      indexedContent,
-      nonIndexedContent,
-      tokens,
+      indexedContent = [],
+      nonIndexedContent = [],
+      tokens = {},
       variant = {},
       dictionary = defaultDictionary,
       ...rest
@@ -198,12 +198,4 @@ TermsAndConditions.propTypes = {
   })
 }
 
-TermsAndConditions.defaultProps = {
-  copy: 'en',
-  indexedContent: [],
-  nonIndexedContent: [],
-  dictionary: defaultDictionary,
-  tokens: {}
-}
-
 export default TermsAndConditions

package/src/Testimonial/Testimonial.jsx

@@ -48,65 +48,152 @@ const Figcaption = styled.figcaption(({ figcaptionGap }) => ({
   gap: figcaptionGap
 }))
 
-const Testimonial = ({
-  showDivider,
-  testimonial,
-  title,
-  imageSrc,
-  image = imageSrc,
-  additionalInfo,
-  testimonialStyle = 'large',
-  tokens,
-  copy = 'en',
-  variant = {},
-  ...rest
-}) => {
-  const viewport = useViewport()
-  const {
-    testimonialContainerGap,
-    quoteContainerGap,
-    dividerBorder,
-    dividerBackgroundColor,
-    figcaptionGap,
-    textColor,
-    icon,
-    iconFr,
-    iconColor,
-    imageSize,
-    testimonialFontSizeLarge,
-    testimonialLineHeightLarge,
-    testimonialFontWeightLarge,
-    testimonialFontSizeHeading,
-    testimonialLineHeightHeading,
-    testimonialFontNameHeading,
-    testimonialFontWeightHeading,
-    authorFontSize,
-    authorLineHeight,
-    authorFontName,
-    authorFontWeight,
-    additionalFontSize,
-    additionalLineHeight,
-    additionalFontName,
-    additionalFontWeight
-  } = useThemeTokens('Testimonial', tokens, variant, { viewport })
+const Testimonial = React.forwardRef(
+  (
+    {
+      showDivider,
+      testimonial,
+      title,
+      imageSrc,
+      image = imageSrc,
+      additionalInfo,
+      testimonialStyle = 'large',
+      tokens,
+      copy = 'en',
+      variant = {},
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const {
+      testimonialContainerGap,
+      quoteContainerGap,
+      dividerBorder,
+      dividerBackgroundColor,
+      figcaptionGap,
+      textColor,
+      icon,
+      iconFr,
+      iconColor,
+      imageSize,
+      testimonialFontSizeLarge,
+      testimonialLineHeightLarge,
+      testimonialFontWeightLarge,
+      testimonialFontSizeHeading,
+      testimonialLineHeightHeading,
+      testimonialFontNameHeading,
+      testimonialFontWeightHeading,
+      authorFontSize,
+      authorLineHeight,
+      authorFontName,
+      authorFontWeight,
+      additionalFontSize,
+      additionalLineHeight,
+      additionalFontName,
+      additionalFontWeight
+    } = useThemeTokens('Testimonial', tokens, variant, { viewport })
 
-  const getQuoteTestimonial = (open) => {
-    let quote = ''
+    const getQuoteTestimonial = (open) => {
+      let quote = ''
 
-    if (copy === 'en') quote = open ? '\u201C' : '\u201D'
-    else quote = open ? '\u00AB ' : ' \u00BB'
+      if (copy === 'en') quote = open ? '\u201C' : '\u201D'
+      else quote = open ? '\u00AB ' : ' \u00BB'
 
-    return quote
-  }
+      return quote
+    }
 
-  return (
-    <TestimonialContainer testimonialContainerGap={testimonialContainerGap} {...selectProps(rest)}>
-      <QuoteContainer quoteContainerGap={quoteContainerGap}>
-        <Icon
-          tokens={{ color: iconColor }}
-          variant={{ size: 'micro' }}
-          icon={copy === 'en' ? icon : iconFr}
-        />
+    return (
+      <TestimonialContainer
+        testimonialContainerGap={testimonialContainerGap}
+        ref={ref}
+        {...selectProps(rest)}
+      >
+        <QuoteContainer quoteContainerGap={quoteContainerGap}>
+          <Icon
+            tokens={{ color: iconColor }}
+            variant={{ size: 'micro' }}
+            icon={copy === 'en' ? icon : iconFr}
+          />
+          {showDivider && (
+            <Divider
+              dividerBackgroundColor={dividerBackgroundColor}
+              dividerBorder={dividerBorder}
+              role="separator"
+            />
+          )}
+        </QuoteContainer>
+        <BlockQuote>
+          <Typography
+            variant={{ size: testimonialStyle === 'large' ? 'large' : 'h3' }}
+            tokens={{
+              color: textColor,
+              fontSize:
+                testimonialStyle === 'heading'
+                  ? testimonialFontSizeHeading
+                  : testimonialFontSizeLarge,
+              lineHeight:
+                testimonialStyle === 'heading'
+                  ? testimonialLineHeightHeading
+                  : testimonialLineHeightLarge,
+              fontName: testimonialFontNameHeading,
+              fontWeight:
+                testimonialStyle === 'heading'
+                  ? testimonialFontWeightHeading
+                  : testimonialFontWeightLarge
+            }}
+          >
+            {`${getQuoteTestimonial(true)}${testimonial}${getQuoteTestimonial()}`}
+          </Typography>
+        </BlockQuote>
+        {(image || title || additionalInfo) && (
+          <Figcaption figcaptionGap={figcaptionGap}>
+            {image &&
+              (typeof image === 'string' ? (
+                <Image
+                  rounded="circle"
+                  src={image}
+                  alt={title}
+                  width={imageSize}
+                  height={imageSize}
+                />
+              ) : (
+                image
+              ))}
+            {(title || additionalInfo) && (
+              <AuthorInfoContainer>
+                {title && (
+                  <Typography
+                    variant={{ size: 'small' }}
+                    tokens={{
+                      color: textColor,
+                      fontSize: authorFontSize,
+                      lineHeight: authorLineHeight,
+                      fontName: authorFontName,
+                      fontWeight: authorFontWeight
+                    }}
+                  >
+                    {title}
+                  </Typography>
+                )}
+                {additionalInfo && (
+                  <Typography
+                    variant={{ size: 'small' }}
+                    tokens={{
+                      color: textColor,
+                      fontSize: additionalFontSize,
+                      lineHeight: additionalLineHeight,
+                      fontName: additionalFontName,
+                      fontWeight: additionalFontWeight
+                    }}
+                  >
+                    {additionalInfo}
+                  </Typography>
+                )}
+              </AuthorInfoContainer>
+            )}
+          </Figcaption>
+        )}
         {showDivider && (
           <Divider
             dividerBackgroundColor={dividerBackgroundColor}
@@ -114,88 +201,12 @@ const Testimonial = ({
             role="separator"
           />
         )}
-      </QuoteContainer>
-      <BlockQuote>
-        <Typography
-          variant={{ size: testimonialStyle === 'large' ? 'large' : 'h3' }}
-          tokens={{
-            color: textColor,
-            fontSize:
-              testimonialStyle === 'heading'
-                ? testimonialFontSizeHeading
-                : testimonialFontSizeLarge,
-            lineHeight:
-              testimonialStyle === 'heading'
-                ? testimonialLineHeightHeading
-                : testimonialLineHeightLarge,
-            fontName: testimonialFontNameHeading,
-            fontWeight:
-              testimonialStyle === 'heading'
-                ? testimonialFontWeightHeading
-                : testimonialFontWeightLarge
-          }}
-        >
-          {`${getQuoteTestimonial(true)}${testimonial}${getQuoteTestimonial()}`}
-        </Typography>
-      </BlockQuote>
-      {(image || title || additionalInfo) && (
-        <Figcaption figcaptionGap={figcaptionGap}>
-          {image &&
-            (typeof image === 'string' ? (
-              <Image
-                rounded="circle"
-                src={image}
-                alt={title}
-                width={imageSize}
-                height={imageSize}
-              />
-            ) : (
-              image
-            ))}
-          {(title || additionalInfo) && (
-            <AuthorInfoContainer>
-              {title && (
-                <Typography
-                  variant={{ size: 'small' }}
-                  tokens={{
-                    color: textColor,
-                    fontSize: authorFontSize,
-                    lineHeight: authorLineHeight,
-                    fontName: authorFontName,
-                    fontWeight: authorFontWeight
-                  }}
-                >
-                  {title}
-                </Typography>
-              )}
-              {additionalInfo && (
-                <Typography
-                  variant={{ size: 'small' }}
-                  tokens={{
-                    color: textColor,
-                    fontSize: additionalFontSize,
-                    lineHeight: additionalLineHeight,
-                    fontName: additionalFontName,
-                    fontWeight: additionalFontWeight
-                  }}
-                >
-                  {additionalInfo}
-                </Typography>
-              )}
-            </AuthorInfoContainer>
-          )}
-        </Figcaption>
-      )}
-      {showDivider && (
-        <Divider
-          dividerBackgroundColor={dividerBackgroundColor}
-          dividerBorder={dividerBorder}
-          role="separator"
-        />
-      )}
-    </TestimonialContainer>
-  )
-}
+      </TestimonialContainer>
+    )
+  }
+)
+
+Testimonial.displayName = 'Testimonial'
 
 Testimonial.propTypes = {
   ...selectedSystemPropTypes,