@telus-uds/components-base 1.75.0 → 1.77.0

package/src/Box/Box.jsx

@@ -1,18 +1,21 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
-import { View, ScrollView, Platform } from 'react-native'
+import { View, ScrollView, Platform, StyleSheet, ImageBackground, Image } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
   getA11yPropsFromHtmlTag,
   getTokensPropType,
   layoutTags,
+  responsiveProps,
   selectSystemProps,
   spacingProps,
+  useResponsiveProp,
   useSpacingScale,
   variantProp,
   viewProps
 } from '../utils'
+import backgroundImageStylesMap from './backgroundImageStylesMap'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -69,6 +72,50 @@ const selectBoxStyles = (
   return styles
 }
 
+const setBackgroundImage = ({
+  src,
+  alt,
+  backgroundImageResizeMode,
+  backgroundImagePosition,
+  backgroundImageAlign,
+  backgroundImageWidth,
+  backgroundImageHeight,
+  content
+}) => {
+  if (backgroundImageResizeMode === 'contain') {
+    const containedViewStyle = {
+      ...staticStyles.containedView,
+      width: backgroundImageWidth,
+      height: backgroundImageHeight,
+      ...backgroundImageStylesMap[`${backgroundImagePosition}-${backgroundImageAlign}`]
+    }
+
+    return (
+      <View style={staticStyles.containedContainer}>
+        <View style={containedViewStyle}>
+          <Image
+            source={src}
+            alt={alt}
+            style={staticStyles.containedImage}
+            accessibilityIgnoresInvertColors
+          />
+        </View>
+        {content}
+      </View>
+    )
+  }
+  return (
+    <ImageBackground
+      source={src}
+      alt={alt}
+      style={staticStyles.backgroundImageContainer}
+      resizeMode={backgroundImageResizeMode}
+    >
+      {content}
+    </ImageBackground>
+  )
+}
+
 /**
  * A layout utility component. Use Box to create space (padding) around content.
  *
@@ -154,6 +201,7 @@ const Box = forwardRef(
       testID,
       dataSet,
       customGradient,
+      backgroundImage,
       ...rest
     },
     ref
@@ -174,23 +222,52 @@ const Box = forwardRef(
       ...selectBoxStyles(themeTokens, customGradient)
     }
 
-    const childrenToRender =
-      typeof customGradient === 'function'
-        ? customGradient(styles.colors, styles)(children)
-        : children
+    let content = children
+    if (typeof customGradient === 'function')
+      content = customGradient(styles.colors, styles)(children)
+
+    const { src = '', alt = '', resizeMode = '', position = '', align = '' } = backgroundImage || {}
+    const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover')
+    const backgroundImagePosition = useResponsiveProp(position, 'none')
+    const backgroundImageAlign = useResponsiveProp(align, 'stretch')
+    const [backgroundImageWidth, setBackgroundImageWidth] = useState(0)
+    const [backgroundImageHeight, setBackgroundImageHeight] = useState(0)
+    if (backgroundImage)
+      content = setBackgroundImage({
+        src,
+        alt,
+        backgroundImageResizeMode,
+        backgroundImagePosition,
+        backgroundImageAlign,
+        backgroundImageWidth,
+        backgroundImageHeight,
+        content
+      })
+
+    useEffect(() => {
+      if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
+        Image.getSize(src, (width, height) => {
+          // Only update the state if the size has changed
+          if (width !== backgroundImageWidth || height !== backgroundImageHeight) {
+            setBackgroundImageWidth(width)
+            setBackgroundImageHeight(height)
+          }
+        })
+      }
+    }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src])
 
     if (scroll) {
       const scrollProps = typeof scroll === 'object' ? scroll : {}
       scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle]
       return (
         <ScrollView {...scrollProps} {...props} testID={testID} dataSet={dataSet} ref={ref}>
-          {childrenToRender}
+          {content}
         </ScrollView>
       )
     }
     return (
       <View {...props} style={styles} testID={testID} dataSet={dataSet} ref={ref}>
-        {childrenToRender}
+        {content}
       </View>
     )
   }
@@ -284,7 +361,41 @@ Box.propTypes = {
   /**
   Use this prop if need to add a custom gradient for mobile
   */
-  customGradient: PropTypes.func
+  customGradient: PropTypes.func,
+  /**
+   * Use this prop to add a background image to the box.
+   */
+  backgroundImage: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    resizeMode: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])
+    ),
+    position: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['none', 'bottom', 'left', 'right', 'top'])
+    ),
+    align: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['start', 'end', 'center', 'stretch'])
+    )
+  })
 }
 
 export default Box
