@telus-uds/components-base 1.66.0 → 1.67.1

package/lib-module/Modal/Modal.js

@@ -12,10 +12,10 @@ import { useViewport } from '../ViewportProvider';
 import IconButton from '../IconButton';
 import dictionary from './dictionary';
 import useScrollBlocking from '../utils/useScrollBlocking';
+import ModalContent from './ModalContent';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
 const selectContainerStyles = _ref => {
   let {
     containerPaddingLeft,
@@ -34,7 +34,6 @@ const selectContainerStyles = _ref => {
     paddingBottom: containerPaddingBottom
   };
 };
-
 const selectModalStyles = _ref2 => {
   let {
     backgroundColor,
@@ -52,12 +51,12 @@ const selectModalStyles = _ref2 => {
     height,
     paddingLeft,
     paddingRight,
-    paddingTop,
+    paddingTop: Platform.OS !== 'web' ? 16 + paddingTop : paddingTop,
+    // the 16 additions are due to the border that is present in the mobile version
     paddingBottom,
     ...applyShadowToken(shadow)
   };
 };
-
 const selectBackdropStyles = _ref3 => {
   let {
     backdropColor,
@@ -68,7 +67,6 @@ const selectBackdropStyles = _ref3 => {
     opacity: backdropOpacity
   };
 };
-
 const selectCloseButtonContainerStyles = _ref4 => {
   let {
     paddingRight,
@@ -76,9 +74,14 @@ const selectCloseButtonContainerStyles = _ref4 => {
   } = _ref4;
   return {
     paddingRight,
-    paddingTop
+    paddingTop: Platform.OS !== 'web' ? 24 + paddingTop : paddingTop // The 24 additions are due to the border that is present in the mobile version for the close button
   };
 };
+
+const selectScrollViewStyles = () => ({
+  flex: 1
+});
+
 /**
  * A modal window is a secondary window that opens on top of the main one.
  * Users have to interact with it before they can carry out their task and return to the main window.
@@ -93,8 +96,6 @@ const selectCloseButtonContainerStyles = _ref4 => {
  * - Don’t use modals to reinforce or repeat information already available in the parent page or view
  * - Don’t use modals consecutively
  */
-
-
 const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
   let {
     children,
@@ -102,9 +103,20 @@ const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
     onClose,
     maxWidth,
     tokens,
-    variant,
     copy,
     closeButton,
+    onCancel = onClose,
+    onConfirm,
+    heading,
+    headingLevel,
+    subHeading,
+    subHeadingSize,
+    bodyText,
+    variant = {},
+    confirmButtonText,
+    confirmButtonVariant,
+    cancelButtonText,
+    cancelButtonType,
     ...rest
   } = _ref5;
   const viewport = useViewport();
@@ -121,23 +133,19 @@ const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
     copy
   });
   const closeLabel = getCopy('closeButton');
-
   const handleClose = () => {
     if (typeof onClose === 'function') onClose();
   };
-
   const handleKeyUp = event => {
     if (event.key === 'Escape') onClose();
-  }; // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
-  // Hide the close button if `closeButton` is `null`.
-
+  };
 
+  // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
+  // Hide the close button if `closeButton` is `null`.
   const showCloseButton = closeButton !== null;
-
   if (!isOpen) {
     return null;
   }
-
   return /*#__PURE__*/_jsx(NativeModal, {
     transparent: true,
     ...selectProps(rest),
@@ -160,7 +168,27 @@ const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
               accessibilityRole: "button",
               accessibilityLabel: closeLabel
             })
-          }), children]
+          }), /*#__PURE__*/_jsx(ModalContent, {
+            tokens: tokens,
+            variant: variant,
+            onCancel: onCancel,
+            onConfirm: onConfirm,
+            heading: heading,
+            headingLevel: headingLevel,
+            subHeading: subHeading,
+            subHeadingSize: subHeadingSize,
+            bodyText: bodyText,
+            confirmButtonText: confirmButtonText,
+            confirmButtonVariant: confirmButtonVariant,
+            cancelButtonText: cancelButtonText,
+            cancelButtonType: cancelButtonType,
+            children: Platform !== 'web' ? /*#__PURE__*/_jsx(ScrollView, {
+              style: selectScrollViewStyles,
+              children: children
+            }) : {
+              children
+            }
+          })]
         })
       }), /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
         onPress: handleClose,
@@ -172,35 +200,76 @@ const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
   });
 });
 Modal.displayName = 'Modal';
