@telus-uds/components-web 1.9.0 → 1.11.0

package/src/Toast/Toast.jsx

@@ -67,11 +67,16 @@ const animation = (props) => css`
     animation: ${transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter)}
       1s ease-in-out 3s forwards;
   }
+  & > a div {
+    animation: ${transform('color')(props.animationFillColorBefore, props.animationFillColorAfter)}
+      1s ease-in-out 3s forwards;
+  }
 `
 
 const ToastContainer = styled.div`
   display: flex;
   justify-content: center;
+  align-items: center;
   background: ${({ containerBackgroundColor }) => containerBackgroundColor};
   gap: ${({ containerGap }) => containerGap};
   height: 0;
@@ -92,11 +97,13 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
     animationBackgroundColorBefore,
     animationBackgroundColorAfter,
     animationColorBefore,
-    animationColorAfter,
-    animationFillColorBefore,
-    animationFillColorAfter
+    animationColorAfter
   } = useThemeTokens('Toast', tokens, variant)
 
+  // inherit ChevronLink tokens for animation colors
+  const { color: chevronDefaultColor } = useThemeTokens('ChevronLink', {}, {})
+  const { color: chevronInverseColor } = useThemeTokens('ChevronLink', {}, { inverse: true })
+
   if (!toast) {
     return null
   }
@@ -115,8 +122,8 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
       animationBackgroundColorAfter={animationBackgroundColorAfter}
       animationColorBefore={animationColorBefore}
       animationColorAfter={animationColorAfter}
-      animationFillColorBefore={animationFillColorBefore}
-      animationFillColorAfter={animationFillColorAfter}
+      animationFillColorBefore={chevronInverseColor}
+      animationFillColorAfter={chevronDefaultColor}
       {...selectProps(rest)}
     >
       {headline && <Typography variant={{ bold: true, inverse: true }}>{headline}</Typography>}

package/src/VideoPicker/VideoPicker.jsx

@@ -0,0 +1,144 @@
+import React, { useState, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+import { viewports } from '@telus-uds/system-constants'
+import {
+  selectSystemProps,
+  StackView,
+  useThemeTokens,
+  useViewport
+} 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'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const framedContainerStyles = ({
+  framedContainerBackgroundColor,
+  framedContainerBorderWidth,
+  framedContainerBorderColor,
+  framedContainerBorderRadius,
+  framedMaxHeight
+}) => css`
+  background-color: ${framedContainerBackgroundColor};
+  border: ${framedContainerBorderWidth}px solid ${framedContainerBorderColor};
+  border-radius: ${framedContainerBorderRadius}px;
+
+  & > div {
+    max-height: ${framedMaxHeight}px;
+  }
+`
+
+const VideoPickerContainer = styled.div`
+  ${({ isFramed, ...tokens }) => isFramed && framedContainerStyles(tokens)}
+`
+
+const framedPlayerContainerStyles = ({ framedMaxHeight, framedContainerPadding }) => css`
+  width: 66.67%;
+  padding: ${framedContainerPadding}px;
+  max-height: ${framedMaxHeight}px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+`
+
+const VideoPlayerContainer = styled.div`
+  ${({ isFramed, ...tokens }) => isFramed && framedPlayerContainerStyles(tokens)}
+  overflow: auto;
+`
+
+const framedVideoListContainerStyle = css`
+  max-height: ${({ framedMaxHeight }) => framedMaxHeight}px;
+  overflow: auto;
+  flex-direction: column;
+`
+
+const VideoListContainer = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  position: relative;
+  flex-grow: 1;
+  flex-direction: column;
+  ${(props) => props.isFramed && framedVideoListContainerStyle}
+`
+
+const VideoPicker = ({ videoList = [], selectedVideo = videoList[0]?.videoId, frame, ...rest }) => {
+  const viewport = useViewport()
+  const { stackViewDividerColor, ...themeTokens } = useThemeTokens('VideoPicker')
+  const [currentVideoId, setCurrentVideoId] = useState(selectedVideo)
+  const videoPlayerRef = useRef(null)
+
+  const currentVideo = videoList.find((video) => video.videoId === currentVideoId)
+  useEffect(() => {
+    // Update current video if parent changes which video id it passes down
+    setCurrentVideoId(selectedVideo)
+  }, [selectedVideo])
+
+  // `frame` variant should only work on larger screens
+  const isFramed = frame && [viewports.md, viewports.lg, viewports.xl].includes(viewport)
+
+  const hasSlider = !frame && [viewports.md, viewports.lg, viewports.xl].includes(viewport)
+
+  const listElements = videoList.map((video, index) => (
+    <VideoPickerThumbnail
+      key={video.videoId}
+      video={video}
+      videoPlayerRef={videoPlayerRef}
+      selectedVideoId={currentVideoId}
+      onSelectVideo={(current) => setCurrentVideoId(current.videoId)}
+      layout={!hasSlider ? 'horizontal' : 'vertical'}
+      index={index}
+      isFramed={isFramed}
+    />
+  ))
+
+  return (
+    <VideoPickerContainer isFramed={isFramed} {...selectProps(rest)} {...themeTokens}>
+      <StackView
+        divider={
+          isFramed
+            ? { tokens: { color: stackViewDividerColor } }
+            : { variant: { decorative: true } }
+        }
+        space={isFramed ? 0 : 4} // everything has internal padding in `frame` variant
+        direction={isFramed ? 'row' : 'column'}
+      >
+        <VideoPlayerContainer {...themeTokens} isFramed={isFramed}>
+          <VideoPickerPlayer video={currentVideo} videoPlayerRef={videoPlayerRef} />
+        </VideoPlayerContainer>
+        {hasSlider ? (
+          <VideoSlider>{listElements}</VideoSlider>
+        ) : (
+          <VideoListContainer
+            viewport={viewport}
+            data-testid="video-list-container"
+            isFramed={isFramed}
+          >
+            {listElements}
+          </VideoListContainer>
+        )}
+      </StackView>
+    </VideoPickerContainer>
+  )
+}
+
+VideoPicker.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Id of the currently selected video (defaults to the first video if not set).
+   */
+  selectedVideo: PropTypes.string,
+  /**
+   * An array of Video objects.
+   */
+  videoList: PropTypes.arrayOf(VideoPropType),
+  /**
+   * Use to display the picker in a container and the playlist as a sidebar (only available for breakpoints LG and larger)
+   */
+  frame: PropTypes.bool
+}
+
+export default VideoPicker

