@telus-uds/components-base 1.93.0 → 1.95.0

package/CHANGELOG.md

@@ -1,16 +1,45 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Mon, 26 Aug 2024 16:19:45 GMT and should not be manually modified.
+This log was last generated on Wed, 25 Sep 2024 16:57:49 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## 1.93.0
+## 1.95.0
 
-Mon, 26 Aug 2024 16:19:45 GMT
+Wed, 25 Sep 2024 16:57:49 GMT
 
 ### Minor changes
 
+- `DownloadApp`: add component (Mauricio.BatresMontejo@telus.com)
+- `TabBar`: new component added (35577399+JoshHC@users.noreply.github.com)
+- `Link`: add `inline` variant to `iconPosition` (evander.owusu@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.64.0
+
+### Patches
+
+- `Modal`: fix focusing on undefined ref for close button (kristina.kirpichnikova@telus.com)
+- `TextInput`: masked characters issue in password fixed (35577399+JoshHC@users.noreply.github.com)
+- `Tooltip`: fix positioning (guillermo.peitzner@telus.com)
+- `Autocomplete`: add missing loading-label functionality (guillermo.peitzner@telus.com)
+
+## 1.94.0
+
+Mon, 16 Sep 2024 12:35:38 GMT
+
+### Minor changes
+
+- `FileUpload`: add component and add an on-dismiss function to the notification component (guillermo.peitzner@telus.com)
+- `Carousel`: add peeking functionality (guillermo.peitzner@telus.com)
+- `Card`: Add `backgroundImage` prop (<tony.eng@telus.com>)
+- `ButtonGroup`: add `contained` variant, and new, `backgroundColor`, `borderRadius`, `padding`, and `gap` tokens (jaime.tuyuc@telus.com)
 - `A11yText`: add role prop (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.63.0
+
+### Patches
+
+- `MultiSelectFilter:` align with design intention (guillermo.peitzner@telus.com)
+- `TextButton`: remove flex behavior (guillermo.peitzner@telus.com)
+- Status: enable conditional rendering of `icon`. (Mauricio.BatresMontejo@telus.com)
 
 ## 1.92.0
 

package/lib/Autocomplete/Autocomplete.js

@@ -111,6 +111,7 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     validation,
     value,
     helpText = '',
+    loadingLabel,
     ...rest
   } = _ref2;
   const {
@@ -346,7 +347,7 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
         onLayout: handleMeasure,
         ref: openOverlayRef,
         children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {
-          label: getCopy('loading')
+          label: loadingLabel ?? getCopy('loading')
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Suggestions.default, {
           hasResults: getCopy('hasResults'),
           id: "autocomplete",

package/lib/Button/ButtonGroup.js

@@ -55,7 +55,11 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const {
     direction,
     space,
-    fieldSpace
+    fieldSpace,
+    borderRadius,
+    backgroundColor,
+    padding,
+    gap
   } = themeTokens;
   const getButtonTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonGroupItem', tokens, variant);
   const {
@@ -94,12 +98,24 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     inactive: inactive,
     validation: validation,
     accessibilityRole: accessibilityRole,
+    style: {
+      borderRadius,
+      backgroundColor,
+      padding,
+      ...(_Platform.default.OS === 'web' ? {
+        gap,
+        width: 'fit-content'
+      } : {
+        alignSelf: 'flex-start'
+      })
+    },
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
       accessibilityRole: innerRole,
       space: space,
       direction: direction,
       tokens: stackTokens,
+      gap: gap,
       ref: ref,
       children: items.map((_ref2, index) => {
         let {

package/lib/Card/Card.js

@@ -117,6 +117,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     onPress,
     id,
     interactiveCard,
+    backgroundImage,
     ...rest
   } = _ref3;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -240,6 +241,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
       ref: ref,
       tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : cardStyles,
+      backgroundImage: backgroundImage,
       dataSet: mediaIds && {
         media: mediaIds
       },
@@ -318,6 +320,16 @@ Card.propTypes = {
     tokens: (0, _utils.getTokensPropType)('Card'),
     selectionType: _propTypes.default.oneOf(Object.values(SelectionType)),
     variant: _utils.variantProp.propType
+  }),
+  /**
+   * Apply background image to the card.
+   */
+  backgroundImage: _propTypes.default.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.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
+    alt: _propTypes.default.string,
+    resizeMode: _props.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
   })
 };
 var _default = Card;

package/lib/Card/CardBase.js

@@ -8,6 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ImageBackground"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _props = require("../utils/props");
@@ -61,23 +63,56 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     children,
     tokens,
     dataSet,
+    backgroundImage,
     ...rest
   } = _ref2;
   const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens);
   const props = selectProps(rest);
+  const {
+    src = '',
+    alt = '',
+    resizeMode = ''
+  } = backgroundImage || {};
+  const backgroundImageResizeMode = (0, _utils.useResponsiveProp)(resizeMode, 'cover');
+  const imageSourceViewport = (0, _utils.formatImageSource)((0, _utils.useResponsiveProp)(src));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: cardStyle,
     dataSet: dataSet,
     ref: ref,
     ...props,
-    children: children
+    children: src ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
+      alt: alt,
+      source: imageSourceViewport,
+      imageStyle: {
+        borderRadius: (cardStyle === null || cardStyle === void 0 ? void 0 : cardStyle.borderRadius) - (cardStyle === null || cardStyle === void 0 ? void 0 : cardStyle.borderWidth)
+      },
+      resizeMode: backgroundImageResizeMode,
+      style: styles.imageBackground,
+      children: children
+    }) : children
   });
 });
 CardBase.displayName = 'CardBase';
