@telus-uds/components-base 1.75.0 → 1.76.0

package/lib-module/PriceLockup/utils/renderFootnoteContent.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import Text from "react-native-web/dist/exports/Text";
+import Platform from "react-native-web/dist/exports/Platform";
+import renderTypography from './renderTypography';
+import renderFootnoteLinks from './renderFootnoteLinks';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const selectFootnoteContainer = _ref => {
+  let {
+    footnoteMarginTop
+  } = _ref;
+  return {
+    marginTop: footnoteMarginTop
+  };
+};
+const selectFootnoteBottomTextContainer = _ref2 => {
+  let {
+    bottomTextMarginTop
+  } = _ref2;
+  return {
+    marginTop: bottomTextMarginTop
+  };
+};
+const selectFootnoteLinksStyles = _ref3 => {
+  let {
+    bottomLinksMarginLeft
+  } = _ref3;
+  return {
+    marginLeft: bottomLinksMarginLeft
+  };
+};
+const renderFootnoteContent = (footnoteMarginTop, bottomTextMarginTop, bottomText, bottomTextTypographyTokens, fontColor, footnoteLinks, bottomLinksMarginLeft, onClickFootnote, themeTokens) => {
+  const MAX_FOOTNOTE_LINKS_ALLOWED = 3;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [staticStyles.footnoteContainer, selectFootnoteContainer({
+        footnoteMarginTop
+      })],
+      children: [/*#__PURE__*/_jsxs(Text, {
+        style: selectFootnoteBottomTextContainer({
+          bottomTextMarginTop
+        }),
+        children: [renderTypography(bottomText, bottomTextTypographyTokens, undefined, fontColor), ' ']
+      }), footnoteLinks.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
+        style: [staticStyles.footnoteLinkContainer, selectFootnoteLinksStyles({
+          bottomLinksMarginLeft
+        })],
+        children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
+      }) : null]
+    }), footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
+      style: staticStyles.verticalFootnoteLinkContainer,
+      children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
+    }) : null]
+  });
+};
+export default renderFootnoteContent;
+const staticStyles = StyleSheet.create({
+  footnoteContainer: {
+    flexDirection: 'row'
+  },
+  footnoteLinkContainer: {
+    flexDirection: 'row',
+    ...Platform.select({
+      ios: {
+        alignSelf: 'flex-end',
+        top: 2
+      },
+      android: {
+        alignSelf: 'center',
+        top: -8
+      }
+    })
+  },
+  verticalFootnoteLinkContainer: {
+    ...Platform.select({
+      ios: {
+        top: 10
+      },
+      android: {
+        top: -2
+      }
+    })
+  }
+});

package/lib-module/PriceLockup/utils/renderFootnoteLinks.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import FootnoteLink from '../../Footnote/FootnoteLink';
+import { jsx as _jsx } from "react/jsx-runtime";
+const selectFootnoteLinkStyles = (_ref, footnoteLinks) => {
+  let {
+    footnoteLinkColor,
+    footnoteLinkFontName,
+    footnoteLinkFontWeight,
+    footnoteLinkLineHeight,
+    footnoteLinkFontSize
+  } = _ref;
+  // This is used to apply the proper line height when there is 4 or more footnote links
+  const MAX_FOOTNOTE_LINKS_ALLOWED = 3;
+  const lineHeight = footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? footnoteLinkFontSize * footnoteLinkLineHeight : undefined;
+  return {
+    color: footnoteLinkColor,
+    fontName: footnoteLinkFontName,
+    fontWeight: footnoteLinkFontWeight,
+    lineHeight,
+    fontSize: footnoteLinkFontSize
+  };
+};
+const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) => footnoteLinks && footnoteLinks.length > 0 ? /*#__PURE__*/_jsx(FootnoteLink, {
+  tokens: selectFootnoteLinkStyles(themeTokens, footnoteLinks),
+  content: footnoteLinks,
+  onClick: onClickFootnote
+}) : null;
+export default renderFootnoteLinks;

package/lib-module/PriceLockup/utils/renderPrice.js

