@telus-uds/components-web 4.19.0 → 5.0.0-alpha.0

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

@@ -2,7 +2,7 @@ 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 { videoText } from '../../../videoText'
 import { htmlAttrs } from '../../../../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
@@ -14,18 +14,18 @@ const ProgressBarContainer = styled.div({
 })
 
 const sharedStyles = ({
-  thumbHeight,
-  thumbWidth,
-  thumbBackground,
-  trackGradientStart,
-  trackGradientEnd
+  $thumbHeight,
+  $thumbWidth,
+  $thumbBackground,
+  $trackGradientStart,
+  $trackGradientEnd
 }) => ({
   thumb: {
     appearance: 'none',
-    height: thumbHeight,
-    width: thumbWidth,
+    height: $thumbHeight,
+    width: $thumbWidth,
     borderRadius: '50%',
-    background: thumbBackground,
+    background: $thumbBackground,
     cursor: 'pointer',
     marginTop: -3,
 
@@ -38,22 +38,22 @@ const sharedStyles = ({
     height: 2,
     cursor: 'pointer',
     borderRadius: 1.3,
-    background: `linear-gradient(to right, ${trackGradientStart} 0%,${trackGradientEnd} ${
+    background: `linear-gradient(to right, ${$trackGradientStart} 0%,${$trackGradientEnd} ${
       videoBufferDisplay - 0.01
     }% ,rgba(255,255,255,0.5) ${videoBufferDisplay}%)` // TODO: replace with opaque white from palette
   })
 })
 
-const StyledProgressBar = styled.input.attrs(({ videoCurrentTime }) => ({
-  value: videoCurrentTime
-}))(({ videoBufferDisplay, rangeBackground, ...sharedProps }) => ({
+const StyledProgressBar = styled.input.attrs(({ $videoCurrentTime }) => ({
+  value: $videoCurrentTime
+}))(({ $videoBufferDisplay, $rangeBackground, ...sharedProps }) => ({
   width: '100%',
   cursor: 'pointer',
   padding: '5px 0',
   'input[type=range]&': {
     appearance: 'none',
     width: '100%',
-    background: rangeBackground
+    background: $rangeBackground
   },
 
   'input[type=range]&:focus': {
@@ -72,24 +72,24 @@ const StyledProgressBar = styled.input.attrs(({ videoCurrentTime }) => ({
   },
 
   'input[type=range]&::-webkit-slider-runnable-track':
-    sharedStyles(sharedProps).track(videoBufferDisplay),
-  'input[type=range]&::-moz-range-track': sharedStyles(sharedProps).track(videoBufferDisplay),
+    sharedStyles(sharedProps).track($videoBufferDisplay),
+  'input[type=range]&::-moz-range-track': sharedStyles(sharedProps).track($videoBufferDisplay),
   'input[type=range]&::-ms-track': {
-    ...sharedStyles(sharedProps).track(videoBufferDisplay),
+    ...sharedStyles(sharedProps).track($videoBufferDisplay),
     margin: '6px 0',
     border: 'none'
   },
 
   'input[type=range]&::-ms-fill-lower': {
-    background: rangeBackground
+    background: $rangeBackground
   },
   'input[type=range]&::-ms-tooltip': {
     display: 'none'
   }
 }))
 
-const StyledTimestamp = styled.span(({ margin }) => ({
-  margin
+const StyledTimestamp = styled.span(({ $margin }) => ({
+  margin: $margin
 }))
 // TODO: unify with the helper from `VideoSplash`
 function getTimestamp(duration) {
@@ -99,7 +99,7 @@ function getTimestamp(duration) {
   return `${minutes}:${seconds < 10 ? 0 : ''}${seconds}`
 }
 
-const VideoProgressBar = ({
+export const VideoProgressBar = ({
   copy = 'en',
   videoLength,
   videoCurrentTime,
@@ -140,17 +140,16 @@ const VideoProgressBar = ({
   const remainingTimestamp = getTimestamp(remainingTime)
 
   const sharedProps = {
-    thumbWidth,
-    thumbHeight,
-    thumbBackground,
-    trackGradientStart,
-    trackGradientEnd,
-    rangeBackground
+    $thumbWidth: thumbWidth,
+    $thumbHeight: thumbHeight,
+    $thumbBackground: thumbBackground,
+    $trackGradientStart: trackGradientStart,
+    $trackGradientEnd: trackGradientEnd
   }
 
   return (
     <ProgressBarContainer {...selectProps(rest)}>
-      <StyledTimestamp margin={`0 ${timestampMarginRight}px 0 ${timestampMarginLeft}px`}>
+      <StyledTimestamp $margin={`0 ${timestampMarginRight}px 0 ${timestampMarginLeft}px`}>
         <Typography variant={{ inverse: true }}>{currentTimestamp}</Typography>
       </StyledTimestamp>
       <StyledProgressBar
@@ -158,16 +157,17 @@ const VideoProgressBar = ({
         type="range"
         step="any"
         max={videoLength}
-        videoCurrentTime={videoCurrentTime}
+        $videoCurrentTime={videoCurrentTime}
         onChange={handleVideoSkip}
         onFocus={resetInactivityTimer}
-        videoBufferDisplay={videoBufferDisplay}
+        $videoBufferDisplay={videoBufferDisplay}
+        $rangeBackground={rangeBackground}
         ref={videoProgressBar}
         tabIndex="-1"
         {...sharedProps}
       />
       <StyledTimestamp
-        margin={`0 ${remainingTimestampMarginRight}px 0 ${remainingTimestampMarginLeft}px`}
+        $margin={`0 ${remainingTimestampMarginRight}px 0 ${remainingTimestampMarginLeft}px`}
       >
         <Typography variant={{ inverse: true }}>{remainingTimestamp}</Typography>
       </StyledTimestamp>
@@ -184,5 +184,3 @@ VideoProgressBar.propTypes = {
   setSeek: PropTypes.func.isRequired,
   resetInactivityTimer: PropTypes.func.isRequired
 }
-
-export default VideoProgressBar

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

@@ -2,33 +2,35 @@ 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 { VideoButton } from '../VideoButton/VideoButton'
+import { videoText } from '../../../videoText'
 import { htmlAttrs } from '../../../../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const VolumeSliderContainer = styled.div(({ videoPlayerWidth, compactModeThreshold, margin }) => ({
-  display: 'flex',
-  width: videoPlayerWidth > compactModeThreshold ? '12%' : '20%',
-  maxWidth: 120,
-  margin,
-  alignItems: 'center'
-}))
+const VolumeSliderContainer = styled.div(
+  ({ $videoPlayerWidth, $compactModeThreshold, $margin }) => ({
+    display: 'flex',
+    width: $videoPlayerWidth > $compactModeThreshold ? '12%' : '20%',
+    maxWidth: 120,
+    margin: $margin,
+    alignItems: 'center'
+  })
+)
 
 const sharedStyles = ({
-  thumbHeight,
-  thumbWidth,
-  thumbBackground,
-  trackGradientStart,
-  trackGradientEnd
+  $thumbHeight,
+  $thumbWidth,
+  $thumbBackground,
+  $trackGradientStart,
+  $trackGradientEnd
 }) => ({
   thumb: {
     appearance: 'none',
-    height: thumbHeight,
-    width: thumbWidth,
+    height: $thumbHeight,
+    width: $thumbWidth,
     borderRadius: '50%',
-    background: thumbBackground,
+    background: $thumbBackground,
     cursor: 'pointer',
     marginTop: -3,
 
@@ -41,15 +43,15 @@ const sharedStyles = ({
     height: 2,
     cursor: 'pointer',
     borderRadius: 1.3,
-    background: `linear-gradient(to right, ${trackGradientStart} 0%, ${trackGradientEnd} ${
+    background: `linear-gradient(to right, ${$trackGradientStart} 0%, ${$trackGradientEnd} ${
       videoCurrentVolume * 100 - 0.01
     }%, rgba(255,255,255,0.5) ${videoCurrentVolume * 100}%)`
   })
 })
 
-const StyledVolumeSlider = styled.input.attrs(({ videoCurrentVolume }) => ({
-  value: videoCurrentVolume
-}))(({ videoCurrentVolume, rangeBackground, ...sharedProps }) => {
+const StyledVolumeSlider = styled.input.attrs(({ $videoCurrentVolume }) => ({
+  value: $videoCurrentVolume
+}))(({ $videoCurrentVolume, $rangeBackground, ...sharedProps }) => {
   return {
     width: '100%',
     cursor: 'pointer',
@@ -58,7 +60,7 @@ const StyledVolumeSlider = styled.input.attrs(({ videoCurrentVolume }) => ({
     'input[type=range]&': {
       appearance: 'none',
       width: '100%',
-      background: rangeBackground
+      background: $rangeBackground
     },
 
     'input[type=range]&:focus': {
@@ -67,20 +69,20 @@ const StyledVolumeSlider = styled.input.attrs(({ videoCurrentVolume }) => ({
 
     'input[type=range]&::-webkit-slider-thumb': sharedStyles(sharedProps).thumb,
     'input[type=range]&::-moz-range-thumb': {
-      ...sharedStyles.thumb,
+      ...sharedStyles(sharedProps).thumb,
       border: 'none'
     },
     'input[type=range]&::-ms-thumb': {
-      ...sharedStyles.thumb,
+      ...sharedStyles(sharedProps).thumb,
       margin: 0,
       border: 'none'
     },
 
     'input[type=range]&::-webkit-slider-runnable-track':
-      sharedStyles(sharedProps).track(videoCurrentVolume),
-    'input[type=range]&::-moz-range-track': sharedStyles(sharedProps).track(videoCurrentVolume),
+      sharedStyles(sharedProps).track($videoCurrentVolume),
+    'input[type=range]&::-moz-range-track': sharedStyles(sharedProps).track($videoCurrentVolume),
     'input[type=range]&::-ms-track': {
-      ...sharedStyles(sharedProps).track(videoCurrentVolume),
+      ...sharedStyles(sharedProps).track($videoCurrentVolume),
       margin: '6px 0',
       border: 'none'
     },
@@ -94,7 +96,7 @@ const StyledVolumeSlider = styled.input.attrs(({ videoCurrentVolume }) => ({
   }
 })
 
-const VolumeSlider = ({
+export const VolumeSlider = ({
   setVolume,
   compactModeThreshold,
   disableFocus,
@@ -124,21 +126,20 @@ const VolumeSlider = ({
   } = useThemeTokens('VideoVolumeSlider', tokens, variant)
 
   const sharedProps = {
-    thumbHeight,
-    thumbWidth,
-    thumbBackground,
-    trackGradientStart,
-    trackGradientEnd,
-    rangeBackground
+    $thumbHeight: thumbHeight,
+    $thumbWidth: thumbWidth,
+    $thumbBackground: thumbBackground,
+    $trackGradientStart: trackGradientStart,
+    $trackGradientEnd: trackGradientEnd
   }
 
   const handleVolumeChange = () => setVolume(refVolumeSlider.current.value)
 
   return (
     <VolumeSliderContainer
-      compactModeThreshold={compactModeThreshold}
-      videoPlayerWidth={videoPlayerWidth}
-      margin={`0 ${marginRight}px 0 ${marginLeft}px`}
+      $compactModeThreshold={compactModeThreshold}
+      $videoPlayerWidth={videoPlayerWidth}
+      $margin={`0 ${marginRight}px 0 ${marginLeft}px`}
       {...selectProps(rest)}
     >
       <VideoButton
@@ -154,7 +155,8 @@ const VolumeSlider = ({
         max="1"
         step="any"
         value={videoCurrentVolume}
-        videoCurrentVolume={videoCurrentVolume}
+        $videoCurrentVolume={videoCurrentVolume}
+        $rangeBackground={rangeBackground}
         ref={refVolumeSlider}
         onChange={handleVolumeChange}
         onFocus={resetInactivityTimer}
@@ -178,5 +180,3 @@ VolumeSlider.propTypes = {
   videoPlayerWidth: PropTypes.number.isRequired,
   disableFocus: PropTypes.bool.isRequired
 }
-
-export default VolumeSlider

package/src/Video/MiddleControlButton/MiddleControlButton.jsx

@@ -6,13 +6,13 @@ import { htmlAttrs } from '../../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const StyledMiddleControlButton = styled.button(({ isHidden, width, height, background }) => ({
-  width,
-  height,
+const StyledMiddleControlButton = styled.button(({ $isHidden, $width, $height, $background }) => ({
+  width: $width,
+  height: $height,
   borderRadius: '50%',
   transition: 'opacity 0.4s',
-  opacity: isHidden ? 0 : 1,
-  background,
+  opacity: $isHidden ? 0 : 1,
+  background: $background,
   display: 'flex',
   justifyContent: 'center',
   border: 'none',
@@ -22,7 +22,7 @@ const StyledMiddleControlButton = styled.button(({ isHidden, width, height, back
   alignItems: 'center'
 }))
 
-const MiddleControlButton = ({
+export const MiddleControlButton = ({
   icon: Icon,
   isHidden = false,
   onClick,
@@ -39,12 +39,12 @@ const MiddleControlButton = ({
 
   return (
     <StyledMiddleControlButton
-      isHidden={isHidden}
+      $isHidden={isHidden}
       onClick={onClick}
       onFocus={onFocus}
-      width={width}
-      height={height}
-      background={background}
+      $width={width}
+      $height={height}
+      $background={background}
       {...selectProps(rest)}
     >
       <Icon color={iconColor} size={24} />
@@ -59,5 +59,3 @@ MiddleControlButton.propTypes = {
   onClick: PropTypes.func,
   onFocus: PropTypes.func
 }
-
-export default MiddleControlButton