@telus-uds/components-web 1.7.0 → 1.9.0

package/src/TermsAndConditions/TermsAndConditions.jsx

@@ -0,0 +1,161 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import {
+  Box,
+  Divider,
+  selectSystemProps,
+  Typography,
+  useCopy,
+  useThemeTokens
+} from '@telus-uds/components-base'
+import ExpandCollapse from './ExpandCollapse'
+import OrderedListBase from '../OrderedList/OrderedListBase'
+import { htmlAttrs, media, renderStructuredContent } from '../utils'
+import dictionary from './dictionary'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const ContentContainer = styled.div(({ tokens }) => ({
+  paddingBottom: tokens.contentPaddingBottom,
+  paddingLeft: tokens.contentPaddingLeft,
+  ...media().from('md').css({
+    paddingBottom: tokens.mdContentPaddingBottom,
+    paddingLeft: tokens.mdContentPaddingLeft
+  })
+}))
+
+const Ordered = styled(OrderedListBase)(({ tokens }) => ({
+  listStylePosition: 'outside',
+  padding: tokens.orderedPadding
+}))
+
+const Unordered = styled.ul(({ tokens }) => ({
+  listStyleType: 'none',
+  margin: 0,
+  padding: tokens.unorderedPadding
+}))
+
+const ListItem = styled(OrderedListBase.Item)(({ tokens }) => ({
+  display: 'list-item',
+  '&::marker': {
+    fontFamily: `${tokens.listFontName}${tokens.listFontWeight}normal`,
+    fontSize: tokens.listFontSize,
+    lineHeight: tokens.listLineHeight,
+    textAlign: 'end !important'
+  },
+  color: tokens.listColor,
+  fontFamily: `${tokens.listFontName}${tokens.listFontWeight}normal`,
+  fontSize: tokens.listFontSize,
+  lineHeight: tokens.listLineHeight,
+  marginBottom: tokens.listMarginBottom,
+  marginLeft: tokens.listMarginLeft,
+  wordBreak: 'break-word'
+}))
+
+const NonIndexedContentTitle = styled.div(({ tokens }) => ({
+  color: tokens.titleColor,
+  fontSize: tokens.titleFontSize,
+  lineHeight: tokens.titleLineHeight,
+  paddingLeft: tokens.titlePaddingLeft
+}))
+
+/**
+ * Use `TermsAndConditions` to display important legal content.
+ *
+ * ## Usage Criteria
+ *
+ * - Display before the page footer, except for call-to-action callback cards
+ * - Responsive display based on breakpoints
+ * - Use `copy` to set language, ‘en’ for English or ‘fr’ for French
+ */
+const TermsAndConditions = forwardRef(
+  ({ copy = 'en', indexedContent, nonIndexedContent, tokens, variant = {}, ...rest }, ref) => {
+    const getCopy = useCopy({ dictionary, copy })
+    const hasIndexedContent = indexedContent.length > 0
+    const hasNonIndexedContent = nonIndexedContent.length > 0
+
+    const themeTokens = useThemeTokens('TermsAndConditions', tokens, variant)
+
+    return (
+      <div {...selectProps(rest)}>
+        <Divider />
+        <ExpandCollapse
+          collapseTitle={getCopy('headingView')}
+          expandTitle={getCopy('headingHide')}
+          ref={ref}
+        >
+          <ContentContainer tokens={themeTokens}>
+            {hasIndexedContent && (
+              <Ordered tokens={themeTokens}>
+                {indexedContent.map((contentItem, idx) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <ListItem tokens={themeTokens} key={idx}>
+                    {renderStructuredContent(contentItem)}
+                  </ListItem>
+                ))}
+              </Ordered>
+            )}
+            {hasNonIndexedContent && (
+              <Box between={3}>
+                <NonIndexedContentTitle tokens={themeTokens}>
+                  <Typography block heading variant={{ size: 'h4' }}>
+                    {getCopy('nonIndexedTitle')}
+                  </Typography>
+                </NonIndexedContentTitle>
+                <Unordered tokens={themeTokens}>
+                  {nonIndexedContent.map((contentItem, idx) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <ListItem tokens={themeTokens} key={idx}>
+                      {renderStructuredContent(contentItem)}
+                    </ListItem>
+                  ))}
+                </Unordered>
+              </Box>
+            )}
+          </ContentContainer>
+        </ExpandCollapse>
+        <Divider />
+      </div>
+    )
+  }
+)
+
+TermsAndConditions.displayName = 'TermsAndConditions'
+
+TermsAndConditions.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
+   *
+   * To provide your own, pass a JSON object with the keys `headingView`, `headingHide`, and `nonIndexedTitle`.
+   */
+  copy: PropTypes.oneOfType([
+    PropTypes.oneOf(['en', 'fr']),
+    PropTypes.shape({
+      headingView: PropTypes.string,
+      headingHide: PropTypes.string,
+      nonIndexedTitle: PropTypes.string
+    })
+  ]),
+  /**
+   * An array of nodes, strings, or a combination to be displayed in an ordered list.
+   *
+   * Each item in the array must have a corresponding superscript in the page.
+   */
+  indexedContent: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.string])),
+  /**
+   * An array of nodes, strings, or a combination to be displayed in an unordered list.
+   *
+   * nonIndexedContent do not have a corresponding superscript and instead apply to the page as a whole.
+   */
+  nonIndexedContent: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.string]))
+}
+
+TermsAndConditions.defaultProps = {
+  copy: 'en',
+  indexedContent: [],
+  nonIndexedContent: []
+}
+
+export default TermsAndConditions

