@telus-uds/components-web 3.0.1 → 3.2.0

package/CHANGELOG.md

@@ -1,12 +1,41 @@
 # Change Log - @telus-uds/components-web
 
-<!-- This log was last generated on Sat, 23 Nov 2024 01:38:59 GMT and should not be manually modified. -->
+<!-- This log was last generated on Fri, 06 Dec 2024 02:03:26 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 3.2.0
+
+Fri, 06 Dec 2024 02:03:26 GMT
+
+### Minor changes
+
+- `NavigationBar`: enable hash navigation (guillermo.peitzner@telus.com)
+- `ChevronLink`, `Search` & `ResponsiveImage`: new `dataSet` prop added to the components to allow the capability to pass data (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v2.2.0
+
+### Patches
+
+- `QuantitySelector`: render hint when no label is provided (guillermo.peitzner@telus.com)
+
+## 3.1.0
+
+Mon, 02 Dec 2024 20:29:26 GMT
+
+### Minor changes
+
+- `Progress`: Added rules for `subtle` and `inverse` variants. Deprecated `inactive` and `negative` appearances and moved them to `style` appearances. Enabled `offset` object for controlling the position of the `ProgressBar` component. (jaime.tuyuc@telus.com)
+- `Blockquote`: refactor to use media query stylesheet (Mauricio.BatresMontejo@telus.com)
+- `CountDown`: refactor component to use media-query-stylesheet (Mauricio.BatresMontejo@telus.com)
+- `ChevronLink`, `Search` & `ResponsiveImage`: new contentful props data-contentful-field-id and data-contentful-entry-id added to the components (35577399+JoshHC@users.noreply.github.com)
+- `Modal`: update component to enable heading bottom border and content spacing (eduardo.pereira1@telus.com)
+- `Video`: new tokens remainingTimestampMarginRight and remainingTimestampMarginLeft added to match with the visual design intention (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v2.1.0
+- Bump @telus-uds/system-theme-tokens to v3.1.0
+
 ## 3.0.1
 
-Sat, 23 Nov 2024 01:38:59 GMT
+Sat, 23 Nov 2024 01:40:21 GMT
 
 ### Patches
 

package/lib/BlockQuote/BlockQuote.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link, selectSystemProps, StackView, Typography, useThemeTokens, withLinkRouter, useViewport, getTokensPropType } from '@telus-uds/components-base';
+import { Link, selectSystemProps, StackView, Typography, useTheme, useThemeTokens, useResponsiveThemeTokens, createMediaQueryStyles, withLinkRouter, useViewport, getTokensPropType, StyleSheet } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import { htmlAttrs, transformGradient } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -48,6 +48,12 @@ const QuoteContainer = /*#__PURE__*/styled.div.withConfig({
   } = _ref7;
   return `${marginBottom}px`;
 });
+const selectTitleHeadingTokens = themeTokens => ({
+  fontSize: themeTokens.titleHeadingFontSize,
+  fontName: themeTokens.titleHeadingFontName,
+  fontWeight: themeTokens.titleHeadingFontWeight,
+  lineHeight: themeTokens.titleHeadingLineHeight
+});
 const BlockQuote = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     children,