+
+const staticStyles = StyleSheet.create({
+  backgroundImageContainer: {
+    flex: 1
+  },
+  containedContainer: {
+    flex: 1,
+    overflow: 'hidden'
+  },
+  containedView: {
+    zIndex: -1,
+    position: 'absolute'
+  },
+  containedImage: {
+    width: '100%',
+    height: '100%'
+  }
+})

package/src/Box/backgroundImageStylesMap.js

@@ -0,0 +1,21 @@
+export default {
+  'top-start': { top: 0 },
+  'top-center': { left: 0, right: 0, marginHorizontal: 'auto' },
+  'top-end': { top: 0, right: 0 },
+  'right-start': { top: 0, right: 0 },
+  'left-start': { top: 0 },
+  'left-center': { top: 0, bottom: 0, marginVertical: 'auto' },
+  'none-start': { top: 0, bottom: 0, marginVertical: 'auto' },
+  'none-center': { top: 0, bottom: 0, left: 0, right: 0, margin: 'auto' },
+  'right-center': { top: 0, bottom: 0, right: 0, marginVertical: 'auto' },
+  'none-end': { top: 0, bottom: 0, right: 0, marginVertical: 'auto' },
+  'bottom-start': { bottom: 0, left: 0 },
+  'left-end': { bottom: 0, left: 0 },
+  'bottom-center': { left: 0, right: 0, bottom: 0, marginHorizontal: 'auto' },
+  'bottom-end': { right: 0, bottom: 0 },
+  'right-end': { right: 0, bottom: 0 },
+  'top-stretch': { left: 0, right: 0, width: '100%' },
+  'left-stretch': { top: 0, bottom: 0, height: '100%' },
+  'right-stretch': { top: 0, bottom: 0, right: 0, height: '100%' },
+  'bottom-stretch': { left: 0, right: 0, bottom: 0, width: '100%' }
+}

package/src/Carousel/CarouselThumbnail.jsx

@@ -32,7 +32,7 @@ const CarouselThumbnail = ({ accessibilityLabel, alt, index, src }) => {
     // Allow using the spacebar for navigation
     if (event?.key === ' ') goTo(index)
   }
