@telus-uds/components-web 2.10.0 → 2.11.0

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.1",
+    "@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.34.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.10.0"
+  "version": "2.11.0"
 }

package/src/BlockQuote/BlockQuote.jsx

@@ -110,7 +110,19 @@ 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 = () => {

package/src/DatePicker/DatePicker.jsx

@@ -91,6 +91,7 @@ const DatePicker = forwardRef(
       tokens,
       variant = {},
       validation,
+      disabled,
       ...rest
     },
     ref
@@ -110,20 +111,22 @@ const DatePicker = forwardRef(
       setIsClickedInside(false)
     }
     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()
+        }
       }
     }
     const onChange = (value) => {
@@ -253,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}
@@ -347,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 = {
@@ -361,7 +370,8 @@ DatePicker.defaultProps = {
   hintPosition: 'inline',
   tooltip: undefined,
   onDateChange: () => {},
-  validation: undefined
+  validation: undefined,
+  disabled: false
 }
 
 export default DatePicker

package/src/Listbox/GroupControl.jsx

@@ -1,64 +1,81 @@
 import React from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
-import { Icon, Spacer, useThemeTokens } from '@telus-uds/components-base'
+import { Icon, Spacer, useThemeTokens, useListboxContext } from '@telus-uds/components-base'
 
-const StyledControlWrapper = styled.div(({ focus, tokens }) => ({
-  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
-  fontSize: tokens.groupFontSize,
-  color: tokens.groupColor,
-  textDecoration: tokens.itemTextDecoration,
-  backgroundColor: tokens.groupBackgroundColor,
-  outline: tokens.itemOutline,
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'space-between',
-  ...(focus
-    ? {
-        border: `${tokens.groupBorderWidth} solid ${tokens.groupBorderColor}`,
-        borderRadius: tokens.groupBorderRadius,
-        paddingLeft: `calc(${tokens.groupPaddingLeft}px - ${tokens.groupBorderWidth}px)`,
-        paddingRight: `calc(${tokens.groupPaddingRight}px - ${tokens.groupBorderWidth}px)`,
-        paddingTop: `calc(${tokens.groupPaddingTop}px - ${tokens.groupBorderWidth}px)`,
-        paddingBottom: `calc(${tokens.groupPaddingBottom}px - ${tokens.groupBorderWidth}px)`
-      }
-    : {
-        paddingLeft: tokens.groupPaddingLeft,
-        paddingRight: tokens.groupPaddingRight,
-        paddingTop: tokens.groupPaddingTop,
-        paddingBottom: tokens.groupPaddingBottom
-      })
-}))
+const StyledControlWrapper = styled.div(
+  ({
+    groupFontName,
+    groupFontWeight,
+    groupFontSize,
+    groupColor,
+    groupBackgroundColor,
+    groupBorderColor,
+    groupBorderWidth,
+    groupBorderRadius,
+    groupPaddingLeft,
+    groupPaddingRight,
+    groupPaddingTop,
+    groupPaddingBottom,
+    itemTextDecoration,
+    itemOutline,
+    groupHeight
+  }) => ({
+    fontFamily: `${groupFontName}${groupFontWeight}normal`,
+    fontSize: groupFontSize,
+    color: groupColor,
+    textDecoration: itemTextDecoration,
+    backgroundColor: groupBackgroundColor,
+    outline: itemOutline,
+    width: '100%',
+    height: groupHeight,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    boxSizing: 'border-box',
+    border: `${groupBorderWidth}px solid ${groupBorderColor}`,
+    borderRadius: groupBorderRadius,
+    paddingLeft: groupPaddingLeft - groupBorderWidth,
+    paddingRight: groupPaddingRight - groupBorderWidth,
+    paddingTop: groupPaddingTop - groupBorderWidth,
+    paddingBottom: groupPaddingBottom - groupBorderWidth
+  })
+)
 
-const GroupControl = ({ expanded, pressed, hover, focus, current, label }) => {
+const GroupControl = ({ expanded, pressed, hover, focus, label, id }) => {
+  const { selectedId, setSelectedId } = useListboxContext()
   const tokens = useThemeTokens(
-    'ListBox',
+    'Listbox',
     {},
     {},
     {
       expanded,
       pressed,
       hover,
-      current,
+      current: selectedId === id && id !== undefined,
       focus
     }
   )
 
   return (
-    <StyledControlWrapper {...{ focus, tokens }}>
+    <StyledControlWrapper onClick={() => setSelectedId(id)} {...tokens}>
       {label}
       <Spacer space={1} direction="row" />
-      <Icon icon={tokens.groupIcon} variant={{ size: 'micro' }} />
+      <Icon
+        icon={tokens.groupIcon}
+        tokens={{ color: tokens.groupColor }}
+        variant={{ size: 'micro' }}
+      />
     </StyledControlWrapper>
   )
 }
 
 GroupControl.propTypes = {
+  id: PropTypes.string,
   expanded: PropTypes.bool,
   pressed: PropTypes.bool,
   hover: PropTypes.bool,
   focus: PropTypes.bool,
-  current: PropTypes.bool,
   label: PropTypes.string
 }
 

package/src/Listbox/Listbox.jsx

@@ -1,11 +1,15 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { ExpandCollapse, withLinkRouter } from '@telus-uds/components-base'
+import {
+  ExpandCollapse,
+  useThemeTokens,
+  withLinkRouter,
+  ListboxContext
+} from '@telus-uds/components-base'
 import ListboxGroup from './ListboxGroup'
 import ListboxItem from './ListboxItem'
 import DropdownOverlay from './ListboxOverlay'
-import resolveItemSelection from '../NavigationBar/resolveItemSelection'
 
 const StyledList = styled.ul({
   margin: 0,
@@ -26,12 +30,18 @@ const Listbox = ({
   items = [],
   firstItemRef = null, // focus will be moved to this one once within the menu
   parentRef = null, // to return focus to after leaving the last menu item
-  selectedId,
+  selectedId: defaultSelectedId,
   LinkRouter,
   itemRouterProps,
-  onClose
+  onClose,
+  variant,
+  tokens
 }) => {
-  const initialOpen = getInitialOpen(items, selectedId)
+  const initialOpen = getInitialOpen(items, defaultSelectedId)
+
+  const [selectedId, setSelectedId] = useState(defaultSelectedId)
+
+  const { minHeight, minWidth } = useThemeTokens('Listbox', variant, tokens)
 
   // We need to keep track of each item's ref in order to be able to
   // focus on a specific item via keyboard navigation
@@ -78,53 +88,52 @@ const Listbox = ({
   }, [onClose, handleKeydown])
 
   return (
-    <ExpandCollapse initialOpen={initialOpen} maxOpen={1}>
-      {(expandProps) => (
-        <StyledList role="listbox">
-          {items.map((item, index) => {
-            const { id, label, items: nestedItems } = item
-            const { itemId, selected } = resolveItemSelection(
-              { id, label, items: nestedItems },
-              selectedId
-            )
+    <ListboxContext.Provider value={{ selectedId, setSelectedId }}>
+      <ExpandCollapse initialOpen={initialOpen} maxOpen={1}>
+        {(expandProps) => (
+          <StyledList role="listbox" style={{ minHeight, minWidth }}>
+            {items.map((item, index) => {
+              const { id, label, items: nestedItems } = item
+              const itemId = id ?? label
 
-            // Give `firstItemRef` to the first focusable item
-            const itemRef =
-              (index === 0 && !itemId !== selectedId) || (index === 1 && items[0].id === selectedId)
-                ? firstItemRef
-                : (ref) => {
-                    itemRefs.current[index] = ref
-                    return ref
-                  }
+              // Give `firstItemRef` to the first focusable item
+              const itemRef =
+                (index === 0 && !itemId !== selectedId) ||
+                (index === 1 && items[0].id === selectedId)
+                  ? firstItemRef
+                  : (ref) => {
+                      itemRefs.current[index] = ref
+                      return ref
+                    }
 
-            return nestedItems ? (
-              <ListboxGroup
-                {...item}
-                selectedId={selectedId}
-                key={itemId}
-                expandProps={expandProps}
-                LinkRouter={LinkRouter}
-                itemRouterProps={itemRouterProps}
-                prevItemRef={itemRefs.current[index - 1] ?? null}
-                nextItemRef={itemRefs.current[index + 1] ?? null}
-                ref={itemRef}
-              />
-            ) : (
-              <ListboxItem
-                {...item}
-                selected={selected}
-                key={itemId}
-                LinkRouter={LinkRouter}
-                itemRouterProps={itemRouterProps}
-                prevItemRef={itemRefs.current[index - 1] ?? null}
-                nextItemRef={itemRefs.current[index + 1] ?? null}
-                ref={itemRef}
-              />
-            )
-          })}
-        </StyledList>
-      )}
-    </ExpandCollapse>
+              return nestedItems ? (
+                <ListboxGroup
+                  {...item}
+                  expandProps={expandProps}
+                  LinkRouter={LinkRouter}
+                  itemRouterProps={itemRouterProps}
+                  prevItemRef={itemRefs.current[index - 1] ?? null}
+                  nextItemRef={itemRefs.current[index + 1] ?? null}
+                  ref={itemRef}
+                  key={itemId}
+                />
+              ) : (
+                <ListboxItem
+                  {...item}
+                  key={itemId}
+                  id={itemId}
+                  LinkRouter={LinkRouter}
+                  itemRouterProps={itemRouterProps}
+                  prevItemRef={itemRefs.current[index - 1] ?? null}
+                  nextItemRef={itemRefs.current[index + 1] ?? null}
+                  ref={itemRef}
+                />
+              )
+            })}
+          </StyledList>
+        )}
+      </ExpandCollapse>
+    </ListboxContext.Provider>
   )
 }
 

package/src/Listbox/ListboxGroup.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/require-default-props */
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { ExpandCollapse, withLinkRouter } from '@telus-uds/components-base'
+import { ExpandCollapse, withLinkRouter, useListboxContext } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import ListboxItem from './ListboxItem'
 import GroupControl from './GroupControl'
@@ -31,7 +31,6 @@ const ListboxGroup = forwardRef(
       id,
       label,
       items,
-      selectedId,
       LinkRouter,
       linkRouterProps,
       expandProps,
@@ -41,8 +40,9 @@ const ListboxGroup = forwardRef(
     },
     ref
   ) => {
-    // TODO: implement keyboard navigation via refs for grouped items separately here
+    const { selectedId } = useListboxContext()
 
+    // TODO: implement keyboard navigation via refs for grouped items separately here
     return (
       <StyledGroupWrapper role="option">
         <ExpandCollapse.Panel
@@ -52,34 +52,49 @@ const ListboxGroup = forwardRef(
             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) => <GroupControl {...controlProps} label={label} />}
+          control={(controlProps) => (
+            <GroupControl id={id ?? label} {...controlProps} label={label} />
+          )}
           {...expandProps}
           tokens={{
             contentPaddingLeft: 'none',
             contentPaddingRight: 'none',
             contentPaddingTop: 'none',
-            contentPaddingBottom: 'none'
+            contentPaddingBottom: 'none',
+            borderColor: 'transparent',
+            borderRadius: 0,
+            borderWidth: 0,
+            marginBottom: 0
           }}
           controlRef={ref}
         >
           <StyledList>
-            {items.map((item, index) => (
-              <ListboxItem
-                key={item.label}
-                {...item}
-                selected={item.id === selectedId}
-                isChild
-                LinkRouter={LinkRouter}
-                linkRouterProps={linkRouterProps}
-                {...(index === 0 && { prevItemRef })}
-                {...(index === items.length - 1 && { nextItemRef })}
-                {...(index === items.length - 1 && { onBlur: onLastItemBlur })}
-              />
-            ))}
+            {items.map((item, index) => {
+              return (
+                <ListboxItem
+                  key={item.label}
+                  id={item.id ?? item.label}
+                  {...item}
+                  selected={
+                    (item.id && item.id === selectedId) || (item.label && item.label === selectedId)
+                  }
+                  isChild
+                  LinkRouter={LinkRouter}
+                  linkRouterProps={linkRouterProps}
+                  {...(index === 0 && { prevItemRef })}
+                  {...(index === items.length - 1 && { nextItemRef })}
+                  {...(index === items.length - 1 && { onBlur: onLastItemBlur })}
+                />
+              )
+            })}
           </StyledList>
         </ExpandCollapse.Panel>
       </StyledGroupWrapper>