@telus-uds/components-web 1.8.0 → 1.9.0

package/src/Video/index.js

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

package/src/Video/videoText.js

@@ -0,0 +1,58 @@
+const videoText = {
+  en: {
+    videoPlayer:
+      'Press the space bar or K to toggle play and pause. Use the left and right arrow keys or the comma and period keys to scrub through the video. Use the up and down arrow keys, the dash and equal keys, or the add and subtract number pad keys to increase and decrease volume. Press M to toggle mute. Press F to toggle fullscreen. Press escape to exit instructions and return to video.',
+    videoSelected: 'Video selected. Press Q to listen to controls.',
+    videoSelectedSimple: 'Video selected. Press the space bar or K to toggle play and pause.',
+    mute: 'Mute',
+    unmute: 'Unmute',
+    watch: 'Watch the video',
+    replay: 'Replay the video',
+    itemSelected: 'This is the currently selected option.',
+    itemUnselected: 'Select to switch to this option.',
+    captionsToggle: 'Select captions',
+    captionsDialogue: 'Captions',
+    captionsNone: 'None',
+    qualityToggle: 'Change video quality',
+    qualityDialogue: 'Quality',
+    fullScreenToggle: 'Toggle fullscreen',
+    minute: 'minute',
+    minutes: 'minutes',
+    second: 'second',
+    seconds: 'seconds',
+    ariaLabel: 'Play video. Video length is {minutes} and {seconds}.',
+    volumeSliderLabel: 'Adjust the volume',
+    videoProgressBarLabel: 'Progress bar',
+    en: 'English',
+    fr: 'French'
+  },
+  fr: {
+    videoPlayer:
+      'Appuyer sur K pour basculer entre lecture et pause. Utiliser les flèches gauche et droite ou les touches virgule et point pour reculer ou faire une avance rapide dans la vidéo. Utiliser les flèches ascendante et descendante, les touches tiret et égal ou les touches plus et moins du clavier numérique pour contrôler le volume. Appuyer sur la touche M pour désactiver le son. Appuyer sur F pour basculer en mode plein écran. Appuyer sur la touche d’échappement pour quitter les instructions et retourner à la vidéo.',
+    videoSelected: 'Vidéo sélectionnée. Appuyer sur Q pour écouter les contrôles',
+    videoSelectedSimple: 'Vidéo sélectionnée. Appuyer sur K pour basculer entre lecture et pause.',
+    mute: 'Désactiver le son',
+    unmute: 'Activer le son',
+    watch: 'Voir la vidéo',
+    replay: 'Relire la vidéo',
+    itemSelected: 'Cette option est déjà sélectionnée.',
+    itemUnselected: 'Sélectionner pour basculer à cette option.',
+    captionsToggle: 'Sélectionner les sous-titres',
+    captionsDialogue: 'Sous-titres',
+    captionsNone: 'Aucun',
+    qualityToggle: 'Modifier la qualité de la vidéo',
+    qualityDialogue: 'Qualité',
+    fullScreenToggle: 'Basculer en mode plein écran',
+    minute: 'minute',
+    minutes: 'minutes',
+    second: 'seconde',
+    seconds: 'secondes',
+    ariaLabel: 'Lire la vidéo. La durée de la vidéo est de {minutes} et {seconds}.',
+    volumeSliderLabel: 'Réglez le volume',
+    videoProgressBarLabel: 'Barre de progression',
+    en: 'Anglais',
+    fr: 'Français'
+  }
+}
+
+export default videoText

package/src/WebVideo/WebVideo.jsx

