@telus-uds/components-base 1.93.0 → 1.95.0

package/src/Carousel/Carousel.jsx

@@ -55,9 +55,9 @@ const selectContainerStyles = (width) => ({
   width
 })
 
-const selectSwipeAreaStyles = (count, width) => ({
+const selectSwipeAreaStyles = (count, width, enablePeeking) => ({
   width: width * count,
-  justifyContent: 'space-between',
+  justifyContent: enablePeeking ? 'flex-start' : 'space-between',
   flexDirection: 'row'
 })
 
@@ -68,7 +68,8 @@ const selectControlButtonPositionStyles = ({
   positionVariant,
   buttonWidth,
   positionProperty = getDynamicPositionProperty(),
-  spaceBetweenSlideAndButton
+  spaceBetweenSlideAndButton,
+  enablePeeking
 }) => {
   const styles = {}
   if (positionVariant === 'edge') {
@@ -76,7 +77,11 @@ const selectControlButtonPositionStyles = ({
   } 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
 }
@@ -87,7 +92,8 @@ const selectPreviousNextNavigationButtonStyles = (
   spaceBetweenSlideAndPreviousNextNavigation,
   isFirstSlide,
   isLastSlide,
-  areStylesAppliedOnPreviousButton
+  areStylesAppliedOnPreviousButton,
+  enablePeeking
 ) => {
   const styles = {
     zIndex: 1,
@@ -107,11 +113,33 @@ const selectPreviousNextNavigationButtonStyles = (
       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 = ({ iconBackgroundColor }) => ({ backgroundColor: iconBackgroundColor })
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -204,6 +232,7 @@ const Carousel = React.forwardRef(
       slideDuration = 0,
       transitionDuration = 0,
       autoPlay = false,
+      enablePeeking = false,
       ...rest
     },
     ref
@@ -301,6 +330,13 @@ const Carousel = React.forwardRef(
             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,
@@ -309,7 +345,7 @@ const Carousel = React.forwardRef(
           }).start(handleAnimationEndToIndex)
         }
       },
-      [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled]
+      [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking]
     )
 
     const stopAutoplay = React.useCallback(() => {
@@ -676,7 +712,8 @@ const Carousel = React.forwardRef(
                   positionVariant: previousNextNavigationPosition,
                   buttonWidth: previousNextNavigationButtonWidth,
                   positionProperty: getDynamicPositionProperty(),
-                  spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation
+                  spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
+                  enablePeeking
                 })
               ]}
             >
@@ -698,7 +735,8 @@ const Carousel = React.forwardRef(
                 spaceBetweenSlideAndPreviousNextNavigation,
                 isFirstSlide,
                 isLastSlide,
-                true
+                true,
+                enablePeeking
               )}
               testID="previous-button-container"
             >
@@ -731,7 +769,7 @@ const Carousel = React.forwardRef(
           <View style={selectContainerStyles(containerLayout.width)}>
             <Animated.View
               style={StyleSheet.flatten([
-                selectSwipeAreaStyles(childrenArray.length, containerLayout.width),
+                selectSwipeAreaStyles(childrenArray.length, containerLayout.width, enablePeeking),
                 {
                   transform: [{ translateX: pan.x }, { translateY: pan.y }]
                 }
@@ -746,7 +784,9 @@ const Carousel = React.forwardRef(
                 const hidden = !isAnimating && index !== activeIndex
                 const clonedElement = React.cloneElement(element, {
                   elementIndex: index,
-                  hidden
+                  hidden: enablePeeking ? false : hidden,
+                  enablePeeking,
+                  peekingProps: getPeekingProps(viewport)
                 })
                 return <React.Fragment key={index.toFixed(2)}>{clonedElement}</React.Fragment>
               })}
@@ -760,7 +800,8 @@ const Carousel = React.forwardRef(
                 spaceBetweenSlideAndPreviousNextNavigation,
                 isFirstSlide,
                 isLastSlide,
-                false
+                false,
+                enablePeeking
               )}
               testID="next-button-container"
             >
@@ -962,7 +1003,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

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -13,13 +13,73 @@ import { useCarousel } from '../CarouselContext'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const selectContainerStyle = ({
+  width,
+  activeIndex,
+  elementIndex,
+  totalItems,
+  enablePeeking,
+  peekingMarginLeft,
+  peekingMarginRight,
+  peekingFirstSpace,
+  peekingLastSpace,
+  peekingMiddleSpace,
+  peekingGap,
+  hidden
+}) => {
+  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 = React.forwardRef(
-  ({ children, elementIndex, tag = 'li', hidden, ...rest }, ref) => {
-    const { width, activeIndex } = useCarousel()
+  ({ children, elementIndex, tag = 'li', hidden, enablePeeking, peekingProps, ...rest }, ref) => {
+    const { width, activeIndex, totalItems, height } = useCarousel()
 
     const selectedProps = selectProps({
       ...rest,
@@ -27,13 +87,23 @@ const CarouselItem = React.forwardRef(
     })
 
     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 (
-      <View style={style} {...selectedProps} {...focusabilityProps} ref={ref}>
+      <View
+        style={selectContainerStyle({
+          width,
+          activeIndex,
+          elementIndex,
+          totalItems,
+          hidden,
+          height,
+          enablePeeking,
+          ...peekingProps
+        })}
+        {...selectedProps}
+        {...focusabilityProps}
+        ref={ref}
+      >
         {children}
       </View>
     )
@@ -67,7 +137,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'

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/Fieldset/FieldsetContainer.jsx

@@ -19,18 +19,18 @@ const FieldsetContainer = React.forwardRef(
       name: fieldsetName,
       showBorderStyle = false,
       borderStyle,
+      style,
       ...rest
     },
     ref
   ) => {
     // If needs border for error design or reset the component style
     const styleContainer = showBorderStyle && borderStyle ? borderStyle : cssReset
-
     return (
       <fieldset
         ref={ref}
         disabled={inactive}
-        style={styleContainer}
+        style={{ ...styleContainer, ...style }}
         role={accessibilityRole}
         name={fieldsetName}
         {...selectProps(rest)}
@@ -49,7 +49,8 @@ FieldsetContainer.propTypes = {
   inactive: PropTypes.bool,
   name: PropTypes.string,
   showBorderStyle: PropTypes.bool,
-  borderStyle: PropTypes.object
+  borderStyle: PropTypes.object,
+  style: PropTypes.object
 }
 
 export default FieldsetContainer

package/src/Fieldset/FieldsetContainer.native.jsx

@@ -8,17 +8,20 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 // No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
 // If a11y testing finds any additional handling is needed at the container level, add it here.
-const FieldsetContainer = React.forwardRef(({ children, accessibilityRole, ...rest }, ref) => (
-  <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)}>
-    {children}
-  </View>
-))
+const FieldsetContainer = React.forwardRef(
+  ({ children, accessibilityRole, style, ...rest }, ref) => (
+    <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)} style={style}>
+      {children}
+    </View>
+  )
+)
 FieldsetContainer.displayName = 'FieldsetContainer'
 
 FieldsetContainer.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.node,
-  accessibilityRole: PropTypes.string
+  accessibilityRole: PropTypes.string,
+  style: PropTypes.object
 }
 
 export default FieldsetContainer