@telus-uds/components-base 1.50.0 → 1.51.1

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 14 Jun 2023 00:01:25 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Jun 2023 16:00:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.51.1
+
+Tue, 20 Jun 2023 16:00:54 GMT
+
+### Patches
+
+- Bump @telus-uds/system-theme-tokens to v2.34.0
+
+## 1.51.0
+
+Fri, 16 Jun 2023 21:12:21 GMT
+
+### Minor changes
+
+- Change in tags due to multibrand standardization (35577399+JoshHC@users.noreply.github.com)
+- feature:update MultiSelectFilter to follow design (samuraix221@hotmail.com)
+- Adapt the tokens to the steptracker (mauricio.batresmontejo@telus.com)
+- Update 'LinkBase' to pass Pressable state through to children (kyle.king2@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.33.0
+
 ## 1.50.0
 
-Wed, 14 Jun 2023 00:01:25 GMT
+Wed, 14 Jun 2023 00:06:30 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -198,7 +198,7 @@
         "listPaddingLeft": "size",
         "listItemMarkerFontSize": "size",
         "listItemMarkerLineHeight": "lineHeight",
-        "headerLineHeight": "size",
+        "headerLineHeight": "lineHeight",
         "headerFontSize": "size",
         "headerFontName": "fontName",
         "headerFontWeight": "fontWeight",
@@ -208,6 +208,7 @@
         "listItemPaddingLeft": "size",
         "closeButtonBorderSize": "border",
         "closeButtonBorderColor": "color",
+        "closeButtonBackgroundColor": "color",
         "closeButtonHeight": "size",
         "closeButtonMarginTop": "size",
         "closeButtonMarginLeft": "size",
@@ -286,7 +287,19 @@
         "paddingTop": "size",
         "paddingBottom": "size",
         "marginBottom": "size",
-        "width": "size"
+        "width": "size",
+        "titleHeadingFontSize": "fontSize",
+        "titleHeadingFontName": "fontName",
+        "titleHeadingFontWeight": "fontWeight",
+        "titleHeadingLineHeight": "lineHeight",
+        "titleFontSize": "fontSize",
+        "titleFontName": "fontName",
+        "titleFontWeight": "fontWeight",
+        "titleLineHeight": "lineHeight",
+        "linkFontSize": "fontSize",
+        "linkFontName": "fontName",
+        "linkFontWeight": "fontWeight",
+        "linkLineHeight": "lineHeight"
       },
       "Box": {
         "backgroundColor": "color",
@@ -541,6 +554,9 @@
         "calendarDaySelectedHoverBeforeBorderColor": "color",
         "calendarDaySelectedHoverBorderColor": "color",
         "calendarDaySelectedHoverColor": "color",
+        "calendarDaySelectedDisabledBackground": "color",
+        "calendarDaySelectedDisabledColor": "color",
+        "calendarDaySelectedDisabledContentBackgroundColor": "color",
         "calendarMonthCaptionColor": "color",
         "calendarMonthCaptionFontName": "fontName",
         "calendarMonthCaptionFontSize": "fontSize",
@@ -833,6 +849,22 @@
         "closeIconSize": "size",
         "closePadding": "size"
       },
