@telus-uds/components-web 2.13.0 → 2.14.0

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Fri, 07 Jul 2023 19:17:02 GMT and should not be manually modified.
+This log was last generated on Fri, 14 Jul 2023 19:38:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.14.0
+
+Fri, 14 Jul 2023 19:38:21 GMT
+
+### Minor changes
+
+- `QuantitySelector` now can be controlled from the parent component (shahzaibkhalidmalik@outlook.com)
+- Standardized QuantitySelector (wlsdud194@hotmail.com)
+- Add dictionary override to `TermsAndConditions` (shahzaibkhalidmalik@outlook.com)
+- New token fontSize added for the badge component (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v1.55.0
+- Bump @telus-uds/system-constants to v1.3.0
+- Bump @telus-uds/system-theme-tokens to v2.38.0
+
+### Patches
+
+- Fix an issue where `DatePicker` may not close after date selection (shahzaibkhalidmalik@outlook.com)
+
 ## 2.13.0
 
-Fri, 07 Jul 2023 19:17:02 GMT
+Fri, 07 Jul 2023 19:26:41 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -197,6 +197,7 @@
             "name": "custom",
             "raw": {
               "fontWeight": "fontWeight",
+              "fontSize": "fontSize",
               "fontName": "fontName",
               "backgroundColor": "color",
               "borderColor": "color",
@@ -2598,6 +2599,10 @@
               "alternative": {
                 "name": "bool",
                 "required": false
+              },
+              "disabled": {
+                "name": "bool",
+                "required": false
               }
             }
           },
@@ -2643,6 +2648,13 @@
           "required": false,
           "description": "The default value of the input field"
         },
+        "value": {
+          "type": {
+            "name": "number"
+          },
+          "required": false,
+          "description": "If the input's state is to be controlled by a parent component, use this prop\ntogether with the `onChange` to pass down and update the lifted state."
+        },
         "label": {
           "type": {
             "name": "string"
@@ -3394,6 +3406,29 @@
           },
           "required": false
         },
+        "dictionary": {
+          "defaultValue": {
+            "value": "{\n  en: {\n    headingHide: 'Hide terms and conditions',\n    headingView: 'View terms and conditions',\n    nonIndexedTitle: 'The following applies to all terms and conditions above'\n  },\n  fr: {\n    headingHide: 'Masquer les modalités et conditions',\n    headingView: 'Voir les modalités et conditions',\n    nonIndexedTitle: 'Ce qui suit s’applique aux modalités et conditions ci-dessus'\n  }\n}",
+            "computed": false
+          },
+          "type": {
+            "name": "shape",
+            "value": {
+              "en": {
+                "name": "custom",
+                "raw": "dictionaryContentShape",
+                "required": false
+              },
+              "fr": {
+                "name": "custom",
+                "raw": "dictionaryContentShape",
+                "required": false
+              }
+            }
+          },
+          "required": false,
+          "description": "Custom dictionary containing the labels to use for `TermsAndConditions`"
+        },
         "indexedContent": {
           "defaultValue": {
             "value": "[]",
@@ -3467,7 +3502,7 @@
         },
         "testimonialStyle": {
           "defaultValue": {
-            "value": "'heading'",
+            "value": "'large'",
             "computed": false
           },
           "type": {
@@ -3486,6 +3521,13 @@
           "required": false,
           "description": "Testimonial style"
         },
+        "copy": {
+          "defaultValue": {
+            "value": "'en'",
+            "computed": false
+          },
+          "required": false
+        },
         "variant": {
           "defaultValue": {
             "value": "{}",
@@ -5586,15 +5628,7 @@
               "showPanelTabs": "show",
               "spaceBetweenSlideAndPreviousNextNavigation": "size",
               "spaceBetweenSlideAndPanelNavigation": "size",
-              "thumbnailBorderColor": "color",
-              "thumbnailBorderRadius": "radius",
-              "thumbnailBorderWidth": "border",
-              "thumbnailContainerPaddingTop": "size",
-              "thumbnailMargin": "size",
-              "thumbnailPadding": "size",
-              "thumbnailSelectedBorderColor": "color",
-              "thumbnailSelectedBorderWidth": "border",
-              "thumbnailSize": "size"
+              "stepTrackerCurrentBackgroundColor": "color"
             }
           },
           "required": false,
@@ -5955,15 +5989,7 @@
               "showPanelTabs": "show",
               "spaceBetweenSlideAndPreviousNextNavigation": "size",
               "spaceBetweenSlideAndPanelNavigation": "size",
-              "thumbnailBorderColor": "color",
-              "thumbnailBorderRadius": "radius",
-              "thumbnailBorderWidth": "border",
-              "thumbnailContainerPaddingTop": "size",
-              "thumbnailMargin": "size",
-              "thumbnailPadding": "size",
-              "thumbnailSelectedBorderColor": "color",
-              "thumbnailSelectedBorderWidth": "border",
-              "thumbnailSize": "size"
+              "stepTrackerCurrentBackgroundColor": "color"
             }
           },
           "required": false,
