@telus-uds/components-base 1.72.0 → 1.74.0

package/src/Box/Box.jsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { View, ScrollView } from 'react-native'
+import { View, ScrollView, Platform } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
@@ -23,17 +23,20 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * @typedef {import('../utils/props/spacingProps.js').SpacingOptions} SpacingOptions
  */
 
-const selectBoxStyles = ({
-  backgroundColor,
-  gradient,
-  borderWidth,
-  borderColor,
-  borderTopLeftRadius,
-  borderTopRightRadius,
-  borderBottomLeftRadius,
-  borderBottomRightRadius,
-  ...rest
-}) => {
+const selectBoxStyles = (
+  {
+    backgroundColor,
+    gradient,
+    borderWidth,
+    borderColor,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    ...rest
+  },
+  customGradient
+) => {
   const styles = {
     backgroundColor,
     borderWidth,
@@ -48,7 +51,12 @@ const selectBoxStyles = ({
       angle,
       stops: [stopOne, stopTwo]
     } = gradient
-    styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`
+
+    if (Platform.OS === 'web') {
+      styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75%, ${stopTwo.color})`
+    } else if (customGradient && Platform.OS !== 'web') {
+      styles.colors = [stopOne.color, stopTwo.color]
+    }
   }
 
   const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
@@ -145,6 +153,7 @@ const Box = forwardRef(
       accessibilityRole,
       testID,
       dataSet,
+      customGradient,
       ...rest
     },
     ref
@@ -162,21 +171,26 @@ const Box = forwardRef(
       paddingRight: useSpacingScale(right),
       paddingTop: useSpacingScale(top),
       paddingBottom: useSpacingScale(bottom),
-      ...selectBoxStyles(themeTokens)
+      ...selectBoxStyles(themeTokens, customGradient)
     }
 
+    const childrenToRender =
+      typeof customGradient === 'function'
+        ? customGradient(styles.colors, styles)(children)
+        : children
+
     if (scroll) {
       const scrollProps = typeof scroll === 'object' ? scroll : {}
       scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle]
       return (
         <ScrollView {...scrollProps} {...props} testID={testID} dataSet={dataSet} ref={ref}>
-          {children}
+          {childrenToRender}
         </ScrollView>
       )
     }
     return (
       <View {...props} style={styles} testID={testID} dataSet={dataSet} ref={ref}>
-        {children}
+        {childrenToRender}
       </View>
     )
   }
@@ -266,7 +280,11 @@ Box.propTypes = {
   /**
    * Box accepts any content as children.
    */
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  /**
+  Use this prop if need to add a custom gradient for mobile
+  */
+  customGradient: PropTypes.func
 }
 
 export default Box

package/src/ExpandCollapse/Panel.jsx

@@ -168,7 +168,7 @@ const ExpandCollapsePanel = forwardRef(
               })
             }}
           >
-            <View style={selectContainerStyles(themeTokens)}>{isExpanded ? children : null}</View>
+            <View style={selectContainerStyles(themeTokens)}>{children}</View>
           </View>
         </Animated.View>
       </View>

package/src/FlexGrid/Col/Col.jsx

@@ -5,6 +5,8 @@ import { Platform } from 'react-native'
 import GutterContext from '../providers/GutterContext'
 import applyInheritance from '../helpers'
 import { responsiveProps, BaseView, StyleSheet, createMediaQueryStyles } from '../../utils'
