@telus-uds/components-web 3.4.0 → 4.1.0

package/src/Paragraph/Paragraph.jsx

@@ -1,10 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { getTokensPropType, selectSystemProps } from '@telus-uds/components-base'
-
-import { htmlAttrs, useTypographyTheme, styledComponents } from '../utils'
-
-const { styled } = styledComponents
+import styled from 'styled-components'
+import { htmlAttrs, useTypographyTheme } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/PreviewCard/PreviewCard.jsx

@@ -17,15 +17,13 @@ import {
   useTheme,
   getTokensPropType
 } from '@telus-uds/components-base'
-import { styledComponents } from '../utils'
+import styled from 'styled-components'
 import FullBleedContent, {
   getFullBleedBorderRadius,
   useFullBleedContentProps
 } from '../shared/FullBleedContent'
 import AuthorDate from './AuthorDate'
 
-const { styled } = styledComponents
-
 // Passes React Native-oriented system props through UDS PressableCardBase
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,

package/src/PriceLockup/PriceLockup.jsx

@@ -7,15 +7,16 @@ import {
   Typography,
   useThemeTokens,
   useViewport,
-  getTokensPropType
+  getTokensPropType,
+  a11yProps
 } from '@telus-uds/components-base'
+import styled from 'styled-components'
 import FootnoteLink from '../Footnote/FootnoteLink'
 import getTypographyTokens from './tokens'
-import { htmlAttrs, warn, styledComponents } from '../utils'
+import { htmlAttrs, warn } from '../utils'
+import defaultDictionary from './dictionary'
 
-const { styled } = styledComponents
-
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, a11yProps])
 
 const PriceLockupContainer = styled.div`
   align-items: ${({ alignItemsText }) => alignItemsText};
@@ -23,12 +24,12 @@ const PriceLockupContainer = styled.div`
   flex-direction: column;
   width: fit-content;
 `
-
-const PriceContainer = styled.div`
+const PriceContainer = styled.div.attrs({
+  'aria-hidden': 'true'
+})`
   display: flex;
   margin-bottom: ${({ priceMarginBottom }) => priceMarginBottom};
 `
-
 const FootnoteContainer = styled.div`
   display: flex;
   margin-top: ${({ footnoteMarginTop }) => footnoteMarginTop};
@@ -44,7 +45,9 @@ const BottomLinksContainer = styled.div`
   margin-left: ${({ bottomLinksMarginLeft }) => bottomLinksMarginLeft};
 `
 
-const TopTextContainer = styled.div`
+const TopTextContainer = styled.div.attrs({
+  'aria-hidden': 'true'
+})`
   margin-bottom: ${({ topTextMarginBottom }) => topTextMarginBottom};
 `
 
@@ -120,6 +123,8 @@ const PriceLockup = React.forwardRef(
       a11yText,
       tokens: priceLockupTokens,
       variant = {},
+      copy = 'en',
+      dictionary = defaultDictionary,
       ...rest
     },
     ref
@@ -246,8 +251,35 @@ const PriceLockup = React.forwardRef(
       warn('PriceLockup', 'a11yText must be provided with strikethrough pricing')
     }
 
