@telus-uds/components-base 1.75.0 → 1.77.0

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/Skeleton/Skeleton.jsx

@@ -25,9 +25,10 @@ const selectSkeletonStyles = ({ color, radius }) => ({
   maxWidth: '100%'
 })
 
-const selectLineStyles = ({ skeletonHeight, lineWidth }) => ({
+const selectLineStyles = ({ skeletonHeight, lineWidth, radius }) => ({
   width: lineWidth,
-  height: skeletonHeight
+  height: skeletonHeight,
+  borderRadius: radius
 })
 
 const selectShapeStyles = ({ skeletonHeight }) => ({
@@ -101,7 +102,11 @@ const Skeleton = forwardRef(
         ]
       }
 
-      return selectLineStyles({ skeletonHeight, lineWidth: getLineWidth() })
+      return selectLineStyles({
+        skeletonHeight,
+        lineWidth: getLineWidth(),
+        radius: themeTokens.lineRadius
+      })
     }
 
     const renderSkeleton = (index = 0) => {

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'

package/types/Typography.d.ts

@@ -23,6 +23,7 @@ export type TypographyVariants = {
   characters?: number
   spaceBetweenLines?: number
   squareRadius?: number
+  lineRadius?: number
   inverse?: boolean
 }