@telus-uds/components-base 1.73.0 → 1.75.0

package/src/Notification/Notification.jsx

@@ -1,8 +1,13 @@
-import React, { forwardRef, useState } from 'react'
-import { StyleSheet, View } from 'react-native'
+import React, { forwardRef, useState, useRef } from 'react'
+import { View } from 'react-native'
 
 import PropTypes from 'prop-types'
-import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
+import {
+  applyTextStyles,
+  useTheme,
+  useThemeTokens,
+  useResponsiveThemeTokens
+} from '../ThemeProvider'
 import {
   a11yProps,
   getTokensPropType,
@@ -11,7 +16,9 @@ import {
   variantProp,
   viewProps,
   wrapStringsInText,
-  useResponsiveProp
+  useResponsiveProp,
+  createMediaQueryStyles,
+  StyleSheet
 } from '../utils'
 import IconButton from '../IconButton'
 import useCopy from '../utils/useCopy'
@@ -61,6 +68,110 @@ const selectContentContainerStyle = (maxWidth) => ({
   width: maxWidth || '100%'
 })
 
+const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, dismissible) => {
+  const transformedSelectContainerStyles = Object.entries(themeTokens).reduce(
+    (acc, [vp, viewportTokens]) => {
+      acc[vp] = selectContainerStyles({ ...viewportTokens })
+      return acc
+    },
+    {}
+  )
+
+  const selectContainerMediaQueryStyles = createMediaQueryStyles(transformedSelectContainerStyles)
+
+  const { ids: containerIds, styles: containerStyles } = StyleSheet.create({
+    container: { flexDirection: 'row', ...selectContainerMediaQueryStyles }
+  })
+
+  const { ids: contentContainerIds, styles: contentContainerStyles } = StyleSheet.create({
+    contentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1,
+      justifyContent: 'space-between',
+      ...createMediaQueryStyles({
+        xs: { width: themeOptions?.contentMaxWidth.xs || '100%' },
+        md: { width: themeOptions?.contentMaxWidth.md || '100%' },
+        lg: { width: themeOptions?.contentMaxWidth.lg || '100%' },
+        sm: { width: themeOptions?.contentMaxWidth.sm || '100%' },
+        xl: { width: themeOptions?.contentMaxWidth.xl || '100%' }
+      })
+    }
+  })
+
+  const { ids: staticContentContainerIds, styles: staticContentContainerStyles } =
+    StyleSheet.create({
+      staticContentContainer: { flexDirection: 'row', flexShrink: 1 }
+    })
+
+  const { ids: iconContainerIds, styles: iconContainerStyles } = StyleSheet.create({
+    iconContainer: selectIconContainerStyles(themeTokens[viewport])
+  })
+
+  const { ids: dismissButtonContainerIds, styles: dismissButtonContainerStyles } =
+    StyleSheet.create({
+      dismissButtonContainer: selectDismissButtonContainerStyles(themeTokens[viewport])
+    })
+
+  const { ids: textIds, styles: textStyles } = StyleSheet.create({
+    text: selectTextStyles(themeTokens[viewport], themeOptions, dismissible)
+  })
+
+  const { styles: selectIconPropsStyles } = StyleSheet.create({
+    selectIconProps: selectIconProps(themeTokens[viewport])
+  })
+
+  const { styles: selectDismissIconPropsStyles } = StyleSheet.create({
+    selectDismissIconProps: selectDismissIconProps(themeTokens[viewport])
+  })
+
+  // eslint-disable-next-line no-param-reassign
+  mediaIdsRef.current = {
+    containerIds,
+    contentContainerIds,
+    staticContentContainerIds,
+    iconContainerIds,
+    dismissButtonContainerIds,
+    textIds
+  }
+
+  return {
+    containerStyles,
+    contentContainerStyles,
+    staticContentContainerStyles,
+    iconContainerStyles,
+    dismissButtonContainerStyles,
+    textStyles,
+    selectIconPropsStyles,
+    selectDismissIconPropsStyles
+  }
+}
+
+const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible) => ({
+  containerStyles: {
+    container: { flexDirection: 'row', ...selectContainerStyles(themeTokens) }
+  },
+  contentContainerStyles: {
+    contentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1,
+      justifyContent: 'space-between',
+      ...selectContentContainerStyle(maxWidth)
+    }
+  },
+  staticContentContainerStyles: {
+    staticContentContainer: { flexDirection: 'row', flexShrink: 1 }
+  },
+  iconContainerStyles: { iconContainer: { ...selectIconContainerStyles(themeTokens) } },
+  dismissButtonContainerStyles: {
+    dismissButtonContainer: { ...selectDismissButtonContainerStyles(themeTokens) }
+  },
+  textStyles: { text: { ...selectTextStyles(themeTokens, themeOptions, dismissible) } },
+  selectIconPropsStyles: { selectIconProps: { ...selectIconProps(themeTokens) } },
+  selectDismissIconPropsStyles: {
+    selectDismissIconProps: { ...selectDismissIconProps(themeTokens) }
+  }
+})
+
 /**
  * A banner that highlights important messages:
  * - Status message to show there is an error or outage of services
@@ -116,43 +227,121 @@ const Notification = forwardRef(
   ({ children, system, dismissible, copy = 'en', tokens, variant, ...rest }, ref) => {
     const [isDismissed, setIsDismissed] = useState(false)
     const viewport = useViewport()
-    const themeTokens = useThemeTokens('Notification', tokens, variant, { system, viewport })
     const getCopy = useCopy({ dictionary, copy })
+
     const { themeOptions } = useTheme()
-    const contentMaxWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
+    const { enableMediaQueryStyleSheet } = themeOptions
+    const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
+    const themeTokens = useTokens('Notification', tokens, variant, { system, viewport })
+    const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
+
+    const notificationComponentRef = useRef({
+      containerStyles: {},
+      contentContainerStyles: {},
+      staticContentContainerStyles: {},
+      iconContainerStyles: {},
+      dismissButtonContainerStyles: {},
+      textStyles: {},
+      selectIconPropsStyles: {},
+      selectDismissIconPropsStyles: {}
+    })
+    const mediaIdsRef = useRef({
+      containerIds: {},
+      contentContainerIds: {},
+      staticContentContainerIds: {},
+      iconContainerIds: {},
+      dismissButtonContainerIds: {},
+      textIds: {},
+      selectIconPropsIds: {},
+      selectDismissIconPropsIds: {}
+    })
+
+    if (enableMediaQueryStyleSheet) {
+      notificationComponentRef.current = getMediaQueryStyles(
+        themeTokens,
+        themeOptions,
+        viewport,
+        mediaIdsRef,
+        dismissible
+      )
+    } else {
+      notificationComponentRef.current = getDefaultStyles(
+        themeTokens,
+        themeOptions,
+        maxWidth,
+        dismissible
+      )
+    }
 
     if (isDismissed) {
       return null
     }
 
-    const textStyles = selectTextStyles(themeTokens, themeOptions, dismissible)
-
     const content = wrapStringsInText(
-      typeof children === 'function' ? children({ textStyles, variant }) : children,
-      { style: textStyles }
+      typeof children === 'function'
+        ? children({ textStyles: notificationComponentRef.current.textStyles.text, variant })
+        : children,
+      { style: notificationComponentRef.current.textStyles.text }
     )
 
-    const { icon: IconComponent, dismissIcon: DismissIconComponent, dismissIconColor } = themeTokens
+    const {
+      icon: IconComponent,
+      dismissIcon: DismissIconComponent,
+      dismissIconColor
+    } = enableMediaQueryStyleSheet === false ? themeTokens : themeTokens[viewport]
 
     const onDismissPress = () => setIsDismissed(true)
 
     return (
       <View
         ref={ref}
-        style={[staticStyles.container, selectContainerStyles(themeTokens)]}
+        style={notificationComponentRef.current.containerStyles.container}
+        dataSet={mediaIdsRef && { media: mediaIdsRef.current.containerIds.container }}
         {...selectProps(rest)}
       >
-        <View style={[staticStyles.content, selectContentContainerStyle(contentMaxWidth)]}>
-          <View style={staticStyles.contentContainer}>
+        <View
+          style={notificationComponentRef.current.contentContainerStyles.contentContainer}
+          dataSet={
+            mediaIdsRef && { media: mediaIdsRef.current.contentContainerIds.contentContainer }
+          }
+        >
+          <View
+            style={
+              notificationComponentRef.current.staticContentContainerStyles.staticContentContainer
+            }
+            dataSet={
+              mediaIdsRef && {
+                media: mediaIdsRef.current.staticContentContainerIds.staticContentContainer
+              }
+            }
+          >
             {IconComponent && (
-              <View style={selectIconContainerStyles(themeTokens)}>
-                <IconComponent {...selectIconProps(themeTokens)} />
+              <View
+                style={notificationComponentRef.current.iconContainerStyles.iconContainer}
+                dataSet={
+                  mediaIdsRef && { media: mediaIdsRef.current.iconContainerIds.iconContainer }
+                }
+              >
+                <IconComponent
+                  {...notificationComponentRef.current.selectIconPropsStyles.selectIconProps}
+                />
               </View>
             )}
-            {content && typeof content === 'function' ? content({ textStyles, variant }) : content}
+            {content && typeof content === 'function'
+              ? content({ textStyles: notificationComponentRef.current.textStyles.text, variant })
+              : content}
           </View>
           {dismissible && DismissIconComponent && (
-            <View style={selectDismissButtonContainerStyles(themeTokens)}>
+            <View
+              style={
+                notificationComponentRef.current.dismissButtonContainerStyles.dismissButtonContainer
+              }
+              dataSet={
+                mediaIdsRef && {
+                  media: mediaIdsRef.current.dismissButtonContainerIds.dismissButtonContainer
+                }
+              }
+            >
               <IconButton
                 action="close"
                 onPress={onDismissPress}
@@ -161,7 +350,12 @@ const Notification = forwardRef(
                 accessibilityLabel={getCopy('dismiss')}
                 variant={{ inverse: dismissIconColor === '#ffffff', size: 'small' }}
               >
-                {() => <DismissIconComponent {...selectDismissIconProps(themeTokens)} />}
+                {() => (
+                  <DismissIconComponent
+                    {...notificationComponentRef.current.selectDismissIconPropsStyles
+                      .selectDismissIconProps}
+                  />
+                )}
               </IconButton>
             </View>
           )}
@@ -198,18 +392,3 @@ Notification.propTypes = {
 }
 
 export default Notification
-
-const staticStyles = StyleSheet.create({
-  container: {
-    flexDirection: 'row'
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    flexShrink: 1
-  },
-  content: {
-    flexDirection: 'row',
-    flexShrink: 1,
-    justifyContent: 'space-between'
-  }
-})

package/src/Responsive/Responsive.jsx

@@ -17,13 +17,13 @@ import ResponsiveWithMediaQueryStyleSheet from './ResponsiveWithMediaQueryStyleS
  * is used to hide and show children of `Responsive` within a View.
  */
 
