@popsure/dirty-swan 0.55.3 → 0.56.1

package/src/lib/components/modal/genericModal/index.tsx

@@ -6,18 +6,21 @@ import classNamesUtil from 'classnames';
 import { Button } from '../../button';
 import { XIcon } from '../../icon';
 import { useRef, useEffect } from 'react';
+import FocusLock from 'react-focus-lock';
 
+export interface GenericModalClassNames {
+  wrapper?: string | (({ isClosing }: { isClosing: boolean }) => string);
+  container?: string | (({ isClosing }: { isClosing: boolean }) => string);
+  overlay?: string;
+  header?: string;
+  closeButton?: string;
+  closeButtonIcon?: string;
+  title?: string;
+  body?: string;
+  footer?: string;
+}
 interface GenericModalProps extends Props {
-  classNames?: {
-    wrapper?: string | (({ isClosing }: { isClosing: boolean }) => string);
-    container?: string | (({ isClosing }: { isClosing: boolean }) => string);
-    overlay?: string;
-    header?: string;
-    closeButton?: string;
-    title?: string;
-    body?: string;
-    footer?: string;
-  };
+  classNames?: GenericModalClassNames;
   titleSize?: 'small' | 'default';
 }
 
@@ -43,12 +46,12 @@ const InnerModal = ({
     }
     const handleOnScroll = () => {
       if (modalBodyRef.current) {
-        onModalScroll(modalBodyRef.current.scrollTop, modalBodyRef.current)
+        onModalScroll(modalBodyRef.current.scrollTop, modalBodyRef.current);
       }
-    }
-  
+    };
+
     modalBodyRef.current.addEventListener('scroll', handleOnScroll);
-  
+
     return () => {
       modalBodyRef.current?.removeEventListener('scroll', handleOnScroll);
     };
