@telus-uds/components-base 3.17.1 → 3.18.0

package/CHANGELOG.md

@@ -1,16 +1,16 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 12 Sep 2025 17:00:54 GMT and should not be manually modified.
+This log was last generated on Tue, 16 Sep 2025 21:19:36 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## 3.17.1
+## 3.18.0
 
-Fri, 12 Sep 2025 17:00:54 GMT
+Tue, 16 Sep 2025 21:19:36 GMT
 
-### Patches
+### Minor changes
 
-- `Card`: fix pressable-card text-decoration when href is present (guillermo.peitzner@telus.com)
+- `Modal`: add footer prop (guillermo.peitzner@telus.com)
 
 ## 3.13.0
 

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 TELUS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/cjs/Modal/Modal.js

@@ -127,6 +127,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     confirmButtonVariant,
     cancelButtonText,
     cancelButtonType,
+    footer,
     ...rest
   } = _ref5;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -230,6 +231,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
             confirmButtonVariant: confirmButtonVariant,
             cancelButtonText: cancelButtonText,
             cancelButtonType: cancelButtonType,
+            footer: footer,
             children: _Platform.default.OS !== 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
               style: selectScrollViewStyles,
               children: children
@@ -330,7 +332,11 @@ Modal.propTypes = {
   /**
    * Receive a function for the onCancel event in the cancel button.
    */
-  onCancel: _propTypes.default.func
+  onCancel: _propTypes.default.func,
+  /**
+   * Receive a react node or an array of nodes to render at the bottom of the modal, above the action buttons.
+   */
+  footer: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)])
 };
 var _default = exports.default = Modal;
 const staticStyles = _StyleSheet.default.create({

package/lib/cjs/Modal/ModalContent.js

@@ -35,7 +35,8 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     cancelButtonText,
     cancelButtonType: CancelButton = _Link.TextButton,
     children,
-    onCancel
+    onCancel,
+    footer
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
@@ -149,7 +150,7 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
         children: bodyText
       })
-    }), children, (hasConfirmButton || hasCancelButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    }), children, (hasConfirmButton || hasCancelButton) && !footer && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [selectFooterContainerStyles({
         ...themeTokens,
         hasBorder: isContentOverflowing
@@ -171,7 +172,7 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           children: cancelButtonText
         })
       }) : null]
-    })]
+    }), footer]
   });
 });
 ModalContent.displayName = 'ModalContent';
@@ -200,6 +201,7 @@ ModalContent.propTypes = {
   cancelButtonType: _propTypes.default.elementType,
   // TODO: figure out a way of passing an icon to the TextButton
   children: _propTypes.default.node,
-  onCancel: _propTypes.default.func
+  onCancel: _propTypes.default.func,
+  footer: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)])
 };
 var _default = exports.default = ModalContent;

package/lib/esm/Modal/Modal.js

@@ -120,6 +120,7 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     confirmButtonVariant,
     cancelButtonText,
     cancelButtonType,
+    footer,
     ...rest
   } = _ref5;
   const viewport = useViewport();
@@ -223,6 +224,7 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
             confirmButtonVariant: confirmButtonVariant,
             cancelButtonText: cancelButtonText,
             cancelButtonType: cancelButtonType,
+            footer: footer,
             children: Platform.OS !== 'web' ? /*#__PURE__*/_jsx(ScrollView, {
               style: selectScrollViewStyles,
               children: children
@@ -323,7 +325,11 @@ Modal.propTypes = {
   /**
    * Receive a function for the onCancel event in the cancel button.
    */
-  onCancel: PropTypes.func
+  onCancel: PropTypes.func,
+  /**
+   * Receive a react node or an array of nodes to render at the bottom of the modal, above the action buttons.
+   */
+  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
 };
 export default Modal;
 const staticStyles = StyleSheet.create({

package/lib/esm/Modal/ModalContent.js

@@ -28,7 +28,8 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     cancelButtonText,
     cancelButtonType: CancelButton = TextButton,
     children,
-    onCancel
+    onCancel,
+    footer
   } = _ref;
   const viewport = useViewport();
   const {
@@ -142,7 +143,7 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       children: /*#__PURE__*/_jsx(Typography, {
         children: bodyText
       })
-    }), children, (hasConfirmButton || hasCancelButton) && /*#__PURE__*/_jsxs(View, {
+    }), children, (hasConfirmButton || hasCancelButton) && !footer && /*#__PURE__*/_jsxs(View, {
       style: [selectFooterContainerStyles({
         ...themeTokens,
         hasBorder: isContentOverflowing
@@ -164,7 +165,7 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           children: cancelButtonText
         })
       }) : null]
-    })]
+    }), footer]
   });
 });
 ModalContent.displayName = 'ModalContent';
@@ -193,6 +194,7 @@ ModalContent.propTypes = {
   cancelButtonType: PropTypes.elementType,
   // TODO: figure out a way of passing an icon to the TextButton
   children: PropTypes.node,
-  onCancel: PropTypes.func
+  onCancel: PropTypes.func,
+  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
 };
 export default ModalContent;

package/lib/package.json

@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.17.1",
+  "version": "3.18.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.17.1",
+  "version": "3.18.0",
   "types": "types/index.d.ts"
 }

package/src/Modal/Modal.jsx

@@ -118,6 +118,7 @@ const Modal = React.forwardRef(
       confirmButtonVariant,
       cancelButtonText,
       cancelButtonType,
+      footer,
       ...rest
     },
     ref
@@ -240,6 +241,7 @@ const Modal = React.forwardRef(
                 confirmButtonVariant={confirmButtonVariant}
                 cancelButtonText={cancelButtonText}
                 cancelButtonType={cancelButtonType}
+                footer={footer}
               >
                 {Platform.OS !== 'web' ? (
                   <ScrollView style={selectScrollViewStyles}>{children}</ScrollView>
@@ -343,7 +345,11 @@ Modal.propTypes = {
   /**
    * Receive a function for the onCancel event in the cancel button.
    */
-  onCancel: PropTypes.func
+  onCancel: PropTypes.func,
+  /**
+   * Receive a react node or an array of nodes to render at the bottom of the modal, above the action buttons.
+   */
+  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
 }
 
 export default Modal

package/src/Modal/ModalContent.jsx

@@ -25,7 +25,8 @@ const ModalContent = React.forwardRef(
       cancelButtonText,
       cancelButtonType: CancelButton = TextButton,
       children,
-      onCancel
+      onCancel,
+      footer
     },
     ref
   ) => {
@@ -131,7 +132,7 @@ const ModalContent = React.forwardRef(
           </Box>
         )}
         {children}
-        {(hasConfirmButton || hasCancelButton) && (
+        {(hasConfirmButton || hasCancelButton) && !footer && (
           <View
             style={[
               selectFooterContainerStyles({
@@ -158,6 +159,7 @@ const ModalContent = React.forwardRef(
             ) : null}
           </View>
         )}
+        {footer}
       </View>
     )
   }
@@ -190,7 +192,8 @@ ModalContent.propTypes = {
   cancelButtonText: PropTypes.string,
   cancelButtonType: PropTypes.elementType, // TODO: figure out a way of passing an icon to the TextButton
   children: PropTypes.node,
-  onCancel: PropTypes.func
+  onCancel: PropTypes.func,
+  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
 }
 
 export default ModalContent