@@ -0,0 +1,131 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import YouTube from 'react-youtube'
+import { selectSystemProps } from '@telus-uds/components-base'
+import VideoSplash from '../shared/VideoSplash/VideoSplash'
+import { htmlAttrs } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const StyledPlayerContainer = styled.div({
+  width: '100%',
+  minWidth: 288,
+  outline: 'none'
+})
+
+const StyledYoutubePlayer = styled(YouTube)({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+})
+
+const aspectRatios = {
+  '16:9': { paddingTop: '56.25%' },
+  '4:3': { paddingTop: '75%' },
+  '1:1': { paddingTop: '100%' }
+}
+
+const AspectLimiter = styled.div((props) => ({
+  ...aspectRatios[props.aspectRatio],
+  position: 'relative'
+}))
+
+const WebVideo = ({
+  videoId,
+  aspectRatio = '16:9',
+  posterSrc,
+  defaultVolume = 1,
+  beginMuted = false,
+  videoLength,
+  copy,
+  onStart = () => {},
+  ...rest
+}) => {
+  const [started, setStarted] = useState(false)
+
+  const initializeYoutubePlayer = (event) => {
+    onStart()
+
+    if (beginMuted) {
+      event.target.mute()
+    }
+
+    event.target.setVolume(defaultVolume)
+    event.target.playVideo() // This plays the video after passing the splash screen on mobile.
+  }
+
+  return (
+    <StyledPlayerContainer data-testid="web-video-container" {...selectProps(rest)}>
+      <AspectLimiter aspectRatio={aspectRatio}>
+        {started ? (
+          <StyledYoutubePlayer
+            videoId={videoId}
+            opts={{
+              width: '100%',
+              height: '100%',
+              playerVars: {
+                autoplay: 1,
+                modestbranding: 1,
+                playsinline: 1,
+                rel: 0
+              }
+            }}
+            onReady={initializeYoutubePlayer}
+          />
+        ) : (
+          <VideoSplash
+            poster={posterSrc || `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`}
+            videoLength={videoLength}
+            copy={copy}
+            onClick={() => {
+              setStarted(true)
+            }}
+          />
+        )}
+      </AspectLimiter>
+    </StyledPlayerContainer>
+  )
+}
+
+export const VideoProps = {
+  ...selectedSystemPropTypes,
+  /**
+   * The video's ID, typically available via the video's URL.
+   */
+  videoId: PropTypes.string.isRequired,
+  /**
+   * The aspect ratio of the player.
+   */
+  aspectRatio: PropTypes.oneOf(['16:9', '4:3', '1:1']),
+  /**
+   * A path of the image that will be displayed on the video's splash screen. If this is undefined, it will pull an image from the defined web video if available.
+   */
+  posterSrc: PropTypes.string,
+  /**
+   * The video's default volume, defined from 1 to 100. Please use the `beginMuted` prop to have the video start silenced.
+   */
+  defaultVolume: PropTypes.number,
+  /**
+   * Defines if the video should start muted.
+   */
+  beginMuted: PropTypes.bool,
+  /**
+   * The video's length, which will be displayed on the splash screen. This is defined in seconds.
+   */
+  videoLength: PropTypes.number.isRequired,
+  /**
+   * The splash screen UI's language as an ISO language code. It currently supports English and French.
+   */
+  copy: PropTypes.oneOf(['en', 'fr']).isRequired,
+  /**
+   * A function to be run when the play button is pressed on the video splash screen and the video is ready to play.
+   */
+  onStart: PropTypes.func
+}
+
+WebVideo.propTypes = VideoProps
+
+export default WebVideo

package/src/WebVideo/index.js

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

package/src/baseExports.js

@@ -17,7 +17,6 @@ export {
   ButtonGroup,
   ButtonLink,
   Carousel,
-  Card,
   CarouselTabs,
   Checkbox,
   CheckboxGroup,

package/src/index.js

@@ -1,9 +1,11 @@
+export { default as Autocomplete } from './Autocomplete'
 export { default as Badge } from './Badge'
 export { default as Modal } from './Modal'
 export { default as OrderedList } from './OrderedList'
 export { default as PreviewCard } from './PreviewCard'
 export { default as ResponsiveImage } from './ResponsiveImage'
 export { default as Ribbon } from './Ribbon'
+export { default as Countdown } from './Countdown'
 export { default as DatePicker } from './DatePicker'
 export { default as Paragraph } from './Paragraph'
 export { default as Span } from './Span'
@@ -11,15 +13,23 @@ export { default as ExpandCollapseMini } from './ExpandCollapseMini'
 export { default as Callout } from './Callout'
 export { default as PriceLockup } from './PriceLockup'
 export { default as Footnote } from './Footnote'
+export { default as QuantitySelector } from './QuantitySelector'
 export { default as IconButton } from './IconButton'
 export { transformGradient } from './utils'
 export { default as Breadcrumbs } from './Breadcrumbs'
 export { default as BlockQuote } from './BlockQuote'
+export { default as OptimizeImage } from './OptimizeImage'
+export { default as Testimonial } from './Testimonial'
 export { default as Toast } from './Toast'
 export { default as Table } from './Table'
 export { default as Image } from './Image'
+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 Video } from './Video'
+export { default as StoryCard } from './StoryCard'
+export { default as Card } from './Card'
+export { default as TermsAndConditions } from './TermsAndConditions'
 
 export * from './baseExports'

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

