@telus-uds/components-web 2.9.0 → 2.10.0

package/lib-module/ExpandCollapseMini/ExpandCollapseMini.js

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

package/lib-module/ExpandCollapseMini/ExpandCollapseMiniControl.js

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

package/lib-module/IconButton/IconButton.js

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

package/lib-module/Listbox/Listbox.js

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

package/lib-module/NavigationBar/NavigationBar.js

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

package/lib-module/OrderedList/Item.js

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

package/lib-module/Paragraph/Paragraph.js

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

package/lib-module/PreviewCard/AuthorDate.js

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

package/lib-module/PriceLockup/PriceLockup.js

@@ -235,16 +235,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.oneOf(['small', 'medium', 'large']),
+
+  /**
+   * If currency symbol other than `$` to be used
+   */
   currencySymbol: PropTypes.string,
+
+  /**
+   * Shows additional info above the price
+   */
   topText: PropTypes.string,
+
+  /**
+   * Monetary value (including decimals separated by ".")
+   */
   price: PropTypes.string.isRequired,
+
+  /**
+   * Shows month/year unit
+   */
   rateText: PropTypes.string,
+
+  /**
+   * Shows additional info below the price with a `Divider`
+   */
   bottomText: PropTypes.string,
+
+  /**
+   * Displays which side the currency should apperar (left, right)
+   */
   signDirection: PropTypes.oneOf(['right', 'left']),
+
+  /**
+   * Shows additional link for context
+   */
   footnoteLinks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+
+  /**
+   * Function to be called when a footnote link is clicked
+   */
   onClickFootnote: PropTypes.func,
+
+  /**
+   * To show price savings comparison
+   */
   strikeThrough: PropTypes.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.string
 };
 export default PriceLockup;

package/lib-module/QuantitySelector/QuantitySelector.js

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

package/lib-module/Span/Span.js

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

package/lib-module/Table/Table.js

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

package/lib-module/Toast/Toast.js

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

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.51.0",
+    "@telus-uds/components-base": "1.51.1",
     "@telus-uds/system-constants": "^1.2.1",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.33.0",
+    "@telus-uds/system-theme-tokens": "^2.34.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -63,5 +63,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.9.0"
+  "version": "2.10.0"
 }

package/src/BlockQuote/BlockQuote.jsx

@@ -6,7 +6,8 @@ import {
   StackView,
   Typography,
   useThemeTokens,
-  withLinkRouter
+  withLinkRouter,
+  useViewport
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import { htmlAttrs, transformGradient } from '../utils'
@@ -48,6 +49,7 @@ const BlockQuote = ({
   variant,
   ...rest
 }) => {
+  const viewport = useViewport()
   const {
     color,
     paddingTop,
@@ -56,16 +58,49 @@ const BlockQuote = ({
     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 (
         <Link
           href={linkHref}
-          tokens={{ blockFontWeight: '500', color }}
+          tokens={{
+            blockFontSize: linkFontSize,
+            blockFontName: linkFontName,
+            blockFontWeight: linkFontWeight,
+            blockLineHeight: linkLineHeight,
+            color
+          }}
           variant={{ alternative: true }}
           LinkRouter={LinkRouter}
           linkRouterProps={linkRouterProps}
@@ -80,7 +115,7 @@ const BlockQuote = ({
 
   const renderQuote = () => {
     const quote = (
-      <Typography tokens={{ color, fontWeight: '400' }} variant={{ size: mappedTextSize }}>
+      <Typography tokens={{ color, ...titleTokens }} variant={{ size: mappedTextSize }}>
         {children}
       </Typography>
     )
@@ -121,9 +156,21 @@ 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'])
 }
 

package/src/Callout/Callout.jsx

@@ -91,9 +91,18 @@ const Callout = ({
 
 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'])
 }
 

package/src/DatePicker/CalendarContainer.jsx

@@ -164,6 +164,30 @@ const CalendarContainer = styled.div(
   }
 }
 
+.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/src/DatePicker/DatePicker.jsx

@@ -109,13 +109,19 @@ const DatePicker = forwardRef(
       }
       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/src/Disclaimer/Disclaimer.jsx

@@ -30,9 +30,6 @@ const Disclaimer = ({ children, ...rest }) => {
 
 Disclaimer.propTypes = {
   ...selectedSystemPropTypes,
-  /**
-   * The content
-   */
   children: PropTypes.node.isRequired
 }
 

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -39,6 +39,9 @@ ExpandCollapseMini.displayName = 'ExpandCollapseMini'
 
 ExpandCollapseMini.propTypes = {
   ...ExpandCollapseMiniControl.propTypes,
+  /**
+   * Function to call on pressing the panel's control, which should open or close the panel.
+   */
   onToggle: PropTypes.func,
   children: PropTypes.node.isRequired
 }

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

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

package/src/IconButton/IconButton.jsx

@@ -36,8 +36,14 @@ IconButton.displayName = 'IconButton'
 const propsWithoutIcon = ({ icon, ...props }) => props
 IconButton.propTypes = {
   ...propsWithoutIcon(IconButtonBase.propTypes),
+  /**
+   * To set the icon to a multi-brand compatabile icon
+   */
   // eslint-disable-next-line react/require-default-props
   action: PropTypes.oneOf(multiBrandIconNames),
+  /**
+   * To set a custom icon
+   */
   icon: PropTypes.func
 }
 

package/src/Listbox/Listbox.jsx

@@ -139,7 +139,13 @@ Listbox.propTypes = {
    * the last menu item.
    */
   parentRef: PropTypes.object,
+  /**
+   * `Listbox` items
+   */
   items: PropTypes.array,
+  /**
+   * To select an item by default
+   */
   selectedId: PropTypes.string
 }
 

package/src/NavigationBar/NavigationBar.jsx

@@ -198,6 +198,9 @@ NavigationBar.propTypes = {
    * Common navigation bar heading.
    */
   heading: PropTypes.string,
+  /**
+   * Sets the `headingLevel` of the `heading`
+   */
   headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
   /**
    * Matches the `id` property of the item in `items` corresponding to the current page

package/src/OrderedList/Item.jsx

@@ -107,6 +107,9 @@ Item.propTypes = {
    * Item content
    */
   children: PropTypes.node.isRequired,
+  /**
+   * Defines the title of the `OrderedList.Item`
+   */
   title: PropTypes.string,
   /**
    * Item tokens

package/src/Paragraph/Paragraph.jsx

@@ -49,6 +49,9 @@ const Paragraph = ({ children, variant, tokens, testID, align, linesBetween = 1,
 Paragraph.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.node.isRequired,
+  /**
+   * Adds a `data-testid` attribute to the element for testing purposes
+   */
   testID: PropTypes.string,
   /**
    * Sets the alignment style for the paragraph. Same options as Typography's `align` prop.

package/src/PreviewCard/AuthorDate.jsx

@@ -24,7 +24,13 @@ const AuthorDate = ({ author, date }) => {
 }
 
 AuthorDate.propTypes = {
+  /**
+   * Name of the author
+   */
   author: PropTypes.string.isRequired,
+  /**
+   * Date of the post
+   */
   date: PropTypes.string.isRequired
 }