-Modal.propTypes = { ...selectedSystemPropTypes,
+Modal.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-
   /**
    * To define the locale of the copy
    */
   copy: copyPropTypes,
-
   /**
    * Setting this to `true` will open the `Modal`
    */
   isOpen: PropTypes.bool,
-
   /**
    * This function is triggered when the `Modal` is closed
    */
   onClose: PropTypes.func,
-
   /**
    * `max-width` is applied to the `Modal` container
    */
   maxWidth: PropTypes.bool,
   tokens: getTokensPropType('Modal'),
   variant: variantProp.propType,
-
   /**
    * Pass a react node to override the default close button or pass `null` to hide the close button.
    */
-  closeButton: PropTypes.node
+  closeButton: PropTypes.node,
+  /**
+   * Receive a string to set the heading of the modal.
+   */
+  heading: PropTypes.string,
+  /**
+   * Receive h3 or h4 to define the level of the heading.
+   */
+  headingLevel: PropTypes.oneOf(['h3', 'h4']),
+  /**
+   * Receive a string to set the sub heading of the modal.
+   */
+  subHeading: PropTypes.string,
+  /**
+   * Receive small, medium or large to set the size of the sub heading.
+   */
+  subHeadingSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Receive a string to set the bodyText of the modal.
+   */
+  bodyText: PropTypes.string,
+  /**
+   * Receive a string text for the confirm button.
+   */
+  confirmButtonText: PropTypes.string,
+  /**
+   * Receives a variant of button for the confirm button.
+   */
+  confirmButtonVariant: PropTypes.object,
+  /**
+   * Receive a function for the onConfirm event in the confirm button.
+   */
+  onConfirm: PropTypes.func,
+  /**
+   * Receive a string text for the cancel button.
+   */
+  cancelButtonText: PropTypes.string,
+  /**
+   * Receives a variant of button for the cancel button.
+   */
+  cancelButtonType: PropTypes.elementType,
+  // TODO: figure out a way of passing an icon to the TextButton
+  /**
+   * Receive a function for the onCancel event in the cancel button.
+   */
+  onCancel: PropTypes.func
 };
 export default Modal;
 const staticStyles = StyleSheet.create({
@@ -226,8 +295,8 @@ const staticStyles = StyleSheet.create({
     maxHeight: '100%',
     // so that the container can expand up to the full viewport height
     width: '100%' // ensure that the modal actually expands to the set maxWidth
-
   },
+
   modal: {
     maxHeight: '100%',
     // so that the modal can expand vertically up to the  sizing container's height (exclusive of its vertical padding)

package/lib-module/Modal/ModalContent.js

@@ -0,0 +1,175 @@
+import React, { useState } from 'react';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import PropTypes from 'prop-types';
+import Box from '../Box';
+import { Button } from '../Button';
+import { TextButton } from '../Link';
+import Spacer from '../Spacer';
+import Typography from '../Typography';
+import { useThemeTokens } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ModalContent = _ref => {
+  let {
+    heading,
+    headingLevel = 'h3',
+    subHeading,
+    subHeadingSize = 'medium',
+    bodyText,
+    confirmButtonText,
+    confirmButtonVariant = {
+      priority: 'high'
+    },
+    onConfirm,
+    tokens,
+    variant,
+    cancelButtonText,
+    cancelButtonType: CancelButton = TextButton,
+    children,
+    onCancel
+  } = _ref;
+  const {
+    headingColor,
+    cancelButtonColor,
+    ...themeTokens
+  } = useThemeTokens('Modal', tokens, variant);
+  const [scrollContainerHeight, setScrollContainerHeight] = useState(0);
+  const [scrollContentHeight, setScrollContentHeight] = useState(0);
+  const viewport = useViewport();
+  const handleContainerLayout = _ref2 => {
+    let {
+      nativeEvent: {
+        layout: {
+          height
+        }
+      }
+    } = _ref2;
+    return setScrollContainerHeight(height);
+  };
+  const onContentSizeChange = (_, height) => setScrollContentHeight(height);
+  const isContentOverflowing = scrollContentHeight > scrollContainerHeight;
+  const hasConfirmButton = confirmButtonText !== undefined && onConfirm !== undefined;
+  const hasCancelButton = cancelButtonText !== undefined && onCancel !== undefined;
+  const hasHeadingSection = Boolean(heading || subHeading);
+  const selectFooterContainerStyles = _ref3 => {
+    let {
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      marginLeft,
+      marginRight,
+      borderColor,
+      gap,
+      direction,
+      hasBorder
+    } = _ref3;
+    return {
+      flexDirection: direction,
+      alignItems: 'center',
+      gap,
+      marginLeft: -marginLeft,
+      marginRight: -marginRight,
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      borderTopColor: hasBorder ? borderColor : 'transparent',
+      borderTopWidth: hasBorder ? 1 : 0
+    };
+  };
+  const headingStyles = {
+    flexDirection: 'column',
+    paddingTop: 8,
+    paddingRight: themeTokens.headingPaddingRight
+  };
+  const subheadingStyles = {
+    marginTop: themeTokens.subHeadingMarginTop
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.modalContent,
+    children: [hasHeadingSection && /*#__PURE__*/_jsxs(View, {
+      style: headingStyles,
+      children: [heading && /*#__PURE__*/_jsx(Typography, {
+        variant: {
+          size: headingLevel
+        },
+        tokens: {
+          color: headingColor
+        },
+        heading: headingLevel,
+        children: heading
+      }), subHeading && /*#__PURE__*/_jsx(View, {
+        style: subheadingStyles,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: subHeadingSize
+          },
+          children: subHeading
+        })
+      }), Boolean(bodyText && hasHeadingSection) && /*#__PURE__*/_jsx(Spacer, {
+        space: 3
+      })]
+    }), bodyText && /*#__PURE__*/_jsx(Box, {
+      scroll: {
+        onContentSizeChange,
+        showsVerticalScrollIndicator: true
+      },
+      onLayout: handleContainerLayout,
+      children: /*#__PURE__*/_jsx(Typography, {
+        children: bodyText
+      })
+    }), children, (hasConfirmButton || hasCancelButton) && /*#__PURE__*/_jsxs(View, {
+      style: [selectFooterContainerStyles({
+        ...themeTokens,
+        hasBorder: isContentOverflowing
+      })],
+      children: [hasConfirmButton && /*#__PURE__*/_jsx(Button, {
+        variant: confirmButtonVariant,
+        tokens: {
+          width: viewport === 'xs' || viewport === 'sm' ? '100%' : undefined
+        },
+        onPress: onConfirm,
+        children: confirmButtonText
+      }), hasCancelButton ? /*#__PURE__*/_jsx(View, {
+        style: styles.styledTextButtonContainer,
+        children: /*#__PURE__*/_jsx(CancelButton, {
+          tokens: {
+            color: cancelButtonColor
+          },
+          onPress: onCancel,
+          children: cancelButtonText
+        })
+      }) : null]
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  modalContent: {
+    flex: 1,
+    flexDirection: 'column',
+    minHeight: Platform.OS === 'web' ? '100%' : 'auto'
+  },
+  styledTextButtonContainer: {
+    flex: 1
+  }
+});
+ModalContent.propTypes = {
+  tokens: PropTypes.object,
+  variant: PropTypes.object,
+  heading: PropTypes.string,
+  headingLevel: PropTypes.oneOf(['h3', 'h4']),
+  subHeading: PropTypes.string,
+  subHeadingSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  bodyText: PropTypes.string,
+  confirmButtonText: PropTypes.string,
+  confirmButtonVariant: PropTypes.object,
+  onConfirm: PropTypes.func,
+  cancelButtonText: PropTypes.string,
+  cancelButtonType: PropTypes.elementType,
+  // TODO: figure out a way of passing an icon to the TextButton
+  children: PropTypes.node,
+  onCancel: PropTypes.func
+};
+export default ModalContent;

package/lib-module/MultiSelectFilter/ModalOverlay.js

@@ -17,8 +17,8 @@ const staticStyles = StyleSheet.create({
     // Grow to maxWidth when possible, shrink when not possible
     position: 'absolute',
     zIndex: 10000 // Position on top of all the other overlays, including backdrops and modals
-
   },
+
   closeButtonContainer: {
     position: 'absolute',
     top: 0,
@@ -31,7 +31,6 @@ const staticStyles = StyleSheet.create({
     opacity: 0
   }
 });
-
 const selectCloseButtonContainerStyles = _ref => {
   let {
     paddingRight,
@@ -42,7 +41,6 @@ const selectCloseButtonContainerStyles = _ref => {
     paddingTop
   };
 };
-
 const selectPaddingContainerStyles = _ref2 => {
   let {
     paddingTop,
@@ -56,7 +54,6 @@ const selectPaddingContainerStyles = _ref2 => {
     paddingRight
   };
 };
-
 const ModalOverlay = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     children,