@telus-uds/components-web 2.10.0 → 2.12.0

package/lib/Listbox/ListboxGroup.js

@@ -55,7 +55,6 @@ const ListboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     id,
     label,
     items,
-    selectedId,
     LinkRouter,
     linkRouterProps,
     expandProps,
@@ -63,7 +62,10 @@ const ListboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     nextItemRef,
     prevItemRef
   } = _ref;
-  // TODO: implement keyboard navigation via refs for grouped items separately here
+  const {
+    selectedId
+  } = (0, _componentsBase.useListboxContext)(); // TODO: implement keyboard navigation via refs for grouped items separately here
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGroupWrapper, {
     role: "option",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse.Panel, {
@@ -73,11 +75,17 @@ const ListboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         paddingLeft: 'none',
         paddingRight: 'none',
         paddingTop: 'none',
-        paddingBottom: 'none'
+        paddingBottom: 'none',
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        textLine: 'none',
+        borderWidth: 0
       } // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,
-      control: controlProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupControl.default, { ...controlProps,
+      control: controlProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupControl.default, {
+        id: id ?? label,
+        ...controlProps,
         label: label
       }),
       ...expandProps,
@@ -85,25 +93,33 @@ const ListboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         contentPaddingLeft: 'none',
         contentPaddingRight: 'none',
         contentPaddingTop: 'none',
-        contentPaddingBottom: 'none'
+        contentPaddingBottom: 'none',
+        borderColor: 'transparent',
+        borderRadius: 0,
+        borderWidth: 0,
+        marginBottom: 0
       },
       controlRef: ref,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
-        children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxItem.default, { ...item,
-          selected: item.id === selectedId,
-          isChild: true,
-          LinkRouter: LinkRouter,
-          linkRouterProps: linkRouterProps,
-          ...(index === 0 && {
-            prevItemRef
-          }),
-          ...(index === items.length - 1 && {
-            nextItemRef
-          }),
-          ...(index === items.length - 1 && {
-            onBlur: onLastItemBlur
-          })
-        }, item.label))
+        children: items.map((item, index) => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxItem.default, {
+            id: item.id ?? item.label,
+            ...item,
+            selected: item.id && item.id === selectedId || item.label && item.label === selectedId,
+            isChild: true,
+            LinkRouter: LinkRouter,
+            linkRouterProps: linkRouterProps,
+            ...(index === 0 && {
+              prevItemRef
+            }),
+            ...(index === items.length - 1 && {
+              nextItemRef
+            }),
+            ...(index === items.length - 1 && {
+              onBlur: onLastItemBlur
+            })
+          }, item.label);
+        })
       })
     })
   });

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

@@ -316,7 +316,12 @@ PriceLockup.propTypes = { ...selectedSystemPropTypes,
    *
    * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
    */
-  a11yText: _propTypes.default.string
+  a11yText: _propTypes.default.string,
+
+  /**
+   * `PriceLockup` tokens
+   */
+  tokens: (0, _componentsBase.getTokensPropType)('PriceLockup')
 };
 var _default = PriceLockup;
 exports.default = _default;

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

