@telus-uds/components-web 2.41.0 → 2.43.0

package/src/OrderedList/Item.jsx

@@ -47,11 +47,14 @@ const StyledItemBase = styled(ItemBase)(
     counterIncrement: OL_COUNTER_NAME,
     '::before': {
       content: `counter(${OL_COUNTER_NAME})'.'`,
-      display: 'inline-flex',
+      display: 'inline-block',
       color: itemColor || itemTextColor,
       width: itemBulletContainerWidth,
       paddingRight: listGutter,
-      justifyContent: itemBulletTextAlign,
+      textAlign: itemBulletTextAlign,
+      flexShrink: 0,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
       ...applyTextStyles({
         fontWeight: itemFontWeight,
         fontSize: itemFontSize,
@@ -65,7 +68,9 @@ const StyledItemBase = styled(ItemBase)(
 )
 
 const ItemContent = styled.div({
-  flex: 1
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 5
 })
 
 const Item = React.forwardRef(
@@ -96,7 +101,7 @@ const Item = React.forwardRef(
             <ItemContent {...themeTokens}>{itemContent}</ItemContent>
           </StackView>
         ) : (
-          itemContent
+          <ItemContent>{itemContent}</ItemContent>
         )}
       </StyledItemBase>
     )

package/src/PriceLockup/PriceLockup.jsx

@@ -17,6 +17,7 @@ import { htmlAttrs, warn } from '../utils'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const PriceLockupContainer = styled.div`
+  align-items: ${({ alignItemsText }) => alignItemsText};
   display: flex;
   flex-direction: column;
   width: fit-content;
@@ -129,6 +130,7 @@ const PriceLockup = React.forwardRef(
       fontColor,
       dividerColor,
       footnoteLinkFontSize,
+      alignItemsText,
       ...themeTokens
     } = useThemeTokens(
       'PriceLockup',
@@ -234,7 +236,7 @@ const PriceLockup = React.forwardRef(
     }
 
     return (
-      <PriceLockupContainer {...selectProps(rest)} ref={ref}>
+      <PriceLockupContainer {...selectProps(rest)} alignItemsText={alignItemsText} ref={ref}>
         {topText && (
           <TopTextContainer topTextMarginBottom={`${topTextMarginBottom}px`}>
             {renderTypography(topText, typographyTokens.topText)}

package/src/Progress/ProgressBar.jsx

@@ -7,7 +7,8 @@ import {
   useThemeTokens,
   a11yProps,
   viewProps,
-  variantProp
+  variantProp,
+  applyShadowToken
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 
@@ -16,13 +17,12 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const { Bar: ProgressBarBase } = Progress
 const Gradient = styled.div.attrs({ 'data-testid': 'ProgressBar-Gradient' })(
-  ({ percentage, gradient: { angle, stops, type } }) => ({
+  ({ gradient: { angle, stops, type }, borderRadius, shadow }) => ({
     height: '100%',
-    // As per the design specs, we need to have the gradient expanding to 100% and being
-    // revealed by bar width, so we need to stretch it beyond the parent (progress element)
-    // to the full length of the progress bar
-    width: `${(100 * 100) / percentage}%`,
-    background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`
+    width: '100%',
+    background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`,
+    borderRadius,
+    ...applyShadowToken(shadow)
   })
 )
 
@@ -49,7 +49,7 @@ const ProgressBar = React.forwardRef(({ percentage, tokens, variant, ...rest },
       ref={ref}
       {...selectedProps}
     >
-      {themeTokens.gradient && <Gradient {...themeTokens} percentage={percentage} />}
+      {themeTokens.gradient && <Gradient {...themeTokens} />}
     </ProgressBarBase>
   )
 })

package/src/Table/Table.jsx

@@ -60,8 +60,8 @@ const Table = ({
 
   useSafeLayoutEffect(() => {
     const updateDimensions = () => {
-      const containerClientWidth = containerRef.current.clientWidth
-      const responsiveTableWidth = fullWidth ? containerClientWidth : tableRef.current.clientWidth
+      const containerClientWidth = containerRef.current?.clientWidth
+      const responsiveTableWidth = fullWidth ? containerClientWidth : tableRef.current?.clientWidth
       setContainerWidth(containerClientWidth)
       setTableWidth(responsiveTableWidth)
     }

package/src/TermsAndConditions/TermsAndConditions.jsx

@@ -9,7 +9,11 @@ import {
   useCopy,
   useThemeTokens,
   useViewport,
-  getTokensPropType
+  getTokensPropType,
+  useTheme,
+  useResponsiveThemeTokens,
+  createMediaQueryStyles,
+  StyleSheet
 } from '@telus-uds/components-base'
 import ExpandCollapse from './ExpandCollapse'
 import OrderedListBase from '../OrderedList/OrderedListBase'
@@ -90,7 +94,65 @@ const TermsAndConditions = React.forwardRef(
     const hasNonIndexedContent = nonIndexedContent.length > 0
 
     const viewport = useViewport()
-    const themeTokens = useThemeTokens('TermsAndConditions', tokens, variant, { viewport })
+    const { themeOptions } = useTheme()
+
+    const { enableMediaQueryStyleSheet } = themeOptions
+
+    const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
+    const themeTokens = useTokens(
+      'TermsAndConditions',
+      tokens,
+      variant,
+      !enableMediaQueryStyleSheet && { viewport }
+    )
+
+    let listItemStyles
+    let listItemMediaIds
+    let nonIndexedContentStyles
+    let nonIndexedContentMediaIds
+
+    if (enableMediaQueryStyleSheet) {
+      const { transformedListItemThemeTokens, transformedNonIndexedContentThemeTokens } =
+        Object.entries(themeTokens).reduce(
+          (acc, [vp, viewportTokens]) => {
+            acc.transformedListItemThemeTokens[vp] = {
+              marginLeft: viewportTokens.listMarginLeft
+            }
+            acc.transformedNonIndexedContentThemeTokens[vp] = {
+              paddingLeft: viewportTokens.titlePaddingLeft
+            }
+            return acc
+          },
+          {
+            transformedListItemThemeTokens: {},
+            transformedNonIndexedContentThemeTokens: {}
+          }
+        )
+
+      const listItemMediaQueryStyles = createMediaQueryStyles(transformedListItemThemeTokens)
+      const nonIndexedContentMediaQueryStyles = createMediaQueryStyles(
+        transformedNonIndexedContentThemeTokens
+      )
+
+      const { ids, styles } = StyleSheet.create({
+        listItem: {
+          ...themeTokens[viewport],
+          ...listItemMediaQueryStyles
+        },
+        nonIndexedContent: {
+          ...themeTokens[viewport],
+          ...nonIndexedContentMediaQueryStyles
+        }
+      })
+
+      listItemStyles = styles.listItem
+      listItemMediaIds = ids.listItem
+      nonIndexedContentStyles = styles.nonIndexedContent
+      nonIndexedContentMediaIds = ids.nonIndexedContent
+    } else {
+      listItemStyles = themeTokens
+      nonIndexedContentStyles = themeTokens
+    }
 
     return (
       <div {...selectProps(rest)}>
@@ -107,7 +169,7 @@ const TermsAndConditions = React.forwardRef(
               <Ordered tokens={themeTokens}>
                 {indexedContent.map((contentItem, idx) => (
                   // eslint-disable-next-line react/no-array-index-key
-                  <ListItem tokens={themeTokens} key={idx}>
+                  <ListItem tokens={listItemStyles} key={idx} media={listItemMediaIds}>
                     {renderStructuredContent(contentItem)}
                   </ListItem>
                 ))}
@@ -115,7 +177,10 @@ const TermsAndConditions = React.forwardRef(
             )}
             {hasNonIndexedContent && (
               <Box between={3}>
-                <NonIndexedContentTitle tokens={themeTokens}>
+                <NonIndexedContentTitle
+                  tokens={nonIndexedContentStyles}
+                  media={nonIndexedContentMediaIds}
+                >
                   <Typography
                     block
                     heading
@@ -132,7 +197,7 @@ const TermsAndConditions = React.forwardRef(
                 <Unordered tokens={themeTokens}>
                   {nonIndexedContent.map((contentItem, idx) => (
                     // eslint-disable-next-line react/no-array-index-key
-                    <ListItem tokens={themeTokens} key={idx}>
+                    <ListItem tokens={listItemStyles} key={idx} media={listItemMediaIds}>
                       {renderStructuredContent(contentItem)}
                     </ListItem>
                   ))}

package/types/BaseProvider.d.ts

@@ -1,22 +1,22 @@
 import type { ComponentType } from 'react'
 
-declare interface ThemeMetadata {
+export interface ThemeMetadata {
   themeTokensVersion: string
   name: string
 }
 
-declare interface DefaultTheme {
+export interface Theme {
   metadata: ThemeMetadata
 }
 
-declare interface ThemeOptions {
+export interface ThemeOptions {
   forceAbsoluteFontSizing?: boolean
   forceZIndex?: boolean
 }
 
 export interface BaseProviderProps {
   themeOptions?: ThemeOptions
-  defaultTheme: DefaultTheme
+  defaultTheme: Theme
   children: React.ReactNode
 }
 

package/types/FileUpload.d.ts

@@ -0,0 +1,41 @@
+// TODO: Duplicate of the one in components-base. TS module resolution doesn't seem to be working from web -> base.
+import type { ComponentType } from 'react'
+
+export interface FileUploadTokens {
+  buttonBackgroundColor?: string
+  buttonBorderColor?: string
+  buttonBorderRadius?: number
+  buttonBorderWidth?: string
+  buttonTextColor?: string
+  buttonHeight?: string
+  buttonMinWidth?: string
+  buttonWidth?: string
+  notificationBackgroundColor?: string
+  notificationBorderColor?: string
+  notificationBorderRadius?: number
+  notificationTextColor?: string
+  notificationDismissButtonGap?: string
+  notificationDismissIcon?: string
+  notificationDismissIconColor?: string
+  notificationIcon?: string
+  notificationIconColor?: string
+  notificationIconGap?: string
+  notificationIconSize?: number
+}
+
+export interface FileUploadProps {
+  tokens?: FileUploadTokens
+  variant?: Record<string, any>
+  copy?: 'en' | 'fr'
+  fileTypes?: string[]
+  allowMultipleFiles?: boolean
+  maxFileSize?: number
+  maxFilesCount?: number
+  onUpload?: (files: any) => void
+  onDelete?: (file: any) => void
+  documentPicker?: Record<string, any>
+}
+
+declare const FileUpload: ComponentType<FileUploadProps>
+
+export default FileUpload

package/types/index.d.ts

@@ -8,6 +8,9 @@ export type { AutocompleteProps, AutocompleteItem } from './Autocomplete'
 export { default as Badge } from './Badge'
 export type { BadgeProps } from './Badge'
 
+export { default as BaseProvider } from './BaseProvider'
+export type { BaseProviderProps, ThemeOptions, Theme, ThemeMetadata } from './BaseProvider'
+
 export { default as BlockQuote } from './BlockQuote'
 export type { BlockQuoteProps } from './BlockQuote'
 
@@ -35,6 +38,10 @@ export type { DatePickerProps } from './DatePicker'
 
 declare const Disclaimer: ComponentType<Props>
 declare const ExpandCollapseMini: ComponentType<Props>
+
+export { default as FileUpload } from './FileUpload'
+export type { FileUploadProps, FileUploadTokens } from './FileUpload'
+
 declare const Footnote: ComponentType<Props> & {
   Link: ComponentType<Props>
 }
@@ -115,7 +122,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>
 }