X2-6577 Ability to position the Modal in any of four positions

xola · Sep 14, 2023 · bc3f815 · bc3f815
1 parent b6cadb3
commit bc3f815
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 7 deletions.
diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
@@ -11,8 +11,17 @@ const sizes = {
     huge: "max-w-200",
 };
 
+const positions = {
+    center: "inline-block",
+    topLeft: " absolute m-4 top-0 left-0",
+    topRight: " absolute m-4 top-0 right-0",
+    bottomLeft: " absolute m-4 bottom-0 left-0",
+    bottomRight: " absolute m-4 bottom-0 right-0",
+};
+
 export const Modal = ({
     size = "medium",
+    position = "center",
     isOpen = false,
     shouldCloseOnOutsideClick = false,
     onClose,
@@ -42,9 +51,11 @@ export const Modal = ({
                     </Transition.Child>
 
                     {/* This element is to trick the browser into centering the modal contents. */}
-                    <span className="inline-block h-screen align-middle" aria-hidden="true">
-                        &#8203;
-                    </span>
+                    {position === "center" && (
+                        <span className="inline-block h-screen align-middle" aria-hidden="true">
+                            &#8203;
+                        </span>
+                    )}
 
                     <Transition.Child
                         as={Fragment}
@@ -59,7 +70,8 @@ export const Modal = ({
                             className={clsx(
                                 className,
                                 sizes[size],
-                                "inline-block w-full transform overflow-hidden rounded-lg bg-white p-10 text-left align-middle shadow-xl transition-all",
+                                positions[position],
+                                "w-full transform overflow-hidden rounded-lg bg-white p-10 text-left align-middle shadow-xl transition-all",
                             )}
                         >
                             {onClose ? (

diff --git a/src/stories/Overlay/Modal.stories.js b/src/stories/Overlay/Modal.stories.js
@@ -6,6 +6,7 @@ const ModalStories = {
     component: Modal,
     args: {
         size: "medium",
+        position: "center",
         shouldCloseOnOutsideClick: true,
         isOpen: false,
     },
@@ -25,6 +26,14 @@ const ModalStories = {
                 defaultValue: { summary: "medium" },
             },
         },
+        position: {
+            type: { required: false },
+            options: ["topLeft", "topRight", "center", "bottomLeft", "bottomRight"],
+            control: { type: "select" },
+            table: {
+                defaultValue: { summary: "center" },
+            },
+        },
         shouldCloseOnOutsideClick: {
             type: { required: false },
             description: "Close the modal if user clicks outside it",
@@ -38,7 +47,7 @@ const ModalStories = {
     },
 };
 
-export const Default = ({ size, shouldCloseOnOutsideClick }) => {
+export const Default = ({ size, position, shouldCloseOnOutsideClick }) => {
     const [isOpen, setIsOpen] = useState(false);
 
     const toggle = () => {
@@ -49,7 +58,13 @@ export const Default = ({ size, shouldCloseOnOutsideClick }) => {
         <div>
             <Button onClick={toggle}>Click me to launch a modal</Button>
 
-            <Modal size={size} isOpen={isOpen} shouldCloseOnOutsideClick={shouldCloseOnOutsideClick} onClose={toggle}>
+            <Modal
+                size={size}
+                position={position}
+                isOpen={isOpen}
+                shouldCloseOnOutsideClick={shouldCloseOnOutsideClick}
+                onClose={toggle}
+            >
                 <Modal.Header description="Enter the code bellow to apply the code">Apply Code</Modal.Header>
 
                 <Modal.Body>
@@ -70,7 +85,7 @@ export const Default = ({ size, shouldCloseOnOutsideClick }) => {
     );
 };
 
-export const CustomWidth = ({ size, shouldCloseOnOutsideClick }) => {
+export const CustomWidth = ({ size, position, shouldCloseOnOutsideClick }) => {
     const [isOpen, setIsOpen] = useState(false);
 
     const toggle = () => {
@@ -84,6 +99,7 @@ export const CustomWidth = ({ size, shouldCloseOnOutsideClick }) => {
             <Modal
                 className="!max-w-200"
                 size={size}
+                position={position}
                 isOpen={isOpen}
                 shouldCloseOnOutsideClick={shouldCloseOnOutsideClick}
                 onClose={toggle}