@telus-uds/components-base 3.28.2 → 4.0.0-alpha.0

package/src/Tooltip/Backdrop.jsx

@@ -35,7 +35,7 @@ function removePortalNode(nodeId) {
  * The Web version of Backdrop utilizes React Portal for overlaying page content, so it is
  * dependent on ReactDOM. Tooltip's closing is handled by the onBlur callback of the control.
  */
-function Backdrop({ children }) {
+export function Backdrop({ children }) {
   const [portalNode, setPortalNode] = useState()
 
   useEffect(() => {
@@ -56,5 +56,3 @@ function Backdrop({ children }) {
 Backdrop.propTypes = {
   children: PropTypes.node
 }
-
-export default Backdrop

package/src/Tooltip/Backdrop.native.jsx

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types'
  * approach is that a press on the Backdrop will actually stop the press event from propagating,
  * i.e. anything rendered beneath the Backdrop can't be pressed until the Backdrop is closed.
  */
-function Backdrop({ onPress, children }) {
+export function Backdrop({ onPress, children }) {
   return (
     <Modal transparent>
       <TouchableWithoutFeedback onPress={onPress}>
@@ -18,8 +18,6 @@ function Backdrop({ onPress, children }) {
   )
 }
 
-export default Backdrop
-
 Backdrop.propTypes = {
   onPress: PropTypes.func,
   children: PropTypes.node

package/src/Tooltip/Tooltip.jsx

@@ -1,13 +1,17 @@
 import React from 'react'
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
-import propTypes from './shared'
+import { propTypes } from './shared'
 import { useFloating, arrow, offset, shift, flip, autoPlacement } from '../utils/floating-ui'
 
-import { applyShadowToken, applyTextStyles, useThemeTokens } from '../ThemeProvider'
-import { a11yProps, selectSystemProps, selectTokens, viewProps } from '../utils'
-import TooltipButton from '../TooltipButton'
-import useCopy from '../utils/useCopy'
-import dictionary from './dictionary'
+import { applyShadowToken, applyTextStyles } from '../ThemeProvider/utils/styles'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { selectTokens } from '../utils/props/tokens'
+import { viewProps } from '../utils/props/viewProps'
+import { TooltipButton } from '../TooltipButton/TooltipButton'
+import { useCopy } from '../utils/useCopy'
+import { dictionary } from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -86,7 +90,7 @@ const defaultControl = (pressableState, variant) => (
  * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
  * - Tooltips may also be useful when vertical space is an issue.
  */
-const Tooltip = React.forwardRef(
+export const Tooltip = React.forwardRef(
   (
     {
       children,
@@ -247,8 +251,6 @@ Tooltip.propTypes = {
   ...propTypes
 }
 
-export default Tooltip
-
 const staticStyles = StyleSheet.create({
   container: {
     alignItems: 'flex-start',

package/src/Tooltip/Tooltip.native.jsx

@@ -1,14 +1,18 @@
 import React from 'react'
 import { Dimensions, Platform, Pressable, StyleSheet, Text, View } from 'react-native'
-import propTypes from './shared'
-
-import { applyShadowToken, applyTextStyles, useThemeTokens } from '../ThemeProvider'
-import { a11yProps, selectSystemProps, selectTokens, viewProps } from '../utils'
-import Backdrop from './Backdrop'
-import getTooltipPosition from './getTooltipPosition'
-import TooltipButton from '../TooltipButton'
-import useCopy from '../utils/useCopy'
-import dictionary from './dictionary'
+import { propTypes } from './shared'
+
+import { applyShadowToken, applyTextStyles } from '../ThemeProvider/utils/styles'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { selectTokens } from '../utils/props/tokens'
+import { viewProps } from '../utils/props/viewProps'
+import { Backdrop } from './Backdrop'
+import { getTooltipPosition } from './getTooltipPosition'
+import { TooltipButton } from '../TooltipButton/TooltipButton'
+import { useCopy } from '../utils/useCopy'
+import { dictionary } from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -113,7 +117,7 @@ const defaultControl = (pressableState, variant, tokens) => (
  * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
  * - Tooltips may also be useful when vertical space is an issue.
  */
-const Tooltip = React.forwardRef(
+export const Tooltip = React.forwardRef(
   (
     {
       children,
@@ -332,8 +336,6 @@ Tooltip.propTypes = {
   ...propTypes
 }
 
-export default Tooltip
-
 const staticStyles = StyleSheet.create({
   container: {
     alignItems: 'flex-start'

package/src/Tooltip/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     a11yText: 'Reveal additional information.'
   },

package/src/Tooltip/getTooltipPosition.js

@@ -54,7 +54,7 @@ function findRectByPosition(position, rectsArray) {
  * before it is shown, which makes it account for the width being limiting in styles, custom font
  * rendering, etc.
  */
-function getTooltipPosition(
+export function getTooltipPosition(
   position,
   { controlLayout, tooltipDimensions, windowDimensions, arrowWidth = 0, arrowOffset = 0 }
 ) {
@@ -156,5 +156,3 @@ function getTooltipPosition(
       : leastOverflowing
   )
 }
-
-export default getTooltipPosition

package/src/Tooltip/shared.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import { getTokensPropType } from '../utils/props/tokens'
-import variantProp from '../utils/props/variantProp'
+import { variantProp } from '../utils/props/variantProp'
 
-const propTypes = {
+export const propTypes = {
   /**
    * Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the
    * pressable state and tooltip variant as an argument.
@@ -40,5 +40,3 @@ const propTypes = {
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
 }
-
-export default propTypes

package/src/TooltipButton/TooltipButton.jsx

@@ -1,9 +1,14 @@
 import React from 'react'
 import { View, StyleSheet, Platform } from 'react-native'
 import PropTypes from 'prop-types'
-import { useThemeTokens, applyOuterBorder } from '../ThemeProvider'
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
-import Icon from '../Icon'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { applyOuterBorder } from '../ThemeProvider/utils/styles'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { Icon } from '../Icon/Icon'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -24,29 +29,31 @@ const selectIconTokens = ({ iconSize, iconColor, iconScale = 1 }) => ({
  * In fact though, it isn't actually a pressable - it's meant to be used as pressable's content.
  * Due to this any interaction states (e.g. pressed, hover, etc.) has to be passed down to it as a prop.
  */
-const TooltipButton = React.forwardRef(({ pressableState, tokens, variant, ...rest }, ref) => {
-  const themeTokens = useThemeTokens('TooltipButton', tokens, variant, pressableState)
+export const TooltipButton = React.forwardRef(
+  ({ pressableState, tokens, variant, ...rest }, ref) => {
+    const themeTokens = useThemeTokens('TooltipButton', tokens, variant, pressableState)
 
-  const { icon: IconComponent } = themeTokens
+    const { icon: IconComponent } = themeTokens
 
-  return (
-    <View
-      style={[
-        applyOuterBorder(themeTokens),
-        themeTokens.outerBorderWidth && {
-          margin: -themeTokens.outerBorderWidth
-        },
-        staticStyles.bubblePointerEvents
-      ]}
-      {...selectProps(rest)}
-      ref={ref}
-    >
-      <View style={selectInnerContainerStyles(themeTokens)}>
-        {IconComponent && <Icon icon={IconComponent} tokens={selectIconTokens(themeTokens)} />}
+    return (
+      <View
+        style={[
+          applyOuterBorder(themeTokens),
+          themeTokens.outerBorderWidth && {
+            margin: -themeTokens.outerBorderWidth
+          },
+          staticStyles.bubblePointerEvents
+        ]}
+        {...selectProps(rest)}
+        ref={ref}
+      >
+        <View style={selectInnerContainerStyles(themeTokens)}>
+          {IconComponent && <Icon icon={IconComponent} tokens={selectIconTokens(themeTokens)} />}
+        </View>
       </View>
-    </View>
-  )
-})
+    )
+  }
+)
 
 TooltipButton.displayName = 'TooltipButton'
 
@@ -73,5 +80,3 @@ TooltipButton.propTypes = {
   tokens: getTokensPropType('TooltipButton'),
   variant: variantProp.propType
 }
-
-export default TooltipButton

package/src/Typography/Typography.jsx

@@ -2,23 +2,20 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Text, View, Platform } from 'react-native'
 
-import { useResponsiveThemeTokens, useTheme, useThemeTokens } from '../ThemeProvider'
-import { applyTextStyles } from '../ThemeProvider/utils'
-import {
-  a11yProps,
-  variantProp,
-  getTokensPropType,
-  getMaxFontMultiplier,
-  headingTags,
-  selectSystemProps,
-  textTags,
-  textProps,
-  viewProps,
-  getA11yPropsFromHtmlTag,
-  StyleSheet,
-  createMediaQueryStyles
-} from '../utils'
-import { useViewport } from '../ViewportProvider'
+import { useResponsiveThemeTokens } from '../ThemeProvider/useResponsiveThemeTokens'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { applyTextStyles } from '../ThemeProvider/utils/styles'
+import { a11yProps } from '../utils/props/a11yProps'
+import { variantProp } from '../utils/props/variantProp'
+import { getTokensPropType } from '../utils/props/tokens'
+import { getMaxFontMultiplier } from '../utils/a11y/textSize'
+import { headingTags, textTags, getA11yPropsFromHtmlTag } from '../utils/a11y/semantics'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { textProps } from '../utils/props/textProps'
+import { viewProps } from '../utils/props/viewProps'
+import { StyleSheet, createMediaQueryStyles } from '../utils/ssr-media-query/ssr-media-query'
+import { useViewport } from '../ViewportProvider/useViewport'
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
@@ -36,6 +33,7 @@ const selectTextStyles = (
     textTransform,
     letterSpacing,
     textDecorationLine,
+    fontStyle,
     gradient
   },
   themeOptions
@@ -46,6 +44,7 @@ const selectTextStyles = (
     color,
     lineHeight,
     fontName,
+    fontStyle,
     themeOptions,
     textAlign,
     textTransform,
@@ -65,7 +64,7 @@ const selectMobileSubSupStyles = ({ fontSize }, type) => ({
 })
 
 // General-purpose flexible theme-neutral base component for text
-const Typography = React.forwardRef(
+export const Typography = React.forwardRef(
   (
     {
       children,
@@ -98,6 +97,7 @@ const Typography = React.forwardRef(
       ? getMaxFontMultiplier(themeTokens[viewport])
       : getMaxFontMultiplier(themeTokens)
     const textDecorationLine = strikeThrough ? 'line-through' : 'none'
+    const fontStyle = tag === 'em' ? 'italic' : undefined
 
     const generateGradientString = (gradientObj) => {
       let gradientStr = ''
@@ -154,7 +154,8 @@ const Typography = React.forwardRef(
             {
               textAlign: resolvedAlign,
               textDecorationLine,
-              ...viewportTokens
+              ...viewportTokens,
+              ...(fontStyle && { fontStyle })
             },
             themeOptions
           )
@@ -185,7 +186,8 @@ const Typography = React.forwardRef(
         {
           textAlign: resolvedAlign,
           textDecorationLine,
-          ...themeTokens
+          ...themeTokens,
+          ...(fontStyle && { fontStyle })
         },
         themeOptions
       )
@@ -313,5 +315,3 @@ Typography.propTypes = {
    */
   dataSet: PropTypes.object
 }
-
-export default Typography

package/src/Validator/Validator.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
-import { inputSupportsProps, selectSystemProps } from '../utils'
-import { TextInput } from '../TextInput'
-import StackView from '../StackView'
-import InputSupports from '../InputSupports'
-import { useThemeTokens } from '../ThemeProvider'
+import { inputSupportsProps } from '../utils/props/inputSupportsProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { TextInput } from '../TextInput/TextInput'
+import { StackView } from '../StackView/StackView'
+import { InputSupports } from '../InputSupports/InputSupports'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([inputSupportsProps])
 
@@ -17,7 +18,7 @@ const selectCodeTextInputTokens = ({ outerBorderColor, outerBackgroundColor }) =
   }
 }
 
-const Validator = React.forwardRef(
+export const Validator = React.forwardRef(
   ({ value = '', inactive, mask = '', onChange, tokens = {}, variant = {}, ...rest }, ref) => {
     const defaultRef = React.useRef()
     const codeRef = ref ?? defaultRef
@@ -335,8 +336,6 @@ Validator.propTypes = {
   onChange: PropTypes.func
 }
 
-export default Validator
-
 const staticStyles = StyleSheet.create({
   codeInputWidth: {
     width: 43

package/src/ViewportProvider/ViewportProvider.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { viewports } from '@telus-uds/system-constants'
 import { ViewportContext } from './useViewport'
-import useViewportListener from './useViewportListener'
+import { useViewportListener } from './useViewportListener'
 
 /**
  * Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook
@@ -11,16 +11,17 @@ import useViewportListener from './useViewportListener'
  * @param {string} [defaultViewport] - Default viewport to use during server-side rendering.
  *   Must be one of the viewport keys from system-constants. If not provided, defaults to the smallest viewport.
  */
-const ViewportProvider = ({ children, defaultViewport }) => {
+// eslint-disable-next-line no-unused-vars
+export const ViewportProvider = React.forwardRef(({ children, defaultViewport }, _) => {
   // Default to the smallest viewport for mobile-first SSR. On client side, this is updated
   // by useViewportListener in a layout effect before anything is shown to the user.
   const [viewport, setViewport] = React.useState(defaultViewport || viewports.keys[0])
   useViewportListener(setViewport)
   return <ViewportContext.Provider value={viewport}>{children}</ViewportContext.Provider>
-}
+})
+
+ViewportProvider.displayName = 'ViewportProvider'
 ViewportProvider.propTypes = {
   children: PropTypes.node.isRequired,
   defaultViewport: PropTypes.oneOf(viewports.keys)
 }
-
-export default ViewportProvider

package/src/ViewportProvider/useViewportListener.js

@@ -1,7 +1,6 @@
 import { Dimensions } from 'react-native'
 import { viewports } from '@telus-uds/system-constants'
-
-import useSafeLayoutEffect from '../utils/useSafeLayoutEffect'
+import { useSafeLayoutEffect } from '../utils/useSafeLayoutEffect'
 
 // Use Dimensions instead of useWindowDimensions because useWindowDimensions forces context
 // to update on every pixel change during window resize; but we only want rerenders to occur
@@ -13,7 +12,7 @@ const lookupViewport = () => viewports.select(Dimensions.get('window').width)
  * if the viewport isn't the smallest, any SSR-rendered components rerender correctly before anything
  * is shown to the user. Then bind events to update the viewport if it changes.
  */
-const useViewportListener = (setViewport) => {
+export const useViewportListener = (setViewport) => {
   useSafeLayoutEffect(() => {
     setViewport(lookupViewport())
 
@@ -32,5 +31,3 @@ const useViewportListener = (setViewport) => {
     }
   }, [setViewport])
 }
-
-export default useViewportListener