+const styles = _StyleSheet.default.create({
+  imageBackground: {
+    width: '100%',
+    height: '100%'
+  }
+});
 CardBase.propTypes = {
   ...selectedSystemPropTypes,
   children: _propTypes.default.node,
-  tokens: (0, _utils.getTokensPropType)('Card')
+  tokens: (0, _utils.getTokensPropType)('Card'),
+  /**
+   * Apply background image to the card.
+   */
+  backgroundImage: _propTypes.default.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.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
+    alt: _propTypes.default.string,
+    resizeMode: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
+  })
 };
 var _default = CardBase;
 exports.default = _default;

package/lib/Carousel/Carousel.js

@@ -54,9 +54,9 @@ const selectContainerStyles = width => ({
   overflow: 'hidden',
   width
 });
-const selectSwipeAreaStyles = (count, width) => ({
+const selectSwipeAreaStyles = (count, width, enablePeeking) => ({
   width: width * count,
-  justifyContent: 'space-between',
+  justifyContent: enablePeeking ? 'flex-start' : 'space-between',
   flexDirection: 'row'
 });
 const getDynamicPositionProperty = areStylesAppliedOnPreviousButton => areStylesAppliedOnPreviousButton ? 'left' : 'right';
@@ -65,7 +65,8 @@ const selectControlButtonPositionStyles = _ref => {
     positionVariant,
     buttonWidth,
     positionProperty = getDynamicPositionProperty(),
-    spaceBetweenSlideAndButton
+    spaceBetweenSlideAndButton,
+    enablePeeking
   } = _ref;
   const styles = {};
   if (positionVariant === 'edge') {
@@ -73,11 +74,15 @@ const selectControlButtonPositionStyles = _ref => {
   } else if (positionVariant === 'inside') {
     styles[positionProperty] = 0;
   } else if (positionVariant === 'outside') {
-    styles[positionProperty] = -1 * (spaceBetweenSlideAndButton + buttonWidth);
+    if (enablePeeking) {
+      styles[positionProperty] = 0;
+    } else {
+      styles[positionProperty] = -1 * (spaceBetweenSlideAndButton + buttonWidth);
+    }
   }
   return styles;
 };
-const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton) => {
+const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking) => {
   const styles = {
     zIndex: 1,
     position: 'absolute'
@@ -95,10 +100,31 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
       positionVariant: previousNextNavigationPosition,
       buttonWidth: previousNextNavigationButtonWidth,
       positionProperty: getDynamicPositionProperty(areStylesAppliedOnPreviousButton),
-      spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation
+      spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
+      enablePeeking
     })
   };
 };
+const getPeekingProps = viewport => {
+  if (viewport === 'xs' || viewport === 'sm') {
+    return {
+      peekingFirstSpace: 48,
+      peekingGap: 16,
+      peekingLastSpace: 48,
+      peekingMarginLeft: 24,
+      peekingMarginRight: 24,
+      peekingMiddleSpace: 28
+    };
+  }
+  return {
+    peekingFirstSpace: 48,
+    peekingGap: 16,
+    peekingLastSpace: 48,
+    peekingMarginLeft: 16,
+    peekingMarginRight: 16,
+    peekingMiddleSpace: 24
+  };
+};
 const selectIconStyles = _ref2 => {
   let {
     iconBackgroundColor
@@ -196,6 +222,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     slideDuration = 0,
     transitionDuration = 0,
     autoPlay = false,
+    enablePeeking = false,
     ...rest
   } = _ref3;
   let childrenArray = (0, _utils.unpackFragment)(children);
@@ -292,6 +319,13 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         useNativeDriver: false,
         duration: transitionDuration * 1000
       }).start(handleAnimationEndToIndex);