@@ -13371,6 +13397,7 @@
             "name": "custom",
             "raw": {
               "outerBorderColor": "color",
+              "backgroundColor": "color",
               "outerBorderWidth": "border",
               "outerBorderGap": "size",
               "borderRadius": "radius",

package/lib/Badge/Badge.js

@@ -77,7 +77,8 @@ const Badge = _ref6 => {
     paddingTop,
     paddingBottom,
     fontName,
-    fontWeight
+    fontWeight,
+    fontSize
   } = (0, _componentsBase.useThemeTokens)('Badge', tokens, variant);
   const semanticGradient = gradient && (0, _utils.transformGradient)(gradient);
   const {
@@ -94,6 +95,11 @@ const Badge = _ref6 => {
     background = semanticGradient;
   }
 
+  const fontSizeMapping = {
+    12: 'micro',
+    14: 'small',
+    16: 'h6'
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(BadgeContainer, {
     isOutlineOffer: isOutlineOffer,
     isAlternative: alternative,
@@ -111,6 +117,9 @@ const Badge = _ref6 => {
         fontWeight,
         color
       },
+      variant: {
+        size: fontSizeMapping[fontSize]
+      },
       children: children
     })
   });

package/lib/DatePicker/DatePicker.js

@@ -23,6 +23,8 @@ var _componentsBase = require("@telus-uds/components-base");
 
 var _moment = _interopRequireDefault(require("moment"));
 
+var _lodash = require("lodash");
+
 var _CalendarContainer = _interopRequireDefault(require("./CalendarContainer"));
 
 var _dictionary = _interopRequireDefault(require("./dictionary"));
@@ -137,7 +139,11 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     copy
   });
   (0, _react.useEffect)(() => {
-    if (!(0, _moment.default)(date).isSame(inputDate)) {
+    /**
+     * `date` could be passed as `null` to reset the value so explicitly
+     * checking for not being `undefined`
+     */
+    if (!(0, _lodash.isUndefined)(date) && !(0, _moment.default)(date).isSame(inputDate)) {
       setInputDate(date);
       setInputText(date instanceof _moment.default ? date.format(dateFormat) : '');
     }
@@ -179,6 +185,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const onChange = value => {
     setInputDate(value);
     setInputText(value.format(dateFormat));
+    setIsFocused(false);
     if (onDateChange) onDateChange(value);
   };
 

package/lib/QuantitySelector/QuantitySelector.js

@@ -11,12 +11,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _componentsBase = require("@telus-uds/components-base");
 
-var _IconButton = _interopRequireDefault(require("../IconButton"));
-
 var _styles = require("./styles");
 
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 
+var _SideButton = _interopRequireDefault(require("./SideButton"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -39,6 +39,7 @@ const QuantitySelector = _ref => {
     minNumber,
     maxNumber,
     defaultValue,
+    value,
     label,
     hint,
     hintPosition,
@@ -52,19 +53,9 @@ const QuantitySelector = _ref => {
     testID
   } = _ref;
   const {
-    components: {
-      QuantitySelector: componentTheme
-    }
-  } = (0, _componentsBase.useTheme)();
-  const {
-    leftIcon,
-    rightIcon,
-    padding
-  } = (0, _componentsBase.useThemeTokens)('QuantitySelector', tokens, variant);
-  const [error, setError] = (0, _react.useState)('');
-  const {
-    alternative
+    disabled
   } = variant;
+  const [error, setError] = (0, _react.useState)('');
   const getCopy = (0, _componentsBase.useCopy)({
     dictionary,
     copy
@@ -77,17 +68,16 @@ const QuantitySelector = _ref => {
     return numberToEvaluate;
   };
 
-  const initialValue = getValidatedNumber(defaultValue);
   const {
     currentValue: number,
     setValue: setNumber
   } = (0, _componentsBase.useInputValue)({
-    value: undefined,
-    initialValue,
+    value: getValidatedNumber(value),
+    initialValue: getValidatedNumber(defaultValue),
     onChange
   });
-  const isDecreaseEnabled = !isNumber(minNumber) || number > minNumber;
-  const isIncreaseEnabled = !isNumber(maxNumber) || number < maxNumber;
+  const isDecreaseEnabled = !disabled && !isNumber(minNumber) || number > minNumber;
+  const isIncreaseEnabled = !disabled && !isNumber(maxNumber) || number < maxNumber;
   const inputValue = isNumber(number) ? number.toString() : '';
 
   const updateNumber = (newNumber, originalInputEvent) => {
@@ -119,20 +109,31 @@ const QuantitySelector = _ref => {
     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,
-        inputBackgroundColor
-      } = (0, _componentsBase.getThemeTokens)(componentTheme, tokens, variant, textInputState);
-      return {
-        borderRadius: 0,
-        margin: 0,
-        padding: 0,
+        textColor,
+        inputBackgroundColor,
+        ...rest
+      } = getTokens({ ...textInputState
+      });
+      return { ...rest,
+        order: 1,
+        borderWidth: inputBorderWidth,
+        backgroundColor: inputBackgroundColor,
+        color: textColor,
+        width: inputWidth,
         borderColor: inputBorderColor,
-        backgroundColor: inputBackgroundColor
+        borderRadius: 0,
+        outerBorderWidth: 0
       };
     },
     onChange: inputChangeHandler // Using title as an accessibility workaround
@@ -146,38 +147,6 @@ const QuantitySelector = _ref => {
     accessibilityValueNow: number
   });
 
-  const getButtonTokens = isEnabled => buttonState => {
-    const disabled = !isEnabled;
-    const { ...buttonTokens
-    } = (0, _componentsBase.getThemeTokens)(componentTheme, tokens, variant, { ...buttonState,
-      disabled
-    });
-    return { ...buttonTokens,
-      outerBorderGap: 0,
-      padding
-    };
-  };
-
-  const renderLeftButton = () => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-      icon: leftIcon,
-      tokens: getButtonTokens(isDecreaseEnabled),
-      onPress: event => updateNumber(number - 1, event),
-      onDoubleClick: event => updateNumber(number - 1, event),
-      accessibilityLabel: getCopy('accessibility').decreaseButton,
-      accessibilityDisabled: !isDecreaseEnabled
-    });
-  };
-
-  const renderRightButton = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-    icon: rightIcon,
-    tokens: getButtonTokens(isIncreaseEnabled),
-    onPress: () => updateNumber(number + 1),
-    onDoubleClick: () => updateNumber(number + 1),
-    accessibilityLabel: getCopy('accessibility').increaseButton,
-    accessibilityDisabled: !isIncreaseEnabled
-  });
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Box, {
     space: 2,
     testID: testID,
@@ -185,14 +154,39 @@ const QuantitySelector = _ref => {
       space: 2
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputWrapper, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputField, {
-        className: `${alternative ? 'alternative' : ''}`,
         children: renderTextInput()
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.RightButtonWrapper, {
-        className: `${alternative ? 'alternative' : ''}`,
-        children: renderRightButton()
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.LeftButtonWrapper, {
-        className: `${alternative ? 'alternative' : ''}`,
-        children: renderLeftButton()
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          order: 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: {
+          order: 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,
@@ -244,6 +238,12 @@ QuantitySelector.propTypes = {
    */
   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
    */
@@ -282,7 +282,8 @@ QuantitySelector.propTypes = {
    */
   copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr'])]),
   variant: _propTypes.default.exact({
-    alternative: _propTypes.default.bool
+    alternative: _propTypes.default.bool,
+    disabled: _propTypes.default.bool
   }),
   tokens: _propTypes.default.oneOf([_propTypes.default.object, _propTypes.default.func]),
 

package/lib/QuantitySelector/SideButton.js

@@ -0,0 +1,93 @@
+"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SideButton = _ref => {
+  let {
+    isEnabled,
+    onPress,
+    onDoubleClick,
+    accessibilityLabel,
+    accessibilityDisabled,
+    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
+  });
+};
+
+SideButton.displayName = 'QuantitySelectorSideButton';
+SideButton.defaultProps = {
+  isEnabled: true,
+  onPress: () => {},
+  onDoubleClick: () => {},
+  accessibilityLabel: '',
+  accessibilityDisabled: false,
+  tokens: {},
+  variant: {}
+};
+SideButton.propTypes = {
+  isEnabled: _propTypes.default.bool,
+  onPress: _propTypes.default.func,
+  onDoubleClick: _propTypes.default.func,
+  accessibilityLabel: _propTypes.default.string,
+  accessibilityDisabled: _propTypes.default.bool,
+  tokens: _propTypes.default.object,
+  variant: _propTypes.default.object
+};
+var _default = SideButton;
+exports.default = _default;

package/lib/QuantitySelector/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RightButtonWrapper = exports.LeftButtonWrapper = exports.InputWrapper = exports.InputField = void 0;
+exports.InputWrapper = exports.InputField = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -12,29 +12,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const InputField = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "styles__InputField",
   componentId: "components-web__sc-1lrz1xk-0"
-})(["order:2;min-width:3.5rem;max-width:5 rem;height:28px;padding:0;width:64px;text-align:center;z-index:10;input{text-align:center;}&.alternative{input{height:40px;}}"]);
+})(["order:1;text-align:center;z-index:10;input{text-align:center;}"]);
 
 exports.InputField = InputField;
 
-const ButtonWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
-  displayName: "styles__ButtonWrapper",
-  componentId: "components-web__sc-1lrz1xk-1"
-})(["&.alternative{div[role='button']{height:42px;> div{height:40px;> div{padding:12px 16px;}}}}"]);
-
-const LeftButtonWrapper = /*#__PURE__*/(0, _styledComponents.default)(ButtonWrapper).withConfig({
-  displayName: "styles__LeftButtonWrapper",
-  componentId: "components-web__sc-1lrz1xk-2"
-})(["order:0;div[role='button']{border-radius:4px 0px 0px 4px !important;> div{border-right:none;border-radius:4px 0px 0px 4px !important;}}&.alternative{div[role='button']{border-radius:36px 0px 0px 36px !important;> div{border-radius:24px 0px 0px 24px !important;}}}"]);
-exports.LeftButtonWrapper = LeftButtonWrapper;
-const RightButtonWrapper = /*#__PURE__*/(0, _styledComponents.default)(ButtonWrapper).withConfig({
-  displayName: "styles__RightButtonWrapper",
-  componentId: "components-web__sc-1lrz1xk-3"
-})(["order:3;div[role='button']{border-radius:0px 4px 4px 0px !important;> div{border-left:none;border-radius:0px 4px 4px 0px !important;}}&.alternative{div[role='button']{border-radius:0px 36px 36px 0px !important;> div{border-radius:0px 36px 36px 0px !important;}}}"]);
-exports.RightButtonWrapper = RightButtonWrapper;
-
 const InputWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "styles__InputWrapper",
-  componentId: "components-web__sc-1lrz1xk-4"
-})(["textalign:start;display:flex;flexdirection:row;flexwrap:nowrap;justifycontent:center;"]);
+  componentId: "components-web__sc-1lrz1xk-1"
+})(["text-align:start;display:flex;flex-direction:row;flex-wrap:nowrap;"]);
 
 exports.InputWrapper = InputWrapper;

