@telus-uds/components-web 3.0.1 → 3.2.0

package/src/NavigationBar/NavigationBar.jsx

@@ -4,11 +4,13 @@ import {
   selectSystemProps,
   StackView,
   Typography,
+  useHash,
+  useInputValue,
   useResponsiveProp,
   withLinkRouter
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, scrollToAnchor } from '../utils'
 import NavigationItem from './NavigationItem'
 import NavigationSubMenu from './NavigationSubMenu'
 import collapseItems from './collapseItems'
@@ -34,16 +36,37 @@ const NavigationBar = React.forwardRef(
       heading,
       headingLevel = 'h1',
       items,
-      onChange = () => {},
+      onChange,
       selectedId,
+      value,
       LinkRouter,
       linkRouterProps,
       ...rest
     },
     ref
   ) => {
+    const { currentValue, setValue } = useInputValue({ value, initialValue: selectedId, onChange })
+
+    useHash(
+      (hash, event) => {
+        let hashItem = hash && items.find(({ href }) => hash === href)
+        if (!hashItem) {
+          const parentItem = items.find(({ items: parentItems }) =>
+            parentItems?.some(({ href }) => hash === href)
+          )
+          hashItem = parentItem?.items.find(({ href }) => hash === href)
+        }
+        const hashId = hashItem && (hashItem.id || hashItem.label)
+        if (hashId) setValue(hashId, event)
+      },
+      [items, setValue]
+    )
+
     const direction = useResponsiveProp({ xs: 'column', sm: 'row' })
-    const itemsForViewport = useResponsiveProp({ xs: collapseItems(items, selectedId), lg: items })
+    const itemsForViewport = useResponsiveProp({
+      xs: collapseItems(items, currentValue),
+      lg: items
+    })
     const openOverlayRef = React.useRef(null)
     const [openSubMenuId, setOpenSubMenuId] = React.useState(null)
     const handleSubMenuClose = (event) => {
@@ -161,14 +184,28 @@ const NavigationBar = React.forwardRef(
             const handleClick = (event) => {
               if (nestedItems) {
                 setOpenSubMenuId(openSubMenuId !== itemId ? itemId : null)
+                return
+              }
+              if (href?.startsWith('#')) {
+                scrollToAnchor(href, event, () => setValue(itemId, event))
+              } else {
+                setValue(itemId, event)
               }
               onClick?.(event)
-              onChange?.(itemId, event)
             }
 
             const ItemComponent = nestedItems ? NavigationSubMenu : NavigationItem
             const isOpen = itemId === openSubMenuId
 
+            const scrollableNestedItems =
+              nestedItems?.map((item) => ({
+                ...item,
+                onPress: (event) => {
+                  const nestedItemId = item.id ?? item.label
+                  scrollToAnchor(item.href, event, () => setValue(nestedItemId, event))
+                }
+              })) ?? nestedItems
+
             return (
               <ItemComponent
                 ref={itemRef}
@@ -176,16 +213,16 @@ const NavigationBar = React.forwardRef(
                 href={href}
                 onClick={handleClick}
                 // TODO: refactor to pass selected ID via context
-                selectedId={selectedId}
+                selectedId={currentValue}
                 index={index}
                 LinkRouter={ItemLinkRouter}
                 linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
-                items={nestedItems}
-                selected={itemId === selectedId}
+                items={scrollableNestedItems}
+                selected={itemId === currentValue}
                 itemsContainerRef={itemsRef}
                 {...itemRest}
-                {...(nestedItems && { isOpen })}
-                {...(nestedItems && isOpen && { openOverlayRef })}
+                {...(scrollableNestedItems && { isOpen })}
+                {...(scrollableNestedItems && isOpen && { openOverlayRef })}
               >
                 {label}
               </ItemComponent>
@@ -207,7 +244,7 @@ NavigationBar.propTypes = {
    *
    * Each `item` object must contain:
    *  - `heading` - user-facing text in the tab link
-   *  - `href` - the URL of the page linked to. Do not use hash links, for content within a page, use `Tabs`.
+   *  - `href` - the URL of the page linked to.
    *  - `id` - a stable, unique identifier of the page within the set. Not written into the HTML.
    */
   items: PropTypes.arrayOf(
@@ -242,13 +279,17 @@ NavigationBar.propTypes = {
    */
   headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
   /**
-   * Matches the `id` property of the item in `items` corresponding to the current page
+   * Initial selected item ID
    */
-  selectedId: PropTypes.string.isRequired,
+  selectedId: PropTypes.string,
   /**
    * Optional function to be called on pressing a link
    */
   onChange: PropTypes.func,
+  /**
+   * Controlled value for selected item ID
+   */
+  value: PropTypes.string,
   /**
    * Accesibility role for stackview
    */

package/src/Progress/ProgressBar.jsx

@@ -37,7 +37,8 @@ const Gradient = styled.div.attrs({ 'data-testid': 'ProgressBar-Gradient' })(
  * `gradient` is being used here to provide gradient filling.
  *
  */
-const ProgressBar = React.forwardRef(({ percentage, tokens, variant, ...rest }, ref) => {
+
+const ProgressBar = React.forwardRef(({ percentage, tokens, variant, offset, ...rest }, ref) => {
   const themeTokens = useThemeTokens('ProgressBar', tokens, variant)
   const selectedProps = selectProps(rest)
 
@@ -47,6 +48,7 @@ const ProgressBar = React.forwardRef(({ percentage, tokens, variant, ...rest },
       tokens={tokens}
       variant={variant}
       ref={ref}
+      offset={offset}
       {...selectedProps}
     >
       {themeTokens.gradient && <Gradient {...themeTokens} />}
@@ -69,7 +71,14 @@ ProgressBar.propTypes = {
   /**
    * ProgressBar variant.
    */
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  /**
+   * Offset position.
+   */
+  offset: PropTypes.shape({
+    items: PropTypes.number,
+    current: PropTypes.number
+  })
 }
 
 export default ProgressBar

package/src/QuantitySelector/QuantitySelector.jsx

@@ -96,7 +96,7 @@ const QuantitySelector = React.forwardRef(
     }
 
     const renderLabel = () =>
-      label ? (
+      label || hint ? (
         <InputLabel
           forId={id}
           label={label}

package/src/ResponsiveImage/ResponsiveImage.jsx

@@ -2,9 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { selectSystemProps } from '@telus-uds/components-base'
 import { viewports } from '@telus-uds/system-constants'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, contentfulProps } from '../utils'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, contentfulProps])
 
 const staticStyles = {
   image: { display: 'block', width: '100%' }
@@ -14,9 +14,12 @@ const staticStyles = {
  * Provide different image sources for different screen sizes.
  */
 const ResponsiveImage = React.forwardRef(
-  ({ xsSrc, smSrc, mdSrc, lgSrc, xlSrc, fallbackSrc, alt, loading = 'eager', ...rest }, ref) => {
+  (
+    { xsSrc, smSrc, mdSrc, lgSrc, xlSrc, fallbackSrc, alt, loading = 'eager', dataSet, ...rest },
+    ref
+  ) => {
     return (
-      <picture {...selectProps(rest)} ref={ref}>
+      <picture {...selectProps(rest)} ref={ref} {...dataSet}>
         <source srcSet={xlSrc} media={`(min-width: ${viewports.map.get(viewports.xl)}px)`} />
         <source srcSet={lgSrc} media={`(min-width: ${viewports.map.get(viewports.lg)}px)`} />
         <source srcSet={mdSrc} media={`(min-width: ${viewports.map.get(viewports.md)}px)`} />
@@ -65,7 +68,11 @@ ResponsiveImage.propTypes = {
    * @default 'eager'
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
    */
-  loading: PropTypes.oneOf(['eager', 'lazy'])
+  loading: PropTypes.oneOf(['eager', 'lazy']),
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: PropTypes.object
 }
 
 export default ResponsiveImage

package/src/Video/ControlBar/Controls/VideoProgressBar/VideoProgressBar.jsx

@@ -119,6 +119,8 @@ const VideoProgressBar = ({
     thumbBackground,
     timestampMarginLeft,
     timestampMarginRight,
+    remainingTimestampMarginLeft,
+    remainingTimestampMarginRight,
     trackGradientStart,
     trackGradientEnd,
     rangeBackground
@@ -166,7 +168,9 @@ const VideoProgressBar = ({
         tabIndex="-1"
         {...sharedProps}
       />
-      <StyledTimestamp>
+      <StyledTimestamp
+        margin={`0 ${remainingTimestampMarginRight}px 0 ${remainingTimestampMarginLeft}px`}
+      >
         <Typography variant={{ inverse: true }}>{remainingTimestamp}</Typography>
       </StyledTimestamp>
     </ProgressBarContainer>

package/src/utils/index.js

@@ -1,4 +1,4 @@
-import { htmlAttrs } from '@telus-uds/components-base'
+import { htmlAttrs, contentfulProps } from '@telus-uds/components-base'
 import { warn, deprecate } from './logger'
 import { transformGradient } from './transforms'
 import useTypographyTheme from './useTypographyTheme'
@@ -7,10 +7,12 @@ import ssrStyles from './ssr'
 import isElementFocusable from './isElementFocusable'
 import renderStructuredContent from './renderStructuredContent'
 import useOverlaidPosition from './useOverlaidPosition'
+import scrollToAnchor from './scrollToAnchor'
 
 export {
   deprecate,
   htmlAttrs,
+  contentfulProps,
   transformGradient,
   useTypographyTheme,
   warn,
@@ -18,5 +20,6 @@ export {
   renderStructuredContent,
   ssrStyles,
   isElementFocusable,
-  useOverlaidPosition
+  useOverlaidPosition,
+  scrollToAnchor
 }

package/src/utils/scrollToAnchor.js

@@ -0,0 +1,18 @@
+/**
+ * Scrolls smoothly to the anchor element specified by the href.
+ *
+ * @param {string} href - The href attribute value, expected to be an anchor link starting with '#'.
+ * @param {Event} event - The event object associated with the click or navigation action.
+ * @param {Function} onAfterScroll - A callback function to be executed after the scroll action is completed.
+ */
+const scrollToAnchor = (href, event, onAfterScroll) => {
+  if (href?.startsWith('#')) {
+    event.preventDefault()
+    const target = document.getElementById(href.slice(1))
+    target?.scrollIntoView({ behavior: 'smooth' })
+    window.location.hash = href
+    onAfterScroll(event)
+  }
+}
+
+export default scrollToAnchor