@@ -0,0 +1,64 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { useThemeTokens } from '@telus-uds/components-base'
+import { getAriaLabel, getTimestamp } from '../helpers'
+
+const ButtonContainer = styled.button({
+  background: 'none',
+  border: 0,
+  padding: 0,
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  cursor: 'pointer'
+})
+
+const ButtonContent = styled.div({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 64,
+  height: 64,
+  background: ({ buttonContentBackground }) => buttonContentBackground ?? 'none',
+  borderRadius: '100%',
+  transition: 'background 0.2s ease-in-out',
+  [`${ButtonContainer}:hover &`]: {
+    background: ({ buttonContentChildrenBackground }) => buttonContentChildrenBackground
+  }
+})
+
+const SplashButton = ({ copy, tokens, variant, videoLength }) => {
+  const { buttonContentChildrenBackground } = useThemeTokens('SplashButton', tokens, variant, {
+    hover: true
+  })
+  const {
+    playIcon: PlayIcon,
+    playIconColor,
+    ...themeTokens
+  } = useThemeTokens('SplashButton', tokens, variant)
+  const ariaLabel = getAriaLabel(getTimestamp(videoLength), copy)
+
+  return (
+    <ButtonContainer aria-label={ariaLabel}>
+      <ButtonContent
+        {...themeTokens}
+        buttonContentChildrenBackground={buttonContentChildrenBackground}
+      >
+        <PlayIcon size={27} color={playIconColor} />
+      </ButtonContent>
+    </ButtonContainer>
+  )
+}
+
+SplashButton.propTypes = {
+  videoLength: PropTypes.number,
+  tokens: PropTypes.object,
+  variant: PropTypes.object,
+  copy: PropTypes.oneOf(['en', 'fr'])
+}
+
+export default SplashButton

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

@@ -0,0 +1,128 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+
+import { Typography, useThemeTokens } from '@telus-uds/components-base'
+import { getAriaLabel, getTimestamp } from '../helpers'
+
+const ButtonContainer = styled.button({
+  background: 'none',
+  border: 0,
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  padding: 0,
+  cursor: 'pointer'
+})
+
+const ButtonContent = styled.div({
+  background: ({ buttonBackground }) => buttonBackground,
+  border: ({ buttonBorderColor }) => `1px solid ${buttonBorderColor}`,
+  borderRadius: ({ buttonRadius }) => `${buttonRadius}px`,
+  position: 'absolute',
+  left: ({ buttonLeftPosition }) => `${buttonLeftPosition}px`,
+  bottom: ({ buttonBottomPosition }) => `${buttonBottomPosition}px`,
+  boxSizing: 'border-box',
+  display: 'flex',
+  alignItems: 'center',
+  minHeight: ({ buttonMinHeight }) => `${buttonMinHeight}px`,
+  paddingRight: ({ buttonPaddingLeft }) => `${buttonPaddingLeft}px`,
+  paddingLeft: ({ buttonPaddingRight }) => `${buttonPaddingRight}px`,
+  transition: 'background 0.2s ease-in-out',
+
+  [`${ButtonContainer}:hover &`]: {
+    background: ({ buttonContentChildrenBackground }) => buttonContentChildrenBackground
+  }
+})
+
+const PlayIconContainer = styled.div({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 32,
+  height: 32,
+  background: ({ playIconContainerBackground }) => playIconContainerBackground ?? 'none',
+  borderRadius: '100%',
+  transition: 'background 0.2s ease-in-out'
+})
+
+const DetailsContainer = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  paddingLeft: ({ detailsContainerPadding }) => `${detailsContainerPadding}px`
+})
+
+const selectPlayIconContainerTokens = ({ playIconContainerBackground }) => ({
+  playIconContainerBackground
+})
+const selectDetailsContainerTokens = ({ detailsContainerPadding }) => ({ detailsContainerPadding })
+const selectButtonContentTokens = ({
+  buttonBackground,
+  buttonBorderColor,
+  buttonRadius,
+  buttonLeftPosition,
+  buttonBottomPosition,
+  buttonMinHeight,
+  buttonPaddingLeft,
+  buttonPaddingRight
+}) => ({
+  buttonBackground,
+  buttonBorderColor,
+  buttonRadius,
+  buttonLeftPosition,
+  buttonBottomPosition,
+  buttonMinHeight,
+  buttonPaddingLeft,
+  buttonPaddingRight
+})
+
+const SplashButtonWithDetails = ({ label, tokens, variant, copy, videoLength }) => {
+  const { buttonContentChildrenBackground } = useThemeTokens(
+    'SplashButtonWithDetails',
+    tokens,
+    variant,
+    { hover: true }
+  )
+  const {
+    playIcon: PlayIcon,
+    playIconColor,
+    ...themeTokens
+  } = useThemeTokens('SplashButtonWithDetails', tokens, variant)
+  const mappedVideoLength = getTimestamp(videoLength, copy)
+  const ariaLabel = getAriaLabel(mappedVideoLength, copy)
+
+  return (
+    <ButtonContainer aria-label={ariaLabel}>
+      <ButtonContent
+        {...selectButtonContentTokens(themeTokens)}
+        buttonContentChildrenBackground={buttonContentChildrenBackground}
+      >
+        <PlayIconContainer {...selectPlayIconContainerTokens(themeTokens)}>
+          <PlayIcon size={13} color={playIconColor} />
+        </PlayIconContainer>
+        <DetailsContainer {...selectDetailsContainerTokens(themeTokens)}>
+          <Typography variant={{ bold: true }}>{label}</Typography>
+          <Typography
+            variant={{
+              colour: 'secondary' /* TODO: this is not the same color as in designs */,
+              size: 'micro'
+            }}
+          >
+            {mappedVideoLength.timestamp}
+          </Typography>
+        </DetailsContainer>
+      </ButtonContent>
+    </ButtonContainer>
+  )
+}
+
+SplashButtonWithDetails.propTypes = {
+  label: PropTypes.string,
+  tokens: PropTypes.object,
+  variant: PropTypes.object,
+  videoLength: PropTypes.number,
+  copy: PropTypes.oneOf(['en', 'fr'])
+}
+
+export default SplashButtonWithDetails