+    } else if (enablePeeking) {
+      _Animated.default.timing(pan, {
+        ...springConfig,
+        toValue,
+        useNativeDriver: false,
+        duration: transitionDuration ? transitionDuration * 1000 : 1000
+      }).start(handleAnimationEndToIndex);
     } else {
       _Animated.default.spring(pan, {
         ...springConfig,
@@ -299,7 +333,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     }
-  }, [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled]);
+  }, [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking]);
   const stopAutoplay = _react.default.useCallback(() => {
     if (autoPlayRef !== null && autoPlayRef !== void 0 && autoPlayRef.current) {
       clearTimeout(autoPlayRef === null || autoPlayRef === void 0 ? void 0 : autoPlayRef.current);
@@ -601,7 +635,8 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           positionVariant: previousNextNavigationPosition,
           buttonWidth: previousNextNavigationButtonWidth,
           positionProperty: getDynamicPositionProperty(),
-          spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation
+          spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
+          enablePeeking
         })],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
           icon: isCarouselPlaying ? pauseIcon : playIcon,
@@ -610,7 +645,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           onPress: onAnimationControlButtonPress
         })
       }) : null, showPreviousNextNavigation && childrenArray.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true),
+        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking),
         testID: "previous-button-container",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
           onLayout: onPreviousNextNavigationButtonLayout,
@@ -633,7 +668,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectContainerStyles(containerLayout.width),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
-          style: _StyleSheet.default.flatten([selectSwipeAreaStyles(childrenArray.length, containerLayout.width), {
+          style: _StyleSheet.default.flatten([selectSwipeAreaStyles(childrenArray.length, containerLayout.width, enablePeeking), {
             transform: [{
               translateX: pan.x
             }, {
@@ -649,7 +684,9 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
             const hidden = !isAnimating && index !== activeIndex;
             const clonedElement = /*#__PURE__*/_react.default.cloneElement(element, {
               elementIndex: index,
-              hidden
+              hidden: enablePeeking ? false : hidden,
+              enablePeeking,
+              peekingProps: getPeekingProps(viewport)
             });
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
               children: clonedElement
@@ -657,7 +694,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           })
         })
       }), showPreviousNextNavigation && childrenArray.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false),
+        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking),
         testID: "next-button-container",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
           onLayout: onPreviousNextNavigationButtonLayout,
@@ -851,7 +888,12 @@ Carousel.propTypes = {
    * - Default value is `0`
    * - `autoPlay` and `slideDuration` are required to be set for this to work
    */
-  transitionDuration: _propTypes.default.number
+  transitionDuration: _propTypes.default.number,
+  /**
+   * If set to `true`, the Carousel will show the previous and next slides
+   * - Default value is `false`
+   */
+  enablePeeking: _propTypes.default.bool
 };
 Carousel.Item = _CarouselItem.default;
 Carousel.displayName = 'Carousel';

package/lib/Carousel/CarouselItem/CarouselItem.js

@@ -13,37 +13,96 @@ var _CarouselContext = require("../CarouselContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const selectContainerStyle = _ref => {
+  let {
+    width,
+    activeIndex,
+    elementIndex,
+    totalItems,
+    enablePeeking,
+    peekingMarginLeft,
+    peekingMarginRight,
+    peekingFirstSpace,
+    peekingLastSpace,
+    peekingMiddleSpace,
+    peekingGap,
+    hidden
+  } = _ref;
+  const isFirst = elementIndex === 0;
+  const isLast = elementIndex === totalItems - 1;
+  const isMiddle = !isFirst && !isLast;
+  const isActive = activeIndex === elementIndex;
+  let adjustedWidth = width;
+  let marginLeft = 0;
+  let marginRight = 0;
+  if (enablePeeking) {
+    if (isActive) {
+      adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace);
+    } else if (isMiddle) {
+      adjustedWidth = width - peekingGap;
+    }
+    if (isFirst) {
+      if (isActive) {
+        marginLeft = peekingMarginLeft;
+      } else if (activeIndex === totalItems - 1) {
+        marginLeft = peekingLastSpace;
+      } else {
+        marginLeft = peekingMiddleSpace;
+      }
+    }
+    if (isLast && isActive) {
+      marginRight = peekingMarginRight;
+    } else {
+      marginRight = peekingGap;
+    }
+  }
+  const style = {
+    width: adjustedWidth,
+    marginLeft,
+    marginRight
+  };
+  if (hidden && _Platform.default.OS === 'web') {
+    style.visibility = 'hidden';
+  }
+  return style;
+};
 
 /**
  * `Carousel.Item` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     elementIndex,
     tag = 'li',
     hidden,
+    enablePeeking,
+    peekingProps,
     ...rest
-  } = _ref;
+  } = _ref2;
   const {
     width,
-    activeIndex
+    activeIndex,
+    totalItems,
+    height
   } = (0, _CarouselContext.useCarousel)();
   const selectedProps = selectProps({
     ...rest,
     ...(0, _utils.getA11yPropsFromHtmlTag)(tag, rest.accessibilityRole)
   });
   const focusabilityProps = activeIndex === elementIndex ? {} : _utils.a11yProps.nonFocusableProps;
-  const style = {
-    width
-  };
-  if (hidden && _Platform.default.OS === 'web') {
-    // On web, visibility: hidden makes all children non-focusable. It doesn't exist on native.
-    style.visibility = 'hidden';
-  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: style,
+    style: selectContainerStyle({
+      width,
+      activeIndex,
+      elementIndex,
+      totalItems,
+      hidden,
+      height,
+      enablePeeking,
+      ...peekingProps
+    }),
     ...selectedProps,
     ...focusabilityProps,
     ref: ref,
@@ -77,7 +136,22 @@ CarouselItem.propTypes = {
   /**
    * Function to set carousel content background color when slide is being display
    */
