fixup! fixup! Feat(web): Introduce stacking of the Toast queue

lmc-eu · Mar 7, 2024 · a244b6c · a244b6c
1 parent c1fc5a6
commit a244b6c
Showing 1 changed file with 15 additions and 10 deletions.
diff --git a/packages/web/src/scss/components/Toast/index.html b/packages/web/src/scss/components/Toast/index.html
@@ -89,40 +89,45 @@ <h2 class="docs-Heading">Alignment</h2>
 
     <!-- Dynamic queue demo: start -->
     <script>
-      const QUEUE_ELEMENT_SELECTOR = '[data-spirit-element="toast-queue"]';
+      // TODO move this to Toast.js
+
       const TEMPLATE_ELEMENT_SELECTOR = '[data-spirit-snippet="item"]';
       const TEMPLATE_ELEMENT_SLOT_NAME = 'data-spirit-populate-field';
+      const QUEUE_ELEMENT_SELECTOR = '[data-spirit-element="toast-queue"]';
 
       const addDynamicToast = () => {
-        const id = `dynamic-toast-${Date.now()}`;
+        const snippetTemplate = document.querySelector(TEMPLATE_ELEMENT_SELECTOR);
 
+        const id = `dynamic-toast-${Date.now()}`;
         const toastQueueElement = document.querySelector(QUEUE_ELEMENT_SELECTOR);
-        const snippetTemplate = document.querySelector(TEMPLATE_ELEMENT_SELECTOR);
 
         const snippet = snippetTemplate?.content.cloneNode(true);
 
-        const item = snippet;
+        const item = snippet.querySelector(`[${TEMPLATE_ELEMENT_SLOT_NAME}="item"]`);
         const itemButton = item.querySelector(`[${TEMPLATE_ELEMENT_SLOT_NAME}="button"]`);
+        const itemMessage = item.querySelector(`[${TEMPLATE_ELEMENT_SLOT_NAME}="message"]`);
 
         item.setAttribute('id', id);
         itemButton.setAttribute('data-spirit-dismiss', 'toast');
+        itemButton.setAttribute('data-spirit-target', `#${id}`);
         itemButton.setAttribute('aria-controls', id);
+        itemMessage.innerHTML = `
+            This is a dynamic toast.
+            <a href="#" class="link-inverted link-underlined">Action</a>
+        `;
 
         toastQueueElement.appendChild(item);
       };
     </script>
 
     <template data-spirit-snippet="item">
-      <div class="Toast__item is-open" data-spirit-element="item">
-        <div class="ToastBar ToastBar--informative ToastBar--dismissible" data-spirit-populate-field="item">
+      <div class="Toast__item is-open" data-spirit-populate-field="item">
+        <div class="ToastBar ToastBar--informative ToastBar--dismissible" data-spirit-populate-field="toast-bar">
           <div class="ToastBar__content">
             <svg width="20" height="20" aria-hidden="true">
               <use xlink:href="/icons/svg/sprite.svg#info" />
             </svg>
-            <div class="ToastBar__message" data-spirit-populate-field="message">
-              This is a dynamic toast.
-              <a href="#" class="link-inverted link-underlined">Action</a>
-            </div>
+            <div class="ToastBar__message" data-spirit-populate-field="message"></div>
           </div>
           <button
             type="button"