🪟 🧹 Clean up modal and onboarding video components (#16466)

* remove unneeded closeOnBackground property * rename variable for clarity * here too
airbytehq · Sep 13, 2022 · ff29da4 · ff29da4
1 parent faa0640
commit ff29da4
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 6 deletions.
diff --git a/airbyte-webapp/src/components/Modal/Modal.tsx b/airbyte-webapp/src/components/Modal/Modal.tsx
@@ -9,8 +9,7 @@ import styles from "./Modal.module.scss";
 export interface ModalProps {
   title?: string | React.ReactNode;
   onClose?: () => void;
-  clear?: boolean;
-  closeOnBackground?: boolean;
+  cardless?: boolean;
   size?: "sm" | "md" | "lg" | "xl";
   testId?: string;
 }
@@ -22,7 +21,7 @@ const cardStyleBySize = {
   xl: styles.xl,
 };
 
-const Modal: React.FC<ModalProps> = ({ children, title, size, onClose, clear, testId }) => {
+const Modal: React.FC<ModalProps> = ({ children, title, size, onClose, cardless, testId }) => {
   const [isOpen, setIsOpen] = useState(true);
 
   const onModalClose = () => {
@@ -35,7 +34,7 @@ const Modal: React.FC<ModalProps> = ({ children, title, size, onClose, clear, te
       <div className={styles.backdrop} />
       <div className={styles.modalContainer}>
         <Dialog.Panel className={styles.modalPanel}>
-          {clear ? (
+          {cardless ? (
             children
           ) : (
             <ContentCard title={title} className={classNames(styles.card, size ? cardStyleBySize[size] : undefined)}>

diff --git a/airbyte-webapp/src/components/Modal/index.stories.tsx b/airbyte-webapp/src/components/Modal/index.stories.tsx
@@ -11,7 +11,7 @@ export default {
 } as ComponentMeta<typeof Modal>;
 
 const Template: ComponentStory<typeof Modal> = (args) => {
-  if (args.clear) {
+  if (args.cardless) {
     return <Modal {...args} />;
   }
 

diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/VideoItem/components/ShowVideo.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/VideoItem/components/ShowVideo.tsx
@@ -25,7 +25,7 @@ const CloseButton = styled(Button)`
 
 const ShowVideo: React.FC<ShowVideoProps> = ({ videoId, onClose }) => {
   return (
-    <Modal onClose={onClose} clear closeOnBackground>
+    <Modal onClose={onClose} cardless>
       <CloseButton onClick={onClose} iconOnly>
         <FontAwesomeIcon icon={faTimes} />
       </CloseButton>