+import { useViewport } from '../../ViewportProvider'
+import { useTheme } from '../../ThemeProvider'
 
 const Col = forwardRef(
   (
@@ -27,6 +29,10 @@ const Col = forwardRef(
     ref
   ) => {
     const gutter = useContext(GutterContext)
+    const viewport = useViewport()
+    const {
+      themeOptions: { enableMediaQueryStyleSheet }
+    } = useTheme()
     const hiddenLevels = applyInheritance([xs, sm, md, lg, xl])
 
     const getHorizontalAlignLevel = () => {
@@ -104,7 +110,16 @@ const Col = forwardRef(
       xl: offsetsWithIheritance[4]
     }
 
-    const mediaQueryStyles = createMediaQueryStyles({
+    const staticStyles = {
+      flexGrow: 1,
+      flexShrink: 0,
+      flexBasis: 'auto',
+      maxWidth: '100%',
+      paddingLeft: gutter ? 16 : 0,
+      paddingRight: gutter ? 16 : 0
+    }
+
+    const stylesByViewport = {
       xs: {
         display: hiddenLevels[0] === 0 ? 'none' : shown,
         textAlign: horizontalAlignLevel[0],
@@ -135,21 +150,35 @@ const Col = forwardRef(
         ...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
+    let colStyles
+    let mediaIds
+
+    if (enableMediaQueryStyleSheet) {
+      const mediaQueryStyles = createMediaQueryStyles(stylesByViewport)
+      const { ids, styles } = StyleSheet.create({
+        col: {
+          ...staticStyles,
+          ...mediaQueryStyles
+        }
+      })
+      colStyles = styles.col
+      mediaIds = ids.col
+    } else {
+      colStyles = {
+        ...staticStyles,
+        ...stylesByViewport[viewport]
       }
-    })
+    }
+
     return (
-      <BaseView ref={ref} {...viewProps} style={[styles.col]} dataSet={{ media: ids.col }}>
+      <BaseView
+        ref={ref}
+        {...viewProps}
+        style={colStyles}
+        dataSet={mediaIds && { media: mediaIds }}
+      >
         {children}
       </BaseView>
     )

package/src/FlexGrid/FlexGrid.jsx

@@ -16,6 +16,8 @@ import Row from './Row'
 import Col from './Col'
 import GutterContext from './providers/GutterContext'
 import applyInheritance from './helpers'
+import { useTheme } from '../ThemeProvider'
+import { useViewport } from '../ViewportProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -42,7 +44,15 @@ const FlexGrid = forwardRef(
     ref
   ) => {
     const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse])
-    const mediaQueryStyles = createMediaQueryStyles({
+    const viewport = useViewport()
+    const {
+      themeOptions: { enableMediaQueryStyleSheet }
+    } = useTheme()
+
+    let flexgridStyles
+    let mediaIds
+
+    const stylesByViewport = {
       xs: {
         flexDirection: reverseLevel[0] ? 'column-reverse' : 'column'
       },
@@ -62,17 +72,31 @@ const FlexGrid = forwardRef(
         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 staticStyles = {
+      flexWrap: 'wrap',
+      width: outsideGutter ? '100%' : 'auto',
+      marginVertical: 0,
+      marginHorizontal: outsideGutter ? 'auto' : -16
+    }
+
+    if (enableMediaQueryStyleSheet) {
+      const mediaQueryStyles = createMediaQueryStyles(stylesByViewport)
+      const { ids, styles } = StyleSheet.create({
+        flexgrid: {
+          ...staticStyles,
+          ...mediaQueryStyles
+        }
+      })
+      flexgridStyles = styles.flexgrid
+      mediaIds = ids.flexgrid
+    } else {
+      flexgridStyles = {
+        ...staticStyles,
+        ...stylesByViewport[viewport]
       }
-    })
+    }
 
     const props = {
       accessibilityRole,
@@ -82,7 +106,12 @@ const FlexGrid = forwardRef(
 
     return (
       <GutterContext.Provider value={gutter}>
-        <BaseView ref={ref} {...props} style={[styles.flexgrid]} dataSet={{ media: ids.flexgrid }}>
+        <BaseView
+          ref={ref}
+          {...props}
+          style={flexgridStyles}
+          dataSet={mediaIds && { media: mediaIds }}
+        >
           {children}
         </BaseView>
       </GutterContext.Provider>

package/src/FlexGrid/Row/Row.jsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 
 import applyInheritance from '../helpers'
 import { BaseView, StyleSheet, createMediaQueryStyles } from '../../utils'
+import { useTheme } from '../../ThemeProvider'
+import { useViewport } from '../../ViewportProvider'
 
 const horizontalAlignStyles = (horizontalAlign) => {
   switch (horizontalAlign) {
@@ -66,8 +68,23 @@ const Row = forwardRef(
     },
     ref
   ) => {
+    const {
+      themeOptions: { enableMediaQueryStyleSheet }
+    } = useTheme()
+    const viewport = useViewport()
+    const staticStyles = {
+      width: '100%',
+      marginVertical: 0,
+      marginHorizontal: 'auto',
+      flexGrow: 0,
+      flexShrink: 1,
+      flexBasis: 'auto',
+      ...horizontalAlignStyles(horizontalAlign),
+      ...verticalAlignStyles(verticalAlign),
+      ...distributeStyles(distribute)
+    }
     const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse])
-    const mediaQueryStyles = createMediaQueryStyles({
+    const stylesByViewport = {
       xs: {
         flexDirection: reverseLevel[0] ? 'row-reverse' : 'row',
         flexWrap: reverseLevel[0] ? 'wrap-reverse' : 'wrap'
@@ -88,23 +105,30 @@ const Row = forwardRef(
         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
+    }
+
+    let rowStyles
+    let mediaIds
+
+    if (enableMediaQueryStyleSheet) {
+      const mediaQueryStyles = createMediaQueryStyles(stylesByViewport)
+      const { ids, styles } = StyleSheet.create({
+        row: {
+          ...staticStyles,
+          ...mediaQueryStyles
+        }
+      })
+      rowStyles = styles.row
+      mediaIds = ids.row
+    } else {
+      rowStyles = {
+        ...staticStyles,
+        ...stylesByViewport[viewport]
       }
-    })
+    }
+
     return (
-      <BaseView ref={ref} {...rest} style={[styles.row]} dataSet={{ media: ids.row }}>
+      <BaseView ref={ref} {...rest} style={rowStyles} dataSet={mediaIds && { media: mediaIds }}>
         {children}
       </BaseView>
     )

package/src/Footnote/Footnote.jsx

@@ -0,0 +1,316 @@
+import React, { useEffect, useState, useCallback } from 'react'
+import PropTypes from 'prop-types'
+import {
+  StyleSheet,
+  Text,
+  Dimensions,
+  TouchableWithoutFeedback,
+  Modal,
+  View,
+  SafeAreaView,
+  ScrollView
+} from 'react-native'
+
+import defaultDictionary from './dictionary'
+import { getTokensPropType, htmlAttrs, selectSystemProps, useCopy, viewProps } from '../utils'
+import { useViewport } from '../ViewportProvider'
+import { useTheme, useThemeTokens } from '../ThemeProvider'
+import Typography from '../Typography'
+import Icon from '../Icon'
+import OrderedList from '../OrderedList'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
+
+const selectFootnoteStyle = ({
+  screenHeight,
+  footnoteBackground,
+  isVisible,
+  footnoteBorderTopSizeMd,
+  footnoteBorderColorMd
+}) => ({
+  left: 0,
+  backgroundColor: footnoteBackground,
+  display: isVisible ? 'flex' : 'none',
+  height: screenHeight,
+  borderTopColor: footnoteBorderColorMd,
+  borderTopWidth: footnoteBorderTopSizeMd
+})
+
+const selectFootnoteHeaderContentStyle = ({
+  footnoteHeaderPaddingTop,
+  footnoteHeaderPaddingBottom,
+  footnoteHeaderPaddingRight,
+  footnoteHeaderPaddingLeft,
+  headerMargin
+}) => ({
+  paddingTop: footnoteHeaderPaddingTop,
+  paddingBottom: footnoteHeaderPaddingBottom,
+  paddingRight: footnoteHeaderPaddingRight,
+  paddingLeft: footnoteHeaderPaddingLeft,
+  marginRight: headerMargin
+})
+
+const selectFootnoteCloseButtonStyle = ({
+  closeButtonBorderSize,
+  closeButtonBorderColor,
+  closeButtonHeight,
+  closeButtonBackgroundColor,
+  closeButtonMarginTop,
+  closeButtonMarginRight,
+  closeButtonMarginBottom,
+  closeButtonMarginLeft,
+  closeButtonWidth
+}) => ({
+  backgroundColor: closeButtonBackgroundColor,
+  borderWidth: closeButtonBorderSize,
+  borderColor: closeButtonBorderColor,
+  height: closeButtonHeight,
+  marginTop: closeButtonMarginTop,
+  marginRight: closeButtonMarginRight,
+  marginBottom: closeButtonMarginBottom,
+  marginLeft: closeButtonMarginLeft,
+  width: closeButtonWidth
+})
+
+const selectFootnoteBodyStyle = ({
+  maxWidth,
+  footnoteBodyBackground,
+  footnoteBodyPaddingTop,
+  footnoteBodyPaddingRight,
+  footnoteBodyPaddingBottom,
+  footnoteBodyPaddingLeft,
+  screenWidth
+}) => ({
+  maxWidth,
+  backgroundColor: footnoteBodyBackground,
+  paddingTop: footnoteBodyPaddingTop,
+  paddingRight: footnoteBodyPaddingRight * 2,
+  paddingBottom: footnoteBodyPaddingBottom,
+  paddingLeft: footnoteBodyPaddingLeft,
+  width: screenWidth
+})
+
+const selectCustomContentFontStyle = ({
+  listItemColor,
+  listItemFontSize,
+  listItemLineHeight,
+  listItemPaddingLeft,
+  listItemFontName,
+  listItemFontWeight
+}) => ({
+  fontSize: listItemFontSize,
+  lineHeight: listItemLineHeight * listItemFontSize,
+  paddingLeft: listItemPaddingLeft,
+  color: listItemColor,
+  fontName: listItemFontName,
+  fontWeight: listItemFontWeight
+})
+
+/**
+ * Use `Footnote` to display a single legal content.
+ *
+ * ## Usage Criteria
+ *
+ * - Use `Footnote` to display a single legal statement
+ * - Display on top of all UI, including other sticky elements such as Cart Summary
+ * - Dismiss by clicking on the close button, clicking anywhere outside of the `Footnote`
+ * - Use copy to set language, ‘en’ for English or ‘fr’ for French
+ *
+ * ## Accessibility requirements
+ *
+ * - Only one instance of `Footnote` should display at a time
+ * - Place `Footnote` as the last element in the body or main
+ * - When `Footnote` is open, the inert prop must be set on all children of body excluding the Footnote
+ * - When `Footnote` is closed, focus must return to the initiating element
+ */
+const Footnote = ({
+  copy = 'en',
+  number = undefined,
+  content = undefined,
+  onClose,
+  isOpen = false,
+  tokens,
+  variant = {},
+  dictionary = defaultDictionary,
+  ...rest
+}) => {
+  const viewport = useViewport()
+
+  const themeTokens = useThemeTokens('Footnote', tokens, variant, { viewport })
+  const themeOptions = useTheme()
+
+  const getCopy = useCopy({ dictionary, copy })
+
+  const [isVisible, setIsVisible] = useState(false)
+
+  const screenHeight = Dimensions.get('screen').height
+  const screenWidth = Dimensions.get('screen').width
+
+  const getFootnoteBodyContent = useCallback(() => {
+    if (!number || !content) {
+      return null
+    }
+
+    if (React.isValidElement(content)) {
+      return <View style={selectCustomContentFontStyle(themeTokens)}>{content}</View>
+    }
+
+    return (
+      // TODO: Extract the OrderedList.Item from the array when the issue #4361 is fixed
+      <OrderedList start={number}>
+        {[
+          <OrderedList.Item key={number}>
+            <Text style={selectCustomContentFontStyle(themeTokens)}>{content}</Text>
+          </OrderedList.Item>
+        ]}
+      </OrderedList>
+    )
+  }, [content, number, themeTokens])
+
+  useEffect(() => {
+    if (isOpen) {
+      setIsVisible(true)
+    }
+  }, [isOpen])
+
+  const closeFootnote = useCallback(
+    (event, options) => {
+      onClose(event, options)
+      setIsVisible(false)
+    },
+    [onClose]
+  )
+
+  const handleClose = (event) => closeFootnote(event, { returnFocus: true })
+
+  return (
+    <View {...selectProps(rest)}>
+      <Modal visible={isVisible} animationType="slide">
+        <SafeAreaView style={staticStyles.container}>
+          <ScrollView
+            style={selectFootnoteStyle({
+              screenHeight,
+              isVisible,
+              ...themeTokens
+            })}
+          >
+            <View style={staticStyles.content}>
+              <View
+                style={[selectFootnoteHeaderContentStyle(themeTokens), staticStyles.headerContent]}
+              >
+                <Typography
+                  tokens={{
+                    fontSize: themeTokens?.headerFontSize,
+                    lineHeight: themeTokens?.headerLineHeight
+                  }}
+                  variant={{ size: 'h4' }}
+                >
+                  {getCopy('heading')}
+                </Typography>
+                <TouchableWithoutFeedback
+                  onPress={handleClose}
+                  accessibilityLabel={getCopy('close')}
+                >
+                  <View
+                    style={[selectFootnoteCloseButtonStyle(themeTokens), staticStyles.closeButton]}
+                  >
+                    <Icon
+                      icon={themeTokens?.closeIcon}
+                      tokens={{ size: themeTokens?.closeButtonIconSize }}
+                    />
+                  </View>
+                </TouchableWithoutFeedback>
+              </View>
+              <View
+                style={selectFootnoteBodyStyle({
+                  maxWidth: themeOptions.contentMaxWidth,
+                  screenWidth,
+                  ...themeTokens
+                })}
+              >
+                {getFootnoteBodyContent()}
+              </View>
+            </View>
+          </ScrollView>
+        </SafeAreaView>
+      </Modal>
+    </View>
+  )
+}
+
+const copyShape = PropTypes.shape({
+  close: PropTypes.string.isRequired,
+  heading: PropTypes.string.isRequired
+})
+
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = PropTypes.shape({
+  a11yLabel: PropTypes.string.isRequired,
+  close: PropTypes.string.isRequired,
+  heading: PropTypes.string.isRequired
+})
+
+Footnote.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Footnote'),
+  /**
+   * The content.
+   */
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  /**
+   * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
+   * To provide your own, pass a JSON object with the keys `heading` and `close`.
+   */
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), copyShape]),
+  /**
+   * A boolean flag used hide or show the `Footnote`. Set to `true` to open the `Footnote`.
+   */
+  isOpen: PropTypes.bool,
+  /**
+   * The number, must match the number of the `FootnoteLink` that initiated the `Footnote`.
+   */
+  number: PropTypes.number,
+  /**
+   * A callback function to handle the closing of the footnote.
+   *
+   * @param {SyntheticEvent} event The React `SyntheticEvent`
+   * @param {Object} options Custom options
+   * @param {boolean} options.returnFocus Should the `Footnote` return focus on close
+   */
+  onClose: PropTypes.func.isRequired,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  })
+}
+
+export default Footnote
+
+const staticStyles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  content: {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    left: 0,
+    right: 0,
+    maxWidth: 1200,
+    paddingBottom: 100
+  },
+  headerContent: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  closeButton: {
+    alignItems: 'center',
+    borderRadius: 50,
+    display: 'flex',
+    justifyContent: 'center'
+  }
+})