@telus-uds/components-web 3.0.1 → 3.2.0

package/lib/QuantitySelector/QuantitySelector.js

@@ -78,7 +78,7 @@ const QuantitySelector = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       setError(getCopy('errors').invalidCharacters);
     }
   };
-  const renderLabel = () => label ? /*#__PURE__*/_jsx(InputLabel, {
+  const renderLabel = () => label || hint ? /*#__PURE__*/_jsx(InputLabel, {
     forId: id,
     label: label,
     hint: hint,

package/lib/ResponsiveImage/ResponsiveImage.js

@@ -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';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, contentfulProps]);
 const staticStyles = {
   image: {
     display: 'block',
@@ -25,11 +25,13 @@ const ResponsiveImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     fallbackSrc,
     alt,
     loading = 'eager',
+    dataSet,
     ...rest
   } = _ref;
   return /*#__PURE__*/_jsxs("picture", {
     ...selectProps(rest),
     ref: ref,
+    ...dataSet,
     children: [/*#__PURE__*/_jsx("source", {
       srcSet: xlSrc,
       media: `(min-width: ${viewports.map.get(viewports.xl)}px)`
@@ -89,6 +91,10 @@ 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/lib/Video/ControlBar/Controls/VideoProgressBar/VideoProgressBar.js

@@ -133,6 +133,8 @@ const VideoProgressBar = _ref5 => {
     thumbBackground,
     timestampMarginLeft,
     timestampMarginRight,
+    remainingTimestampMarginLeft,
+    remainingTimestampMarginRight,
     trackGradientStart,
     trackGradientEnd,
     rangeBackground
@@ -180,6 +182,7 @@ const VideoProgressBar = _ref5 => {
       tabIndex: "-1",
       ...sharedProps
     }), /*#__PURE__*/_jsx(StyledTimestamp, {
+      margin: `0 ${remainingTimestampMarginRight}px 0 ${remainingTimestampMarginLeft}px`,
       children: /*#__PURE__*/_jsx(Typography, {
         variant: {
           inverse: true

package/lib/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,4 +7,5 @@ import ssrStyles from './ssr';
 import isElementFocusable from './isElementFocusable';
 import renderStructuredContent from './renderStructuredContent';
 import useOverlaidPosition from './useOverlaidPosition';
-export { deprecate, htmlAttrs, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, ssrStyles, isElementFocusable, useOverlaidPosition };
+import scrollToAnchor from './scrollToAnchor';
+export { deprecate, htmlAttrs, contentfulProps, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, ssrStyles, isElementFocusable, useOverlaidPosition, scrollToAnchor };

package/lib/utils/scrollToAnchor.js

@@ -0,0 +1,19 @@
+/**
+ * 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 !== null && href !== void 0 && href.startsWith('#')) {
+    event.preventDefault();
+    const target = document.getElementById(href.slice(1));
+    target === null || target === void 0 || target.scrollIntoView({
+      behavior: 'smooth'
+    });
+    window.location.hash = href;
+    onAfterScroll(event);
+  }
+};
+export default scrollToAnchor;

package/package.json

@@ -6,7 +6,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^2.0.2",
+    "@telus-uds/components-base": "^2.2.0",
     "@telus-uds/system-constants": "^2.0.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -14,7 +14,7 @@
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^3.0.0",
+    "@telus-uds/system-theme-tokens": "^3.1.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -81,5 +81,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "3.0.1"
+  "version": "3.2.0"
 }

package/src/BlockQuote/BlockQuote.jsx

@@ -5,10 +5,14 @@ import {
   selectSystemProps,
   StackView,
   Typography,
+  useTheme,
   useThemeTokens,
+  useResponsiveThemeTokens,
+  createMediaQueryStyles,
   withLinkRouter,
   useViewport,
-  getTokensPropType
+  getTokensPropType,
+  StyleSheet
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import { htmlAttrs, transformGradient } from '../utils'
@@ -38,6 +42,13 @@ const QuoteContainer = styled.div`
   margin-bottom: ${({ marginBottom }) => `${marginBottom}px`};
 `
 
+const selectTitleHeadingTokens = (themeTokens) => ({
+  fontSize: themeTokens.titleHeadingFontSize,
+  fontName: themeTokens.titleHeadingFontName,
+  fontWeight: themeTokens.titleHeadingFontWeight,
+  lineHeight: themeTokens.titleHeadingLineHeight
+})
+
 const BlockQuote = React.forwardRef(
   (
     {
@@ -55,6 +66,18 @@ const BlockQuote = React.forwardRef(
     ref
   ) => {
     const viewport = useViewport()
+    const {
+      themeOptions: { enableMediaQueryStyleSheet }
+    } = useTheme()
+
+    const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
+
+    const themeTokens = useTokens(
+      'BlockQuote',
+      tokens,
+      variant,
+      !enableMediaQueryStyleSheet && { viewport }
+    )
     const {
       color,
       paddingTop,
@@ -76,18 +99,53 @@ const BlockQuote = React.forwardRef(
       linkFontName,
       linkFontWeight,
       linkLineHeight
-    } = useThemeTokens('BlockQuote', tokens, variant, {
-      viewport
-    })
+    } = themeTokens
+
+    let titleHeadingStyles
+    let titleHeadingMediaIds
+
+    if (enableMediaQueryStyleSheet) {
+      const { transformedTitleHeadingThemeTokens } = Object.entries(themeTokens).reduce(
+        (acc, [vp, viewportTokens]) => {
+          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
-          }
+        ? titleHeadingStyles
         : {
             fontSize: titleFontSize,
             fontName: titleFontName,
@@ -132,7 +190,11 @@ const BlockQuote = React.forwardRef(
 
     const renderQuote = () => {
       const quote = (
-        <Typography tokens={{ color, ...titleTokens }} variant={{ size: mappedTextSize }}>
+        <Typography
+          tokens={{ color, ...titleTokens }}
+          media={titleHeadingMediaIds}
+          variant={{ size: mappedTextSize }}
+        >
           {children}
         </Typography>
       )

package/src/Countdown/Countdown.jsx

@@ -6,9 +6,13 @@ import {
   Typography,
   selectSystemProps,
   useViewport,
+  useTheme,
   useThemeTokens,
+  useResponsiveThemeTokens,
+  createMediaQueryStyles,
   applyTextStyles,
-  getTokensPropType
+  getTokensPropType,
+  StyleSheet
 } from '@telus-uds/components-base'
 import { viewports } from '@telus-uds/system-constants'
 import styled from 'styled-components'
@@ -71,11 +75,89 @@ const Countdown = React.forwardRef(
     if (noDivider && !label) {
       throw new Error('`noDivider` variant can only be used with `label` enabled!')
     }
-    const themeTokens = useThemeTokens('Countdown', tokens, variant, { viewport })
+
+    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, [vp, viewportTokens]) => {
+          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 ? (
@@ -84,12 +166,13 @@ const Countdown = React.forwardRef(
       ) : (
         <Typography tokens={mainTextTokens}>:</Typography>
       )
-    const labelTokens = getLabelTokens(themeTokens)
 
     const segmentProps = {
       copy,
-      labelTokens,
-      numberTokens: mainTextTokens,
+      labelTokens: labelStyles,
+      numberTokens: mainTextStyles,
+      labelMediaIds,
+      mainTextMediaIds,
       segmentFontSize,
       variant
     }
@@ -101,8 +184,9 @@ const Countdown = React.forwardRef(
         variant={variant}
         {...selectProps(rest)}
         tabIndex={0}
-        themeTokens={themeTokens}
+        themeTokens={containerStyles}
         gradient={semanticGradient}
+        media={containerMediaIds}
       >
         <StackView direction="row" space={1}>
           <Segment

package/src/Countdown/Segment.jsx

@@ -31,6 +31,8 @@ const Segment = React.forwardRef(
       labelTokens,
       number,
       numberTokens,
+      labelMediaIds,
+      mainTextMediaIds,
       segmentWidth = 2,
       variant = {}
     },
@@ -51,9 +53,11 @@ const Segment = React.forwardRef(
           space={large || feature ? 0 : 1}
           tokens={{ alignItems: 'center' }}
         >
-          <Typography tokens={numberTokens}>{pad(number, segmentWidth)}</Typography>
+          <Typography tokens={numberTokens} media={mainTextMediaIds}>
+            {pad(number, segmentWidth)}
+          </Typography>
           {label && (
-            <Typography tokens={labelTokens}>
+            <Typography tokens={labelTokens} media={labelMediaIds}>
               {getCopy(number === 1 ? labelKey : `${labelKey}s`)}
             </Typography>
           )}
@@ -76,6 +80,8 @@ Segment.propTypes = {
   number: PropTypes.number,
   numberTokens: PropTypes.object,
   segmentWidth: PropTypes.number,
+  labelMediaIds: PropTypes.string,
+  mainTextMediaIds: PropTypes.string,
   variant: countdownVariantPropType
 }