@telus-uds/components-base 2.0.0 → 2.0.1

package/lib/ProductCard/ProductCard.js

@@ -0,0 +1,231 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import Image from "react-native-web/dist/exports/Image";
+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';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps, a11yProps]);
+const selectProductCardTokens = _ref => {
+  let {
+    borderStyle,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    paddingHorizontal,
+    paddingVertical
+  } = _ref;
+  return {
+    borderStyle,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    paddingHorizontal,
+    paddingVertical
+  };
+};
+const ProductCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  var _getCopy;
+  let {
+    copy = 'en',
+    dictionary = defaultDictionary,
+    image = {
+      src: '',
+      alt: ''
+    },
+    cardId,
+    isSelected,
+    onSelect,
+    tokens,
+    ...rest
+  } = _ref2;
+  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 ? /*#__PURE__*/_jsx(Box, {
+    vertical: 1,
+    children: /*#__PURE__*/_jsxs(StackView, {
+      space: 2,
+      direction: "row",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: themeTokens.selectedButtonIcon,
+        variant: {
+          color: 'success'
+        }
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: {
+          size: 'h4'
+        },
+        tokens: {
+          fontWeight: 400
+        },
+        children: getCopy('selectedButtonLabel')
+      })]
+    })
+  }) : /*#__PURE__*/_jsx(Button, {
+    onPress: handlePress,
+    variant: {
+      purpose: 'primary',
+      size: 'small',
+      width: 'full'
+    },
+    children: getCopy('buttonLabel')
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    ...selectProps(rest),
+    style: [selectProductCardTokens(themeTokens), staticStyles.container],
+    ref: ref,
+    children: [image !== null && image !== void 0 && image.src ? /*#__PURE__*/_jsx(View, {
+      style: staticStyles.imageContainer,
+      children: /*#__PURE__*/_jsx(Image, {
+        source: image.src,
+        style: staticStyles.image,
+        alt: image.alt,
+        accessibilityLabel: image.alt,
+        resizeMethod: "resize",
+        accessibilityIgnoresInvertColors: true
+      })
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: staticStyles.textContainer,
+      children: /*#__PURE__*/_jsx(Box, {
+        left: 3,
+        children: /*#__PURE__*/_jsxs(StackView, {
+          space: 1,
+          children: [getCopy('badgeText') ? /*#__PURE__*/_jsx(Badge, {
+            variant: {
+              outline: true,
+              purpose: 'editorial'
+            },
+            children: getCopy('badgeText')
+          }) : null, /*#__PURE__*/_jsx(Typography, {
+            variant: {
+              size: 'h6'
+            },
+            children: getCopy('brandName')
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: {
+              size: 'h4',
+              colour: 'brand'
+            },
+            tokens: {
+              fontWeight: 400
+            },
+            children: getCopy('productName')
+          }), /*#__PURE__*/_jsxs(StackView, {
+            space: 3,
+            divider: true,
+            direction: "row",
+            children: [/*#__PURE__*/_jsx(PriceLockup, {
+              ...getCopy('primaryPrice'),
+              size: "small",
+              ratePosition: "bottom"
+            }), (_getCopy = getCopy('secondaryPrice')) !== null && _getCopy !== void 0 && _getCopy.price ? /*#__PURE__*/_jsx(PriceLockup, {
+              ...getCopy('secondaryPrice'),
+              size: "small",
+              ratePosition: "bottom"
+            }) : null]
+          }), /*#__PURE__*/_jsx(Box, {
+            top: 2,
+            children: /*#__PURE__*/_jsxs(StackView, {
+              space: 2,
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: {
+                  size: 'h6'
+                },
+                tokens: {
+                  fontWeight: 500
+                },
+                children: getCopy('term')
+              }), getCopy('buttonLabel') ? /*#__PURE__*/_jsx(Box, {
+                top: 1,
+                children: renderButton
+              }) : null]
+            })
+          })]
+        })
+      })
+    })]
+  });
+});
+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/lib/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/lib/ProductCard/index.js

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

package/lib/ProductCardGroup/ProductCardGroup.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import { selectSystemProps, htmlAttrs, viewProps, a11yProps } from '../utils';
+import ProductCard from '../ProductCard';
+import { StackWrap } from '../StackView';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps, a11yProps]);
+const ProductCardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    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 /*#__PURE__*/_jsx(View, {
+    ...selectProps(rest),
+    ref: ref,
+    children: /*#__PURE__*/_jsx(StackWrap, {
+      direction: {
+        xs: 'column',
+        lg: 'row'
+      },
+      space: 4,
+      children: productCards.map((cardProperties, index) => {
+        const cardId = cardProperties.id || index;
+        return /*#__PURE__*/_jsx(View, {
+          children: /*#__PURE__*/_jsx(ProductCard, {
+            cardId: cardId,
+            isSelected: selectedCardIds.includes(cardId),
+            onSelect: handleSelect,
+            ...cardProperties
+          }, cardId)
+        }, cardId);
+      })
+    })
+  });
+});
+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/lib/ProductCardGroup/index.js

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

package/lib/Progress/Progress.js

