@telus-uds/components-base 1.94.0 → 1.95.0

package/lib-module/Tooltip/getTooltipPosition.js

@@ -1,4 +1,4 @@
-function normalizePosition(position) {
+function getAbsolutePosition(position) {
   const {
     left,
     right,
@@ -9,7 +9,7 @@ function normalizePosition(position) {
   } = position;
 
   // adjust the coordinates so that it fits within the window
-  const normalized = {
+  const finalPosition = {
     left: Math.max(0, left),
     right: Math.max(0, right),
     top: Math.max(0, top),
@@ -19,15 +19,14 @@ function normalizePosition(position) {
   const getAbsoluteDiff = (value1, value2) => Math.abs(Math.abs(value1) - Math.abs(value2));
 
   // adjust the width by whatever has been subtracted from left or right
-  normalized.width = width - Math.abs(getAbsoluteDiff(left, normalized.left) - getAbsoluteDiff(right, normalized.right));
-  if (normalized.top !== top) {
-    normalized.bottom += normalized.top - top;
+  finalPosition.width = width - Math.abs(getAbsoluteDiff(left, finalPosition.left) - getAbsoluteDiff(right, finalPosition.right));
+  if (finalPosition.top !== top) {
+    finalPosition.bottom += finalPosition.top - top;
   }
-  const isNormalized = normalized.right !== right || normalized.left !== left || normalized.top !== top;
   return {
-    ...normalized,
+    ...finalPosition,
     ...rest,
-    isNormalized
+    isNormalized: false
   };
 }
 function invertPosition(position) {
@@ -166,6 +165,6 @@ function getTooltipPosition(position, _ref2) {
 
   // prefer 'below' over 'above', since we can always expand the document downwards,
   // and 'above' might cause issues on small viewports with large tooltips
-  return normalizePosition(leastOverflowing.position === 'above' ? findRectByPosition('below', boundingRects) : leastOverflowing);
+  return getAbsolutePosition(leastOverflowing.position === 'above' ? findRectByPosition('below', boundingRects) : leastOverflowing);
 }
 export default getTooltipPosition;

package/lib-module/index.js

@@ -15,6 +15,7 @@ export * from './Checkbox';
 export { default as CheckboxCard } from './CheckboxCard';
 export { default as CheckboxCardGroup } from './CheckboxCardGroup';
 export { default as ColourToggle } from './ColourToggle';
+export { default as DownloadApp } from './DownloadApp';
 export { default as Divider } from './Divider';
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse';
 export { default as Feedback } from './Feedback';
@@ -57,6 +58,7 @@ export * from './StackView';
 export { default as Status } from './Status';
 export { default as StepTracker } from './StepTracker';
 export { default as Tabs } from './Tabs';
+export { default as TabBar } from './TabBar';
 export { default as Tags } from './Tags';
 export * from './TextInput';
 export { default as Timeline } from './Timeline';

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.63.0",
+    "@telus-uds/system-theme-tokens": "^2.64.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -86,6 +86,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.94.0",
+  "version": "1.95.0",
   "types": "types/index.d.ts"
 }

package/src/Autocomplete/Autocomplete.jsx

@@ -102,6 +102,7 @@ const Autocomplete = React.forwardRef(
       validation,
       value,
       helpText = '',
+      loadingLabel,
       ...rest
     },
     ref
@@ -334,7 +335,7 @@ const Autocomplete = React.forwardRef(
               ref={openOverlayRef}
             >
               {isLoading ? (
-                <Loading label={getCopy('loading')} />
+                <Loading label={loadingLabel ?? getCopy('loading')} />
               ) : (
                 <Suggestions
                   hasResults={getCopy('hasResults')}

package/src/DownloadApp/DownloadApp.jsx

@@ -0,0 +1,165 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Pressable, Platform, StyleSheet } from 'react-native'
+import {
+  a11yProps,
+  linkProps,
+  hrefAttrsProp,
+  viewProps,
+  getTokensPropType,
+  resolvePressableTokens,
+  variantProp,
+  copyPropTypes,
+  selectSystemProps,
+  useCopy
+} from '../utils'
+import { useThemeTokensCallback } from '../ThemeProvider'
+import defaultDictionary from './dictionary'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
+
+const selectOuterStyles = ({ borderColor, borderWidth, borderGap, borderRadius, padding }) => ({
+  outline: 'none',
+  borderColor,
+  borderWidth,
+  borderGap,
+  borderRadius,
+  padding
+})
+
+const DownloadApp = React.forwardRef(
+  (
+    {
+      copy = 'en',
+      dictionary = defaultDictionary,
+      type = 'ios',
+      href,
+      onPress,
+      tokens = {},
+      variant = {},
+      ...props
+    },
+    ref
+  ) => {
+    const getCopy = useCopy({ dictionary, copy })
+    const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
+
+    const selectedProps = selectProps({
+      accessibilityRole: href ? 'link' : 'button',
+      href,
+      onPress: linkProps.handleHref({ href, onPress }),
+      hrefAttrs,
+      ...rest
+    })
+
+    const getDownloadAppTokens = useThemeTokensCallback('DownloadApp', tokens, variant)
+    const resolveDownloadAppTokens = (pressableState) => {
+      const themeTokens = resolvePressableTokens(getDownloadAppTokens, pressableState, {})
+      return selectOuterStyles(themeTokens)
+    }
+
+    const { androidENIcon, androidFRIcon, iosENIcon, iosFRIcon } = getDownloadAppTokens()
+
+    const imageResources = {
+      en: {
+        android: androidENIcon,
+        ios: iosENIcon
+      },
+      fr: {
+        android: androidFRIcon,
+        ios: iosFRIcon
+      }
+    }
+    const IconComponent = imageResources[copy][type]
+
+    return (
+      <Pressable
+        ref={ref}
+        style={(pressState) => [resolveDownloadAppTokens(pressState), staticStyles.row]}
+        {...selectedProps}
+      >
+        <IconComponent
+          style={staticImageSizes[type][copy]}
+          alt={type === 'ios' ? getCopy('altTextIos') : getCopy('altTextAndroid')}
+        />
+      </Pressable>
+    )
+  }
+)
+DownloadApp.displayName = 'DownloadApp'
+
+const dictionaryContentShape = PropTypes.shape({
+  altTextAndroid: PropTypes.string.isRequired,
+  altTextIos: PropTypes.string.isRequired
+})
+
+DownloadApp.propTypes = {
+  ...selectedSystemPropTypes,
+  copy: copyPropTypes,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  /**
+   * Select the type of image to show.
+   */
+  type: PropTypes.oneOf(['android', 'ios']),
+  /**
+   * It's a simple link that opens the Download Button instead of the onPress function.
+   */
+  href: PropTypes.string,
+  /**
+   * Function called when the button is pressed. Required unless the button has a href.
+   */
+  onPress: PropTypes.func,
+  /**
+   * DownloadApp tokens.
+   */
+  tokens: getTokensPropType('DownloadApp'),
+  /**
+   * DownloadApp variant.
+   */
+  variant: variantProp.propType
+}
+
+const staticStyles = StyleSheet.create({
+  row: {
+    ...Platform.select({
+      web: {
+        display: 'inline-flex',
+        width: 'fit-content'
+      },
+      default: {
+        alignSelf: 'flex-start'
+      }
+    })
+  }
+})
+
+const staticImageSizes = {
+  android: {
+    en: {
+      width: 162,
+      height: 48
+    },
+    fr: {
+      width: 162,
+      height: 48
+    }
+  },
+  ios: {
+    en: {
+      width: 144,
+      height: 48
+    },
+    fr: {
+      width: 152,
+      height: 48
+    }
+  }
+}
+
+export default DownloadApp

package/src/DownloadApp/dictionary.js

@@ -0,0 +1,10 @@
+export default {
+  en: {
+    altTextAndroid: 'Get it on Google Play',
+    altTextIos: 'Download on the App Store'
+  },
+  fr: {
+    altTextAndroid: 'Disponible sur Google Play',
+    altTextIos: 'Télécharger dans l’App Store'
+  }
+}

package/src/DownloadApp/index.js

@@ -0,0 +1,3 @@
+import DownloadApp from './DownloadApp'
+
+export default DownloadApp

package/src/Icon/IconText.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Platform, View } from 'react-native'
-
+import { Platform, View, Text, StyleSheet } from 'react-native'
 import Icon, { iconComponentPropTypes } from './Icon'
 import { getStackedContent } from '../StackView'
 import { spacingProps } from '../utils'
@@ -46,6 +45,18 @@ const IconText = React.forwardRef(
     const mobile = Platform.OS === 'android' ? iconAdjustedAndroid : iconAdjustedIOS
     const adjustedContainer = Platform.OS === 'web' ? iconContent : mobile
 
+    const adjustedContainerWithPosition = (
+      <View style={staticStyles.adjustedContainer}>{adjustedContainer}</View>
+    )
+
+    if (iconPosition === 'inline') {
+      return (
+        <Text>
+          {children} {adjustedContainerWithPosition}
+        </Text>
+      )
+    }
+
     return getStackedContent(
       iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer],
       { space, direction: 'row' }
@@ -62,9 +73,9 @@ IconText.propTypes = {
    */
   space: spacingProps.types.spacingValue,
   /**
-   * Whether the icon should be to the left of the content or the right of the content.
+   * Whether the icon should be to the left of the content, the right of the content or inline with the content.
    */
-  iconPosition: PropTypes.oneOf(['left', 'right']),
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
@@ -83,4 +94,10 @@ IconText.propTypes = {
   /* eslint-enable react/no-unused-prop-types */
 }
 
+const staticStyles = StyleSheet.create({
+  adjustedContainer: {
+    position: 'absolute'
+  }
+})
+
 export default IconText

package/src/Link/LinkBase.jsx

@@ -240,9 +240,9 @@ LinkBase.propTypes = {
    */
   icon: PropTypes.elementType,
   /**
-   * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left, right or inline with Link.
    */
-  iconPosition: PropTypes.oneOf(['left', 'right']),
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
   /**
    * On Web if href is passed, React Native Web maps this object's props to
    * `rel`, `target` and `download` attrs.

package/src/Modal/Modal.jsx

@@ -147,7 +147,7 @@ const Modal = React.forwardRef(
       if (Platform.OS === 'web') {
         const handleFocus = () => {
           // If the focus is on the last item of the web modal container, move it to the close button
-          if (document.activeElement === focusTrapRef.current) {
+          if (document.activeElement === focusTrapRef.current && closeButtonRef.current) {
             closeButtonRef.current.focus()
           }
           return undefined

package/src/TabBar/TabBar.jsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native'
+import TabBarItem from './TabBarItem'
+import { useThemeTokens } from '../ThemeProvider'
+import { variantProp, getTokensPropType, selectSystemProps, a11yProps, viewProps } from '../utils'
+
+const selectTabBarContainerStyles = ({
+  paddingTop,
+  paddingBottom,
+  borderTopWidth,
+  borderTopColor,
+  backgroundColor
+}) => ({
+  paddingTop,
+  paddingBottom,
+  borderTopWidth,
+  borderTopColor,
+  backgroundColor
+})
+
+const selectTabBarItemContainerStyles = ({ paddingLeft, paddingRight, gap }) => ({
+  paddingLeft,
+  paddingRight,
+  gap
+})
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+/**
+ * TabBar component renders a navigation bar with multiple TabBarItems.
+ * It allows users to switch between different views or sections.
+ *
+ * @component
+ * @example
+ * const items = [
+ *   { id: '1', label: 'Home', icon: <HomeIcon />, iconActive: <HomeActiveIcon /> },
+ *   { id: '2', label: 'Profile', icon: <ProfileIcon />, iconActive: <ProfileActiveIcon /> },
+ * ]
+ * return (
+ *   <TabBar
+ *     items={items}
+ *     initiallySelectedItem="1"
+ *     onChange={(itemId) => console.log(itemId)}
+ *   />
+ * )
+ */
+
+const TabBar = React.forwardRef(
+  ({ items = [], initiallySelectedItem = '0', onChange, variant, tokens, ...rest }, ref) => {
+    const [isSelected, setIsSelected] = React.useState(initiallySelectedItem)
+    const themeTokens = useThemeTokens('TabBar', tokens, variant)
+
+    const handlePress = (itemId) => {
+      setIsSelected(itemId)
+      onChange?.(itemId)
+    }
+
+    return (
+      <View
+        ref={ref}
+        style={[styles.tabBar, selectTabBarContainerStyles(themeTokens)]}
+        {...selectProps(rest)}
+      >
+        <View style={[styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)]}>
+          {items.map((item, index) => (
+            <TabBarItem
+              key={item.id}
+              label={item.label}
+              href={item.href}
+              isSelected={isSelected === item.id}
+              icon={item.icon}
+              iconActive={item.iconActive}
+              onPress={() => handlePress(item.id)}
+              id={`tab-item-${index}`}
+              accessibilityRole="tablist"
+            />
+          ))}
+        </View>
+      </View>
+    )
+  }
+)
+
+TabBar.displayName = 'TabBar'
+
+TabBar.propTypes = {
+  ...selectedSystemPropTypes,
+  /** Array of TabBarItems to be displayed in TabBar */
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      icon: PropTypes.node,
+      iconActive: PropTypes.node,
+      label: PropTypes.string.isRequired,
+      href: PropTypes.string
+    })
+  ).isRequired,
+  /** Id of the initially selected item. */
+  initiallySelectedItem: PropTypes.number,
+  /** Callback function to handle item selection change. */
+  onChange: PropTypes.func,
+  /** Variant of TabBar for styling purposes. */
+  variant: variantProp.propType,
+  /** Tokens for theming and styling. */
+  tokens: getTokensPropType('TabBar')
+}
+
+const styles = StyleSheet.create({
+  tabBar: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  tabBarItem: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%'
+  }
+})
+
+export default TabBar

package/src/TabBar/TabBarItem.jsx

@@ -0,0 +1,149 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Pressable, View, StyleSheet } from 'react-native'
+import { getTokensPropType, resolvePressableTokens, variantProp } from '../utils'
+import { useThemeTokensCallback } from '../ThemeProvider'
+import Typography from '../Typography'
+import Spacer from '../Spacer'
+
+const selectTypographyStyles = (
+  { fontWeight, color, lineHeight, fontName, activeColor },
+  isSelected
+) => ({
+  fontWeight,
+  color: isSelected ? activeColor : color,
+  lineHeight,
+  fontName
+})
+
+const selectIconContainerStyles = ({ paddingTop, paddingBottom }) => ({
+  paddingTop,
+  paddingBottom,
+  alignItems: 'center'
+})
+
+const selectIconStyles = ({ iconSize, iconColor, activeColor }, isSelected) => ({
+  size: iconSize,
+  color: isSelected ? activeColor : iconColor
+})
+
+const selectContainerStyles = ({ borderRadius, backgroundColor }) => ({
+  borderRadius,
+  backgroundColor,
+  alignSelf: 'center',
+  alignItems: 'center'
+})
+
+const TabBarItem = React.forwardRef(
+  (
+    {
+      href,
+      variant,
+      tokens,
+      label,
+      isSelected,
+      id,
+      onPress,
+      icon: IconComponent,
+      iconActive: IconActiveComponent,
+      accessibilityRole = 'tab'
+    },
+    ref
+  ) => {
+    const getTokens = useThemeTokensCallback('TabBarItem', tokens, variant)
+
+    const getPressableStyle = ({ pressed, focused, hovered }) => {
+      const resolvedTokens = resolvePressableTokens(
+        getTokens,
+        { pressed, focused, hovered },
+        { isSelected }
+      )
+      return {
+        ...resolvedTokens,
+        outline: 'none' // removes the default browser :focus outline
+      }
+    }
+
+    return (
+      <Pressable
+        ref={ref}
+        href={href}
+        nativeID={id}
+        onPress={onPress}
+        style={({ pressed, focused, hovered }) => [
+          styles.flexContainer,
+          getPressableStyle({ pressed, focused, hovered })
+        ]}
+        accessibilityRole={accessibilityRole}
+        testID={id}
+      >
+        {(pressableState) => {
+          const resolvedTokens = getPressableStyle(pressableState)
+
+          return (
+            <View style={selectContainerStyles(resolvedTokens)}>
+              <View style={[selectIconContainerStyles(resolvedTokens), styles.iconContainer]}>
+                {isSelected
+                  ? IconActiveComponent && (
+                      <IconActiveComponent {...selectIconStyles(resolvedTokens, isSelected)} />
+                    )
+                  : IconComponent && <IconComponent {...selectIconStyles(resolvedTokens)} />}
+              </View>
+              <Spacer space={1} />
+              <Typography
+                variant={{ size: 'micro' }}
+                tokens={selectTypographyStyles(resolvedTokens, isSelected)}
+                align="center"
+              >
+                {label}
+              </Typography>
+              <Spacer space={1} />
+            </View>
+          )
+        }}
+      </Pressable>
+    )
+  }
+)
+
+TabBarItem.displayName = 'TabBarItem'
+
+TabBarItem.propTypes = {
+  /** The icon to be displayed when the item is not selected. */
+  icon: PropTypes.elementType,
+  /** The icon to be displayed when the item is selected. */
+  iconActive: PropTypes.elementType,
+  /** Tokens for theming and styling the TabBarItem. */
+  tokens: getTokensPropType('TabBarItem'),
+  /** Variant of the TabBarItem for styling purposes. */
+  variant: variantProp.propType,
+  /** Callback function to handle press events. */
+  onPress: PropTypes.func,
+  /** URL to navigate to when the item is pressed. */
+  href: PropTypes.string,
+  /** Indicates whether the item is selected. */
+  isSelected: PropTypes.bool,
+  /** Unique identifier for the item. */
+  id: PropTypes.string,
+  /** Label text for the item. */
+  label: PropTypes.string.isRequired,
+  /** Accessibility role for the item. */
+  accessibilityRole: PropTypes.string
+}
+
+const styles = StyleSheet.create({
+  flexContainer: {
+    flex: 1,
+    alignItems: 'center'
+  },
+  iconContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    minWidth: 44,
+    minHeight: 40,
+    aspectRatio: 1.1
+  }
+})
+
+export default TabBarItem

package/src/TabBar/index.js

@@ -0,0 +1,3 @@
+import TabBar from './TabBar'
+
+export default TabBar

package/src/TextInput/TextInputBase.jsx

@@ -61,7 +61,7 @@ const selectInputStyles = (
     typeof value === 'number' ? Math.max(0, value - borderWidth) : value
 
   const textStyles = applyTextStyles({
-    fontName,
+    fontName: isPassword ? undefined : fontName, // In this case, we don't want to apply the fontName to the input if it's a password because Monotype don't have support for the masked characters in mobile.
     fontSize,
     lineHeight,
     fontWeight,

package/src/Tooltip/getTooltipPosition.js

@@ -1,8 +1,8 @@
-function normalizePosition(position) {
+function getAbsolutePosition(position) {
   const { left, right, bottom, top, width, ...rest } = position
 
   // adjust the coordinates so that it fits within the window
-  const normalized = {
+  const finalPosition = {
     left: Math.max(0, left),
     right: Math.max(0, right),
     top: Math.max(0, top),
@@ -12,21 +12,20 @@ function normalizePosition(position) {
   const getAbsoluteDiff = (value1, value2) => Math.abs(Math.abs(value1) - Math.abs(value2))
 
   // adjust the width by whatever has been subtracted from left or right
-  normalized.width =
+  finalPosition.width =
     width -
-    Math.abs(getAbsoluteDiff(left, normalized.left) - getAbsoluteDiff(right, normalized.right))
+    Math.abs(
+      getAbsoluteDiff(left, finalPosition.left) - getAbsoluteDiff(right, finalPosition.right)
+    )
 
-  if (normalized.top !== top) {
-    normalized.bottom += normalized.top - top
+  if (finalPosition.top !== top) {
+    finalPosition.bottom += finalPosition.top - top
   }
 
-  const isNormalized =
-    normalized.right !== right || normalized.left !== left || normalized.top !== top
-
   return {
-    ...normalized,
+    ...finalPosition,
     ...rest,
-    isNormalized
+    isNormalized: false
   }
 }
 
@@ -151,7 +150,7 @@ function getTooltipPosition(
 
   // prefer 'below' over 'above', since we can always expand the document downwards,
   // and 'above' might cause issues on small viewports with large tooltips
-  return normalizePosition(
+  return getAbsolutePosition(
     leastOverflowing.position === 'above'
       ? findRectByPosition('below', boundingRects)
       : leastOverflowing