@telus-uds/components-base 2.0.0 → 2.0.1

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?.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' && value !== '$'
+      ? { variant: { size: 'micro' }, tokens: { color: fontColor } }
+      : { tokens: { ...themeTokens, color: fontColor } }
+
+  return <Typography {...customProps}>{value}</Typography>
+}
+
+export default renderTypography

package/src/ProductCard/ProductCard.jsx

@@ -0,0 +1,199 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, View, Image } from 'react-native'
+import { useViewport } from '../ViewportProvider'
+import { useThemeTokens } from '../ThemeProvider'
+import defaultDictionary from './dictionary'
+import {
+  selectSystemProps,
+  getTokensPropType,
+  htmlAttrs,
+  viewProps,
+  useInputValue,
+  useCopy,
+  a11yProps
+} from '../utils'
+
+import Badge from '../Badge'
+import PriceLockup from '../PriceLockup'
+import Typography from '../Typography'
+import { Button } from '../Button'
+import StackView from '../StackView'
+import Box from '../Box'
+import Icon from '../Icon'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps, a11yProps])
+
+const selectProductCardTokens = ({
+  borderStyle,
+  borderColor,
+  borderWidth,
+  borderRadius,
+  paddingHorizontal,
+  paddingVertical
+}) => ({
+  borderStyle,
+  borderColor,
+  borderWidth,
+  borderRadius,
+  paddingHorizontal,
+  paddingVertical
+})
+
+const ProductCard = React.forwardRef(
+  (
+    {
+      copy = 'en',
+      dictionary = defaultDictionary,
+      image = {
+        src: '',
+        alt: ''
+      },
+      cardId,
+      isSelected,
+      onSelect,
+      tokens,
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const themeTokens = useThemeTokens('ProductCard', tokens, { viewport })
+
+    const getCopy = useCopy({ copy, dictionary })
+
+    const { currentValue, setValue } = useInputValue()
+    const hasClicked = isSelected || currentValue
+
+    const handlePress = (event) => {
+      if (cardId) {
+        onSelect(cardId)
+      } else {
+        setValue(!currentValue, event)
+      }
+    }
+
+    const renderButton = hasClicked ? (
+      <Box vertical={1}>
+        <StackView space={2} direction="row">
+          <Icon icon={themeTokens.selectedButtonIcon} variant={{ color: 'success' }} />
+          <Typography variant={{ size: 'h4' }} tokens={{ fontWeight: 400 }}>
+            {getCopy('selectedButtonLabel')}
+          </Typography>
+        </StackView>
+      </Box>
+    ) : (
+      <Button onPress={handlePress} variant={{ purpose: 'primary', size: 'small', width: 'full' }}>
+        {getCopy('buttonLabel')}
+      </Button>
+    )
+
+    return (
+      <View
+        {...selectProps(rest)}
+        style={[selectProductCardTokens(themeTokens), staticStyles.container]}
+        ref={ref}
+      >
+        {image?.src ? (
+          <View style={staticStyles.imageContainer}>
+            <Image
+              source={image.src}
+              style={staticStyles.image}
+              alt={image.alt}
+              accessibilityLabel={image.alt}
+              resizeMethod="resize"
+              accessibilityIgnoresInvertColors
+            />
+          </View>
+        ) : null}
+
+        <View style={staticStyles.textContainer}>
+          <Box left={3}>
+            <StackView space={1}>
+              {getCopy('badgeText') ? (
+                <Badge variant={{ outline: true, purpose: 'editorial' }}>
+                  {getCopy('badgeText')}
+                </Badge>
+              ) : null}
+              <Typography variant={{ size: 'h6' }}>{getCopy('brandName')}</Typography>
+              <Typography variant={{ size: 'h4', colour: 'brand' }} tokens={{ fontWeight: 400 }}>
+                {getCopy('productName')}
+              </Typography>
+              <StackView space={3} divider direction="row">
+                <PriceLockup {...getCopy('primaryPrice')} size="small" ratePosition="bottom" />
+                {getCopy('secondaryPrice')?.price ? (
+                  <PriceLockup {...getCopy('secondaryPrice')} size="small" ratePosition="bottom" />
+                ) : null}
+              </StackView>
+              <Box top={2}>
+                <StackView space={2}>
+                  <Typography variant={{ size: 'h6' }} tokens={{ fontWeight: 500 }}>
+                    {getCopy('term')}
+                  </Typography>
+                  {getCopy('buttonLabel') ? <Box top={1}>{renderButton}</Box> : null}
+                </StackView>
+              </Box>
+            </StackView>
+          </Box>
+        </View>
+      </View>
+    )
+  }
+)
+
+ProductCard.displayName = 'ProductCard'
+
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = PropTypes.shape({
+  badgeText: PropTypes.string,
+  brandName: PropTypes.string.isRequired,
+  productName: PropTypes.string.isRequired,
+  primaryPrice: PropTypes.object.isRequired,
+  secondaryPrice: PropTypes.object,
+  term: PropTypes.string.isRequired,
+  buttonLabel: PropTypes.string.isRequired,
+  selectedButtonLabel: PropTypes.string.isRequired
+})
+
+ProductCard.propTypes = {
+  ...selectedSystemPropTypes,
+  image: PropTypes.shape({
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    alt: PropTypes.string
+  }),
+  /**
+   * Select English or French copy for the place holder labels.
+   * You may also pass in a custom dictionary object.
+   */
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr'])]),
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  tokens: getTokensPropType('ProductCard')
+}
+export default ProductCard
+
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flex: 1
+  },
+  imageContainer: {
+    width: '30%',
+    minWidth: 96,
+    maxWidth: 96
+  },
+  image: {
+    resizeMode: 'contain',
+    width: '100%',
+    height: undefined, // This is to maintain the aspect ratio
+    aspectRatio: 0.8
+  },
+  textContainer: {
+    width: '70%'
+  }
+})

