@telus-uds/components-web 3.2.0 → 3.3.0

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

package/src/utils/index.js

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

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:
@@ -21,6 +21,7 @@ const ssrStyles = (
   appName = 'Allium app',
   { styleGetters = [], collectStyles = (renderedApp) => renderedApp } = {}
 ) => {
+  const { ServerStyleSheet } = styledComponents
   const sheet = new ServerStyleSheet()
   const getStyledComponentsStyles = () => {
     const styles = sheet.getStyleElement()

package/src/utils/theming/styled-components.js

@@ -0,0 +1,23 @@
+/**
+ * Currently, `styled` is only available as the default export in `styled-components`.
+ * In transpiled/CommonJS environments, that works as expected, but it breaks server-side ESM usage of `styled-components`.
+ *
+ * To make `styled-components` work server-side, instead of:
+ *
+ *  import styled from 'styled-components';
+ *
+ * We must write:
+ *
+ *  import styledWrapper from 'styled-components';
+ *  const styled = styledWrapper.default;
+ *
+ * This approach is confusing and not a viable option for code that should run in both browser and server.
+ */
+
+import _styled, { css, keyframes, createGlobalStyle, ServerStyleSheet } from 'styled-components'
+
+const styled = typeof _styled === 'function' ? _styled : _styled.default
+
+const styledComponents = { styled, css, keyframes, createGlobalStyle, ServerStyleSheet }
+
+export default styledComponents

package/types/common.d.ts

@@ -154,7 +154,7 @@ export interface PressableState {
 }
 
 // TODO: Make this more specific:
-// https://telus.com/universal-design-system/components/allium/skeleton/#props
+// https://telus.com/universal-design-system/components/allium/Skeleton/#props
 export type SkeletonProps = Record<string, any>
 
 export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'