@telus-uds/components-base 1.93.0 → 1.94.0

package/lib-module/Card/Card.js

@@ -4,7 +4,7 @@ import View from "react-native-web/dist/exports/View";
 import { useThemeTokens, useThemeTokensCallback, useResponsiveThemeTokens, useTheme } 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';
@@ -112,6 +112,7 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     onPress,
     id,
     interactiveCard,
+    backgroundImage,
     ...rest
   } = _ref3;
   const viewport = useViewport();
@@ -235,6 +236,7 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     children: /*#__PURE__*/_jsx(CardBase, {
       ref: ref,
       tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : cardStyles,
+      backgroundImage: backgroundImage,
       dataSet: mediaIds && {
         media: mediaIds
       },
@@ -313,6 +315,16 @@ 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']))
   })
 };
 export default Card;

package/lib-module/Card/CardBase.js

@@ -2,8 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
+import ImageBackground from "react-native-web/dist/exports/ImageBackground";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { applyShadowToken } from '../ThemeProvider';
-import { getTokensPropType } from '../utils';
+import { getTokensPropType, responsiveProps, useResponsiveProp, formatImageSource } from '../utils';
 import { a11yProps, viewProps, selectSystemProps } from '../utils/props';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -54,22 +56,55 @@ const CardBase = /*#__PURE__*/React.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 = useResponsiveProp(resizeMode, 'cover');
