@telus-uds/components-base 3.20.0 → 3.22.0

package/src/Button/ButtonBase.jsx

@@ -16,7 +16,9 @@ import {
   viewProps,
   wrapStringsInText,
   withLinkRouter,
-  contentfulProps
+  contentfulProps,
+  createMediaQueryStyles,
+  StyleSheet as StyleSheetUtils
 } from '../utils'
 import { IconText } from '../Icon'
 
@@ -221,6 +223,9 @@ const ButtonBase = React.forwardRef(
     },
     ref
   ) => {
+    const { themeOptions } = useTheme()
+    const { viewport } = rawRest
+    const enableMediaQueryStyleSheet = themeOptions.enableMediaQueryStyleSheet && viewport
     const { onPress, ...rest } = clickProps.toPressProps(rawRest)
     const extraButtonState = { inactive, selected, iconPosition }
     const resolveButtonTokens = (pressableState) =>
@@ -228,9 +233,49 @@ const ButtonBase = React.forwardRef(
 
     const systemProps = selectProps(rest)
 
+    let layoutMediaQueryStyles
+    let flexAndWidthStylesIds
+
+    if (enableMediaQueryStyleSheet) {
+      const defaultPressableState = { pressed: false, hovered: false, focused: false }
+      const defaultTokensByViewport = resolveButtonTokens(defaultPressableState)
+
+      const layoutTokensByViewport = Object.entries(defaultTokensByViewport).reduce(
+        (acc, [vp, viewportTokens]) => {
+          const flexAndWidthStyles =
+            viewportTokens.width === '100%' && viewportTokens.flex === 1
+              ? selectFlexAndWidthStyles(viewportTokens)
+              : {}
+
+          acc[vp] = {
+            ...staticStyles.row,
+            ...selectWebOnlyStyles(inactive, viewportTokens, systemProps),
+            ...(Object.keys(flexAndWidthStyles).length > 0 ? flexAndWidthStyles : {}),
+            ...selectOuterSizeStyles(viewportTokens)
+          }
+          return acc
+        },
+        {}
+      )
+
+      const mediaQueryStyles = createMediaQueryStyles(layoutTokensByViewport)
+      const { ids, styles } = StyleSheetUtils.create({
+        layout: {
+          ...mediaQueryStyles
+        }
+      })
+
+      layoutMediaQueryStyles = styles.layout
+      flexAndWidthStylesIds = ids.layout
+    }
+
     const getPressableStyle = (pressableState) => {
+      if (enableMediaQueryStyleSheet) {
+        const themeTokens = resolveButtonTokens(pressableState)[viewport]
+        return [layoutMediaQueryStyles, selectOuterContainerStyles(themeTokens)]
+      }
+
       const themeTokens = resolveButtonTokens(pressableState)
-      // Only apply flex and width styles when they are explicitly set (e.g., from ButtonGroup with width: 'equal') to not to affect other use cases
       const flexAndWidthStyles =
         themeTokens.width === '100%' && themeTokens.flex === 1
           ? selectFlexAndWidthStyles(themeTokens)
@@ -244,7 +289,16 @@ const ButtonBase = React.forwardRef(
         selectOuterSizeStyles(themeTokens)
       ]
     }
-    const { themeOptions } = useTheme()
+
+    const dataSetProp =
+      flexAndWidthStylesIds || rawRest.dataSet
+        ? {
+            dataSet: {
+              ...(flexAndWidthStylesIds ? { media: flexAndWidthStylesIds } : {}),
+              ...rawRest.dataSet
+            }
+          }
+        : {}
 
     return (
       <Pressable
@@ -255,9 +309,12 @@ const ButtonBase = React.forwardRef(
         disabled={inactive}
         hrefAttrs={hrefAttrs}
         {...systemProps}
+        {...dataSetProp}
       >
         {(pressableState) => {
-          const themeTokens = resolveButtonTokens(pressableState)
+          const themeTokens = enableMediaQueryStyleSheet
+            ? resolveButtonTokens(pressableState)[viewport]
+            : resolveButtonTokens(pressableState)
           const containerStyles = selectInnerContainerStyles(themeTokens)
           const borderStyles = selectBorderStyles(themeTokens)
           const textStyles = [

package/src/Card/PressableCardBase.jsx

@@ -204,7 +204,9 @@ const staticStyles = StyleSheet.create({
   },
   linkContainer: {
     flex: 1,
-    display: 'flex'
+    display: 'flex',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start'
   }
 })
 

package/src/Carousel/Carousel.jsx

@@ -399,6 +399,7 @@ const Carousel = React.forwardRef(
       copy,
       slideDuration = 0,
       transitionDuration = 0,
+      loopDuration = transitionDuration,
       autoPlay = false,
       enablePeeking = false,
       ...rest
@@ -533,6 +534,8 @@ const Carousel = React.forwardRef(
 
     const animate = React.useCallback(
       (panToAnimate, toValue, toIndex) => {
+        const applicableTransitionDuration =
+          isLastSlide && toIndex === 0 ? loopDuration : transitionDuration
         const handleAnimationEndToIndex = (...args) => handleAnimationEnd(toIndex, ...args)
         if (reduceMotionRef.current || isSwiping.current) {
           Animated.timing(panToAnimate, { toValue, duration: 1, useNativeDriver: false }).start(
@@ -543,14 +546,14 @@ const Carousel = React.forwardRef(
             ...springConfig,
             toValue,
             useNativeDriver: false,
-            duration: transitionDuration * 1000
+            duration: applicableTransitionDuration * 1000
           }).start(handleAnimationEndToIndex)
         } else if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
           Animated.timing(panToAnimate, {
             ...springConfig,
             toValue,
             useNativeDriver: false,
-            duration: transitionDuration ? transitionDuration * 1000 : 1000
+            duration: applicableTransitionDuration ? applicableTransitionDuration * 1000 : 1000
           }).start(handleAnimationEndToIndex)
         } else {
           Animated.spring(panToAnimate, {
@@ -564,6 +567,8 @@ const Carousel = React.forwardRef(
         springConfig,
         handleAnimationEnd,
         transitionDuration,
+        loopDuration,
+        isLastSlide,
         isAutoPlayEnabled,
         enablePeeking,
         enableDisplayMultipleItemsPerSlide
@@ -1390,6 +1395,12 @@ Carousel.propTypes = {
    * - `autoPlay` and `slideDuration` are required to be set for this to work
    */
   transitionDuration: PropTypes.number,
+  /**
+   * Time it takes in seconds to transition from last slide to first slide
+   * - Default value equals `transitionDuration`'s value
+   * - `autoPlay` and `transitionDuration` are required to be set for this to work
+   */
+  loopDuration: PropTypes.number,
   /**
    * If set to `true`, the Carousel will show the previous and next slides
    * - Default value is `false`

package/src/PriceLockup/utils/renderPrice.jsx

@@ -102,28 +102,26 @@ const renderPrice = (
               )}
             </Text>
           ) : null}
-          {
-            <Text>
-              {renderAmount(
-                amount,
-                amountTypographyTokens,
+          <Text>
+            {renderAmount(
+              amount,
+              amountTypographyTokens,
+              strikeThrough,
+              a11yText,
+              fontColor,
+              themeTokens
+            )}
+            {isPriceBaseline &&
+              cents &&
+              renderAmount(
+                `${separator}${cents}`,
+                centsTypographyTokens,
                 strikeThrough,
                 a11yText,
                 fontColor,
                 themeTokens
               )}
-              {isPriceBaseline &&
-                cents &&
-                renderAmount(
-                  `${separator}${cents}`,
-                  centsTypographyTokens,
-                  strikeThrough,
-                  a11yText,
-                  fontColor,
-                  themeTokens
-                )}
-            </Text>
-          }
+          </Text>
           {cents && !isPriceBaseline
             ? renderTypography(`${separator}${cents}`, centsTypographyTokens, undefined, fontColor)
             : null}

package/src/Responsive/ResponsiveWithMediaQueryStyleSheet.jsx

@@ -59,7 +59,7 @@ ResponsiveWithMediaQueryStyleSheet.propTypes = {
   /**
    * To hide children of `Responsive` if the current viewport is larger than `max`
    */
-  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  max: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   inheritedStyles: PropTypes.arrayOf(PropTypes.string),
   children: PropTypes.node.isRequired
 }

package/src/StackView/StackView.jsx

@@ -13,10 +13,12 @@ import {
   spacingProps,
   useResponsiveProp,
   variantProp,
-  viewProps
+  viewProps,
+  StyleSheet as StyleSheetUtils,
+  createMediaQueryStyles,
+  useAllViewportTokens
 } from '../utils'
-import { useThemeTokens } from '../ThemeProvider'
-import { useViewport } from '../ViewportProvider'
+import useTheme from '../ThemeProvider/useTheme'
 import getStackedContent from './getStackedContent'
 import { staticStyles, selectFlexStyles } from './common'
 
@@ -75,24 +77,70 @@ const StackView = React.forwardRef(
       tokens,
       tag,
       accessibilityRole,
+      dataSet,
       ...rest
     },
     ref
   ) => {
-    const viewport = useViewport()
     const direction = useResponsiveProp(directionProp, 'column')
+    const {
+      themeOptions: { enableMediaQueryStyleSheet }
+    } = useTheme()
+
     const selectedProps = selectProps({
       accessibilityRole,
       ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
       ...rest
     })
     const content = getStackedContent(children, { direction, divider, space })
-    const themeTokens = useThemeTokens('StackView', tokens, variant, { viewport })
-    const flexStyles = selectFlexStyles(themeTokens)
-    const size = { width: themeTokens.width }
+
+    const allTokens = useAllViewportTokens('StackView', tokens, variant)
+
+    let stackViewStyles
+    let dataSetValue = dataSet
+
+    if (enableMediaQueryStyleSheet) {
+      const stylesByViewport = {
+        xs: {
+          ...selectFlexStyles(allTokens.xs),
+          width: allTokens.xs.width
+        },
+        sm: {
+          ...selectFlexStyles(allTokens.sm),
+          width: allTokens.sm.width
+        },
+        md: {
+          ...selectFlexStyles(allTokens.md),
+          width: allTokens.md.width
+        },
+        lg: {
+          ...selectFlexStyles(allTokens.lg),
+          width: allTokens.lg.width
+        },
+        xl: {
+          ...selectFlexStyles(allTokens.xl),
+          width: allTokens.xl.width
+        }
+      }
+
+      const mediaQueryStyles = createMediaQueryStyles(stylesByViewport)
+
+      const { ids, styles } = StyleSheetUtils.create({
+        stackView: {
+          ...mediaQueryStyles
+        }
+      })
+
+      stackViewStyles = [staticStyles[direction], styles.stackView]
+      dataSetValue = { media: ids.stackView, ...dataSet }
+    } else {
+      const flexStyles = selectFlexStyles(allTokens.current)
+      const size = { width: allTokens.current.width }
+      stackViewStyles = [flexStyles, staticStyles[direction], size]
+    }
 
     return (
-      <View ref={ref} {...selectedProps} style={[flexStyles, staticStyles[direction], size]}>
+      <View ref={ref} {...selectedProps} style={stackViewStyles} dataSet={dataSetValue}>
         {content}
       </View>
     )
@@ -132,7 +180,12 @@ StackView.propTypes = {
    * A StackView may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+  /**
+   * Data attributes to be applied to the element. When media query stylesheet is enabled,
+   * this will include media query IDs for responsive styling.
+   */
+  dataSet: PropTypes.object
 }
 
 export default StackView

package/src/Tabs/TabsDropdown.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 import { useThemeTokensCallback, applyTextStyles, useTheme } from '../ThemeProvider'
 import {
   a11yProps,
@@ -245,20 +245,21 @@ const styles = StyleSheet.create({
     position: 'relative',
     width: '100%'
   },
-  pressable: {
-    outlineWidth: 0,
-    outlineStyle: 'none',
-    outlineColor: 'transparent'
-  },
+  pressable:
+    Platform.OS === 'web'
+      ? {
+          outlineWidth: 0,
+          outlineStyle: 'none',
+          outlineColor: 'transparent'
+        }
+      : {},
   buttonContent: {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
     width: '100%',
-    minHeight: 44,
-    outline: 'none',
-    boxSizing: 'border-box'
+    minHeight: 44
   }
 })
 

package/src/ThemeProvider/index.js

@@ -3,6 +3,7 @@ import ThemeProvider from './ThemeProvider'
 export { default as useTheme } from './useTheme'
 export { default as useSetTheme } from './useSetTheme'
 export { default as useResponsiveThemeTokens } from './useResponsiveThemeTokens'
+export { default as useResponsiveThemeTokensCallback } from './useResponsiveThemeTokensCallback'
 export * from './useThemeTokens'
 
 export * from './utils'

package/src/ThemeProvider/useResponsiveThemeTokensCallback.js

@@ -0,0 +1,129 @@
+import { useCallback } from 'react'
+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 memoised tokens getter function that gets responsive tokens for all viewports,
+ * similar to calling useResponsiveThemeTokens but with the callback pattern of useThemeTokensCallback.
+ *
+ * Scenarios where `useResponsiveThemeTokensCallback` should be used:
+ *
+ * - Where responsive tokens are to be obtained from state that is accessible only in scopes like callbacks
+ *   and render functions, where calling useResponsiveThemeTokens directly would be disallowed by React's hook rules.
+ * - When using media query stylesheets and need to resolve tokens based on dynamic state (e.g., pressed, hovered)
+ *   that changes at runtime.
+ * - Passing a responsive tokens getter down via a child component's `tokens` prop, applying rules using the
+ *   child component's current state.
+ *
+ * The function returned may be called with an object of state appearances to get an object
+ * of tokens for each viewport, which can then be passed to createMediaQueryStyles.
+ *
+ * @example
+ * // Resolving responsive tokens inside Pressable's style function, based on Pressable state
+ * const PressMe = ({ tokens, variant, children }) => {
+ *   const getResponsiveTokens = useResponsiveThemeTokensCallback('PressMe', tokens, variant)
+ *   const getPressableStyle = ({ pressed }) => {
+ *     const responsiveTokens = getResponsiveTokens({ pressed })
+ *     const mediaQueryStyles = createMediaQueryStyles(responsiveTokens)
+ *     return mediaQueryStyles
+ *   }
+ *   return <Pressable style={getPressableStyle}>{children}</Pressable>
+ * }
+ *
+ * @example
+ * // Setting the theme in a parent and resolving it in a child based on child's state
+ * const MenuButton = ({ tokens, variant, ...buttonProps }) => {
+ *   // Define what theme, variant etc we want in this component...
+ *   const getResponsiveTokens = useResponsiveThemeTokensCallback('Button', tokens, variant)
+ *   // ...resolve them in another component based on its state (e.g. press, hover...)
+ *   return <ButtonBase tokens={getResponsiveTokens} accessibilityRole="menuitem" {...buttonProps} />
+ * }
+ *
+ * @typedef {Object} ResponsiveObject
+ * @property {TokensSet} xs
+ * @property {TokensSet} sm
+ * @property {TokensSet} md
+ * @property {TokensSet} lg
+ * @property {TokensSet} xl
+ *
+ * @param {string} componentName - the name as defined in the theme schema of the component whose theme is to be used
+ * @param {TokensProp} [tokens] - every themed component should accept a `tokens` prop allowing theme tokens to be overridden
+ * @param {AppearanceSet} [variants] - variants passed in as props that don't change dynamically
+ * @returns {(states: AppearanceSet, tokenOverrides?: TokensProp) => ResponsiveObject}
+ *    - callback function that returns an overridable responsive tokens object for current state. Only pass
+ *      tokenOverrides in rare cases where tokens overrides are also generated outside hook scope.
+ */
+const useResponsiveThemeTokensCallback = (componentName, tokens = {}, variants = {}) => {
+  const theme = useTheme()
+  const componentTheme = getComponentTheme(theme, componentName)
+  const getResponsiveThemeTokensCallback = useCallback(
+    (states, tokenOverrides) => {
+      const resolvedTokens = resolveThemeTokens(
+        tokens,
+        mergeAppearances(variants, states),
+        tokenOverrides
+      )
+      return getResponsiveThemeTokens(componentTheme, resolvedTokens, variants, states)
+    },
+    [componentTheme, tokens, variants]
+  )
+  return getResponsiveThemeTokensCallback
+}
+
+export default useResponsiveThemeTokensCallback

package/src/index.js

@@ -83,7 +83,8 @@ export {
   applyOuterBorder,
   applyTextStyles,
   applyShadowToken,
-  useResponsiveThemeTokens
+  useResponsiveThemeTokens,
+  useResponsiveThemeTokensCallback
 } from './ThemeProvider'
 
 export * from './utils'

package/src/utils/ssr-media-query/index.js

@@ -1,8 +1,9 @@
 import createStyleSheet from './create-stylesheet'
 import createMediaQueryStyles from './utils/create-media-query-styles'
+import useAllViewportTokens from './utils/use-all-viewport-tokens'
 
 const StyleSheet = {
   create: createStyleSheet
 }
 
-export { StyleSheet, createMediaQueryStyles }
+export { StyleSheet, createMediaQueryStyles, useAllViewportTokens }

package/src/utils/ssr-media-query/utils/use-all-viewport-tokens.js

@@ -0,0 +1,32 @@
+import { useThemeTokens } from '../../../ThemeProvider'
+import { useViewport } from '../../../ViewportProvider'
+
+/**
+ * Hook to get theme tokens for all viewports at once.
+ * This is useful for components that need to support React Native Media Queries (RNMQ).
+ *
+ * All hooks are called unconditionally to comply with React's Rules of Hooks.
+ *
+ * @param {string} componentName - The name of the component to get tokens for
+ * @param {object|function} tokens - Custom tokens or token function
+ * @param {object} variant - Variant configuration
+ * @returns {object} Object with tokens for each viewport (xs, sm, md, lg, xl, current)
+ *
+ * @example
+ * const allTokens = useAllViewportTokens('StackView', tokens, variant)
+ * // Returns: { xs: {...}, sm: {...}, md: {...}, lg: {...}, xl: {...}, current: {...} }
+ */
+const useAllViewportTokens = (componentName, tokens, variant) => {
+  const viewport = useViewport()
+
+  const xs = useThemeTokens(componentName, tokens, variant, { viewport: 'xs' })
+  const sm = useThemeTokens(componentName, tokens, variant, { viewport: 'sm' })
+  const md = useThemeTokens(componentName, tokens, variant, { viewport: 'md' })
+  const lg = useThemeTokens(componentName, tokens, variant, { viewport: 'lg' })
+  const xl = useThemeTokens(componentName, tokens, variant, { viewport: 'xl' })
+  const current = useThemeTokens(componentName, tokens, variant, { viewport })
+
+  return { xs, sm, md, lg, xl, current }
+}
+
+export default useAllViewportTokens