@telus-uds/components-web 2.8.1 → 2.10.0

package/lib-module/Modal/ModalContent.js

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-filename-extension */
 import React, { useState } from 'react';
 import { Box, Button, Spacer, TextButton, Typography, useThemeTokens, useViewport } from '@telus-uds/components-base';
 import styled from 'styled-components';

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

@@ -127,8 +127,7 @@ const PreviewCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
           children: [Boolean(tag) && /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsx(Typography, {
               variant: {
-                size: 'eyebrow',
-                colour: 'secondary'
+                size: 'eyebrow'
               },
               children: tag
             }), /*#__PURE__*/_jsx(Spacer, {
@@ -136,8 +135,7 @@ const PreviewCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
             })]
           }), /*#__PURE__*/_jsx(Typography, {
             variant: {
-              size: 'h4',
-              colour: 'secondary'
+              size: 'h4'
             },
             children: title
           }), Boolean(footer) && /*#__PURE__*/_jsxs(_Fragment, {
@@ -145,8 +143,7 @@ const PreviewCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
               space: 2
             }), typeof footer === 'string' ? /*#__PURE__*/_jsx(Typography, {
               variant: {
-                size: 'small',
-                colour: 'secondary'
+                size: 'small'
               },
               children: footer
             }) : footer]

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

@@ -2,7 +2,7 @@ var _withLinkRouter$propT, _withLinkRouter$propT2;
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ChevronLink, selectSystemProps, useThemeTokens, Typography, withLinkRouter } from '@telus-uds/components-base';
+import { ChevronLink, selectSystemProps, useThemeTokens, Typography, withLinkRouter, Spacer, useViewport } from '@telus-uds/components-base';
 import styled, { keyframes, css } from 'styled-components';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -43,6 +43,8 @@ const Toast = _ref3 => {
     variant = {},
     ...rest
   } = _ref3;
+  // viewport hook added to work adjust the padding to different sizes
+  const viewport = useViewport();
   const {
     containerBackgroundColor,
     containerGap,
@@ -55,8 +57,11 @@ const Toast = _ref3 => {
     animationBackgroundColorBefore,
     animationBackgroundColorAfter,
     animationColorBefore,
-    animationColorAfter
-  } = useThemeTokens('Toast', tokens, variant); // inherit ChevronLink tokens for animation colors
+    animationColorAfter,
+    chevronlinkFontWeight
+  } = useThemeTokens('Toast', tokens, variant, {
+    viewport
+  }); // inherit ChevronLink tokens for animation colors
 
   const {
     color: chevronDefaultColor
@@ -93,15 +98,24 @@ const Toast = _ref3 => {
         inverse: true
       },
       children: headline
+    }), /*#__PURE__*/_jsx(Spacer, {
+      space: 2,
+      direction: "row"
     }), /*#__PURE__*/_jsx(Typography, {
       variant: {
         inverse: true
       },
       children: copy
+    }), /*#__PURE__*/_jsx(Spacer, {
+      space: 2,
+      direction: "row"
     }), link && /*#__PURE__*/_jsx(ChevronLink, {
       variant: {
         inverse: true
       },
+      tokens: {
+        blockFontWeight: chevronlinkFontWeight
+      },
       href: link.href,
       LinkRouter: link.LinkRouter,
       linkRouterProps: link.linkRouterProps,
@@ -111,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.50.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.32.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.8.1"
+  "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/Countdown/Countdown.jsx

@@ -22,9 +22,12 @@ import { countdownVariantPropType, dictionaryContentShape } from './types'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const Container = styled.div(({ variant: { feature, inverse, large }, themeTokens, gradient }) => ({
-  ...(large || (feature && { display: 'flex', flex: 0 })),
+  ...(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`,
@@ -33,28 +36,31 @@ const Container = styled.div(({ variant: { feature, inverse, large }, themeToken
     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}`
+    !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 = ({
+  labelBorderColor,
+  textTimerFontWeight,
+  textFontSize,
+  textLineHeight,
+  textTimerFontName
+}) => ({
+  color: labelBorderColor,
+  lineHeight: textLineHeight,
+  fontWeight: textTimerFontWeight,
+  fontSize: textFontSize,
+  fontName: textTimerFontName
 })
 
 const Countdown = forwardRef(({ copy = 'en', targetTime, tokens, variant = {}, ...rest }, ref) => {
@@ -68,18 +74,18 @@ const Countdown = forwardRef(({ copy = 'en', targetTime, tokens, variant = {}, .
   const segmentFontSize = themeTokens.textFontSize
   const semanticGradient =
     themeTokens.containerGradient && transformGradient(themeTokens.containerGradient)
-
   const mainTextTokens = getMainTextTokens(themeTokens)
 
   const divider =
     noDivider === true ? (
       // StackView-based subcontainer adds a 1-step space on the each side of the divider
-      <Spacer direction="row" space={(feature || large) && viewport !== viewports.xs ? 7 : 2} />
+      <Spacer direction="row" space={(feature || large) && viewport !== viewports.xs ? 4 : 1} />
     ) : (
       <Typography tokens={mainTextTokens}>:</Typography>
     )
   const labelTokens = getLabelTokens(themeTokens)
-  const commonProps = {
+
+  const segmentProps = {
     copy,
     labelTokens,
     numberTokens: mainTextTokens,
@@ -98,26 +104,31 @@ const Countdown = forwardRef(({ copy = 'en', targetTime, tokens, variant = {}, .
       gradient={semanticGradient}
     >
       <StackView direction="row" space={1}>
-        <Segment labelKey="day" number={days} segmentWidth={String(days).length} {...commonProps} />
+        <Segment
+          labelKey="day"
+          number={days}
+          segmentWidth={String(days).length}
+          {...segmentProps}
+        />
         {divider}
         <Segment
           labelKey="hour"
           number={hours}
-          {...commonProps}
+          {...segmentProps}
           {...applyTextStyles(themeTokens)}
         />
         {divider}
         <Segment
           labelKey="minute"
           number={minutes}
-          {...commonProps}
+          {...segmentProps}
           {...applyTextStyles(themeTokens)}
         />
         {divider}
         <Segment
           labelKey="second"
           number={seconds}
-          {...commonProps}
+          {...segmentProps}
           {...applyTextStyles(themeTokens)}
         />
       </StackView>

package/src/Countdown/Segment.jsx

@@ -4,6 +4,7 @@ import { StackView, Typography, useCopy } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import dictionary from './dictionary'
 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
@@ -13,11 +14,11 @@ const Container = styled.div(({ segmentFontSize, segmentWidth = 2, variant: { fe
   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'
   })
 }))
-
 // A segment of the countdown string: we need to make sure it
 // keeps its width constant to prevent the whole component from
 // being automatically resized while using variable size fonts

package/src/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 SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = 0.8

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()
       }