+      "MultiSelectFilter": {
+        "headerFontColor": "color",
+        "headerFontSize": "fontSize",
+        "headerFontName": "fontName",
+        "headerFontWeight": "fontWeight",
+        "headerLineHeight": "lineHeight",
+        "maxHeightSize": "size",
+        "maxWidthSize": "size",
+        "minWidth": "size",
+        "minHeight": "size",
+        "subHeaderLineHeight": "lineHeight",
+        "subHeaderFontName": "fontName",
+        "subHeaderFontWeight": "fontWeight",
+        "subHeaderFontSize": "fontSize",
+        "buttonDirection": "direction"
+      },
       "NavigationBar": {
         "alignSelf": "flexAlign",
         "backgroundColor": "color",
@@ -1060,8 +1092,12 @@
         "contentDirection": "direction",
         "contentSpace": "integer",
         "contentAlignItems": "flexAlign",
+        "gap": "size",
         "textAlign": "textAlign",
-        "outerBorderColor": "color"
+        "outerBorderColor": "color",
+        "fontWeight": "fontWeight",
+        "fontName": "fontName",
+        "fontSize": "fontSize"
       },
       "Radio": {
         "checkedBackgroundColor": "color",
@@ -1330,7 +1366,13 @@
         "labelPaddingRight": "size",
         "showStepLabel": "show",
         "showStepName": "show",
-        "showStepTrackerLabel": "show"
+        "showStepTrackerLabel": "show",
+        "textStepTrackerLabel": "integer",
+        "stepLabelColor": "color",
+        "stepLabelFontSize": "fontSize",
+        "stepLabelFontWeight": "fontWeight",
+        "stepLabelFontName": "fontName",
+        "stepLabelLineHeight": "lineHeight"
       },
       "SkipLink": {
         "backgroundColor": "color",
@@ -1433,7 +1475,6 @@
         "paddingRight": "size",
         "paddingTop": "size",
         "paddingBottom": "size",
-        "width": "size",
         "minWidth": "size",
         "outerBorderColor": "color",
         "outerBorderWidth": "border",
@@ -1534,7 +1575,9 @@
         "animationColorBefore": "color",
         "animationColorAfter": "color",
         "animationDivColorBefore": "color",
-        "animationDivColorAfter": "color"
+        "animationDivColorAfter": "color",
+        "chevronlinkFontWeight": "fontWeight",
+        "chevronlinkFontName": "fontName"
       },
       "ToggleSwitch": {
         "borderColor": "color",
@@ -1652,6 +1695,8 @@
       "Countdown": {
         "containerBorderRadius": "radius",
         "containerGradient": "gradient",
+        "containerBorderWidth": "border",
+        "containerBorderColor": "color",
         "containerInverseBorder": "border",
         "containerInverseBorderColor": "color",
         "containerPaddingBottomTop": "size",
@@ -1661,6 +1706,8 @@
         "textFontSize": "fontSize",
         "textLineHeight": "lineHeight",
         "labelFontSize": "fontSize",
+        "labelFontName": "fontName",
+        "labelFontWeight": "fontWeight",
         "labelLineHeight": "lineHeight",
         "textTimerFontWeight": "fontWeight",
         "textTimerFontName": "fontName"
@@ -2227,6 +2274,22 @@
           "type": "state"
         }
       },
+      "MultiSelectFilter": {
+        "maxHeight": {
+          "description": "Whether MultiselectFilter modal should expand responsively to content or a set maximu height",
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "maxWidth": {
+          "description": "Whether MultiselectFilter modal should expand to content or a set maximuh width",
+          "values": [
+            true
+          ],
+          "type": "state"
+        }
+      },
       "NavigationBar": {
         "focus": {
           "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
@@ -2422,6 +2485,35 @@
           "type": "state"
         }
       },
+      "QuickLinksFeatureItem": {
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "focus": {
+          "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "pressed": {
+          "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
+          "values": [
+            true
+          ],
+          "type": "state"
+        }
+      },
       "QuantitySelector": {
         "focus": {
           "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
@@ -3224,14 +3316,14 @@
               "name": "string"
             },
             "required": true,
-            "description": ""
+            "description": "Text to be read by screen readers"
           },
           "heading": {
             "type": {
               "name": "bool"
             },
             "required": false,
-            "description": ""
+            "description": "Whether text should be rendered as a heading"
           }
         },
         "attributes": {
@@ -4153,7 +4245,7 @@
               ]
             },
             "required": false,
-            "description": ""
+            "description": "A number referring to a position on the space scale to create space on either side of the divider"
           },
           "variant": {
             "type": {
@@ -5924,14 +6016,14 @@
               "name": "elementType"
             },
             "required": true,
-            "description": ""
+            "description": "Defines the icon to be rendered"
           },
           "href": {
             "type": {
               "name": "string"
             },
             "required": false,
-            "description": ""
+            "description": "URL to navigate to when the `Iconbutton` is pressed"
           },
           "hrefAttrs": {
             "type": {
@@ -5970,14 +6062,14 @@
               }
             },
             "required": false,
-            "description": ""
+            "description": "URL options to navigate to when the `Iconbutton` is pressed"
           },
           "onPress": {
             "type": {
               "name": "func"
             },
             "required": false,
-            "description": ""
+            "description": "Function to execute when the `Iconbutton` is pressed"
           }
         },
         "attributes": {
@@ -6718,28 +6810,28 @@
               ]
             },
             "required": false,
-            "description": ""
+            "description": "To define the locale of the copy"
           },
           "isOpen": {
             "type": {
               "name": "bool"
             },
             "required": false,
-            "description": ""
+            "description": "Setting this to `true` will open the `Modal`"
           },
           "onClose": {
             "type": {
               "name": "func"
             },
             "required": false,
-            "description": ""
+            "description": "This function is triggered when the `Modal` is closed"
           },
           "maxWidth": {
             "type": {
               "name": "bool"
             },
             "required": false,
-            "description": ""
+            "description": "`max-width` is applied to the `Modal` container"
           },
           "tokens": {
             "type": {
@@ -6852,6 +6944,17 @@
             "required": false,
             "description": "The options a user may select."
           },
+          "maxHeight": {
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            },
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "If provided sets maxHeight to be active"
+          },
           "copy": {
             "defaultValue": {
               "value": "'en'",
@@ -7180,7 +7283,7 @@
               ]
             },
             "required": false,
