@telus-uds/components-base 1.81.0 → 1.82.0

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