@telus-uds/components-web 2.12.0 → 2.14.0

package/src/TermsAndConditions/TermsAndConditions.jsx

@@ -7,12 +7,13 @@ import {
   selectSystemProps,
   Typography,
   useCopy,
-  useThemeTokens
+  useThemeTokens,
+  useViewport
 } from '@telus-uds/components-base'
 import ExpandCollapse from './ExpandCollapse'
 import OrderedListBase from '../OrderedList/OrderedListBase'
 import { htmlAttrs, media, renderStructuredContent } from '../utils'
-import dictionary from './dictionary'
+import defaultDictionary from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
@@ -33,7 +34,8 @@ const Ordered = styled(OrderedListBase)(({ tokens }) => ({
 const Unordered = styled.ul(({ tokens }) => ({
   listStyleType: 'none',
   margin: 0,
-  padding: tokens.unorderedPadding
+  padding: 0,
+  paddingTop: tokens.unorderedPadding
 }))
 
 const ListItem = styled(OrderedListBase.Item)(({ tokens }) => ({
@@ -70,16 +72,28 @@ const NonIndexedContentTitle = styled.div(({ tokens }) => ({
  * - Use `copy` to set language, ‘en’ for English or ‘fr’ for French
  */
 const TermsAndConditions = forwardRef(
-  ({ copy = 'en', indexedContent, nonIndexedContent, tokens, variant = {}, ...rest }, ref) => {
+  (
+    {
+      copy = 'en',
+      indexedContent,
+      nonIndexedContent,
+      tokens,
+      variant = {},
+      dictionary = defaultDictionary,
+      ...rest
+    },
+    ref
+  ) => {
     const getCopy = useCopy({ dictionary, copy })
     const hasIndexedContent = indexedContent.length > 0
     const hasNonIndexedContent = nonIndexedContent.length > 0
 
-    const themeTokens = useThemeTokens('TermsAndConditions', tokens, variant)
+    const viewport = useViewport()
+    const themeTokens = useThemeTokens('TermsAndConditions', tokens, variant, { viewport })
 
     return (
       <div {...selectProps(rest)}>
-        <Divider />
+        <Divider tokens={{ color: themeTokens.dividerColor }} />
         <ExpandCollapse
           collapseTitle={getCopy('headingView')}
           expandTitle={getCopy('headingHide')}
@@ -99,7 +113,16 @@ const TermsAndConditions = forwardRef(
             {hasNonIndexedContent && (
               <Box between={3}>
                 <NonIndexedContentTitle tokens={themeTokens}>
-                  <Typography block heading variant={{ size: 'h4' }}>
+                  <Typography
+                    block
+                    heading
+                    tokens={{
+                      fontName: themeTokens.expandTitleFontName,
+                      fontWeight: themeTokens.expandTitleFontWeight,
+                      fontSize: themeTokens.titleFontSize,
+                      lineHeight: themeTokens.titleLineHeight
+                    }}
+                  >
                     {getCopy('nonIndexedTitle')}
                   </Typography>
                 </NonIndexedContentTitle>
@@ -115,7 +138,7 @@ const TermsAndConditions = forwardRef(
             )}
           </ContentContainer>
         </ExpandCollapse>
-        <Divider />
+        <Divider tokens={{ color: themeTokens.dividerColor }} />
       </div>
     )
   }
@@ -123,6 +146,13 @@ const TermsAndConditions = forwardRef(
 
 TermsAndConditions.displayName = 'TermsAndConditions'
 
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = PropTypes.shape({
+  headingHide: PropTypes.string.isRequired,
+  headingView: PropTypes.string.isRequired,
+  nonIndexedTitle: PropTypes.string.isRequired
+})
+
 TermsAndConditions.propTypes = {
   ...selectedSystemPropTypes,
   /**
@@ -149,13 +179,21 @@ TermsAndConditions.propTypes = {
    *
    * 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]))
+  nonIndexedContent: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.string])),
+  /**
+   * Custom dictionary containing the labels to use for `TermsAndConditions`
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  })
 }
 
 TermsAndConditions.defaultProps = {
   copy: 'en',
   indexedContent: [],
-  nonIndexedContent: []
+  nonIndexedContent: [],
+  dictionary: defaultDictionary
 }
 
 export default TermsAndConditions

package/src/Testimonial/Testimonial.jsx

@@ -1,7 +1,13 @@
 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 {
+  Icon,
+  selectSystemProps,
+  Typography,
+  useThemeTokens,
+  useViewport
+} from '@telus-uds/components-base'
 import Image from '../Image'
 import { htmlAttrs } from '../utils'
 
@@ -48,11 +54,13 @@ const Testimonial = ({
   imageSrc,
   image = imageSrc,
   additionalInfo,
-  testimonialStyle = 'heading',
+  testimonialStyle = 'large',
   tokens,
+  copy = 'en',
   variant = {},
   ...rest
 }) => {
+  const viewport = useViewport()
   const {
     testimonialContainerGap,
     quoteContainerGap,
@@ -61,13 +69,43 @@ const Testimonial = ({
     figcaptionGap,
     textColor,
     icon,
+    iconFr,
     iconColor,
-    imageSize
-  } = useThemeTokens('Testimonial', tokens, variant)
+    imageSize,
+    testimonialFontSizeLarge,
+    testimonialLineHeightLarge,
+    testimonialFontWeightLarge,
+    testimonialFontSizeHeading,
+    testimonialLineHeightHeading,
+    testimonialFontNameHeading,
+    testimonialFontWeightHeading,
+    authorFontSize,
+    authorLineHeight,
+    authorFontName,
+    authorFontWeight,
+    additionalFontSize,
+    additionalLineHeight,
+    additionalFontName,
+    additionalFontWeight
+  } = useThemeTokens('Testimonial', tokens, variant, { viewport })
+
+  const getQuoteTestimonial = (open) => {
+    let quote = ''
+
+    if (copy === 'en') quote = open ? '\u201C' : '\u201D'
+    else quote = open ? '\u00AB ' : ' \u00BB'
+
+    return quote
+  }
+
   return (
     <TestimonialContainer testimonialContainerGap={testimonialContainerGap} {...selectProps(rest)}>
       <QuoteContainer quoteContainerGap={quoteContainerGap}>
-        <Icon tokens={{ color: iconColor }} variant={{ size: 'micro' }} icon={icon} />
+        <Icon
+          tokens={{ color: iconColor }}
+          variant={{ size: 'micro' }}
+          icon={copy === 'en' ? icon : iconFr}
+        />
         {showDivider && (
           <Divider
             dividerBackgroundColor={dividerBackgroundColor}
@@ -81,10 +119,22 @@ const Testimonial = ({
           variant={{ size: testimonialStyle === 'large' ? 'large' : 'h3' }}
           tokens={{
             color: textColor,
-            fontWeight: '400'
+            fontSize:
+              testimonialStyle === 'heading'
+                ? testimonialFontSizeHeading
+                : testimonialFontSizeLarge,
+            lineHeight:
+              testimonialStyle === 'heading'
+                ? testimonialLineHeightHeading
+                : testimonialLineHeightLarge,
+            fontName: testimonialFontNameHeading,
+            fontWeight:
+              testimonialStyle === 'heading'
+                ? testimonialFontWeightHeading
+                : testimonialFontWeightLarge
           }}
         >
-          {`\u201C${testimonial}\u201D`}
+          {`${getQuoteTestimonial(true)}${testimonial}${getQuoteTestimonial()}`}
         </Typography>
       </BlockQuote>
       {(image || title || additionalInfo) && (
@@ -105,16 +155,28 @@ const Testimonial = ({
             <AuthorInfoContainer>
               {title && (
                 <Typography
-                  variant={{ size: 'small', colour: 'secondary' }}
-                  tokens={{ fontWeight: '500' }}
+                  variant={{ size: 'small' }}
+                  tokens={{
+                    color: textColor,
+                    fontSize: authorFontSize,
+                    lineHeight: authorLineHeight,
+                    fontName: authorFontName,
+                    fontWeight: authorFontWeight
+                  }}
                 >
                   {title}
                 </Typography>
               )}
               {additionalInfo && (
                 <Typography
-                  variant={{ size: 'micro', colour: 'secondary' }}
-                  tokens={{ fontWeight: '400' }}
+                  variant={{ size: 'small' }}
+                  tokens={{
+                    color: textColor,
+                    fontSize: additionalFontSize,
+                    lineHeight: additionalLineHeight,
+                    fontName: additionalFontName,
+                    fontWeight: additionalFontWeight
+                  }}
                 >
                   {additionalInfo}
                 </Typography>

package/src/VideoPicker/VideoPickerPlayer.jsx

@@ -10,8 +10,8 @@ const VideoPickerPlayer = ({ video = {}, videoPlayerRef, onStartVideo = () => {}
       {video.videoId && <WebVideo {...video} onStart={() => onStartVideo(video)} />}
     </div>
     <StackView space={2}>
-      <Typography variant={{ size: 'h2', colour: 'secondary' }}>{video.title}</Typography>
-      <Typography>{video.description}</Typography>
+      <Typography variant={{ size: 'h3' }}>{video.title}</Typography>
+      <Typography variant={{ colour: 'default' }}>{video.description}</Typography>
     </StackView>
   </StackView>
 )

package/src/VideoPicker/VideoPickerThumbnail.jsx

@@ -8,7 +8,7 @@ import {
   Typography,
   useViewport,
   horizontalScrollUtils,
-  useThemeTokens
+  useThemeTokensCallback
 } from '@telus-uds/components-base'
 import { getTimestamp } from '../shared/VideoSplash/helpers'
 import { VideoPropType, RefPropType } from './videoPropType'
@@ -42,6 +42,12 @@ const createReactNativeStyles = ({
     }
   })
 
+const ImageContainer = styled.div`
+  padding: ${(props) => `${props.outerBorderGap}px`};
+  border: ${(props) => `${props.outerBorderWidth}px solid ${props.outerBorderColor}`};
+  border-radius: ${({ outerBorderRadius }) => outerBorderRadius}px;
+`
+
 const VideoThumbnail = styled.div`
   position: relative;
   width: ${(props) => (props.layout === 'vertical' ? '100%' : '144px')};
@@ -61,7 +67,7 @@ const VideoThumbnail = styled.div`
   &::after {
     content: '';
     border: ${({ borderWidth }) => borderWidth}px solid;
-    border-color: ${({ isPlaying, borderColor }) => (isPlaying ? borderColor : 'transparent')};
+    border-color: ${({ borderColor }) => borderColor};
     border-radius: ${({ borderRadius }) => borderRadius}px;
     position: absolute;
     top: 0;
@@ -94,27 +100,30 @@ const VideoPickerThumbnail = ({
   width = '100%'
 }) => {
   const viewport = useViewport()
-  const { titleColor, subTitleColor, ...themeTokens } = useThemeTokens('VideoPickerThumbnail')
+  const getTokens = useThemeTokensCallback('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 renderThumbnailImage = (themeTokens) => {
+    return (
+      <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 = () => (
+  const renderThumbnailInfo = ({ titleColor, subTitleColor }) => (
     <StackView space={2} tokens={{ flexShrink: 1 }}>
       <ThumbnailTitleContainer viewport={viewport}>
-        <Typography variant={{ bold: true }} tokens={{ color: isPlaying ? titleColor : 'none' }}>
+        <Typography variant={{ bold: true }} tokens={{ color: titleColor }}>
           {video.title}
         </Typography>
       </ThumbnailTitleContainer>
@@ -148,21 +157,33 @@ const VideoPickerThumbnail = ({
       onKeyPress={onKeyPress}
       accessibilityRole="radio"
       accessibilityState={{ checked: isPlaying }}
-      style={[
-        rnStyles.container,
-        layout === 'horizontal' && rnStyles.horizontal,
-        isFramed && rnStyles.framed,
-        isFramed && index > 0 && rnStyles.framedLine,
-        { width }
-      ]}
+      style={({ hovered: hover, focused: focus, pressed }) => {
+        const themeTokens = getTokens({ hover, focus, pressed, selected: isPlaying })
+
+        const rnStyles = createReactNativeStyles(themeTokens)
+        return [
+          rnStyles.container,
+          layout === 'horizontal' && rnStyles.horizontal,
+          isFramed && rnStyles.framed,
+          isFramed && index > 0 && rnStyles.framedLine,
+          { width },
+          { outline: 'none' }
+        ]
+      }}
     >
-      <StackView
-        space={layout === 'vertical' ? 2 : 3}
-        direction={layout === 'vertical' ? 'column' : 'row'}
-      >
-        {renderThumbnailImage()}
-        {renderThumbnailInfo()}
-      </StackView>
+      {({ hovered: hover, focused: focus, pressed }) => {
+        const themeTokens = getTokens({ hover, focus, pressed, selected: isPlaying })
+
+        return (
+          <StackView
+            space={layout === 'vertical' ? 2 : 3}
+            direction={layout === 'vertical' ? 'column' : 'row'}
+          >
+            <ImageContainer {...themeTokens}>{renderThumbnailImage(themeTokens)}</ImageContainer>
+            {renderThumbnailInfo(themeTokens)}
+          </StackView>
+        )
+      }}
     </Pressable>
   )
 }

package/src/VideoPicker/VideoSlider.jsx

@@ -26,7 +26,7 @@ const VideoSlider = ({ children }) => {
     setContainerWidth(width)
   }
 
-  const itemsGap = 24 // '4' on spacing scale
+  const itemsGap = 32 // '5' on spacing scale
   const itemsCount = viewport === 'lg' || viewport === 'xl' ? 4 : 3
   const itemGapPortioned = ((itemsCount - 1) * itemsGap) / itemsCount
   const itemWidth =
@@ -40,7 +40,7 @@ const VideoSlider = ({ children }) => {
         )
 
   const content = (
-    <StackView space={4} direction="row" accessibilityRole="radiogroup" tokens={{ flexGrow: 1 }}>
+    <StackView space={5} direction="row" accessibilityRole="radiogroup" tokens={{ flexGrow: 1 }}>
       {React.Children.map(children, (child, index) =>
         cloneElement(child, {
           index,

package/types/BaseProvider.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentType } from 'react'
+
+declare interface ThemeMetadata {
+  themeTokensVersion: string
+  name: string
+}
+
+declare interface DefaultTheme {
+  metadata: ThemeMetadata
+}
+
+declare interface ThemeOptions {
+  forceAbsoluteFontSizing?: boolean
+  forceZIndex?: boolean
+}
+
+export interface BaseProviderProps {
+  themeOptions?: ThemeOptions
+  defaultTheme: DefaultTheme
+  children: React.ReactNode
+}
+
+declare const BaseProvider: ComponentType<BaseProviderProps>
+
+export default BaseProvider

package/types/index.d.ts

@@ -112,7 +112,7 @@ declare const Pagination: ComponentType<Props> & {
 
 export { default as QuantitySelector } from './QuantitySelector'
 export type { QuantitySelectorProps } from './QuantitySelector'
-
+export { default as BaseProvider } from './BaseProvider'
 declare const QuickLinks: ComponentType<Props> & {
   Item: ComponentType<Props>
 }