@telus-uds/components-web 2.12.0 → 2.14.0

package/CHANGELOG.md

@@ -1,12 +1,50 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 28 Jun 2023 23:16:56 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:26:41 GMT
+
+### Minor changes
+
+- Refactored Table for proper standardization (wlsdud194@hotmail.com)
+- New prop labelPosition added to the Spinner and SpinnerContent components (35577399+JoshHC@users.noreply.github.com)
+- standardization for terms and conditions (mauricio.batresmontejo@telus.com)
+- Loading component updated inside autocomplete to use the label as a prop of spinner (35577399+JoshHC@users.noreply.github.com)
+- Navigation bar item tokenized (akshay.pandey1@telus.com)
+- add state to videopickerthumbnail (evander.owusu@telus.com)
+- added types for BaseProvider (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.54.0
+- Bump @telus-uds/system-theme-tokens to v2.37.0
+
+### Patches
+
+- Fix an issue where `DatePicker` is unable to reset `date` programmatically (shahzaibkhalidmalik@outlook.com)
+
 ## 2.12.0
 
-Wed, 28 Jun 2023 23:16:56 GMT
+Wed, 28 Jun 2023 23:27:23 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"
@@ -3067,6 +3079,13 @@
           },
           "required": true,
           "description": "Communicates a message to assistive technology while visible. This same message\nwill appear underneath the spinner when its `size` is `large`."
+        },
+        "labelPosition": {
+          "type": {
+            "name": "string"
+          },
+          "required": false,
+          "description": "Determine where the label of the spinner should be placed, left, right, bottom or top."
         }
       },
       "attributes": {}
