@telus-uds/components-base 1.69.0 → 1.71.0

package/src/Card/Card.jsx

@@ -1,11 +1,13 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import { View } from 'react-native'
 
-import { useThemeTokens } from '../ThemeProvider'
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils'
 import { useViewport } from '../ViewportProvider'
 import { a11yProps, selectSystemProps, viewProps } from '../utils/props'
 import CardBase from './CardBase'
+import PressableCardBase from './PressableCardBase'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -57,24 +59,84 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * you automatically make inaccessible its children, which may or may not be appropriate
  * depending on what you are trying to achieve.
  */
-const Card = forwardRef(({ children, tokens, variant, dataSet, ...rest }, ref) => {
-  const viewport = useViewport()
-  const themeTokens = useThemeTokens('Card', tokens, variant, { viewport })
+const Card = forwardRef(
+  ({ children, tokens, variant, dataSet, onPress, interactiveCard, ...rest }, ref) => {
+    const viewport = useViewport()
+    const themeTokens = useThemeTokens('Card', tokens, variant, { viewport })
+    const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
+      interactive: true,
+      ...(interactiveCard?.variant || {})
+    })
+    // When interactive area is present, spacing tokens should only be applied
+    // to individual Card sections, not Card as a whole
+    const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...restOfTokens } = themeTokens
 
-  return (
-    <CardBase ref={ref} tokens={themeTokens} dataSet={dataSet} {...selectProps(rest)}>
-      {children}
-    </CardBase>
-  )
-})
+    return (
+      <>
+        <CardBase
+          ref={ref}
+          tokens={interactiveCard?.body ? restOfTokens : themeTokens}
+          dataSet={dataSet}
+          {...selectProps(rest)}
+        >
+          {interactiveCard?.body ? (
+            <>
+              <PressableCardBase
+                ref={ref}
+                tokens={getThemeTokens}
+                dataSet={dataSet}
+                onPress={onPress}
+                {...selectProps(rest)}
+              >
+                {interactiveCard?.body}
+              </PressableCardBase>
+              {children ? (
+                <View style={{ paddingTop, paddingBottom, paddingLeft, paddingRight }}>
+                  {children}
+                </View>
+              ) : null}
+            </>
+          ) : (
+            children
+          )}
+        </CardBase>
+      </>
+    )
+  }
+)
 
 Card.displayName = 'Card'
 
 Card.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * Card content.
+   */
   children: PropTypes.node,
+  /**
+   * Card tokens.
+   */
   tokens: getTokensPropType('Card'),
-  variant: variantProp.propType
+  /**
+   * Card variant.
+   */
+  variant: variantProp.propType,
+  /**
+   * Function to call on pressing the card.
+   * Note: This is only available when `interactiveCard` prop is used.
+   */
+  onPress: PropTypes.func,
+  /**
+   * Object to set interactive card's properties
+   * - body: The body of the interactive card, can be any renderable node
+   * - tokens: The tokens to be used for the interactive card
+   * - variant: The variant to be used for the interactive card
+   */
+  interactiveCard: PropTypes.shape({
+    body: PropTypes.node,
+    tokens: getTokensPropType('Card'),
+    variant: variantProp.propType
+  })
 }
 
 export default Card

package/src/Card/PressableCardBase.jsx

@@ -54,6 +54,7 @@ const PressableCardBase = forwardRef(
       inactive,
       href,
       hrefAttrs,
+      dataSet,
       accessibilityRole = href ? 'link' : undefined,
       ...rawRest
     },
