@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/ProductCard/ProductCard.js

@@ -0,0 +1,237 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
+var _ViewportProvider = require("../ViewportProvider");
+var _ThemeProvider = require("../ThemeProvider");
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _utils = require("../utils");
+var _Badge = _interopRequireDefault(require("../Badge"));
+var _PriceLockup = _interopRequireDefault(require("../PriceLockup"));
+var _Typography = _interopRequireDefault(require("../Typography"));
+var _Button = require("../Button");
+var _StackView = _interopRequireDefault(require("../StackView"));
+var _Box = _interopRequireDefault(require("../Box"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps, _utils.a11yProps]);
+const selectProductCardTokens = _ref => {
+  let {
+    borderStyle,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    paddingHorizontal,
+    paddingVertical
+  } = _ref;
+  return {
+    borderStyle,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    paddingHorizontal,
+    paddingVertical
+  };
+};
+const ProductCard = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    copy = 'en',
+    dictionary = _dictionary.default,
+    image = {
+      src: '',
+      alt: ''
+    },
+    cardId,
+    isSelected,
+    onSelect,
+    tokens,
+    ...rest
+  } = _ref2;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ProductCard', tokens, {
+    viewport
+  });
+  const getCopy = (0, _utils.useCopy)({
+    copy,
+    dictionary
+  });
+  const {
+    currentValue,
+    setValue
+  } = (0, _utils.useInputValue)();
+  const hasClicked = isSelected || currentValue;
+  const handlePress = event => {
+    if (cardId) {
+      onSelect(cardId);
+    } else {
+      setValue(!currentValue, event);
+    }
+  };
+  const renderButton = hasClicked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    vertical: 1,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+      space: 2,
+      direction: "row",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        icon: themeTokens.selectedButtonIcon,
+        variant: {
+          color: 'success'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        variant: {
+          size: 'h4'
+        },
+        tokens: {
+          fontWeight: 400
+        },
+        children: getCopy('selectedButtonLabel')
+      })]
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+    onPress: handlePress,
+    variant: {
+      purpose: 'primary',
+      size: 'small',
+      width: 'full'
+    },
+    children: getCopy('buttonLabel')
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    ...selectProps(rest),
+    style: [selectProductCardTokens(themeTokens), staticStyles.container],
+    ref: ref,
+    children: [image?.src ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: staticStyles.imageContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+        source: image.src,
+        style: staticStyles.image,
+        alt: image.alt,
+        accessibilityLabel: image.alt,
+        resizeMethod: "resize",
+        accessibilityIgnoresInvertColors: true
+      })
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: staticStyles.textContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        left: 3,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+          space: 1,
+          children: [getCopy('badgeText') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+            variant: {
+              outline: true,
+              purpose: 'editorial'
+            },
+            children: getCopy('badgeText')
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            variant: {
+              size: 'h6'
+            },
+            children: getCopy('brandName')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            variant: {
+              size: 'h4',
+              colour: 'brand'
+            },
+            tokens: {
+              fontWeight: 400
+            },
+            children: getCopy('productName')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+            space: 3,
+            divider: true,
+            direction: "row",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PriceLockup.default, {
+              ...getCopy('primaryPrice'),
+              size: "small",
+              ratePosition: "bottom"
+            }), getCopy('secondaryPrice')?.price ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PriceLockup.default, {
+              ...getCopy('secondaryPrice'),
+              size: "small",
+              ratePosition: "bottom"
+            }) : null]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            top: 2,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+              space: 2,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                variant: {
+                  size: 'h6'
+                },
+                tokens: {
+                  fontWeight: 500
+                },
+                children: getCopy('term')
+              }), getCopy('buttonLabel') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                top: 1,
+                children: renderButton
+              }) : null]
+            })
+          })]
+        })
+      })
+    })]
+  });
+});
+ProductCard.displayName = 'ProductCard';
+
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = _propTypes.default.shape({
+  badgeText: _propTypes.default.string,
+  brandName: _propTypes.default.string.isRequired,
+  productName: _propTypes.default.string.isRequired,
+  primaryPrice: _propTypes.default.object.isRequired,
+  secondaryPrice: _propTypes.default.object,
+  term: _propTypes.default.string.isRequired,
+  buttonLabel: _propTypes.default.string.isRequired,
+  selectedButtonLabel: _propTypes.default.string.isRequired
+});
+ProductCard.propTypes = {
+  ...selectedSystemPropTypes,
+  image: _propTypes.default.shape({
+    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+    alt: _propTypes.default.string
+  }),
+  /**
+   * Select English or French copy for the place holder labels.
+   * You may also pass in a custom dictionary object.
+   */
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr'])]),
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  tokens: (0, _utils.getTokensPropType)('ProductCard')
+};
+var _default = exports.default = ProductCard;
+const staticStyles = _StyleSheet.default.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/cjs/ProductCard/dictionary.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.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/cjs/ProductCard/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ProductCard = _interopRequireDefault(require("./ProductCard"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _ProductCard.default;

package/lib/cjs/ProductCardGroup/ProductCardGroup.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _utils = require("../utils");
+var _ProductCard = _interopRequireDefault(require("../ProductCard"));
+var _StackView = require("../StackView");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps, _utils.a11yProps]);
+const ProductCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    productCards,
+    maxSelection = 1,
+    ...rest
+  } = _ref;
+  const [selectedCardIds, setSelectedCardIds] = _react.default.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__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ...selectProps(rest),
+    ref: ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+      direction: {
+        xs: 'column',
+        lg: 'row'
+      },
+      space: 4,
+      children: productCards.map((cardProperties, index) => {
+        const cardId = cardProperties.id || index;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductCard.default, {
+            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.default.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.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    image: _propTypes.default.object,
+    dictionary: _propTypes.default.object
+  })).isRequired
+};
+var _default = exports.default = ProductCardGroup;