@@ -0,0 +1,141 @@
+import React from 'react';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import Text from "react-native-web/dist/exports/Text";
+import Platform from "react-native-web/dist/exports/Platform";
+import A11yText from '../../A11yText';
+import renderTypography from './renderTypography';
+import renderFootnoteLinks from './renderFootnoteLinks';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const selectStrikeThroughStyles = _ref => {
+  let {
+    strikeThroughColor
+  } = _ref;
+  return {
+    textDecorationColor: strikeThroughColor
+  };
+};
+const selectFootnoteLinksStyles = _ref2 => {
+  let {
+    bottomLinksMarginLeft
+  } = _ref2;
+  return {
+    marginLeft: bottomLinksMarginLeft
+  };
+};
+const renderCurrencySymbol = (currencySymbol, currencySymbolTypographyTokens, ratePosition, fontColor) => renderTypography(`${currencySymbol}`, currencySymbolTypographyTokens, ratePosition, fontColor);
+const renderAmount = (amount, amountTypographyTokens, strikeThrough, a11yText, fontColor, themeTokens) => {
+  const amountText = renderTypography(amount, amountTypographyTokens, undefined, fontColor); // undefined is ratePosition
+  if (strikeThrough) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(A11yText, {
+        text: a11yText
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [staticStyles.strikeThroughContainer, selectStrikeThroughStyles(themeTokens)],
+        children: amountText
+      })]
+    });
+  }
+  return amountText;
+};
+const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens) => {
+  const priceString = price;
+  const lastDotPosition = priceString.lastIndexOf('.');
+  const lastCommaPosition = priceString.lastIndexOf(',');
+  const [separator, separatorPosition] = lastDotPosition > lastCommaPosition ? ['.', lastDotPosition] : [',', lastCommaPosition];
+
+  // If the separator is at the fourth character from the end of the string or more, it's most probably
+  // a part of the amount, and the cents are not included in the price string
+  const EXCLUDE_CENTS = 3;
+  const hasCents = separatorPosition !== -1 && separatorPosition >= priceString.length - EXCLUDE_CENTS;
+  const amount = hasCents ? priceString.substring(0, separatorPosition) : priceString;
+  const cents = hasCents ? priceString.substring(separatorPosition + 1) : null;
+  const footnoteLinkPositionStyles = rateText ? staticStyles.footnoteLinksWithoutBottomText : staticStyles.footnoteLinksWithoutBottomTextAndRateText;
+  const MAX_FOOTNOTE_LINKS_ALLOWED = 3;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: ratePosition === 'bottom' ? staticStyles.priceContainerColumn : staticStyles.priceContainerRow,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: staticStyles.priceContainer,
+        children: [signDirection === 'left' ? /*#__PURE__*/_jsx(Text, {
+          children: renderCurrencySymbol(currencySymbol, currencySymbolTypographyTokens, ratePosition, fontColor)
+        }) : null, renderAmount(amount, amountTypographyTokens, strikeThrough, a11yText, fontColor, themeTokens), cents ? renderTypography(`${separator}${cents}`, centsTypographyTokens, undefined, fontColor) : null, signDirection === 'right' ? /*#__PURE__*/_jsx(Text, {
+          style: staticStyles.currencySymbol,
+          children: renderCurrencySymbol(currencySymbol, currencySymbolTypographyTokens, ratePosition, fontColor)
+        }) : null]
+      }), rateText ? /*#__PURE__*/_jsx(Text, {
+        style: ratePosition === 'bottom' ? staticStyles.rateTextVerticalPosition : [staticStyles.rateTextPosition, staticStyles.rateTextVerticalPosition],
+        children: renderTypography(rateText, rateTypographyTokens, ratePosition, fontColor)
+      }) : null, !bottomText && footnoteLinks.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(Text, {
+        style: [footnoteLinkPositionStyles, selectFootnoteLinksStyles({
+          bottomLinksMarginLeft
+        })],
+        children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
+      }) : null]
+    }), !bottomText && footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
+      style: staticStyles.verticalFootnoteLinkContainer,
+      children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
+    }) : null]
+  });
+};
+export default renderPrice;
+const staticStyles = StyleSheet.create({
+  priceContainerRow: {
+    flexDirection: 'row'
+  },
+  priceContainerColumn: {
+    flexDirection: 'column'
+  },
+  priceContainer: {
+    flexDirection: 'row',
+    alignSelf: 'flex-start',
+    marginTop: 4
+  },
+  currencySymbol: {
+    paddingLeft: 4
+  },
+  verticalFootnoteLinkContainer: {
+    ...Platform.select({
+      ios: {
+        top: 10
+      },
+      android: {
+        top: -2
+      }
+    })
+  },
+  footnoteLinksWithoutBottomText: {
+    ...Platform.select({
+      ios: {
+        alignSelf: 'flex-end',
+        top: -10
+      },
+      android: {
+        alignSelf: 'center',
+        top: -14
+      }
+    })
+  },
+  footnoteLinksWithoutBottomTextAndRateText: {
+    ...Platform.select({
+      ios: {
+        alignSelf: 'center'
+      },
+      android: {
+        alignSelf: 'flex-start'
+      }
+    })
+  },
+  strikeThroughContainer: {
+    textDecorationLine: 'line-through',
+    textDecorationThickness: '1px'
+  },
+  rateTextPosition: {
+    alignSelf: 'flex-end'
+  },
+  rateTextVerticalPosition: {
+    top: -8
+  }
+});

package/lib-module/PriceLockup/utils/renderTypography.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Typography from '../../Typography';
+import { jsx as _jsx } from "react/jsx-runtime";
+const renderTypography = (value, themeTokens, ratePosition, fontColor) => {
+  const customProps = ratePosition === 'bottom' ? {
+    variant: {
+      size: 'micro'
+    },
+    tokens: {
+      color: fontColor
+    }
+  } : {
+    tokens: {
+      ...themeTokens,
+      color: fontColor
+    }
+  };
+  return /*#__PURE__*/_jsx(Typography, {
+    ...customProps,
+    children: value
+  });
+};
+export default renderTypography;

package/lib-module/index.js

@@ -32,6 +32,7 @@ export { default as MultiSelectFilter } from './MultiSelectFilter';
 export { default as Notification } from './Notification';
 export { default as OrderedList } from './OrderedList';
 export { default as Pagination } from './Pagination';
+export { default as PriceLockup } from './PriceLockup';
 export { default as Progress } from './Progress';
 export { default as QuickLinks } from './QuickLinks';
 export { default as QuickLinksFeature } from './QuickLinksFeature';

package/package.json

@@ -85,5 +85,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.75.0"
+  "version": "1.76.0"
 }

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/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)}>