@telus-uds/components-web 2.9.0 → 2.10.0

package/lib/BlockQuote/BlockQuote.js

@@ -79,6 +79,7 @@ const BlockQuote = _ref8 => {
     variant,
     ...rest
   } = _ref8;
+  const viewport = (0, _componentsBase.useViewport)();
   const {
     color,
     paddingTop,
@@ -87,16 +88,44 @@ const BlockQuote = _ref8 => {
     paddingRight,
     marginBottom,
     width,
-    backgroundGradient
-  } = (0, _componentsBase.useThemeTokens)('BlockQuote', tokens, variant);
+    backgroundGradient,
+    titleHeadingFontSize,
+    titleHeadingFontName,
+    titleHeadingFontWeight,
+    titleHeadingLineHeight,
+    titleFontSize,
+    titleFontName,
+    titleFontWeight,
+    titleLineHeight,
+    linkFontSize,
+    linkFontName,
+    linkFontWeight,
+    linkLineHeight
+  } = (0, _componentsBase.useThemeTokens)('BlockQuote', tokens, variant, {
+    viewport
+  });
   const mappedTextSize = textStyle === 'heading' ? 'h3' : textStyle;
+  const titleTokens = textStyle === 'heading' ? {
+    fontSize: titleHeadingFontSize,
+    fontName: titleHeadingFontName,
+    fontWeight: titleHeadingFontWeight,
+    lineHeight: titleHeadingLineHeight
+  } : {
+    fontSize: titleFontSize,
+    fontName: titleFontName,
+    fontWeight: titleFontWeight,
+    lineHeight: titleLineHeight
+  };
 
   const renderLink = () => {
     if (linkHref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, {
         href: linkHref,
         tokens: {
-          blockFontWeight: '500',
+          blockFontSize: linkFontSize,
+          blockFontName: linkFontName,
+          blockFontWeight: linkFontWeight,
+          blockLineHeight: linkLineHeight,
           color
         },
         variant: {
@@ -121,7 +150,7 @@ const BlockQuote = _ref8 => {
     const quote = /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
       tokens: {
         color,
-        fontWeight: '400'
+        ...titleTokens
       },
       variant: {
         size: mappedTextSize
@@ -164,9 +193,25 @@ const BlockQuote = _ref8 => {
 BlockQuote.propTypes = { ...selectedSystemPropTypes,
   ..._componentsBase.withLinkRouter.propTypes,
   children: _propTypes.default.node.isRequired,
+
+  /**
+   * External source's identifier (e.g. author's name)
+   */
   link: _propTypes.default.string,
+
+  /**
+   * External source's URL
+   */
   linkHref: _propTypes.default.string,
+
+  /**
+   * To provide additional information about the source, rendered underneath `link`
+   */
   additionalInfo: _propTypes.default.string,
+
+  /**
+   * Whether to render BlockQuote as a heading size of `h3` or large text size
+   */
   textStyle: _propTypes.default.oneOf(['large', 'heading'])
 };
 var _default = BlockQuote;

package/lib/Callout/Callout.js

@@ -136,9 +136,21 @@ const Callout = _ref2 => {
 };
 
 Callout.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Icon to display on the left side of the Callout
+   */
   icon: _propTypes.default.elementType,
   children: _propTypes.default.node.isRequired,
+
+  /**
+   * To change the horizontal alignment of the Callout's text
+   */
   textAlignToFlex: _propTypes.default.oneOf(['center', 'left']),
+
+  /**
+   * To change the vertical alignment of the Callout's icon
+   */
   verticalAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom'])
 };
 var _default = Callout;

package/lib/DatePicker/CalendarContainer.js

@@ -173,6 +173,30 @@ const CalendarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
   }
 }
 
+.CalendarDay
+.CalendarDay__default
+.CalendarDay__selected
+.CalendarDay__blocked_out_of_range{
+  background: ${remainingTokens.calendarDaySelectedDisabledBackground};
+  color: ${remainingTokens.calendarDaySelectedDisabledColor};
+  text-decoration: none;
+  z-index: 0;
+  &:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: ${calendarDayDefaultHeight}px;
+    border: 1px solid ${remainingTokens.calendarDaySelectedDisabledContentBackgroundColor};
+    width: ${calendarDayDefaultWidth}px;
+    border-radius: 50%;
+    background: ${remainingTokens.calendarDaySelectedDisabledContentBackgroundColor};
+    transition: all 0.3s;
+    z-index: -1;
+  }
+}
+
   .CalendarDay__blocked_out_of_range,
   .CalendarDay__blocked_out_of_range:active,
   .CalendarDay__blocked_out_of_range:hover,

package/lib/DatePicker/DatePicker.js

@@ -148,14 +148,20 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     setIsClickedInside(false);
   };
 
-  const handleFocus = () => {
-    setIsFocused(true);
+  const handleFocus = event => {
+    if (event.target.tagName === 'INPUT') {
+      setIsFocused(true);
+    }
   };
 
   const handleMouseDown = event => {
     if (event.target.tagName === 'INPUT') {
       setIsClickedInside(true);
       setIsFocused(true);
+    } else if (event.target.tagName === 'path') {
+      // needed to handle the case where the user clicks on the tooltip icon
+      setIsClickedInside(true);
+      event.stopPropagation();
     } else {
       event.stopPropagation();
     }

package/lib/Disclaimer/Disclaimer.js

@@ -62,10 +62,6 @@ const Disclaimer = _ref2 => {
 };
 
 Disclaimer.propTypes = { ...selectedSystemPropTypes,
-
-  /**
-   * The content
-   */
   children: _propTypes.default.node.isRequired
 };
 var _default = Disclaimer;

package/lib/ExpandCollapseMini/ExpandCollapseMini.js

@@ -68,6 +68,10 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 });
 ExpandCollapseMini.displayName = 'ExpandCollapseMini';
 ExpandCollapseMini.propTypes = { ..._ExpandCollapseMiniControl.default.propTypes,
+
+  /**
+   * Function to call on pressing the panel's control, which should open or close the panel.
+   */
   onToggle: _propTypes.default.func,
   children: _propTypes.default.node.isRequired
 };

package/lib/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -85,9 +85,25 @@ const ExpandCollapseMiniControl = _ref => {
 
 ExpandCollapseMiniControl.propTypes = { ...selectedSystemPropTypes,
   ..._componentsBase.Link.propTypes,
+
+  /**
+   * Optional function to call on pressing the panel's control, in addition to opening or closing the panel
+   */
   onPress: _propTypes.default.func,
+
+  /**
+   * ExpandCollapseMiniControl title when expanded
+   */
   expandTitle: _propTypes.default.string.isRequired,
+
+  /**
+   * ExpandCollapseMiniControl title when collapsed
+   */
   collapseTitle: _propTypes.default.string.isRequired,
+
+  /**
+   * React Native's `Pressable`'s state object
+   */
   pressableState: _propTypes.default.object,
   variant: _propTypes.default.object
 };

package/lib/IconButton/IconButton.js

@@ -59,8 +59,16 @@ const propsWithoutIcon = _ref2 => {
 };
 
 IconButton.propTypes = { ...propsWithoutIcon(_componentsBase.IconButton.propTypes),
+
+  /**
+   * To set the icon to a multi-brand compatabile icon
+   */
   // eslint-disable-next-line react/require-default-props
   action: _propTypes.default.oneOf(multiBrandIconNames),
+
+  /**
+   * To set a custom icon
+   */
   icon: _propTypes.default.func
 };
 IconButton.defaultProps = {

package/lib/Listbox/Listbox.js

@@ -156,7 +156,15 @@ Listbox.propTypes = { ..._componentsBase.withLinkRouter.propTypes,
    * the last menu item.
    */
   parentRef: _propTypes.default.object,
+
+  /**
+   * `Listbox` items
+   */
   items: _propTypes.default.array,
+
+  /**
+   * To select an item by default
+   */
   selectedId: _propTypes.default.string
 };
 Listbox.Overlay = _ListboxOverlay.default;

package/lib/NavigationBar/NavigationBar.js

@@ -210,6 +210,10 @@ NavigationBar.propTypes = { ...selectedSystemPropTypes,
    * Common navigation bar heading.
    */
   heading: _propTypes.default.string,
+
+  /**
+   * Sets the `headingLevel` of the `heading`
+   */
   headingLevel: _propTypes.default.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
 
   /**

package/lib/OrderedList/Item.js

@@ -147,6 +147,10 @@ Item.propTypes = { ...selectedSystemPropTypes,
    * Item content
    */
   children: _propTypes.default.node.isRequired,
+
+  /**
+   * Defines the title of the `OrderedList.Item`
+   */
   title: _propTypes.default.string,
 
   /**

package/lib/Paragraph/Paragraph.js

@@ -73,6 +73,10 @@ const Paragraph = _ref3 => {
 
 Paragraph.propTypes = { ...selectedSystemPropTypes,
   children: _propTypes.default.node.isRequired,
+
+  /**
+   * Adds a `data-testid` attribute to the element for testing purposes
+   */
   testID: _propTypes.default.string,
 
   /**

package/lib/PreviewCard/AuthorDate.js

@@ -57,7 +57,14 @@ const AuthorDate = _ref => {
 };
 
 AuthorDate.propTypes = {
+  /**
+   * Name of the author
+   */
   author: _propTypes.default.string.isRequired,
+
+  /**
+   * Date of the post
+   */
   date: _propTypes.default.string.isRequired
 };
 var _default = AuthorDate;

package/lib/PriceLockup/PriceLockup.js

@@ -258,16 +258,64 @@ const PriceLockup = _ref12 => {
 };
 
 PriceLockup.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Size of the component
+   *
+   * Small for pricing in product catalogue pages, medium for pricing in product comparison cards and large for pricing in banners and promo cards
+   */
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
+
+  /**
+   * If currency symbol other than `$` to be used
+   */
   currencySymbol: _propTypes.default.string,
+
+  /**
+   * Shows additional info above the price
+   */
   topText: _propTypes.default.string,
+
+  /**
+   * Monetary value (including decimals separated by ".")
+   */
   price: _propTypes.default.string.isRequired,
+
+  /**
+   * Shows month/year unit
+   */
   rateText: _propTypes.default.string,
+
+  /**
+   * Shows additional info below the price with a `Divider`
+   */
   bottomText: _propTypes.default.string,
+
+  /**
+   * Displays which side the currency should apperar (left, right)
+   */
   signDirection: _propTypes.default.oneOf(['right', 'left']),
+
+  /**
+   * Shows additional link for context
+   */
   footnoteLinks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
+
+  /**
+   * Function to be called when a footnote link is clicked
+   */
   onClickFootnote: _propTypes.default.func,
+
+  /**
+   * To show price savings comparison
+   */
   strikeThrough: _propTypes.default.bool,
+
+  /**
+   * To provide a11y text for `PriceLockup` component
+   *
+   * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
+   */
   a11yText: _propTypes.default.string
 };
 var _default = PriceLockup;

package/lib/QuantitySelector/QuantitySelector.js

@@ -219,25 +219,76 @@ const dictionaryContentShape = _propTypes.default.shape({
 });
 
 QuantitySelector.propTypes = {
+  /**
+   * The id of the input field
+   */
   id: _propTypes.default.string,
+
+  /**
+   * The minimum number allowed
+   */
   minNumber: _propTypes.default.number,
+
+  /**
+   * The maximum number allowed
+   */
   maxNumber: _propTypes.default.number,
+
+  /**
+   * The callback function that is called when the value of the input field changes
+   */
   onChange: _propTypes.default.func,
+
+  /**
+   * The default value of the input field
+   */
   defaultValue: _propTypes.default.number,
+
+  /**
+   * The label of the input field
+   */
   label: _propTypes.default.string,
+
+  /**
+   * The hint of the input field
+   */
   hint: _propTypes.default.string,
+
+  /**
+   * The position of the hint. Could be shown along side the label or below it
+   */
   hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+
+  /**
+   * Adds a question mark which will display a tooltip when clicked
+   */
   tooltip: _propTypes.default.string,
+
+  /**
+   * The accessibility label of the input field
+   */
   accessibilityLabel: _propTypes.default.string,
+
+  /**
+   * The dictionary object containing the content for the input field
+   */
   dictionary: _propTypes.default.shape({
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
+
+  /**
+   * The language to use for the copy.
+   */
   copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr'])]),
   variant: _propTypes.default.exact({
     alternative: _propTypes.default.bool
   }),
   tokens: _propTypes.default.oneOf([_propTypes.default.object, _propTypes.default.func]),
+
+  /**
+   * Sets `data-testid` attribute on the input field for testing purposes.
+   */
   testID: _propTypes.default.string
 };
 QuantitySelector.defaultProps = {

package/lib/Span/Span.js

@@ -59,6 +59,10 @@ const Span = _ref2 => {
 
 Span.propTypes = { ...selectedSystemPropTypes,
   children: _propTypes.default.node.isRequired,
+
+  /**
+   * Adds `data-testid` attribute for testing
+   */
   testID: _propTypes.default.string,
 
   /**

package/lib/Table/Table.js

@@ -124,6 +124,10 @@ const Table = _ref2 => {
 
 Table.propTypes = { ...selectedSystemPropTypes,
   children: _propTypes.default.node,
+
+  /**
+   * Sets text style
+   */
   text: _propTypes.default.oneOf(['medium', 'small'])
 };
 var _default = Table;

package/lib/Toast/Toast.js

@@ -143,9 +143,25 @@ const Toast = _ref3 => {
 };
 
 Toast.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * If true, the toast will be displayed
+   */
   toast: _propTypes.default.bool,
+
+  /**
+   * The copy to display in the toast
+   */
   copy: _propTypes.default.string.isRequired,
+
+  /**
+   * The headline to display in the toast (before copy)
+   */
   headline: _propTypes.default.string,
+
+  /**
+   * The link to display in the toast (after copy)
+   */
   link: _propTypes.default.shape({
     href: _propTypes.default.string.isRequired,
     text: _propTypes.default.string.isRequired,

package/lib-module/BlockQuote/BlockQuote.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link, selectSystemProps, StackView, Typography, useThemeTokens, withLinkRouter } from '@telus-uds/components-base';
+import { Link, selectSystemProps, StackView, Typography, useThemeTokens, withLinkRouter, useViewport } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import { htmlAttrs, transformGradient } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -63,6 +63,7 @@ const BlockQuote = _ref8 => {
     variant,
     ...rest
   } = _ref8;
+  const viewport = useViewport();
   const {
     color,
     paddingTop,
@@ -71,16 +72,44 @@ const BlockQuote = _ref8 => {
     paddingRight,
     marginBottom,
     width,
-    backgroundGradient
-  } = useThemeTokens('BlockQuote', tokens, variant);
+    backgroundGradient,
+    titleHeadingFontSize,
+    titleHeadingFontName,
+    titleHeadingFontWeight,
+    titleHeadingLineHeight,
+    titleFontSize,
+    titleFontName,
+    titleFontWeight,
+    titleLineHeight,
+    linkFontSize,
+    linkFontName,
+    linkFontWeight,
+    linkLineHeight
+  } = useThemeTokens('BlockQuote', tokens, variant, {
+    viewport
+  });
   const mappedTextSize = textStyle === 'heading' ? 'h3' : textStyle;
+  const titleTokens = textStyle === 'heading' ? {
+    fontSize: titleHeadingFontSize,
+    fontName: titleHeadingFontName,
+    fontWeight: titleHeadingFontWeight,
+    lineHeight: titleHeadingLineHeight
+  } : {
+    fontSize: titleFontSize,
+    fontName: titleFontName,
+    fontWeight: titleFontWeight,
+    lineHeight: titleLineHeight
+  };
 
   const renderLink = () => {
     if (linkHref) {
       return /*#__PURE__*/_jsx(Link, {
         href: linkHref,
         tokens: {
-          blockFontWeight: '500',
+          blockFontSize: linkFontSize,
+          blockFontName: linkFontName,
+          blockFontWeight: linkFontWeight,
+          blockLineHeight: linkLineHeight,
           color
         },
         variant: {
@@ -105,7 +134,7 @@ const BlockQuote = _ref8 => {
     const quote = /*#__PURE__*/_jsx(Typography, {
       tokens: {
         color,
-        fontWeight: '400'
+        ...titleTokens
       },
       variant: {
         size: mappedTextSize
@@ -148,9 +177,25 @@ const BlockQuote = _ref8 => {
 BlockQuote.propTypes = { ...selectedSystemPropTypes,
   ...withLinkRouter.propTypes,
   children: PropTypes.node.isRequired,
+
+  /**
+   * External source's identifier (e.g. author's name)
+   */
   link: PropTypes.string,
+
+  /**
+   * External source's URL
+   */
   linkHref: PropTypes.string,
+
+  /**
+   * To provide additional information about the source, rendered underneath `link`
+   */
   additionalInfo: PropTypes.string,
+
+  /**
+   * Whether to render BlockQuote as a heading size of `h3` or large text size
+   */
   textStyle: PropTypes.oneOf(['large', 'heading'])
 };
 export default BlockQuote;

package/lib-module/Callout/Callout.js

@@ -122,9 +122,21 @@ const Callout = _ref2 => {
 };
 
 Callout.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Icon to display on the left side of the Callout
+   */
   icon: PropTypes.elementType,
   children: PropTypes.node.isRequired,
+
+  /**
+   * To change the horizontal alignment of the Callout's text
+   */
   textAlignToFlex: PropTypes.oneOf(['center', 'left']),
+
+  /**
+   * To change the vertical alignment of the Callout's icon
+   */
   verticalAlign: PropTypes.oneOf(['top', 'middle', 'bottom'])
 };
 export default Callout;

package/lib-module/DatePicker/CalendarContainer.js

@@ -162,6 +162,30 @@ const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
   }
 }
 
+.CalendarDay
+.CalendarDay__default
+.CalendarDay__selected
+.CalendarDay__blocked_out_of_range{
+  background: ${remainingTokens.calendarDaySelectedDisabledBackground};
+  color: ${remainingTokens.calendarDaySelectedDisabledColor};
+  text-decoration: none;
+  z-index: 0;
+  &:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: ${calendarDayDefaultHeight}px;
+    border: 1px solid ${remainingTokens.calendarDaySelectedDisabledContentBackgroundColor};
+    width: ${calendarDayDefaultWidth}px;
+    border-radius: 50%;
+    background: ${remainingTokens.calendarDaySelectedDisabledContentBackgroundColor};
+    transition: all 0.3s;
+    z-index: -1;
+  }
+}
+
   .CalendarDay__blocked_out_of_range,
   .CalendarDay__blocked_out_of_range:active,
   .CalendarDay__blocked_out_of_range:hover,

package/lib-module/DatePicker/DatePicker.js

@@ -122,14 +122,20 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     setIsClickedInside(false);
   };
 
-  const handleFocus = () => {
-    setIsFocused(true);
+  const handleFocus = event => {
+    if (event.target.tagName === 'INPUT') {
+      setIsFocused(true);
+    }
   };
 
   const handleMouseDown = event => {
     if (event.target.tagName === 'INPUT') {
       setIsClickedInside(true);
       setIsFocused(true);
+    } else if (event.target.tagName === 'path') {
+      // needed to handle the case where the user clicks on the tooltip icon
+      setIsClickedInside(true);
+      event.stopPropagation();
     } else {
       event.stopPropagation();
     }

package/lib-module/Disclaimer/Disclaimer.js

@@ -45,10 +45,6 @@ const Disclaimer = _ref2 => {
 };
 
 Disclaimer.propTypes = { ...selectedSystemPropTypes,
-
-  /**
-   * The content
-   */
   children: PropTypes.node.isRequired
 };
 export default Disclaimer;