@popsure/dirty-swan 0.50.0 → 0.51.0

package/src/lib/components/modal/bottomModal/style.module.scss

@@ -1,22 +1,5 @@
 @use '../../../scss/public/grid' as *;
-
-@keyframes fade-in {
-  0% {
-    background-color: rgba($color: #000000, $alpha: 0);
-  }
-  100% {
-    background-color: rgba($color: #000000, $alpha: 0.3);
-  }
-}
-
-@keyframes fade-out {
-  from {
-    background-color: rgba($color: #000000, $alpha: 0.3);
-  }
-  to {
-    background-color: rgba($color: #000000, $alpha: 0);
-  }
-}
+@use '../../../scss/public/colors' as *;
 
 @keyframes appear-in {
   0% {
@@ -41,59 +24,31 @@
   }
 }
 
-.close {
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-}
-
-.closeIcon {
-  margin: 0;
-}
-
-.overlay {
-  position: fixed;
-
-  z-index: 100;
-
-  overflow: auto;
-
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-
-  animation: fade-in 0.3s both;
-
-  &--close {
-    @extend .overlay;
-    animation-delay: 0.1s;
-    animation: fade-out 0.3s both;
-  }
-}
-
 .wrapper {
   position: relative;
   top: 0;
-  width: 100%;
   overflow: hidden;
 }
 
 .container {
-  background-color: white;
-
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
 
-  width: 100%;
+  overflow: auto;
+  max-height: 90vh;
+  bottom: 0;
+  position: fixed;
+
+  @include p-size-mobile {
+    padding-bottom: 48px;
+  }
 
   animation-name: appear-in;
   animation-duration: 0.4s;
   animation-fill-mode: both;
-  animation-timing-function: ease-out;
+  animation-timing-function: ease-in;
 
-  &--close {
-    @extend .container;
+  &Close {
     animation-name: disappear-out;
     animation-duration: 0.4s;
     animation-delay: 0s;
@@ -101,18 +56,3 @@
     animation-timing-function: ease-out;
   }
 }
-
-.header {
-  height: 60px;
-
-  display: flex;
-  align-items: center;
-
-  padding: 0 16px;
-}
-
-.content {
-  @include p-size-mobile {
-    padding-bottom: 48px;
-  }
-}

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

@@ -0,0 +1,133 @@
+import { Props } from '..';
+import useOnClose from '../hooks/useOnClose';
+
+import styles from './style.module.scss';
+import classNamesUtil from 'classnames';
+import { Button } from '../../button';
+import { XIcon } from '../../icon';
+
+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;
+  };
+  titleSize?: 'small' | 'default';
+}
+
+export const GenericModal = ({
+  title,
+  isOpen,
+  children,
+  onClose,
+  classNames,
+  dismissible = true,
+  footer,
+  titleSize = 'default',
+}: GenericModalProps) => {
+  const {
+    isClosing,
+    isVisible,
+    handleContainerClick,
+    handleOnCloseAnimationEnded,
+    handleOnClose,
+    handleOnOverlayClick,
+  } = useOnClose(onClose, isOpen, dismissible);
+
+  return !isVisible ? null : (
+    <div
+      className={classNamesUtil(
+        classNames?.overlay,
+        styles.overlay, {
+          [styles.overlayClose]: isClosing,
+        }
+      )}
+      onAnimationEnd={handleOnCloseAnimationEnded}
+      onClick={handleOnOverlayClick}
+    >
+      <div 
+        className={
+          typeof classNames?.wrapper === 'string' 
+            ? classNames?.wrapper 
+            : classNames?.wrapper?.({ isClosing })
+        }
+      >
+        <div
+          className={
+            typeof classNames?.container === 'string' 
+            ? classNames?.container 
+            : classNames?.container?.({ isClosing })
+          }
+          onClick={handleContainerClick}
+        >
+
+          <div
+            className={classNamesUtil(
+              'bg-white d-flex ai-center w100 px24 pt24 pb16',
+              styles.header, {
+                'jc-between': !!children,
+                'jc-end': !children,
+              }
+            )}
+          >
+            {title && (
+              <div
+                className={classNamesUtil(
+                  styles.title,
+                  titleSize === 'small' ? 'p-h4' : 'p-h2'
+                )}
+              >
+                {title}
+              </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(
+              classNames?.body,
+              styles.body
+            )}
+          >
+            {children}
+          </div>
+
+          {footer && (
+            <div
+              className={classNamesUtil(
+                classNames?.footer,
+                'bg-white',
+                styles.footer
+              )}
+            >
+              <div className="px24 py16">
+                {footer}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/lib/components/modal/genericModal/style.module.scss

@@ -0,0 +1,71 @@
+@use "../../../scss/public/colors" as *;
+
+@keyframes fade-in {
+  0% {
+    background-color: rgba($color: #000, $alpha: 0);
+    visibility: hidden;
+  }
+  100% {
+    background-color: rgba($color: #000, $alpha: 0.3);
+    visibility: visible;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    background-color: rgba($color: #000, $alpha: 0.3);
+    visibility: visible;
+  }
+  to {
+    background-color: rgba($color: #000, $alpha: 0);
+    visibility: hidden;
+  }
+}
+
+.overlay {
+  z-index: 100;
+  overflow: auto;
+  
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  animation: fade-in 0.3s both;
+
+  &Close {
+    animation-delay: 0.1s;
+    animation: fade-out 0.3s both;
+  }
+}
+
+.header {
+  position: sticky;
+  top: 0;
+}
+
+.closeButton {
+  width: 32px;
+  height: 32px;
+}
+
+.body {
+  flex-grow: 1;
+  overflow: auto;
+
+  background:
+    linear-gradient($ds-white 30%, $ds-white),
+    linear-gradient($ds-white, $ds-white 70%),
+    linear-gradient($ds-grey-300 30%, $ds-grey-300),
+    linear-gradient($ds-grey-300, $ds-grey-300 70%) 0 100%;
+  background-repeat: no-repeat;
+  background-size: 100% 1px;
+  background-attachment: local, local, scroll, scroll;
+}
+
+.footer {
+  width: 100%;
+  position: sticky;
+  bottom: 0;
+}

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

@@ -2,6 +2,8 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 interface OnCloseReturn {
   isClosing: boolean;
+  isVisible: boolean;
+  handleOnCloseAnimationEnded: () => void;
   handleContainerClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   handleOnClose: () => void;
   handleOnOverlayClick: () => void;
@@ -12,15 +14,20 @@ const useOnClose = (
   isOpen: boolean,
   dismissable: boolean
 ): OnCloseReturn => {
+  const [isVisible, setIsVisible] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
 
   const handleOnClose = useCallback(() => {
     setIsClosing(true);
-    setTimeout(() => {
+  }, []);
+
+  const handleOnCloseAnimationEnded = useCallback(() => {
+    if (isVisible && isClosing) {
       onClose();
+      setIsVisible(false);
       setIsClosing(false);
-    }, 300);
-  }, [setIsClosing, onClose]);
+    }
+  }, [isClosing, isVisible, onClose]);
 
   const handleOnOverlayClick = useCallback(() => {
     if (!dismissable) {
@@ -50,12 +57,20 @@ const useOnClose = (
   }, [handleEscKey]);
 
   useEffect(() => {
+    if (isOpen) {
+      setIsVisible(true);
+    }
+    
+    if (!isOpen && isVisible){
+      handleOnClose();
+    }
+
     document.body.style.overflow = isOpen ? 'hidden' : 'auto';
 
     return () => {
       document.body.style.overflow = 'auto';
     };
-  }, [isOpen]);
+  }, [handleOnClose, isOpen, isVisible]);
 
   const handleContainerClick = (
     e: React.MouseEvent<HTMLDivElement, MouseEvent>
@@ -63,7 +78,14 @@ const useOnClose = (
     e.stopPropagation();
   };
 
-  return { isClosing, handleContainerClick, handleOnClose, handleOnOverlayClick };
+  return {
+    isClosing,
+    isVisible,
+    handleContainerClick,
+    handleOnCloseAnimationEnded,
+    handleOnClose,
+    handleOnOverlayClick
+  };
 };
 
 export default useOnClose;

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

@@ -2,6 +2,7 @@
 import { useState } from 'react';
 import { BottomModal, BottomOrRegularModal, Props, RegularModal } from '.';
 import { Markdown } from '../markdown';
+import { Button } from '../button';
 
 const story = {
   title: 'JSX/Modals',
@@ -251,4 +252,98 @@ export const NonDismissibleModal = ({
   );
 }
 
+export const ModalWithFooter = ({
+  children,
+  isOpen,
+  onClose,
+  title,
+}: Props) => {
+  const [display, setDisplay] = useState(isOpen);
+  const handleOnClose = () => {
+    onClose();
+    setDisplay(false);
+  };
+
+  return (
+    <>
+      <button
+        className="p-btn--primary wmn2"
+        onClick={() => setDisplay(true)}
+      >
+        Click to open modal
+      </button>
+
+      <BottomOrRegularModal
+        title={title}
+        isOpen={display}
+        onClose={handleOnClose}
+        footer={(
+          <div className='d-flex fd-row gap8'>
+            <Button variant='textColor' className='w100' onClick={handleOnClose}>
+              Skip
+            </Button>
+            <Button className='w100' onClick={handleOnClose}>
+              Continue
+            </Button>
+          </div>
+        )}
+      >
+        <div className='p24'>
+          <div>
+            {children}
+          </div>
+        </div>
+      </BottomOrRegularModal>
+    </>
+  );
+}
+
+export const ModalWithFooterAndScroll = ({
+  children,
+  isOpen,
+  onClose,
+  title,
+}: Props) => {
+  const [display, setDisplay] = useState(isOpen);
+  const handleOnClose = () => {
+    onClose();
+    setDisplay(false);
+  };
+
+  return (
+    <>
+      <button
+        className="p-btn--primary wmn2"
+        onClick={() => setDisplay(true)}
+      >
+        Click to open modal
+      </button>
+
+      <BottomOrRegularModal
+        title={title}
+        isOpen={display}
+        onClose={handleOnClose}
+        footer={(
+          <div className='d-flex fd-row gap8'>
+            <Button variant='textColor' className='w100' onClick={handleOnClose}>
+              Skip
+            </Button>
+            <Button className='w100' onClick={handleOnClose}>
+              Continue
+            </Button>
+          </div>
+        )}
+      >
+        <div className='p24'>
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            <div style={{ height: '840px' }} />
+            {children}
+          </div>
+        </div>
+      </BottomOrRegularModal>
+    </>
+  );
+}
+
 export default story;

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

@@ -1,14 +1,16 @@
 import { BottomModal } from './bottomModal';
 import { RegularModal } from './regularModal';
 import { BottomOrRegularModal } from './bottomOrRegularModal';
+import { ReactNode } from 'react';
 
 export interface Props {
-  title?: string;
+  title?: ReactNode;
   isOpen: boolean;
-  children: React.ReactNode;
+  children: ReactNode;
   onClose: () => void;
   className?: string;
   dismissible?: boolean;
+  footer?: ReactNode;
 }
 
 export { BottomModal, RegularModal, BottomOrRegularModal };

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

@@ -1,66 +1,25 @@
-import React from 'react';
-
 import { Props } from '..';
-import useOnClose from '../hooks/useOnClose';
-
 import styles from './style.module.scss';
-import { XIcon } from '../../icon/icons';
 import classNames from 'classnames';
+import { GenericModal } from '../genericModal';
 
-export const RegularModal = ({
-  title,
-  isOpen,
-  children,
-  onClose,
-  className = '',
-  dismissible = true,
-}: Props) => {
-  const {
-    isClosing,
-    handleContainerClick,
-    handleOnClose,
-    handleOnOverlayClick,
-  } = useOnClose(onClose, isOpen, dismissible);
-
-  if (!isOpen) {
-    return <></>;
-  }
+const RegularModal = ({ className = '', ...rest }: Props) => (
+  <GenericModal
+    classNames={{
+      wrapper: ({ isClosing }) => classNames(
+        'd-flex ai-center w90 mx-auto my0',
+        className,
+        styles.wrapper, {
+          [styles.wrapperClose]: isClosing,
+        }
+      ),
+      container: classNames(
+        'bg-white br8 d-flex ai-center fd-column mx-auto my0 wmx8',
+        styles.container
+      )
+    }}
+    {...rest}
+  />
+);
 
-  return (
-    <div
-      className={isClosing ? styles['overlay--close'] : styles.overlay}
-      onClick={handleOnOverlayClick}
-    >
-      <div
-        className={`${
-          isClosing ? styles['container--close'] : styles.container
-        } ${className}`}
-      >
-        <div className={styles.body} onClick={handleContainerClick}>
-          <div
-            className={classNames(styles.header, {
-              'jc-between': !!title,
-              'jc-end': !title,
-            })}
-          >
-            {title && <div className={`p-h2 ${styles.title}`}>{title}</div>}
-            {dismissible && (
-              <button
-                type="button"
-                className={styles.close}
-                onClick={handleOnClose}
-              >
-                <XIcon
-                  size={24}
-                  color={'grey-700'}
-                  className={`${styles.closeIcon}`}
-                />
-              </button>
-            )}
-          </div>
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-};
+export { RegularModal };

package/src/lib/components/modal/regularModal/style.module.scss

@@ -1,24 +1,4 @@
-@keyframes fade-in {
-  0% {
-    background-color: rgba($color: #000000, $alpha: 0);
-    visibility: hidden;
-  }
-  100% {
-    background-color: rgba($color: #000000, $alpha: 0.3);
-    visibility: visible;
-  }
-}
-
-@keyframes fade-out {
-  from {
-    background-color: rgba($color: #000000, $alpha: 0.3);
-    visibility: visible;
-  }
-  to {
-    background-color: rgba($color: #000000, $alpha: 0);
-    visibility: hidden;
-  }
-}
+@use "../../../scss/public/colors" as *;
 
 @keyframes appear-in {
   0% {
@@ -46,46 +26,16 @@
   }
 }
 
-.overlay {
-  position: fixed;
-
-  z-index: 100;
-
-  overflow: auto;
-
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-
-  animation: fade-in 0.3s both;
-
-  &--close {
-    @extend .overlay;
-    animation-delay: 0.1s;
-    animation: fade-out 0.3s both;
-  }
-}
-
-.container {
+.wrapper {
   position: relative;
-
-  display: flex;
-  align-items: center;
-
-  max-width: 592px;
-  width: 100%;
   min-height: 100%;
 
-  margin: 0 auto;
-
   animation-name: appear-in;
   animation-duration: 0.4s;
   animation-fill-mode: both;
   animation-timing-function: ease-out;
 
-  &--close {
-    @extend .container;
+  &Close {
     animation-name: disappear-out;
     animation-duration: 0.4s;
     animation-delay: 0s;
@@ -94,25 +44,7 @@
   }
 }
 
-.body {
-  background-color: white;
-  border-radius: 8px;
-  margin: 80px auto;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-
-  padding: 24px 24px 0 24px;
-}
-
-.close {
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-}
-
-.closeIcon {
-  margin: 0;
+.container {
+  max-height: 96vh;
+  overflow: hidden;
 }

package/src/lib/index.tsx

@@ -22,7 +22,7 @@ import {
   BottomOrRegularModal,
 } from './components/modal';
 import { InfoCard, CardButton } from './components/cards';
-import { Card, CardProps  } from './components/card';
+import { Card, CardProps  } from './components/cards/card';
 import { Button } from './components/button';
 import { AutoSuggestMultiSelect } from './components/input/autoSuggestMultiSelect';
 import Chip from './components/chip';