@telus-uds/components-base 1.93.0 → 1.95.0

package/lib-module/TabBar/TabBar.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import TabBarItem from './TabBarItem';
+import { useThemeTokens } from '../ThemeProvider';
+import { variantProp, getTokensPropType, selectSystemProps, a11yProps, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const selectTabBarContainerStyles = _ref => {
+  let {
+    paddingTop,
+    paddingBottom,
+    borderTopWidth,
+    borderTopColor,
+    backgroundColor
+  } = _ref;
+  return {
+    paddingTop,
+    paddingBottom,
+    borderTopWidth,
+    borderTopColor,
+    backgroundColor
+  };
+};
+const selectTabBarItemContainerStyles = _ref2 => {
+  let {
+    paddingLeft,
+    paddingRight,
+    gap
+  } = _ref2;
+  return {
+    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 = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    items = [],
+    initiallySelectedItem = '0',
+    onChange,
+    variant,
+    tokens,
+    ...rest
+  } = _ref3;
+  const [isSelected, setIsSelected] = React.useState(initiallySelectedItem);
+  const themeTokens = useThemeTokens('TabBar', tokens, variant);
+  const handlePress = itemId => {
+    setIsSelected(itemId);
+    onChange === null || onChange === void 0 ? void 0 : onChange(itemId);
+  };
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [styles.tabBar, selectTabBarContainerStyles(themeTokens)],
+    ...selectProps(rest),
+    children: /*#__PURE__*/_jsx(View, {
+      style: [styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)],
+      children: items.map((item, index) => /*#__PURE__*/_jsx(TabBarItem, {
+        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"
+      }, item.id))
+    })
+  });
+});
+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/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/index.js

@@ -8,12 +8,14 @@ export * from './Button';
 export { default as Card, PressableCardBase } from './Card';
 export { default as CardGroup } from './CardGroup';
 export * from './Carousel';
+export { default as FileUpload } from './FileUpload';
 export { default as Listbox } from './Listbox';
 export { default as Checkbox } from './Checkbox';
 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';
@@ -56,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/lib-module/utils/convertFromMegaByteToByte.js

@@ -0,0 +1,10 @@
+/**
+ * Converts a value from megabytes to bytes.
+ *
+ * @param {number} megaByte - The value in megabytes to be converted.
+ * @returns {number} The converted value in bytes.
+ */
+const BYTES_IN_A_MEGABYTE = 1024 * 1024;
+export default function convertFromMegaByteToByte(megaByte) {
+  return megaByte * BYTES_IN_A_MEGABYTE;
+}

package/lib-module/utils/formatImageSource.js

@@ -0,0 +1,27 @@
+// react native source for Image and ImageBackground needs proper formatting to work
+// remote sources that start with 'http' and base64 encoded sources that start with 'data:' need be wrapped in uri when passing source prop for Image and ImageBackground ie. source={ uri: image }
+// local source for image can be passed normally without wrapping in uri ie. source={ image }
+
+/**
+ *  example code from react native docs: https://reactnative.dev/docs/imagebackground
+ *
+ *  const image = {uri: 'https://legacy.reactjs.org/logo-og.png'}
+ *
+ *  const App = () => (
+ *    <View style={styles.container}>
+ *      <ImageBackground source={image} resizeMode="cover" style={styles.image}>
+ *        <Text style={styles.text}>Inside</Text>
+ *      </ImageBackground>
+ *    </View>
+ *  )
+ */
+
+/**
+ * Formats the image source for React Native Image and ImageBackground components.
+ * @param {string|number} source - The image source, either a URI string or a number (when a local image source is bundled in IOS or Android app).
+ * @returns {object|string} - The formatted image source.
+ */
+const formatImageSource = source => typeof source === 'string' && (source.startsWith('http') || source.startsWith('data:')) ? {
+  uri: source
+} : source;
+export default formatImageSource;

package/lib-module/utils/index.js

@@ -20,4 +20,6 @@ export * from './ssr';
 export { default as containUniqueFields } from './containUniqueFields';
 export { default as BaseView } from './BaseView';
 export { default as htmlAttrs } from './htmlAttrs';
-export { transformGradient } from './transformGradient';
+export { transformGradient } from './transformGradient';
+export { default as convertFromMegaByteToByte } from './convertFromMegaByteToByte';
+export { default as formatImageSource } from './formatImageSource';

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.62.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",
@@ -21,7 +21,8 @@
     "prop-types": "^15.7.2",
     "react-native-picker-select": "^8.0.4",
     "semver": "7.5.2",
