From 76e2ce25d74ce7f3cfefb093c7644c0cf065cd5b Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Wed, 6 Mar 2024 14:29:24 +0100
Subject: [PATCH] fixup! Feat(web): Introduce `Toast` JavaScript plugin
 #DS-1115

---
 packages/web/src/js/Toast.ts     | 33 +++++++++++++++++++++++---------
 packages/web/src/js/constants.ts |  1 +
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/js/Toast.ts b/packages/web/src/js/Toast.ts
index b032c6dc22..59ba9117db 100644
--- a/packages/web/src/js/Toast.ts
+++ b/packages/web/src/js/Toast.ts
@@ -1,10 +1,16 @@
 import BaseComponent from './BaseComponent';
-import { ATTRIBUTE_ARIA_EXPANDED, CLASS_NAME_HIDDEN, CLASS_NAME_OPEN, CLASS_NAME_TRANSITIONING } from './constants';
+import {
+  ATTRIBUTE_ARIA_EXPANDED,
+  ATTRIBUTE_DATA_TARGET,
+  CLASS_NAME_HIDDEN,
+  CLASS_NAME_OPEN,
+  CLASS_NAME_TRANSITIONING,
+} from './constants';
 import { enableDismissTrigger, enableToggleTrigger, executeAfterTransition, SpiritConfig } from './utils';
-import { EventHandler, SelectorEngine } from './dom';
+import { EventHandler } from './dom';
 
 const NAME = 'toast';
-const DATA_KEY = 'tooltip';
+const DATA_KEY = `${NAME}`;
 const EVENT_KEY = `.${DATA_KEY}`;
 
 const EVENT_HIDE = `hide${EVENT_KEY}`;
@@ -12,10 +18,9 @@ const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
 const EVENT_SHOW = `show${EVENT_KEY}`;
 const EVENT_SHOWN = `shown${EVENT_KEY}`;
 
-const SELECTOR_DATA_DISMISS = '[data-spirit-dismiss]';
-
 class Toast extends BaseComponent {
   isShown: boolean;
+  triggers: NodeListOf<Element>;
 
   static get NAME() {
     return NAME;
@@ -24,10 +29,18 @@ class Toast extends BaseComponent {
   constructor(element: SpiritElement, config?: SpiritConfig) {
     super(element, config);
 
+    this.triggers = this.getTrigger();
+
     this.isShown =
       this.element.classList.contains(CLASS_NAME_OPEN) || !this.element.classList.contains(CLASS_NAME_HIDDEN);
   }
 
+  getTrigger() {
+    const id = this.element && (this.element.getAttribute('id') as string);
+
+    return document.querySelectorAll(`[${ATTRIBUTE_DATA_TARGET}="#${id}"]`);
+  }
+
   show() {
     if (this.isShown) {
       return;
@@ -38,8 +51,9 @@ class Toast extends BaseComponent {
       return;
     }
 
-    const dismissEl = SelectorEngine.findOne(SELECTOR_DATA_DISMISS, this.element);
-    dismissEl?.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'true');
+    this.triggers.forEach((element) => {
+      element?.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'true');
+    });
 
     this.element.classList.remove(CLASS_NAME_HIDDEN);
     this.element.classList.add(CLASS_NAME_OPEN);
@@ -63,8 +77,9 @@ class Toast extends BaseComponent {
       return;
     }
 
-    const dismissEl = SelectorEngine.findOne(SELECTOR_DATA_DISMISS, this.element);
-    dismissEl?.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'false');
+    this.triggers.forEach((element) => {
+      element?.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'false');
+    });
 
     this.element.classList.remove(CLASS_NAME_OPEN);
     this.element.classList.add(CLASS_NAME_HIDDEN);
diff --git a/packages/web/src/js/constants.ts b/packages/web/src/js/constants.ts
index 0ed40801a9..83b250a0ff 100644
--- a/packages/web/src/js/constants.ts
+++ b/packages/web/src/js/constants.ts
@@ -2,6 +2,7 @@ export const ATTRIBUTE_ARIA_EXPANDED = 'aria-expanded';
 export const ATTRIBUTE_ARIA_CONTROLS = 'aria-controls';
 export const ATTRIBUTE_DATA_TARGET = 'data-spirit-target';
 export const ATTRIBUTE_DATA_TOGGLE = 'data-spirit-toggle';
+export const ATTRIBUTE_DATA_DISMISS = 'data-spirit-dismiss';
 
 export const CLASS_NAME_HIDDEN = 'is-hidden';
 export const CLASS_NAME_OPEN = 'is-open';