@telus-uds/components-web 3.3.0 → 4.0.0

package/src/Badge/Badge.jsx

@@ -6,17 +6,18 @@ import {
   getTokensPropType,
   useThemeTokens
 } from '@telus-uds/components-base'
-import { htmlAttrs, transformGradient, styledComponents } from '../utils'
+import styled from 'styled-components'
+import { htmlAttrs, transformGradient } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const { styled } = styledComponents
-
 const BadgeContainer = styled.div`
   background: ${({ background }) => background};
   border: ${({ border }) => border};
   display: inline-flex;
   justify-content: center;
+  align-items: center;
+  height: fit-content;
   padding: ${({ padding }) => padding};
   border-radius: ${({ radius }) => radius};
   width: fit-content;

package/src/BlockQuote/BlockQuote.jsx

@@ -14,12 +14,11 @@ import {
   getTokensPropType,
   StyleSheet
 } from '@telus-uds/components-base'
-import { htmlAttrs, transformGradient, styledComponents } from '../utils'
+import styled from 'styled-components'
+import { htmlAttrs, transformGradient } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const { styled } = styledComponents
-
 const BlockQuoteContainer = styled.blockquote`
   margin: 0;
   position: relative;

package/src/Breadcrumbs/Breadcrumbs.jsx

@@ -13,13 +13,12 @@ import {
   useThemeTokens,
   useViewport
 } from '@telus-uds/components-base'
-import { htmlAttrs, styledComponents } from '../utils'
+import styled from 'styled-components'
+import { htmlAttrs } from '../utils'
 import Item from './Item/Item'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const { styled } = styledComponents