-    "string.prototype.matchall": "^4.0.9"
+    "string.prototype.matchall": "^4.0.9",
+    "expo-document-picker": "~10.3.0"
   },
   "description": "Base components",
   "devDependencies": {
@@ -85,6 +86,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.93.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/Button/ButtonGroup.jsx

@@ -63,7 +63,8 @@ const ButtonGroup = React.forwardRef(
     const viewport = useViewport()
     const themeTokens = useThemeTokens('ButtonGroup', tokens, variant, { viewport })
     const stackTokens = selectTokens('StackView', themeTokens)
-    const { direction, space, fieldSpace } = themeTokens
+    const { direction, space, fieldSpace, borderRadius, backgroundColor, padding, gap } =
+      themeTokens
 
     const getButtonTokens = useThemeTokensCallback('ButtonGroupItem', tokens, variant)
 
@@ -105,6 +106,12 @@ const ButtonGroup = React.forwardRef(
         inactive={inactive}
         validation={validation}
         accessibilityRole={accessibilityRole}
+        style={{
+          borderRadius,
+          backgroundColor,
+          padding,
+          ...(Platform.OS === 'web' ? { gap, width: 'fit-content' } : { alignSelf: 'flex-start' })
+        }}
         {...selectProps(rest)}
       >
         <StackWrap
@@ -112,6 +119,7 @@ const ButtonGroup = React.forwardRef(
           space={space}
           direction={direction}
           tokens={stackTokens}
+          gap={gap}
           ref={ref}
         >
           {items.map(

package/src/Card/Card.jsx

@@ -9,7 +9,7 @@ import {
 } from '../ThemeProvider'
 import { getTokensPropType, variantProp, StyleSheet, createMediaQueryStyles } from '../utils'
 import { useViewport } from '../ViewportProvider'
-import { a11yProps, linkProps, selectSystemProps, viewProps } from '../utils/props'
+import { a11yProps, linkProps, selectSystemProps, viewProps, responsiveProps } from '../utils/props'
 import CardBase from './CardBase'
 import PressableCardBase from './PressableCardBase'
 import CheckboxButton from '../Checkbox/CheckboxButton'
@@ -100,7 +100,10 @@ const getInputProps = ({
  * depending on what you are trying to achieve.
  */
 const Card = React.forwardRef(
-  ({ children, tokens, variant, dataSet, onPress, id, interactiveCard, ...rest }, ref) => {
+  (
+    { children, tokens, variant, dataSet, onPress, id, interactiveCard, backgroundImage, ...rest },
+    ref
+  ) => {
     const viewport = useViewport()
     const { themeOptions } = useTheme()
 
@@ -213,6 +216,7 @@ const Card = React.forwardRef(
         <CardBase
           ref={ref}
           tokens={interactiveCard?.body ? restOfTokens : cardStyles}
+          backgroundImage={backgroundImage}
           dataSet={mediaIds && { media: mediaIds }}
           {...selectProps(rest)}
         >
@@ -310,6 +314,18 @@ Card.propTypes = {
     tokens: getTokensPropType('Card'),
     selectionType: PropTypes.oneOf(Object.values(SelectionType)),
     variant: variantProp.propType
+  }),
+  /**
+   * Apply background image to the card.
+   */
+  backgroundImage: PropTypes.shape({
+    // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
+    // src is an object when used responsively to provide different image sources for different screen sizes
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
+    alt: PropTypes.string,
+    resizeMode: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])
+    )
   })
 }
 

package/src/Card/CardBase.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View, Platform } from 'react-native'
+import { View, Platform, ImageBackground, StyleSheet } from 'react-native'
 
 import { applyShadowToken } from '../ThemeProvider'
-import { getTokensPropType } from '../utils'
+import { getTokensPropType, responsiveProps, useResponsiveProp, formatImageSource } from '../utils'
 import { a11yProps, viewProps, selectSystemProps } from '../utils/props'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -50,21 +50,56 @@ const selectStyles = ({
  * A themeless base component for Card which components can apply theme tokens to. Not
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
-const CardBase = React.forwardRef(({ children, tokens, dataSet, ...rest }, ref) => {
-  const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens)
-  const props = selectProps(rest)
-  return (
-    <View style={cardStyle} dataSet={dataSet} ref={ref} {...props}>
-      {children}
-    </View>
-  )
-})
+const CardBase = React.forwardRef(
+  ({ children, tokens, dataSet, backgroundImage, ...rest }, ref) => {
+    const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens)
+    const props = selectProps(rest)
+
+    const { src = '', alt = '', resizeMode = '' } = backgroundImage || {}
+    const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover')
+    const imageSourceViewport = formatImageSource(useResponsiveProp(src))
+
+    return (
+      <View style={cardStyle} dataSet={dataSet} ref={ref} {...props}>
+        {src ? (
+          <ImageBackground
+            alt={alt}
+            source={imageSourceViewport}
+            imageStyle={{ borderRadius: cardStyle?.borderRadius - cardStyle?.borderWidth }}
+            resizeMode={backgroundImageResizeMode}
+            style={styles.imageBackground}
+          >
+            {children}
+          </ImageBackground>
+        ) : (
+          children
+        )}
+      </View>
+    )
+  }
+)
 CardBase.displayName = 'CardBase'
 
+const styles = StyleSheet.create({
+  imageBackground: { width: '100%', height: '100%' }
+})
+
 CardBase.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.node,
-  tokens: getTokensPropType('Card')
+  tokens: getTokensPropType('Card'),
+  /**
+   * Apply background image to the card.
+   */
+  backgroundImage: PropTypes.shape({
+    // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
+    // src is an object when used responsively to provide different image sources for different screen sizes
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
+    alt: PropTypes.string,
+    resizeMode: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])
+    )
+  })
 }
 
 export default CardBase