+    const getAriaContent = () => {
+      const { dictionaryPrice = price, priceWithCents, rate } = dictionary[copy]
+      let ariaLabel = hasCents
+        ? priceWithCents
+            .replace('%{amount}', amount)
+            .replace('%{cents}', cents)
+            .replace('%{currency}', currencySymbol)
+        : dictionaryPrice.replace('%{amount}', amount).replace('%{currency}', currencySymbol)
+
+      if (!ariaLabel.includes(currencySymbol)) {
+        ariaLabel = `${ariaLabel} ${currencySymbol}`
+      }
+
+      if (rateText) {
+        ariaLabel += ` ${rate.replace('%{rateText}', rateText.replace('/', ''))}`
+      }
+      return ariaLabel
+    }
+
+    const ariaLabel = selectProps(rest)['aria-label'] ?? getAriaContent()
+
     return (
-      <PriceLockupContainer {...selectProps(rest)} alignItemsText={alignItemsText} ref={ref}>
+      <PriceLockupContainer
+        {...selectProps(rest)}
+        alignItemsText={alignItemsText}
+        ref={ref}
+        role="group"
+        aria-label={ariaLabel}
+      >
         {topText && (
           <TopTextContainer topTextMarginBottom={`${topTextMarginBottom}px`}>
             {renderTypography(topText, typographyTokens.topText)}
@@ -269,6 +301,13 @@ const PriceLockup = React.forwardRef(
 
 PriceLockup.displayName = 'PriceLockup'
 
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = PropTypes.shape({
+  price: PropTypes.string.isRequired,
+  priceWithCents: PropTypes.string.isRequired,
+  rate: PropTypes.string.isRequired
+})
+
 PriceLockup.propTypes = {
   ...selectedSystemPropTypes,
   /**
@@ -323,6 +362,16 @@ PriceLockup.propTypes = {
    * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
    */
   a11yText: PropTypes.string,
+  /**
+   * Select English or French copy for the accessible label.
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+  /* Custom dictionary containing the labels
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
   /**
    * `PriceLockup` tokens
    */

package/src/PriceLockup/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    price: '%{amount} %{currency}',
+    priceWithCents: '%{amount} %{currency} and %{cents} cents',
+    rate: 'per %{rateText}'
+  },
+  fr: {
+    price: '%{amount} %{currency}',
+    priceWithCents: '%{amount} %{currency} et %{cents} centimes',
+    rate: 'par %{rateText}'
+  }
+}

package/src/Progress/ProgressBar.jsx

@@ -10,9 +10,7 @@ import {
   variantProp,
   applyShadowToken
 } from '@telus-uds/components-base'
-import { styledComponents } from '../utils'
-
-const { styled } = styledComponents
+import styled from 'styled-components'
 
 // Passes React Native-oriented system props through UDS Progress
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])

package/src/QuantitySelector/styles.js

@@ -1,6 +1,4 @@
-import { styledComponents } from '../utils'
-
-const { styled } = styledComponents
+import styled from 'styled-components'
 
 export const InputField = styled.div`
   order: 1;

package/src/Ribbon/Ribbon.jsx

@@ -6,9 +6,8 @@ import {
   useThemeTokens,
   getTokensPropType
 } from '@telus-uds/components-base'
-import { htmlAttrs, styledComponents } from '../utils'
-
-const { styled } = styledComponents
+import styled from 'styled-components'
+import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/Span/Span.jsx

@@ -1,10 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { getTokensPropType, selectSystemProps } from '@telus-uds/components-base'
-
-import { htmlAttrs, useTypographyTheme, styledComponents } from '../utils'
-
-const { styled } = styledComponents
+import styled from 'styled-components'
+import { htmlAttrs, useTypographyTheme } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/Spinner/Spinner.jsx

@@ -7,12 +7,11 @@ import {
   getTokensPropType
 } from '@telus-uds/components-base'
 import { Portal } from '@gorhom/portal'
+import styled from 'styled-components'
 import SpinnerContent from './SpinnerContent'
-import { htmlAttrs, media, styledComponents } from '../utils'
+import { htmlAttrs, media } from '../utils'
 import { BACKDROP_OPACITY, BACKDROP_Z_INDEX } from './constants'
 
-const { styled } = styledComponents
-
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const SpinnerContainer = styled.div(({ inline, fullScreen }) => ({

package/src/Spinner/SpinnerContent.jsx

@@ -6,11 +6,10 @@ import {
   Typography,
   selectSystemProps
 } from '@telus-uds/components-base'
-import { htmlAttrs, styledComponents } from '../utils'
+import styled from 'styled-components'
+import { htmlAttrs } from '../utils'
 import { BACKDROP_Z_INDEX, LARGE } from './constants'
 
-const { styled } = styledComponents
-
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const Container = styled.div(({ overlay }) => ({

package/src/StoryCard/StoryCard.jsx

@@ -18,14 +18,12 @@ import {
   useThemeTokensCallback,
   getTokensPropType
 } from '@telus-uds/components-base'
-import { styledComponents } from '../utils'
+import styled from 'styled-components'
 import FullBleedContent, {
   getFullBleedBorderRadius,
   useFullBleedContentProps
 } from '../shared/FullBleedContent'
 
-const { styled } = styledComponents
-
 // Passes React Native-oriented system props through UDS PressableCardBase
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,

package/src/Table/Cell.jsx

@@ -1,11 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Typography, useThemeTokens, applyShadowToken } from '@telus-uds/components-base'
-import { styledComponents } from '../utils'
+import styled, { css } from 'styled-components'
 import { useTableContext } from './Table'
 
-const { styled, css } = styledComponents
-
 const HEADER_TYPE = {
   HEADING: 'heading',
   SUBHEADING: 'subHeading',
@@ -41,6 +39,9 @@ const sharedStyles = css`
     cellPaddingRight,
     cellPaddingBottom,
     cellPaddingLeft,
+    cellBorderWidth,
+    cellBorderColor,
+    cellBorderTopWidth,
     cellMinWidth,
     cellBackground,
     cellStickyShadow,
@@ -52,6 +53,10 @@ const sharedStyles = css`
     padding: ${cellPaddingTop}px ${cellPaddingRight}px ${cellPaddingBottom}px ${cellPaddingLeft}px;
     background-color: ${cellBackground};
     ${isSticky && stickyStyles({ type, cellStickyShadow, stickyBackgroundColor })};
+    border-style: ${cellBorderWidth || cellBorderTopWidth ? 'solid' : 'none'};
+    border-color: ${cellBorderColor};
+    border-width: ${cellBorderWidth};
+    border-top-width: ${cellBorderTopWidth || cellBorderWidth};
   `}
 `
 const createStyledCell = (htmlElement) => styled[htmlElement]`
