explorer: Remove HTML button instances and use the new Button component

Resolves #1622
dusk-network · May 8, 2024 · 8784f54 · 8784f54
1 parent 57f5a87
commit 8784f54
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 74 deletions.
diff --git a/explorer/src/lib/components/__tests__/ListItem.spec.js b/explorer/src/lib/components/__tests__/ListItem.spec.js
@@ -3,7 +3,6 @@ import { cleanup, render } from "@testing-library/svelte";
 import { ListItem } from "../";
 
 const baseProps = {
-  tooltipId: "tooltipId",
   tooltipText: "Tooltip text",
 };
 

diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
@@ -22,10 +22,16 @@ exports[`Block Details > renders the Block Details component 1`] = `
       </h3>
        
       <button
+        class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
         type="button"
       >
-        Back
+        <span
+          class="dusk-button__text"
+        >
+          Back
+        </span>
       </button>
+      <!--&lt;Button&gt;-->
     </header>
      
     <dl

diff --git a/explorer/src/lib/components/__tests__/__snapshots__/Navbar.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/Navbar.spec.js.snap
@@ -23,29 +23,24 @@ exports[`Navbar > renders the Navbar component 1`] = `
     <button
       aria-controls="dusk-navbar-menu"
       aria-expanded="false"
-      class="dusk-navbar__toggle"
+      class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--normal dusk-icon-button dusk-navbar__toggle"
       type="button"
     >
       <svg
-        aria-hidden="true"
-        class="dusk-navbar__toggle-svg"
-        viewBox="0 0 41 14"
-        xmlns="http://www.w3.org/2000/svg"
+        class="dusk-icon dusk-icon--size--large dusk-button__icon"
+        role="graphics-symbol"
+        viewBox="0 0 24 24"
       >
-        <line
-          stroke-width="2"
-          x2="40.8"
-          y1="1"
-          y2="1"
-        />
-        <line
-          stroke-width="2"
-          x2="40.8"
-          y1="12.9854"
-          y2="12.9854"
+        <path
+          d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"
         />
       </svg>
+      
+      <!--&lt;Icon&gt;-->
+       
+      
     </button>
+    <!--&lt;Button&gt;-->
      
     <div
       class="dusk-navbar__menu dusk-navbar__menu--hidden"

diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap
@@ -16,10 +16,16 @@ exports[`Transaction Details > renders the Transaction Details component 1`] = `
       </h3>
        
       <button
+        class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
         type="button"
       >
-        Back
+        <span
+          class="dusk-button__text"
+        >
+          Back
+        </span>
       </button>
+      <!--&lt;Button&gt;-->
     </header>
      
     <dl

diff --git a/explorer/src/lib/components/block-details/BlockDetails.svelte b/explorer/src/lib/components/block-details/BlockDetails.svelte
@@ -3,7 +3,7 @@
 <script>
   import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
   import { AppAnchor, ListItem } from "$lib/components";
-  import { Card, Icon, ProgressBar } from "$lib/dusk/components";
+  import { Button, Card, Icon, ProgressBar } from "$lib/dusk/components";
   import { createValueFormatter } from "$lib/dusk/value";
   import { luxToDusk } from "$lib/dusk/currency";
   import {
@@ -45,7 +45,7 @@
         - #{formatter(34526)}</span
       >
     </h3>
-    <button type="button" on:click={() => history.back()}>Back</button>
+    <Button on:click={() => history.back()} text="Back" variant="secondary" />
   </header>
   <dl class="block-details__list" bind:this={blockList}>
     <!-- BLOCK HASH -->

diff --git a/explorer/src/lib/components/navbar/Navbar.css b/explorer/src/lib/components/navbar/Navbar.css
@@ -39,12 +39,6 @@
   outline: none;
 }
 
-.dusk-navbar__toggle-svg {
-  width: 1.875rem;
-  height: 1.875rem;
-  stroke: currentColor;
-}
-
 .dusk-navbar__menu {
   display: flex;
   flex-direction: column;

diff --git a/explorer/src/lib/components/navbar/Navbar.svelte b/explorer/src/lib/components/navbar/Navbar.svelte
@@ -1,7 +1,8 @@
 <script>
+  import { mdiClose, mdiMenu } from "@mdi/js";
   import { AppAnchor, AppImage, SearchNotification } from "$lib/components";
   import { SearchField } from "$lib/containers";
-  import { NavList, Select } from "$lib/dusk/components";
+  import { Button, NavList, Select } from "$lib/dusk/components";
   import { createEventDispatcher, tick } from "svelte";
   import "./Navbar.css";
 
@@ -72,52 +73,16 @@
       sizes="(max-width: 1024px) 86px, 129px"
     />
   </AppAnchor>
-
-  <button
+  <Button
+    aria-controls="dusk-navbar-menu"
+    aria-expanded={!hidden}
+    className="dusk-navbar__toggle"
+    icon={{ path: hidden ? mdiMenu : mdiClose, size: "large" }}
     on:click={() => {
       hidden = !hidden;
       dispatch("toggleMenu", hidden);
     }}
-    type="button"
-    class="dusk-navbar__toggle"
-    aria-controls="dusk-navbar-menu"
-    aria-expanded={!hidden}
-  >
-    {#if hidden}
-      <svg
-        class="dusk-navbar__toggle-svg"
-        aria-hidden="true"
-        viewBox="0 0 41 14"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <line y1="1" x2="40.8" y2="1" stroke-width="2"></line>
-        <line y1="12.9854" x2="40.8" y2="12.9854" stroke-width="2"></line>
-      </svg>
-    {:else}
-      <svg
-        class="dusk-navbar__toggle-svg"
-        aria-hidden="true"
-        viewBox="0 0 32 31"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <line
-          x1="1.29289"
-          y1="30.2929"
-          x2="30.1428"
-          y2="1.44294"
-          stroke-width="2"
-        ></line>
-        <line
-          x1="1.70711"
-          y1="1.29289"
-          x2="30.5571"
-          y2="30.1428"
-          stroke-width="2"
-        ></line>
-      </svg>
-    {/if}
-  </button>
-
+  />
   <div
     class="dusk-navbar__menu"
     class:dusk-navbar__menu--hidden={hidden}

diff --git a/explorer/src/lib/components/transaction-details/TransactionDetails.svelte b/explorer/src/lib/components/transaction-details/TransactionDetails.svelte
@@ -2,7 +2,7 @@
 
 <script>
   import { ListItem } from "$lib/components";
-  import { Badge, Card, Switch } from "$lib/dusk/components";
+  import { Badge, Button, Card, Switch } from "$lib/dusk/components";
   import { createValueFormatter } from "$lib/dusk/value";
   import {
     createCurrencyFormatter,
@@ -49,7 +49,7 @@
 <Card className="transaction-details">
   <header slot="header" class="transaction-details__header">
     <h3 class="transaction-details__header-heading">Transaction Details</h3>
-    <button type="button" on:click={() => history.back()}>Back</button>
+    <Button on:click={() => history.back()} text="Back" variant="secondary" />
   </header>
   <dl class="transaction-details__list" bind:this={transactionList}>
     <!-- TRANSACTION ID -->

diff --git a/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap
@@ -28,10 +28,16 @@ exports[`Block > should render the Block Details page 1`] = `
           </h3>
            
           <button
+            class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
             type="button"
           >
-            Back
+            <span
+              class="dusk-button__text"
+            >
+              Back
+            </span>
           </button>
+          <!--&lt;Button&gt;-->
         </header>
          
         <dl

diff --git a/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap
@@ -19,10 +19,16 @@ exports[`Transaction > should render the Transaction page 1`] = `
         </h3>
          
         <button
+          class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
           type="button"
         >
-          Back
+          <span
+            class="dusk-button__text"
+          >
+            Back
+          </span>
         </button>
+        <!--&lt;Button&gt;-->
       </header>
        
       <dl