-const Responsive = ({ min = 'xs', max, children }) => {
+const Responsive = ({ min = 'xs', max, inheritedStyles = [], children }) => {
   const {
     themeOptions: { enableMediaQueryStyleSheet }
   } = useTheme()
   if (enableMediaQueryStyleSheet) {
     return (
-      <ResponsiveWithMediaQueryStyleSheet min={min} max={max}>
+      <ResponsiveWithMediaQueryStyleSheet inheritedStyles={inheritedStyles} min={min} max={max}>
         {children}
       </ResponsiveWithMediaQueryStyleSheet>
     )
@@ -46,6 +46,12 @@ Responsive.propTypes = {
    * To hide children of `Responsive` if the current viewport is larger than `max`
    */
   max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  /**
+   * Styles to be inherited by `Responsive`.
+   * It should be an array of style property names.
+   * Note: This prop is only applicable when `enableMediaQueryStylesheet` is set to true in the `ThemeProvider`.
+   */
+  inheritedStyles: PropTypes.arrayOf(PropTypes.string),
   children: PropTypes.node.isRequired
 }
 

package/src/Responsive/ResponsiveWithMediaQueryStyleSheet.jsx

@@ -25,12 +25,13 @@ function generateResponsiveStyles(min, max) {
   })
   return createMediaQueryStyles(styles, false)
 }
-const ResponsiveWithMediaQueryStyleSheet = ({ min, max, children }) => {
+const ResponsiveWithMediaQueryStyleSheet = ({ min, max, inheritedStyles = [], children }) => {
   const { ids, styles } = StyleSheet.create({
     responsive: {
-      flexDirection: 'inherit',
-      alignItems: 'inherit',
-      justifyContent: 'inherit',
+      ...inheritedStyles.reduce((acc, prop) => {
+        acc[prop] = 'inherit'
+        return acc
+      }, {}),
       ...generateResponsiveStyles(min, max)
     }
   })
@@ -52,6 +53,7 @@ ResponsiveWithMediaQueryStyleSheet.propTypes = {
    * To hide children of `Responsive` if the current viewport is larger than `max`
    */
   max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  inheritedStyles: PropTypes.arrayOf(PropTypes.string),
   children: PropTypes.node.isRequired
 }
 

package/src/Typography/Typography.jsx

@@ -76,7 +76,12 @@ const Typography = forwardRef(
     const { enableMediaQueryStyleSheet } = themeOptions
 
     const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
-    const themeTokens = useTokens('Typography', tokens, variant)
+    const themeTokens = useTokens(
+      'Typography',
+      tokens,
+      variant,
+      !enableMediaQueryStyleSheet && { viewport }
+    )
     const maxFontSizeMultiplier = enableMediaQueryStyleSheet
       ? getMaxFontMultiplier(themeTokens[viewport])
       : getMaxFontMultiplier(themeTokens)

package/src/index.js

@@ -17,6 +17,7 @@ export { default as ExpandCollapse, Accordion } from './ExpandCollapse'
 export { default as Feedback } from './Feedback'
 export { default as Fieldset } from './Fieldset'
 export { default as FlexGrid } from './FlexGrid'
+export { default as Footnote } from './Footnote'
 export { default as HorizontalScroll } from './HorizontalScroll'
 export * from './HorizontalScroll'
 export { default as Icon } from './Icon'

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

@@ -5,13 +5,14 @@ import { isMediaOrPseudo, deepClone, createCssRule } from '../utils/common'
 
 const createStyleSheet = (stylesWithQuery) => {
   if (!stylesWithQuery) return { ids: {}, styles: {}, fullStyles: {} }
-  let cleanStyles
+
   let ids = {}
+  const cleanStyles = deepClone(stylesWithQuery)
+
   Object.keys(stylesWithQuery).forEach((key) => {
     if (!stylesWithQuery?.[key]) return
 
     const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo)
-    cleanStyles = deepClone(stylesWithQuery)
     mediaQueriesAndPseudoClasses.forEach((query) => {
       const css = createDeclarationBlock(stylesWithQuery[key][query])
       const stringHash = `rnmq-${hash(`${key}${query}${css}`)}`