@@ -124,7 +124,10 @@ const BlockQuote = _ref8 => {
     return /*#__PURE__*/_jsx(Typography, {
       tokens: {
         color,
-        fontWeight: '500'
+        fontName: linkFontName,
+        fontSize: linkFontSize,
+        fontWeight: linkFontWeight,
+        lineHeight: linkLineHeight
       },
       children: link
     });

package/lib-module/Card/Card.js

@@ -12,6 +12,7 @@ const selectCardBaseTokens = _ref => {
   let {
     backgroundColor,
     borderColor,
+    gradient,
     borderWidth,
     borderRadius,
     shadow,
@@ -20,6 +21,7 @@ const selectCardBaseTokens = _ref => {
   return {
     backgroundColor,
     borderColor,
+    gradient,
     borderWidth,
     borderRadius,
     shadow,

package/lib-module/DatePicker/DatePicker.js

@@ -99,6 +99,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     tokens,
     variant = {},
     validation,
+    disabled,
     ...rest
   } = _ref;
   const [inputDate, setInputDate] = useState(date instanceof moment ? date : undefined);
@@ -123,21 +124,23 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   };
 
   const handleFocus = event => {
-    if (event.target.tagName === 'INPUT') {
+    if (event.target.tagName === 'INPUT' && !disabled) {
       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();
+    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();
+      }
     }
   };
 
@@ -280,8 +283,10 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
         label: ((_dictionary$copy = dictionary[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription) ?? label,
         value: inputText,
         validation: validation,
+        inactive: disabled,
         children: /*#__PURE__*/_jsx(SingleDatePicker, {
           date: inputDate,
+          disabled: disabled,
           onDateChange: onChange,
           focused: isFocused,
           onFocusChange: onFocusChange,
@@ -378,7 +383,12 @@ DatePicker.propTypes = { ...selectedSystemPropTypes,
   /**
    * 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 = {
   copy: 'en',
@@ -391,6 +401,7 @@ DatePicker.defaultProps = {
   hintPosition: 'inline',
   tooltip: undefined,
   onDateChange: () => {},
-  validation: undefined
+  validation: undefined,
+  disabled: false
 };
 export default DatePicker;

package/lib-module/ExpandCollapseMini/ExpandCollapseMini.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { ExpandCollapse, useThemeTokens } from '@telus-uds/components-base';
+import { ExpandCollapse } from '@telus-uds/components-base';
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
 import { jsx as _jsx } from "react/jsx-runtime";
 const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -10,12 +10,6 @@ const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
     tokens,
     ...rest
   } = _ref;
-  const {
-    variant
-  } = rest;
-  const {
-    borderWidth
-  } = useThemeTokens('ExpandCollapseMini', tokens, variant);
 
   const handleChange = (openPanels, event) => {
     if (typeof onToggle === 'function') {
@@ -25,9 +19,6 @@ const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
   };
 
   return /*#__PURE__*/_jsx(ExpandCollapse, {
-    tokens: {
-      borderWidth
-    },
     onChange: handleChange,
     children: expandProps => /*#__PURE__*/_jsx(ExpandCollapse.Panel, { ...expandProps,
       panelId: "ExpandCollapseMiniPanel",
@@ -35,7 +26,11 @@ const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
         mini: true
       },
       controlTokens: {
-        icon: null
+        // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
+        icon: null,
+        borderColor: 'transparent',
+        textLine: 'none',
+        backgroundColor: 'transparent'
       } // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,

package/lib-module/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -15,7 +15,22 @@ const presentationOnly = {
 
 };
 
-const ExpandCollapseMiniControl = _ref => {
+const selectLinkTokens = _ref => {
+  let {
+    color,
+    textLine,
+    lineHeight,
+    fontSize
+  } = _ref;
+  return {
+    color,
+    textLine,
+    blockLineHeight: lineHeight,
+    blockFontSize: fontSize
+  };
+};
+
+const ExpandCollapseMiniControl = _ref2 => {
   let {
     pressableState,
     collapseTitle,
@@ -24,16 +39,25 @@ const ExpandCollapseMiniControl = _ref => {
     tokens,
     variant = {},
     ...rest
-  } = _ref;
+  } = _ref2;
   const {
     expanded,
-    hover
-  } = pressableState || {};
+    hover,
+    focus
+  } = pressableState || {}; // we only want focus outline when focusing, if user is pressing we don't want the border.
+
+  const {
+    outerBorderColor
+  } = useThemeTokens('Link', {}, {}, {
+    focus
+  });
   const {
     size,
-    icon
+    icon,
+    ...themeTokens
   } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, {
-    expanded
+    expanded,
+    focus
   }); // Choose hover styles when any part of Control is hoverred
 
   const appearance = { ...variant,
@@ -61,7 +85,8 @@ const ExpandCollapseMiniControl = _ref => {
     icon: icon,
     iconPosition: iconPosition,
     tokens: linkState => ({ ...getTokens(linkState),
-      outerBorderWidth: 0
+      ...selectLinkTokens(themeTokens),
+      outerBorderColor
     }),
     ...presentationOnly,
     ...selectProps(rest),

package/lib-module/Footnote/FootnoteLink.js

@@ -122,7 +122,6 @@ FootnoteLink.propTypes = { ...selectedSystemPropTypes,
   fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 FootnoteLink.defaultProps = {
-  copy: 'en',
-  fontSize: 'smaller'
+  copy: 'en'
 };
 export default FootnoteLink;