@@ -3155,6 +3174,13 @@
     "docs": {
       "description": "Use `Table` to display tabular data.\n\n- Takes an optional `spacing` variant (compact)\n- Available in 2 text styles (medium, small)\n- When `Table` exceeds viewport, the first column becomes sticky, enabling horizontal scrolling\n- Right-align prices and numbers that display decimal points\n\n### Building up a `Table`\n- Use `Table.Header` and `Table.Body` as direct children of `Table`\n- Use `Table.SubHeading` to render an intermediate data heading row\n- Use `Table.Row` and `Table.Cell` to build up the tabular data\n- Use `Cell`'s `type` prop to visually mark it as a row heading (`type=\"rowHeading\"`)",
       "props": {
+        "spacing": {
+          "defaultValue": {
+            "value": "'default'",
+            "computed": false
+          },
+          "required": false
+        },
         "fullWidth": {
           "defaultValue": {
             "value": "true",
@@ -3257,59 +3283,55 @@
       "docs": {
         "description": "",
         "props": {
-          "type": {
+          "align": {
             "defaultValue": {
-              "value": "'default'",
+              "value": "'left'",
               "computed": false
             },
             "type": {
               "name": "enum",
               "value": [
                 {
-                  "value": "'default'",
-                  "computed": false
-                },
-                {
-                  "value": "'heading'",
+                  "value": "'left'",
                   "computed": false
                 },
                 {
-                  "value": "'subHeading'",
+                  "value": "'center'",
                   "computed": false
                 },
                 {
-                  "value": "'rowHeading'",
+                  "value": "'right'",
                   "computed": false
                 }
               ]
             },
             "required": false,
-            "description": "Defines the visual styles of a cell, and whether it should be a `td` or `th` element"
+            "description": "Defines the text alignment within the cell"
           },
-          "align": {
-            "defaultValue": {
-              "value": "'left'",
-              "computed": false
-            },
+          "type": {
             "type": {
               "name": "enum",
               "value": [
                 {
-                  "value": "'left'",
+                  "value": "'default'",
                   "computed": false
                 },
                 {
-                  "value": "'center'",
+                  "value": "'heading'",
                   "computed": false
                 },
                 {
-                  "value": "'right'",
+                  "value": "'subHeading'",
+                  "computed": false
+                },
+                {
+                  "value": "'rowHeading'",
                   "computed": false
                 }
               ]
             },
             "required": false,
-            "description": "Defines the text alignment within the cell"
+            "description": ""
           },
           "tokens": {
             "type": {
@@ -3384,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": "[]",
@@ -3457,7 +3502,7 @@
         },
         "testimonialStyle": {
           "defaultValue": {
-            "value": "'heading'",
+            "value": "'large'",
             "computed": false
           },
           "type": {
@@ -3476,6 +3521,13 @@
           "required": false,
           "description": "Testimonial style"
         },
+        "copy": {
+          "defaultValue": {
+            "value": "'en'",
+            "computed": false
+          },
+          "required": false
+        },
         "variant": {
           "defaultValue": {
             "value": "{}",
@@ -5576,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,
@@ -5945,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,
@@ -6952,7 +6988,19 @@
                 "borderRadius": "radius",
                 "borderWidth": "border",
                 "expandDividerColor": "color",
-                "expandDividerWidth": "size"
+                "expandDividerWidth": "size",
+                "contentPanelBackgroundColor": "color",
+                "contentPanelPaddingLeft": "size",
+                "contentPanelPaddingRight": "size",
+                "contentPanelPaddingTop": "size",
+                "contentPanelPaddingBottom": "size",
+                "contentPanelBorderWidth": "border",
+                "contentPanelBorderColor": "color",
+                "contentPanelFontName": "fontName",
+                "contentPanelFontSize": "fontSize",
+                "contentPanelFontColor": "color",
+                "contentPanelFontWeight": "fontWeight",
+                "contentPanelLineHeight": "lineHeight"
               }
             },
             "required": false,
@@ -6969,7 +7017,7 @@
             "type": {
               "name": "func"
             },
-            "required": true,
+            "required": false,
             "description": "Function to call on pressing the panel's control, which should open or close the panel.\nIf Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent."
           },
           "onPress": {
@@ -6997,10 +7045,10 @@
           "control": {
             "type": {
               "name": "custom",
-              "raw": "ExpandCollapseControl.propTypes.children.isRequired"
+              "raw": "ExpandCollapseControl.propTypes.children"
             },
             "required": false,
-            "description": "The content inside the always-visible control element that opens and closes the ExpandCollapse when pressed."
+            "description": "The content inside the control element that opens and closes the ExpandCollapse when pressed."
           },
           "controlTokens": {
             "type": {
@@ -7038,6 +7086,13 @@
             },
             "required": false,
             "description": "An optional ref to be attached to the control"
+          },
+          "content": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control"
           }
         },
         "attributes": {
@@ -11255,7 +11310,12 @@
               "outlineWidth": "border",
               "paddingHorizontal": "size",
               "paddingVertical": "size",
-              "borderRadius": "radius"
+              "borderRadius": "radius",
+              "textLine": "textLine",
+              "fontName": "fontName",
+              "fontWeight": "fontWeight",
+              "fontSize": "fontSize",
+              "lineHeight": "lineHeight"
             }
           },
           "required": false,
@@ -13337,6 +13397,7 @@
             "name": "custom",
             "raw": {
               "outerBorderColor": "color",
+              "backgroundColor": "color",
               "outerBorderWidth": "border",
               "outerBorderGap": "size",
               "borderRadius": "radius",
@@ -13517,6 +13578,7 @@
             "name": "custom",
             "raw": {
               "fontName": "fontName",
+              "superScriptFontSize": "fontSize",
               "fontWeight": "fontWeight",
               "fontSize": "fontSize",
               "color": "color",

package/lib/Autocomplete/Loading.js

@@ -23,23 +23,18 @@ const Loading = _ref => {
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Box, {
     space: 3,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.StackView, {
       direction: "row",
       space: 2,
       tokens: {
         alignItems: 'center'
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
         inline: true,
         show: true,
-        size: "small"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
-        variant: {
-          size: 'small'
-        },
-        accessibilityLiveRegion: "polite",
-        children: label
-      })]
+        label: label,
+        labelPosition: "right"
+      })
     })
   });
 };

package/lib/Autocomplete/dictionary.js

@@ -7,12 +7,12 @@ exports.default = void 0;
 var _default = {
   en: {
     hasResults: 'Some results are available',
-    loading: 'Loading suggestions...',
+    loading: 'Searching...',
     noResults: 'No results found'
   },
   fr: {
     hasResults: 'Quelques suggestions sont disponible',
-    loading: 'Chargement en cours...',
+    loading: 'Recherche...',
     noResults: 'Aucun résultat trouvé'
   }
 };

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"));
@@ -136,6 +138,16 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     dictionary: _dictionary.default,
     copy
   });
+  (0, _react.useEffect)(() => {
+    /**
+     * `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) : '');
+    }
+  }, [date, inputDate]);
 
   const onFocusChange = _ref2 => {
     let {
@@ -173,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/NavigationBar/NavigationSubMenu.js

@@ -115,22 +115,18 @@ const NavigationSubMenu = _ref => {
       onClick: handleClick,
       icon: icoMenu,
       children: _ref2 => {
-        var _textStyles$, _textStyles$2;
+        var _textStyles$;
 
         let {
           textStyles
         } = _ref2;
-        return [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
-          space: 1,
-          direction: "row"
-        }, `${id}_spacer`), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+        return [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
           icon: icoMenu,
           variant: {
-            size: 'small'
+            size: 'micro'
           },
           tokens: {
-            color: (_textStyles$ = textStyles[0]) === null || _textStyles$ === void 0 ? void 0 : _textStyles$.color,
-            size: (_textStyles$2 = textStyles[0]) === null || _textStyles$2 === void 0 ? void 0 : _textStyles$2.fontSize
+            color: (_textStyles$ = textStyles[0]) === null || _textStyles$ === void 0 ? void 0 : _textStyles$.color
           }
         }, `${id}_icon`)];
       }