+  const imageSourceViewport = formatImageSource(useResponsiveProp(src));
   return /*#__PURE__*/_jsx(View, {
     style: cardStyle,
     dataSet: dataSet,
     ref: ref,
     ...props,
-    children: children
+    children: src ? /*#__PURE__*/_jsx(ImageBackground, {
+      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.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;

package/lib-module/Carousel/Carousel.js

@@ -48,9 +48,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';
@@ -59,7 +59,8 @@ const selectControlButtonPositionStyles = _ref => {
     positionVariant,
     buttonWidth,
     positionProperty = getDynamicPositionProperty(),
-    spaceBetweenSlideAndButton
+    spaceBetweenSlideAndButton,
+    enablePeeking
   } = _ref;
   const styles = {};
   if (positionVariant === 'edge') {
@@ -67,11 +68,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'
@@ -89,10 +94,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
@@ -190,6 +216,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     slideDuration = 0,
     transitionDuration = 0,
     autoPlay = false,
+    enablePeeking = false,
     ...rest
   } = _ref3;
   let childrenArray = unpackFragment(children);
@@ -286,6 +313,13 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         useNativeDriver: false,
         duration: transitionDuration * 1000
       }).start(handleAnimationEndToIndex);
+    } else if (enablePeeking) {
+      Animated.timing(pan, {
+        ...springConfig,
+        toValue,
+        useNativeDriver: false,
+        duration: transitionDuration ? transitionDuration * 1000 : 1000
+      }).start(handleAnimationEndToIndex);
     } else {
       Animated.spring(pan, {
         ...springConfig,
@@ -293,7 +327,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     }
-  }, [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled]);
+  }, [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking]);
   const stopAutoplay = React.useCallback(() => {
     if (autoPlayRef !== null && autoPlayRef !== void 0 && autoPlayRef.current) {
       clearTimeout(autoPlayRef === null || autoPlayRef === void 0 ? void 0 : autoPlayRef.current);
@@ -595,7 +629,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           positionVariant: previousNextNavigationPosition,
           buttonWidth: previousNextNavigationButtonWidth,
           positionProperty: getDynamicPositionProperty(),
-          spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation
+          spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
+          enablePeeking
         })],
         children: /*#__PURE__*/_jsx(IconButton, {
           icon: isCarouselPlaying ? pauseIcon : playIcon,
@@ -604,7 +639,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           onPress: onAnimationControlButtonPress
         })
       }) : null, showPreviousNextNavigation && childrenArray.length > 1 ? /*#__PURE__*/_jsx(View, {
-        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true),
+        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking),
         testID: "previous-button-container",
         children: /*#__PURE__*/_jsx(IconButton, {
           onLayout: onPreviousNextNavigationButtonLayout,
@@ -627,7 +662,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       }), /*#__PURE__*/_jsx(View, {
         style: selectContainerStyles(containerLayout.width),
         children: /*#__PURE__*/_jsx(Animated.View, {
-          style: StyleSheet.flatten([selectSwipeAreaStyles(childrenArray.length, containerLayout.width), {
+          style: StyleSheet.flatten([selectSwipeAreaStyles(childrenArray.length, containerLayout.width, enablePeeking), {
             transform: [{
               translateX: pan.x
             }, {
@@ -643,7 +678,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
             const hidden = !isAnimating && index !== activeIndex;
             const clonedElement = /*#__PURE__*/React.cloneElement(element, {
               elementIndex: index,
-              hidden
+              hidden: enablePeeking ? false : hidden,
+              enablePeeking,
+              peekingProps: getPeekingProps(viewport)
             });
             return /*#__PURE__*/_jsx(React.Fragment, {
               children: clonedElement
@@ -651,7 +688,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           })
         })
       }), showPreviousNextNavigation && childrenArray.length > 1 ? /*#__PURE__*/_jsx(View, {
-        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false),
+        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking),
         testID: "next-button-container",
         children: /*#__PURE__*/_jsx(IconButton, {
           onLayout: onPreviousNextNavigationButtonLayout,
@@ -845,7 +882,12 @@ Carousel.propTypes = {
    * - Default value is `0`
    * - `autoPlay` and `slideDuration` are required to be set for this to work
    */
-  transitionDuration: PropTypes.number
+  transitionDuration: PropTypes.number,
+  /**
+   * If set to `true`, the Carousel will show the previous and next slides
+   * - Default value is `false`
+   */
+  enablePeeking: PropTypes.bool
 };
 Carousel.Item = CarouselItem;
 Carousel.displayName = 'Carousel';

package/lib-module/Carousel/CarouselItem/CarouselItem.js

@@ -6,37 +6,96 @@ import { layoutTags, getA11yPropsFromHtmlTag, selectSystemProps, a11yProps, view
 import { useCarousel } from '../CarouselContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, 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.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.forwardRef((_ref, ref) => {
+const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     elementIndex,
     tag = 'li',
     hidden,
+    enablePeeking,
+    peekingProps,
     ...rest
-  } = _ref;
+  } = _ref2;
   const {
     width,
-    activeIndex
+    activeIndex,
+    totalItems,
+    height
   } = useCarousel();
   const selectedProps = selectProps({
     ...rest,
     ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
   });
   const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps;
-  const style = {
-    width
-  };
-  if (hidden && Platform.OS === 'web') {
-    // On web, visibility: hidden makes all children non-focusable. It doesn't exist on native.
-    style.visibility = 'hidden';
-  }
   return /*#__PURE__*/_jsx(View, {
-    style: style,
+    style: selectContainerStyle({
+      width,
+      activeIndex,
+      elementIndex,
+      totalItems,
+      hidden,
+      height,
+      enablePeeking,
+      ...peekingProps
+    }),
     ...selectedProps,
     ...focusabilityProps,
     ref: ref,
@@ -70,7 +129,22 @@ CarouselItem.propTypes = {
   /**
    * Function to set carousel content background color when slide is being display
    */
-  setContentBackgroundColor: PropTypes.func
+  setContentBackgroundColor: PropTypes.func,
+  /**
+   * Boolean to enable peeking effect on the first and last slide
+   */
+  enablePeeking: PropTypes.bool,
+  /**
+   * Object to configure the peeking effect
+   */
+  peekingProps: PropTypes.shape({
+    peekingMarginLeft: PropTypes.number,
+    peekingMarginRight: PropTypes.number,
+    peekingFirstSpace: PropTypes.number,
+    peekingLastSpace: PropTypes.number,
+    peekingMiddleSpace: PropTypes.number,
+    peekingGap: PropTypes.number
+  })
 };
 CarouselItem.displayName = 'Carousel.Item';
 export default CarouselItem;

package/lib-module/Fieldset/FieldsetContainer.js

@@ -16,6 +16,7 @@ const FieldsetContainer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     name: fieldsetName,
     showBorderStyle = false,
     borderStyle,
+    style,
     ...rest
   } = _ref;
   // If needs border for error design or reset the component style
@@ -23,7 +24,10 @@ const FieldsetContainer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   return /*#__PURE__*/_jsx("fieldset", {
     ref: ref,
     disabled: inactive,
-    style: styleContainer,
+    style: {
+      ...styleContainer,
+      ...style
+    },
     role: accessibilityRole,
     name: fieldsetName,
     ...selectProps(rest),
@@ -38,6 +42,7 @@ FieldsetContainer.propTypes = {
   inactive: PropTypes.bool,
   name: PropTypes.string,
   showBorderStyle: PropTypes.bool,
-  borderStyle: PropTypes.object
+  borderStyle: PropTypes.object,
+  style: PropTypes.object
 };
 export default FieldsetContainer;

package/lib-module/Fieldset/FieldsetContainer.native.js

@@ -11,12 +11,14 @@ const FieldsetContainer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     accessibilityRole,
+    style,
     ...rest
   } = _ref;
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
     accessibilityRole: accessibilityRole,
     ...selectProps(rest),
+    style: style,
     children: children
   });
 });
@@ -24,6 +26,7 @@ FieldsetContainer.displayName = 'FieldsetContainer';
 FieldsetContainer.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.node,
-  accessibilityRole: PropTypes.string
+  accessibilityRole: PropTypes.string,
+  style: PropTypes.object
 };
 export default FieldsetContainer;