@telus-uds/components-base 1.72.0 → 1.73.0

package/src/ThemeProvider/useResponsiveThemeTokens.js

@@ -0,0 +1,85 @@
+import { viewports } from '@telus-uds/system-constants'
+import useTheme from './useTheme'
+import { getComponentTheme, mergeAppearances, resolveThemeTokens } from './utils'
+
+const getResponsiveThemeTokens = (
+  { rules = [], tokens: defaultThemeTokens = {} },
+  tokensProp,
+  variants = {},
+  states
+) => {
+  const appearances = mergeAppearances(variants, states)
+
+  const tokensByViewport = Object.fromEntries(
+    viewports.keys.map((viewport) => [viewport, { ...defaultThemeTokens }])
+  )
+
+  // Go through each rule and collect them for the corresponding viewport if they apply
+  rules.forEach((rule) => {
+    if (doesRuleApply(rule, appearances)) {
+      // If the rule does not have a viewport specified, we collect it in all viewports
+      let targetViewports = rule.if.viewport || viewports.keys
+      if (!Array.isArray(targetViewports)) {
+        targetViewports = [targetViewports]
+      }
+      targetViewports.forEach((viewport) => {
+        tokensByViewport[viewport] = { ...tokensByViewport[viewport], ...rule.tokens }
+      })
+    }
+  })
+
+  Object.keys(tokensByViewport).forEach((viewport) => {
+    tokensByViewport[viewport] = resolveThemeTokens(
+      tokensByViewport[viewport],
+      appearances,
+      tokensProp
+    )
+  })
+
+  return tokensByViewport
+}
+
+const doesRuleApply = (rule, appearances) =>
+  Object.entries(rule.if).every((condition) => doesConditionApply(condition, appearances))
+
+const doesConditionApply = ([key, value], appearances) => {
+  if (key === 'viewport') {
+    return true
+  }
+  // use null rather than undefined so we can serialise the value in themes
+  const appearanceValue = appearances[key] ?? null
+  return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue
+}
+
+/**
+ * @typedef {import('../utils/props/tokens.js').TokensSet} TokensSet
+ * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../utils/props/variantProp').AppearanceSet} AppearanceSet
+ *
+ * Returns a complete set of tokens for a component for each viewport based on which of the
+ * component's theme rules apply to the current set of theme appearances.
+ * Pass the returned output to createMediaQueryStyles to generate media query styles for use inside
+ * the media query stylesheet from './utils/ssr-media-query'.
+ *
+ * @typedef {Object} ResponsiveObject
+ * @property {TokensSet} xs
+ * @property {TokensSet} sm
+ * @property {TokensSet} md
+ * @property {TokensSet} lg
+ * @property {TokensSet} xl
+ *
+ * @param { string } componentName
+ * @param { TokensProp } tokens
+ * @param { AppearanceSet } variants
+ * @param { AppearanceSet } states
+ * @returns { ResponsiveObject }
+ */
+
+const useResponsiveThemeTokens = (componentName, tokens = {}, variants = {}, states = {}) => {
+  const theme = useTheme()
+  const componentTheme = getComponentTheme(theme, componentName)
+  const themeTokens = getResponsiveThemeTokens(componentTheme, tokens, variants, states)
+  return themeTokens
+}
+
+export default useResponsiveThemeTokens

package/src/Typography/Typography.jsx

@@ -2,8 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { Text, View } from 'react-native'
 
-import { useTheme, useThemeTokens } from '../ThemeProvider'
-import { useViewport } from '../ViewportProvider'
+import { useResponsiveThemeTokens, useTheme, useThemeTokens } from '../ThemeProvider'
 import { applyTextStyles } from '../ThemeProvider/utils'
 import {
   a11yProps,
@@ -15,17 +14,29 @@ import {
   textTags,
   textProps,
   viewProps,
-  getA11yPropsFromHtmlTag
+  getA11yPropsFromHtmlTag,
+  StyleSheet,
+  createMediaQueryStyles
 } from '../utils'
+import { useViewport } from '../ViewportProvider'
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
 
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps])
 const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps])
