intelicoreact 1.5.41 → 1.6.1

package/dist/Atomic/UI/Modal/Modal.scss

@@ -1,23 +1,33 @@
-@import "../../../scss/_vars";
-@import "../../../scss/mixins";
-
-.modal-overlay {
-  position: fixed;
-  z-index: 4;
-  top: 0;
-  left: 0;
-
-  width: 100%;
-  height: 100%;
-
-  opacity: 0.5;
-  background-color: black;
-
-  transition: opacity 0.2s ease;
-}
+@use "../../../scss/_vars";
+@use "../../../scss/mixins";
 
 .modal {
+  --modal-overlay-bg: black;
+  --modal-overlay-opacity: 0.5;
+  --modal-bg: #fff;
+  --modal-header-bg: #f7fafc;
+  --modal-body-bg: #f7fafc;
+  --modal-footer-bg: #f7fafc;
+  --modal-border-color: #e2e5ec;
+  --modal-title-color: vars.$color--primary;
+  --modal-title-font-size: 16px;
+  --modal-title-font-weight: 400;
+  --modal-width: 600px;
   --modal-min-height: 300px;
+  --modal-margin: 0 10px;
+  --modal-padding: 15px;
+  --modal-header-padding: 10px 15px;
+  --modal-footer-padding: 7.5px 15px;
+  --modal-border-radius: 6px;
+  --modal-inner-radius: 4px;
+  --modal-box-shadow: 0 20px 20px rgb(0 0 0 / 20%);
+  --modal-close-btn-size: 40px;
+  --modal-close-icon-size: 20px;
+  --modal-close-btn-color: #1e1e2d;
+  --modal-close-hover-bg: #e2e5ec;
+  --modal-primary-bg: #{vars.$color--primary};
+  --modal-primary-title-color: #ffffff;
+  --modal-primary-close-hover: #5162d4;
   --max-height: calc(100% - 30px);
 
   position: relative;
@@ -26,14 +36,14 @@
   display: flex;
   flex-direction: column;
 
-  width: 600px;
-  min-height: var(--modal-min-height);
-  max-height: var(--max-height);
-  margin: 0 10px;
+  width: var(--modal-width, 600px);
+  min-height: var(--modal-min-height, 300px);
+  max-height: var(--max-height, calc(100% - 30px));
+  margin: var(--modal-margin, 0 10px);
 
-  border-radius: 6px;
-  background-color: #fff;
-  box-shadow: 0 20px 20px rgb(0 0 0 / 20%);
+  border-radius: var(--modal-border-radius, 6px);
+  background-color: var(--modal-bg, #fff);
+  box-shadow: var(--modal-box-shadow, 0 20px 20px rgb(0 0 0 / 20%));
 
   &__header {
     position: relative;
@@ -42,29 +52,29 @@
     justify-content: space-between;
     align-items: center;
 
-    padding: 10px 15px;
+    padding: var(--modal-header-padding, 10px 15px);
 
-    border-bottom: 1px solid #e2e5ec;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    background-color: #f7fafc;
+    border-bottom: 1px solid var(--modal-border-color, #e2e5ec);
+    border-top-left-radius: var(--modal-inner-radius, 4px);
+    border-top-right-radius: var(--modal-inner-radius, 4px);
+    background-color: var(--modal-header-bg, #f7fafc);
 
     &-primary {
-      background-color: $color--primary;
+      background-color: var(--modal-primary-bg, #{vars.$color--primary});
 
       &-title {
-        font-size: 16px;
-        font-weight: 400;
+        font-size: var(--modal-title-font-size, 16px);
+        font-weight: var(--modal-title-font-weight, 400);
 
-        color: #ffffff;
+        color: var(--modal-primary-title-color, #ffffff);
       }
     }
 
     &-title {
-      font-size: 16px;
+      font-size: var(--modal-title-font-size, 16px);
       font-weight: normal;
 
-      color: $color--primary;
+      color: var(--modal-title-color, vars.$color--primary);
     }
   }
 
@@ -73,20 +83,23 @@
     flex-grow: 1;
 
     box-sizing: border-box;
-    padding: 15px;
+    padding: var(--modal-padding, 15px);
+
+    border-bottom-right-radius: var(--modal-inner-radius, 4px);
+    border-bottom-left-radius: var(--modal-inner-radius, 4px);
+    background-color: var(--modal-body-bg, #f7fafc);
 
-    border-bottom-right-radius: 4px;
-    border-bottom-left-radius: 4px;
-    background-color: #f7fafc;
+    @include mixins.custom-scroll2;
 
-    @include custom-scroll2;
     &:first-of-type {
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
+      overflow-x: hidden;
+
+      border-top-left-radius: var(--modal-inner-radius, 4px);
+      border-top-right-radius: var(--modal-inner-radius, 4px);
     }
 
     &--no-footer {
-      padding: 15px;
+      padding: var(--modal-padding, 15px);
     }
   }
 
@@ -95,12 +108,12 @@
     justify-content: flex-end;
     align-items: center;
 
-    padding: 7.5px 15px;
+    padding: var(--modal-footer-padding, 7.5px 15px);
 
-    border-top: 1px solid #e2e5ec;
-    border-bottom-right-radius: 4px;
-    border-bottom-left-radius: 4px;
-    background-color: #f7fafc;
+    border-top: 1px solid var(--modal-border-color, #e2e5ec);
+    border-bottom-right-radius: var(--modal-inner-radius, 4px);
+    border-bottom-left-radius: var(--modal-inner-radius, 4px);
+    background-color: var(--modal-footer-bg, #f7fafc);
 
     &_with-left-content {
       justify-content: space-between;
@@ -113,7 +126,7 @@
 
       width: calc(100% - 30px);
 
-      background-color: #ffff;
+      background-color: var(--modal-bg, #fff);
     }
   }
 
@@ -125,6 +138,21 @@
   }
 }
 
+.modal-overlay {
+  position: fixed;
+  z-index: 4;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+
+  opacity: var(--modal-overlay-opacity, 0.5);
+  background-color: var(--modal-overlay-bg, black);
+
+  transition: opacity 0.2s ease;
+}
+
 .modal__footer--noborder {
   border-top: none;
 }
@@ -144,7 +172,6 @@
   from {
     opacity: 0;
   }
-
   to {
     opacity: 1;
   }
@@ -172,43 +199,42 @@
   justify-content: center;
   align-items: center;
 
-  width: 40px;
+  width: var(--modal-close-btn-size, 40px);
   height: 100%;
 
   cursor: pointer;
 
-  color: #1e1e2d;
-  //background-color: inherit;
-  border-top-right-radius: 5px;
+  color: var(--modal-close-btn-color, #1e1e2d);
+  border-top-right-radius: var(--modal-inner-radius, 4px);
   background: transparent;
 
   &:hover {
-    background-color: #e2e5ec;
+    background-color: var(--modal-close-hover-bg, #e2e5ec);
   }
 
   &-primary {
-    color: #1e1e2d;
+    color: var(--modal-close-btn-color, #1e1e2d);
 
     &:hover {
       opacity: 1;
-      background-color: #5162d4;
+      background-color: var(--modal-primary-close-hover, #5162d4);
     }
   }
 
   &-merchant {
-    color: #1e1e2d;
+    color: var(--modal-close-btn-color, #1e1e2d);
 
     &:hover {
       opacity: 1;
-      background-color: #5162d4;
+      background-color: var(--modal-primary-close-hover, #5162d4);
     }
   }
 }
 
 .modal-close-icon {
-  width: 20px;
-  min-width: 20px;
-  height: 20px;
+  width: var(--modal-close-icon-size, 20px);
+  min-width: var(--modal-close-icon-size, 20px);
+  height: var(--modal-close-icon-size, 20px);
 }
 
 .modal-text-card {
@@ -258,7 +284,7 @@
 
         font-weight: 400;
 
-        border-right: 1px solid #e2e5ec;
+        border-right: 1px solid var(--modal-border-color, #e2e5ec);
       }
 
       th:first-child,
@@ -311,7 +337,7 @@
 }
 
 .confirm-modal {
-  border-radius: 4px;
+  border-radius: var(--modal-inner-radius, 4px);
 
   .modal {
     &__header-title {
@@ -326,7 +352,7 @@
     }
 
     &__footer {
-      background-color: #ffff;
+      background-color: var(--modal-bg, #fff);
     }
   }
 }

package/dist/Atomic/UI/Modal/Modal.stories.js

@@ -0,0 +1,370 @@
+// @ts-nocheck
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    CreateMode: function() {
+        return CreateMode;
+    },
+    CustomFooter: function() {
+        return CustomFooter;
+    },
+    Default: function() {
+        return Default;
+    },
+    EditMode: function() {
+        return EditMode;
+    },
+    Loading: function() {
+        return Loading;
+    },
+    MobileResponsive: function() {
+        return MobileResponsive;
+    },
+    NoHeaderClose: function() {
+        return NoHeaderClose;
+    },
+    Primary: function() {
+        return Primary;
+    },
+    WithFixedFooter: function() {
+        return WithFixedFooter;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _Dropdown = /*#__PURE__*/ _interop_require_default(require("../../FormElements/Dropdown/Dropdown"));
+const _Alert = /*#__PURE__*/ _interop_require_default(require("../Alert/Alert"));
+const _Button = /*#__PURE__*/ _interop_require_default(require("../Button/Button"));
+const _Hint = /*#__PURE__*/ _interop_require_default(require("../Hint"));
+const _Modal = /*#__PURE__*/ _interop_require_default(require("./Modal"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const meta = {
+    title: 'UI/Modal',
+    component: _Modal.default,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Modal component with customizable header, body, and footer sections'
+            }
+        }
+    },
+    argTypes: {
+        // Required props
+        isOpen: {
+            description: 'Controls modal visibility',
+            control: 'boolean',
+            table: {
+                category: 'Required'
+            }
+        },
+        title: {
+            description: 'Modal title text',
+            control: 'text',
+            table: {
+                category: 'Required'
+            }
+        },
+        // Appearance props
+        variant: {
+            description: 'Visual style variant',
+            control: {
+                type: 'select',
+                options: [
+                    'default',
+                    'primary',
+                    'secondary'
+                ]
+            },
+            table: {
+                category: 'Appearance',
+                defaultValue: {
+                    summary: 'default'
+                }
+            }
+        },
+        mode: {
+            description: 'Modal operation mode',
+            control: {
+                type: 'select',
+                options: [
+                    'default',
+                    'create',
+                    'edit',
+                    'add'
+                ]
+            },
+            table: {
+                category: 'Appearance',
+                defaultValue: {
+                    summary: 'default'
+                }
+            }
+        },
+        size: {
+            description: 'Modal size',
+            control: {
+                type: 'select',
+                options: [
+                    'default',
+                    290,
+                    420,
+                    870,
+                    770,
+                    950
+                ]
+            },
+            table: {
+                category: 'Appearance'
+            }
+        },
+        zIndex: {
+            description: 'Modal z-index value',
+            control: 'number',
+            table: {
+                category: 'Appearance'
+            }
+        },
+        // Callbacks
+        onConfirm: {
+            description: 'Called when confirm button is clicked',
+            table: {
+                category: 'Callbacks'
+            }
+        },
+        onDecline: {
+            description: 'Called when decline/cancel button is clicked',
+            table: {
+                category: 'Callbacks'
+            }
+        },
+        closeModal: {
+            description: 'Called when modal should be closed',
+            table: {
+                category: 'Callbacks'
+            }
+        },
+        // Layout options
+        noHeader: {
+            description: 'Hide modal header',
+            control: 'boolean',
+            table: {
+                category: 'Layout'
+            }
+        },
+        noFooter: {
+            description: 'Hide modal footer',
+            control: 'boolean',
+            table: {
+                category: 'Layout'
+            }
+        },
+        withFixedFooter: {
+            description: 'Fix footer to bottom',
+            control: 'boolean',
+            table: {
+                category: 'Layout'
+            }
+        },
+        withMobileLogic: {
+            description: 'Enable mobile-specific behavior',
+            control: 'boolean',
+            table: {
+                category: 'Layout'
+            }
+        }
+    }
+};
+const _default = meta;
+const Template = ({ isShowEmptyContent = false, ...args })=>{
+    const [isOpen, setIsOpen] = (0, _react.useState)(false);
+    const closeModal = ()=>setIsOpen(false);
+    const handleConfirm = ()=>{
+        var _args_onConfirm;
+        (_args_onConfirm = args.onConfirm) === null || _args_onConfirm === void 0 ? void 0 : _args_onConfirm.call(args);
+        closeModal();
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        style: {
+            padding: '20px'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                onClick: ()=>setIsOpen(true),
+                label: "Open Modal",
+                variant: "primary"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Modal.default, {
+                ...args,
+                isOpen: isOpen,
+                closeModal: closeModal,
+                onConfirm: handleConfirm,
+                children: !isShowEmptyContent && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '20px'
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.default, {
+                            message: "Sample alert message",
+                            variant: "info"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Dropdown.default, {
+                            entity: "example",
+                            value: "opt1",
+                            placeholder: "Select an option",
+                            options: [
+                                {
+                                    label: 'Option 1',
+                                    value: 'opt1'
+                                },
+                                {
+                                    label: 'Option 2',
+                                    value: 'opt2'
+                                },
+                                {
+                                    label: 'Option 3',
+                                    value: 'opt3'
+                                }
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Hint.default, {
+                            hint: "Helper text",
+                            side: "right"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.default, {
+                            message: "Sample alert message",
+                            variant: "info"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.default, {
+                            message: "Sample alert message",
+                            variant: "info"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.default, {
+                            message: "Sample alert message",
+                            variant: "info"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.default, {
+                            message: "Sample alert message",
+                            variant: "info"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.default, {
+                            message: "Sample alert message",
+                            variant: "info"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.default, {
+                            message: "Sample alert message",
+                            variant: "info"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.default, {
+                            message: "Sample alert message",
+                            variant: "info"
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+const Default = Template.bind({});
+Default.args = {
+    title: 'Default Modal',
+    variant: 'default',
+    mode: 'default',
+    leftContentOfFooter: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+        children: "Left Footer Content"
+    })
+};
+const Primary = Template.bind({});
+Primary.args = {
+    ...Default.args,
+    title: 'Primary Modal',
+    variant: 'primary'
+};
+const CreateMode = Template.bind({});
+CreateMode.args = {
+    title: 'New Item',
+    variant: 'primary',
+    mode: 'create',
+    size: 870,
+    confirmBtnLabel: 'Create'
+};
+const EditMode = Template.bind({});
+EditMode.args = {
+    title: 'Item',
+    variant: 'primary',
+    mode: 'edit',
+    size: 770,
+    confirmBtnLabel: 'Save'
+};
+const WithFixedFooter = Template.bind({});
+WithFixedFooter.args = {
+    title: 'Fixed Footer Modal',
+    variant: 'primary',
+    withFixedFooter: true,
+    size: 950
+};
+const CustomFooter = Template.bind({});
+CustomFooter.args = {
+    title: 'Custom Footer',
+    variant: 'primary',
+    customFooter: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        style: {
+            padding: '15px',
+            display: 'flex',
+            justifyContent: 'space-between'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                label: "Custom Left",
+                variant: "outline"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                label: "Custom Right",
+                variant: "primary"
+            })
+        ]
+    })
+};
+const NoHeaderClose = Template.bind({});
+NoHeaderClose.args = {
+    title: 'No Close Button',
+    variant: 'primary',
+    noHeaderCloseBtn: true
+};
+const MobileResponsive = Template.bind({});
+MobileResponsive.args = {
+    title: 'Mobile View',
+    variant: 'primary',
+    withMobileLogic: true,
+    size: 'default'
+};
+const Loading = Template.bind({});
+Loading.args = {
+    title: 'Loading...',
+    variant: 'primary',
+    confirmBtnDisable: true,
+    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        style: {
+            textAlign: 'center',
+            padding: '20px'
+        },
+        children: "Loading content..."
+    })
+};