@@ -62,6 +68,15 @@ const BlockQuote = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     ...rest
   } = _ref8;
   const viewport = useViewport();
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = useTheme();
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
+  const themeTokens = useTokens('BlockQuote', tokens, variant, !enableMediaQueryStyleSheet && {
+    viewport
+  });
   const {
     color,
     paddingTop,
@@ -83,16 +98,46 @@ const BlockQuote = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     linkFontName,
     linkFontWeight,
     linkLineHeight
-  } = useThemeTokens('BlockQuote', tokens, variant, {
-    viewport
-  });
+  } = themeTokens;
+  let titleHeadingStyles;
+  let titleHeadingMediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const {
+      transformedTitleHeadingThemeTokens
+    } = Object.entries(themeTokens).reduce((acc, _ref9) => {
+      let [vp, viewportTokens] = _ref9;
+      acc.transformedTitleHeadingThemeTokens[vp] = {
+        fontSize: viewportTokens.titleHeadingFontSize,
+        fontName: viewportTokens.titleHeadingFontName,
+        fontWeight: viewportTokens.titleHeadingFontWeight,
+        lineHeight: viewportTokens.titleHeadingLineHeight
+      };
+      return acc;
+    }, {
+      transformedTitleHeadingThemeTokens: {}
+    });
+    const titleHeadingMediaQueryStyles = createMediaQueryStyles(transformedTitleHeadingThemeTokens);
+    const {
+      ids,
+      styles
+    } = StyleSheet.create({
+      titleHeading: {
+        ...selectTitleHeadingTokens(themeTokens[viewport]),
+        ...titleHeadingMediaQueryStyles
+      }
+    });
+    titleHeadingStyles = styles.titleHeading;
+    titleHeadingMediaIds = ids.titleHeading;
+  } else {
+    titleHeadingStyles = {
+      fontSize: titleHeadingFontSize,
+      fontName: titleHeadingFontName,
+      fontWeight: titleHeadingFontWeight,
+      lineHeight: titleHeadingLineHeight
+    };
+  }
   const mappedTextSize = textStyle === 'heading' ? 'h3' : textStyle;
-  const titleTokens = textStyle === 'heading' ? {
-    fontSize: titleHeadingFontSize,
-    fontName: titleHeadingFontName,
-    fontWeight: titleHeadingFontWeight,
-    lineHeight: titleHeadingLineHeight
-  } : {
+  const titleTokens = textStyle === 'heading' ? titleHeadingStyles : {
     fontSize: titleFontSize,
     fontName: titleFontName,
     fontWeight: titleFontWeight,
@@ -134,6 +179,7 @@ const BlockQuote = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
         color,
         ...titleTokens
       },
+      media: titleHeadingMediaIds,
       variant: {
         size: mappedTextSize
       },

package/lib/Countdown/Countdown.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Spacer, StackView, Typography, selectSystemProps, useViewport, useThemeTokens, applyTextStyles, getTokensPropType } from '@telus-uds/components-base';
+import { Spacer, StackView, Typography, selectSystemProps, useViewport, useTheme, useThemeTokens, useResponsiveThemeTokens, createMediaQueryStyles, applyTextStyles, getTokensPropType, StyleSheet } from '@telus-uds/components-base';
 import { viewports } from '@telus-uds/system-constants';
 import styled from 'styled-components';
 // Reading these from the RN palette since they will be used to generate
@@ -87,12 +87,82 @@ const Countdown = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   if (noDivider && !label) {
     throw new Error('`noDivider` variant can only be used with `label` enabled!');
   }
