@telus-uds/components-base 1.51.0 → 1.51.1

package/lib/Tabs/Tabs.js

@@ -154,6 +154,10 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 Tabs.displayName = 'Tabs';
 Tabs.propTypes = { ...selectedSystemPropTypes,
   ..._utils.withLinkRouter.PropTypes,
+
+  /**
+   * Array of `TabsItem`s
+   */
   items: _propTypes.default.arrayOf(_propTypes.default.shape({ ...selectedItemPropTypes,
     ..._utils.withLinkRouter.PropTypes,
     href: _propTypes.default.string,
@@ -161,11 +165,27 @@ Tabs.propTypes = { ...selectedSystemPropTypes,
     id: _propTypes.default.string,
     ref: _airbnbPropTypes.default.ref()
   })),
+
+  /**
+   * `id` property of the current tab in the items array
+   */
   value: _propTypes.default.string,
   initialValue: _propTypes.default.string,
+
+  /**
+   * Callback for when the selected tab changes
+   */
   onChange: _propTypes.default.func,
   tokens: (0, _utils.getTokensPropType)('Tabs'),
+
+  /**
+   * Custom tokens for `TabsItem`
+   */
   itemTokens: (0, _utils.getTokensPropType)('TabsItem'),
+
+  /**
+   * Custom tokens for `HorizontalScrollButton`
+   */
   scrollButtonTokens: (0, _utils.getTokensPropType)('HorizontalScrollButton'),
   variant: _utils.variantProp.propType
 };

package/lib-module/A11yText/index.js

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

package/lib-module/Divider/Divider.js

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

package/lib-module/IconButton/IconButton.js

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

package/lib-module/Link/ChevronLink.js

@@ -52,6 +52,10 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
 ChevronLink.displayName = 'ChevronLink';
 ChevronLink.propTypes = { ...LinkBase.propTypes,
   tokens: getTokensPropType('ChevronLink', 'Link'),
+
+  /**
+   * Changes direction of chevron icon
+   */
   direction: PropTypes.oneOf(['left', 'right'])
 };
 export default ChevronLink;

package/lib-module/Modal/Modal.js

@@ -174,9 +174,25 @@ const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
 Modal.displayName = 'Modal';
 Modal.propTypes = { ...selectedSystemPropTypes,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+
+  /**
+   * To define the locale of the copy
+   */
   copy: copyPropTypes,
+
+  /**
+   * Setting this to `true` will open the `Modal`
+   */
   isOpen: PropTypes.bool,
+
+  /**
+   * This function is triggered when the `Modal` is closed
+   */
   onClose: PropTypes.func,
+
+  /**
+   * `max-width` is applied to the `Modal` container
+   */
   maxWidth: PropTypes.bool,
   tokens: getTokensPropType('Modal'),
   variant: variantProp.propType,

package/lib-module/Pagination/PageButton.js

@@ -57,8 +57,20 @@ const PageButton = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 PageButton.displayName = 'PageButton';
 PageButton.propTypes = { ...linkProps.types,
+
+  /**
+   * To set custom label for the button
+   */
   label: PropTypes.string,
+
+  /**
+   * To set `PageButton` to active state
+   */
   isActive: PropTypes.bool,
+
+  /**
+   * To change the language for labels
+   */
   copy: copyPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('PaginationPageButton')

package/lib-module/Pagination/Pagination.js

@@ -183,10 +183,22 @@ Pagination.PageButton = PageButton;
 Pagination.propTypes = { ...selectedSystemPropTypes,
   ...withLinkRouter.propTypes,
   children: componentPropType('PageButton'),
+
+  /**
+   * To change the language for labels
+   */
   copy: copyPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('Pagination'),
+
+  /**
+   * When passed as `{{ compact: true }}`, `Pagination` does not render labels along side buttons
+   */
   sideButtonVariant: variantProp.propType,
+
+  /**
+   * Custom tokens for `PaginationSideButton`
+   */
   sideButtonTokens: getTokensPropType('PaginationSideButton')
 };
 const staticStyles = StyleSheet.create({

package/lib-module/QuickLinks/QuickLinks.js

@@ -62,8 +62,20 @@ const QuickLinks = /*#__PURE__*/forwardRef((_ref, ref) => {
 QuickLinks.displayName = 'QuickLinks';
 QuickLinks.propTypes = {
   tokens: getTokensPropType('QuickLinks'),
+
+  /**
+   * Custom tokens override for `Card`
+   */
   cardTokens: getTokensPropType('Card'),
+
+  /**
+   * Custom tokens override for `QuickLinksList`
+   */
   listTokens: getTokensPropType('QuickLinksList'),
+
+  /**
+   * The HTML tag to render the list as
+   */
   tag: PropTypes.string,
   variant: variantProp.propType,
   children: PropTypes.node

package/lib-module/Responsive/Responsive.js

@@ -38,7 +38,14 @@ const Responsive = _ref => {
 };
 
 Responsive.propTypes = {
+  /**
+   * To hide children of `Responsive` if the current viewport is smaller than `min`
+   */
   min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+
+  /**
+   * To hide children of `Responsive` if the current viewport is larger than `max`
+   */
   max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
   children: PropTypes.node.isRequired
 };

package/lib-module/Select/Group.js

@@ -17,5 +17,9 @@ const Group = _ref => {
 export default Group;
 Group.propTypes = {
   children: componentPropType('Item'),
+
+  /**
+   * The label for the group.
+   */
   label: PropTypes.string.isRequired
 };

package/lib-module/Select/Group.native.js

@@ -11,5 +11,9 @@ const Group = _ref => {
 export default Group;
 Group.propTypes = {
   children: componentPropType('Item'),
+
+  /**
+   * The label for the group.
+   */
   label: PropTypes.string.isRequired
 };

package/lib-module/Select/Item.js

@@ -16,5 +16,9 @@ const Item = _ref => {
 export default Item;
 Item.propTypes = {
   children: PropTypes.string.isRequired,
+
+  /**
+   * The value of the option
+   */
   value: PropTypes.string.isRequired
 };

package/lib-module/SideNav/ItemsGroup.js

@@ -122,6 +122,10 @@ ItemsGroup.propTypes = {
   isActive: PropTypes.bool,
   variant: variantProp.propType,
   tokens: getTokensPropType('SideNavItemsGroup'),
+
+  /**
+   * Custom tokens for `SideNav.Item`
+   */
   itemTokens: getTokensPropType('SideNavItem')
 };
 export default ItemsGroup;

package/lib-module/SideNav/SideNav.js

@@ -128,7 +128,15 @@ SideNav.propTypes = { ...selectedSystemPropTypes,
   accordion: PropTypes.bool,
   variant: variantProp.propType,
   tokens: getTokensPropType('SideNav'),
+
+  /**
+   * Custom tokens for `SideNav.Item`
+   */
   itemTokens: getTokensPropType('SideNavItem'),
+
+  /**
+   * Custom tokens for `SideNavItemsGroup`
+   */
   groupTokens: getTokensPropType('SideNavItemsGroup')
 };
 SideNav.Item = Item;

package/lib-module/StepTracker/StepTracker.js

@@ -168,12 +168,28 @@ const dictionaryContentShape = PropTypes.shape({
   stepTrackerLabel: PropTypes.string.isRequired
 });
 StepTracker.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The current step, 0-based number
+   */
   current: PropTypes.number,
+
+  /**
+   * The language to use for the labels
+   */
   copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
+
+  /**
+   * Custom dictionary containing the labels to use for the steps
+   */
   dictionary: PropTypes.shape({
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
+
+  /**
+   * An array of strings defining the step titles
+   */
   steps: PropTypes.arrayOf(PropTypes.string),
   tokens: getTokensPropType('StepTracker'),
   variant: variantProp.propType

package/lib-module/Tabs/Tabs.js

@@ -132,6 +132,10 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
 Tabs.displayName = 'Tabs';
 Tabs.propTypes = { ...selectedSystemPropTypes,
   ...withLinkRouter.PropTypes,
+
+  /**
+   * Array of `TabsItem`s
+   */
   items: PropTypes.arrayOf(PropTypes.shape({ ...selectedItemPropTypes,
     ...withLinkRouter.PropTypes,
     href: PropTypes.string,
@@ -139,11 +143,27 @@ Tabs.propTypes = { ...selectedSystemPropTypes,
     id: PropTypes.string,
     ref: ABBPropTypes.ref()
   })),
+
+  /**
+   * `id` property of the current tab in the items array
+   */
   value: PropTypes.string,
   initialValue: PropTypes.string,
+
+  /**
+   * Callback for when the selected tab changes
+   */
   onChange: PropTypes.func,
   tokens: getTokensPropType('Tabs'),
+
+  /**
+   * Custom tokens for `TabsItem`
+   */
   itemTokens: getTokensPropType('TabsItem'),
+
+  /**
+   * Custom tokens for `HorizontalScrollButton`
+   */
   scrollButtonTokens: getTokensPropType('HorizontalScrollButton'),
   variant: variantProp.propType
 };

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.1",
-    "@telus-uds/system-theme-tokens": "^2.33.0",
+    "@telus-uds/system-theme-tokens": "^2.34.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.51.0"
+  "version": "1.51.1"
 }

package/src/A11yText/index.jsx

@@ -31,7 +31,13 @@ A11yText.displayName = 'A11yText'
 
 A11yText.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * Text to be read by screen readers
+   */
   text: PropTypes.string.isRequired,
+  /**
+   * Whether text should be rendered as a heading
+   */
   heading: PropTypes.bool
 }
 

package/src/Divider/Divider.jsx

@@ -101,6 +101,9 @@ Divider.displayName = 'Divider'
 Divider.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('Divider'),
+  /**
+   * A number referring to a position on the space scale to create space on either side of the divider
+   */
   space: spacingProps.types.spacingValue,
   variant: variantProp.propType,
   /**

package/src/IconButton/IconButton.jsx

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

package/src/Link/ChevronLink.jsx

@@ -48,6 +48,9 @@ ChevronLink.displayName = 'ChevronLink'
 ChevronLink.propTypes = {
   ...LinkBase.propTypes,
   tokens: getTokensPropType('ChevronLink', 'Link'),
+  /**
+   * Changes direction of chevron icon
+   */
   direction: PropTypes.oneOf(['left', 'right'])
 }
 

package/src/Modal/Modal.jsx

@@ -161,9 +161,21 @@ Modal.displayName = 'Modal'
 Modal.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  /**
+   * To define the locale of the copy
+   */
   copy: copyPropTypes,
+  /**
+   * Setting this to `true` will open the `Modal`
+   */
   isOpen: PropTypes.bool,
+  /**
+   * This function is triggered when the `Modal` is closed
+   */
   onClose: PropTypes.func,
+  /**
+   * `max-width` is applied to the `Modal` container
+   */
   maxWidth: PropTypes.bool,
   tokens: getTokensPropType('Modal'),
   variant: variantProp.propType,

package/src/Pagination/PageButton.jsx

@@ -60,8 +60,17 @@ PageButton.displayName = 'PageButton'
 
 PageButton.propTypes = {
   ...linkProps.types,
+  /**
+   * To set custom label for the button
+   */
   label: PropTypes.string,
+  /**
+   * To set `PageButton` to active state
+   */
   isActive: PropTypes.bool,
+  /**
+   * To change the language for labels
+   */
   copy: copyPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('PaginationPageButton')

package/src/Pagination/Pagination.jsx

@@ -207,10 +207,19 @@ Pagination.propTypes = {
   ...selectedSystemPropTypes,
   ...withLinkRouter.propTypes,
   children: componentPropType('PageButton'),
+  /**
+   * To change the language for labels
+   */
   copy: copyPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('Pagination'),
+  /**
+   * When passed as `{{ compact: true }}`, `Pagination` does not render labels along side buttons
+   */
   sideButtonVariant: variantProp.propType,
+  /**
+   * Custom tokens for `PaginationSideButton`
+   */
   sideButtonTokens: getTokensPropType('PaginationSideButton')
 }
 

package/src/QuickLinks/QuickLinks.jsx

@@ -51,8 +51,17 @@ QuickLinks.displayName = 'QuickLinks'
 
 QuickLinks.propTypes = {
   tokens: getTokensPropType('QuickLinks'),
+  /**
+   * Custom tokens override for `Card`
+   */
   cardTokens: getTokensPropType('Card'),
+  /**
+   * Custom tokens override for `QuickLinksList`
+   */
   listTokens: getTokensPropType('QuickLinksList'),
+  /**
+   * The HTML tag to render the list as
+   */
   tag: PropTypes.string,
   variant: variantProp.propType,
   children: PropTypes.node

package/src/Responsive/Responsive.jsx

@@ -25,7 +25,13 @@ const Responsive = ({ min = 'xs', max, children }) => {
 }
 
 Responsive.propTypes = {
+  /**
+   * To hide children of `Responsive` if the current viewport is smaller than `min`
+   */
   min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * To hide children of `Responsive` if the current viewport is larger than `max`
+   */
   max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
   children: PropTypes.node.isRequired
 }

package/src/Select/Group.jsx

@@ -11,5 +11,8 @@ export default Group
 
 Group.propTypes = {
   children: componentPropType('Item'),
+  /**
+   * The label for the group.
+   */
   label: PropTypes.string.isRequired
 }

package/src/Select/Group.native.jsx

@@ -10,5 +10,8 @@ export default Group
 
 Group.propTypes = {
   children: componentPropType('Item'),
+  /**
+   * The label for the group.
+   */
   label: PropTypes.string.isRequired
 }

package/src/Select/Item.jsx

@@ -7,5 +7,8 @@ export default Item
 
 Item.propTypes = {
   children: PropTypes.string.isRequired,
+  /**
+   * The value of the option
+   */
   value: PropTypes.string.isRequired
 }

package/src/SideNav/ItemsGroup.jsx

@@ -109,6 +109,9 @@ ItemsGroup.propTypes = {
   isActive: PropTypes.bool,
   variant: variantProp.propType,
   tokens: getTokensPropType('SideNavItemsGroup'),
+  /**
+   * Custom tokens for `SideNav.Item`
+   */
   itemTokens: getTokensPropType('SideNavItem')
 }
 

package/src/SideNav/SideNav.jsx

@@ -120,7 +120,13 @@ SideNav.propTypes = {
   accordion: PropTypes.bool,
   variant: variantProp.propType,
   tokens: getTokensPropType('SideNav'),
+  /**
+   * Custom tokens for `SideNav.Item`
+   */
   itemTokens: getTokensPropType('SideNavItem'),
+  /**
+   * Custom tokens for `SideNavItemsGroup`
+   */
   groupTokens: getTokensPropType('SideNavItemsGroup')
 }
 

package/src/StepTracker/StepTracker.jsx

@@ -173,12 +173,24 @@ const dictionaryContentShape = PropTypes.shape({
 
 StepTracker.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * The current step, 0-based number
+   */
   current: PropTypes.number,
+  /**
+   * The language to use for the labels
+   */
   copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
+  /**
+   * Custom dictionary containing the labels to use for the steps
+   */
   dictionary: PropTypes.shape({
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
+  /**
+   * An array of strings defining the step titles
+   */
   steps: PropTypes.arrayOf(PropTypes.string),
   tokens: getTokensPropType('StepTracker'),
   variant: variantProp.propType

package/src/Tabs/Tabs.jsx

@@ -154,6 +154,9 @@ Tabs.displayName = 'Tabs'
 Tabs.propTypes = {
   ...selectedSystemPropTypes,
   ...withLinkRouter.PropTypes,
+  /**
+   * Array of `TabsItem`s
+   */
   items: PropTypes.arrayOf(
     PropTypes.shape({
       ...selectedItemPropTypes,
@@ -164,11 +167,23 @@ Tabs.propTypes = {
       ref: ABBPropTypes.ref()
     })
   ),
+  /**
+   * `id` property of the current tab in the items array
+   */
   value: PropTypes.string,
   initialValue: PropTypes.string,
+  /**
+   * Callback for when the selected tab changes
+   */
   onChange: PropTypes.func,
   tokens: getTokensPropType('Tabs'),
+  /**
+   * Custom tokens for `TabsItem`
+   */
   itemTokens: getTokensPropType('TabsItem'),
+  /**
+   * Custom tokens for `HorizontalScrollButton`
+   */
   scrollButtonTokens: getTokensPropType('HorizontalScrollButton'),
   variant: variantProp.propType
 }