@telus-uds/components-web 3.0.0 → 3.1.0

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,4 @@ 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 };
+export { deprecate, htmlAttrs, contentfulProps, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, ssrStyles, isElementFocusable, useOverlaidPosition };

package/package.json

@@ -6,7 +6,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.97.1",
+    "@telus-uds/components-base": "^2.1.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.0"
+  "version": "3.1.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
 }
 

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/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%' }

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'
@@ -11,6 +11,7 @@ import useOverlaidPosition from './useOverlaidPosition'
 export {
   deprecate,
   htmlAttrs,
+  contentfulProps,
   transformGradient,
   useTypographyTheme,
   warn,