-
 const StyledList = styled.ol({
   display: 'flex',
   flexDirection: 'row',

package/src/Breadcrumbs/Item/Item.jsx

@@ -8,12 +8,11 @@ import {
   selectSystemProps,
   useThemeTokens
 } from '@telus-uds/components-base'
-import { htmlAttrs, styledComponents } from '../../utils'
+import styled from 'styled-components'
+import { htmlAttrs } from '../../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const { styled } = styledComponents
-
 const StyledItemContainer = styled.li({
   display: 'inline-block',
   paddingLeft: ({ listItemPadding }) => `${listItemPadding}px`,

package/src/Callout/Callout.jsx

@@ -7,13 +7,11 @@ import {
   useThemeTokens,
   getTokensPropType
 } from '@telus-uds/components-base'
-
-import { htmlAttrs, styledComponents } from '../utils'
+import styled from 'styled-components'
+import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const { styled } = styledComponents
-
 const getAlignment = (rounded, textAlignToFlex) => {
   if (textAlignToFlex) {
     switch (textAlignToFlex) {

package/src/Card/Card.jsx

@@ -15,7 +15,7 @@ import {
   PressableCardBase,
   useResponsiveProp
 } from '@telus-uds/components-base'
-import { styledComponents } from '../utils'
+import styled from 'styled-components'
 import CardContent from './CardContent'
 import CardFooter from './CardFooter'
 import FullBleedContent, {
@@ -27,8 +27,6 @@ import ConditionalWrapper from '../shared/ConditionalWrapper'
 // Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const { styled } = styledComponents
-
 /**
  * A basic card component, unstyled by default.
  *

package/src/Card/CardContent.jsx

@@ -7,12 +7,11 @@ import {
   useViewport,
   variantProp
 } from '@telus-uds/components-base'
-import { htmlAttrs, styledComponents } from '../utils'
+import styled from 'styled-components'
+import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const { styled } = styledComponents
-
 const CardContentContainer = styled.div(
   ({
     borderRadius,

package/src/Card/CardFooter.jsx

@@ -8,12 +8,11 @@ import {
   useViewport,
   variantProp
 } from '@telus-uds/components-base'
-import { htmlAttrs, styledComponents } from '../utils'
+import styled from 'styled-components'
+import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const { styled } = styledComponents
-
 const CardFooterContainer = styled.div(
   ({ backgroundColor, borderRadius, paddingBottom, paddingLeft, paddingRight, paddingTop }) => ({
     backgroundColor,

package/src/Countdown/Countdown.jsx

@@ -15,16 +15,20 @@ import {
   StyleSheet
 } from '@telus-uds/components-base'
 import { viewports } from '@telus-uds/system-constants'
+import styled from 'styled-components'
 // Reading these from the RN palette since they will be used to generate
 // the `Typography` tokens
-import { htmlAttrs, transformGradient, styledComponents } from '../utils'
+import { htmlAttrs, transformGradient } from '../utils'
 import Segment from './Segment'
 import useCountdown from './useCountdown'
 import { countdownVariantPropType, dictionaryContentShape } from './types'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+const DAYS = 'days'
+const HOURS = 'hours'
+const MINUTES = 'minutes'
+const SECONDS = 'seconds'
 
-const { styled } = styledComponents
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const Container = styled.div(({ variant: { feature, inverse, large }, themeTokens, gradient }) => ({
   ...(large || feature ? { display: 'flex', flex: 0 } : {}),
@@ -69,13 +73,20 @@ const getMainTextTokens = ({
 })
 
 const Countdown = React.forwardRef(
-  ({ copy = 'en', targetTime, tokens, variant = {}, ...rest }, ref) => {
+  (
+    {
+      copy = 'en',
+      targetTime,
+      tokens,
+      variant = {},
+      units = [DAYS, HOURS, MINUTES, SECONDS],
+      ...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 { feature, large, noDivider } = variant
 
     const { themeOptions } = useTheme()
 
@@ -190,33 +201,43 @@ const Countdown = React.forwardRef(
         media={containerMediaIds}
       >
         <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)}
-          />
+          {units.map((unit, index) => {
+            let number
+            let labelKey
+            switch (unit) {
+              case DAYS:
+                number = days
+                labelKey = 'day'
+                break
+              case HOURS:
+                number = hours
+                labelKey = 'hour'
+                break
+              case MINUTES:
+                number = minutes
+                labelKey = 'minute'
+                break
+              case SECONDS:
+                number = seconds
+                labelKey = 'second'
+                break
+              default:
+                return null
+            }
+
+            return (
+              <React.Fragment key={unit}>
+                <Segment
+                  labelKey={labelKey}
+                  number={number}
+                  {...(unit === DAYS && { segmentWidth: String(number).length })}
+                  {...segmentProps}
+                  {...applyTextStyles(themeTokens)}
+                />
+                {index < units.length - 1 && divider}
+              </React.Fragment>
+            )
+          })}
         </StackView>
       </Container>
     )
@@ -237,7 +258,12 @@ Countdown.propTypes = {
    * representing a point in the future to count down to.
    */
   targetTime: PropTypes.instanceOf(Date),
-  variant: countdownVariantPropType
+  variant: countdownVariantPropType,
+  /**
+   * An array of strings representing the units to display in the countdown.
+   * Possible values: `'days'`, `'hours'`, `'minutes'`, `'seconds'`
+   */
+  units: PropTypes.arrayOf(PropTypes.oneOf([DAYS, HOURS, MINUTES, SECONDS]))
 }
 
 export default Countdown

package/src/Countdown/Segment.jsx

@@ -1,14 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { StackView, Typography, useCopy } from '@telus-uds/components-base'
-import { styledComponents } from '../utils'
+import styled from 'styled-components'
 import dictionary from './dictionary'
 import { countdownVariantPropType, dictionaryContentShape } from './types'
 // !TODO: put this back
 import { SEGMENT_WIDTH_TO_FONT_SIZE_RATIO } from './constants'
 
-const { styled } = styledComponents
-
 // Pads with zeros on the left if it's a single digit number
 const pad = (number, segmentWidth = 2) => String(number).padStart(segmentWidth, '0')
 

package/src/DatePicker/CalendarContainer.jsx

@@ -1,11 +1,9 @@
-import { styledComponents } from '../utils'
+import styled from 'styled-components'
 import defaultReactDatesCss from './reactDatesCss'
 
 // calendarDayDefaultHeight and calendarDayDefaultWidth
 // refer to circle size when selected, focused, or hovered and is passed  with getResponsiveCircleSize in DatePicker
 
-const { styled } = styledComponents
-
 const CalendarContainer = styled.div(
   ({
     daySize,

package/src/DatePicker/DatePicker.jsx

@@ -15,13 +15,12 @@ import {
   getTokensPropType,
   useSafeLayoutEffect
 } from '@telus-uds/components-base'
+import styled from 'styled-components'
 import moment from 'moment'
 import { isUndefined, throttle } from 'lodash'
 import CalendarContainer from './CalendarContainer'
 import dictionary from './dictionary'
-import { htmlAttrs, styledComponents } from '../utils'
-
-const { styled } = styledComponents
+import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/DatePicker/reactDatesCss.js

@@ -1,6 +1,4 @@
-import { styledComponents } from '../utils'
-
-const { css } = styledComponents
+import { css } from 'styled-components'
 
 const defaultReactDatesCss = css`
   .PresetDateRangePicker_panel {

package/src/Disclaimer/Disclaimer.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/Footnote/Footnote.jsx

@@ -12,22 +12,14 @@ import {
   useViewport,
   getTokensPropType
 } from '@telus-uds/components-base'
-
+import styled, { createGlobalStyle } from 'styled-components'
 import OrderedListBase from '../OrderedList/OrderedListBase'
-import {
-  htmlAttrs,
-  media,
-  renderStructuredContent,
-  isElementFocusable,
-  styledComponents
-} from '../utils'
+import { htmlAttrs, media, renderStructuredContent, isElementFocusable } from '../utils'
 import defaultDictionary from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 const viewportBreakpoint = 1440
 
-const { styled, createGlobalStyle } = styledComponents
-
 const GlobalBodyScrollLock = createGlobalStyle({
   'html, body': media().until('md').css({ overflow: 'hidden' })
 })

package/src/Footnote/FootnoteLink.jsx

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

package/src/NavigationBar/NavigationBar.jsx

@@ -9,13 +9,12 @@ import {
   useResponsiveProp,
   withLinkRouter
 } from '@telus-uds/components-base'
-import { htmlAttrs, scrollToAnchor, styledComponents } from '../utils'
+import styled from 'styled-components'
+import { htmlAttrs, scrollToAnchor } from '../utils'
 import NavigationItem from './NavigationItem'
 import NavigationSubMenu from './NavigationSubMenu'
 import collapseItems from './collapseItems'
 
-const { styled } = styledComponents
-
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const Heading = styled.div({

package/src/NavigationBar/NavigationItem.jsx

@@ -8,9 +8,8 @@ import {
   useThemeTokensCallback,
   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/OrderedList/Item.jsx

@@ -10,12 +10,11 @@ import {
   useThemeTokens,
   wrapStringsInText
 } from '@telus-uds/components-base'
+import styled from 'styled-components'
 import ItemBase from './ItemBase'
-import { htmlAttrs, styledComponents } from '../utils'
+import { htmlAttrs } from '../utils'
 import { OL_COUNTER_NAME } from './constants'
 
-const { styled } = styledComponents
-
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const selectItemTextStyles = (

package/src/OrderedList/ItemBase.jsx

@@ -1,8 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { styledComponents } from '../utils'
-
-const { styled } = styledComponents
+import styled from 'styled-components'
 
 const StyledItem = styled.li({
   display: 'flex'

package/src/OrderedList/OrderedList.jsx

@@ -1,13 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { getTokensPropType, selectSystemProps, variantProp } from '@telus-uds/components-base'
-import { htmlAttrs, styledComponents } from '../utils'
+import styled from 'styled-components'
+import { htmlAttrs } from '../utils'
 import OrderedListBase from './OrderedListBase'
 import Item from './Item'
 import { OL_COUNTER_NAME } from './constants'
 
-const { styled } = styledComponents
-
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const StyledOrderedListBase = styled(OrderedListBase)(({ start }) => ({

package/src/OrderedList/OrderedListBase.jsx

@@ -1,10 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { styledComponents } from '../utils'
+import styled from 'styled-components'
 import ItemBase from './ItemBase'
 
-const { styled } = styledComponents
-
 const StyledList = styled.ol({
   display: 'flex',
   flexDirection: 'column',

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

@@ -9,11 +9,10 @@ import {
   useViewport,
   getTokensPropType
 } 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'
-
-const { styled } = styledComponents
+import { htmlAttrs, warn } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

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',
@@ -76,7 +74,8 @@ const Cell = React.forwardRef(
       text,
       isScrollable: isTableScrollable,
       tokens: tableTokens,
-      spacing
+      spacing,
+      variant
     } = useTableContext()
     const themeTokens = { ...tableTokens, ...cellTokens }
 
@@ -96,7 +95,7 @@ const Cell = React.forwardRef(
       stickyBackgroundColor,
       fontColor,
       display
-    } = useThemeTokens('Table', themeTokens, { spacing, type, text })
+    } = useThemeTokens('Table', themeTokens, { spacing, type, text, ...variant })
 
     const sharedProps = {
       align,