package/src/VideoPicker/VideoPickerPlayer.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { StackView, Typography } from '@telus-uds/components-base'
+import WebVideo from '../WebVideo/WebVideo'
+import { VideoPropType, RefPropType } from './videoPropType'
+
+const VideoPickerPlayer = ({ video = {}, videoPlayerRef }) => (
+  <StackView space={3} tokens={{ flexShrink: 1 }}>
+    <div ref={videoPlayerRef}>{video.videoId && <WebVideo {...video} />}</div>
+    <StackView space={2}>
+      <Typography variant={{ size: 'h2', colour: 'secondary' }}>{video.title}</Typography>
+      <Typography>{video.description}</Typography>
+    </StackView>
+  </StackView>
+)
+
+VideoPickerPlayer.propTypes = {
+  video: VideoPropType,
+  videoPlayerRef: RefPropType
+}
+
+export default VideoPickerPlayer

package/src/VideoPicker/VideoPickerThumbnail.jsx

@@ -0,0 +1,182 @@
+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,
+  useViewport,
+  horizontalScrollUtils,
+  useThemeTokens
+} from '@telus-uds/components-base'
+import { getTimestamp } from '../shared/VideoSplash/helpers'
+import { VideoPropType, RefPropType } from './videoPropType'
+import VideoSplash from '../shared/VideoSplash/VideoSplash'
+
+const { getItemPositionLayoutHandler, itemPositionsPropType } = horizontalScrollUtils
+
+// Use a React Native (web) outer container so it can take an onLayout callback, to
+// access position in VideoSlider's UDS HorizontalScroll and update its itemPositions
+const createReactNativeStyles = ({
+  pressablePaddingBottom,
+  pressablePaddingVertical,
+  pressablePaddingHorizontal,
+  pressableBorderTopWidth,
+  pressableBorderTopColor
+}) =>
+  StyleSheet.create({
+    container: {
+      cursor: 'pointer'
+    },
+    horizontal: {
+      paddingBottom: pressablePaddingBottom
+    },
+    framed: {
+      paddingVertical: pressablePaddingVertical,
+      paddingHorizontal: pressablePaddingHorizontal
+    },
+    framedLine: {
+      borderTopWidth: pressableBorderTopWidth,
+      borderTopColor: pressableBorderTopColor
+    }
+  })
+
+const VideoThumbnail = styled.div`
+  position: relative;
+  width: ${(props) => (props.layout === 'vertical' ? '100%' : '144px')};
+  flex-shrink: 0;
+
+  * button {
+    display: none;
+  }
+
+  // use a pseudo-element to ensure aspect ratio
+  &::before {
+    content: '';
+    display: block;
+    padding-bottom: 56.25%;
+  }
+
+  &::after {
+    content: '';
+    border: ${({ borderWidth }) => borderWidth}px solid;
+    border-color: ${({ isPlaying, borderColor }) => (isPlaying ? borderColor : 'transparent')};
+    border-radius: ${({ borderRadius }) => borderRadius}px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  & > div {
+    border-radius: ${({ borderRadius }) => borderRadius}px;
+  }
+`
+
+const ThumbnailTitleContainer = styled.div`
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`
+
+const VideoPickerThumbnail = ({
+  videoPlayerRef,
+  selectedVideoId,
+  video,
+  onSelectVideo,
+  layout = 'vertical',
+  isFramed,
+  itemPositions,
+  index,
+  width = '100%'
+}) => {
+  const viewport = useViewport()
+  const { titleColor, subTitleColor, ...themeTokens } = useThemeTokens('VideoPickerThumbnail')
+
+  const rnStyles = createReactNativeStyles(themeTokens)
+  const { timestamp } = getTimestamp(video.videoLength, video.copy)
+  const isPlaying = selectedVideoId === video.videoId
+
+  const renderThumbnailImage = () => (
+    <VideoThumbnail {...themeTokens} isPlaying={isPlaying} layout={layout}>
+      <VideoSplash
+        simpleMode
+        poster={video.posterSrc || `https://img.youtube.com/vi/${video.videoId}/maxresdefault.jpg`}
+        videoLength={video.videoLength}
+        copy={video.copy}
+      />
+    </VideoThumbnail>
+  )
+
+  const renderThumbnailInfo = () => (
+    <StackView space={2} tokens={{ flexShrink: 1 }}>
+      <ThumbnailTitleContainer viewport={viewport}>
+        <Typography variant={{ bold: true }} tokens={{ color: isPlaying ? titleColor : 'none' }}>
+          {video.title}
+        </Typography>
+      </ThumbnailTitleContainer>
+      {viewport !== viewports.xs && (
+        <Typography variant={{ size: 'micro' }} tokens={{ color: subTitleColor }}>
+          {timestamp}
+        </Typography>
+      )}
+    </StackView>
+  )
+
+  const handleLayout =
+    itemPositions !== undefined
+      ? getItemPositionLayoutHandler(itemPositions.positions, index)
+      : undefined
+
+  const onKeyPress = (event) => {
+    if (['Space', 'Enter'].includes(event.key)) {
+      onSelectVideo(video)
+      const splashButton = videoPlayerRef.current?.querySelector('button')
+      if (splashButton) splashButton.focus()
+    }
+  }
+
+  return (
+    <Pressable
+      key={video.videoId}
+      onLayout={handleLayout}
+      onPress={() => onSelectVideo(video)}
+      testID={`thumbnail-container-${video.videoId}`}
+      onKeyPress={onKeyPress}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: isPlaying }}
+      style={[
+        rnStyles.container,
+        layout === 'horizontal' && rnStyles.horizontal,
+        isFramed && rnStyles.framed,
+        isFramed && index > 0 && rnStyles.framedLine,
+        { width }
+      ]}
+    >
+      <StackView
+        space={layout === 'vertical' ? 2 : 3}
+        direction={layout === 'vertical' ? 'column' : 'row'}
+      >
+        {renderThumbnailImage()}
+        {renderThumbnailInfo()}
+      </StackView>
+    </Pressable>
+  )
+}
+
+VideoPickerThumbnail.propTypes = {
+  selectedVideoId: PropTypes.string,
+  onSelectVideo: PropTypes.func,
+  video: VideoPropType,
+  videoPlayerRef: RefPropType,
+  layout: PropTypes.oneOf(['vertical', 'horizontal']),
+  isFramed: PropTypes.bool,
+  itemPositions: itemPositionsPropType,
+  index: PropTypes.number,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+}
+
+export default VideoPickerThumbnail

