@telus-uds/components-web 2.11.0 → 2.13.0

package/CHANGELOG.md

@@ -1,12 +1,48 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 21 Jun 2023 20:33:00 GMT and should not be manually modified.
+This log was last generated on Fri, 07 Jul 2023 19:17:02 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.13.0
+
+Fri, 07 Jul 2023 19:17:02 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:27:23 GMT
+
+### Minor changes
+
+- Fixed an issue where FootnoteLink had a default property value which was being applied as 'smallerpx' instead of the intended 'smaller' (kyle.king2@telus.com)
+- Gradient token added to Card component (35577399+JoshHC@users.noreply.github.com)
+- added function to select link tokens from themeTokens (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.53.0
+- Bump @telus-uds/system-theme-tokens to v2.36.0
+
+### Patches
+
+- May not be able to focus `ChevronLink` for `theme-allium` (shahzaibkhalidmalik@outlook.com)
+
 ## 2.11.0
 
-Wed, 21 Jun 2023 20:33:00 GMT
+Wed, 21 Jun 2023 20:40:42 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -522,6 +522,7 @@
               "flex": "integer",
               "backgroundColor": "color",
               "borderColor": "color",
+              "gradient": "gradient",
               "borderRadius": "radius",
               "borderWidth": "border",
               "paddingBottom": "size",
@@ -1067,11 +1068,14 @@
             },
             "required": false
           },
-          "fontSize": {
-            "defaultValue": {
-              "value": "'smaller'",
-              "computed": false
+          "onClick": {
+            "type": {
+              "name": "func"
             },
+            "required": true,
+            "description": "A callback function to handle the click of a FootnoteLink."
+          },
+          "fontSize": {
             "type": {
               "name": "union",
               "value": [
@@ -1085,13 +1089,6 @@
             },
             "required": false,
             "description": "Override default `fontSize` to set specific font size value"
-          },
-          "onClick": {
-            "type": {
-              "name": "func"
-            },
-            "required": true,
-            "description": "A callback function to handle the click of a FootnoteLink."
           }
         },
         "attributes": {}
@@ -2362,6 +2359,55 @@
           },
           "required": false,
           "description": "To provide a11y text for `PriceLockup` component\n\n**Note:** a11yText will override strikethrough price, so it must include price (ie. \"was 50 dollars per month\")"
+        },
+        "tokens": {
+          "type": {
+            "name": "custom",
+            "raw": {
+              "fontName": "fontName",
+              "fontWeight": "fontWeight",
+              "footnoteMarginTop": "size",
+              "footnoteGap": "size",
+              "bottomTextMarginTop": "size",
+              "priceMarginBottom": "size",
+              "bottomLinksMarginLeft": "size",
+              "topTextMarginBottom": "size",
+              "strikeThroughHeight": "size",
+              "strikeThroughColor": "color",
+              "fontColor": "color",
+              "dividerColor": "color",
+              "topTextFontSize": "fontSize",
+              "strikeThroughPosition": "size",
+              "topTextLineHeight": "lineHeight",
+              "currencySymbolFontSize": "fontSize",
+              "currencySymbolLineHeight": "lineHeight",
+              "currencySymbolFontName": "fontName",
+              "currencySymbolFontWeight": "fontWeight",
+              "amountFontSize": "fontSize",
+              "amountLineHeight": "lineHeight",
+              "amountLetterSpacing": "letterSpacing",
+              "amountFontWeight": "fontWeight",
+              "amountFontName": "fontName",
+              "centsFontSize": "fontSize",
+              "centsLineHeight": "lineHeight",
+              "centsFontName": "fontName",
+              "centsFontWeight": "fontWeight",
+              "topTextFontName": "fontName",
+              "topTextFontWeight": "fontWeight",
+              "rateFontSize": "fontSize",
+              "rateLineHeight": "lineHeight",
+              "rateFontName": "fontName",
+              "rateFontWeight": "fontWeight",
+              "bottomTextFontSize": "fontSize",
+              "bottomTextLineHeight": "lineHeight",
+              "footnoteLinkColor": "color",
+              "footnoteLinkFontName": "fontName",
+              "footnoteLinkFontWeight": "fontWeight",
+              "footnoteLinkFontSize": "fontSize"
+            }
+          },
+          "required": false,
+          "description": "`PriceLockup` tokens"
         }
       },
       "attributes": {}