package/src/shared/VideoSplash/VideoSplash.jsx

@@ -0,0 +1,50 @@
+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'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const SplashBackground = styled.div(({ videoPoster }) => ({
+  backgroundImage: `url(${videoPoster})`,
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+  position: 'absolute',
+  top: 0,
+  width: '100%',
+  height: '100%', // fixes vertical alignment on IE 11
+  cursor: 'pointer'
+}))
+
+const VideoSplash = ({ poster, videoLength, simpleMode, copy = 'en', onClick, ...rest }) => {
+  const viewport = useViewport()
+
+  const showDetails = !simpleMode && viewport !== viewports.xs
+  const label = videoText[copy].watch
+
+  return (
+    <SplashBackground {...selectProps(rest)} onClick={onClick} videoPoster={poster}>
+      {showDetails ? (
+        <SplashButtonWithDetails videoLength={videoLength} copy={copy} label={label} />
+      ) : (
+        <SplashButton videoLength={videoLength} copy={copy} />
+      )}
+    </SplashBackground>
+  )
+}
+
+VideoSplash.propTypes = {
+  ...selectedSystemPropTypes,
+  onClick: PropTypes.func,
+  poster: PropTypes.string,
+  videoLength: PropTypes.number.isRequired,
+  simpleMode: PropTypes.bool,
+  copy: PropTypes.oneOf(['en', 'fr'])
+}
+
+export default VideoSplash

package/src/shared/VideoSplash/helpers.js

@@ -0,0 +1,27 @@
+import videoText from '../../Video/videoText'
+
+export const getTimestamp = (videoLength, copy) => {
+  const minutes = Math.floor(videoLength / 60)
+  const seconds = Math.ceil(videoLength % 60)
+
+  const minutesText = minutes > 0 ? `${minutes}min ` : ''
+  const secondsText = `${seconds}${copy === 'fr' ? 's' : 'sec'}`
+  const timestamp = `${minutesText}${secondsText}`
+
+  return {
+    minutes,
+    seconds,
+    timestamp
+  }
+}
+
+export const getAriaLabel = (timestamp, copy) => {
+  const { minutes, seconds } = timestamp
+
+  const text = videoText[copy]
+
+  const minutesText = `${minutes} ${minutes !== 1 ? text.minutes : text.minute}`
+  const secondsText = `${seconds} ${seconds !== 1 ? text.seconds : text.second}`
+
+  return text.ariaLabel.replace('{minutes}', minutesText).replace('{seconds}', secondsText)
+}

package/src/utils/index.js

@@ -4,5 +4,14 @@ import htmlAttrs from './htmlAttrs'
 import { warn } from './logger'
 import media from './media'
 import renderStructuredContent from './renderStructuredContent'
+import useOverlaidPosition from './useOverlaidPosition'
 
-export { htmlAttrs, transformGradient, useTypographyTheme, warn, media, renderStructuredContent }
+export {
+  htmlAttrs,
+  transformGradient,
+  useTypographyTheme,
+  warn,
+  media,
+  renderStructuredContent,
+  useOverlaidPosition
+}