@@ -76,7 +81,8 @@ const Cell = React.forwardRef(
       text,
       isScrollable: isTableScrollable,
       tokens: tableTokens,
-      spacing
+      spacing,
+      variant
     } = useTableContext()
     const themeTokens = { ...tableTokens, ...cellTokens }
 
@@ -89,6 +95,9 @@ const Cell = React.forwardRef(
       cellPaddingRight,
       cellPaddingLeft,
       cellPaddingBottom,
+      cellBorderWidth,
+      cellBorderColor,
+      cellBorderTopWidth,
       fontName,
       fontWeight,
       fontSize,
@@ -96,7 +105,7 @@ const Cell = React.forwardRef(
       stickyBackgroundColor,
       fontColor,
       display
-    } = useThemeTokens('Table', themeTokens, { spacing, type, text })
+    } = useThemeTokens('Table', themeTokens, { spacing, type, text, ...variant })
 
     const sharedProps = {
       align,
@@ -108,6 +117,9 @@ const Cell = React.forwardRef(
       cellPaddingRight,
       cellPaddingLeft,
       cellPaddingBottom,
+      cellBorderWidth,
+      cellBorderColor,
+      cellBorderTopWidth,
       stickyBackgroundColor,
       cellBoxShadowColor,
       display,

package/src/Table/Row.jsx

@@ -1,19 +1,43 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { useTableContext } from './Table'
+
+const StyledTR = styled.tr`
+  &:hover {
+    background-color: ${({ tokens }) => tokens?.rowHoverBackgroundColor} !important;
+  }
+  border-style: ${({ tokens }) =>
+    tokens?.rowBorderWidth || tokens?.rowBorderTopWidth ? 'solid' : 'none'};
+  border-color: ${({ tokens }) => tokens?.rowBorderColor};
+  border-width: ${({ tokens }) => tokens?.rowBorderWidth || '0px'};
+  border-top-width: ${({ tokens }) => tokens?.rowBorderTopWidth || tokens?.rowBorderWidth};
+`
+
+const Row = React.forwardRef(({ children, tokens: rowTokens }, ref) => {
+  const { themeTokens } = useTableContext()
+  const mergedTokens = { ...themeTokens, ...rowTokens }
 
-const Row = React.forwardRef(({ children }, ref) => {
   return (
-    <tr ref={ref}>
+    <StyledTR ref={ref} tokens={mergedTokens}>
       {React.Children.map(children, (child, index) =>
         React.cloneElement(child, { isFirstInRow: index === 0 })
       )}
-    </tr>
+    </StyledTR>
   )
 })
 
 Row.displayName = 'Row'
 
 Row.propTypes = {
+  tokens: PropTypes.shape({
+    borderColor: PropTypes.string,
+    topBorderWidth: PropTypes.string,
+    bottomBorderWidth: PropTypes.string,
+    leftBorderWidth: PropTypes.string,
+    rightBorderWidth: PropTypes.string,
+    rowHoverBackgroundColor: PropTypes.string
+  }),
   children: PropTypes.node
 }
 

package/src/Table/Table.jsx

@@ -7,9 +7,8 @@ import {
   getTokensPropType
 } from '@telus-uds/components-base'
 import throttle from 'lodash.throttle'
-import { htmlAttrs, styledComponents } from '../utils'
-
-const { styled } = styledComponents
+import styled from 'styled-components'
+import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
@@ -52,7 +51,8 @@ const Table = ({
   variant,
   ...rest
 }) => {
-  const { tablePaddingBottom, borderColor, borderWidth } = useThemeTokens('Table', tokens, variant)
+  const themeTokens = useThemeTokens('Table', tokens, variant)
+  const { tablePaddingBottom, borderColor, borderWidth } = themeTokens
   const containerRef = React.useRef()
   const tableRef = React.useRef()
 
@@ -88,7 +88,16 @@ const Table = ({
       isScrollable={isScrollable}
       tablePaddingBottom={tablePaddingBottom}
     >
-      <TableContext.Provider value={{ text, isScrollable, tokens, spacing }}>
+      <TableContext.Provider
+        value={{
+          text,
+          isScrollable,
+          tokens,
+          spacing,
+          variant,
+          themeTokens
+        }}
+      >
         <StyledTable
           borderColor={borderColor}
           borderWidth={borderWidth}

package/src/TermsAndConditions/ExpandCollapse.jsx

@@ -5,9 +5,7 @@ import {
   IconButton,
   useThemeTokensCallback
 } from '@telus-uds/components-base'
-import { styledComponents } from '../utils'
-
-const { styled } = styledComponents
+import styled from 'styled-components'
 
 const ExpandCollapseControl = styled.div({
   alignItems: 'center',

package/src/TermsAndConditions/TermsAndConditions.jsx

@@ -14,13 +14,12 @@ import {
   createMediaQueryStyles,
   StyleSheet
 } from '@telus-uds/components-base'
+import styled from 'styled-components'
 import ExpandCollapse from './ExpandCollapse'
 import OrderedListBase from '../OrderedList/OrderedListBase'
-import { htmlAttrs, media, renderStructuredContent, styledComponents } from '../utils'
+import { htmlAttrs, media, renderStructuredContent } from '../utils'
 import defaultDictionary from './dictionary'
 
-const { styled } = styledComponents
-
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const ContentContainer = styled.div(({ tokens }) => ({

package/src/Testimonial/Testimonial.jsx

@@ -8,10 +8,9 @@ import {
   useViewport,
   getTokensPropType
 } from '@telus-uds/components-base'
+import styled from 'styled-components'
 import Image from '../Image'
-import { htmlAttrs, styledComponents } from '../utils'
-
-const { styled } = styledComponents
+import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/Toast/Toast.jsx

@@ -10,9 +10,8 @@ import {
   useViewport,
   getTokensPropType
 } from '@telus-uds/components-base'
-import { htmlAttrs, styledComponents } from '../utils'
-
-const { styled, css, keyframes } = styledComponents
+import styled, { css, keyframes } from 'styled-components'
+import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/Video/ControlBar/ControlBar.jsx

@@ -8,15 +8,13 @@ import {
   useViewport
 } from '@telus-uds/components-base'
 
+import styled from 'styled-components'
 import VideoProgressBar from './Controls/VideoProgressBar/VideoProgressBar'
 import VolumeSlider from './Controls/VolumeSlider/VolumeSlider'
 import VideoButton from './Controls/VideoButton/VideoButton'
 import VideoMenu from './Controls/VideoMenu/VideoMenu'
-
 import videoText from '../videoText'
-import { htmlAttrs, styledComponents } from '../../utils'
-
-const { styled } = styledComponents
+import { htmlAttrs } from '../../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/Video/ControlBar/Controls/VideoButton/VideoButton.jsx

@@ -1,10 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { useThemeTokens, selectSystemProps } from '@telus-uds/components-base'
-
-import { htmlAttrs, styledComponents } from '../../../../utils'
-
-const { styled } = styledComponents
+import styled from 'styled-components'
+import { htmlAttrs } from '../../../../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/Video/ControlBar/Controls/VideoMenu/VideoMenu.jsx

@@ -7,11 +7,9 @@ import {
   selectSystemProps,
   Icon
 } from '@telus-uds/components-base'
-
+import styled from 'styled-components'
 import videoText from '../../../videoText'
-import { htmlAttrs, styledComponents } from '../../../../utils'
-
-const { styled } = styledComponents
+import { htmlAttrs } from '../../../../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/Video/ControlBar/Controls/VideoProgressBar/VideoProgressBar.jsx

@@ -1,11 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Typography, useThemeTokens, selectSystemProps } from '@telus-uds/components-base'
-
+import styled from 'styled-components'
 import videoText from '../../../videoText'
-import { htmlAttrs, styledComponents } from '../../../../utils'
-
-const { styled } = styledComponents
+import { htmlAttrs } from '../../../../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/Video/ControlBar/Controls/VolumeSlider/VolumeSlider.jsx

@@ -1,12 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Icon, useThemeTokens, selectSystemProps } from '@telus-uds/components-base'
-
+import styled from 'styled-components'
 import VideoButton from '../VideoButton/VideoButton'
 import videoText from '../../../videoText'
-import { htmlAttrs, styledComponents } from '../../../../utils'
-
-const { styled } = styledComponents
+import { htmlAttrs } from '../../../../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/Video/MiddleControlButton/MiddleControlButton.jsx

@@ -1,10 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { useThemeTokens, selectSystemProps } from '@telus-uds/components-base'
-
-import { htmlAttrs, styledComponents } from '../../utils'
-
-const { styled } = styledComponents
+import styled from 'styled-components'
+import { htmlAttrs } from '../../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/Video/Video.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import fscreen from 'fscreen'
+import styled from 'styled-components'
 import {
   useThemeTokens,
   selectSystemProps,
@@ -8,15 +9,12 @@ import {
   variantProp
 } from '@telus-uds/components-base'
 import Spinner from '../Spinner'
-
-import { warn, htmlAttrs, styledComponents } from '../utils'
+import { warn, htmlAttrs } from '../utils'
 import VideoSplash from '../shared/VideoSplash/VideoSplash'
 import MiddleControlButton from './MiddleControlButton/MiddleControlButton'
 import ControlBar from './ControlBar/ControlBar'
 import videoText from './videoText'
 
-const { styled } = styledComponents
-
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 // TODO: replace with the actual spinner component from UDS

package/src/VideoPicker/VideoPicker.jsx

@@ -8,14 +8,12 @@ import {
   useViewport,
   getTokensPropType
 } from '@telus-uds/components-base'
-
+import styled, { css } from 'styled-components'
 import { VideoPropType } from './videoPropType'
 import VideoPickerThumbnail from './VideoPickerThumbnail'
 import VideoPickerPlayer from './VideoPickerPlayer'
 import VideoSlider from './VideoSlider'
-import { htmlAttrs, styledComponents } from '../utils'
-
-const { styled, css } = styledComponents
+import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/VideoPicker/VideoPickerThumbnail.jsx

@@ -9,13 +9,11 @@ import {
   horizontalScrollUtils,
   useThemeTokensCallback
 } from '@telus-uds/components-base'
-import { styledComponents } from '../utils'
+import styled from 'styled-components'
 import { getTimestamp } from '../shared/VideoSplash/helpers'
 import { VideoPropType, RefPropType } from './videoPropType'
 import VideoSplash from '../shared/VideoSplash/VideoSplash'
 
-const { styled } = styledComponents
-
 const { getItemPositionLayoutHandler, itemPositionsPropType } = horizontalScrollUtils
 
 // Use a React Native (web) outer container so it can take an onLayout callback, to

package/src/WaffleGrid/WaffleGrid.jsx

@@ -11,12 +11,11 @@ import {
   Typography,
   getTokensPropType
 } from '@telus-uds/components-base'
+import styled from 'styled-components'
 import OrderedListBase from '../OrderedList/OrderedListBase'
 import ItemBase from '../OrderedList/ItemBase'
 import Image from '../Image'
-import { htmlAttrs, styledComponents } from '../utils'
-
-const { styled } = styledComponents
+import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])