-  const themeTokens = useThemeTokens('Countdown', tokens, variant, {
+  const {
+    themeOptions
+  } = useTheme();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
+  const themeTokens = useTokens('Countdown', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
   const segmentFontSize = themeTokens.textFontSize;
   const semanticGradient = themeTokens.containerGradient && transformGradient(themeTokens.containerGradient);
   const mainTextTokens = getMainTextTokens(themeTokens);
+  const labelTokens = getLabelTokens(themeTokens);
+  let labelStyles;
+  let labelMediaIds;
+  let mainTextStyles;
+  let mainTextMediaIds;
+  let containerStyles;
+  let containerMediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const {
+      transformedLabelThemeTokens,
+      transformedMainTextThemeTokens,
+      transformedContainerThemeTokens
+    } = Object.entries(themeTokens).reduce((acc, _ref4) => {
+      let [vp, viewportTokens] = _ref4;
+      acc.transformedLabelThemeTokens[vp] = {
+        fontSize: viewportTokens.labelFontSize,
+        lineHeight: viewportTokens.labelLineHeight
+      };
+      acc.transformedMainTextThemeTokens[vp] = {
+        fontSize: viewportTokens.textFontSize,
+        lineHeight: viewportTokens.textLineHeight
+      };
+      acc.transformedContainerThemeTokens[vp] = {
+        containerPaddingBottomTop: viewportTokens.containerPaddingBottomTop,
+        containerPaddingLeftRight: viewportTokens.containerPaddingLeftRight
+      };
+      return acc;
+    }, {
+      transformedLabelThemeTokens: {},
+      transformedMainTextThemeTokens: {},
+      transformedContainerThemeTokens: {}
+    });
+    const labelMediaQueryStyles = createMediaQueryStyles(transformedLabelThemeTokens);
+    const mainTestMediaQueryStyles = createMediaQueryStyles(transformedMainTextThemeTokens);
+    const containerMediaQueryStyles = createMediaQueryStyles(transformedContainerThemeTokens);
+    const {
+      ids,
+      styles
+    } = StyleSheet.create({
+      label: {
+        ...themeTokens[viewport],
+        ...labelMediaQueryStyles
+      },
+      mainText: {
+        ...themeTokens[viewport],
+        ...mainTestMediaQueryStyles
+      },
+      container: {
+        ...themeTokens[viewport],
+        ...containerMediaQueryStyles
+      }
+    });
+    labelStyles = getLabelTokens(styles.label);
+    labelMediaIds = ids.label;
+    mainTextStyles = getMainTextTokens(styles.mainText);
+    mainTextMediaIds = ids.mainText;
+    containerStyles = styles.container;
+    containerMediaIds = ids.container;
+  } else {
+    labelStyles = labelTokens;
+    mainTextStyles = mainTextTokens;
+    containerStyles = themeTokens;
+  }
   const divider = noDivider === true ?
   /*#__PURE__*/
   // StackView-based subcontainer adds a 1-step space on the each side of the divider
@@ -103,11 +173,12 @@ const Countdown = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     tokens: mainTextTokens,
     children: ":"
   });
-  const labelTokens = getLabelTokens(themeTokens);
   const segmentProps = {
     copy,
-    labelTokens,
-    numberTokens: mainTextTokens,
+    labelTokens: labelStyles,
+    numberTokens: mainTextStyles,
+    labelMediaIds,
+    mainTextMediaIds,
     segmentFontSize,
     variant
   };
@@ -119,8 +190,9 @@ const Countdown = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       variant: variant,
       ...selectProps(rest),
       tabIndex: 0,
-      themeTokens: themeTokens,
+      themeTokens: containerStyles,
       gradient: semanticGradient,
+      media: containerMediaIds,
       children: /*#__PURE__*/_jsxs(StackView, {
         direction: "row",
         space: 1,

package/lib/Countdown/Segment.js

@@ -45,6 +45,8 @@ const Segment = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     labelTokens,
     number,
     numberTokens,
+    labelMediaIds,
+    mainTextMediaIds,
     segmentWidth = 2,
     variant = {}
   } = _ref2;
@@ -70,9 +72,11 @@ const Segment = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       },
       children: [/*#__PURE__*/_jsx(Typography, {
         tokens: numberTokens,
+        media: mainTextMediaIds,
         children: pad(number, segmentWidth)
       }), label && /*#__PURE__*/_jsx(Typography, {
         tokens: labelTokens,
+        media: labelMediaIds,
         children: getCopy(number === 1 ? labelKey : `${labelKey}s`)
       })]
     })
@@ -90,6 +94,8 @@ Segment.propTypes = {
   number: PropTypes.number,
   numberTokens: PropTypes.object,
   segmentWidth: PropTypes.number,
+  labelMediaIds: PropTypes.string,
+  mainTextMediaIds: PropTypes.string,
   variant: countdownVariantPropType
 };
 export default Segment;

package/lib/NavigationBar/NavigationBar.js

@@ -1,9 +1,9 @@
 var _withLinkRouter$propT, _withLinkRouter$propT2, _withLinkRouter$propT3, _withLinkRouter$propT4;
 import React from 'react';
 import PropTypes from 'prop-types';
