From c1fc5a6ed9f1a83aca9b2a61be77b0378195647b Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam.kudrna@lmc.eu>
Date: Thu, 7 Mar 2024 15:47:25 +0100
Subject: [PATCH] fixup! Feat(web): Introduce stacking of the `Toast` queue

---
 .../src/scss/components/Toast/_ToastBar.scss  |  9 ++-
 .../web/src/scss/components/Toast/index.html  | 78 +++++++++++++++++--
 2 files changed, 76 insertions(+), 11 deletions(-)

diff --git a/packages/web/src/scss/components/Toast/_ToastBar.scss b/packages/web/src/scss/components/Toast/_ToastBar.scss
index 44e06e695d..332bc780e5 100644
--- a/packages/web/src/scss/components/Toast/_ToastBar.scss
+++ b/packages/web/src/scss/components/Toast/_ToastBar.scss
@@ -48,7 +48,8 @@
     margin-inline-end: theme.$bar-action-margin-inline-end; // 4.
 }
 
-.ToastBar.is-transitioning {
+.ToastBar.is-transitioning,
+[data-spirit-element='toast-bar'].is-transitioning {
     @media (prefers-reduced-motion: no-preference) {
         transition-property: visibility, opacity;
         transition-duration: theme.$bar-transition-duration;
@@ -56,12 +57,14 @@
     }
 }
 
-.ToastBar.is-hidden {
+.ToastBar.is-hidden,
+[data-spirit-element='toast-bar'].is-hidden {
     visibility: hidden;
     opacity: 0;
 }
 
-.ToastBar.is-visible {
+.ToastBar.is-visible,
+[data-spirit-element='toast-bar'].is-visible {
     visibility: visible;
     opacity: 1;
 }
diff --git a/packages/web/src/scss/components/Toast/index.html b/packages/web/src/scss/components/Toast/index.html
index 431ee2e399..51bbaf93d3 100644
--- a/packages/web/src/scss/components/Toast/index.html
+++ b/packages/web/src/scss/components/Toast/index.html
@@ -87,11 +87,72 @@ <h2 class="docs-Heading">Alignment</h2>
     </fieldset>
     <!-- Toast show and hide demo: end -->
 
+    <!-- Dynamic queue demo: start -->
+    <script>
+      const QUEUE_ELEMENT_SELECTOR = '[data-spirit-element="toast-queue"]';
+      const TEMPLATE_ELEMENT_SELECTOR = '[data-spirit-snippet="item"]';
+      const TEMPLATE_ELEMENT_SLOT_NAME = 'data-spirit-populate-field';
+
+      const addDynamicToast = () => {
+        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 itemButton = item.querySelector(`[${TEMPLATE_ELEMENT_SLOT_NAME}="button"]`);
+
+        item.setAttribute('id', id);
+        itemButton.setAttribute('data-spirit-dismiss', 'toast');
+        itemButton.setAttribute('aria-controls', id);
+
+        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="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>
+          <button
+            type="button"
+            class="Button Button--small Button--square Button--informative"
+            data-spirit-populate-field="button"
+            data-spirit-dismiss="toast"
+            aria-expanded="true"
+          >
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/icons/svg/sprite.svg#close" />
+            </svg>
+            <span class="accessibility-hidden">Close</span>
+          </button>
+        </div>
+      </div>
+    </template>
+
+    <fieldset style="border: 0;">
+      <legend class="mb-500">Dynamic queue demo:</legend>
+      <button class="Button Button--medium Button--primary" onclick="addDynamicToast()">
+        Add toast
+      </button>
+    </fieldset>
+    <!-- Dynamic queue demo: end -->
+
     <div id="toast-example" class="Toast Toast--bottom Toast--center" role="log">
-      <div class="Toast__queue">
-        <div class="Toast__item">
+      <div class="Toast__queue" data-spirit-element="toast-queue">
+        <div id="my-dismissible-toast" class="Toast__item is-open" data-spirit-element="toast-bar">
 
-          <div id="my-dismissible-toast" class="ToastBar ToastBar--success ToastBar--dismissible is-open">
+          <div class="ToastBar ToastBar--success ToastBar--dismissible">
             <div class="ToastBar__content">
               <svg width="20" height="20" aria-hidden="true">
                 <use xlink:href="/icons/svg/sprite.svg#check-plain" />
@@ -117,9 +178,9 @@ <h2 class="docs-Heading">Alignment</h2>
           </div>
 
         </div>
-        <div class="Toast__item">
+        <div id="my-other-dismissible-toast" class="Toast__item is-open" data-spirit-element="toast-bar">
 
-          <div id="my-other-dismissible-toast" class="ToastBar ToastBar--informative ToastBar--dismissible is-open">
+          <div class="ToastBar ToastBar--informative ToastBar--dismissible">
             <div class="ToastBar__content">
               <svg width="20" height="20" aria-hidden="true">
                 <use xlink:href="/icons/svg/sprite.svg#info" />
@@ -145,9 +206,9 @@ <h2 class="docs-Heading">Alignment</h2>
           </div>
 
         </div>
-        <div class="Toast__item">
+        <div id="my-hidden-dismissible-toast" class="Toast__item is-hidden" data-spirit-element="toast-bar">
 
-          <div id="my-hidden-dismissible-toast" class="ToastBar ToastBar--warning ToastBar--dismissible is-hidden">
+          <div id="my-hidden-dismissible-toast-bar" class="ToastBar ToastBar--warning ToastBar--dismissible">
             <div class="ToastBar__content">
               <svg width="20" height="20" aria-hidden="true">
                 <use xlink:href="/icons/svg/sprite.svg#warning" />
@@ -171,10 +232,11 @@ <h2 class="docs-Heading">Alignment</h2>
             </button>
           </div>
 
+        </div>
       </div>
     </div>
-  </div>
 
+  </div>
 </section>
 
 <section class="docs-Section">