feat(notifications): remove button, add click

1 files changed, 20 insertions, 33 deletions

diff --git a/src/lib/Notification/Notification.svelte b/src/lib/Notification/Notification.svelte
index 9612d526..f5e172a7 100644
--- a/src/lib/Notification/Notification.svelte
+++ b/src/lib/Notification/Notification.svelte
@@ -16,28 +16,33 @@
 	};
 </script>
 
-<div id="notification-container" class={removed ? 'fade-out' : 'fade-in'}>
+<div
+	id="notification-container"
+	class={removed ? 'fade-out' : 'fade-in'}
+	on:click={remove}
+	on:keydown={() => {
+		return;
+	}}
+	role="button"
+	tabindex="0"
+>
 	{#if notification.description}
-		<details open id="notification">
+		<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+		<details
+			open
+			id="notification"
+			on:click|preventDefault={(event) => event.preventDefault()}
+			on:keydown={() => {
+				return;
+			}}
+		>
 			<summary>{@html notification.heading}</summary>
 
 			{@html notification.description}
-
-			<br />
-
-			<div class="button-container">
-				<button on:click={remove} class="button-hide">Hide</button>
-			</div>
 		</details>
 	{:else}
 		<div class="card" id="notification">
 			{@html notification.heading}
-
-			&nbsp; &nbsp;
-
-			<div class="button-container">
-				<button on:click={remove} class="button-hide">Hide</button>
-			</div>
 		</div>
 	{/if}
 </div>
@@ -46,6 +51,7 @@
 	#notification-container {
 		margin: 1rem 1rem 0 0;
 		float: right;
+		cursor: pointer;
 	}
 
 	#notification {
@@ -55,25 +61,6 @@
 		widows: 100%;
 	}
 
-	.button-container {
-		display: flex;
-		justify-content: flex-end;
-	}
-
-	#notification > div {
-		display: inline;
-	}
-
-	.button-hide {
-		float: right;
-	}
-
-	.button-container::after {
-		content: '';
-		clear: both;
-		display: table;
-	}
-
 	.fade-in {
 		animation: fadeInAnimation ease 300ms;
 		animation-iteration-count: 1;