@telus-uds/components-base 1.75.0 → 1.76.0

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

package/src/PriceLockup/utils/renderFootnoteContent.jsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { StyleSheet, View, Text, Platform } from 'react-native'
+import renderTypography from './renderTypography'
+import renderFootnoteLinks from './renderFootnoteLinks'
+
+const selectFootnoteContainer = ({ footnoteMarginTop }) => ({
+  marginTop: footnoteMarginTop
+})
+
+const selectFootnoteBottomTextContainer = ({ bottomTextMarginTop }) => ({
+  marginTop: bottomTextMarginTop
+})
+
+const selectFootnoteLinksStyles = ({ bottomLinksMarginLeft }) => ({
+  marginLeft: bottomLinksMarginLeft
+})
+
+const renderFootnoteContent = (
+  footnoteMarginTop,
+  bottomTextMarginTop,
+  bottomText,
+  bottomTextTypographyTokens,
+  fontColor,
+  footnoteLinks,
+  bottomLinksMarginLeft,
+  onClickFootnote,
+  themeTokens
+) => {
+  const MAX_FOOTNOTE_LINKS_ALLOWED = 3
+  return (
+    <>
+      <View
+        style={[staticStyles.footnoteContainer, selectFootnoteContainer({ footnoteMarginTop })]}
+      >
+        <Text style={selectFootnoteBottomTextContainer({ bottomTextMarginTop })}>
+          {renderTypography(bottomText, bottomTextTypographyTokens, undefined, fontColor)}{' '}
+        </Text>
+        {footnoteLinks.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? (
+          <View
+            style={[
+              staticStyles.footnoteLinkContainer,
+              selectFootnoteLinksStyles({ bottomLinksMarginLeft })
+            ]}
+          >
+            {renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)}
+          </View>
+        ) : null}
+      </View>
+      {footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? (
+        <View style={staticStyles.verticalFootnoteLinkContainer}>
+          {renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)}
+        </View>
+      ) : 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/src/PriceLockup/utils/renderFootnoteLinks.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import FootnoteLink from '../../Footnote/FootnoteLink'
+
+const selectFootnoteLinkStyles = (
+  {
+    footnoteLinkColor,
+    footnoteLinkFontName,
+    footnoteLinkFontWeight,
+    footnoteLinkLineHeight,
+    footnoteLinkFontSize
+  },
+  footnoteLinks
+) => {
+  // 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 ? (
+    <FootnoteLink
+      tokens={selectFootnoteLinkStyles(themeTokens, footnoteLinks)}
+      content={footnoteLinks}
+      onClick={onClickFootnote}
+    />
+  ) : null
+
+export default renderFootnoteLinks

package/src/PriceLockup/utils/renderPrice.jsx

@@ -0,0 +1,201 @@
+import React from 'react'
+import { StyleSheet, View, Text, Platform } from 'react-native'
+import A11yText from '../../A11yText'
+import renderTypography from './renderTypography'
+import renderFootnoteLinks from './renderFootnoteLinks'
+
+const selectStrikeThroughStyles = ({ strikeThroughColor }) => ({
+  textDecorationColor: strikeThroughColor
+})
+
+const selectFootnoteLinksStyles = ({ bottomLinksMarginLeft }) => ({
+  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 (
+      <>
+        <A11yText text={a11yText} />
+        <Text style={[staticStyles.strikeThroughContainer, selectStrikeThroughStyles(themeTokens)]}>
+          {amountText}
+        </Text>
+      </>
+    )
+  }
+
+  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 (
+    <>
+      <View
+        style={
+          ratePosition === 'bottom'
+            ? staticStyles.priceContainerColumn
+            : staticStyles.priceContainerRow
+        }
+      >
+        <View style={staticStyles.priceContainer}>
+          {signDirection === 'left' ? (
+            <Text>
+              {renderCurrencySymbol(
+                currencySymbol,
+                currencySymbolTypographyTokens,
+                ratePosition,
+                fontColor
+              )}
+            </Text>
+          ) : null}
+          {renderAmount(
+            amount,
+            amountTypographyTokens,
+            strikeThrough,
+            a11yText,
+            fontColor,
+            themeTokens
+          )}
+          {cents
+            ? renderTypography(`${separator}${cents}`, centsTypographyTokens, undefined, fontColor)
+            : null}
+          {signDirection === 'right' ? (
+            <Text style={staticStyles.currencySymbol}>
+              {renderCurrencySymbol(
+                currencySymbol,
+                currencySymbolTypographyTokens,
+                ratePosition,
+                fontColor
+              )}
+            </Text>
+          ) : null}
+        </View>
+        {rateText ? (
+          <Text
+            style={
+              ratePosition === 'bottom'
+                ? staticStyles.rateTextVerticalPosition
+                : [staticStyles.rateTextPosition, staticStyles.rateTextVerticalPosition]
+            }
+          >
+            {renderTypography(rateText, rateTypographyTokens, ratePosition, fontColor)}
+          </Text>
+        ) : null}
+        {!bottomText && footnoteLinks.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? (
+          <Text
+            style={[
+              footnoteLinkPositionStyles,
+              selectFootnoteLinksStyles({ bottomLinksMarginLeft })
+            ]}
+          >
+            {renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)}
+          </Text>
+        ) : null}
+      </View>
+      {!bottomText && footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? (
+        <View style={staticStyles.verticalFootnoteLinkContainer}>
+          {renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)}
+        </View>
+      ) : 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/src/PriceLockup/utils/renderTypography.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import Typography from '../../Typography'
+
+const renderTypography = (value, themeTokens, ratePosition, fontColor) => {
+  const customProps =
+    ratePosition === 'bottom'
+      ? { variant: { size: 'micro' }, tokens: { color: fontColor } }
+      : { tokens: { ...themeTokens, color: fontColor } }
+
+  return <Typography {...customProps}>{value}</Typography>
+}
+
+export default renderTypography

package/src/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'