package/lib/cjs/ProductCardGroup/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ProductCardGroup = _interopRequireDefault(require("./ProductCardGroup"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _ProductCardGroup.default;

package/lib/cjs/Progress/Progress.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const selectProgressStyles = _ref => {
+  let {
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    borderRadius,
+    height,
+    shadow
+  } = _ref;
+  return {
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    borderRadius,
+    height,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+  };
+};
+
+/**
+ * The `Progress` is a container for displaying one or several `ProgressBar`s.
+ *
+ * ## Props
+ *
+ * - Use `children` prop to pass one or multiple `ProgressBar`s. Note that in case of stacked progress bars
+ *   each next will be displayed on top of the previous one.
+ *
+ * ## Tokens
+ *
+ * - Use the following tokens to customize the appearance:
+ *   - `backgroundColor` for the background color of the progress container,
+ *   - `borderColor` to control the color of the border,
+ *   - `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
+ *
+ * - Use the `size` variant to control the height of your progress bars:  passing `'mini'` will make your
+ *   progress bar container narrower.
+ *
+ * ## Usability and A11y guidelines
+ *
+ * `Progress` component accepts the standard accessibility properties, however it's more important to make sure
+ * its children (instances of `ProgressBar`) receive the accessibility properties specific to the `progressbar`
+ * role.
+ *
+ */
+const Progress = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    tokens,
+    variant,
+    ...rest
+  } = _ref2;
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Progress', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    style: [staticStyles.progressContainer, selectProgressStyles(themeTokens)],
+    ...selectProps(rest),
+    children: children
+  });
+});
+Progress.displayName = 'Progress';
+Progress.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Use the `children` prop to supply one or several `ProgressBar`s.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Progress tokens.
+   */
+  tokens: (0, _utils.getTokensPropType)('Progress'),
+  /**
+   * Progress variant.
+   */
+  variant: _utils.variantProp.propType
+};
+var _default = exports.default = Progress;
+const staticStyles = _StyleSheet.default.create({
+  progressContainer: {
+    position: 'relative'
+  }
+});