@@ -103,6 +104,7 @@ const PressableCardBase = forwardRef(
         onKeyDown={handleKeyDown}
         hrefAttrs={hrefAttrs}
         style={getOuterBorderStyle}
+        dataSet={dataSet}
         {...selectProps({ ...rest, accessibilityRole })}
       >
         {(pressableState) => (

package/src/FlexGrid/Col/Col.jsx

@@ -1,12 +1,10 @@
 import React, { forwardRef, useContext } from 'react'
 import PropTypes from 'prop-types'
-import { Platform, StyleSheet } from 'react-native'
-import { viewports } from '@telus-uds/system-constants'
+import { Platform } from 'react-native'
 
 import GutterContext from '../providers/GutterContext'
-import { useViewport } from '../../ViewportProvider'
 import applyInheritance from '../helpers'
-import { responsiveProps, BaseView } from '../../utils'
+import { responsiveProps, BaseView, StyleSheet, createMediaQueryStyles } from '../../utils'
 
 const Col = forwardRef(
   (
@@ -29,8 +27,6 @@ const Col = forwardRef(
     ref
   ) => {
     const gutter = useContext(GutterContext)
-    const viewPort = useViewport()
-
     const hiddenLevels = applyInheritance([xs, sm, md, lg, xl])
 
     const getHorizontalAlignLevel = () => {
@@ -84,65 +80,11 @@ const Col = forwardRef(
       return {}
     }
 
-    const sizeStyles = (sizes) => {
-      const currViewport = Object.keys(sizes).find((key) => key.startsWith(viewPort))
-      const currSize = sizes[currViewport]
-      return {
-        ...calculateWidth(currSize)
-      }
-    }
-
-    const offsetStyles = (offsets) => {
-      const currViewport = Object.keys(offsets).find((key) => key.startsWith(viewPort))
-      const currOffset = offsets[currViewport]
-      return {
-        ...calculateOffset(currOffset)
-      }
-    }
-
-    const gutterPadding = {
-      paddingLeft: gutter ? 16 : 0,
-      paddingRight: gutter ? 16 : 0
-    }
-
-    let hidingStyles = {}
-
     // TODO: consider setting this to always 'flex' in a major release.
     // `display: block` is invalid in native apps.
     // See https://telusdigital.atlassian.net/browse/UDS1-92
     const shown = !flex && Platform.OS === 'web' ? 'block' : 'flex'
 
-    if (viewPort === viewports.xs) {
-      hidingStyles = {
-        display: hiddenLevels[0] === 0 ? 'none' : shown,
-        textAlign: horizontalAlignLevel[0]
-      }
-    }
-    if (viewPort === viewports.sm) {
-      hidingStyles = {
-        display: hiddenLevels[1] === 0 ? 'none' : shown,
-        textAlign: horizontalAlignLevel[1]
-      }
-    }
-    if (viewPort === viewports.md) {
-      hidingStyles = {
-        display: hiddenLevels[2] === 0 ? 'none' : shown,
-        textAlign: horizontalAlignLevel[2]
-      }
-    }
-    if (viewPort === viewports.lg) {
-      hidingStyles = {
-        display: hiddenLevels[3] === 0 ? 'none' : shown,
-        textAlign: horizontalAlignLevel[3]
-      }
-    }
-    if (viewPort === viewports.xl) {
-      hidingStyles = {
-        display: hiddenLevels[4] === 0 ? 'none' : shown,
-        textAlign: horizontalAlignLevel[4]
-      }
-    }
-
     const sizesArray = [xs, sm, md, lg, xl]
     const offSetsArray = [xsOffset, smOffset, mdOffset, lgOffset, xlOffset]
     const sizesWithIheritance = applyInheritance(sizesArray)
@@ -161,18 +103,53 @@ const Col = forwardRef(
       lg: offsetsWithIheritance[3],
       xl: offsetsWithIheritance[4]
     }
+
+    const mediaQueryStyles = createMediaQueryStyles({
+      xs: {
+        display: hiddenLevels[0] === 0 ? 'none' : shown,
+        textAlign: horizontalAlignLevel[0],
+        ...calculateWidth(sizes.xs),
+        ...calculateOffset(offsets.xs)
+      },
+      sm: {
+        display: hiddenLevels[1] === 0 ? 'none' : shown,
+        textAlign: horizontalAlignLevel[1],
+        ...calculateWidth(sizes.sm),
+        ...calculateOffset(offsets.sm)
+      },
+      md: {
+        display: hiddenLevels[2] === 0 ? 'none' : shown,
+        textAlign: horizontalAlignLevel[2],
+        ...calculateWidth(sizes.md),
+        ...calculateOffset(offsets.md)
+      },
+      lg: {
+        display: hiddenLevels[3] === 0 ? 'none' : shown,
+        textAlign: horizontalAlignLevel[3],
+        ...calculateWidth(sizes.lg),
+        ...calculateOffset(offsets.lg)
+      },
+      xl: {
+        display: hiddenLevels[4] === 0 ? 'none' : shown,
+        textAlign: horizontalAlignLevel[4],
+        ...calculateWidth(sizes.xl),
+        ...calculateOffset(offsets.xl)
+      }
+    })
+
+    const { ids, styles } = StyleSheet.create({
+      col: {
+        flexGrow: 1,
+        flexShrink: 0,
+        flexBasis: 'auto',
+        maxWidth: '100%',
+        paddingLeft: gutter ? 16 : 0,
+        paddingRight: gutter ? 16 : 0,
+        ...mediaQueryStyles
+      }
+    })
     return (
-      <BaseView
-        ref={ref}
-        {...viewProps}
-        style={[
-          styles.col,
-          gutterPadding,
-          offsetStyles(offsets),
-          sizeStyles(sizes),
-          { ...hidingStyles }
-        ]}
-      >
+      <BaseView ref={ref} {...viewProps} style={[styles.col]} dataSet={{ media: ids.col }}>
         {children}
       </BaseView>
     )
@@ -180,15 +157,6 @@ const Col = forwardRef(
 )
 Col.displayName = 'Col'
 
-const styles = StyleSheet.create({
-  col: {
-    flexGrow: 1,
-    flexShrink: 0,
-    flexBasis: 'auto',
-    maxWidth: '100%'
-  }
-})
-
 /*
  * We're disabling default props since passing undefined props to
  * the react-flexbox-grid component sets up blank classes that may cause

package/src/FlexGrid/FlexGrid.jsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { StyleSheet } from 'react-native'
+
 import { viewports } from '@telus-uds/system-constants'
 import {
   a11yProps,
@@ -8,12 +8,12 @@ import {
   getA11yPropsFromHtmlTag,
   layoutTags,
   selectSystemProps,
-  BaseView
+  BaseView,
+  StyleSheet,
+  createMediaQueryStyles
 } from '../utils'
-
 import Row from './Row'
 import Col from './Col'
-import { useViewport } from '../ViewportProvider'
 import GutterContext from './providers/GutterContext'
 import applyInheritance from './helpers'
 
@@ -41,33 +41,38 @@ const FlexGrid = forwardRef(
     },
     ref
   ) => {
-    const viewPort = useViewport()
     const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse])
-    const marginVertical = 0
-    const marginHorizontal = outsideGutter ? 'auto' : -16
-    const width = outsideGutter ? '100%' : 'auto'
-    let flexDirection
-    let maxWidth
-    if (viewPort === viewports.xs) {
-      // no maxWidth for xs
-      flexDirection = reverseLevel[0] ? 'column-reverse' : 'column'
-    }
-    if (viewPort === viewports.sm) {
-      maxWidth = limitWidth && viewports.map.get(viewports.sm)
-      flexDirection = reverseLevel[1] ? 'column-reverse' : 'column'
-    }
-    if (viewPort === viewports.md) {
-      maxWidth = limitWidth && viewports.map.get(viewports.md)
-      flexDirection = reverseLevel[2] ? 'column-reverse' : 'column'
-    }
-    if (viewPort === viewports.lg) {
-      maxWidth = limitWidth && viewports.map.get(viewports.lg)
-      flexDirection = reverseLevel[3] ? 'column-reverse' : 'column'
-    }
-    if (viewPort === viewports.xl) {
-      maxWidth = limitWidth && viewports.map.get(viewports.xl)
-      flexDirection = reverseLevel[4] ? 'column-reverse' : 'column'
-    }
+    const mediaQueryStyles = createMediaQueryStyles({
+      xs: {
+        flexDirection: reverseLevel[0] ? 'column-reverse' : 'column'
+      },
+      sm: {
+        maxWidth: limitWidth && viewports.map.get('sm'),
+        flexDirection: reverseLevel[1] ? 'column-reverse' : 'column'
+      },
+      md: {
+        maxWidth: limitWidth && viewports.map.get('md'),
+        flexDirection: reverseLevel[2] ? 'column-reverse' : 'column'
+      },
+      lg: {
+        maxWidth: limitWidth && viewports.map.get('lg'),
+        flexDirection: reverseLevel[3] ? 'column-reverse' : 'column'
+      },
+      xl: {
+        maxWidth: limitWidth && viewports.map.get('xl'),
+        flexDirection: reverseLevel[4] ? 'column-reverse' : 'column'
+      }
+    })
+
+    const { ids, styles } = StyleSheet.create({
+      flexgrid: {
+        flexWrap: 'wrap',
+        width: outsideGutter ? '100%' : 'auto',
+        marginVertical: 0,
+        marginHorizontal: outsideGutter ? 'auto' : -16,
+        ...mediaQueryStyles
+      }
+    })
 
     const props = {
       accessibilityRole,
@@ -77,14 +82,7 @@ const FlexGrid = forwardRef(
 
     return (
       <GutterContext.Provider value={gutter}>
-        <BaseView
-          ref={ref}
-          {...props}
-          style={[
-            styles.grid,
-            { marginHorizontal, marginVertical, width, flexDirection, maxWidth }
-          ]}
-        >
+        <BaseView ref={ref} {...props} style={[styles.flexgrid]} dataSet={{ media: ids.flexgrid }}>
           {children}
         </BaseView>
       </GutterContext.Provider>
@@ -93,12 +91,6 @@ const FlexGrid = forwardRef(
 )
 FlexGrid.displayName = 'FlexGrid'
 
-const styles = StyleSheet.create({
-  grid: {
-    flexWrap: 'wrap'
-  }
-})
-
 FlexGrid.propTypes = {
   ...selectedSystemPropTypes,
   /**

package/src/FlexGrid/Row/Row.jsx

@@ -1,11 +1,8 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { StyleSheet } from 'react-native'
-import { viewports } from '@telus-uds/system-constants'
 
-import { useViewport } from '../../ViewportProvider'
 import applyInheritance from '../helpers'
-import { BaseView } from '../../utils'
+import { BaseView, StyleSheet, createMediaQueryStyles } from '../../utils'
 
 const horizontalAlignStyles = (horizontalAlign) => {
   switch (horizontalAlign) {
@@ -69,48 +66,45 @@ const Row = forwardRef(
     },
     ref
   ) => {
-    const viewPort = useViewport()
     const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse])
-
-    let flexDirection = ''
-    let flexWrap = ''
-
-    if (viewPort === viewports.xs) {
-      flexDirection = reverseLevel[0] ? 'row-reverse' : 'row'
-      flexWrap = reverseLevel[0] ? 'wrap-reverse' : 'wrap'
-    }
-    if (viewPort === viewports.sm) {
-      flexDirection = reverseLevel[1] ? 'row-reverse' : 'row'
-      flexWrap = reverseLevel[1] ? 'wrap-reverse' : 'wrap'
-    }
-    if (viewPort === viewports.md) {
-      flexDirection = reverseLevel[2] ? 'row-reverse' : 'row'
-      flexWrap = reverseLevel[2] ? 'wrap-reverse' : 'wrap'
-    }
-    if (viewPort === viewports.lg) {
-      flexDirection = reverseLevel[3] ? 'row-reverse' : 'row'
-      flexWrap = reverseLevel[3] ? 'wrap-reverse' : 'wrap'
-    }
-    if (viewPort === viewports.xl) {
-      flexDirection = reverseLevel[4] ? 'row-reverse' : 'row'
-      flexWrap = reverseLevel[4] ? 'wrap-reverse' : 'wrap'
-    }
-
+    const mediaQueryStyles = createMediaQueryStyles({
+      xs: {
+        flexDirection: reverseLevel[0] ? 'row-reverse' : 'row',
+        flexWrap: reverseLevel[0] ? 'wrap-reverse' : 'wrap'
+      },
+      sm: {
+        flexDirection: reverseLevel[1] ? 'row-reverse' : 'row',
+        flexWrap: reverseLevel[1] ? 'wrap-reverse' : 'wrap'
+      },
+      md: {
+        flexDirection: reverseLevel[2] ? 'row-reverse' : 'row',
+        flexWrap: reverseLevel[2] ? 'wrap-reverse' : 'wrap'
+      },
+      lg: {
+        flexDirection: reverseLevel[3] ? 'row-reverse' : 'row',
+        flexWrap: reverseLevel[3] ? 'wrap-reverse' : 'wrap'
+      },
+      xl: {
+        flexDirection: reverseLevel[4] ? 'row-reverse' : 'row',
+        flexWrap: reverseLevel[4] ? 'wrap-reverse' : 'wrap'
+      }
+    })
+    const { ids, styles } = StyleSheet.create({
+      row: {
+        width: '100%',
+        marginVertical: 0,
+        marginHorizontal: 'auto',
+        flexGrow: 0,
+        flexShrink: 1,
+        flexBasis: 'auto',
+        ...horizontalAlignStyles(horizontalAlign),
+        ...verticalAlignStyles(verticalAlign),
+        ...distributeStyles(distribute),
+        ...mediaQueryStyles
+      }
+    })
     return (
-      <BaseView
-        ref={ref}
-        {...rest}
-        style={[
-          styles.row,
-          {
-            flexDirection,
-            flexWrap,
-            ...horizontalAlignStyles(horizontalAlign),
-            ...verticalAlignStyles(verticalAlign),
-            ...distributeStyles(distribute)
-          }
-        ]}
-      >
+      <BaseView ref={ref} {...rest} style={[styles.row]} dataSet={{ media: ids.row }}>
         {children}
       </BaseView>
     )
@@ -118,18 +112,6 @@ const Row = forwardRef(
 )
 Row.displayName = 'Row'
 
-const styles = StyleSheet.create({
-  row: {
-    width: '100%',
-    marginVertical: 0,
-    marginHorizontal: 'auto',
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 'auto',
-    flexDirection: 'row'
-  }
-})
-
 Row.propTypes = {
   /**
    * Align columns horizontally within their row.

package/src/Icon/IconText.jsx

@@ -23,12 +23,22 @@ const IconText = forwardRef(
     // Inline images on Android are always baseline-aligned which makes them look misaligned - offset it.
     // See abandoned issue https://github.com/facebook/react-native/issues/6529
     const size = iconProps?.tokens?.size ?? 0
+    const valueTranslateY = iconProps?.tokens?.translateY
+    /**
+     * These calculations were carried out using a set of linear equations to calculate that the
+     * position of the icon "->"" is aligned to the first line of the tooltip text on IOS and Android.
+     * The issue was mainly on IOS, the translateY style didn't match with the old calculations.
+     */
+    const resultY = valueTranslateY ? Math.floor(-1 * (valueTranslateY - 4)) : 0
+
     const iconAdjustedAndriod = (
       <View style={{ transform: [{ translateY: size * 0.2 }] }}>{iconContent}</View>
     )
 
     const iconAdjustedIOS = (
-      <View style={{ transform: [{ translateY: size * 0.01 }] }}>{iconContent}</View>
+      <View style={{ transform: [{ translateY: valueTranslateY ? resultY : size * 0.01 }] }}>
+        {iconContent}
+      </View>
     )
 
     const mobile = Platform.OS === 'android' ? iconAdjustedAndriod : iconAdjustedIOS

package/src/Link/ChevronLink.jsx

@@ -30,6 +30,7 @@ const ChevronLink = forwardRef(
     }
 
     const getTokens = useThemeTokensCallback('Link', applyChevronTokens, variant)
+
     return (
       <LinkBase
         {...otherlinkProps}

package/src/Link/LinkBase.jsx

@@ -72,6 +72,7 @@ const selectDecorationStyles = ({ color, textLine, textLineStyle, alignSelf }) =
   textDecorationLine: textLine,
   textDecorationStyle: textLineStyle,
   alignSelf,
+
   ...Platform.select({
     web: {
       // TODO: https://github.com/telus/universal-design-system/issues/487
@@ -80,12 +81,21 @@ const selectDecorationStyles = ({ color, textLine, textLineStyle, alignSelf }) =
   })
 })
 
-const selectIconTokens = ({ color, iconSize, iconTranslateX, iconTranslateY }) => ({
-  color,
-  translateX: iconTranslateX,
-  translateY: iconTranslateY,
-  size: iconSize
-})
+const selectIconTokens = ({ color, iconSize, blockFontSize, iconTranslateX }) => {
+  /**
+   * These calculations were carried out using a set of linear equations to calculate that the
+   * position of the icon "->"" is aligned to the first line of the tooltip text.
+   * The base equation is: X/4 + Y/4 - 4 - |X - Y| = Z
+   * where X = blockFontSize, Y = iconSize and Z = translateY
+   */
+  const translateY = blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize)
+  return {
+    color,
+    translateX: iconTranslateX,
+    translateY: translateY < 0 ? 0 : translateY,
+    size: iconSize
+  }
+}
 
 /**
  * Renders a pressable text link, with optional icon. This is rendered as a block element

package/src/utils/index.js

@@ -4,7 +4,7 @@ export * from './children'
 export * from './input'
 export * from './pressability'
 export * from './props'
-
+export * from './ssr-media-query'
 export { default as info } from './info'
 export { default as useCopy } from './useCopy'
 export { default as useHash } from './useHash'

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

@@ -0,0 +1,61 @@
+import mediaQuery from 'css-mediaquery'
+import { Dimensions, Platform } from 'react-native'
+import { addCss } from './utils/inject'
+import createDeclarationBlock from './utils/create-declaration-block'
+import hash from './hash'
+import { isMediaOrPseudo, isMedia, deepClone, createCssRule } from './utils/common'
+
+const createStyleSheet = (stylesWithQuery) => {
+  if (!stylesWithQuery) return { ids: {}, styles: {}, fullStyles: {} }
+  let cleanStyles
+  let ids = {}
+  Object.keys(stylesWithQuery).forEach((key) => {
+    if (!stylesWithQuery?.[key]) return
+
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo)
+    if (Platform.OS === 'web') {
+      cleanStyles = deepClone(stylesWithQuery)
+      mediaQueriesAndPseudoClasses.forEach((query) => {
+        const css = createDeclarationBlock(stylesWithQuery[key][query])
+        const stringHash = `rnmq-${hash(`${key}${query}${css}`)}`
+        const rule = createCssRule(query, stringHash, css)
+
+        addCss(`${stringHash}`, rule)
+        delete cleanStyles[key][query]
+
+        ids = {
+          ...ids,
+          [key]: `${ids?.[key] ? `${ids[key]} ` : ''}${stringHash}`
+        }
+      })
+    } else {
+      cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery))
+      mediaQueriesAndPseudoClasses.forEach((str) => {
+        if (isMedia(str)) {
+          const mqStr = str.replace('@media', '')
+          const { width, height } = Dimensions.get('window')
+
+          const isMatchingMediaQuery = mediaQuery.match(mqStr, {
+            width,
+            height,
+            orientation: width > height ? 'landscape' : 'portrait',
+            'aspect-ratio': width / height
+          })
+
+          if (isMatchingMediaQuery) {
+            cleanStyles = {
+              ...cleanStyles,
+              [key]: { ...cleanStyles[key], ...stylesWithQuery[key][str] }
+            }
+          }
+        }
+
+        delete cleanStyles[key][str]
+      })
+    }
+  })
+
+  return { ids, styles: cleanStyles, fullStyles: stylesWithQuery }
+}
+
+export default createStyleSheet