-            "description": ""
+            "description": "To change the language for labels"
           },
           "LinkRouter": {
             "type": {
@@ -7271,7 +7374,7 @@
               }
             },
             "required": false,
-            "description": ""
+            "description": "When passed as `{{ compact: true }}`, `Pagination` does not render labels along side buttons"
           },
           "sideButtonTokens": {
             "type": {
@@ -7306,7 +7409,7 @@
               }
             },
             "required": false,
-            "description": ""
+            "description": "Custom tokens for `PaginationSideButton`"
           }
         },
         "attributes": {
@@ -7396,14 +7499,14 @@
                 "name": "string"
               },
               "required": false,
-              "description": ""
+              "description": "To set custom label for the button"
             },
             "isActive": {
               "type": {
                 "name": "bool"
               },
               "required": false,
-              "description": ""
+              "description": "To set `PageButton` to active state"
             },
             "copy": {
               "type": {
@@ -7420,7 +7523,7 @@
                 ]
               },
               "required": false,
-              "description": ""
+              "description": "To change the language for labels"
             },
             "variant": {
               "type": {
@@ -7682,7 +7785,7 @@
               "name": "string"
             },
             "required": false,
-            "description": ""
+            "description": "The HTML tag to render the list as"
           },
           "tokens": {
             "type": {
@@ -7721,7 +7824,7 @@
               }
             },
             "required": false,
-            "description": ""
+            "description": "Custom tokens override for `Card`"
           },
           "listTokens": {
             "type": {
@@ -7753,7 +7856,7 @@
               }
             },
             "required": false,
-            "description": ""
+            "description": "Custom tokens override for `QuickLinksList`"
           },
           "variant": {
             "type": {
@@ -7984,8 +8087,12 @@
                   "contentDirection": "direction",
                   "contentSpace": "integer",
                   "contentAlignItems": "flexAlign",
+                  "gap": "size",
                   "textAlign": "textAlign",
-                  "outerBorderColor": "color"
+                  "outerBorderColor": "color",
+                  "fontWeight": "fontWeight",
+                  "fontName": "fontName",
+                  "fontSize": "fontSize"
                 }
               },
               "required": false,
@@ -8419,7 +8526,7 @@
               ]
             },
             "required": false,
-            "description": ""
+            "description": "To hide children of `Responsive` if the current viewport is smaller than `min`"
           },
           "max": {
             "type": {
@@ -8444,7 +8551,7 @@
               ]
             },
             "required": false,
-            "description": ""
+            "description": "To hide children of `Responsive` if the current viewport is larger than `max`"
           },
           "children": {
             "type": {
@@ -8755,7 +8862,7 @@
                 "name": "string"
               },
               "required": true,
-              "description": ""
+              "description": "The label for the group."
             }
           },
           "attributes": {
@@ -8779,7 +8886,7 @@
                 "name": "string"
               },
               "required": true,
-              "description": ""
+              "description": "The value of the option"
             }
           },
           "attributes": {
@@ -8873,7 +8980,7 @@
               }
             },
             "required": false,
-            "description": ""
+            "description": "Custom tokens for `SideNav.Item`"
           },
           "groupTokens": {
             "type": {
@@ -8895,7 +9002,7 @@
               }
             },
             "required": false,
-            "description": ""
+            "description": "Custom tokens for `SideNavItemsGroup`"
           }
         },
         "attributes": {
@@ -9114,7 +9221,7 @@
                 }
               },
               "required": false,
-              "description": ""
+              "description": "Custom tokens for `SideNav.Item`"
             }
           },
           "attributes": {
@@ -9461,6 +9568,7 @@
                     "space": {
                       "name": "custom",
                       "raw": "spacingProps.types.spacingValue",
+                      "description": "A number referring to a position on the space scale to create space on either side of the divider",
                       "required": false
                     },
                     "variant": {
@@ -9591,7 +9699,7 @@
               "name": "number"
             },
             "required": false,
-            "description": ""
+            "description": "The current step, 0-based number"
           },
           "copy": {
             "defaultValue": {
@@ -9621,11 +9729,11 @@
               ]
             },
             "required": false,
-            "description": ""
+            "description": "The language to use for the labels"
           },
           "dictionary": {
             "defaultValue": {
-              "value": "{\n  en: {\n    stepLabel: 'Step %{stepNumber}',\n    stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'\n  },\n  fr: {\n    stepLabel: 'Étape %{stepNumber}',\n    stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'\n  }\n}",
+              "value": "{\n  en: {\n    1: {\n      stepLabel: 'Step %{stepNumber}',\n      stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'\n    },\n    2: {\n      stepLabel: '%{stepNumber}.',\n      stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'\n    },\n    3: {\n      stepLabel: 'Step %{stepNumber}',\n      stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'\n    }\n  },\n  fr: {\n    1: {\n      stepLabel: 'Étape %{stepNumber}',\n      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'\n    },\n    2: {\n      stepLabel: '%{stepNumber}.',\n      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'\n    },\n    3: {\n      stepLabel: 'Étape %{stepNumber}',\n      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'\n    }\n  }\n}",
               "computed": false
             },
             "type": {
@@ -9644,7 +9752,7 @@
               }
             },
             "required": false,