package/src/TermsAndConditions/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    headingHide: 'Hide terms and conditions',
+    headingView: 'View terms and conditions',
+    nonIndexedTitle: 'The following applies to all terms and conditions above'
+  },
+  fr: {
+    headingHide: 'Masquer les modalités et conditions',
+    headingView: 'Voir les modalités et conditions',
+    nonIndexedTitle: 'Ce qui suit s’applique aux modalités et conditions ci-dessus'
+  }
+}

package/src/TermsAndConditions/index.js

@@ -0,0 +1 @@
+export { default } from './TermsAndConditions'

package/src/Testimonial/Testimonial.jsx

@@ -0,0 +1,169 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { Icon, selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base'
+import Image from '../Image'
+import { htmlAttrs } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const TestimonialContainer = styled.figure(({ testimonialContainerGap }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: testimonialContainerGap,
+  margin: 0
+}))
+
+const QuoteContainer = styled.div(({ quoteContainerGap }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: quoteContainerGap
+}))
+
+const Divider = styled.div(({ dividerBorder, dividerBackgroundColor }) => ({
+  height: dividerBorder,
+  background: dividerBackgroundColor,
+  width: '100%'
+}))
+
+const BlockQuote = styled.blockquote({
+  margin: 0
+})
+
+const AuthorInfoContainer = styled.div({
+  display: 'flex',
+  flexDirection: 'column'
+})
+
+const Figcaption = styled.figcaption(({ figcaptionGap }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: figcaptionGap
+}))
+
+const Testimonial = ({
+  showDivider,
+  testimonial,
+  title,
+  imageSrc,
+  image = imageSrc,
+  additionalInfo,
+  testimonialStyle = 'heading',
+  tokens,
+  variant = {},
+  ...rest
+}) => {
+  const {
+    testimonialContainerGap,
+    quoteContainerGap,
+    dividerBorder,
+    dividerBackgroundColor,
+    figcaptionGap,
+    textColor,
+    icon,
+    iconColor,
+    imageSize
+  } = useThemeTokens('Testimonial', tokens, variant)
+  return (
+    <TestimonialContainer testimonialContainerGap={testimonialContainerGap} {...selectProps(rest)}>
+      <QuoteContainer quoteContainerGap={quoteContainerGap}>
+        <Icon tokens={{ color: iconColor }} variant={{ size: 'micro' }} icon={icon} />
+        {showDivider && (
+          <Divider
+            dividerBackgroundColor={dividerBackgroundColor}
+            dividerBorder={dividerBorder}
+            role="separator"
+          />
+        )}
+      </QuoteContainer>
+      <BlockQuote>
+        <Typography
+          variant={{ size: testimonialStyle === 'large' ? 'large' : 'h3' }}
+          tokens={{
+            color: textColor,
+            fontWeight: '400'
+          }}
+        >
+          {`\u201C${testimonial}\u201D`}
+        </Typography>
+      </BlockQuote>
+      {(image || title || additionalInfo) && (
+        <Figcaption figcaptionGap={figcaptionGap}>
+          {image &&
+            (typeof image === 'string' ? (
+              <Image
+                rounded="circle"
+                src={image}
+                alt={title}
+                width={imageSize}
+                height={imageSize}
+              />
+            ) : (
+              image
+            ))}
+          {(title || additionalInfo) && (
+            <AuthorInfoContainer>
+              {title && (
+                <Typography
+                  variant={{ size: 'small', colour: 'secondary' }}
+                  tokens={{ fontWeight: '500' }}
+                >
+                  {title}
+                </Typography>
+              )}
+              {additionalInfo && (
+                <Typography
+                  variant={{ size: 'micro', colour: 'secondary' }}
+                  tokens={{ fontWeight: '400' }}
+                >
+                  {additionalInfo}
+                </Typography>
+              )}
+            </AuthorInfoContainer>
+          )}
+        </Figcaption>
+      )}
+      {showDivider && (
+        <Divider
+          dividerBackgroundColor={dividerBackgroundColor}
+          dividerBorder={dividerBorder}
+          role="separator"
+        />
+      )}
+    </TestimonialContainer>
+  )
+}
+
+Testimonial.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Testimonial content
+   */
+  testimonial: PropTypes.string.isRequired,
+  /**
+   * Testimonial author or source
+   */
+  title: PropTypes.string,
+  /**
+   * Additional information on the author or source
+   */
+  additionalInfo: PropTypes.string,
+  /**
+   * Testimonial style
+   */
+  testimonialStyle: PropTypes.oneOf(['large', 'heading']),
+  /**
+   * Whether to show or not dividers at the top and the bottom of the testimonial
+  showDivider: PropTypes.bool,
+  /**
+   * The src attribute for the Image component or custom JSX content to render instead
+   */
+  image: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * The src attribute for the `Image` component to be displayed on the testimonial
+   * @deprecated please use the `image` prop instead
+   */
+  imageSrc: PropTypes.string
+}
+
+export default Testimonial

