@telus-uds/components-base 1.80.1 → 1.82.0

package/src/ProductCard/ProductCard.jsx

@@ -0,0 +1,193 @@
+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 = ({
+  copy = 'en',
+  dictionary = defaultDictionary,
+  image = {
+    src: '',
+    alt: ''
+  },
+  cardId,
+  isSelected,
+  onSelect,
+  tokens,
+  ...rest
+}) => {
+  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]}
+    >
+      {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, { useState } 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 = ({ productCards, maxSelection = 1, ...rest }) => {
+  const [selectedCardIds, setSelectedCardIds] = 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)}>
+      <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/TextInput/TextInput.jsx

@@ -71,6 +71,7 @@ TextInput.propTypes = {
    * A callback which if provided will get a clear button rendered and will be called whenever that button gets pressed.
    */
   onClear: PropTypes.func,
+  onKeyPress: PropTypes.func,
   tokens: getTokensPropType('TextInput'),
   variant: variantProp.propType
 }

package/src/TextInput/TextInputBase.jsx

@@ -182,6 +182,7 @@ const TextInputBase = forwardRef(
       value,
       variant = {},
       type,
+      onKeyPress,
       ...rest
     },
     ref
@@ -311,7 +312,8 @@ const TextInputBase = forwardRef(
       onChange: handleChangeText,
       defaultValue: initialValue,
       maxLength: type === 'card' ? 19 : undefined,
-      value: isControlled ? currentValue : undefined
+      value: isControlled ? currentValue : undefined,
+      onKeyPress
     }
 
     const { themeOptions } = useTheme()
@@ -388,6 +390,7 @@ TextInputBase.propTypes = {
   onFocus: PropTypes.func,
   onMouseOut: PropTypes.func,
   onMouseOver: PropTypes.func,
+  onKeyPress: PropTypes.func,
   readOnly: PropTypes.bool,
   tokens: getTokensPropType('TextInput', 'TextArea'),
   value: PropTypes.string,

package/src/index.js

@@ -33,6 +33,8 @@ 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 ProductCard } from './ProductCard'
+export { default as ProductCardGroup } from './ProductCardGroup'
 export { default as Progress } from './Progress'
 export { default as QuickLinks } from './QuickLinks'
 export { default as QuickLinksFeature } from './QuickLinksFeature'

package/src/utils/ssr-media-query/create-stylesheet/index.js

@@ -1,7 +1,7 @@
 import { addCss } from '../utils/inject'
 import createDeclarationBlock from '../utils/create-declaration-block'
 import hash from '../hash'
-import { isMediaOrPseudo, deepClone, createCssRule } from '../utils/common'
+import { isMediaOrPseudo, deepClone, createCssRule, sanitizeStyle } from '../utils/common'
 
 const createStyleSheet = (stylesWithQuery) => {
   if (!stylesWithQuery) return { ids: {}, styles: {}, fullStyles: {} }
@@ -14,7 +14,8 @@ const createStyleSheet = (stylesWithQuery) => {
 
     const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo)
     mediaQueriesAndPseudoClasses.forEach((query) => {
-      const css = createDeclarationBlock(stylesWithQuery[key][query])
+      const sanitizedStyle = sanitizeStyle(stylesWithQuery[key][query])
+      const css = createDeclarationBlock(sanitizedStyle)
       const stringHash = `rnmq-${hash(`${key}${query}${css}`)}`
       const rule = createCssRule(query, stringHash, css)
 

package/src/utils/ssr-media-query/utils/common.js

@@ -17,4 +17,22 @@ const createCssRule = (query, stringHash, css) => {
   return rule
 }
 
-export { isMedia, isPseudo, isMediaOrPseudo, deepClone, createCssRule }
+/**
+ * Sanitizes the style object by converting any functions to their string representation.
+ *
+ * @param {Object} style - The style object to sanitize.
+ * @returns {Object} - The sanitized style object.
+ */
+const sanitizeStyle = (style) => {
+  const sanitizedStyle = { ...style }
+
+  Object.keys(sanitizedStyle).forEach((property) => {
+    if (typeof sanitizedStyle[property] === 'function') {
+      sanitizedStyle[property] = sanitizedStyle[property].toString()
+    }
+  })
+
+  return sanitizedStyle
+}
+
+export { isMedia, isPseudo, isMediaOrPseudo, deepClone, createCssRule, sanitizeStyle }