@telus-uds/components-web 2.9.0 → 2.11.0

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/lib-module/Video/ControlBar/ControlBar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { StackView, useThemeTokens, selectSystemProps, Icon } from '@telus-uds/components-base';
+import { StackView, useThemeTokens, selectSystemProps, Icon, useViewport } from '@telus-uds/components-base';
 import VideoProgressBar from './Controls/VideoProgressBar/VideoProgressBar';
 import VolumeSlider from './Controls/VolumeSlider/VolumeSlider';
 import VideoButton from './Controls/VideoButton/VideoButton';
@@ -37,13 +37,14 @@ const StyledControlBar = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-13y61ky-1"
 })(_ref2 => {
   let {
-    padding
+    padding,
+    height
   } = _ref2;
   return {
     boxSizing: 'border-box',
     position: 'absolute',
     width: '100%',
-    height: 56,
+    height,
     padding,
     bottom: 0,
     backgroundColor: 'rgba(42, 44, 46, 0.85)',
@@ -119,21 +120,23 @@ const ControlBar = _ref4 => {
     variant,
     ...rest
   } = _ref4;
+  const viewport = useViewport();
   const {
     paddingTop,
     paddingBottom,
-    paddingLeft: paddingLeftDefault,
-    paddingRight: paddingRightDefault,
-    paddingLeftCompactMode,
-    paddingRightCompactMode,
+    paddingLeft,
+    paddingRight,
     menuBottom,
     menuRight,
     menuMarginLeft,
     captionsIcon,
     settingsIcon,
     minimizeIcon,
-    maximizeIcon
-  } = useThemeTokens('VideoControlBar', tokens, variant);
+    maximizeIcon,
+    height
+  } = useThemeTokens('VideoControlBar', tokens, variant, {
+    viewport
+  });
 
   const parseVideoQuality = () => {
     return sources.map(source => {
@@ -162,8 +165,6 @@ const ControlBar = _ref4 => {
     return parsed;
   };
 
-  const paddingLeft = videoPlayerWidth > compactModeThreshold ? paddingLeftDefault : paddingLeftCompactMode;
-  const paddingRight = videoPlayerWidth > compactModeThreshold ? paddingRightDefault : paddingRightCompactMode;
   const menuContainerStyleProps = {
     menuBottom,
     menuRight,
@@ -175,10 +176,12 @@ const ControlBar = _ref4 => {
     ...selectProps(rest),
     children: /*#__PURE__*/_jsxs(StyledControlBar, {
       padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+      height: `${height}px`,
       children: [/*#__PURE__*/_jsx(VideoProgressBarContainer, {
         children: /*#__PURE__*/_jsx(VideoProgressBar, {
           copy: copy,
           videoPlayer: videoPlayer,
+          playing: videoPlaying,
           videoLength: videoLength,
           videoCurrentTime: videoCurrentTime,
           videoBufferEnd: videoBufferEnd,

package/lib-module/Video/ControlBar/Controls/VideoProgressBar/VideoProgressBar.js

@@ -122,6 +122,7 @@ const VideoProgressBar = _ref5 => {
     videoLength,
     videoCurrentTime,
     videoBufferEnd,
+    playing,
     setSeek,
     resetInactivityTimer,
     tokens,
@@ -137,7 +138,9 @@ const VideoProgressBar = _ref5 => {
     trackGradientStart,
     trackGradientEnd,
     rangeBackground
-  } = useThemeTokens('VideoProgressBar', tokens, variant);
+  } = useThemeTokens('VideoProgressBar', tokens, variant, {
+    playing
+  });
   const videoProgressBar = /*#__PURE__*/React.createRef();
 
   const handleVideoSkip = () => {

package/lib-module/VideoPicker/VideoPicker.js

@@ -87,7 +87,7 @@ const VideoPicker = _ref6 => {
     setCurrentVideoId(selectedVideo);
   }, [selectedVideo]); // `frame` variant should only work on larger screens
 
-  const isFramed = frame && [viewports.md, viewports.lg, viewports.xl].includes(viewport);
+  const isFramed = frame && [viewports.lg, viewports.xl].includes(viewport);
   const hasSlider = !frame && [viewports.md, viewports.lg, viewports.xl].includes(viewport);
   const listElements = videoList.map((video, index) => /*#__PURE__*/_jsx(VideoPickerThumbnail, {
     video: video,

package/lib-module/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.js

@@ -157,14 +157,25 @@ const selectButtonContentTokens = _ref14 => {
   };
 };
 
-const SplashButtonWithDetails = _ref15 => {
+const getLabelTokens = _ref15 => {
+  let {
+    labelFontName: fontName,
+    labelFontWeight: fontWeight
+  } = _ref15;
+  return {
+    fontName,
+    fontWeight
+  };
+};
+
+const SplashButtonWithDetails = _ref16 => {
   let {
     label,
     tokens,
     variant,
     copy,
     videoLength
-  } = _ref15;
+  } = _ref16;
   const {
     buttonContentChildrenBackground
   } = useThemeTokens('SplashButtonWithDetails', tokens, variant, {
@@ -191,6 +202,7 @@ const SplashButtonWithDetails = _ref15 => {
           variant: {
             bold: true
           },
+          tokens: getLabelTokens(themeTokens),
           children: label
         }), /*#__PURE__*/_jsx(Typography, {
           variant: {

package/lib-module/utils/index.js

@@ -1,7 +1,7 @@
+import { htmlAttrs } from '@telus-uds/components-base';
 import { warn, deprecate } from './logger';
 import { transformGradient } from './transforms';
 import useTypographyTheme from './useTypographyTheme';
-import htmlAttrs from './htmlAttrs';
 import media from './media';
 import ssrStyles from './ssr';
 import renderStructuredContent from './renderStructuredContent';

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.52.0",
     "@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.35.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.11.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}
@@ -75,12 +110,24 @@ const BlockQuote = ({
       )
     }
 
-    return <Typography tokens={{ color, fontWeight: '500' }}>{link}</Typography>
+    return (
+      <Typography
+        tokens={{
+          color,
+          fontName: linkFontName,
+          fontSize: linkFontSize,
+          fontWeight: linkFontWeight,
+          lineHeight: linkLineHeight
+        }}
+      >
+        {link}
+      </Typography>
+    )
   }
 
   const renderQuote = () => {
     const quote = (
-      <Typography tokens={{ color, fontWeight: '400' }} variant={{ size: mappedTextSize }}>
+      <Typography tokens={{ color, ...titleTokens }} variant={{ size: mappedTextSize }}>
         {children}
       </Typography>
     )
@@ -121,9 +168,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

@@ -91,6 +91,7 @@ const DatePicker = forwardRef(
       tokens,
       variant = {},
       validation,
+      disabled,
       ...rest
     },
     ref
@@ -109,15 +110,23 @@ const DatePicker = forwardRef(
       }
       setIsClickedInside(false)
     }
-    const handleFocus = () => {
-      setIsFocused(true)
+    const handleFocus = (event) => {
+      if (event.target.tagName === 'INPUT' && !disabled) {
+        setIsFocused(true)
+      }
     }
     const handleMouseDown = (event) => {
-      if (event.target.tagName === 'INPUT') {
-        setIsClickedInside(true)
-        setIsFocused(true)
-      } else {
-        event.stopPropagation()
+      if (!disabled) {
+        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()
+        }
       }
     }
     const onChange = (value) => {
@@ -247,9 +256,11 @@ const DatePicker = forwardRef(
               label={dictionary[copy]?.roleDescription ?? label}
               value={inputText}
               validation={validation}
+              inactive={disabled}
             >
               <SingleDatePicker
                 date={inputDate}
+                disabled={disabled}
                 onDateChange={onChange}
                 focused={isFocused}
                 onFocusChange={onFocusChange}
@@ -341,7 +352,11 @@ DatePicker.propTypes = {
   /**
    * Use to visually mark an input as valid or invalid.
    */
-  validation: PropTypes.oneOf(['error', 'success'])
+  validation: PropTypes.oneOf(['error', 'success']),
+  /**
+   * Disable the input which will not open the calendar picker
+   */
+  disabled: PropTypes.bool
 }
 
 DatePicker.defaultProps = {
@@ -355,7 +370,8 @@ DatePicker.defaultProps = {
   hintPosition: 'inline',
   tooltip: undefined,
   onDateChange: () => {},
-  validation: undefined
+  validation: undefined,
+  disabled: false
 }
 
 export default DatePicker

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
 }