package/src/Testimonial/index.js

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

package/src/Video/ControlBar/ControlBar.jsx

@@ -0,0 +1,261 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+
+import { StackView, useThemeTokens, selectSystemProps, Icon } from '@telus-uds/components-base'
+
+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 } from '../../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const getIcon = (icon) => <Icon icon={icon} />
+
+const ControlBarContainer = styled.div(({ isHidden, isMobile }) => ({
+  width: '100%',
+  position: 'relative',
+  transition: 'opacity 0.4s',
+  opacity: isHidden ? 0 : 1,
+  display: isMobile ? 'none' : undefined
+}))
+
+const StyledControlBar = styled.div(({ padding }) => ({
+  boxSizing: 'border-box',
+  position: 'absolute',
+  width: '100%',
+  height: 56,
+  padding,
+  bottom: 0,
+  backgroundColor: 'rgba(42, 44, 46, 0.85)', // TODO: replace with opaque greyThunder
+  margin: 'auto',
+  display: 'flex',
+  justifyContent: 'space-between',
+  zIndex: 9
+}))
+
+const VideoProgressBarContainer = styled.div({
+  display: 'flex',
+  flexGrow: 1
+})
+
+const MenuContainer = styled.div(({ isOpen, menuBottom, menuRight, menuMarginLeft }) => ({
+  position: 'absolute',
+  bottom: menuBottom,
+  right: menuRight,
+  display: isOpen ? 'block' : 'none',
+  marginLeft: menuMarginLeft
+}))
+
+const ControlBar = ({
+  videoPlayer,
+  videoPlayerContainer,
+  sources,
+  tracks,
+  videoPlaying,
+  videoUnplayed,
+  videoBufferEnd,
+  isHidden = false,
+  videoLength,
+  videoCurrentTime,
+  videoCurrentVolume,
+  videoIsMuted,
+  setVolume,
+  isMobile,
+  tracksAvailable,
+  togglePlayPause,
+  setSeek,
+  toggleMute,
+  toggleFullscreen,
+  videoIsFullscreen,
+  setTextTracks,
+  selectedTextTrack,
+  resetInactivityTimer,
+  videoQuality,
+  setVideoQuality,
+  captionsMenuOpen,
+  setCaptionsMenuOpen,
+  qualityMenuOpen,
+  setQualityMenuOpen,
+  clearInactivityTimer,
+  copy,
+  compactModeThreshold,
+  videoPlayerWidth,
+  tokens,
+  variant,
+  ...rest
+}) => {
+  const {
+    paddingTop,
+    paddingBottom,
+    paddingLeft: paddingLeftDefault,
+    paddingRight: paddingRightDefault,
+    paddingLeftCompactMode,
+    paddingRightCompactMode,
+    menuBottom,
+    menuRight,
+    menuMarginLeft,
+    captionsIcon,
+    settingsIcon,
+    minimizeIcon,
+    maximizeIcon
+  } = useThemeTokens('VideoControlBar', tokens, variant)
+
+  const parseVideoQuality = () => {
+    return sources.map((source) => {
+      if (!source.isFallback) {
+        return { name: source.qualityName, value: source.qualityRank }
+      }
+      return {}
+    })
+  }
+
+  const parseTracks = () => {
+    const parsed = tracks.map((track, trackNumber) => {
+      return { name: videoText[copy][track.language], value: trackNumber }
+    })
+    parsed.unshift({ name: videoText[copy].captionsNone, value: -1 })
+    return parsed
+  }
+
+  const paddingLeft =
+    videoPlayerWidth > compactModeThreshold ? paddingLeftDefault : paddingLeftCompactMode
+  const paddingRight =
+    videoPlayerWidth > compactModeThreshold ? paddingRightDefault : paddingRightCompactMode
+  const menuContainerStyleProps = { menuBottom, menuRight, menuMarginLeft }
+
+  return (
+    <ControlBarContainer isHidden={isHidden} isMobile={isMobile} {...selectProps(rest)}>
+      <StyledControlBar
+        padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
+      >
+        <VideoProgressBarContainer>
+          <VideoProgressBar
+            copy={copy}
+            videoPlayer={videoPlayer}
+            videoLength={videoLength}
+            videoCurrentTime={videoCurrentTime}
+            videoBufferEnd={videoBufferEnd}
+            setSeek={setSeek}
+            resetInactivityTimer={resetInactivityTimer}
+          />
+        </VideoProgressBarContainer>
+
+        <VolumeSlider
+          videoPlayer={videoPlayer}
+          videoCurrentVolume={videoCurrentVolume}
+          setVolume={setVolume}
+          videoIsMuted={videoIsMuted}
+          toggleMute={toggleMute}
+          resetInactivityTimer={resetInactivityTimer}
+          copy={copy}
+          compactModeThreshold={compactModeThreshold}
+          videoPlayerWidth={videoPlayerWidth}
+          disableFocus={videoUnplayed}
+        />
+
+        <StackView space={3} direction="row">
+          {tracksAvailable && (
+            <VideoButton
+              disableFocus={videoUnplayed}
+              label={videoText[copy].captionsToggle}
+              icon={getIcon(captionsIcon)}
+              onClick={() => {
+                setCaptionsMenuOpen(!captionsMenuOpen)
+                setQualityMenuOpen(false)
+                clearInactivityTimer()
+              }}
+              onFocus={resetInactivityTimer}
+              onBlur={resetInactivityTimer}
+            />
+          )}
+          <VideoButton
+            disableFocus={videoUnplayed}
+            label={videoText[copy].qualityToggle}
+            icon={getIcon(settingsIcon)}
+            onClick={() => {
+              setQualityMenuOpen(!qualityMenuOpen)
+              setCaptionsMenuOpen(false)
+              clearInactivityTimer()
+            }}
+            onFocus={resetInactivityTimer}
+            onBlur={resetInactivityTimer}
+          />
+          <VideoButton
+            disableFocus={videoUnplayed}
+            label={videoText[copy].fullScreenToggle}
+            icon={videoIsFullscreen ? getIcon(minimizeIcon) : getIcon(maximizeIcon)}
+            onClick={toggleFullscreen}
+            onFocus={resetInactivityTimer}
+            onBlur={resetInactivityTimer}
+          />
+        </StackView>
+        {captionsMenuOpen && (
+          <MenuContainer isOpen={captionsMenuOpen} {...menuContainerStyleProps}>
+            <VideoMenu
+              menuLabel={videoText[copy].captionsDialogue}
+              menuOptions={parseTracks()}
+              setSelection={setTextTracks}
+              selectedItem={selectedTextTrack}
+              copy={copy}
+            />
+          </MenuContainer>
+        )}
+        {qualityMenuOpen && (
+          <MenuContainer isOpen={qualityMenuOpen} {...menuContainerStyleProps}>
+            <VideoMenu
+              menuLabel={videoText[copy].qualityDialogue}
+              menuOptions={parseVideoQuality()}
+              setSelection={setVideoQuality}
+              selectedItem={videoQuality}
+              copy={copy}
+            />
+          </MenuContainer>
+        )}
+      </StyledControlBar>
+    </ControlBarContainer>
+  )
+}
+
+ControlBar.propTypes = {
+  ...selectedSystemPropTypes,
+  videoPlayer: PropTypes.object.isRequired,
+  videoPlayerContainer: PropTypes.object.isRequired,
+  sources: PropTypes.array.isRequired,
+  tracks: PropTypes.array,
+  videoPlaying: PropTypes.bool.isRequired,
+  videoUnplayed: PropTypes.bool.isRequired,
+  videoBufferEnd: PropTypes.number.isRequired,
+  isHidden: PropTypes.bool,
+  videoLength: PropTypes.number.isRequired,
+  videoCurrentTime: PropTypes.number.isRequired,
+  videoCurrentVolume: PropTypes.number.isRequired,
+  videoIsMuted: PropTypes.bool.isRequired,
+  setVolume: PropTypes.func.isRequired,
+  isMobile: PropTypes.bool.isRequired,
+  tracksAvailable: PropTypes.bool.isRequired,
+  togglePlayPause: PropTypes.func.isRequired,
+  setSeek: PropTypes.func.isRequired,
+  toggleMute: PropTypes.func.isRequired,
+  toggleFullscreen: PropTypes.func.isRequired,
+  videoIsFullscreen: PropTypes.bool.isRequired,
+  setTextTracks: PropTypes.func.isRequired,
+  selectedTextTrack: PropTypes.number.isRequired,
+  resetInactivityTimer: PropTypes.func.isRequired,
+  videoQuality: PropTypes.number.isRequired,
+  setVideoQuality: PropTypes.func.isRequired,
+  captionsMenuOpen: PropTypes.bool.isRequired,
+  setCaptionsMenuOpen: PropTypes.func.isRequired,
+  qualityMenuOpen: PropTypes.bool.isRequired,
+  setQualityMenuOpen: PropTypes.func.isRequired,
+  clearInactivityTimer: PropTypes.func.isRequired,
+  copy: PropTypes.oneOf(['en', 'fr']).isRequired,
+  compactModeThreshold: PropTypes.number.isRequired,
+  videoPlayerWidth: PropTypes.number.isRequired
+}
+
+export default ControlBar

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

