@telus-uds/components-web 2.12.0 → 2.13.0

package/src/Table/Table.jsx

@@ -36,7 +36,15 @@ export const useTableContext = () => useContext(TableContext)
  * - Use `Table.Row` and `Table.Cell` to build up the tabular data
  * - Use `Cell`'s `type` prop to visually mark it as a row heading (`type="rowHeading"`)
  */
-const Table = ({ children, fullWidth = true, text = 'medium', tokens, variant, ...rest }) => {
+const Table = ({
+  children,
+  spacing = 'default',
+  fullWidth = true,
+  text = 'medium',
+  tokens,
+  variant,
+  ...rest
+}) => {
   const { tablePaddingBottom } = useThemeTokens('Table', tokens, variant)
   const containerRef = useRef()
   const tableRef = useRef()
@@ -75,7 +83,7 @@ const Table = ({ children, fullWidth = true, text = 'medium', tokens, variant, .
       tablePaddingBottom={`${tablePaddingBottom}px`}
       {...selectProps(rest)}
     >
-      <TableContext.Provider value={{ text, isScrollable, tokens, variant }}>
+      <TableContext.Provider value={{ text, isScrollable, tokens, spacing }}>
         <StyledTable tableWidth={tableWidth} cellSpacing={0} ref={tableRef}>
           {children}
         </StyledTable>

package/src/TermsAndConditions/ExpandCollapse.jsx

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import {
   ExpandCollapse as ExpandCollapseBase,
-  Icon,
+  IconButton,
   useThemeTokensCallback
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
@@ -17,18 +17,15 @@ const ExpandCollapseControl = styled.div({
 
 const ExpandCollapseIconContainer = styled.div(({ tokens }) => ({
   alignItems: tokens.expandIconContainerAlignItems,
-  border: `${tokens.expandIconContainerBorder}px solid ${tokens.expandIconContainerBorderColor}`,
-  borderRadius: '50%',
-  display: 'flex',
-  height: tokens.expandIconContainerHeight,
   justifyContent: tokens.expandIconContainerJustifyContent,
-  margin: `${tokens.expandIconContainerMarginX}px ${tokens.expandIconContainerMarginY}px`,
+  marginLeft: `${tokens.expandIconContainerMarginY}px`,
+  marginRight: `${tokens.expandIconContainerMarginY}px`,
   width: tokens.expandIconContainerWidth
 }))
 
 const ExpandCollapseTitle = styled.h4(({ tokens }) => ({
   color: tokens.expandTitleColor,
-  fontFamily: `${tokens.listFontName}${tokens.listFontWeight}normal`,
+  fontFamily: `${tokens.expandTitleFontName}${tokens.expandTitleFontWeight}normal`,
   fontSize: tokens.expandTitleFontSize,
   lineHeight: tokens.expandTitleLineHeight,
   margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
@@ -42,8 +39,20 @@ const ExpandCollapse = forwardRef(
       expandContentPaddingBottom,
       expandContentPaddingLeft,
       expandContentPaddingRight,
-      expandContentPaddingTop
+      expandContentPaddingTop,
+      contentBorderColor,
+      contentMarginBottom,
+      expandTitlePaddingLeft,
+      expandTitleBorder,
+      expandTitleBorderColor,
+      expandTitleUnderline
     } = getTokens()
+    const [expand, setExpand] = useState(false)
+
+    const handleExpandToggle = (expandProps, event, expanded) => {
+      expandProps.onToggle('ExpandCollapsePanel', event)
+      setExpand(!expanded)
+    }
 
     return (
       <ExpandCollapseBase
@@ -55,7 +64,14 @@ const ExpandCollapse = forwardRef(
           <ExpandCollapseBase.Panel
             {...expandProps}
             panelId="ExpandCollapsePanel"
-            controlTokens={{ icon: null }}
+            controlTokens={{
+              icon: null,
+              backgroundColor: 'transparent',
+              paddingLeft: expandTitlePaddingLeft,
+              borderColor: expandTitleBorderColor,
+              borderWidth: expandTitleBorder,
+              textLine: expandTitleUnderline
+            }}
             // TODO refactor
             // eslint-disable-next-line react/no-unstable-nested-components
             control={(pressableState) => {
@@ -64,11 +80,15 @@ const ExpandCollapse = forwardRef(
 
               return (
                 <ExpandCollapseControl
-                  onClick={(event) => expandProps.onToggle('ExpandCollapsePanel', event)}
+                  onClick={(event) => handleExpandToggle(expandProps, event, expanded)}
                   ref={ref}
                 >
                   <ExpandCollapseIconContainer tokens={getTokens()}>
-                    <Icon icon={icon} variant={{ size: 'small' }} />
+                    <IconButton
+                      icon={icon}
+                      variant={{ size: 'small' }}
+                      onClick={(event) => handleExpandToggle(expandProps, event, expanded)}
+                    />
                   </ExpandCollapseIconContainer>
                   <ExpandCollapseTitle tokens={getTokens()}>
                     {expanded ? expandTitle : collapseTitle}
@@ -80,10 +100,12 @@ const ExpandCollapse = forwardRef(
               contentPaddingBottom: expandContentPaddingBottom,
               contentPaddingLeft: expandContentPaddingLeft,
               contentPaddingRight: expandContentPaddingRight,
-              contentPaddingTop: expandContentPaddingTop
+              contentPaddingTop: expandContentPaddingTop,
+              borderColor: contentBorderColor,
+              marginBottom: contentMarginBottom
             }}
           >
-            {children}
+            {expand ? children : null}
           </ExpandCollapseBase.Panel>
         )}
       </ExpandCollapseBase>

package/src/TermsAndConditions/TermsAndConditions.jsx

@@ -7,7 +7,8 @@ import {
   selectSystemProps,
   Typography,
   useCopy,
-  useThemeTokens
+  useThemeTokens,
+  useViewport
 } from '@telus-uds/components-base'
 import ExpandCollapse from './ExpandCollapse'
 import OrderedListBase from '../OrderedList/OrderedListBase'
@@ -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 }) => ({
@@ -75,11 +77,12 @@ const TermsAndConditions = forwardRef(
     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 +102,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 +127,7 @@ const TermsAndConditions = forwardRef(
             )}
           </ContentContainer>
         </ExpandCollapse>
-        <Divider />
+        <Divider tokens={{ color: themeTokens.dividerColor }} />
       </div>
     )
   }

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>
 }