package/types/Autocomplete.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentType, ReactElement, ReactNode } from 'react'
+import type { HTMLAttrs, InputSupportsProps, TextInputProps, TextInputHandlerProps } from './common'
+
+interface AutocompleteCommonProps
+  extends HTMLAttrs,
+    InputSupportsProps,
+    TextInputProps,
+    TextInputHandlerProps {}
+
+interface AutocompleteChildrenProps extends AutocompleteCommonProps {
+  inputId?: string
+  inputRef?: any
+}
+
+export interface AutocompleteItem {
+  id: string
+  label: string
+}
+
+export interface AutocompleteProps extends AutocompleteCommonProps {
+  children?: (props: AutocompleteChildrenProps) => ReactElement
+  isLoading?: boolean
+  items?: AutocompleteItem[]
+  loadingLabel?: string
+  minToSuggestion?: number
+  maxSuggestions?: number
+  noResults?: ReactNode
+}
+
+declare const Autocomplete: ComponentType<AutocompleteProps>
+
+export default Autocomplete

package/types/Card.d.ts

@@ -0,0 +1,45 @@
+import type { ComponentType, ReactNode } from 'react'
+import type { HTMLAttrs, Variant } from './common'
+
+type FooterPadding = {
+  paddingBottom?: number
+  paddingLeft?: number
+  paddingRight?: number
+  paddingTop?: number
+}
+
+type BorderRadius = {
+  borderBottomLeftRadius: number
+  borderBottomRightRadius: number
+  borderTopLeftRadius: number
+  borderTopRightRadius: number
+}
+
+type FullBleedContent = {
+  position: 'none' | 'bottom' | 'left' | 'right' | 'top'
+  align?: 'start' | 'end' | 'center' | 'stretch'
+  borderRadius?: BorderRadius
+  content?: ReactNode
+  src?: string
+  alt?: string
+  xsSrc?: string
+  smSrc?: string
+  fallbackSrc?: string
+  mdSrc?: string
+  lgSrc?: string
+  xlSrc?: string
+  loading?: 'eager' | 'lazy'
+}
+
+export interface CardProps extends HTMLAttrs {
+  children: ReactNode
+  variant?: Variant
+  footer?: ReactNode
+  footerPadding?: FooterPadding
+  fullBleedImage?: FullBleedContent
+  fullBleedContent?: FullBleedContent
+}
+
+declare const Card: ComponentType<CardProps>
+
+export default Card

package/types/ControlBar.d.ts

@@ -0,0 +1,59 @@
+import type { ComponentType, ReactNode } from 'react'
+import type { HTMLAttrs, Variant } from './common'
+
+type Track = {
+  source: string
+  label: string
+  kind: string
+  language: string
+}
+
+type Source = {
+  source: string
+  mediaType: string
+  qualityName: string
+  qualityRank: number
+  isFallback: boolean
+}
+
+export interface ControlBarProps extends HTMLAttrs {
+  children?: ReactNode
+  variant?: Variant
+  videoPlayer: any
+  videoPlayerContainer: any
+  sources: [Source]
+  tracks?: [Track]
+  videoPlaying: boolean
+  videoUnplayed: boolean
+  videoBufferEnd: number
+  isHidden?: boolean
+  videoLength: number
+  videoCurrentTime: number
+  videoCurrentVolume: number
+  videoIsMuted: boolean
+  setVolume: Function
+  isMobile: boolean
+  tracksAvailable: boolean
+  togglePlayPause: Function
+  setSeek: Function
+  toggleMute: Function
+  toggleFullscreen: Function
+  videoIsFullscreen: boolean
+  setTextTracks: Function
+  selectedTextTrack: number
+  resetInactivityTimer: Function
+  videoQuality: number
+  setVideoQuality: Function
+  captionsMenuOpen: boolean
+  setCaptionsMenuOpen: Function
+  qualityMenuOpen: boolean
+  setQualityMenuOpen: Function
+  clearInactivityTimer: Function
+  copy: 'en' | 'fr'
+  compactModeThreshold: number
+  videoPlayerWidth: number
+}
+
+declare const ControlBar: ComponentType<ControlBarProps>
+
+export default ControlBar

package/types/MiddleControlButton.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentType, ElementType, ReactNode } from 'react'
+import type { HTMLAttrs, Variant } from './common'
+
+export interface MiddleControlButtonProps extends HTMLAttrs {
+  children?: ReactNode
+  variant?: Variant
+  icon: ElementType
+  isHidden?: boolean
+  onClick?: Function
+  onFocus?: Function
+}
+
+declare const MiddleControlButton: ComponentType<MiddleControlButtonProps>
+
+export default MiddleControlButton