fixup! Feat(web): Introduce Drawer component #DS-1580

lmc-eu · Jan 8, 2025 · 8eb71d4 · 8eb71d4
1 parent 8642092
commit 8eb71d4
Showing 1 changed file with 77 additions and 3 deletions.
diff --git a/packages/web/src/scss/components/Drawer/index.html b/packages/web/src/scss/components/Drawer/index.html
@@ -4,6 +4,13 @@
   document.addEventListener("DOMContentLoaded", () => {
     const radios = document.querySelectorAll('input[name="drawer-alignment"]');
     const drawer = document.getElementById("drawer-example");
+    const backdropCheckbox = document.getElementById("drawer-is-closable-on-backdrop-click");
+    const escapeKeyCheckbox = document.getElementById("drawer-is-closable-on-escape-key");
+    const contentTextArea = document.getElementById("drawer-content");
+    const drawerContentDiv = drawer.querySelector("[data-drawer-demo-content]");
+
+    let isClosableOnBackdropClick = backdropCheckbox.checked;
+    let isClosableOnEscapeKey = escapeKeyCheckbox.checked;
 
     radios.forEach(radio => {
       radio.addEventListener("change", () => {
@@ -16,9 +23,48 @@
         }
       });
     });
+
+    backdropCheckbox.addEventListener("change", () => {
+      isClosableOnBackdropClick = backdropCheckbox.checked;
+    });
+
+    escapeKeyCheckbox.addEventListener("change", () => {
+      isClosableOnEscapeKey = escapeKeyCheckbox.checked;
+    });
+
+    contentTextArea.addEventListener("input", () => {
+      drawerContentDiv.textContent = contentTextArea.value;
+    });
+
+    const closeDrawer = () => {
+      drawer.close();
+      drawer.setAttribute("aria-expanded", "false");
+    };
+
+    const openDrawerButton = document.querySelector('button[data-test-id="drawer-basic"]');
+    openDrawerButton.addEventListener("click", () => {
+      drawer.show();
+      drawer.setAttribute("aria-expanded", "true");
+
+      drawer.addEventListener("click", (event) => {
+        if (isClosableOnBackdropClick && event.target === drawer) {
+          closeDrawer();
+        }
+      });
+
+      document.addEventListener("keydown", (event) => {
+        if (isClosableOnEscapeKey && event.key === "Escape") {
+          closeDrawer();
+        }
+      });
+    });
+
+    const closeButton = drawer.querySelector(".DrawerCloseButton");
+    closeButton.addEventListener("click", closeDrawer);
   });
 </script>
 
+
 <section class="UNSTABLE_Section">
 
   <div class="Container">
@@ -27,7 +73,7 @@ <h2 class="docs-Heading">Drawer</h2>
     <div class="docs-Stack docs-Stack--start">
 
       <form class="mb-600">
-        <fieldset style="border: 0;">
+        <fieldset style="border: 0px;">
           <legend>Drawer alignment:</legend>
           <label for="drawer-alignment-left" class="Radio mr-600">
             <input name="drawer-alignment" autocomplete="off" aria-describedby="drawer-alignment-left__helperText" type="radio" id="drawer-alignment-left" class="Radio__input" value="left">
@@ -38,15 +84,43 @@ <h2 class="docs-Heading">Drawer</h2>
             </span>
           </label>
           <label for="drawer-alignment-right" class="Radio mr-600">
-            <input name="drawer-alignment" autocomplete="off" aria-describedby="drawer-alignment-right__helperText" type="radio" id="drawer-alignment-right" class="Radio__input" value="right" checked>
+            <input name="drawer-alignment" autocomplete="off" aria-describedby="drawer-alignment-right__helperText" type="radio" id="drawer-alignment-right" class="Radio__input" value="right" checked="">
             <span class="Radio__text">
               <span class="Radio__label">
                 Right
               </span>
             </span>
           </label>
         </fieldset>
+        <fieldset style="border: 0px;">
+          <div class="Stack Stack--hasSpacing">
+            <label class="Checkbox" for="drawer-is-closable-on-backdrop-click">
+              <input name="is-closable-on-backdrop-click" aria-describedby="drawer-is-closable-on-backdrop-click__helperText" type="checkbox" id="drawer-is-closable-on-backdrop-click" class="Checkbox__input" value="" checked="">
+              <span class="Checkbox__text">
+                <span class="Checkbox__label">
+                  Closable on Backdrop Click
+                </span>
+              </span>
+            </label>
+            <label class="Checkbox" for="drawer-is-closable-on-escape-key">
+              <input name="is-closable-on-escape-key" aria-describedby="drawer-is-closable-on-escape-key__helperText" type="checkbox" id="drawer-is-closable-on-escape-key" class="Checkbox__input" value="" checked="">
+              <span class="Checkbox__text">
+                <span class="Checkbox__label">
+                  Closable on Escape Key Down
+                </span>
+              </span>
+            </label>
+            <div class="TextArea">
+              <label for="drawer-content" class="TextArea__label">Drawer content</label>
+              <textarea aria-describedby="drawer-content__helperText" name="content" class="TextArea__input" id="drawer-content">This is a Drawer content.</textarea>
+              <div class="TextArea__helperText" id="drawer-content__helperText">
+                Can contain HTML.
+              </div>
+            </div>
+          </div>
+        </fieldset>
       </form>
+
       <button
         type="button"
         data-test-id="drawer-basic"
@@ -75,7 +149,7 @@ <h2 class="docs-Heading">Drawer</h2>
               </svg>
                 <span class="accessibility-hidden">Close</span>
             </button>
-            <div class="p-800">Drawer content</div>
+            <div class="p-800" data-drawer-demo-content>Drawer content</div>
           </div>
         </div>
       </dialog>