package/lib/TermsAndConditions/TermsAndConditions.js

@@ -133,10 +133,11 @@ const TermsAndConditions = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     nonIndexedContent,
     tokens,
     variant = {},
+    dictionary = _dictionary.default,
     ...rest
   } = _ref6;
   const getCopy = (0, _componentsBase.useCopy)({
-    dictionary: _dictionary.default,
+    dictionary,
     copy
   });
   const hasIndexedContent = indexedContent.length > 0;
@@ -199,7 +200,14 @@ const TermsAndConditions = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     })]
   });
 });
-TermsAndConditions.displayName = 'TermsAndConditions';
+TermsAndConditions.displayName = 'TermsAndConditions'; // If a language dictionary entry is provided, it must contain every key
+
+const dictionaryContentShape = _propTypes.default.shape({
+  headingHide: _propTypes.default.string.isRequired,
+  headingView: _propTypes.default.string.isRequired,
+  nonIndexedTitle: _propTypes.default.string.isRequired
+});
+
 TermsAndConditions.propTypes = { ...selectedSystemPropTypes,
 
   /**
@@ -225,12 +233,21 @@ TermsAndConditions.propTypes = { ...selectedSystemPropTypes,
    *
    * nonIndexedContent do not have a corresponding superscript and instead apply to the page as a whole.
    */
-  nonIndexedContent: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]))
+  nonIndexedContent: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string])),
+
+  /**
+   * Custom dictionary containing the labels to use for `TermsAndConditions`
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  })
 };
 TermsAndConditions.defaultProps = {
   copy: 'en',
   indexedContent: [],
-  nonIndexedContent: []
+  nonIndexedContent: [],
+  dictionary: _dictionary.default
 };
 var _default = TermsAndConditions;
 exports.default = _default;