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

lmc-eu · Jan 8, 2025 · c6630a6 · c6630a6
1 parent b675cf8
commit c6630a6
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 53 deletions.
diff --git a/packages/web/src/scss/components/Drawer/README.md b/packages/web/src/scss/components/Drawer/README.md
@@ -5,8 +5,8 @@ The Drawer component is a container that slides in from side of the screen. It c
 The Drawer is a composition of several subcomponents:
 
 - [Drawer](#drawer)
-  - [DrawerCloseButton](#drawer-close-button)
-  - [DrawerPanel](#drawer-panel)
+  - [DrawerCloseButton](#drawerclosebutton)
+  - [DrawerPanel](#drawerpanel)
 
 👉 The animation effect of this component is dependent on the
 `prefers-reduced-motion` media query.
@@ -15,7 +15,7 @@ The Drawer is a composition of several subcomponents:
 
 ```html
 <dialog id="my-drawer-dialog" class="Drawer Drawer--right">
-  <!-- Drawer close button and Drawer panel goes here  -->
+  <!-- Drawer panel goes here  -->
 </dialog>
 ```
 
@@ -25,7 +25,7 @@ The `Drawer` component can be aligned to the left or right side of the screen us
 
 ```html
 <dialog id="my-drawer-dialog" class="Drawer Drawer--left">
-  <!-- Drawer close button and Drawer panel goes here  -->
+  <!-- Drawer panel goes here  -->
 </dialog>
 ```
 
@@ -42,14 +42,8 @@ The `DrawerCloseButton` component is a button that closes the drawer when clicke
   aria-controls="my-drawer-dialog"
   aria-expanded="false"
 >
-  <svg viewBox="0 0 24 24" fill="none" width="24" height="24" aria-hidden="true">
-    <path
-      d="M18.3 5.70997C17.91 5.31997 17.28 5.31997 16.89 5.70997L12 10.59L7.11 5.69997C6.72 5.30997 6.09 5.30997 5.7
-    5.69997C5.31 6.08997 5.31 6.71997 5.7 7.10997L10.59 12L5.7 16.89C5.31 17.28 5.31 17.91 5.7 18.3C6.09 18.69 6.72 18.69
-    7.11 18.3L12 13.41L16.89 18.3C17.28 18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 17.28 18.3 16.89L13.41 12L18.3
-    7.10997C18.68 6.72997 18.68 6.08997 18.3 5.70997Z"
-      fill="currentColor"
-    ></path>
+  <svg width="24" height="24">
+    <use xlink:href="/icons/svg/sprite.svg#close" />
   </svg>
   <span class="accessibility-hidden">Close</span>
 </button>
@@ -67,31 +61,25 @@ The `DrawerPanel` component is a container for the content that will be displaye
 </div>
 ```
 
-## Full implementation
+## Full Example
 
 ```html
 <dialog id="my-drawer-dialog" class="Drawer Drawer--right">
-  <button
-    type="button"
-    aria-expanded="false"
-    class="Button Button--tertiary Button--medium Button--symmetrical DrawerCloseButton"
-    data-spirit-dismiss="offcanvas"
-    data-spirit-target="#drawer-example-1"
-    aria-controls="drawer-example-1"
-  >
-    <svg viewBox="0 0 24 24" fill="none" width="24" height="24" aria-hidden="true">
-      <path
-        d="M18.3 5.70997C17.91 5.31997 17.28 5.31997 16.89 5.70997L12 10.59L7.11 5.69997C6.72 5.30997 6.09 5.30997 5.7
-      5.69997C5.31 6.08997 5.31 6.71997 5.7 7.10997L10.59 12L5.7 16.89C5.31 17.28 5.31 17.91 5.7 18.3C6.09 18.69 6.72 18.69
-      7.11 18.3L12 13.41L16.89 18.3C17.28 18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 17.28 18.3 16.89L13.41 12L18.3
-      7.10997C18.68 6.72997 18.68 6.08997 18.3 5.70997Z"
-        fill="currentColor"
-      ></path>
-    </svg>
-    <span class="accessibility-hidden">Close</span>
-  </button>
   <div class="DrawerPanel">
     <div class="DrawerPanel__content">
+      <button
+        type="button"
+        aria-expanded="false"
+        class="Button Button--tertiary Button--medium Button--symmetrical DrawerCloseButton"
+        data-spirit-dismiss="offcanvas"
+        data-spirit-target="#drawer-example-1"
+        aria-controls="drawer-example-1"
+      >
+        <svg width="24" height="24">
+          <use xlink:href="/icons/svg/sprite.svg#close" />
+        </svg>
+        <span class="accessibility-hidden">Close</span>
+      </button>
       <!-- Drawer content goes here  -->
     </div>
   </div>

diff --git a/packages/web/src/scss/components/Drawer/_DrawerPanel.scss b/packages/web/src/scss/components/Drawer/_DrawerPanel.scss
@@ -1,13 +1,14 @@
 @use 'sass:map';
+@use '@tokens' as tokens;
 @use 'theme';
 
 .DrawerPanel {
-    --drawer-translate-x: 0%;
+    --#{tokens.$css-variable-prefix}drawer-translate-x: 0%;
 
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    width: theme.$drawer-panel-width;
+    width: var(--#{tokens.$css-variable-prefix}drawer-panel-width, #{theme.$drawer-panel-width});
     height: theme.$drawer-panel-height;
     max-height: theme.$drawer-panel-max-height;
     color: theme.$drawer-panel-text-color;
@@ -22,16 +23,16 @@
     }
 }
 
-.Drawer--left .DrawerPanel {
-    --drawer-translate-x: -100%;
+.Drawer--left > .DrawerPanel {
+    ----#{tokens.$css-variable-prefix}drawer-translate-x: -100%;
 }
 
-.Drawer--right .DrawerPanel {
-    --drawer-translate-x: 100%;
+.Drawer--right > .DrawerPanel {
+    --#{tokens.$css-variable-prefix}drawer-translate-x: 100%;
 }
 
 .Drawer[open] .DrawerPanel {
-    --drawer-translate-x: 0%;
+    --#{tokens.$css-variable-prefix}drawer-translate-x: 0%;
 }
 
 .DrawerPanel__content {

diff --git a/packages/web/src/scss/components/Drawer/index.html b/packages/web/src/scss/components/Drawer/index.html
@@ -3,17 +3,15 @@
 <script>
   document.addEventListener("DOMContentLoaded", () => {
     const radios = document.querySelectorAll('input[name="drawer-alignment"]');
-    const drawer = document.getElementById("drawer-example-1");
+    const drawer = document.getElementById("drawer-example");
 
     radios.forEach(radio => {
       radio.addEventListener("change", () => {
         if (radio.checked) {
           if (radio.value === "left") {
-            drawer.classList.remove("Drawer--right");
-            drawer.classList.add("Drawer--left");
+            drawer.classList.replace("Drawer--right", "Drawer--left");
           } else if (radio.value === "right") {
-            drawer.classList.remove("Drawer--left");
-            drawer.classList.add("Drawer--right");
+            drawer.classList.replace("Drawer--left", "Drawer--right");
           }
         }
       });
@@ -52,15 +50,15 @@ <h2 class="docs-Heading">Drawer</h2>
         data-test-id="drawer-basic"
         class="Button Button--primary Button--medium"
         data-spirit-toggle="offcanvas"
-        data-spirit-target="#drawer-example-1"
+        data-spirit-target="#drawer-example"
         aria-controls="drawer-example-1"
         aria-expanded="false"
       >
         Open Drawer
       </button>
 
       <!-- Drawer: start -->
-      <dialog id="drawer-example-1" class="Drawer Drawer--right" aria-labelledby="example-basic__title">
+      <dialog id="drawer-example" class="Drawer Drawer--right" aria-label="example-basic__title">
         <div class="DrawerPanel">
           <div class="DrawerPanel__content">
             <button
@@ -70,13 +68,9 @@ <h2 class="docs-Heading">Drawer</h2>
               data-spirit-dismiss="offcanvas"
               data-spirit-target="#drawer-example-1"
               aria-controls="drawer-example-1">
-                <svg viewBox="0 0 24 24" fill="none" width="24" height="24" aria-hidden="true">
-                  <path d="M18.3 5.70997C17.91 5.31997 17.28 5.31997 16.89 5.70997L12 10.59L7.11 5.69997C6.72 5.30997 6.09 5.30997 5.7
-                  5.69997C5.31 6.08997 5.31 6.71997 5.7 7.10997L10.59 12L5.7 16.89C5.31 17.28 5.31 17.91 5.7 18.3C6.09 18.69 6.72 18.69
-                  7.11 18.3L12 13.41L16.89 18.3C17.28 18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 17.28 18.3 16.89L13.41 12L18.3
-                  7.10997C18.68 6.72997 18.68 6.08997 18.3 5.70997Z" fill="currentColor">
-                  </path>
-                </svg>
+              <svg width="24" height="24">
+                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+              </svg>
                 <span class="accessibility-hidden">Close</span>
             </button>
             <div class="p-800">Drawer content</div>