-import { selectSystemProps, StackView, Typography, useResponsiveProp, withLinkRouter } from '@telus-uds/components-base';
+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';
@@ -33,18 +33,56 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     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(_ref2 => {
+      let {
+        href
+      } = _ref2;
+      return hash === href;
+    });
+    if (!hashItem) {
+      const parentItem = items.find(_ref3 => {
+        let {
+          items: parentItems
+        } = _ref3;
+        return parentItems === null || parentItems === void 0 ? void 0 : parentItems.some(_ref4 => {
+          let {
+            href
+          } = _ref4;
+          return hash === href;
+        });
+      });
+      hashItem = parentItem === null || parentItem === void 0 ? void 0 : parentItem.items.find(_ref5 => {
+        let {
+          href
+        } = _ref5;
+        return 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),
+    xs: collapseItems(items, currentValue),
     lg: items
   });
   const openOverlayRef = React.useRef(null);
@@ -118,7 +156,7 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         heading: headingLevel,
         children: heading
       })
-    }), itemsForViewport === null || itemsForViewport === void 0 ? void 0 : itemsForViewport.map((_ref2, index) => {
+    }), itemsForViewport === null || itemsForViewport === void 0 ? void 0 : itemsForViewport.map((_ref6, index) => {
       let {
         href,
         label,
@@ -129,38 +167,50 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         linkRouterProps: itemLinkRouterProps,
         items: nestedItems,
         ...itemRest
-      } = _ref2;
+      } = _ref6;
       const itemId = id ?? label;
       const handleClick = event => {
         if (nestedItems) {
           setOpenSubMenuId(openSubMenuId !== itemId ? itemId : null);
+          return;
+        }
+        if (href !== null && href !== void 0 && href.startsWith('#')) {
+          scrollToAnchor(href, event, () => setValue(itemId, event));
+        } else {
+          setValue(itemId, event);
         }
         onClick === null || onClick === void 0 || onClick(event);
-        onChange === null || onChange === void 0 || onChange(itemId, event);
       };
       const ItemComponent = nestedItems ? NavigationSubMenu : NavigationItem;
       const isOpen = itemId === openSubMenuId;
+      const scrollableNestedItems = (nestedItems === null || nestedItems === void 0 ? void 0 : nestedItems.map(item => ({
+        ...item,
+        onPress: event => {
+          const nestedItemId = item.id ?? item.label;
+          scrollToAnchor(item.href, event, () => setValue(nestedItemId, event));
+        }
+      }))) ?? nestedItems;
       return /*#__PURE__*/_jsx(ItemComponent, {
         ref: itemRef,
         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 && {
+        ...(scrollableNestedItems && {
           isOpen
         }),
-        ...(nestedItems && isOpen && {
+        ...(scrollableNestedItems && isOpen && {
           openOverlayRef
         }),
         children: label
@@ -177,7 +227,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(PropTypes.shape({
@@ -208,13 +258,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/lib/Progress/ProgressBar.js

@@ -44,11 +44,13 @@ const Gradient = /*#__PURE__*/styled.div.attrs({
  * `gradient` is being used here to provide gradient filling.
  *
  */
+
 const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     percentage,
     tokens,
     variant,
+    offset,
     ...rest
   } = _ref2;
   const themeTokens = useThemeTokens('ProgressBar', tokens, variant);
@@ -58,6 +60,7 @@ const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     tokens: tokens,
     variant: variant,
     ref: ref,
+    offset: offset,
     ...selectedProps,
     children: themeTokens.gradient && /*#__PURE__*/_jsx(Gradient, {
       ...themeTokens
@@ -78,6 +81,13 @@ ProgressBar.propTypes = {
   /**
    * ProgressBar variant.
    */
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  /**
+   * Offset position.
+   */
+  offset: PropTypes.shape({
+    items: PropTypes.number,
+    current: PropTypes.number
+  })
 };
 export default ProgressBar;