feat(Alert): can customise transitions

__tests__/Alert/spec.js

@@ -1,4 +1,4 @@
-import { render, fireEvent } from '@testing-library/svelte';
+import { render, fireEvent, waitFor } from '@testing-library/svelte';
 import Alert from '@s/components/Alert';
 import html from 'svelte-htm';
 
@@ -32,7 +32,8 @@ describe('Alert', () => {
     expect(mock).not.toBeCalled();
 
     await fireEvent.click(dismissBtn);
+    await waitFor(() => expect(alert).not.toBeInTheDocument());
 
-    expect(alert).not.toBeInTheDocument();
+    expect(mock).toHaveBeenCalledTimes(1);
   });
 });

src/components/Alert/Alert.svelte

@@ -1,12 +1,15 @@
 <script>
   import { createEventDispatcher } from 'svelte';
+  import { fade } from 'svelte/transition';
 
   const dispatch = createEventDispatcher();
 
   import Button from '../Button/Button.svelte';
 
   let classes = '';
   export let visible = true;
+  export let transition = fade;
+  export let transitionOpts = {};
   export let dense = false;
   export let outlined = false;
   export let text = false;
@@ -32,6 +35,7 @@
   <div
     role="alert"
     class="s-alert {classes}"
+    transition:transition={transitionOpts}
     class:dense
     class:outlined
     class:text
@@ -43,7 +47,7 @@
       </div>
       {#if dismissible}
         <Button icon on:click={dismiss}>
-          <slot name="closeIcon">✖</slot>
+          <slot name="close">✖</slot>
         </Button>
       {/if}
       {#if border}