@telus-uds/components-web 3.3.0 → 4.0.0

package/src/Table/Row.jsx

@@ -1,13 +1,24 @@
 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: ${({ rowHoverBackgroundColor }) => rowHoverBackgroundColor} !important;
+  }
+`
+
 const Row = React.forwardRef(({ children }, ref) => {
+  const { themeTokens } = useTableContext()
+
   return (
-    <tr ref={ref}>
+    <StyledTR ref={ref} rowHoverBackgroundColor={themeTokens?.rowHoverBackgroundColor}>
       {React.Children.map(children, (child, index) =>
         React.cloneElement(child, { isFirstInRow: index === 0 })
       )}
-    </tr>
+    </StyledTR>
   )
 })
 

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',
@@ -96,12 +94,16 @@ const ExpandCollapse = React.forwardRef(
               return (
                 <ExpandCollapseControl ref={ref}>
                   <ExpandCollapseIconContainer tokens={getTokens()}>
-                    {/* Can use `Icon` instead of `IconButton` but `Icon` does not have required stylistic variants */}
+                    {/*
+                      Can use `Icon` instead of `IconButton` but `Icon` does not have required stylistic variants 
+                      Setting `accessibilityRole` to `none` for `IconButton` to render as a `div` instead of `button` to avoid nested `buttons`
+                    */}
                     <IconButton
                       variant={{ size: 'small' }}
                       tokens={iconTokens}
                       focusable={false}
                       accessibilityLabel={label}
+                      accessibilityRole="none"
                     />
                   </ExpandCollapseIconContainer>
                   <ExpandCollapseTitle tokens={getTokens()}>

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])
 

package/src/WebVideo/WebVideo.jsx

@@ -2,12 +2,11 @@ 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, styledComponents } from '../utils'
+import { htmlAttrs } from '../utils'
 import { triggerInProgressVideoIntervals, YoutubePlayerState } from './utils'
 
-const { styled } = styledComponents
-
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const StyledPlayerContainer = styled.div({
@@ -16,7 +15,7 @@ const StyledPlayerContainer = styled.div({
   outline: 'none'
 })
 
-const StyledYoutubePlayer = styled((props) => <YouTube {...props} />)({
+const StyledYoutubePlayer = styled(YouTube)({
   position: 'absolute',
   top: 0,
   left: 0,

package/src/baseExports.js

@@ -28,6 +28,7 @@ export {
   Divider,
   DownloadApp,
   ExpandCollapse,
+  ExpandCollapseMini,
   Feedback,
   FlexGrid,
   FileUpload,

package/src/index.js

@@ -9,7 +9,6 @@ export { default as Countdown } from './Countdown'
 export { default as DatePicker } from './DatePicker'
 export { default as Paragraph } from './Paragraph'
 export { default as Span } from './Span'
-export { default as ExpandCollapseMini } from './ExpandCollapseMini'
 export { default as Callout } from './Callout'
 export { default as PriceLockup } from './PriceLockup'
 export { default as Footnote } from './Footnote'
@@ -37,6 +36,6 @@ export { default as NavigationBar } from './NavigationBar'
 export { default as Progress } from './Progress'
 export { default as SkeletonProvider } from './SkeletonProvider'
 
-export { ssrStyles, styledComponents } from './utils'
+export { ssrStyles } from './utils'
 
 export * from './baseExports'

package/src/shared/FullBleedContent/FullBleedContent.jsx

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

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

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

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

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

package/src/shared/VideoSplash/VideoSplash.jsx

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

package/src/utils/index.js

@@ -8,7 +8,6 @@ import isElementFocusable from './isElementFocusable'
 import renderStructuredContent from './renderStructuredContent'
 import useOverlaidPosition from './useOverlaidPosition'
 import scrollToAnchor from './scrollToAnchor'
-import styledComponents from './theming/styled-components'
 
 export {
   deprecate,
@@ -22,6 +21,5 @@ export {
   ssrStyles,
   isElementFocusable,
   useOverlaidPosition,
-  scrollToAnchor,
-  styledComponents
+  scrollToAnchor
 }

package/src/utils/ssr.js

@@ -1,5 +1,5 @@
+import { ServerStyleSheet } from 'styled-components'
 import { ssrStyles as baseSsrStyles } from '@telus-uds/components-base'
-import styledComponents from './theming/styled-components'
 /**
  * Returns object with `renderApp` and `getStyles` functions.
  * Weave these into your app's server-side render process:
@@ -19,9 +19,9 @@ import styledComponents from './theming/styled-components'
  */
 const ssrStyles = (
   appName = 'Allium app',
-  { styleGetters = [], collectStyles = (renderedApp) => renderedApp } = {}
+  { styleGetters = [], collectStyles = (renderedApp) => renderedApp } = {},
+  router = 'pages'
 ) => {
-  const { ServerStyleSheet } = styledComponents
   const sheet = new ServerStyleSheet()
   const getStyledComponentsStyles = () => {
     const styles = sheet.getStyleElement()
@@ -29,6 +29,13 @@ const ssrStyles = (
     return styles
   }
 
+  if (router === 'app') {
+    return baseSsrStyles(appName, {
+      styleGetters: [...styleGetters],
+      collectStyles
+    })
+  }
+
   return baseSsrStyles(appName, {
     styleGetters: [getStyledComponentsStyles, ...styleGetters],
     collectStyles: (renderedApp) => collectStyles(sheet.collectStyles(renderedApp))

package/types/Callout.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentType, ElementType, ReactNode } from 'react'
-import type { HTMLAttrs, Variant } from './common'
+import type { HTMLAttrs, Tokens, Variant } from './common'
 
 export interface CalloutProps extends HTMLAttrs {
   children: ReactNode
@@ -7,6 +7,7 @@ export interface CalloutProps extends HTMLAttrs {
   icon?: ElementType
   verticalAlign?: 'top' | 'middle' | 'bottom'
   textAlignToFlex?: 'left' | 'center'
+  tokens?: Tokens
 }
 
 declare const Callout: ComponentType<CalloutProps>

package/types/Tooltip.d.ts

@@ -9,6 +9,7 @@ export interface TooltipProps extends A11yProps, ViewProps {
   copy?: CopyLang
   position?: TooltipPosition
   tokens?: Tokens
+  tooltipButtonTokens?: Tokens
   variant?: Variant
   onPress?: () => void
 }