@@ -3021,6 +3067,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": {}
@@ -3109,6 +3162,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",
@@ -3211,59 +3271,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": {
@@ -6906,7 +6962,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,
@@ -6923,7 +6991,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": {
@@ -6951,10 +7019,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": {
@@ -6992,6 +7060,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": {
@@ -9118,6 +9193,7 @@
               "flex": "integer",
               "backgroundColor": "color",
               "borderColor": "color",
+              "gradient": "gradient",
               "borderRadius": "radius",
               "borderWidth": "border",
               "paddingBottom": "size",
@@ -11208,7 +11284,12 @@
               "outlineWidth": "border",
               "paddingHorizontal": "size",
               "paddingVertical": "size",
-              "borderRadius": "radius"
+              "borderRadius": "radius",
+              "textLine": "textLine",
+              "fontName": "fontName",
+              "fontWeight": "fontWeight",
+              "fontSize": "fontSize",
+              "lineHeight": "lineHeight"
             }
           },
           "required": false,
@@ -12742,7 +12823,10 @@
               "paddingBottom": "size",
               "shadow": "shadow",
               "alignSelf": "flexAlign",
+              "space": "integer",
               "icon": "icon",
+              "trackHeight": "size",
+              "outerBorderGapButton": "size",
               "width": "size",
               "trackBorderWidth": "border",
               "trackBorderColor": "color",
@@ -13068,7 +13152,10 @@
               "paddingBottom": "size",
               "shadow": "shadow",
               "alignSelf": "flexAlign",
+              "space": "integer",
               "icon": "icon",
+              "trackHeight": "size",
+              "outerBorderGapButton": "size",
               "width": "size",
               "trackBorderWidth": "border",
               "trackBorderColor": "color",
@@ -13464,6 +13551,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/Card/Card.js

