@telus-uds/components-web 2.33.2 → 2.34.1

package/src/Breadcrumbs/Breadcrumbs.jsx

@@ -102,91 +102,98 @@ const getStructuredData = (items, baseUrl) => {
 /**
  * Display a hierarchy of links, commonly used for navigation.
  */
-const Breadcrumbs = ({
-  baseUrl,
-  children,
-  linkRouterProps,
-  params = {},
-  tokens,
-  routes,
-  variant,
-  LinkRouter,
-  ...rest
-}) => {
-  // React Helmet can cause a memory leak in SSR if not properly configured.
-  // Only run it in SSR if theme options tells us to.
-  /* const {
+const Breadcrumbs = React.forwardRef(
+  (
+    {
+      baseUrl,
+      children,
+      linkRouterProps,
+      params = {},
+      tokens,
+      routes,
+      variant,
+      LinkRouter,
+      ...rest
+    },
+    ref
+  ) => {
+    // React Helmet can cause a memory leak in SSR if not properly configured.
+    // Only run it in SSR if theme options tells us to.
+    /* const {
     themeOptions: { enableHelmetSSR }
   } = useTheme() */
-  // const isHydrating = useHydrationContext()
-  // const isSSR = typeof window === 'undefined' || isHydrating
-  // const hasMetadata = isSSR ? enableHelmetSSR : true
-  const helmetContext = {}
-
-  const activeRoutes = children
-    ? React.Children.map(
-        unpackFragment(children),
-        ({ props: { href, children: breadcrumbName, ...itemRest }, ref }) => ({
-          path: href,
-          breadcrumbName,
-          ref,
-          ...itemRest
-        })
-      )
-    : routes.filter((route) => route.path && route.breadcrumbName)
-
-  const items = getItems(activeRoutes, params, !children)
-  const themeTokens = useThemeTokens('Breadcrumbs', tokens, variant)
-
-  const metadata = (
-    <HelmetProvider context={helmetContext}>
-      <Helmet>
-        <script type="application/ld+json">
-          {`
+    // const isHydrating = useHydrationContext()
+    // const isSSR = typeof window === 'undefined' || isHydrating
+    // const hasMetadata = isSSR ? enableHelmetSSR : true
+    const helmetContext = {}
+
+    const activeRoutes = children
+      ? React.Children.map(
+          unpackFragment(children),
+          ({ props: { href, children: breadcrumbName, ...itemRest }, ref: routeRef }) => ({
+            path: href,
+            breadcrumbName,
+            routeRef,
+            ...itemRest
+          })
+        )
+      : routes.filter((route) => route.path && route.breadcrumbName)
+
+    const items = getItems(activeRoutes, params, !children)
+    const themeTokens = useThemeTokens('Breadcrumbs', tokens, variant)
+
+    const metadata = (
+      <HelmetProvider context={helmetContext}>
+        <Helmet>
+          <script type="application/ld+json">
+            {`
             {
             "@context": "http://schema.org",
             "@type": "BreadcrumbList",
             "itemListElement": ${JSON.stringify(getStructuredData(items, baseUrl))}
             }
           `}
-        </script>
-      </Helmet>
-    </HelmetProvider>
-  )
-
-  return (
-    <nav aria-label="Breadcrumb" {...selectProps(rest)}>
-      <StyledList iconContainerSize={themeTokens.iconContainerSize}>
-        {items.map(
-          ({
-            href,
-            current,
-            breadcrumbName,
-            LinkRouter: ItemLinkRouter = LinkRouter,
-            linkRouterProps: itemLinkRouterProps,
-            ...itemRest
-          }) => {
-            return (
-              <Item
-                {...itemRest}
-                current={current}
-                href={href}
-                tokens={tokens}
-                key={href}
-                linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
-                variant={{ ...variant, size: 'micro' }}
-                LinkRouter={ItemLinkRouter}
-              >
-                {breadcrumbName}
-              </Item>
-            )
-          }
-        )}
-      </StyledList>
-      {metadata}
-    </nav>
-  )
-}
+          </script>
+        </Helmet>
+      </HelmetProvider>
+    )
+
+    return (
+      <nav aria-label="Breadcrumb" ref={ref} {...selectProps(rest)}>
+        <StyledList iconContainerSize={themeTokens.iconContainerSize}>
+          {items.map(
+            ({
+              href,
+              current,
+              breadcrumbName,
+              LinkRouter: ItemLinkRouter = LinkRouter,
+              linkRouterProps: itemLinkRouterProps,
+              ...itemRest
+            }) => {
+              return (
+                <Item
+                  {...itemRest}
+                  current={current}
+                  href={href}
+                  tokens={tokens}
+                  key={href}
+                  linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
+                  variant={{ ...variant, size: 'micro' }}
+                  LinkRouter={ItemLinkRouter}
+                >
+                  {breadcrumbName}
+                </Item>
+              )
+            }
+          )}
+        </StyledList>
+        {metadata}
+      </nav>
+    )
+  }
+)
+
+Breadcrumbs.displayName = 'Breadcrumbs'
 
 Breadcrumbs.propTypes = {
   ...selectedSystemPropTypes,

package/src/Breadcrumbs/Item/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 {
@@ -32,7 +32,7 @@ const IconContainer = styled.span({
   width: ({ iconContainerSize, iconPadding }) => `${iconContainerSize + iconPadding * 2}px`
 })
 
-const Item = forwardRef(
+const Item = React.forwardRef(
   (
     {
       href,
@@ -134,11 +134,4 @@ Item.propTypes = {
   variant: PropTypes.shape({ inverse: PropTypes.bool })
 }
 
-// Since react/require-default-props eslint rule doesn't pick up default arguments as default props when combined with `forwardRef`
-// - probably related https://github.com/yannickcr/eslint-plugin-react/issues/2760
-Item.defaultProps = {
-  current: false,
-  variant: { light: true }
-}
-
 export default Item

package/src/Callout/Callout.jsx

@@ -52,48 +52,45 @@ const CalloutContainer = styled.div(
   })
 )
 
-const Callout = ({
-  icon,
-  children,
-  verticalAlign,
-  textAlignToFlex,
-  tokens,
-  variant = {},
-  ...rest
-}) => {
-  const {
-    background,
-    gap,
-    borderRadius,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    color
-  } = useThemeTokens('Callout', tokens, variant)
+const Callout = React.forwardRef(
+  ({ icon, children, verticalAlign, textAlignToFlex, tokens, variant = {}, ...rest }, ref) => {
+    const {
+      background,
+      gap,
+      borderRadius,
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      paddingBottom,
+      color
+    } = useThemeTokens('Callout', tokens, variant)
 
-  const { rounded = false, size = 'medium' } = variant
+    const { rounded = false, size = 'medium' } = variant
 
-  return (
-    <CalloutContainer
-      size={size}
-      rounded={rounded}
-      data-testid="callout-container"
-      verticalAlign={verticalAlign}
-      textAlignToFlex={textAlignToFlex}
-      background={background}
-      gap={gap}
-      borderRadius={borderRadius}
-      padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
-      {...selectProps(rest)}
-    >
-      {icon && <Icon tokens={{ color }} icon={icon} variant={{ rank: 'primary', size }} />}
-      <Typography variant={{ size, compact: size === 'small' }} tokens={{ color }}>
-        {children}
-      </Typography>
-    </CalloutContainer>
-  )
-}
+    return (
+      <CalloutContainer
+        size={size}
+        rounded={rounded}
+        data-testid="callout-container"
+        verticalAlign={verticalAlign}
+        textAlignToFlex={textAlignToFlex}
+        background={background}
+        gap={gap}
+        borderRadius={borderRadius}
+        padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
+        ref={ref}
+        {...selectProps(rest)}
+      >
+        {icon && <Icon tokens={{ color }} icon={icon} variant={{ rank: 'primary', size }} />}
+        <Typography variant={{ size, compact: size === 'small' }} tokens={{ color }}>
+          {children}
+        </Typography>
+      </CalloutContainer>
+    )
+  }
+)
+
+Callout.displayName = 'Callout'
 
 Callout.propTypes = {
   ...selectedSystemPropTypes,

package/src/Card/Card.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 {
   Card as CardBase,
@@ -53,7 +52,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * ## Accessibility
  * `Card` component accepts all the standard accessibility props.
  */
-const Card = forwardRef(
+const Card = React.forwardRef(
   (
     {
       children,

package/src/Card/CardContent.jsx

@@ -48,21 +48,26 @@ const CardContentContainer = styled.div(
 /**
  * Card content, applying the card tokens as per the theme used.
  */
-const CardContent = ({ children, flexContent, tokens, variant, withFooter = false, ...rest }) => {
-  const viewport = useViewport()
-  const themeTokens = useThemeTokens('Card', tokens, variant, { viewport })
+const CardContent = React.forwardRef(
+  ({ children, flexContent, tokens, variant, withFooter = false, ...rest }, ref) => {
+    const viewport = useViewport()
+    const themeTokens = useThemeTokens('Card', tokens, variant, { viewport })
 
-  return (
-    <CardContentContainer
-      {...themeTokens}
-      flexContent={flexContent}
-      withFooter={withFooter}
-      {...selectProps(rest)}
-    >
-      {children}
-    </CardContentContainer>
-  )
-}
+    return (
+      <CardContentContainer
+        {...themeTokens}
+        flexContent={flexContent}
+        withFooter={withFooter}
+        ref={ref}
+        {...selectProps(rest)}
+      >
+        {children}
+      </CardContentContainer>
+    )
+  }
+)
+
+CardContent.displayName = 'CardContent'
 
 CardContent.propTypes = {
   ...selectedSystemPropTypes,

package/src/Countdown/Countdown.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 {
   Spacer,
@@ -64,78 +63,80 @@ const getMainTextTokens = ({
   fontName: textTimerFontName
 })
 
-const Countdown = forwardRef(({ copy = 'en', targetTime, tokens, variant = {}, ...rest }, ref) => {
-  const [days, hours, minutes, seconds] = useCountdown(targetTime)
-  const viewport = useViewport()
-  const { feature, large, label, noDivider } = variant
-  if (noDivider && !label) {
-    throw new Error('`noDivider` variant can only be used with `label` enabled!')
-  }
-  const themeTokens = useThemeTokens('Countdown', tokens, variant, { viewport })
-  const segmentFontSize = themeTokens.textFontSize
-  const semanticGradient =
-    themeTokens.containerGradient && transformGradient(themeTokens.containerGradient)
-  const mainTextTokens = getMainTextTokens(themeTokens)
+const Countdown = React.forwardRef(
+  ({ copy = 'en', targetTime, tokens, variant = {}, ...rest }, ref) => {
+    const [days, hours, minutes, seconds] = useCountdown(targetTime)
+    const viewport = useViewport()
+    const { feature, large, label, noDivider } = variant
+    if (noDivider && !label) {
+      throw new Error('`noDivider` variant can only be used with `label` enabled!')
+    }
+    const themeTokens = useThemeTokens('Countdown', tokens, variant, { viewport })
+    const segmentFontSize = themeTokens.textFontSize
+    const semanticGradient =
+      themeTokens.containerGradient && transformGradient(themeTokens.containerGradient)
+    const mainTextTokens = getMainTextTokens(themeTokens)
 
-  const divider =
-    noDivider === true ? (
-      // StackView-based subcontainer adds a 1-step space on the each side of the divider
-      <Spacer direction="row" space={(feature || large) && viewport !== viewports.xs ? 4 : 1} />
-    ) : (
-      <Typography tokens={mainTextTokens}>:</Typography>
-    )
-  const labelTokens = getLabelTokens(themeTokens)
+    const divider =
+      noDivider === true ? (
+        // StackView-based subcontainer adds a 1-step space on the each side of the divider
+        <Spacer direction="row" space={(feature || large) && viewport !== viewports.xs ? 4 : 1} />
+      ) : (
+        <Typography tokens={mainTextTokens}>:</Typography>
+      )
+    const labelTokens = getLabelTokens(themeTokens)
 
-  const segmentProps = {
-    copy,
-    labelTokens,
-    numberTokens: mainTextTokens,
-    segmentFontSize,
-    variant
-  }
+    const segmentProps = {
+      copy,
+      labelTokens,
+      numberTokens: mainTextTokens,
+      segmentFontSize,
+      variant
+    }
 
-  return (
-    // Making it focusable for accessibility purposes
-    <Container
-      ref={ref}
-      variant={variant}
-      {...selectProps(rest)}
-      tabIndex={0}
-      themeTokens={themeTokens}
-      gradient={semanticGradient}
-    >
-      <StackView direction="row" space={1}>
-        <Segment
-          labelKey="day"
-          number={days}
-          segmentWidth={String(days).length}
-          {...segmentProps}
-        />
-        {divider}
-        <Segment
-          labelKey="hour"
-          number={hours}
-          {...segmentProps}
-          {...applyTextStyles(themeTokens)}
-        />
-        {divider}
-        <Segment
-          labelKey="minute"
-          number={minutes}
-          {...segmentProps}
-          {...applyTextStyles(themeTokens)}
-        />
-        {divider}
-        <Segment
-          labelKey="second"
-          number={seconds}
-          {...segmentProps}
-          {...applyTextStyles(themeTokens)}
-        />
-      </StackView>
-    </Container>
-  )
-})
+    return (
+      // Making it focusable for accessibility purposes
+      <Container
+        ref={ref}
+        variant={variant}
+        {...selectProps(rest)}
+        tabIndex={0}
+        themeTokens={themeTokens}
+        gradient={semanticGradient}
+      >
+        <StackView direction="row" space={1}>
+          <Segment
+            labelKey="day"
+            number={days}
+            segmentWidth={String(days).length}
+            {...segmentProps}
+          />
+          {divider}
+          <Segment
+            labelKey="hour"
+            number={hours}
+            {...segmentProps}
+            {...applyTextStyles(themeTokens)}
+          />
+          {divider}
+          <Segment
+            labelKey="minute"
+            number={minutes}
+            {...segmentProps}
+            {...applyTextStyles(themeTokens)}
+          />
+          {divider}
+          <Segment
+            labelKey="second"
+            number={seconds}
+            {...segmentProps}
+            {...applyTextStyles(themeTokens)}
+          />
+        </StackView>
+      </Container>
+    )
+  }
+)
 Countdown.displayName = 'Countdown'
 
 Countdown.propTypes = {

package/src/Countdown/Segment.jsx

@@ -22,36 +22,48 @@ const Container = styled.div(({ segmentFontSize, segmentWidth = 2, variant: { fe
 // A segment of the countdown string: we need to make sure it
 // keeps its width constant to prevent the whole component from
 // being automatically resized while using variable size fonts
-const Segment = ({
-  copy = 'en',
-  segmentFontSize,
-  labelKey,
-  labelTokens,
-  number,
-  numberTokens,
-  segmentWidth = 2,
-  variant = {}
-}) => {
-  const getCopy = useCopy({ dictionary, copy })
-  const { label, large, feature } = variant
+const Segment = React.forwardRef(
+  (
+    {
+      copy = 'en',
+      segmentFontSize,
+      labelKey,
+      labelTokens,
+      number,
+      numberTokens,
+      segmentWidth = 2,
+      variant = {}
+    },
+    ref
+  ) => {
+    const getCopy = useCopy({ dictionary, copy })
+    const { label, large, feature } = variant
 
-  return (
-    <Container segmentFontSize={segmentFontSize} segmentWidth={segmentWidth} variant={variant}>
-      <StackView
-        direction={large || feature ? 'column' : 'row'}
-        space={large || feature ? 0 : 1}
-        tokens={{ alignItems: 'center' }}
+    return (
+      <Container
+        segmentFontSize={segmentFontSize}
+        segmentWidth={segmentWidth}
+        variant={variant}
+        ref={ref}
       >
-        <Typography tokens={numberTokens}>{pad(number, segmentWidth)}</Typography>
-        {label && (
-          <Typography tokens={labelTokens}>
-            {getCopy(number === 1 ? labelKey : `${labelKey}s`)}
-          </Typography>
-        )}
-      </StackView>
-    </Container>
-  )
-}
+        <StackView
+          direction={large || feature ? 'column' : 'row'}
+          space={large || feature ? 0 : 1}
+          tokens={{ alignItems: 'center' }}
+        >
+          <Typography tokens={numberTokens}>{pad(number, segmentWidth)}</Typography>
+          {label && (
+            <Typography tokens={labelTokens}>
+              {getCopy(number === 1 ? labelKey : `${labelKey}s`)}
+            </Typography>
+          )}
+        </StackView>
+      </Container>
+    )
+  }
+)
+
+Segment.displayName = 'Segment'
 
 Segment.propTypes = {
   /**

package/src/DatePicker/CalendarContainer.jsx

@@ -16,7 +16,7 @@ const CalendarContainer = styled.div(
   }) => `
   ${defaultReactDatesCss}
   > div {
-    z-index: 3;
+    z-index: 1000;
   }
   .SingleDatePicker,
   .SingleDatePickerInput {
@@ -30,7 +30,7 @@ const CalendarContainer = styled.div(
     padding: ${remainingTokens.singleDatePickerPaddingTopBottom}px ${
     remainingTokens.singleDatePickerLeftRight
   }px;
-    z-index: 3;
+    z-index: 1000;
   }
   .DateInput {
     width: 100%;