Update Modal to accept open and error props

src/lib/holocene/modal.story.svelte

@@ -8,25 +8,32 @@
 
   export let Hst: HST;
   let deleteConfirm: string;
-  let modal: Modal;
   let loading = false;
+  let basicModalOpen = false;
+  let formModalOpen = false;
+  let formModalError = '';
 
   let shouldError = false;
   let errorText =
     'Quo sint nisi nostrum quis nesciunt est. Delectus adipisci reiciendis nihil fuga libero exercitationem. Distinctio nihil sit et consequatur sit quia. Quia aut et temporibus doloremque veritatis corporis.';
-  const openModal = () => {
-    modal.open();
-  };
 
   const handleConfirm = () => {
     logEvent('Confirm', {});
+    basicModalOpen = false;
+    formModalOpen = false;
+    deleteConfirm = '';
   };
 
   const handleCancel = () => {
     logEvent('Cancel', {});
+    basicModalOpen = false;
+    formModalOpen = false;
+    formModalError = '';
+    deleteConfirm = '';
   };
 
   const makeFakeApiRequest = async () => {
+    formModalError = '';
     try {
       loading = true;
       await new Promise<void>((resolve, reject) => {
@@ -36,9 +43,9 @@
           setTimeout(resolve, 250);
         }
       });
-      modal?.close();
+      formModalOpen = false;
     } catch {
-      modal?.setError(errorText);
+      formModalError = errorText;
     } finally {
       loading = false;
     }
@@ -47,15 +54,19 @@
 
 <Hst.Story>
   <Hst.Variant title="A Basic Confirmation Modal">
-    <Button on:click={openModal}>Open Modal</Button>
+    <Button
+      on:click={() => {
+        basicModalOpen = true;
+      }}>Open Modal</Button
+    >
     <Modal
-      bind:this={modal}
       id="basic-modal"
       confirmType="destructive"
       confirmText="Delete"
       cancelText="Cancel"
       on:confirmModal={handleConfirm}
       on:cancelModal={handleCancel}
+      open={basicModalOpen}
     >
       <h3 slot="title">Delete User</h3>
       <p slot="content">
@@ -64,16 +75,21 @@
     </Modal>
   </Hst.Variant>
   <Hst.Variant title="A Modal with a Form">
-    <Button on:click={openModal}>Open Modal</Button>
+    <Button
+      on:click={() => {
+        formModalOpen = true;
+      }}>Open Modal</Button
+    >
     <Modal
       id="form-modal"
-      bind:this={modal}
       confirmType="destructive"
       confirmText="Delete"
       cancelText="Cancel"
       {loading}
       on:cancelModal={handleCancel}
       on:confirmModal={makeFakeApiRequest}
+      open={formModalOpen}
+      error={formModalError}
     >
       <h3 slot="title">Delete Namespace</h3>
       <div slot="content" class="flex flex-col gap-2">

src/lib/holocene/modal.svelte

@@ -18,6 +18,8 @@
     large?: boolean;
     loading?: boolean;
     'data-testid'?: string;
+    open: boolean;
+    error?: string;
   }
 
   export let hideConfirm = false;
@@ -29,37 +31,34 @@
   export let loading = false;
   export let hightlightNav = false;
   export let id: string;
-
-  let error: string;
-
-  export const open = () => modalElement.showModal();
-
-  export const close = () => {
-    error = '';
-    modalElement.close();
-  };
-
-  export const setError = (err: string) => {
-    error = err;
-  };
+  export let open: boolean;
+  export let error = '';
 
   let className = '';
   export { className as class };
 
   let modalElement: HTMLDialogElement;
 
+  $: open, toggleModal();
+
+  export const toggleModal = () => {
+    if (open) {
+      modalElement?.showModal();
+    } else {
+      modalElement?.close();
+    }
+  };
+
   const dispatch = createEventDispatcher<{
     cancelModal: undefined;
     confirmModal: undefined;
   }>();
 
   const handleCancel = () => {
-    close();
     dispatch('cancelModal');
   };
 
   const confirmModal = () => {
-    error = '';
     dispatch('confirmModal');
   };