@@ -1,46 +1,29 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _utils = require("../utils");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectProgressStyles = _ref => {
   let {
     backgroundColor,
     borderWidth,
     borderColor,
     borderRadius,
-    height
+    height,
+    shadow
   } = _ref;
   return {
     backgroundColor,
     borderWidth,
     borderColor,
     borderRadius,
-    height
+    height,
+    ...applyShadowToken(shadow)
   };
 };
+
 /**
  * The `Progress` is a container for displaying one or several `ProgressBar`s.
  *
@@ -57,6 +40,7 @@ const selectProgressStyles = _ref => {
  *   - `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
  *
@@ -70,17 +54,15 @@ const selectProgressStyles = _ref => {
  * role.
  *
  */
-
-
-const Progress = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const Progress = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
     variant,
     ...rest
   } = _ref2;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Progress', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const themeTokens = useThemeTokens('Progress', tokens, variant);
+  return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: selectProgressStyles(themeTokens),
     ...selectProps(rest),
@@ -88,22 +70,19 @@ const Progress = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   });
 });
 Progress.displayName = 'Progress';
-Progress.propTypes = { ...selectedSystemPropTypes,
-
+Progress.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Use the `children` prop to supply one or several `ProgressBar`s.
    */
-  children: _propTypes.default.node.isRequired,
-
+  children: PropTypes.node.isRequired,
   /**
    * Progress tokens.
    */
-  tokens: (0, _utils.getTokensPropType)('Progress'),
-
+  tokens: getTokensPropType('Progress'),
   /**
    * Progress variant.
    */
-  variant: _utils.variantProp.propType
+  variant: variantProp.propType
 };
-var _default = Progress;
-exports.default = _default;
+export default Progress;

package/lib/Progress/ProgressBar.js

@@ -1,51 +1,31 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _ProgressBarBackground = _interopRequireDefault(require("./ProgressBarBackground"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _utils = require("../utils");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-
+import React from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import ProgressBarBackground from './ProgressBarBackground';
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectBarStyles = (_ref, percentage) => {
   let {
     backgroundColor,
     borderRadius,
     outlineWidth,
-    outlineColor
+    outlineColor,
+    shadow
   } = _ref;
   return {
     backgroundColor,
     borderRadius,
     outlineWidth,
     outlineColor,
-    width: "".concat(percentage, "%")
+    ...applyShadowToken(shadow),
+    width: `${percentage}%`
   };
 };
+
 /**
  * The `ProgressBar` is a visual representation of linear progression.
  * It provides simple but important information at a quick glance.
@@ -61,6 +41,7 @@ const selectBarStyles = (_ref, percentage) => {
  *   - `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
  *
@@ -80,9 +61,7 @@ const selectBarStyles = (_ref, percentage) => {
  * - `accessibilityValue.text` (`aria-valuetext`): `%{percentage}%`,
  *
  */
-
-
-const ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children = null,
     percentage = 0,
@@ -90,70 +69,62 @@ const ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     variant,
     ...rest
   } = _ref2;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ProgressBar', tokens, variant);
-
+  const themeTokens = useThemeTokens('ProgressBar', tokens, variant);
   if (percentage < 0) {
     throw new Error('ProgressBar: `percentage` must be a positive number');
   } else if (percentage > 100) {
     throw new Error('ProgressBar: `percentage` cannot exceed 100');
   }
-
   const selectedProps = selectProps({
     accessibilityRole: 'progressbar',
     accessibilityValue: {
       min: 0,
       max: 100,
       now: percentage,
-      text: "".concat(percentage, "%")
+      text: `${percentage}%`
     },
     ...rest
   });
-  return percentage > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return percentage > 0 ? /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: [staticStyles.bar, selectBarStyles(themeTokens, percentage)],
     ...selectedProps,
-    children: children !== null && children !== void 0 ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBarBackground.default, {
+    children: children ?? /*#__PURE__*/_jsx(ProgressBarBackground, {
       variant: variant
     })
   }) : null;
 });
 ProgressBar.displayName = 'ProgressBar';
-ProgressBar.propTypes = { ...selectedSystemPropTypes,
-
+ProgressBar.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Optional children that can be used to customize the progress bar filling.
    */
-  children: _propTypes.default.node,
-
+  children: PropTypes.node,
   /**
    * Accessibility label for the progress bar.
    */
-  accessibilityLabel: _propTypes.default.string.isRequired,
-
+  accessibilityLabel: PropTypes.string.isRequired,
   /**
    * Percentage of completion.
    */
-  percentage: _propTypes.default.number,
-
+  percentage: PropTypes.number,
   /**
    * Progress bar tokens.
    */
-  tokens: (0, _utils.getTokensPropType)('ProgressBar'),
-
+  tokens: getTokensPropType('ProgressBar'),
   /**
    * Progress bar variant.
    */
-  variant: _utils.variantProp.propType
+  variant: variantProp.propType
 };
-var _default = ProgressBar;
-exports.default = _default;
-
-const staticStyles = _StyleSheet.default.create({
+export default ProgressBar;
+const staticStyles = StyleSheet.create({
   bar: {
     height: '100%',
     overflow: 'hidden',
     position: 'absolute',
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         outlineStyle: 'solid'
       }