@telus-uds/components-web 3.0.1 → 3.1.0

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # 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 Mon, 02 Dec 2024 20:23:48 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 3.1.0
+
+Mon, 02 Dec 2024 20:23:48 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/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;

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',

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