@telus-uds/components-base 1.95.0 → 1.97.0

package/src/Progress/Progress.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
-import { useThemeTokens } from '../ThemeProvider'
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -12,13 +12,15 @@ const selectProgressStyles = ({
   borderWidth,
   borderColor,
   borderRadius,
-  height
+  height,
+  shadow
 }) => ({
   backgroundColor,
   borderWidth,
   borderColor,
   borderRadius,
-  height
+  height,
+  ...applyShadowToken(shadow)
 })
 
 /**
@@ -37,6 +39,7 @@ const selectProgressStyles = ({
  *   - `borderRadius` for the rounded corners,
  *   - `borderWidth` to change the border width.
  *   - `height` to control the height of the progress bars displayed within the progress bar container.
+ *   - `shadow` to apply a box shadow to the progress bar container.
  *
  * ## Variants
  *

package/src/Progress/ProgressBar.jsx

@@ -3,19 +3,20 @@ import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
 import ProgressBarBackground from './ProgressBarBackground'
-import { useThemeTokens } from '../ThemeProvider'
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectBarStyles = (
-  { backgroundColor, borderRadius, outlineWidth, outlineColor },
+  { backgroundColor, borderRadius, outlineWidth, outlineColor, shadow },
   percentage
 ) => ({
   backgroundColor,
   borderRadius,
   outlineWidth,
   outlineColor,
+  ...applyShadowToken(shadow),
   width: `${percentage}%`
 })
 
@@ -34,6 +35,7 @@ const selectBarStyles = (
  *   - `borderRadius` for the rounded corners,
  *   - `outlineColor` to control the color of the border (outline),
  *   - `outlineWidth` to change the outline width.
+ *   - `shadow` to apply a box shadow to the progress bar.
  *
  * ## Variants
  *

package/src/Tooltip/Tooltip.native.jsx

@@ -88,8 +88,8 @@ const selectArrowStyles = (
 }
 
 const selectTextStyles = (tokens) => applyTextStyles(selectTokens('Typography', tokens))
-const defaultControl = (pressableState, variant) => (
-  <TooltipButton pressableState={pressableState} variant={variant} />
+const defaultControl = (pressableState, variant, tokens) => (
+  <TooltipButton pressableState={pressableState} variant={variant} tokens={tokens} />
 )
 
 /**
@@ -119,6 +119,8 @@ const Tooltip = React.forwardRef(
       variant,
       inline = false,
       nativeID,
+      activateOnHover = false,
+      tooltipButtonTokens,
       ...rest
     },
     ref
@@ -227,6 +229,31 @@ const Tooltip = React.forwardRef(
       tooltipPosition
     ])
 
+    React.useEffect(() => {
+      if (Platform.OS !== 'web') {
+        return undefined
+      }
+
+      const handleHover = (event) => {
+        if (activateOnHover) {
+          const isInsideControl = controlRef.current && controlRef.current.contains(event.target)
+          if (isInsideControl) {
+            if (!isOpen) {
+              setIsOpen(!isOpen)
+            }
+          } else {
+            close()
+          }
+        }
+      }
+
+      document.addEventListener('mouseover', handleHover, { capture: true })
+
+      return () => {
+        document.removeEventListener('mouseover', handleHover, { capture: true })
+      }
+    }, [controlLayout, activateOnHover, isOpen, onPress])
+
     const control = children !== undefined ? children : defaultControl
     const pressableStyles =
       control === defaultControl ? Platform.select({ web: { outline: 'none' } }) : undefined
@@ -256,7 +283,8 @@ const Tooltip = React.forwardRef(
           nativeID={nativeID}
         >
           {typeof control === 'function'
-            ? (pressableState) => control(getPressableState(pressableState), variant)
+            ? (pressableState) =>
+                control(getPressableState(pressableState), variant, tooltipButtonTokens)
             : control}
         </Pressable>
         {isOpen && (

package/src/Tooltip/shared.js

@@ -32,6 +32,11 @@ const propTypes = {
    * The `id` of the tooltip button.
    */
   nativeID: PropTypes.string,
+  /**
+   * Set to `true` to open the tooltip on hover
+   */
+  activateOnHover: PropTypes.bool,
+  tooltipButtonTokens: getTokensPropType('TooltipButton'),
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
 }

package/src/Typography/Typography.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Text, View } from 'react-native'
+import { Text, View, Platform } from 'react-native'
 
 import { useResponsiveThemeTokens, useTheme, useThemeTokens } from '../ThemeProvider'
 import { applyTextStyles } from '../ThemeProvider/utils'
@@ -54,6 +54,16 @@ const selectTextStyles = (
     gradient
   })
 
+const HALF_FONT_SIZE = 2
+const QUARTER_FONT_SIZE = 4
+
+const selectMobileSubSupStyles = ({ fontSize }, type) => ({
+  fontSize: fontSize / HALF_FONT_SIZE,
+  lineHeight: fontSize,
+  position: 'relative',
+  top: type === 'sub' ? fontSize / QUARTER_FONT_SIZE : -fontSize / QUARTER_FONT_SIZE
+})
+
 // General-purpose flexible theme-neutral base component for text
 const Typography = React.forwardRef(
   (
@@ -175,19 +185,33 @@ const Typography = React.forwardRef(
     }
 
     const resetTagStyling = (child) => {
-      if (typeof child === 'object' && (child?.type === 'sub' || child?.type === 'sup')) {
-        const childStyles = child?.props?.style || {}
-        const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize
-        const sanitizedChild = React.cloneElement(child, {
-          style: {
-            ...childStyles,
-            ...(supFontSize ? { fontSize: supFontSize } : {}),
-            lineHeight: 0
-          }
-        })
-        return sanitizedChild
+      if (typeof child !== 'object' || !(child?.type === 'sub' || child?.type === 'sup')) {
+        return child
       }
-      return child
+
+      const childStyles = child?.props?.style || {}
+      const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize
+      const isMobile = Platform.OS === 'ios' || Platform.OS === 'android'
+      const isSubSup = child?.type === 'sub' || child?.type === 'sup'
+
+      const mobileStyles =
+        isMobile && isSubSup ? selectMobileSubSupStyles(themeTokens, child?.type) : {}
+      const defaultStyles = !isMobile && isSubSup ? { fontSize: supFontSize, lineHeight: 0 } : {}
+
+      const sanitizedChild = React.cloneElement(
+        isMobile && isSubSup ? (
+          <View>
+            <Text style={[childStyles, mobileStyles]}>{child.props.children}</Text>
+          </View>
+        ) : (
+          child
+        ),
+        {
+          style: { ...childStyles, ...defaultStyles }
+        }
+      )
+
+      return sanitizedChild
     }
 
     const sanitizeChildren = () => {

package/src/index.js

@@ -81,7 +81,8 @@ export {
   getThemeTokens,
   applyOuterBorder,
   applyTextStyles,
-  applyShadowToken
+  applyShadowToken,
+  useResponsiveThemeTokens
 } from './ThemeProvider'
 
 export * from './utils'

package/types/FileUpload.d.ts

@@ -0,0 +1,40 @@
+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

@@ -30,6 +30,9 @@ export {
   ExpandCollapsePanelProps
 } from './ExpandCollapse'
 
+export { default as FileUpload } from './FileUpload'
+export { FileUploadTokens, FileUploadProps } from './FileUpload'
+
 export { default as HorizontalScrollButton } from './HorizontalScrollButton'
 export { HorizontalScrollButtonTokens } from './HorizontalScrollButton'