package/src/ProductCard/dictionary.js

@@ -0,0 +1,38 @@
+export default {
+  en: {
+    badgeText: '',
+    brandName: 'Brand name',
+    productName: 'Product name',
+    primaryPrice: {
+      price: '00',
+      signDirection: 'left',
+      rateText: '/month'
+    },
+    secondaryPrice: {
+      price: '',
+      signDirection: 'left',
+      rateText: 'Upfront'
+    },
+    term: '24 months | 0% APR Bring-it-Back applied',
+    buttonLabel: 'Select this phone',
+    selectedButtonLabel: 'Selected phone'
+  },
+  fr: {
+    badgeText: '',
+    brandName: 'Brand name',
+    productName: 'Product name',
+    primaryPrice: {
+      price: '00',
+      signDirection: 'right',
+      rateText: '/mois'
+    },
+    secondaryPrice: {
+      price: '',
+      signDirection: 'right',
+      rateText: "d'acompte"
+    },
+    term: '24 mois | TAP de 0% | avec Option retour',
+    buttonLabel: 'Sélectionner ce téléphone',
+    selectedButtonLabel: 'Téléphone sélectionné'
+  }
+}

package/src/ProductCard/index.js

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

package/src/ProductCardGroup/ProductCardGroup.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+import { selectSystemProps, htmlAttrs, viewProps, a11yProps } from '../utils'
+
+import ProductCard from '../ProductCard'
+import { StackWrap } from '../StackView'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps, a11yProps])
+
+const ProductCardGroup = React.forwardRef(({ productCards, maxSelection = 1, ...rest }, ref) => {
+  const [selectedCardIds, setSelectedCardIds] = React.useState([])
+
+  const handleSelect = (id) => {
+    const isAlreadySelected = selectedCardIds.includes(id)
+    let updatedSelectedCardIds
+
+    if (isAlreadySelected) {
+      updatedSelectedCardIds = selectedCardIds.filter((cardId) => cardId !== id)
+    } else if (maxSelection && selectedCardIds.length >= maxSelection) {
+      updatedSelectedCardIds = selectedCardIds.filter((_, index) => index !== 0).concat(id)
+    } else {
+      updatedSelectedCardIds = [...selectedCardIds, id]
+    }
+
+    setSelectedCardIds(updatedSelectedCardIds)
+  }
+
+  return (
+    <View {...selectProps(rest)} ref={ref}>
+      <StackWrap direction={{ xs: 'column', lg: 'row' }} space={4}>
+        {productCards.map((cardProperties, index) => {
+          const cardId = cardProperties.id || index
+
+          return (
+            <View key={cardId}>
+              <ProductCard
+                key={cardId}
+                cardId={cardId}
+                isSelected={selectedCardIds.includes(cardId)}
+                onSelect={handleSelect}
+                {...cardProperties}
+              />
+            </View>
+          )
+        })}
+      </StackWrap>
+    </View>
+  )
+})
+
+ProductCardGroup.displayName = 'ProductCardGroup'
+
+ProductCardGroup.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The maximum number of ProductCards a user may select at once. Defaults to 1.
+   * To have no limit and allow any number of selections, pass `null`.
+   */
+  maxSelection: PropTypes.number,
+  /**
+   * Props to be passed to the `ProductCard` component.
+   * id is required for each card.
+   * You may also pass in a custom dictionary object.
+   */
+  productCards: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      image: PropTypes.object,
+      dictionary: PropTypes.object
+    })
+  ).isRequired
+}
+
+export default ProductCardGroup

