@telus-uds/components-base 1.70.0 → 1.72.0

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/Modal/ModalContent.jsx

@@ -25,14 +25,15 @@ const ModalContent = ({
   children,
   onCancel
 }) => {
+  const viewport = useViewport()
   const { headingColor, cancelButtonColor, ...themeTokens } = useThemeTokens(
     'Modal',
     tokens,
-    variant
+    variant,
+    { viewport }
   )
   const [scrollContainerHeight, setScrollContainerHeight] = useState(0)
   const [scrollContentHeight, setScrollContentHeight] = useState(0)
-  const viewport = useViewport()
 
   const handleContainerLayout = ({
     nativeEvent: {
@@ -128,7 +129,7 @@ const ModalContent = ({
             </Button>
           )}
           {hasCancelButton ? (
-            <View style={styles.styledTextButtonContainer}>
+            <View>
               <CancelButton tokens={{ color: cancelButtonColor }} onPress={onCancel}>
                 {cancelButtonText}
               </CancelButton>
@@ -145,9 +146,6 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column',
     minHeight: Platform.OS === 'web' ? '100%' : 'auto'
-  },
-  styledTextButtonContainer: {
-    flex: 1
   }
 })
 

package/src/OrderedList/Item.jsx

@@ -0,0 +1,152 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native'
+
+import {
+  getTokensPropType,
+  htmlAttrs,
+  selectSystemProps,
+  variantProp,
+  viewProps,
+  wrapStringsInText
+} from '../utils'
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
+import StackView from '../StackView'
+import Typography from '../Typography'
+import ItemBase from './ItemBase'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
+
+const selectItemTextStyles = (
+  { itemFontHeight, itemFontSize, itemLineHeight, itemFontName, itemColor },
+  themeOptions
+) =>
+  applyTextStyles({
+    fontWeight: itemFontHeight,
+    fontSize: itemFontSize,
+    fontName: itemFontName,
+    color: itemColor,
+    themeOptions,
+    lineHeight: itemLineHeight
+  })
+
+const selectItemCounterStyles = ({
+  itemBulletContainerWidth,
+  itemBulletContainerAlign,
+  itemFontWeight,
+  itemFontSize,
+  itemFontName,
+  itemLineHeight,
+  themeOptions,
+  listGutter,
+  itemColor
+}) => ({
+  color: itemColor,
+  width: itemBulletContainerWidth,
+  paddingRight: listGutter,
+  textAlign: itemBulletContainerAlign,
+  ...applyTextStyles({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    fontName: itemFontName,
+    themeOptions
+  }),
+  lineHeight: itemLineHeight * itemFontSize
+})
+
+const selectItemContentStyles = ({ interItemMargin, ...themeTokens }, isLastChild) => ({
+  ...themeTokens,
+  marginBottom: !isLastChild ? interItemMargin : 0
+})
+
+const Item = forwardRef(
+  ({ children, index, isLastChild, title, tokens, variant, ...rest }, ref) => {
+    const themeTokens = useThemeTokens('OrderedList', tokens, variant)
+    const headingTokens = title && {
+      lineHeight: themeTokens.itemLineHeight,
+      fontSize: themeTokens.itemFontSize,
+      color: themeTokens.itemColor,
+      fontName: themeTokens.headerFontName,
+      fontWeight: themeTokens.headerFontWeight
+    }
+
+    const { themeOptions } = useTheme()
+    const itemContent = wrapStringsInText(children, {
+      style: selectItemTextStyles(themeTokens, themeOptions)
+    })
+    const itemCounter = wrapStringsInText(`${index}.`, {
+      style: selectItemTextStyles(themeTokens, themeOptions)
+    })
+
+    return (
+      <ItemBase
+        ref={ref}
+        style={{ ...staticStyles.container, ...themeTokens }}
+        {...selectProps(rest)}
+      >
+        <View style={[staticStyles.itemCounter, selectItemCounterStyles(themeTokens)]}>
+          {itemCounter}
+        </View>
+        <View style={staticStyles.itemContent}>
+          {title ? (
+            <StackView tokens={{ flexShrink: 1 }} space={0}>
+              <Typography variant={{ size: 'h4' }} tokens={headingTokens}>
+                {title}
+              </Typography>
+              <View style={selectItemContentStyles(themeTokens, isLastChild)}>{itemContent}</View>
+            </StackView>
+          ) : (
+            <View style={selectItemContentStyles(themeTokens, isLastChild)}>{itemContent}</View>
+          )}
+        </View>
+      </ItemBase>
+    )
+  }
+)
+
+Item.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Item content
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Item index
+   */
+  index: PropTypes.number,
+  /**
+   * If true, the item is the last one on the list
+   */
+  isLastChild: PropTypes.bool,
+  /**
+   * Defines the title of the `OrderedList.Item`
+   */
+  title: PropTypes.string,
+  /**
+   * Item tokens
+   */
+  tokens: getTokensPropType('List'),
+  /**
+   * Item variant
+   */
+  variant: variantProp.propType
+}
+
+Item.displayName = 'OrderedListItem'
+
+Item.defaultProps = { title: undefined, tokens: {} }
+
+export default Item
+
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row'
+  },
+  itemCounter: {
+    flexWrap: 'wrap'
+  },
+  itemContent: {
+    flexDirection: 'column',
+    marginLeft: 8
+  }
+})