-  setContentBackgroundColor: _propTypes.default.func
+  setContentBackgroundColor: _propTypes.default.func,
+  /**
+   * Boolean to enable peeking effect on the first and last slide
+   */
+  enablePeeking: _propTypes.default.bool,
+  /**
+   * Object to configure the peeking effect
+   */
+  peekingProps: _propTypes.default.shape({
+    peekingMarginLeft: _propTypes.default.number,
+    peekingMarginRight: _propTypes.default.number,
+    peekingFirstSpace: _propTypes.default.number,
+    peekingLastSpace: _propTypes.default.number,
+    peekingMiddleSpace: _propTypes.default.number,
+    peekingGap: _propTypes.default.number
+  })
 };
 CarouselItem.displayName = 'Carousel.Item';
 var _default = CarouselItem;

package/lib/DownloadApp/DownloadApp.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _utils = require("../utils");
+var _ThemeProvider = require("../ThemeProvider");
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps, _utils.viewProps]);
+const selectOuterStyles = _ref => {
+  let {
+    borderColor,
+    borderWidth,
+    borderGap,
+    borderRadius,
+    padding
+  } = _ref;
+  return {
+    outline: 'none',
+    borderColor,
+    borderWidth,
+    borderGap,
+    borderRadius,
+    padding
+  };
+};
+const DownloadApp = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    copy = 'en',
+    dictionary = _dictionary.default,
+    type = 'ios',
+    href,
+    onPress,
+    tokens = {},
+    variant = {},
+    ...props
+  } = _ref2;
+  const getCopy = (0, _utils.useCopy)({
+    dictionary,
+    copy
+  });
+  const {
+    hrefAttrs,
+    rest
+  } = _utils.hrefAttrsProp.bundle(props);
+  const selectedProps = selectProps({
+    accessibilityRole: href ? 'link' : 'button',
+    href,
+    onPress: _utils.linkProps.handleHref({
+      href,
+      onPress
+    }),
+    hrefAttrs,
+    ...rest
+  });
+  const getDownloadAppTokens = (0, _ThemeProvider.useThemeTokensCallback)('DownloadApp', tokens, variant);
+  const resolveDownloadAppTokens = pressableState => {
+    const themeTokens = (0, _utils.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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    style: pressState => [resolveDownloadAppTokens(pressState), staticStyles.row],
+    ...selectedProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+      style: staticImageSizes[type][copy],
+      alt: type === 'ios' ? getCopy('altTextIos') : getCopy('altTextAndroid')
+    })
+  });
+});
+DownloadApp.displayName = 'DownloadApp';
+const dictionaryContentShape = _propTypes.default.shape({
+  altTextAndroid: _propTypes.default.string.isRequired,
+  altTextIos: _propTypes.default.string.isRequired
+});
+DownloadApp.propTypes = {
+  ...selectedSystemPropTypes,
+  copy: _utils.copyPropTypes,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  /**
+   * Select the type of image to show.
+   */
+  type: _propTypes.default.oneOf(['android', 'ios']),
+  /**
+   * It's a simple link that opens the Download Button instead of the onPress function.
+   */
+  href: _propTypes.default.string,
+  /**
+   * Function called when the button is pressed. Required unless the button has a href.
+   */
+  onPress: _propTypes.default.func,
+  /**
+   * DownloadApp tokens.
+   */
+  tokens: (0, _utils.getTokensPropType)('DownloadApp'),
+  /**
+   * DownloadApp variant.
+   */
+  variant: _utils.variantProp.propType
+};
+const staticStyles = _StyleSheet.default.create({
+  row: {
+    ..._Platform.default.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
+    }
+  }
+};
+var _default = DownloadApp;
+exports.default = _default;

package/lib/DownloadApp/dictionary.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _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'
+  }
+};
+exports.default = _default;