@@ -30,6 +30,7 @@ const selectCardBaseTokens = _ref => {
   let {
     backgroundColor,
     borderColor,
+    gradient,
     borderWidth,
     borderRadius,
     shadow,
@@ -38,6 +39,7 @@ const selectCardBaseTokens = _ref => {
   return {
     backgroundColor,
     borderColor,
+    gradient,
     borderWidth,
     borderRadius,
     shadow,

package/lib/DatePicker/DatePicker.js

@@ -136,6 +136,12 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     dictionary: _dictionary.default,
     copy
   });
+  (0, _react.useEffect)(() => {
+    if (!(0, _moment.default)(date).isSame(inputDate)) {
+      setInputDate(date);
+      setInputText(date instanceof _moment.default ? date.format(dateFormat) : '');
+    }
+  }, [date, inputDate]);
 
   const onFocusChange = _ref2 => {
     let {

package/lib/ExpandCollapseMini/ExpandCollapseMini.js

@@ -28,12 +28,6 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     tokens,
     ...rest
   } = _ref;
-  const {
-    variant
-  } = rest;
-  const {
-    borderWidth
-  } = (0, _componentsBase.useThemeTokens)('ExpandCollapseMini', tokens, variant);
 
   const handleChange = (openPanels, event) => {
     if (typeof onToggle === 'function') {
@@ -43,9 +37,6 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse, {
-    tokens: {
-      borderWidth
-    },
     onChange: handleChange,
     children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse.Panel, { ...expandProps,
       panelId: "ExpandCollapseMiniPanel",
@@ -53,7 +44,11 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         mini: true
       },
       controlTokens: {
-        icon: null
+        // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
+        icon: null,
+        borderColor: 'transparent',
+        textLine: 'none',
+        backgroundColor: 'transparent'
       } // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,

package/lib/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -29,7 +29,22 @@ const presentationOnly = {
 
 };
 
-const ExpandCollapseMiniControl = _ref => {
+const selectLinkTokens = _ref => {
+  let {
+    color,
+    textLine,
+    lineHeight,
+    fontSize
+  } = _ref;
+  return {
+    color,
+    textLine,
+    blockLineHeight: lineHeight,
+    blockFontSize: fontSize
+  };
+};
+
+const ExpandCollapseMiniControl = _ref2 => {
   let {
     pressableState,
     collapseTitle,
@@ -38,16 +53,25 @@ const ExpandCollapseMiniControl = _ref => {
     tokens,
     variant = {},
     ...rest
-  } = _ref;
+  } = _ref2;
   const {
     expanded,
-    hover
-  } = pressableState || {};
+    hover,
+    focus
+  } = pressableState || {}; // we only want focus outline when focusing, if user is pressing we don't want the border.
+
+  const {
+    outerBorderColor
+  } = (0, _componentsBase.useThemeTokens)('Link', {}, {}, {
+    focus
+  });
   const {
     size,
-    icon
+    icon,
+    ...themeTokens
   } = (0, _componentsBase.useThemeTokens)('ExpandCollapseMiniControl', tokens, variant, {
-    expanded
+    expanded,
+    focus
   }); // Choose hover styles when any part of Control is hoverred
 
   const appearance = { ...variant,
@@ -75,7 +99,8 @@ const ExpandCollapseMiniControl = _ref => {
     icon: icon,
     iconPosition: iconPosition,
     tokens: linkState => ({ ...getTokens(linkState),
-      outerBorderWidth: 0
+      ...selectLinkTokens(themeTokens),
+      outerBorderColor
     }),
     ...presentationOnly,
     ...selectProps(rest),

package/lib/Footnote/FootnoteLink.js

@@ -140,8 +140,7 @@ FootnoteLink.propTypes = { ...selectedSystemPropTypes,
   fontSize: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
 FootnoteLink.defaultProps = {
-  copy: 'en',
-  fontSize: 'smaller'
+  copy: 'en'
 };
 var _default = FootnoteLink;
 exports.default = _default;

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`)];
       }

package/lib/PriceLockup/PriceLockup.js

@@ -316,7 +316,12 @@ PriceLockup.propTypes = { ...selectedSystemPropTypes,
    *
    * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
    */
-  a11yText: _propTypes.default.string
+  a11yText: _propTypes.default.string,
+
+  /**
+   * `PriceLockup` tokens
+   */
+  tokens: (0, _componentsBase.getTokensPropType)('PriceLockup')
 };
 var _default = PriceLockup;
 exports.default = _default;

package/lib/Spinner/Spinner.js

@@ -109,6 +109,7 @@ const Spinner = _ref3 => {
     fullScreen = false,
     inline = false,
     label,
+    labelPosition,
     show = false,
     isStatic = false,
     tokens,
@@ -141,6 +142,7 @@ const Spinner = _ref3 => {
           ...selectProps(rest),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
             label: label,
+            labelPosition: labelPosition,
             overlay: true,
             size: size,
             thickness: thickness,
@@ -160,6 +162,7 @@ const Spinner = _ref3 => {
       ...selectProps(rest),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
         label: label,
+        labelPosition: labelPosition,
         overlay: true,
         size: size,
         thickness: thickness,
@@ -185,6 +188,7 @@ const Spinner = _ref3 => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SpinnerContainer, { ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
       label: label,
+      labelPosition: labelPosition,
       size: size,
       thickness: thickness,
       sizeVariant: sizeVariant,
@@ -232,7 +236,12 @@ Spinner.propTypes = { ...selectedSystemPropTypes,
   /**
    * If true, it should render a static spinner
    */
-  isStatic: _propTypes.default.bool
+  isStatic: _propTypes.default.bool,
+
+  /**
+   * Determine where the label of the spinner should be placed, left, right, bottom or top.
+   */
+  labelPosition: _propTypes.default.string
 };
 var _default = Spinner;
 exports.default = _default;

package/lib/Spinner/SpinnerContent.js

@@ -47,6 +47,7 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
 const SpinnerContent = _ref2 => {
   let {
     label,
+    labelPosition,
     overlay = false,
     sizeVariant,
     size,
@@ -54,6 +55,12 @@ const SpinnerContent = _ref2 => {
     isStatic,
     ...rest
   } = _ref2;
+  const labelMapping = {
+    top: 'column-reverse',
+    bottom: 'column',
+    left: 'row-reverse',
+    right: 'row'
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
     overlay: overlay,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
@@ -61,6 +68,7 @@ const SpinnerContent = _ref2 => {
       tokens: {
         alignItems: 'center'
       },
+      direction: labelMapping[labelPosition],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ActivityIndicator, {
         label: label,
         tokens: {