package/lib/cjs/Progress/ProgressBar.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(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 _constants = require("./constants");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const selectBarStyles = (_ref, calculatedPercentage, barPosition) => {
+  let {
+    backgroundColor,
+    borderRadius,
+    outlineWidth,
+    outlineColor,
+    shadow
+  } = _ref;
+  return {
+    backgroundColor,
+    borderRadius,
+    outlineWidth,
+    outlineColor,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow),
+    width: `${calculatedPercentage}%`,
+    left: `${barPosition}%`
+  };
+};
+
+/**
+ * The `ProgressBar` is a visual representation of linear progression.
+ * It provides simple but important information at a quick glance.
+ *
+ * ## Props
+ *
+ * - Use `percentage` prop to indicate completion
+ *
+ * ## Tokens
+ *
+ * - Use the following tokens to customize the appearance:
+ *   - `backgroundColor` for the background color of the progress bar,
+ *   - `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
+ *
+ * - Use the following variants to render specific types of progress bars:
+ *   - `negative`: set to `true` if you wish to use the negative theming for progress bar filling,
+ *   - `inactive`: set to `true` if you wish to style the progress bar as inactive.
+ *
+ * ## Usability and A11y guidelines
+ *
+ * `ProgressBar` component accepts all the standard accessibility properties including the ones that
+ * are specific to the `progressbar` role. By default the following props are used:
+ *
+ * - `accessibilityRole` (`role`): `progressbar`,
+ * - `accessibilityValue.min` (`aria-valuemin`): `0`,
+ * - `accessibilityValue.max` (`aria-valuemax`): `100`,
+ * - `accessibilityValue.now` (`aria-valuenow`): `percentage`,
+ * - `accessibilityValue.text` (`aria-valuetext`): `%{percentage}%`,
+ *
+ */
+const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    children = null,
+    percentage = 0,
+    tokens,
+    variant,
+    offset = {
+      items: 0,
+      current: 1
+    },
+    ...rest
+  } = _ref2;
+  const {
+    items,
+    current
+  } = offset;
+  let calculatedPercentage = percentage;
+  let barPosition = _constants.MIN_PERCENT_VALUE;
+  const validItems = items > _constants.MIN_PERCENT_VALUE;
+  if (validItems) {
+    calculatedPercentage = _constants.MAX_PERCENT_VALUE / items;
+    barPosition = calculatedPercentage * (current < 1 ? _constants.MIN_PERCENT_VALUE : current - 1);
+    if (current > items) {
+      barPosition = calculatedPercentage * (items - 1);
+    }
+  }
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ProgressBar', tokens, variant);
+  if (percentage < _constants.MIN_PERCENT_VALUE) {
+    throw new Error('ProgressBar: `percentage` must be a positive number');
+  } else if (percentage > _constants.MAX_PERCENT_VALUE) {
+    throw new Error('ProgressBar: `percentage` cannot exceed 100');
+  }
+  const selectedProps = selectProps({
+    accessibilityRole: 'progressbar',
+    accessibilityValue: {
+      min: _constants.MIN_PERCENT_VALUE,
+      max: _constants.MAX_PERCENT_VALUE,
+      now: calculatedPercentage.toFixed(2),
+      text: `${validItems ? (barPosition + calculatedPercentage).toFixed(2) : calculatedPercentage}%`
+    },
+    ...rest
+  });
+  return percentage > _constants.MIN_PERCENT_VALUE || items ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    style: [staticStyles.bar, selectBarStyles(themeTokens, calculatedPercentage, barPosition)],
+    ...selectedProps,
+    children: children ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBarBackground.default, {
+      variant: variant
+    })
+  }) : null;
+});
+ProgressBar.displayName = 'ProgressBar';
+ProgressBar.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Optional children that can be used to customize the progress bar filling.
+   */
+  children: _propTypes.default.node,
+  /**
+   * Accessibility label for the progress bar.
+   */
+  accessibilityLabel: _propTypes.default.string.isRequired,
+  /**
+   * Percentage of completion.
+   */
+  percentage: _propTypes.default.number,
+  /**
+   * Progress bar tokens.
+   */
+  tokens: (0, _utils.getTokensPropType)('ProgressBar'),
+  /**
+   * Progress bar variant.
+   */
+  variant: _utils.variantProp.propType,
+  /**
+   * Using the offset object, the `items` will determine the total number of items.
+   * The `current` will determine the current position of the progress bar.
+   */
+  offset: _propTypes.default.shape({
+    items: _propTypes.default.number,
+    current: _propTypes.default.number
+  })
+};
+var _default = exports.default = ProgressBar;
+const staticStyles = _StyleSheet.default.create({
+  bar: {
+    height: '100%',
+    overflow: 'hidden',
+    position: 'relative',
+    ..._Platform.default.select({
+      web: {
+        outlineStyle: 'solid'
+      }
+    })
+  }
+});