package/src/ProductCardGroup/index.js

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

package/src/Progress/Progress.jsx

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
-import { useThemeTokens } from '../ThemeProvider'
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -12,13 +12,15 @@ const selectProgressStyles = ({
   borderWidth,
   borderColor,
   borderRadius,
-  height
+  height,
+  shadow
 }) => ({
   backgroundColor,
   borderWidth,
   borderColor,
   borderRadius,
-  height
+  height,
+  ...applyShadowToken(shadow)
 })
 
 /**
@@ -37,6 +39,7 @@ const selectProgressStyles = ({
  *   - `borderRadius` for the rounded corners,
  *   - `borderWidth` to change the border width.
  *   - `height` to control the height of the progress bars displayed within the progress bar container.
+ *   - `shadow` to apply a box shadow to the progress bar container.
  *
  * ## Variants
  *
@@ -50,7 +53,7 @@ const selectProgressStyles = ({
  * role.
  *
  */
-const Progress = forwardRef(({ children, tokens, variant, ...rest }, ref) => {
+const Progress = React.forwardRef(({ children, tokens, variant, ...rest }, ref) => {
   const themeTokens = useThemeTokens('Progress', tokens, variant)
 
   return (

package/src/Progress/ProgressBar.jsx

@@ -1,21 +1,22 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
 import ProgressBarBackground from './ProgressBarBackground'
-import { useThemeTokens } from '../ThemeProvider'
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectBarStyles = (
-  { backgroundColor, borderRadius, outlineWidth, outlineColor },
+  { backgroundColor, borderRadius, outlineWidth, outlineColor, shadow },
   percentage
 ) => ({
   backgroundColor,
   borderRadius,
   outlineWidth,
   outlineColor,
+  ...applyShadowToken(shadow),
   width: `${percentage}%`
 })
 
@@ -34,6 +35,7 @@ const selectBarStyles = (
  *   - `borderRadius` for the rounded corners,
  *   - `outlineColor` to control the color of the border (outline),
  *   - `outlineWidth` to change the outline width.
+ *   - `shadow` to apply a box shadow to the progress bar.
  *
  * ## Variants
  *
@@ -53,7 +55,7 @@ const selectBarStyles = (
  * - `accessibilityValue.text` (`aria-valuetext`): `%{percentage}%`,
  *
  */
-const ProgressBar = forwardRef(
+const ProgressBar = React.forwardRef(
   ({ children = null, percentage = 0, tokens, variant, ...rest }, ref) => {
     const themeTokens = useThemeTokens('ProgressBar', tokens, variant)
     if (percentage < 0) {