@telus-uds/components-web 3.4.0 → 4.0.0

package/lib/cjs/Progress/ProgressBar.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Passes React Native-oriented system props through UDS Progress
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.viewProps]);
+const {
+  Bar: ProgressBarBase
+} = _componentsBase.Progress;
+const Gradient = /*#__PURE__*/_styledComponents.default.div.attrs({
+  'data-testid': 'ProgressBar-Gradient'
+}).withConfig({
+  displayName: "ProgressBar__Gradient",
+  componentId: "components-web__sc-1vmzyq5-0"
+})(_ref => {
+  let {
+    gradient: {
+      angle,
+      stops,
+      type
+    },
+    borderRadius,
+    shadow
+  } = _ref;
+  return {
+    height: '100%',
+    width: '100%',
+    background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`,
+    borderRadius,
+    ...(0, _componentsBase.applyShadowToken)(shadow)
+  };
+});
+
+/**
+ * The `ProgressBar` is a visual representation of linear progression.
+ * It provides simple but important information at a quick glance.
+ * This is a  Web-specific progress bar.
+ *
+ * ## Component API
+ *
+ * Use props and tokens from the base ProgressBar component. The difference is that the
+ * `gradient` is being used here to provide gradient filling.
+ *
+ */
+
+const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    percentage,
+    tokens,
+    variant,
+    offset,
+    ...rest
+  } = _ref2;
+  const themeTokens = (0, _componentsBase.useThemeTokens)('ProgressBar', tokens, variant);
+  const selectedProps = selectProps(rest);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressBarBase, {
+    percentage: percentage,
+    tokens: tokens,
+    variant: variant,
+    ref: ref,
+    offset: offset,
+    ...selectedProps,
+    children: themeTokens.gradient && /*#__PURE__*/(0, _jsxRuntime.jsx)(Gradient, {
+      ...themeTokens
+    })
+  });
+});
+ProgressBar.displayName = 'ProgressBar';
+ProgressBar.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Percentage of completion.
+   */
+  percentage: _propTypes.default.number,
+  /**
+   * ProgressBar tokens.
+   */
+  tokens: (0, _componentsBase.getTokensPropType)('ProgressBar'),
+  /**
+   * ProgressBar variant.
+   */
+  variant: _componentsBase.variantProp.propType,
+  /**
+   * Offset position.
+   */
+  offset: _propTypes.default.shape({
+    items: _propTypes.default.number,
+    current: _propTypes.default.number
+  })
+};
+var _default = exports.default = ProgressBar;

package/lib/cjs/Progress/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _componentsBase = require("@telus-uds/components-base");
+var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_componentsBase.Progress.Bar = _ProgressBar.default;
+var _default = exports.default = _componentsBase.Progress;

package/lib/cjs/QuantitySelector/QuantitySelector.js

@@ -0,0 +1,267 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _utils = require("../utils");
+var _styles = require("./styles");
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _SideButton = _interopRequireDefault(require("./SideButton"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  isNaN
+} = Number;
+const isNumber = value => {
+  return typeof value === 'number' && !isNaN(value);
+};
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _utils.htmlAttrs]);
+const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    id = 'quantity-selector',
+    minNumber,
+    maxNumber,
+    defaultValue,
+    value,
+    label,
+    hint,
+    hintPosition = 'inline',
+    tooltip,
+    onChange,
+    dictionary = _dictionary.default,
+    accessibilityLabel,
+    copy = 'en',
+    variant = {
+      alternative: false
+    },
+    tokens,
+    testID = 'quantity-selector-testid',
+    ...rest
+  } = _ref;
+  const {
+    disabled
+  } = variant;
+  const [error, setError] = _react.default.useState('');
+  const getCopy = (0, _componentsBase.useCopy)({
+    dictionary,
+    copy
+  });
+  const getValidatedNumber = numberToEvaluate => {
+    if (isNaN(numberToEvaluate)) return null;
+    if (isNumber(minNumber) && numberToEvaluate < minNumber) throw getCopy('errors').numberIsTooSmall(minNumber);
+    if (isNumber(maxNumber) && numberToEvaluate > maxNumber) throw getCopy('errors').numberIsTooBig(maxNumber);
+    return numberToEvaluate;
+  };
+  const {
+    currentValue: number,
+    setValue: setNumber
+  } = (0, _componentsBase.useInputValue)({
+    value: getValidatedNumber(value),
+    initialValue: getValidatedNumber(defaultValue),
+    onChange
+  });
+  const isDecreaseEnabled = !disabled && !isNumber(minNumber) || number > minNumber;
+  const isIncreaseEnabled = !disabled && !isNumber(maxNumber) || number < maxNumber;
+  const inputValue = isNumber(number) ? number.toString() : '';
+  const updateNumber = (newNumber, originalInputEvent) => {
+    try {
+      const validatedNumber = getValidatedNumber(newNumber);
+      setNumber(validatedNumber, originalInputEvent);
+      setError('');
+    } catch (e) {
+      setError(e);
+    }
+  };
+  const inputChangeHandler = (textInputValue, event) => {
+    if (textInputValue === '') setNumber(null);
+    const numberFromTextInput = Number(textInputValue);
+    if (isNumber(numberFromTextInput)) {
+      updateNumber(numberFromTextInput, event);
+    } else {
+      setError(getCopy('errors').invalidCharacters);
+    }
+  };
+  const renderLabel = () => label || hint ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.InputLabel, {
+    forId: id,
+    label: label,
+    hint: hint,
+    hintPosition: hintPosition,
+    tooltip: tooltip
+  }) : null;
+  const getTokens = (0, _componentsBase.useThemeTokensCallback)('QuantitySelector', tokens, variant);
+  const renderTextInput = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.TextInput, {
+    nativeID: id,
+    value: inputValue,
+    defaultValue: defaultValue,
+    tokens: textInputState => {
+      const {
+        inputWidth,
+        inputBorderWidth,
+        inputBorderColor,
+        textColor,
+        inputBackgroundColor,
+        ...restOfTokens
+      } = getTokens({
+        ...textInputState
+      });
+      return {
+        ...restOfTokens,
+        order: 1,
+        borderWidth: inputBorderWidth,
+        backgroundColor: inputBackgroundColor,
+        color: textColor,
+        width: inputWidth,
+        borderColor: inputBorderColor,
+        borderRadius: 0,
+        outerBorderWidth: 0
+      };
+    },
+    onChange: inputChangeHandler
+    // Using title as an accessibility workaround
+    // given that accessibilityLabel is not available
+    ,
+    keyboardType: "numeric",
+    accessibilityLabel: accessibilityLabel ?? getCopy('accessibility').a11yLabel,
+    accessibilityRole: "spinbutton",
+    accessibilityValueMax: maxNumber,
+    accessibilityValueMin: minNumber,
+    accessibilityValueNow: number
+  });
+  const flexOrder = order => ({
+    order
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Box, {
+    testID: testID,
+    ref: ref,
+    ...selectProps(rest),
+    children: [renderLabel(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+      space: 2
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputWrapper, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputField, {
+        children: renderTextInput()
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: flexOrder(0),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, {
+          isEnabled: isDecreaseEnabled,
+          onPress: () => updateNumber(number - 1),
+          onDoubleClick: () => updateNumber(number - 1),
+          tokens: tokens,
+          variant: {
+            decrease: true,
+            ...variant
+          },
+          accessibilityLabel: getCopy('accessibility').decreaseButton,
+          accessibilityDisabled: !isDecreaseEnabled
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: flexOrder(2),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, {
+          isEnabled: isIncreaseEnabled,
+          onPress: () => updateNumber(number + 1),
+          onDoubleClick: () => updateNumber(number + 1),
+          accessibilityLabel: getCopy('accessibility').increaseButton,
+          accessibilityDisabled: !isIncreaseEnabled,
+          tokens: tokens,
+          variant: {
+            increase: true,
+            ...variant
+          }
+        })
+      })]
+    }), error ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Box, {
+      vertical: 2,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Feedback, {
+        validation: "error",
+        children: error
+      })
+    }) : null]
+  });
+});
+
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = _propTypes.default.shape({
+  accessibility: _propTypes.default.shape({
+    a11yLabel: _propTypes.default.string.isRequired,
+    increaseButton: _propTypes.default.string.isRequired,
+    decreaseButton: _propTypes.default.string.isRequired
+  }).isRequired,
+  errors: _propTypes.default.shape({
+    numberIsTooSmall: _propTypes.default.func.isRequired,
+    numberIsTooBig: _propTypes.default.func.isRequired,
+    invalidCharacters: _propTypes.default.string.isRequired
+  }).isRequired
+});
+QuantitySelector.displayName = 'QuantitySelector';
+QuantitySelector.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The id of the input field
+   */
+  id: _propTypes.default.string,
+  /**
+   * The minimum number allowed
+   */
+  minNumber: _propTypes.default.number,
+  /**
+   * The maximum number allowed
+   */
+  maxNumber: _propTypes.default.number,
+  /**
+   * The callback function that is called when the value of the input field changes
+   */
+  onChange: _propTypes.default.func,
+  /**
+   * The default value of the input field
+   */
+  defaultValue: _propTypes.default.number,
+  /**
+   * If the input's state is to be controlled by a parent component, use this prop
+   * together with the `onChange` to pass down and update the lifted state.
+   */
+  value: _propTypes.default.number,
+  /**
+   * The label of the input field
+   */
+  label: _propTypes.default.string,
+  /**
+   * The hint of the input field
+   */
+  hint: _propTypes.default.string,
+  /**
+   * The position of the hint. Could be shown along side the label or below it
+   */
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+  /**
+   * Adds a question mark which will display a tooltip when clicked
+   */
+  tooltip: _propTypes.default.string,
+  /**
+   * The accessibility label of the input field
+   */
+  accessibilityLabel: _propTypes.default.string,
+  /**
+   * The dictionary object containing the content for the input field
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  /**
+   * The language to use for the copy.
+   */
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr'])]),
+  variant: _propTypes.default.exact({
+    alternative: _propTypes.default.bool,
+    disabled: _propTypes.default.bool
+  }),
+  tokens: (0, _componentsBase.getTokensPropType)('QuantitySelector'),
+  /**
+   * Sets `data-testid` attribute on the input field for testing purposes.
+   */
+  testID: _propTypes.default.string
+};
+var _default = exports.default = QuantitySelector;

package/lib/cjs/QuantitySelector/SideButton.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _componentsBase = require("@telus-uds/components-base");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SideButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    isEnabled = true,
+    onPress = () => {},
+    onDoubleClick = () => {},
+    accessibilityLabel = '',
+    accessibilityDisabled = false,
+    tokens = {},
+    variant = {}
+  } = _ref;
+  const getTokens = (0, _componentsBase.useThemeTokensCallback)('QuantitySelectorSideButton', tokens, variant);
+  const getButtonTokens = _ref2 => {
+    let {
+      buttonState,
+      disabled
+    } = _ref2;
+    const {
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      ...rest
+    } = getTokens({
+      ...buttonState,
+      disabled
+    });
+    return {
+      ...rest,
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outerBorderRadius: borderRadius,
+      outerBorderTopLeftRadius: borderTopLeftRadius,
+      outerBorderTopRightRadius: borderTopRightRadius,
+      outerBorderBottomLeftRadius: borderBottomLeftRadius,
+      outerBorderBottomRightRadius: borderBottomRightRadius,
+      outerBorderGap: 0,
+      outerBorderWidth: 0
+    };
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
+    tokens: buttonState => getButtonTokens({
+      disabled: !isEnabled,
+      buttonState
+    }),
+    onPress: onPress,
+    onDoubleClick: onDoubleClick,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityDisabled: accessibilityDisabled,
+    ref: ref
+  });
+});
+SideButton.displayName = 'QuantitySelectorSideButton';
+SideButton.propTypes = {
+  isEnabled: _propTypes.default.bool,
+  onPress: _propTypes.default.func,
+  onDoubleClick: _propTypes.default.func,
+  accessibilityLabel: _propTypes.default.string,
+  accessibilityDisabled: _propTypes.default.bool,
+  tokens: (0, _componentsBase.getTokensPropType)('QuantitySelectorSideButton'),
+  variant: _propTypes.default.object
+};
+var _default = exports.default = SideButton;

package/lib/cjs/QuantitySelector/dictionary.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  en: {
+    accessibility: {
+      a11yLabel: 'Quantity selector',
+      increaseButton: 'Increase quantity',
+      decreaseButton: 'Decrease quantity'
+    },
+    errors: {
+      numberIsTooSmall: minNumber => `You can enter a number equal or greater than ${minNumber}.`,
+      numberIsTooBig: maxNumber => `You can enter a number equal or less than ${maxNumber}.`,
+      invalidCharacters: 'Try using numbers only. Alphabetical or symbols characters are not allowed.'
+    }
+  },
+  fr: {
+    accessibility: {
+      a11yLabel: 'Sélecteur de quantité',
+      increaseButton: `Augmenter la quantité`,
+      decreaseButton: `Réduire la quantité`
+    },
+    errors: {
+      numberIsTooSmall: minNumber => `Vous pouvez saisir un nombre égal ou supérieur à ${minNumber}.`,
+      numberIsTooBig: maxNumber => `Vous pouvez saisir un nombre égal ou inférieur à ${maxNumber}.`,
+      invalidCharacters: `Essayez d'utiliser seulement des chiffres. Les caractères alphabétiques ou les symboles ne sont pas permis.`
+    }
+  }
+};

