@telus-uds/components-web 3.2.0 → 3.2.1

package/src/Footnote/FootnoteLink.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import {
   applyTextStyles,
   selectSystemProps,
@@ -9,7 +8,9 @@ import {
   variantProp
 } from '@telus-uds/components-base'
 import dictionary from './dictionary'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
+
+const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/NavigationBar/NavigationBar.jsx

@@ -9,12 +9,13 @@ import {
   useResponsiveProp,
   withLinkRouter
 } from '@telus-uds/components-base'
-import styled from 'styled-components'
-import { htmlAttrs, scrollToAnchor } from '../utils'
+import { htmlAttrs, scrollToAnchor, styledComponents } 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,8 +8,9 @@ import {
   useThemeTokensCallback,
   getTokensPropType
 } from '@telus-uds/components-base'
-import styled from 'styled-components'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
+
+const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/OrderedList/Item.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import {
   applyTextStyles,
   getTokensPropType,
@@ -12,9 +11,11 @@ import {
   wrapStringsInText
 } from '@telus-uds/components-base'
 import ItemBase from './ItemBase'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
 import { OL_COUNTER_NAME } from './constants'
 
+const { styled } = styledComponents
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const selectItemTextStyles = (
@@ -70,7 +71,7 @@ const StyledItemBase = styled(ItemBase)(
 const ItemContent = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  gap: 5
+  gap: 0
 })
 
 const Item = React.forwardRef(

package/src/OrderedList/ItemBase.jsx

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

package/src/OrderedList/OrderedList.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import { getTokensPropType, selectSystemProps, variantProp } from '@telus-uds/components-base'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } 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,8 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
+import { styledComponents } from '../utils'
 import ItemBase from './ItemBase'
 
+const { styled } = styledComponents
+
 const StyledList = styled.ol({
   display: 'flex',
   flexDirection: 'column',

package/src/Paragraph/Paragraph.jsx

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

package/src/PreviewCard/PreviewCard.jsx

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

package/src/Progress/ProgressBar.jsx

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

package/src/QuantitySelector/styles.js

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

package/src/Ribbon/Ribbon.jsx

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

package/src/Span/Span.jsx

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

package/src/Spinner/Spinner.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import {
   selectSystemProps,
   useScrollBlocking,
@@ -9,9 +8,11 @@ import {
 } from '@telus-uds/components-base'
 import { Portal } from '@gorhom/portal'
 import SpinnerContent from './SpinnerContent'
-import { htmlAttrs, media } from '../utils'
+import { htmlAttrs, media, styledComponents } 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

@@ -1,15 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import {
   ActivityIndicator,
   StackView,
   Typography,
   selectSystemProps
 } from '@telus-uds/components-base'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } 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,12 +18,14 @@ import {
   useThemeTokensCallback,
   getTokensPropType
 } from '@telus-uds/components-base'
-import styled from 'styled-components'
+import { styledComponents } from '../utils'
 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,9 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled, { css } from 'styled-components'
 import { Typography, useThemeTokens, applyShadowToken } from '@telus-uds/components-base'
+import { styledComponents } from '../utils'
 import { useTableContext } from './Table'
 
+const { styled, css } = styledComponents
+
 const HEADER_TYPE = {
   HEADING: 'heading',
   SUBHEADING: 'subHeading',

package/src/Table/Table.jsx

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

package/src/TermsAndConditions/ExpandCollapse.jsx

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

package/src/TermsAndConditions/TermsAndConditions.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import {
   Box,
   Divider,
@@ -17,9 +16,11 @@ import {
 } from '@telus-uds/components-base'
 import ExpandCollapse from './ExpandCollapse'
 import OrderedListBase from '../OrderedList/OrderedListBase'
-import { htmlAttrs, media, renderStructuredContent } from '../utils'
+import { htmlAttrs, media, renderStructuredContent, styledComponents } from '../utils'
 import defaultDictionary from './dictionary'
 
+const { styled } = styledComponents
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const ContentContainer = styled.div(({ tokens }) => ({

package/src/Testimonial/Testimonial.jsx

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

package/src/Toast/Toast.jsx

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

package/src/Video/ControlBar/ControlBar.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
-
 import {
   StackView,
   useThemeTokens,
@@ -16,7 +14,9 @@ import VideoButton from './Controls/VideoButton/VideoButton'
 import VideoMenu from './Controls/VideoMenu/VideoMenu'
 
 import videoText from '../videoText'
-import { htmlAttrs } from '../../utils'
+import { htmlAttrs, styledComponents } from '../../utils'
+
+const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

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

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

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

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

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

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

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

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

package/src/Video/MiddleControlButton/MiddleControlButton.jsx

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

package/src/Video/Video.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import fscreen from 'fscreen'
 import {
   useThemeTokens,
@@ -10,12 +9,14 @@ import {
 } from '@telus-uds/components-base'
 import Spinner from '../Spinner'
 
-import { warn, htmlAttrs } from '../utils'
+import { warn, htmlAttrs, styledComponents } 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

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

package/src/VideoPicker/VideoPickerThumbnail.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { Pressable, StyleSheet } from 'react-native-web'
 import PropTypes from 'prop-types'
 import { viewports } from '@telus-uds/system-constants'
-import styled from 'styled-components'
 import {
   StackView,
   Typography,
@@ -10,10 +9,13 @@ import {
   horizontalScrollUtils,
   useThemeTokensCallback
 } from '@telus-uds/components-base'
+import { styledComponents } from '../utils'
 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

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import {
   Link,
   responsiveProps,
@@ -15,7 +14,9 @@ import {
 import OrderedListBase from '../OrderedList/OrderedListBase'
 import ItemBase from '../OrderedList/ItemBase'
 import Image from '../Image'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
+
+const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/WebVideo/WebVideo.jsx

@@ -2,11 +2,12 @@ import { selectSystemProps } from '@telus-uds/components-base'
 import PropTypes from 'prop-types'
 import React from 'react'
 import YouTube from 'react-youtube'
-import styled from 'styled-components'
 import VideoSplash from '../shared/VideoSplash/VideoSplash'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
 import { triggerInProgressVideoIntervals, YoutubePlayerState } from './utils'
 
+const { styled } = styledComponents
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const StyledPlayerContainer = styled.div({
@@ -15,7 +16,7 @@ const StyledPlayerContainer = styled.div({
   outline: 'none'
 })
 
-const StyledYoutubePlayer = styled(YouTube)({
+const StyledYoutubePlayer = styled((props) => <YouTube {...props} />)({
   position: 'absolute',
   top: 0,
   left: 0,

package/src/index.js

@@ -37,6 +37,6 @@ export { default as NavigationBar } from './NavigationBar'
 export { default as Progress } from './Progress'
 export { default as SkeletonProvider } from './SkeletonProvider'
 
-export { ssrStyles } from './utils'
+export { ssrStyles, styledComponents } from './utils'
 
 export * from './baseExports'

package/src/shared/FullBleedContent/FullBleedContent.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
-
+import { styledComponents } from '../../utils'
 import ResponsiveImage from '../../ResponsiveImage'
 
+const { styled } = styledComponents
+
 const selectFullBleedContentProps = ({
   alt,
   height,

package/src/shared/VideoSplash/SplashButton/SplashButton.jsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import { useThemeTokens } from '@telus-uds/components-base'
+import { styledComponents } from '../../../utils'
 import { getAriaLabel, getTimestamp } from '../helpers'
 
+const { styled } = styledComponents
+
 const ButtonContainer = styled.button({
   background: 'none',
   border: 0,

package/src/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.jsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
-
 import { Typography, useThemeTokens } from '@telus-uds/components-base'
+import { styledComponents } from '../../../utils'
+
 import { getAriaLabel, getTimestamp } from '../helpers'
 
+const { styled } = styledComponents
+
 const ButtonContainer = styled.button({
   background: 'none',
   border: 0,

package/src/shared/VideoSplash/VideoSplash.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import { selectSystemProps, useViewport } from '@telus-uds/components-base'
 import { viewports } from '@telus-uds/system-constants'
 import SplashButton from './SplashButton/SplashButton'
 import SplashButtonWithDetails from './SplashButtonWithDetails/SplashButtonWithDetails'
 import videoText from '../../Video/videoText'
-import { htmlAttrs } from '../../utils'
+import { htmlAttrs, styledComponents } from '../../utils'
+
+const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])