@telus-uds/components-base 1.94.0 → 1.96.0

package/lib-module/TabBar/TabBarItem.js

@@ -0,0 +1,177 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { getTokensPropType, resolvePressableTokens, variantProp } from '../utils';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import Typography from '../Typography';
+import Spacer from '../Spacer';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const selectTypographyStyles = (_ref, isSelected) => {
+  let {
+    fontWeight,
+    color,
+    lineHeight,
+    fontName,
+    activeColor
+  } = _ref;
+  return {
+    fontWeight,
+    color: isSelected ? activeColor : color,
+    lineHeight,
+    fontName
+  };
+};
+const selectIconContainerStyles = _ref2 => {
+  let {
+    paddingTop,
+    paddingBottom
+  } = _ref2;
+  return {
+    paddingTop,
+    paddingBottom,
+    alignItems: 'center'
+  };
+};
+const selectIconStyles = (_ref3, isSelected) => {
+  let {
+    iconSize,
+    iconColor,
+    activeColor
+  } = _ref3;
+  return {
+    size: iconSize,
+    color: isSelected ? activeColor : iconColor
+  };
+};
+const selectContainerStyles = _ref4 => {
+  let {
+    borderRadius,
+    backgroundColor
+  } = _ref4;
+  return {
+    borderRadius,
+    backgroundColor,
+    alignSelf: 'center',
+    alignItems: 'center'
+  };
+};
+const TabBarItem = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+  let {
+    href,
+    variant,
+    tokens,
+    label,
+    isSelected,
+    id,
+    onPress,
+    icon: IconComponent,
+    iconActive: IconActiveComponent,
+    accessibilityRole = 'tab'
+  } = _ref5;
+  const getTokens = useThemeTokensCallback('TabBarItem', tokens, variant);
+  const getPressableStyle = _ref6 => {
+    let {
+      pressed,
+      focused,
+      hovered
+    } = _ref6;
+    const resolvedTokens = resolvePressableTokens(getTokens, {
+      pressed,
+      focused,
+      hovered
+    }, {
+      isSelected
+    });
+    return {
+      ...resolvedTokens,
+      outline: 'none' // removes the default browser :focus outline
+    };
+  };
+
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
+    href: href,
+    nativeID: id,
+    onPress: onPress,
+    style: _ref7 => {
+      let {
+        pressed,
+        focused,
+        hovered
+      } = _ref7;
+      return [styles.flexContainer, getPressableStyle({
+        pressed,
+        focused,
+        hovered
+      })];
+    },
+    accessibilityRole: accessibilityRole,
+    testID: id,
+    children: pressableState => {
+      const resolvedTokens = getPressableStyle(pressableState);
+      return /*#__PURE__*/_jsxs(View, {
+        style: selectContainerStyles(resolvedTokens),
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [selectIconContainerStyles(resolvedTokens), styles.iconContainer],
+          children: isSelected ? IconActiveComponent && /*#__PURE__*/_jsx(IconActiveComponent, {
+            ...selectIconStyles(resolvedTokens, isSelected)
+          }) : IconComponent && /*#__PURE__*/_jsx(IconComponent, {
+            ...selectIconStyles(resolvedTokens)
+          })
+        }), /*#__PURE__*/_jsx(Spacer, {
+          space: 1
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: 'micro'
+          },
+          tokens: selectTypographyStyles(resolvedTokens, isSelected),
+          align: "center",
+          children: label
+        }), /*#__PURE__*/_jsx(Spacer, {
+          space: 1
+        })]
+      });
+    }
+  });
+});
+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/lib-module/TabBar/index.js

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

package/lib-module/TextInput/TextInputBase.js

@@ -42,7 +42,8 @@ const selectInputStyles = function (_ref, themeOptions, inactive, type) {
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => 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/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/Typography/Typography.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
 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';
@@ -39,9 +40,22 @@ const selectTextStyles = (_ref, themeOptions) => {
     gradient
   });
 };