package/lib/cjs/QuantitySelector/index.js

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

package/lib/cjs/QuantitySelector/styles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputWrapper = exports.InputField = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const InputField = exports.InputField = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "styles__InputField",
+  componentId: "components-web__sc-1lrz1xk-0"
+})(["order:1;text-align:center;z-index:10;input{text-align:center;}"]);
+const InputWrapper = exports.InputWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "styles__InputWrapper",
+  componentId: "components-web__sc-1lrz1xk-1"
+})(["text-align:start;display:flex;flex-direction:row;flex-wrap:nowrap;"]);

package/lib/cjs/ResponsiveImage/ResponsiveImage.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _systemConstants = require("@telus-uds/system-constants");
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs, _utils.contentfulProps]);
+const staticStyles = {
+  image: {
+    display: 'block',
+    width: '100%'
+  }
+};
+
+/**
+ * Provide different image sources for different screen sizes.
+ */
+const ResponsiveImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    xsSrc,
+    smSrc,
+    mdSrc,
+    lgSrc,
+    xlSrc,
+    fallbackSrc,
+    alt,
+    loading = 'eager',
+    dataSet,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("picture", {
+    ...selectProps(rest),
+    ref: ref,
+    ...dataSet,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+      srcSet: xlSrc,
+      media: `(min-width: ${_systemConstants.viewports.map.get(_systemConstants.viewports.xl)}px)`
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+      srcSet: lgSrc,
+      media: `(min-width: ${_systemConstants.viewports.map.get(_systemConstants.viewports.lg)}px)`
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+      srcSet: mdSrc,
+      media: `(min-width: ${_systemConstants.viewports.map.get(_systemConstants.viewports.md)}px)`
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+      srcSet: smSrc,
+      media: `(min-width: ${_systemConstants.viewports.map.get(_systemConstants.viewports.sm)}px)`
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+      srcSet: xsSrc,
+      media: `(max-width: ${_systemConstants.viewports.map.get(_systemConstants.viewports.sm) - 1}px)`
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: fallbackSrc,
+      alt: alt,
+      style: staticStyles.image,
+      loading: loading
+    })]
+  });
+});
+ResponsiveImage.displayName = 'ResponsiveImage';
+ResponsiveImage.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The src attribute used for screen widths up to 575px
+   */
+  xsSrc: _propTypes.default.string.isRequired,
+  /**
+   * The src attribute used for screen widths greater than 576px
+   */
+  smSrc: _propTypes.default.string.isRequired,
+  /**
+   * The src attribute used for screen widths greater than 768px
+   */
+  mdSrc: _propTypes.default.string,
+  /**
+   * The src attribute used for screen widths greater than 992px
+   */
+  lgSrc: _propTypes.default.string,
+  /**
+   * The src attribute used for screen widths greater than 1200px
+   */
+  xlSrc: _propTypes.default.string,
+  /**
+   * The src attribute used for browsers that don't support responsive images (InternetExplorer)
+   */
+  fallbackSrc: _propTypes.default.string.isRequired,
+  /**
+   * The alt attribute for the HTML img element. Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content, and that non-visual browsers may omit it from rendering.
+   */
+  alt: _propTypes.default.string.isRequired,
+  /**
+   * Loading strategy.
+   * @default 'eager'
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
+   */
+  loading: _propTypes.default.oneOf(['eager', 'lazy']),
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: _propTypes.default.object
+};
+var _default = exports.default = ResponsiveImage;

package/lib/cjs/ResponsiveImage/index.js

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