@@ -0,0 +1,61 @@
+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'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const StyledButton = styled.button(({ color }) => ({
+  background: 'none',
+  border: 'none',
+  padding: 0,
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'stretch',
+  'svg path': {
+    fill: color
+  }
+}))
+
+const VideoButton = ({ icon, label, disableFocus, children, tokens, variant, ...rest }) => {
+  const { color } = useThemeTokens('VideoButton', tokens, variant)
+
+  const handleOnKeyDown = (event) => {
+    const key = event.key || event.keyCode
+
+    // Disables playing by space bar, as that can be used to click a button
+    if (key === ' ' || key === 32) {
+      event.stopPropagation()
+    }
+  }
+  const handleClick = (event) => {
+    event.preventDefault()
+    rest.onClick?.(event)
+  }
+
+  return (
+    <StyledButton
+      aria-label={label}
+      onKeyDown={handleOnKeyDown}
+      tabIndex={disableFocus ? '-1' : undefined}
+      color={color}
+      {...selectProps(rest)}
+      onClick={handleClick}
+    >
+      {icon}
+      {children}
+    </StyledButton>
+  )
+}
+
+VideoButton.propTypes = {
+  ...selectedSystemPropTypes,
+  icon: PropTypes.element.isRequired,
+  label: PropTypes.string.isRequired,
+  disableFocus: PropTypes.bool.isRequired,
+  children: PropTypes.node
+}
+
+export default VideoButton