@popsure/dirty-swan 0.55.3 → 0.56.0

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

@@ -2,6 +2,7 @@
 import { useState } from 'react';
 import { BottomModal, BottomOrRegularModal, Props, RegularModal } from '.';
 import { Button } from '../button';
+import { FullScreenModal } from './fullScreenModal';
 
 const story = {
   title: 'JSX/Modals',
@@ -88,7 +89,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
@@ -140,7 +141,7 @@ export const RegularModalStory = ({
       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
@@ -188,7 +189,7 @@ export const BottomModalStory = ({
       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
@@ -217,6 +218,53 @@ export const BottomModalStory = ({
 
 BottomModalStory.storyName = 'BottomModal';
 
+export const FullScreenModalStory = ({
+  children,
+  isOpen,
+  onClose,
+  title,
+}: Props) => {
+  const [display, setDisplay] = useState(isOpen);
+  const handleOnClose = () => {
+    onClose();
+    setDisplay(false);
+  };
+
+  return (
+    <>
+      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>
+    </>
+  );
+}
+
+FullScreenModalStory.storyName = 'FullScreenModal';
+
 export const NonDismissibleModal = ({
   children,
   isOpen,
@@ -237,7 +285,7 @@ export const NonDismissibleModal = ({
       <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
@@ -280,7 +328,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
@@ -326,7 +374,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

package/src/lib/components/modal/index.ts

@@ -1,6 +1,7 @@
 import { BottomModal } from './bottomModal';
 import { RegularModal } from './regularModal';
 import { BottomOrRegularModal } from './bottomOrRegularModal';
+import { FullScreenModal } from './fullScreenModal';
 import { ReactNode } from 'react';
 
 export interface Props {
@@ -15,4 +16,4 @@ export interface Props {
   footer?: ReactNode;
 }
 
-export { BottomModal, RegularModal, BottomOrRegularModal };
+export { BottomModal, RegularModal, BottomOrRegularModal, FullScreenModal };

package/src/lib/hooks/useEscapeKey.ts

@@ -0,0 +1,18 @@
+import { useCallback, useEffect } from 'react';
+
+export const useEscapeKey = (callback: () => void) => {
+  const handleOnEscape = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        callback();
+      }
+    },
+    [callback]
+  );
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleOnEscape);
+
+    return () => window.removeEventListener('keydown', handleOnEscape);
+  }, [handleOnEscape]);
+};

package/src/lib/hooks/useFocusWithin.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+export const useFocusWithin = (
+  ref: HTMLElement | null,
+  callback: (isFocusWithin: boolean) => void
+) => {
+  useEffect(() => {
+    const handleOnFocusIn = () => {
+      if (!ref) {
+        return;
+      }
+
+      const hasFocus = ref?.contains(document.activeElement);
+
+      callback(Boolean(hasFocus));
+    };
+
+    document.addEventListener('focusin', handleOnFocusIn);
+
+    return () => document?.removeEventListener('focusin', handleOnFocusIn);
+  }, [callback, ref]);
+};

package/src/lib/index.tsx

@@ -23,6 +23,7 @@ import {
   BottomModal,
   RegularModal,
   BottomOrRegularModal,
+  FullScreenModal,
 } from './components/modal';
 import { InfoCard, CardButton } from './components/cards';
 import { Card, CardProps } from './components/cards/card';
@@ -48,6 +49,8 @@ import { Toaster, toast } from './components/toast';
 import { IconWrapperProps } from './components/icon/IconWrapper';
 import { Accordion, AccordionProps } from './components/accordion';
 import { Table, TableData, TableProps } from './components/table/Table';
+import { useEscapeKey } from './hooks/useEscapeKey';
+import { useFocusWithin } from './hooks/useFocusWithin';
 
 export * from './components/icon';
 
@@ -63,6 +66,7 @@ export {
   BottomModal,
   RegularModal,
   BottomOrRegularModal,
+  FullScreenModal,
   InfoCard,
   Card,
   CardButton,
@@ -90,6 +94,8 @@ export {
   Toggle,
   Toaster,
   toast,
+  useEscapeKey,
+  useFocusWithin,
 };
 
 export type {