@telus-uds/components-web 2.9.0 → 2.11.0

package/lib/Listbox/ListboxItem.js

@@ -15,8 +15,6 @@ var _componentsBase = require("@telus-uds/components-base");
 
 var _utils = require("../utils");
 
-var _PressableItem = _interopRequireDefault(require("./PressableItem"));
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -45,48 +43,10 @@ const StyledItemContainer = /*#__PURE__*/_styledComponents.default.li.withConfig
   }
 });
 
-const getSelectedItemStyles = _ref2 => {
-  let {
-    tokens
-  } = _ref2;
-  return {
-    display: tokens.itemDisplay,
-    fontFamily: `${tokens.itemFontName}${tokens.itemFontWeight}normal`,
-    fontSize: tokens.itemFontSize,
-    paddingTop: tokens.itemPaddingTop,
-    paddingBottom: tokens.itemPaddingBottom,
-    paddingLeft: tokens.itemPaddingLeft,
-    paddingRight: tokens.itemPaddingRight,
-    color: tokens.itemColor,
-    textDecoration: tokens.itemTextDecoration,
-    backgroundColor: tokens.itemBackgroundColor,
-    outline: tokens.itemOutline,
-    borderWidth: tokens.itemBorderWidth,
-    width: '100%'
-  };
-};
-
-const SelectedItem = /*#__PURE__*/_styledComponents.default.div.withConfig({
-  displayName: "ListboxItem__SelectedItem",
-  componentId: "components-web__sc-tlroet-1"
-})(_ref3 => {
-  let {
-    isChild,
-    tokens
-  } = _ref3;
-  return { ...getSelectedItemStyles({
-      tokens
-    }),
-    borderLeft: isChild ? `${tokens.itemBorderLeftWidth}px solid ${tokens.itemBorderLeftColor}` : 'none'
-  };
-});
-
-const ListboxItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+const ListboxItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     href,
     label,
-    onPress,
-    selected = false,
     isChild = false,
     onBlur,
     nextItemRef,
@@ -95,21 +55,22 @@ const ListboxItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     variant = {},
     LinkRouter,
     linkRouterProps,
+    id,
+    onPress = () => {},
+    ...rest
+  } = _ref2;
+  const selectedProps = selectProps({
+    href,
     ...rest
-  } = _ref4;
-  const selectedProps = selectProps(rest);
-  const systemTokens = (0, _componentsBase.useThemeTokens)('ListBox', tokens, variant, {
+  });
+  const getTokens = (0, _componentsBase.useThemeTokensCallback)('Listbox', tokens, variant, {
     isChild
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledItemContainer, {
     isChild: isChild,
     ...selectedProps,
     role: "option",
-    children: selected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectedItem, {
-      isChild: isChild,
-      tokens: systemTokens,
-      children: label
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableItem.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableItem, {
       href: href,
       isChild: isChild,
       onPress: onPress,
@@ -117,6 +78,9 @@ const ListboxItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
       nextItemRef: nextItemRef,
       prevItemRef: prevItemRef,
       ref: ref,
+      tokens: getTokens,
+      selectedProps: selectedProps,
+      id: id,
       children: label
     })
   });
@@ -129,8 +93,7 @@ ListboxItem.propTypes = { ...selectedSystemPropTypes,
   label: _propTypes.default.node.isRequired,
   nextItemRef: _propTypes.default.object,
   prevItemRef: _propTypes.default.object,
-  onPress: _propTypes.default.func,
-  selected: _propTypes.default.bool
+  onPress: _propTypes.default.func
 };
 
 var _default = (0, _componentsBase.withLinkRouter)(ListboxItem);

package/lib/Listbox/ListboxOverlay.js

@@ -52,7 +52,7 @@ const DropdownOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     minWidth,
     onLayout
   } = _ref;
-  const systemTokens = (0, _componentsBase.useThemeTokens)('ListBox', {}, {});
+  const systemTokens = (0, _componentsBase.useThemeTokens)('Listbox', {}, {});
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_WebPortal.default, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       ref: ref,

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

@@ -57,13 +57,14 @@ const StyledControlBar = /*#__PURE__*/_styledComponents.default.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)',
@@ -141,21 +142,23 @@ const ControlBar = _ref4 => {
     variant,
     ...rest
   } = _ref4;