package/src/VideoPicker/VideoSlider.jsx

@@ -0,0 +1,85 @@
+import React, { cloneElement, useState } from 'react'
+import {
+  HorizontalScroll,
+  HorizontalScrollButton,
+  horizontalScrollUtils,
+  StackView,
+  useThemeTokens,
+  useViewport
+} from '@telus-uds/components-base'
+import { View } from 'react-native-web'
+import PropTypes from 'prop-types'
+
+const { useItemPositions } = horizontalScrollUtils
+
+const VideoSlider = ({ children }) => {
+  const viewport = useViewport()
+  const [itemPositions] = useItemPositions()
+  const [containerWidth, setContainerWidth] = useState(null)
+  const { previousIcon: PreviousIcon, nextIcon: NextIcon } = useThemeTokens('VideoPickerSlider')
+
+  const onLayout = ({
+    nativeEvent: {
+      layout: { width }
+    }
+  }) => {
+    setContainerWidth(width)
+  }
+
+  const itemsGap = 24 // '4' on spacing scale
+  const itemsCount = viewport === 'lg' || viewport === 'xl' ? 4 : 3
+  const itemGapPortioned = ((itemsCount - 1) * itemsGap) / itemsCount
+  const itemWidth =
+    containerWidth === null
+      ? // For first render, we don't know container width, so avoid flicker with static % width
+        `calc(${Math.round(100 / itemsCount)}% - ${Math.round(itemGapPortioned)}px)`
+      : // After first render, can't use % widths because parent is > 100% width horizontal scroll area
+        Math.max(
+          containerWidth / itemsCount - itemGapPortioned,
+          0 // Prevent negative width breaking layout on very narrow containers
+        )
+
+  const content = (
+    <StackView space={4} direction="row" accessibilityRole="radiogroup" tokens={{ flexGrow: 1 }}>
+      {React.Children.map(children, (child, index) =>
+        cloneElement(child, {
+          index,
+          itemPositions,
+          width: itemWidth
+        })
+      )}
+    </StackView>
+  )
+
+  const overflow = containerWidth === null && { overflow: 'hidden' }
+  const horizontalScrollTokens = {
+    nextIcon: NextIcon,
+    previousIcon: PreviousIcon,
+    gutter: 0,
+    borderBottomWidth: 0,
+    borderBottomColor: 'transparent',
+    buttonClearance: 0
+  }
+  return (
+    <View onLayout={onLayout} style={overflow}>
+      {containerWidth === null ? (
+        // Use a 100% width non-scrollable parent until containerWidth is known, to avoid flicker
+        content
+      ) : (
+        <HorizontalScroll
+          ScrollButton={HorizontalScrollButton}
+          itemPositions={itemPositions}
+          tokens={horizontalScrollTokens}
+        >
+          {content}
+        </HorizontalScroll>
+      )}
+    </View>
+  )
+}
+
+VideoSlider.propTypes = {
+  children: PropTypes.node
+}
+
+export default VideoSlider

package/src/VideoPicker/index.js

@@ -0,0 +1,3 @@
+import VideoPicker from './VideoPicker'
+
+export default VideoPicker

package/src/VideoPicker/videoPropType.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types'
+import { VideoProps } from '../WebVideo/WebVideo'
+
+export const VideoPropType = PropTypes.shape({
+  ...VideoProps,
+  title: PropTypes.string,
+  description: PropTypes.string
+})
+
+export const RefPropType = PropTypes.shape({
+  current: PropTypes.object
+})

package/src/index.js

@@ -27,9 +27,13 @@ export { default as WebVideo } from './WebVideo'
 export { default as WaffleGrid } from './WaffleGrid'
 export { default as Spinner } from './Spinner'
 export { default as Listbox } from './Listbox'
+export { default as VideoPicker } from './VideoPicker'
 export { default as Video } from './Video'
 export { default as StoryCard } from './StoryCard'
+export { default as Disclaimer } from './Disclaimer'
 export { default as Card } from './Card'
 export { default as TermsAndConditions } from './TermsAndConditions'
+export { default as NavigationBar } from './NavigationBar'
+export { default as Progress } from './Progress'
 
 export * from './baseExports'