-            "description": ""
+            "description": "Custom dictionary containing the labels to use for the steps"
           },
           "steps": {
             "defaultValue": {
@@ -9658,7 +9766,7 @@
               }
             },
             "required": false,
-            "description": ""
+            "description": "An array of strings defining the step titles"
           },
           "tokens": {
             "type": {
@@ -9706,7 +9814,13 @@
                 "labelPaddingRight": "size",
                 "showStepLabel": "show",
                 "showStepName": "show",
-                "showStepTrackerLabel": "show"
+                "showStepTrackerLabel": "show",
+                "textStepTrackerLabel": "integer",
+                "stepLabelColor": "color",
+                "stepLabelFontSize": "fontSize",
+                "stepLabelFontWeight": "fontWeight",
+                "stepLabelFontName": "fontName",
+                "stepLabelLineHeight": "lineHeight"
               }
             },
             "required": false,
@@ -9774,14 +9888,14 @@
               }
             },
             "required": false,
-            "description": ""
+            "description": "Array of `TabsItem`s"
           },
           "value": {
             "type": {
               "name": "string"
             },
             "required": false,
-            "description": ""
+            "description": "`id` property of the current tab in the items array"
           },
           "initialValue": {
             "type": {
@@ -9795,7 +9909,7 @@
               "name": "func"
             },
             "required": false,
-            "description": ""
+            "description": "Callback for when the selected tab changes"
           },
           "tokens": {
             "type": {
@@ -9842,7 +9956,7 @@
               }
             },
             "required": false,
-            "description": ""
+            "description": "Custom tokens for `TabsItem`"
           },
           "scrollButtonTokens": {
             "type": {
@@ -9865,7 +9979,7 @@
               }
             },
             "required": false,
-            "description": ""
+            "description": "Custom tokens for `HorizontalScrollButton`"
           },
           "variant": {
             "type": {
@@ -13220,7 +13334,7 @@
               ]
             },
             "required": false,
-            "description": ""
+            "description": "Changes direction of chevron icon"
           },
           "tokens": {
             "defaultValue": {

package/lib/A11yText/index.js

@@ -57,7 +57,15 @@ const A11yText = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 });
 A11yText.displayName = 'A11yText';
 A11yText.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Text to be read by screen readers
+   */
   text: _propTypes.default.string.isRequired,
+
+  /**
+   * Whether text should be rendered as a heading
+   */
   heading: _propTypes.default.bool
 };
 

package/lib/Divider/Divider.js

@@ -128,6 +128,10 @@ const Divider = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 Divider.displayName = 'Divider';
 Divider.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('Divider'),
+
+  /**
+   * A number referring to a position on the space scale to create space on either side of the divider
+   */
   space: _utils.spacingProps.types.spacingValue,
   variant: _utils.variantProp.propType,
 

package/lib/IconButton/IconButton.js

@@ -145,9 +145,25 @@ IconButton.displayName = 'IconButton';
 IconButton.propTypes = { ...selectedSystemPropTypes,
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('IconButton'),
+
+  /**
+   * Defines the icon to be rendered
+   */
   icon: _propTypes.default.elementType.isRequired,
+
+  /**
+   * URL to navigate to when the `Iconbutton` is pressed
+   */
   href: _propTypes.default.string,
+
+  /**
+   * URL options to navigate to when the `Iconbutton` is pressed
+   */
   hrefAttrs: _propTypes.default.shape(_utils.hrefAttrsProp.types),
+
+  /**
+   * Function to execute when the `Iconbutton` is pressed
+   */
   onPress: _propTypes.default.func
 };
 

package/lib/Link/ChevronLink.js

@@ -70,6 +70,10 @@ const ChevronLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 ChevronLink.displayName = 'ChevronLink';
 ChevronLink.propTypes = { ..._LinkBase.default.propTypes,
   tokens: (0, _utils.getTokensPropType)('ChevronLink', 'Link'),
+
+  /**
+   * Changes direction of chevron icon
+   */
   direction: _propTypes.default.oneOf(['left', 'right'])
 };
 var _default = ChevronLink;

package/lib/Link/LinkBase.js

@@ -229,7 +229,7 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
           style: [textStyles, blockTextStyles, staticStyles.baseline],
-          children: children
+          children: typeof children === 'function' ? children(linkState) : children
         })
       });
     }