+const HALF_FONT_SIZE = 2;
+const QUARTER_FONT_SIZE = 4;
+const selectMobileSubSupStyles = (_ref2, type) => {
+  let {
+    fontSize
+  } = _ref2;
+  return {
+    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 = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
     variant,
@@ -54,7 +68,7 @@ const Typography = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     dataSet,
     strikeThrough = false,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const viewport = useViewport();
   const {
     themeOptions
@@ -101,8 +115,8 @@ const Typography = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let textStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
-    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref3) => {
-      let [vp, viewportTokens] = _ref3;
+    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref4) => {
+      let [vp, viewportTokens] = _ref4;
       acc[vp] = selectTextStyles({
         textAlign: align,
         textDecorationLine,
@@ -136,22 +150,31 @@ const Typography = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...selectContainerProps(rest)
   };
   const resetTagStyling = child => {
-    if (typeof child === 'object' && ((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
-      var _child$props;
-      const childStyles = (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {};
-      const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize;
-      const sanitizedChild = /*#__PURE__*/React.cloneElement(child, {
-        style: {
-          ...childStyles,
-          ...(supFontSize ? {
-            fontSize: supFontSize
-          } : {}),
-          lineHeight: 0
-        }
-      });
-      return sanitizedChild;
+    var _child$props;
+    if (typeof child !== 'object' || !((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
+      return child;
     }
-    return child;
+    const childStyles = (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {};
+    const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize;
+    const isMobile = Platform.OS === 'ios' || Platform.OS === 'android';
+    const isSubSup = (child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup';
+    const mobileStyles = isMobile && isSubSup ? selectMobileSubSupStyles(themeTokens, child === null || child === void 0 ? void 0 : child.type) : {};
+    const defaultStyles = !isMobile && isSubSup ? {
+      fontSize: supFontSize,
+      lineHeight: 0
+    } : {};
+    const sanitizedChild = /*#__PURE__*/React.cloneElement(isMobile && isSubSup ? /*#__PURE__*/_jsx(View, {
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [childStyles, mobileStyles],
+        children: child.props.children
+      })
+    }) : child, {
+      style: {
+        ...childStyles,
+        ...defaultStyles
+      }
+    });
+    return sanitizedChild;
   };
   const sanitizeChildren = () => {
     if (Array.isArray(children)) {

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';
@@ -69,6 +71,6 @@ export { default as BaseProvider } from './BaseProvider';
 export { useHydrationContext } from './BaseProvider/HydrationContext';
 export { default as Validator } from './Validator';
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
-export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, useThemeTokensCallback, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider';
+export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, useThemeTokensCallback, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken, useResponsiveThemeTokens } from './ThemeProvider';
 export * from './utils';
 export { default as Portal } from './Portal';

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.65.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.96.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
@@ -134,6 +135,8 @@ const Autocomplete = React.forwardRef(
     // When it's nested, selected value
     const [nestedSelectedValue, setNestedSelectedValue] = React.useState(null)
 
+    const [isInputVisible, setIsInputVisible] = React.useState(true)
+
     const { supportsProps, ...selectedProps } = selectProps(rest)
     const { hint, label: inputLabel } = supportsProps
     const hintExpansionEnabled = isFocused && helpText && !currentValue
@@ -243,6 +246,32 @@ const Autocomplete = React.forwardRef(
       }
     }, [nestedSelectedValue, items])
 
+    React.useEffect(() => {
+      if (Platform.OS === 'ios' || Platform.OS === 'android') {
+        return undefined
+      }
+
+      const observer = new IntersectionObserver((entries) => {
+        const [entry] = entries
+        setIsInputVisible(entry.isIntersecting)
+        if (!entry.isIntersecting) {
+          setIsExpanded(false)
+        }
+      })
+
+      const currentInputRef = inputRef.current
+
+      if (currentInputRef) {
+        observer.observe(currentInputRef)
+      }
+
+      return () => {
+        if (currentInputRef) {
+          observer.unobserve(currentInputRef)
+        }
+      }
+    }, [inputRef])
+
     const handleClose = (event) => {
       if (
         (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27')) ||
@@ -312,7 +341,18 @@ const Autocomplete = React.forwardRef(
                 readOnly={readOnly}
                 ref={inputRef}
                 {...(Platform.OS !== 'web'
-                  ? { onLayout: (event) => setSourceLayout(event.nativeEvent.layout) }
+                  ? {
+                      onLayout: (event) => {
+                        setSourceLayout(event.nativeEvent.layout)
+                        const { y, height } = event.nativeEvent.layout
+                        if (y >= 0 && height > 0) {
+                          setIsInputVisible(true)
+                        } else {
+                          setIsInputVisible(false)
+                          setIsExpanded(false)
+                        }
+                      }
+                    }
                   : {})}
                 tokens={inputTokens}
                 validation={validation}
@@ -323,7 +363,7 @@ const Autocomplete = React.forwardRef(
             )
           }}
         </InputSupports>
-        {(isExpanded || hintExpansionEnabled) && (
+        {(isExpanded || hintExpansionEnabled) && isInputVisible && (
           <>
             <Listbox.Overlay
               overlaidPosition={overlaidPosition}
@@ -334,7 +374,7 @@ const Autocomplete = React.forwardRef(
               ref={openOverlayRef}
             >
               {isLoading ? (
-                <Loading label={getCopy('loading')} />
+                <Loading label={loadingLabel ?? getCopy('loading')} />
               ) : (
                 <Suggestions
                   hasResults={getCopy('hasResults')}

package/src/Card/CardBase.jsx

@@ -21,6 +21,7 @@ const selectStyles = ({
   paddingTop,
   minWidth,
   shadow,
+  backgroundGradient,
   gradient
 }) => {
   return {
@@ -42,6 +43,11 @@ const selectStyles = ({
           boxShadow: `inset 0 1000px white`,
           border: `${borderWidth}px solid transparent`
         }
+      : {}),
+    ...(backgroundGradient && Platform.OS === 'web'
+      ? {
+          backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
+        }
       : {})
   }
 }

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