-
 const selectTextStyles = (
-  { fontWeight, fontSize, color, lineHeight, fontName, textAlign, textTransform, letterSpacing },
+  {
+    fontWeight,
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    textAlign,
+    textTransform,
+    letterSpacing,
+    textDecorationLine
+  },
   themeOptions
 ) =>
   applyTextStyles({
@@ -37,7 +48,8 @@ const selectTextStyles = (
     themeOptions,
     textAlign,
     textTransform,
-    letterSpacing
+    letterSpacing,
+    textDecorationLine
   })
 
 // General-purpose flexible theme-neutral base component for text
@@ -59,19 +71,56 @@ const Typography = forwardRef(
     ref
   ) => {
     const viewport = useViewport()
-    const { superScriptFontSize, ...themeTokens } = useThemeTokens('Typography', tokens, variant, {
-      viewport
-    })
     const { themeOptions } = useTheme()
 
+    const { enableMediaQueryStyleSheet } = themeOptions
+
+    const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
+    const themeTokens = useTokens('Typography', tokens, variant)
+    const maxFontSizeMultiplier = enableMediaQueryStyleSheet
+      ? getMaxFontMultiplier(themeTokens[viewport])
+      : getMaxFontMultiplier(themeTokens)
+    const textDecorationLine = strikeThrough ? 'line-through' : 'none'
+
+    let textStyles
+    let mediaIds
+
+    if (enableMediaQueryStyleSheet) {
+      const transformedThemeTokens = Object.entries(themeTokens).reduce(
+        (acc, [vp, viewportTokens]) => {
+          acc[vp] = selectTextStyles(
+            {
+              textAlign: align,
+              textDecorationLine,
+              ...viewportTokens
+            },
+            themeOptions
+          )
+          return acc
+        },
+        {}
+      )
+      const mediaQueryStyles = createMediaQueryStyles(transformedThemeTokens)
+      const { ids, styles } = StyleSheet.create({
+        text: mediaQueryStyles
+      })
+      textStyles = styles.text
+      mediaIds = ids.text
+    } else {
+      textStyles = selectTextStyles(
+        {
+          textAlign: align,
+          textDecorationLine,
+          ...themeTokens
+        },
+        themeOptions
+      )
+    }
+
     const resolvedTextProps = {
       ...selectTextProps(rest),
-      style: selectTextStyles(
-        align ? { ...themeTokens, textAlign: align } : themeTokens,
-        themeOptions
-      ),
       dataSet,
-      maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
+      maxFontSizeMultiplier
     }
 
     const containerProps = {
@@ -83,7 +132,7 @@ const Typography = forwardRef(
     const resetTagStyling = (child) => {
       if (typeof child === 'object' && (child?.type === 'sub' || child?.type === 'sup')) {
         const childStyles = child?.props?.style || {}
-        const supFontSize = childStyles.fontSize ?? superScriptFontSize
+        const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize
         const sanitizedChild = React.cloneElement(child, {
           style: {
             ...childStyles,
@@ -91,10 +140,8 @@ const Typography = forwardRef(
             lineHeight: 0
           }
         })
-
         return sanitizedChild
       }
-
       return child
     }
 
@@ -106,19 +153,20 @@ const Typography = forwardRef(
       return resetTagStyling(children)
     }
 
-    const textDecorationLine = strikeThrough ? 'line-through' : 'none'
-    const textStyles = resolvedTextProps.style
-      ? { ...resolvedTextProps.style, textDecorationLine }
-      : { textDecorationLine }
-
     return block ? (
       <View ref={ref} {...containerProps}>
-        <Text {...resolvedTextProps} style={textStyles}>
+        <Text {...resolvedTextProps} style={textStyles} dataSet={mediaIds && { media: mediaIds }}>
           {sanitizeChildren(children)}
         </Text>
       </View>
     ) : (
-      <Text ref={ref} {...containerProps} {...resolvedTextProps} style={textStyles}>
+      <Text
+        ref={ref}
+        {...containerProps}
+        {...resolvedTextProps}
+        style={textStyles}
+        dataSet={mediaIds && { media: mediaIds }}
+      >
         {sanitizeChildren(children)}
       </Text>
     )

package/src/server.js

@@ -0,0 +1,4 @@
+export { default as selectSystemProps } from './utils/props/selectSystemProps'
+export { getTokensPropType } from './utils/props/tokens'
+export { default as htmlAttrs } from './utils/htmlAttrs'
+export { getComponentTheme, getThemeTokens } from './ThemeProvider/utils/theme-tokens'

package/src/utils/ssr-media-query/utils/create-media-query-styles.js

@@ -1,20 +1,35 @@
 import { viewports } from '@telus-uds/system-constants'
 
+const inherit = ({ xs, sm = xs, md = sm, lg = md, xl = lg }) => ({ xs, sm, md, lg, xl })
+
 /**
  * @typedef { Object } CssStyles
- * @typedef { Record<"xs" | "sm" | "md" | "lg" | "xl", CssStyles> } ViewportStyles
+ */
+
+/**
+ * @typedef { Object } ViewportStyles
+ * @property { CssStyles } xs - The CSS styles for the "xs" viewport (required).
+ * @property { CssStyles } [sm] - Optional styles for the "sm" viewport. Inherits from "xs" if not specified.
+ * @property { CssStyles } [md] - Optional styles for the "md" viewport. Inherits from "sm" if not specified.
+ * @property { CssStyles } [lg] - Optional styles for the "lg" viewport. Inherits from "md" if not specified.
+ * @property { CssStyles } [xl] - Optional styles for the "xl" viewport. Inherits from "lg" if not specified.
+ */
+
+/**
  * @typedef { Record<String, CssStyles> } MediaQueryStyles
  */
 
 /**
  * Generates media query styles based on specified viewport styles.
- * @param {ViewportStyles} viewportStyles
- * @returns { MediaQueryStyles }
+ * @param { Object } viewportStyles - The styles for different viewports.
+ * @param { boolean } [shouldInherit=true] - Flag indicating whether to inherit styles.
+ * @returns { Object } - The media query styles.
  */
 
-function createMediaQueryStyles(viewportStyles) {
-  const viewportsArray = Object.keys(viewportStyles)
-  const mediaQueries = Object.entries(viewportStyles).reduce((acc, [viewport, styles]) => {
+function createMediaQueryStyles(viewportStyles, shouldInherit = true) {
+  const effectiveStyles = shouldInherit ? inherit(viewportStyles) : viewportStyles
+  const viewportsArray = viewports.keys
+  const mediaQueries = Object.entries(effectiveStyles).reduce((acc, [viewport, styles]) => {
     const minWidth = viewports.map.get(viewport)
     const nextViewport = viewportsArray[viewportsArray.indexOf(viewport) + 1]
     const maxWidth = viewports.map.get(nextViewport)