@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/PriceLockup/PriceLockup.js

@@ -1,225 +0,0 @@
-import React from 'react';
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-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';
-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 [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
-const selectTopTextTypographyTokens = _ref => {
-  let {
-    topTextFontSize,
-    topTextLineHeight
-  } = _ref;
-  return {
-    fontSize: topTextFontSize,
-    lineHeight: topTextLineHeight
-  };
-};
-const selectCurrencySymbolTypographyTokens = _ref2 => {
-  let {
-    currencySymbolFontSize,
-    currencySymbolLineHeight,
-    currencySymbolFontWeight
-  } = _ref2;
-  return {
-    fontSize: currencySymbolFontSize,
-    lineHeight: currencySymbolLineHeight,
-    fontWeight: currencySymbolFontWeight
-  };
-};
-const selectAmountTypographyTokens = _ref3 => {
-  let {
-    amountFontSize,
-    amountLineHeight,
-    amountLetterSpacing,
-    amountFontWeight,
-    fontColor
-  } = _ref3;
-  // 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 = _ref4 => {
-  let {
-    centsFontSize,
-    centsLineHeight,
-    centsFontWeight
-  } = _ref4;
-  return {
-    fontSize: centsFontSize,
-    lineHeight: centsLineHeight,
-    fontWeight: centsFontWeight
-  };
-};
-const selectRateTypographyTokens = _ref5 => {
-  let {
-    rateFontSize,
-    rateLineHeight,
-    rateFontWeight
-  } = _ref5;
-  return {
-    fontSize: rateFontSize,
-    lineHeight: rateLineHeight,
-    fontWeight: rateFontWeight
-  };
-};
-const selectBottomTextTypographyTokens = _ref6 => {
-  let {
-    bottomTextFontSize,
-    bottomTextLineHeight
-  } = _ref6;
-  return {
-    fontSize: bottomTextFontSize,
-    lineHeight: bottomTextLineHeight
-  };
-};
-const selectContainertokens = _ref7 => {
-  let {
-    alignItemsText
-  } = _ref7;
-  return {
-    alignItems: alignItemsText
-  };
-};
-const PriceLockup = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
-  let {
-    size = 'medium',
-    signDirection = 'left',
-    footnoteLinks,
-    topText,
-    price,
-    currencySymbol = '$',
-    rateText,
-    ratePosition = 'right',
-    bottomText,
-    onClickFootnote,
-    strikeThrough,
-    a11yText,
-    tokens: priceLockupTokens,
-    variant = {},
-    ...rest
-  } = _ref8;
-  const viewport = useViewport();
-  const {
-    footnoteMarginTop,
-    footnoteGap,
-    bottomTextMarginTop,
-    priceMarginBottom,
-    bottomLinksMarginLeft,
-    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 /*#__PURE__*/_jsxs(View, {
-    style: [staticStyles.priceLockupContainer, selectContainertokens(themeTokens)],
-    ref: ref,
-    ...selectProps(rest),
-    children: [topText ? /*#__PURE__*/_jsx(View, {
-      style: staticStyles.topText,
-      children: renderTypography(topText, topTextTypographyTokens)
-    }) : null, renderPrice(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens), bottomText ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Divider, {
-        testID: "price-lockup-divider",
-        role: "separator",
-        tokens: {
-          color: dividerColor
-        }
-      }), renderFootnoteContent(footnoteMarginTop, bottomTextMarginTop, bottomText, bottomTextTypographyTokens, fontColor, footnoteLinks, bottomLinksMarginLeft, onClickFootnote, themeTokens)]
-    }) : null]
-  });
-});
-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'
-  },
-  topText: {
-    marginBottom: 4
-  }
-});

package/lib-module/PriceLockup/index.js

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

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

@@ -1,87 +0,0 @@
-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 === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(View, {
-        style: [staticStyles.footnoteLinkContainer, selectFootnoteLinksStyles({
-          bottomLinksMarginLeft
-        })],
-        children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
-      }) : null]
-    }), (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : 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

@@ -1,28 +0,0 @@
-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 === null || footnoteLinks === void 0 ? void 0 : 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 === null || footnoteLinks === void 0 ? void 0 : 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

@@ -1,141 +0,0 @@
-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 === null || footnoteLinks === void 0 ? void 0 : footnoteLinks.length) <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/_jsx(Text, {
-        style: [footnoteLinkPositionStyles, selectFootnoteLinksStyles({
-          bottomLinksMarginLeft
-        })],
-        children: renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)
-      }) : null]
-    }), !bottomText && (footnoteLinks === null || footnoteLinks === void 0 ? void 0 : 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

@@ -1,23 +0,0 @@
-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' && value !== '$' ? {
-    variant: {
-      size: 'micro'
-    },
-    tokens: {
-      color: fontColor
-    }
-  } : {
-    tokens: {
-      ...themeTokens,
-      color: fontColor
-    }
-  };
-  return /*#__PURE__*/_jsx(Typography, {
-    ...customProps,
-    children: value
-  });
-};
-export default renderTypography;