@@ -56,105 +59,102 @@ const InnerModal = ({
 
   return (
     <div
-      className={classNamesUtil(
-        classNames?.overlay,
-        styles.overlay, {
-          [styles.overlayClose]: isClosing,
-        }
-      )}
+      className={classNamesUtil(classNames?.overlay, styles.overlay, {
+        [styles.overlayClose]: isClosing,
+      })}
       onAnimationEnd={handleOnCloseAnimationEnded}
       onClick={handleOnOverlayClick}
     >
-      <div 
+      <div
         className={
-          typeof classNames?.wrapper === 'string' 
-            ? classNames?.wrapper 
+          typeof classNames?.wrapper === 'string'
+            ? classNames?.wrapper
             : classNames?.wrapper?.({ isClosing })
         }
       >
         <div
+          aria-modal="true"
+          role="dialog"
           className={
-            typeof classNames?.container === 'string' 
-            ? classNames?.container 
-            : classNames?.container?.({ isClosing })
+            typeof classNames?.container === 'string'
+              ? classNames?.container
+              : classNames?.container?.({ isClosing })
           }
           onClick={handleContainerClick}
         >
+          <FocusLock returnFocus>
+            <div
+              className={classNamesUtil(
+                'bg-white d-flex ai-center w100 px24 pt24 pb16',
+                styles.header,
+                {
+                  'jc-between': !!title,
+                  'jc-end': !title,
+                }
+              )}
+            >
+              {title && (
+                <div
+                  className={classNamesUtil(
+                    styles.title,
+                    titleSize === 'small' ? 'p-h4' : 'p-h2'
+                  )}
+                >
+                  {title}
+                </div>
+              )}
 
-          <div
-            className={classNamesUtil(
-              'bg-white d-flex ai-center w100 px24 pt24 pb16',
-              styles.header, {
-                'jc-between': !!title,
-                'jc-end': !title,
-              }
-            )}
-          >
-            {title && (
+              {dismissible && (
+                <Button
+                  hideLabel
+                  leftIcon={
+                    <XIcon
+                      color="grey-700"
+                      className={classNames?.closeButtonIcon}
+                    />
+                  }
+                  onClick={handleOnClose}
+                  type="button"
+                  variant="textColor"
+                  className={classNamesUtil(
+                    classNames?.closeButton,
+                    'p0',
+                    styles.closeButton
+                  )}
+                >
+                  Close modal
+                </Button>
+              )}
+            </div>
+
+            <div
+              className={classNamesUtil('w100', classNames?.body, styles.body)}
+              ref={modalBodyRef}
+            >
+              {children}
+            </div>
+
+            {footer && (
               <div
                 className={classNamesUtil(
-                  styles.title,
-                  titleSize === 'small' ? 'p-h4' : 'p-h2'
+                  classNames?.footer,
+                  'w100 bg-white',
+                  styles.footer
                 )}
               >
-                {title}
+                <div className="p24 pt16">{footer}</div>
               </div>
             )}
-          
-            {dismissible && (
-              <Button
-                hideLabel
-                leftIcon={<XIcon color="grey-700" />}
-                onClick={handleOnClose}
-                type="button"
-                variant="textColor"
-                className={classNamesUtil(
-                  classNames?.closeButton,
-                  'p0',
-                  styles.closeButton
-                )}
-              >
-                Close modal
-              </Button>
-            )}
-          </div>
-
-          <div
-            className={classNamesUtil(
-              'w100',
-              classNames?.body,
-              styles.body
-            )}
-            ref={modalBodyRef}
-          >
-            {children}
-          </div>
-
-          {footer && (
-            <div
-              className={classNamesUtil(
-                classNames?.footer,
-                'w100 bg-white',
-                styles.footer
-              )}
-            >
-              <div className="p24 pt16">
-                {footer}
-              </div>
-            </div>
-          )}
+          </FocusLock>
         </div>
       </div>
     </div>
   );
-}
+};
 
 export const GenericModal = (props: GenericModalProps) => {
-  const { isOpen, onClose, dismissible = true } = props; 
-  const {
-    isVisible,
-    ...rest
-  } = useOnClose(onClose, isOpen, dismissible);
+  const { isOpen, onClose, dismissible = true } = props;
+  const { isVisible, ...rest } = useOnClose(onClose, isOpen, dismissible);
 
   if (!isVisible) {
     return null;

package/src/lib/components/modal/hooks/useOnClose.ts

@@ -1,10 +1,12 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 export interface OnCloseReturn {
   isClosing: boolean;
   isVisible: boolean;
   handleOnCloseAnimationEnded: () => void;
-  handleContainerClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  handleContainerClick: (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ) => void;
   handleOnClose: () => void;
   handleOnOverlayClick: () => void;
 }
@@ -39,9 +41,9 @@ const useOnClose = (
 
   const handleEscKey = useCallback(
     (e: KeyboardEvent) => {
-      if (e.code !== 'Escape') return;
-      if (!dismissable) return null;
-      if (!isOpen) return null;
+      if (e.code !== 'Escape' || !dismissable || !isOpen) {
+        return null;
+      }
 
       handleOnClose();
     },
@@ -60,8 +62,8 @@ const useOnClose = (
     if (isOpen) {
       setIsVisible(true);
     }
-    
-    if (!isOpen && isVisible){
+
+    if (!isOpen && isVisible) {
       handleOnClose();
     }
 
@@ -84,7 +86,7 @@ const useOnClose = (
     handleContainerClick,
     handleOnCloseAnimationEnded,
     handleOnClose,
-    handleOnOverlayClick
+    handleOnOverlayClick,
   };
 };
 

package/src/lib/components/modal/index.stories.tsx

@@ -1,70 +1,88 @@
-
 import { useState } from 'react';
 import { BottomModal, BottomOrRegularModal, Props, RegularModal } from '.';
 import { Button } from '../button';
+import { FullScreenModal } from './fullScreenModal';
 
 const story = {
   title: 'JSX/Modals',
   component: BottomOrRegularModal,
   argTypes: {
     title: {
-      description: "The title that needs to be displayed on the modal",
+      description: 'The title that needs to be displayed on the modal',
     },
     isOpen: {
-      description: "When set to `true`, the modal is displayed. When set to `false` the modal gets removed",
+      description:
+        'When set to `true`, the modal is displayed. When set to `false` the modal gets removed',
     },
     dismissible: {
-      description: "The content that gets displayed on the modal",
+      description: 'The content that gets displayed on the modal',
     },
     className: {
       description: 'Any additional className',
     },
+    classNames: {
+      description:
+        'Class names for the Modal component and its children elements',
+    },
     size: {
       description: 'The size of the modal, either large or default.',
       control: 'radio',
       options: {
         default: 'default',
         large: 'large',
-      }
+      },
     },
     children: {
       description: 'The content that gets displayed on the modal',
       type: 'text',
       table: {
         type: {
-            summary: 'ReactNode'
-        }
-      }
+          summary: 'ReactNode',
+        },
+      },
     },
     onClose: {
       description: 'Callback when the user close the modal',
       action: true,
       table: {
-        category: "Callbacks",
+        category: 'Callbacks',
       },
     },
     onModalScroll: {
       description: 'Callback when the user scroll the modal',
       action: true,
       table: {
-        category: "Callbacks",
-      }
-    }
+        category: 'Callbacks',
+      },
+    },
   },
   args: {
-    title: "Modal title",
+    title: 'Modal title',
     isOpen: false,
     dismissible: true,
     className: '',
+    classNames: {
+      wrapper: '',
+      container: '',
+      overlay: '',
+      header: '',
+      closeButton: '',
+      closeButtonIcon: '',
+      title: '',
+      body: '',
+      footer: '',
+    },
     children: 'Modal content to be displayed',
     size: 'default',
   },
   parameters: {
-    componentSubtitle: 'Bottom or Regular modal will automatically choose what’s best to display based on the users screen width.',
+    componentSubtitle:
+      'Bottom or Regular modal will automatically choose what’s best to display based on the users screen width.',
     docs: {
       description: {
-        component: 'Modals are dialog overlays that prevent the user from interacting with the rest of the website until an action is taken or the dialog is dismissed. Modals are purposefully disruptive and should be used thoughtfully and sparingly.',
-      }
+        component:
+          'Modals are dialog overlays that prevent the user from interacting with the rest of the website until an action is taken or the dialog is dismissed. Modals are purposefully disruptive and should be used thoughtfully and sparingly.',
+      },
     },
   },
 };
@@ -72,6 +90,7 @@ const story = {
 export const BottomOrRegularModalStory = ({
   children,
   className,
+  classNames,
   dismissible,
   isOpen,
   onClose,
@@ -88,7 +107,7 @@ export const BottomOrRegularModalStory = ({
   return (
     <>
       <button
-        className="p-btn--primary wmn2"
+        className="d-flex p-btn--primary wmn2"
         onClick={() => setDisplay(true)}
       >
         Click to open modal
@@ -97,6 +116,7 @@ export const BottomOrRegularModalStory = ({
       <BottomOrRegularModal
         dismissible={dismissible}
         className={className}
+        classNames={classNames}
         title={title}
         isOpen={display}
         size={size}
@@ -104,9 +124,7 @@ export const BottomOrRegularModalStory = ({
         onClose={handleOnClose}
       >
         <div style={{ padding: '0 24px 24px 24px' }}>
-          <div>
-            {children}
-          </div>
+          <div>{children}</div>
           <button
             className="p-btn--primary mt24 wmn3"
             onClick={() => setDisplay(false)}
@@ -117,7 +135,7 @@ export const BottomOrRegularModalStory = ({
       </BottomOrRegularModal>
     </>
   );
-}
+};
 
 BottomOrRegularModalStory.storyName = 'BottomOrRegularModal';
 
@@ -135,26 +153,21 @@ export const RegularModalStory = ({
 
   return (
     <>
-      Regular modals are primary meant to be used on Desktop or Tablet environment. The modal will appear in the middle of the screen and the user will be able to dismiss them using the top left "X" icon.  
-      If you want to use it for Mobile only, you should check BottomModal instead.
-      Want to use either Regular Modal or Bottom Modal based on the screen width? You can use Bottom or Regular modal.
-
+      Regular modals are primary meant to be used on Desktop or Tablet
+      environment. The modal will appear in the middle of the screen and the
+      user will be able to dismiss them using the top left "X" icon. If you want
+      to use it for Mobile only, you should check BottomModal instead. Want to
+      use either Regular Modal or Bottom Modal based on the screen width? You
+      can use Bottom or Regular modal.
       <button
-        className="p-btn--primary wmn2 mt24"
+        className="d-flex p-btn--primary wmn2 mt24"
         onClick={() => setDisplay(true)}
       >
         Click to open modal
       </button>
-
-      <RegularModal
-        title={title}
-        isOpen={display}
-        onClose={handleOnClose}
-      >
+      <RegularModal title={title} isOpen={display} onClose={handleOnClose}>
         <div style={{ padding: '0 24px 24px 24px' }}>
-          <div>
-            {children}
-          </div>
+          <div>{children}</div>
           <button
             className="p-btn--primary mt24 wmn3"
             onClick={() => setDisplay(false)}
@@ -165,7 +178,7 @@ export const RegularModalStory = ({
       </RegularModal>
     </>
   );
-}
+};
 
 RegularModalStory.storyName = 'RegularModal';
 
@@ -183,26 +196,21 @@ export const BottomModalStory = ({
 
   return (
     <>
-      Bottom modals are primary meant to be used on Mobile environment. The modal will appear from the bottom of the screen and the user will be able to dismiss them using the top left "X" icon.
-      If you want to use it for Desktop only, you should check Regular modal instead.
-      Want to use either Regular Modal or Bottom Modal based on the screen width? You can use Bottom or Regular modal.
-
+      Bottom modals are primary meant to be used on Mobile environment. The
+      modal will appear from the bottom of the screen and the user will be able
+      to dismiss them using the top left "X" icon. If you want to use it for
+      Desktop only, you should check Regular modal instead. Want to use either
+      Regular Modal or Bottom Modal based on the screen width? You can use
+      Bottom or Regular modal.
       <button
-        className="p-btn--primary wmn2 mt24"
+        className="d-flex p-btn--primary wmn2 mt24"
         onClick={() => setDisplay(true)}
       >
         Click to open modal
       </button>
-
-      <BottomModal
-        title={title}
-        isOpen={display}
-        onClose={handleOnClose}
-      >
+      <BottomModal title={title} isOpen={display} onClose={handleOnClose}>
         <div style={{ padding: '0 24px 24px 24px' }}>
-          <div>
-            {children}
-          </div>
+          <div>{children}</div>
           <button
             className="p-btn--primary mt24 wmn3"
             onClick={() => setDisplay(false)}
@@ -213,11 +221,11 @@ export const BottomModalStory = ({
       </BottomModal>
     </>
   );
-}
+};
 
 BottomModalStory.storyName = 'BottomModal';
 
-export const NonDismissibleModal = ({
+export const FullScreenModalStory = ({
   children,
   isOpen,
   onClose,
@@ -231,18 +239,59 @@ export const NonDismissibleModal = ({
 
   return (
     <>
-      Setting the dismissible prop to false will hide the close button and prevent the user from closing it using the escape key or clicking outside.
-      This prop can be useful if we want the user to explicitly interact with the modal options.
+      Full screen modals are primary meant to be used as blocker screens. The
+      modal will cover the entire screen and the user will be able to dismiss
+      them using the top left "X" icon.
+      <button
+        className="d-flex p-btn--primary wmn2 mt24"
+        onClick={() => setDisplay(true)}
+      >
+        Click to open modal
+      </button>
+      <FullScreenModal title={title} isOpen={display} onClose={handleOnClose}>
+        <div style={{ padding: '0 24px 24px 24px' }}>
+          <div>{children}</div>
+
+          <button
+            className="p-btn--primary mt24 wmn3"
+            onClick={() => setDisplay(false)}
+          >
+            Continue
+          </button>
+        </div>
+      </FullScreenModal>
+    </>
+  );
+};
 
-      <strong>Warning:</strong> a modal with the dismissible prop can only be closed by changing the isOpen prop to false.
+FullScreenModalStory.storyName = 'FullScreenModal';
 
+export const NonDismissibleModal = ({
+  children,
+  isOpen,
+  onClose,
+  title,
+}: Props) => {
+  const [display, setDisplay] = useState(isOpen);
+  const handleOnClose = () => {
+    onClose();
+    setDisplay(false);
+  };
+
+  return (
+    <>
+      Setting the dismissible prop to false will hide the close button and
+      prevent the user from closing it using the escape key or clicking outside.
+      This prop can be useful if we want the user to explicitly interact with
+      the modal options.
+      <strong>Warning:</strong> a modal with the dismissible prop can only be
+      closed by changing the isOpen prop to false.
       <button
-        className="p-btn--primary wmn2 mt24"
+        className="d-flex p-btn--primary wmn2 mt24"
         onClick={() => setDisplay(true)}
       >
         Click to open modal
       </button>
-
       <BottomOrRegularModal
         dismissible={false}
         title={title}
@@ -250,9 +299,7 @@ export const NonDismissibleModal = ({
         onClose={handleOnClose}
       >
         <div style={{ padding: '0 24px 24px 24px' }}>
-          <div>
-            {children}
-          </div>
+          <div>{children}</div>
           <button
             className="p-btn--primary mt24 wmn3"
             onClick={() => setDisplay(false)}
@@ -263,7 +310,7 @@ export const NonDismissibleModal = ({
       </BottomOrRegularModal>
     </>
   );
-}
+};
 
 export const ModalWithFooter = ({
   children,
@@ -280,7 +327,7 @@ export const ModalWithFooter = ({
   return (
     <>
       <button
-        className="p-btn--primary wmn2"
+        className="d-flex p-btn--primary wmn2"
         onClick={() => setDisplay(true)}
       >
         Click to open modal
@@ -290,26 +337,28 @@ export const ModalWithFooter = ({
         title={title}
         isOpen={display}
         onClose={handleOnClose}
-        footer={(
-          <div className='d-flex fd-row gap8'>
-            <Button variant='textColor' className='w100' onClick={handleOnClose}>
+        footer={
+          <div className="d-flex fd-row gap8">
+            <Button
+              variant="textColor"
+              className="w100"
+              onClick={handleOnClose}
+            >
               Skip
             </Button>
-            <Button className='w100' onClick={handleOnClose}>
+            <Button className="w100" onClick={handleOnClose}>
               Continue
             </Button>
           </div>
-        )}
+        }
       >
-        <div className='p24'>
-          <div>
-            {children}
-          </div>
+        <div className="p24">
+          <div>{children}</div>
         </div>
       </BottomOrRegularModal>
     </>
   );
-}
+};
 
 export const ModalWithFooterAndScroll = ({
   children,
@@ -326,7 +375,7 @@ export const ModalWithFooterAndScroll = ({
   return (
     <>
       <button
-        className="p-btn--primary wmn2"
+        className="d-flex p-btn--primary wmn2"
         onClick={() => setDisplay(true)}
       >
         Click to open modal
@@ -336,18 +385,22 @@ export const ModalWithFooterAndScroll = ({
         title={title}
         isOpen={display}
         onClose={handleOnClose}
-        footer={(
-          <div className='d-flex fd-row gap8'>
-            <Button variant='textColor' className='w100' onClick={handleOnClose}>
+        footer={
+          <div className="d-flex fd-row gap8">
+            <Button
+              variant="textColor"
+              className="w100"
+              onClick={handleOnClose}
+            >
               Skip
             </Button>
-            <Button className='w100' onClick={handleOnClose}>
+            <Button className="w100" onClick={handleOnClose}>
               Continue
             </Button>
           </div>
-        )}
+        }
       >
-        <div className='p24'>
+        <div className="p24">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             <div style={{ height: '840px' }} />
@@ -357,6 +410,6 @@ export const ModalWithFooterAndScroll = ({
       </BottomOrRegularModal>
     </>
   );
-}
+};
 
 export default story;