+  const viewport = (0, _componentsBase.useViewport)();
   const {
     paddingTop,
     paddingBottom,
-    paddingLeft: paddingLeftDefault,
-    paddingRight: paddingRightDefault,
-    paddingLeftCompactMode,
-    paddingRightCompactMode,
+    paddingLeft,
+    paddingRight,
     menuBottom,
     menuRight,
     menuMarginLeft,
     captionsIcon,
     settingsIcon,
     minimizeIcon,
-    maximizeIcon
-  } = (0, _componentsBase.useThemeTokens)('VideoControlBar', tokens, variant);
+    maximizeIcon,
+    height
+  } = (0, _componentsBase.useThemeTokens)('VideoControlBar', tokens, variant, {
+    viewport
+  });
 
   const parseVideoQuality = () => {
     return sources.map(source => {
@@ -184,8 +187,6 @@ const ControlBar = _ref4 => {
     return parsed;
   };
 
-  const paddingLeft = videoPlayerWidth > compactModeThreshold ? paddingLeftDefault : paddingLeftCompactMode;
-  const paddingRight = videoPlayerWidth > compactModeThreshold ? paddingRightDefault : paddingRightCompactMode;
   const menuContainerStyleProps = {
     menuBottom,
     menuRight,
@@ -197,10 +198,12 @@ const ControlBar = _ref4 => {
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledControlBar, {
       padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+      height: `${height}px`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(VideoProgressBarContainer, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoProgressBar.default, {
           copy: copy,
           videoPlayer: videoPlayer,
+          playing: videoPlaying,
           videoLength: videoLength,
           videoCurrentTime: videoCurrentTime,
           videoBufferEnd: videoBufferEnd,

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

@@ -140,6 +140,7 @@ const VideoProgressBar = _ref5 => {
     videoLength,
     videoCurrentTime,
     videoBufferEnd,
+    playing,
     setSeek,
     resetInactivityTimer,
     tokens,
@@ -155,7 +156,9 @@ const VideoProgressBar = _ref5 => {
     trackGradientStart,
     trackGradientEnd,
     rangeBackground
-  } = (0, _componentsBase.useThemeTokens)('VideoProgressBar', tokens, variant);
+  } = (0, _componentsBase.useThemeTokens)('VideoProgressBar', tokens, variant, {
+    playing
+  });
 
   const videoProgressBar = /*#__PURE__*/_react.default.createRef();
 

package/lib/VideoPicker/VideoPicker.js

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

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

@@ -174,14 +174,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
   } = (0, _componentsBase.useThemeTokens)('SplashButtonWithDetails', tokens, variant, {
@@ -208,6 +219,7 @@ const SplashButtonWithDetails = _ref15 => {
           variant: {
             bold: true
           },
+          tokens: getLabelTokens(themeTokens),
           children: label
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           variant: {

package/lib/utils/index.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "deprecate", {
 Object.defineProperty(exports, "htmlAttrs", {
   enumerable: true,
   get: function () {
-    return _htmlAttrs.default;
+    return _componentsBase.htmlAttrs;
   }
 });
 Object.defineProperty(exports, "media", {
@@ -58,14 +58,14 @@ Object.defineProperty(exports, "warn", {
   }
 });
 
+var _componentsBase = require("@telus-uds/components-base");
+
 var _logger = require("./logger");
 
 var _transforms = require("./transforms");
 
 var _useTypographyTheme = _interopRequireDefault(require("./useTypographyTheme"));
 
-var _htmlAttrs = _interopRequireDefault(require("./htmlAttrs"));
-
 var _media = _interopRequireDefault(require("./media"));
 
 var _ssr = _interopRequireDefault(require("./ssr"));

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: {
@@ -95,7 +124,10 @@ const BlockQuote = _ref8 => {
     return /*#__PURE__*/_jsx(Typography, {
       tokens: {
         color,
-        fontWeight: '500'
+        fontName: linkFontName,
+        fontSize: linkFontSize,
+        fontWeight: linkFontWeight,
+        lineHeight: linkLineHeight
       },
       children: link
     });
@@ -105,7 +137,7 @@ const BlockQuote = _ref8 => {
     const quote = /*#__PURE__*/_jsx(Typography, {
       tokens: {
         color,
-        fontWeight: '400'
+        ...titleTokens
       },
       variant: {
         size: mappedTextSize
@@ -148,9 +180,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,