@telus-uds/components-web 2.8.1 → 2.10.0

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

@@ -61,6 +61,8 @@ const Toast = _ref3 => {
     variant = {},
     ...rest
   } = _ref3;
+  // viewport hook added to work adjust the padding to different sizes
+  const viewport = (0, _componentsBase.useViewport)();
   const {
     containerBackgroundColor,
     containerGap,
@@ -73,8 +75,11 @@ const Toast = _ref3 => {
     animationBackgroundColorBefore,
     animationBackgroundColorAfter,
     animationColorBefore,
-    animationColorAfter
-  } = (0, _componentsBase.useThemeTokens)('Toast', tokens, variant); // inherit ChevronLink tokens for animation colors
+    animationColorAfter,
+    chevronlinkFontWeight
+  } = (0, _componentsBase.useThemeTokens)('Toast', tokens, variant, {
+    viewport
+  }); // inherit ChevronLink tokens for animation colors
 
   const {
     color: chevronDefaultColor
@@ -111,15 +116,24 @@ const Toast = _ref3 => {
         inverse: true
       },
       children: headline
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+      space: 2,
+      direction: "row"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
       variant: {
         inverse: true
       },
       children: copy
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+      space: 2,
+      direction: "row"
     }), link && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ChevronLink, {
       variant: {
         inverse: true
       },
+      tokens: {
+        blockFontWeight: chevronlinkFontWeight
+      },
       href: link.href,
       LinkRouter: link.LinkRouter,
       linkRouterProps: link.linkRouterProps,
@@ -129,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/Countdown/Countdown.js

@@ -26,12 +26,15 @@ const Container = /*#__PURE__*/styled.div.withConfig({
     themeTokens,
     gradient
   } = _ref;
-  return { ...(large || feature && {
+  return { ...(large || feature ? {
       display: 'flex',
       flex: 0
-    }),
+    } : {}),
     ...(feature && {
       borderRadius: themeTokens.containerBorderRadius,
+      borderColor: themeTokens.containerBorderColor,
+      borderStyle: 'solid',
+      borderWidth: `${themeTokens.containerBorderWidth}px`,
       justifyContent: 'center',
       paddingBottom: `${themeTokens.containerPaddingBottomTop}px`,
       paddingLeft: `${themeTokens.containerPaddingLeftRight}px`,
@@ -39,38 +42,44 @@ const Container = /*#__PURE__*/styled.div.withConfig({
       paddingTop: `${themeTokens.containerPaddingBottomTop}px`,
       width: 'fit-content'
     }),
-    ...(feature && !inverse && {
-      background: `linear-gradient(#fff 0 0) padding-box, ${gradient} border-box`,
-      border: `${themeTokens.containerInverseBorder}px solid transparent`
-    }),
-    ...(feature && inverse && {
-      border: `${themeTokens.containerInverseBorder}px solid ${themeTokens.inverseBorderColor}`
+    ...(feature && !inverse && gradient && {
+      background: `linear-gradient(#fff 0 0) padding-box, ${gradient} border-box`
     })
   };
 });
 
 const getLabelTokens = themeTokens => ({
   color: themeTokens.labelBorderColor,
-  fontWeight: themeTokens.textTimerFontWeight,
-  fontSize: `${themeTokens.labelFontSize}`,
-  lineHeight: `${themeTokens.labelLineHeight}`
+  fontSize: themeTokens.labelFontSize,
+  fontWeight: themeTokens.labelFontWeight,
+  lineHeight: themeTokens.labelLineHeight
 });
 
-const getMainTextTokens = themeTokens => ({
-  color: themeTokens.labelBorderColor,
-  fontWeight: themeTokens.textTimerFontWeight,
-  fontSize: themeTokens.textFontSize,
-  lineHeight: themeTokens.textLineHeight
-});
+const getMainTextTokens = _ref2 => {
+  let {
+    labelBorderColor,
+    textTimerFontWeight,
+    textFontSize,
+    textLineHeight,
+    textTimerFontName
+  } = _ref2;
+  return {
+    color: labelBorderColor,
+    lineHeight: textLineHeight,
+    fontWeight: textTimerFontWeight,
+    fontSize: textFontSize,
+    fontName: textTimerFontName
+  };
+};
 
-const Countdown = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const Countdown = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     copy = 'en',
     targetTime,
     tokens,
     variant = {},
     ...rest
-  } = _ref2;
+  } = _ref3;
   const [days, hours, minutes, seconds] = useCountdown(targetTime);
   const viewport = useViewport();
   const {
@@ -95,13 +104,13 @@ const Countdown = /*#__PURE__*/forwardRef((_ref2, ref) => {
   // StackView-based subcontainer adds a 1-step space on the each side of the divider
   _jsx(Spacer, {
     direction: "row",
-    space: (feature || large) && viewport !== viewports.xs ? 7 : 2
+    space: (feature || large) && viewport !== viewports.xs ? 4 : 1
   }) : /*#__PURE__*/_jsx(Typography, {
     tokens: mainTextTokens,
     children: ":"
   });
   const labelTokens = getLabelTokens(themeTokens);
-  const commonProps = {
+  const segmentProps = {
     copy,
     labelTokens,
     numberTokens: mainTextTokens,
@@ -125,21 +134,21 @@ const Countdown = /*#__PURE__*/forwardRef((_ref2, ref) => {
           labelKey: "day",
           number: days,
           segmentWidth: String(days).length,
-          ...commonProps
+          ...segmentProps
         }), divider, /*#__PURE__*/_jsx(Segment, {
           labelKey: "hour",
           number: hours,
-          ...commonProps,
+          ...segmentProps,
           ...applyTextStyles(themeTokens)
         }), divider, /*#__PURE__*/_jsx(Segment, {
           labelKey: "minute",
           number: minutes,
-          ...commonProps,
+          ...segmentProps,
           ...applyTextStyles(themeTokens)
         }), divider, /*#__PURE__*/_jsx(Segment, {
           labelKey: "second",
           number: seconds,
-          ...commonProps,
+          ...segmentProps,
           ...applyTextStyles(themeTokens)
         })]
       })

package/lib-module/Countdown/Segment.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import { StackView, Typography, useCopy } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import dictionary from './dictionary';
-import { countdownVariantPropType, dictionaryContentShape } from './types';
+import { countdownVariantPropType, dictionaryContentShape } from './types'; // !TODO: put this back
+
 import { SEGMENT_WIDTH_TO_FONT_SIZE_RATIO } from './constants'; // Pads with zeros on the left if it's a single digit number
 
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -29,6 +30,7 @@ const Container = /*#__PURE__*/styled.div.withConfig({
     justifyContent: 'space-evenly',
     display: 'inline-flex',
     ...(feature && {
+      // This is required because when the numbers for Countdown change, the character widths will change and thereby effecting the container demensions.
       width: `${segmentFontSize * SEGMENT_WIDTH_TO_FONT_SIZE_RATIO * segmentWidth}px`,
       display: 'flex'
     })

package/lib-module/Countdown/constants.js

@@ -1,4 +1,4 @@
 export const DEFAULT_FONT_SIZE = 16;
 export const LARGE_FONT_SIZE = 64;
-export const SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = 0.8;
-export const XS_FONT_SIZE = 28;
+export const XS_FONT_SIZE = 28;
+export const SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = 0.8;

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;

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/Footnote/Footnote.js

@@ -172,6 +172,7 @@ const CloseButton = /*#__PURE__*/styled.button.withConfig({
   let {
     closeButtonBorder,
     closeButtonHeight,
+    closeButtonBackgroundColor,
     closeButtonMargin,
     closeButtonWidth
   } = _ref9;
@@ -181,7 +182,7 @@ const CloseButton = /*#__PURE__*/styled.button.withConfig({
     cursor: 'pointer',
     display: 'flex',
     justifyContent: 'center',
-    backgroundColor: 'white',
+    backgroundColor: closeButtonBackgroundColor,
     border: closeButtonBorder,
     height: closeButtonHeight,
     margin: closeButtonMargin,
@@ -209,10 +210,16 @@ const StyledCustomContentContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1563bo5-8"
 })(_ref11 => {
   let {
-    color
+    listItemColor,
+    listItemFontSize,
+    listItemLineHeight,
+    listItemPaddingLeft
   } = _ref11;
   return {
-    color,
+    fontSize: listItemFontSize,
+    lineHeight: listItemLineHeight,
+    paddingLeft: listItemPaddingLeft,
+    color: listItemColor,
     fontFamily: 'HelveticaNow400normal'
   };
 });
@@ -279,8 +286,6 @@ const Footnote = props => {
     footnoteHeaderPaddingBottom,
     headerLineHeight,
     headerFontSize,
-    headerFontName,
-    headerFontWeight,
     listPaddingLeft,
     listItemMarkerFontSize,
     listItemMarkerLineHeight,
@@ -290,6 +295,7 @@ const Footnote = props => {
     listItemPaddingLeft,
     closeButtonBorderSize,
     closeButtonBorderColor,
+    closeButtonBackgroundColor,
     closeButtonHeight,
     closeButtonMarginTop,
     closeButtonMarginLeft,
@@ -458,6 +464,10 @@ const Footnote = props => {
 
     if ( /*#__PURE__*/React.isValidElement(data.content)) {
       return /*#__PURE__*/_jsx(StyledCustomContentContainer, {
+        listItemColor: listItemColor,
+        listItemFontSize: listItemFontSize,
+        listItemLineHeight: listItemLineHeight,
+        listItemPaddingLeft: listItemPaddingLeft,
         ref: contentRef,
         children: data.content
       });
@@ -475,6 +485,10 @@ const Footnote = props => {
         listItemLineHeight: listItemLineHeight,
         listItemPaddingLeft: listItemPaddingLeft,
         children: /*#__PURE__*/_jsx(Typography, {
+          tokens: {
+            fontSize: listItemFontSize,
+            lineHeight: listItemLineHeight
+          },
           children: renderStructuredContent(data.content)
         })
       })
@@ -501,17 +515,20 @@ const Footnote = props => {
               footnoteHeaderPaddingTop: footnoteHeaderPaddingTop,
               footnoteHeaderPaddingBottom: footnoteHeaderPaddingBottom,
               headerMargin: headerMargin,
-              children: [/*#__PURE__*/_jsx("h2", {
-                style: {
-                  fontSize: `${headerFontSize}px`,
-                  lineHeight: `${headerLineHeight}px`,
-                  fontFamily: `${headerFontName}${headerFontWeight}normal`
+              children: [/*#__PURE__*/_jsx(Typography, {
+                tokens: {
+                  fontSize: headerFontSize,
+                  lineHeight: headerLineHeight
+                },
+                variant: {
+                  size: 'h4'
                 },
                 children: getCopy('heading')
               }), /*#__PURE__*/_jsx(CloseButton, {
-                closeButtonBorder: `${closeButtonBorderSize}px solid ${closeButtonBorderColor}`,
+                closeButtonBorder: `${closeButtonBorderSize} solid ${closeButtonBorderColor}`,
                 closeButtonWidth: `${closeButtonWidth}px`,
                 closeButtonHeight: `${closeButtonHeight}px`,
+                closeButtonBackgroundColor: closeButtonBackgroundColor,
                 closeButtonMargin: `${closeButtonMarginTop}px ${closeButtonMarginRight}px ${closeButtonMarginBottom}px ${closeButtonMarginLeft}px`,
                 onClick: event => {
                   closeFootnote(event, {

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;