@telus-uds/components-base 2.0.0 → 2.0.1

package/src/FlexGrid/FlexGrid.jsx

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import { StyleSheet } from 'react-native'
+
 import { viewports } from '@telus-uds/system-constants'
 import {
   a11yProps,
@@ -8,14 +8,16 @@ 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'
+import { useTheme } from '../ThemeProvider'
+import { useViewport } from '../ViewportProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -23,7 +25,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * A mobile-first flexbox grid.
  */
 
-const FlexGrid = forwardRef(
+const FlexGrid = React.forwardRef(
   (
     {
       limitWidth = true,
@@ -37,36 +39,64 @@ const FlexGrid = forwardRef(
       tag,
       accessibilityRole,
       children,
+      dataSet,
       ...rest
     },
     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'
+    const viewport = useViewport()
+    const {
+      themeOptions: { enableMediaQueryStyleSheet }
+    } = useTheme()
+
+    let flexgridStyles
+    let mediaIds
+
+    const stylesByViewport = {
+      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'
+      }
     }
-    if (viewPort === viewports.lg) {
-      maxWidth = limitWidth && viewports.map.get(viewports.lg)
-      flexDirection = reverseLevel[3] ? 'column-reverse' : 'column'
+
+    const staticStyles = {
+      flexWrap: 'wrap',
+      width: outsideGutter ? '100%' : 'auto',
+      marginVertical: 0,
+      marginHorizontal: outsideGutter ? 'auto' : -16
     }
-    if (viewPort === viewports.xl) {
-      maxWidth = limitWidth && viewports.map.get(viewports.xl)
-      flexDirection = reverseLevel[4] ? 'column-reverse' : 'column'
+
+    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 = {
@@ -75,16 +105,11 @@ const FlexGrid = forwardRef(
       ...selectProps(rest)
     }
 
+    const dataSetValue = mediaIds ? { media: mediaIds, ...dataSet } : dataSet
+
     return (
       <GutterContext.Provider value={gutter}>
-        <BaseView
-          ref={ref}
-          {...props}
-          style={[
-            styles.grid,
-            { marginHorizontal, marginVertical, width, flexDirection, maxWidth }
-          ]}
-        >
+        <BaseView ref={ref} {...props} style={flexgridStyles} dataSet={dataSetValue}>
           {children}
         </BaseView>
       </GutterContext.Provider>
@@ -93,12 +118,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,10 @@
-import React, { forwardRef } from 'react'
+import React 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'
+import { useTheme } from '../../ThemeProvider'
+import { useViewport } from '../../ViewportProvider'
 
 const horizontalAlignStyles = (horizontalAlign) => {
   switch (horizontalAlign) {
@@ -53,7 +52,7 @@ const distributeStyles = (distribute) => {
   }
 }
 
-const Row = forwardRef(
+const Row = React.forwardRef(
   (
     {
       horizontalAlign,
@@ -69,48 +68,67 @@ const Row = forwardRef(
     },
     ref
   ) => {
-    const viewPort = useViewport()
+    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 stylesByViewport = {
+      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'
+      }
+    }
 
-    let flexDirection = ''
-    let flexWrap = ''
+    let rowStyles
+    let mediaIds
 
-    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'
+    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,
-          {
-            flexDirection,
-            flexWrap,
-            ...horizontalAlignStyles(horizontalAlign),
-            ...verticalAlignStyles(verticalAlign),
-            ...distributeStyles(distribute)
-          }
-        ]}
-      >
+      <BaseView ref={ref} {...rest} style={rowStyles} dataSet={mediaIds && { media: mediaIds }}>
         {children}
       </BaseView>
     )
@@ -118,18 +136,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/Footnote/Footnote.jsx

@@ -0,0 +1,326 @@
+import React 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 = React.forwardRef(
+  (
+    {
+      copy = 'en',
+      number = undefined,
+      content = undefined,
+      onClose,
+      isOpen = false,
+      tokens,
+      variant = {},
+      dictionary = defaultDictionary,
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+
+    const themeTokens = useThemeTokens('Footnote', tokens, variant, { viewport })
+    const themeOptions = useTheme()
+
+    const getCopy = useCopy({ dictionary, copy })
+
+    const [isVisible, setIsVisible] = React.useState(false)
+
+    const screenHeight = Dimensions.get('screen').height
+    const screenWidth = Dimensions.get('screen').width
+
+    const getFootnoteBodyContent = React.useCallback(() => {
+      if (!number || !content) {
+        return null
+      }
+
+      if (React.isValidElement(content)) {
+        return <View style={selectCustomContentFontStyle(themeTokens)}>{content}</View>
+      }
+
+      return (
+        <OrderedList start={number}>
+          <OrderedList.Item key={number}>
+            <Text style={selectCustomContentFontStyle(themeTokens)}>{content}</Text>
+          </OrderedList.Item>
+        </OrderedList>
+      )
+    }, [content, number, themeTokens])
+
+    React.useEffect(() => {
+      if (isOpen) {
+        setIsVisible(true)
+      }
+    }, [isOpen])
+
+    const closeFootnote = React.useCallback(
+      (event, options) => {
+        onClose(event, options)
+        setIsVisible(false)
+      },
+      [onClose]
+    )
+
+    const handleClose = (event) => closeFootnote(event, { returnFocus: true })
+
+    return (
+      <View {...selectProps(rest)} ref={ref}>
+        <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>
+    )
+  }
+)
+
+Footnote.displayName = 'Footnote'
+
+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'
+  }
+})