-  const { borderWidth, padding, selectedBorderColor, selectedBorderWidth, size } =
+  const { borderWidth, padding, selectedBorderColor, selectedBorderWidth, size, margin } =
     getThumbnailTokens({ viewport })
   const styles = {
     image: {
@@ -42,7 +42,12 @@ const CarouselThumbnail = ({ accessibilityLabel, alt, index, src }) => {
     selected: {
       borderColor: selectedBorderColor,
       borderWidth: selectedBorderWidth,
-      padding: padding - selectedBorderWidth + borderWidth
+      padding: padding - selectedBorderWidth,
+      marginBottom: margin + selectedBorderWidth
+    },
+    nonSelected: {
+      padding: padding - borderWidth,
+      marginBottom: margin + selectedBorderWidth
     }
   }
 
@@ -62,10 +67,7 @@ const CarouselThumbnail = ({ accessibilityLabel, alt, index, src }) => {
 
         return [
           pressableStyles,
-          index === activeIndex && styles.selected,
-          {
-            outline: 'none'
-          }
+          index === activeIndex ? [styles.selected, { outline: 'none' }] : styles.nonSelected
         ]
       }}
     >

package/src/Carousel/CarouselThumbnailNavigation.jsx

@@ -14,20 +14,19 @@ const CarouselThumbnailNavigation = forwardRef(({ thumbnails = [] }, ref) => {
   if (thumbnails.length !== totalItems) {
     throw new Error('Thumbnail set provided does not match the number of slides in the carousel')
   }
-  const { containerPaddingTop: thumbnailContainerPaddingTop, margin: thumbnailMargin } =
-    useThemeTokens('CarouselThumbnail')
+  const { containerPaddingTop: thumbnailContainerPaddingTop } = useThemeTokens('CarouselThumbnail')
   const stackWrapTokens = {
     justifyContent: 'flex-start'
   }
   const containerStyles = {
     justifyContent: 'center',
     alignItems,
-    paddingTop: thumbnailContainerPaddingTop - thumbnailMargin
+    paddingTop: thumbnailContainerPaddingTop
   }
 
   return (
     <View style={containerStyles}>
-      <StackWrap direction="row" tokens={stackWrapTokens} ref={ref}>
+      <StackWrap direction="row" tokens={stackWrapTokens} space={2} ref={ref}>
         {thumbnails.map(({ accessibilityLabel, alt, src }, index) => (
           <CarouselThumbnail
             accessibilityLabel={accessibilityLabel}

package/src/ExpandCollapse/Panel.jsx

@@ -64,6 +64,10 @@ const selectContentPanelStyles = ({
   marginBottom
 })
 
+const selectControlPanelStyles = ({ contentPanelBackgroundColor }) => ({
+  backgroundColor: contentPanelBackgroundColor
+})
+
 /**
  * An item in an `ExpandCollapse` which contains collapsible `children` and a `control` that opens
  * and closes the collapsible children when pressed.
@@ -136,16 +140,18 @@ const ExpandCollapsePanel = forwardRef(
       </View>
     ) : (
       <View ref={ref} style={themeTokens}>
-        <ExpandCollapseControl
-          {...selectedProps}
-          isExpanded={isExpanded}
-          tokens={controlTokens}
-          variant={variant}
-          onPress={handleControlPress}
-          ref={controlRef}
-        >
-          {control}
-        </ExpandCollapseControl>
+        <View style={selectControlPanelStyles(themeTokens)}>
+          <ExpandCollapseControl
+            {...selectedProps}
+            isExpanded={isExpanded}
+            tokens={controlTokens}
+            variant={variant}
+            onPress={handleControlPress}
+            ref={controlRef}
+          >
+            {control}
+          </ExpandCollapseControl>
+        </View>
         {isExpanded && (
           <View
             style={{

package/src/Footnote/Footnote.jsx

@@ -156,13 +156,10 @@ const Footnote = ({
     }
 
     return (
-      // TODO: Extract the OrderedList.Item from the array when the issue #4361 is fixed
       <OrderedList start={number}>
-        {[
-          <OrderedList.Item key={number}>
-            <Text style={selectCustomContentFontStyle(themeTokens)}>{content}</Text>
-          </OrderedList.Item>
-        ]}
+        <OrderedList.Item key={number}>
+          <Text style={selectCustomContentFontStyle(themeTokens)}>{content}</Text>
+        </OrderedList.Item>
       </OrderedList>
     )
   }, [content, number, themeTokens])

package/src/Link/ChevronLink.jsx

@@ -12,7 +12,10 @@ import LinkBase from './LinkBase'
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
 const ChevronLink = forwardRef(
-  ({ direction = 'right', children, tokens = {}, variant, dataSet, ...otherlinkProps }, ref) => {
+  (
+    { direction = 'right', children, tokens = {}, variant, dataSet, onPress, ...otherlinkProps },
+    ref
+  ) => {
     const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
     const applyChevronTokens = (linkState) => {
       const { leftIcon, rightIcon, iconDisplace, height, fontSize, ...otherTokens } =
@@ -38,6 +41,7 @@ const ChevronLink = forwardRef(
         tokens={getTokens}
         dataSet={dataSet}
         ref={ref}
+        onPress={onPress}
       >
         {children}
       </LinkBase>

package/src/Link/InlinePressable.jsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react'
-import { Pressable, StyleSheet } from 'react-native'
+import React, { forwardRef, useCallback } from 'react'
+import { Pressable, StyleSheet, Platform } from 'react-native'
 
 /**
  * @typedef {import('react-native').PressableProps} PressableProps
@@ -14,19 +14,40 @@ import { Pressable, StyleSheet } from 'react-native'
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-// eslint-disable-next-line react/prop-types
-const InlinePressable = forwardRef(({ children, inlineFlex = true, style, ...props }, ref) => (
-  <Pressable
-    ref={ref}
-    style={(pressState) => [
-      typeof style === 'function' ? style(pressState) : style,
-      staticStyles[inlineFlex ? 'inlineFlex' : 'inline']
-    ]}
-    {...props}
-  >
-    {(pressState) => (typeof children === 'function' ? children(pressState) : children)}
-  </Pressable>
-))
+/* eslint-disable react/prop-types */
+const InlinePressable = forwardRef(
+  ({ children, inlineFlex = true, style, onPress, ...props }, ref) => {
+    const handlePress = useCallback(() => {
+      if (onPress) {
+        onPress()
+      }
+    }, [onPress])
+
+    const handleKeyPress = useCallback(
+      (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          handlePress()
+        }
+      },
+      [handlePress]
+    )
+
+    return (
+      <Pressable
+        ref={ref}
+        style={(pressState) => [
+          typeof style === 'function' ? style(pressState) : style,
+          staticStyles[inlineFlex ? 'inlineFlex' : 'inline']
+        ]}
+        onPress={handlePress}
+        onKeyDown={Platform.OS === 'web' ? handleKeyPress : undefined}
+        {...props}
+      >
+        {(pressState) => (typeof children === 'function' ? children(pressState) : children)}
+      </Pressable>
+    )
+  }
+)
 InlinePressable.displayName = 'InlinePressable'
 
 const staticStyles = StyleSheet.create({

package/src/Link/LinkBase.jsx

@@ -162,6 +162,7 @@ const LinkBase = forwardRef(
         inlineFlex={hasIcon}
         // assuming links without icons should be inline (even if they are long)
         ref={ref}
+        keyboardShouldPersistTaps="handled"
         style={(linkState) => {
           const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)

package/src/OrderedList/OrderedList.jsx

@@ -7,29 +7,26 @@ import Item from './Item'
 
 const [selectProps, selectedSystemPropsTypes] = selectSystemProps([htmlAttrs, viewProps])
 
-const getChildrenWithParentVariants = (variant, children, start) => {
-  if (variant)
-    return children.map((child, i) => {
+const OrderedList = forwardRef(({ children, start, variant, ...rest }, ref) => {
+  const childrenWithParentVariants = useMemo(() => {
+    const addVariantToProps = (child, i, isLastChild) => {
       const existingChildVariants = child.props?.variant ?? {}
-      return {
-        ...child,
-        props: {
-          ...child.props,
-          index: start + i,
-          isLastChild: i === children.length - 1,
-          variant: { ...existingChildVariants, ...variant }
-        }
+      return React.cloneElement(child, {
+        index: start + i,
+        isLastChild,
+        variant: { ...existingChildVariants, ...variant }
+      })
+    }
+
+    if (variant) {
+      if (Array.isArray(children)) {
+        return children.map((child, i) => addVariantToProps(child, i, i === children.length - 1))
       }
-    })
-
-  return children
-}
+      return [addVariantToProps(children, 0, true)]
+    }
 
-const OrderedList = forwardRef(({ children, start, variant, ...rest }, ref) => {
-  const childrenWithParentVariants = useMemo(
-    () => getChildrenWithParentVariants(variant, children, start),
-    [children, variant, start]
-  )
+    return children
+  }, [children, variant, start])
 
   return (
     <OrderedListBase ref={ref} {...selectProps(rest)}>

package/src/PriceLockup/PriceLockup.jsx

@@ -0,0 +1,218 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
+import Divider from '../Divider'
+import { useViewport } from '../ViewportProvider'
+import { useThemeTokens } from '../ThemeProvider'
+import { selectSystemProps, getTokensPropType, htmlAttrs, viewProps } from '../utils'
+import renderFootnoteContent from './utils/renderFootnoteContent'
+import renderPrice from './utils/renderPrice'
+import renderTypography from './utils/renderTypography'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
+
+const selectTopTextTypographyTokens = ({ topTextFontSize, topTextLineHeight }) => ({
+  fontSize: topTextFontSize,
+  lineHeight: topTextLineHeight
+})
+
+const selectCurrencySymbolTypographyTokens = ({
+  currencySymbolFontSize,
+  currencySymbolLineHeight,
+  currencySymbolFontWeight
+}) => ({
+  fontSize: currencySymbolFontSize,
+  lineHeight: currencySymbolLineHeight,
+  fontWeight: currencySymbolFontWeight
+})
+
+const selectAmountTypographyTokens = ({
+  amountFontSize,
+  amountLineHeight,
+  amountLetterSpacing,
+  amountFontWeight,
+  fontColor
+}) => {
+  // This is used to apply the proper line height to the amount
+  const lineHeightMultiplier = 1.18
+  return {
+    color: fontColor,
+    fontSize: amountFontSize,
+    lineHeight: amountLineHeight * lineHeightMultiplier,
+    letterSpacing: amountLetterSpacing,
+    fontWeight: amountFontWeight
+  }
+}
+
+const selectCentsTypographyTokens = ({ centsFontSize, centsLineHeight, centsFontWeight }) => ({
+  fontSize: centsFontSize,
+  lineHeight: centsLineHeight,
+  fontWeight: centsFontWeight
+})
+
+const selectRateTypographyTokens = ({ rateFontSize, rateLineHeight, rateFontWeight }) => ({
+  fontSize: rateFontSize,
+  lineHeight: rateLineHeight,
+  fontWeight: rateFontWeight
+})
+
+const selectBottomTextTypographyTokens = ({ bottomTextFontSize, bottomTextLineHeight }) => ({
+  fontSize: bottomTextFontSize,
+  lineHeight: bottomTextLineHeight
+})
+
+const PriceLockup = ({
+  size = 'medium',
+  signDirection = 'left',
+  footnoteLinks,
+  topText,
+  price,
+  currencySymbol = '$',
+  rateText,
+  ratePosition = 'right',
+  bottomText,
+  onClickFootnote,
+  strikeThrough,
+  a11yText,
+  tokens: priceLockupTokens,
+  variant = {},
+  ...rest
+}) => {
+  const viewport = useViewport()
+  const {
+    footnoteMarginTop,
+    footnoteGap,
+    bottomTextMarginTop,
+    priceMarginBottom,
+    bottomLinksMarginLeft,
+    topTextMarginBottom,
+    fontColor,
+    dividerColor,
+    ...themeTokens
+  } = useThemeTokens(
+    'PriceLockup',
+    priceLockupTokens,
+    { ...variant, size },
+    { viewport, strikeThrough }
+  )
+  const currencySymbolTypographyTokens = selectCurrencySymbolTypographyTokens(themeTokens)
+  const amountTypographyTokens = selectAmountTypographyTokens(themeTokens)
+  const centsTypographyTokens = selectCentsTypographyTokens(themeTokens)
+  const rateTypographyTokens = selectRateTypographyTokens(themeTokens)
+  const topTextTypographyTokens = selectTopTextTypographyTokens(themeTokens)
+  const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens)
+
+  return (
+    <View style={[staticStyles.priceLockupContainer, { ...selectProps(rest) }]}>
+      {topText ? <View>{renderTypography(topText, topTextTypographyTokens)}</View> : null}
+      {renderPrice(
+        price,
+        rateText,
+        ratePosition,
+        signDirection,
+        currencySymbol,
+        currencySymbolTypographyTokens,
+        amountTypographyTokens,
+        centsTypographyTokens,
+        rateTypographyTokens,
+        fontColor,
+        strikeThrough,
+        a11yText,
+        bottomText,
+        bottomLinksMarginLeft,
+        footnoteLinks,
+        onClickFootnote,
+        themeTokens
+      )}
+      {bottomText ? (
+        <>
+          <Divider
+            testID="price-lockup-divider"
+            role="separator"
+            tokens={{ color: dividerColor }}
+          />
+          {renderFootnoteContent(
+            footnoteMarginTop,
+            bottomTextMarginTop,
+            bottomText,
+            bottomTextTypographyTokens,
+            fontColor,
+            footnoteLinks,
+            bottomLinksMarginLeft,
+            onClickFootnote,
+            themeTokens
+          )}
+        </>
+      ) : null}
+    </View>
+  )
+}
+
+PriceLockup.displayName = 'PriceLockup'
+PriceLockup.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Size of the component
+   *
+   * Small for pricing in product catalogue pages, medium for pricing in product comparison cards.
+   */
+  size: PropTypes.oneOf(['small', 'medium']),
+  /**
+   * If currency symbol other than `$` to be used
+   */
+  currencySymbol: PropTypes.string,
+  /**
+   * Shows additional info above the price
+   */
+  topText: PropTypes.string,
+  /**
+   * Monetary value (including decimals separated by ".")
+   */
+  price: PropTypes.string.isRequired,
+  /**
+   * Shows month/year unit
+   */
+  rateText: PropTypes.string,
+  /**
+   * Shows additional info below the price with a `Divider`
+   */
+  bottomText: PropTypes.string,
+  /**
+   * Displays which side the currency should appear (left, right)
+   */
+  signDirection: PropTypes.oneOf(['right', 'left']),
+  /**
+   * Displays where the rate should appear (bottom, right)
+   */
+  ratePosition: PropTypes.oneOf(['right', 'bottom']),
+  /**
+   * Shows additional link for context
+   */
+  footnoteLinks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+  /**
+   * Function to be called when a footnote link is clicked
+   */
+  onClickFootnote: PropTypes.func,
+  /**
+   * To show price savings comparison
+   */
+  strikeThrough: PropTypes.bool,
+  /**
+   * To provide a11y text for `PriceLockup` component
+   *
+   * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
+   */
+  a11yText: PropTypes.string,
+  /**
+   * `PriceLockup` tokens
+   */
+  tokens: getTokensPropType('PriceLockup')
+}
+
+export default PriceLockup
+
+const staticStyles = StyleSheet.create({
+  priceLockupContainer: {
+    alignSelf: 'flex-start'
+  }
+})

package/src/PriceLockup/index.js

@@ -0,0 +1,3 @@
+import PriceLockup from './PriceLockup'
+
+export default PriceLockup