From 5d8072c00121061fd50a6bb87e7f64426a8ea28b Mon Sep 17 00:00:00 2001
From: Alex Panturu <panturu.alexandru@gmail.com>
Date: Thu, 23 May 2024 17:28:21 +0300
Subject: [PATCH 1/3] explorer: add `AppAnchorButton` component

---
 .../__tests__/AppAnchorButton.spec.js         |  66 ++++++++
 .../AppAnchorButton.spec.js.snap              |  17 ++
 .../app-anchor-button/AppAnchorButton.svelte  |  11 ++
 explorer/src/lib/components/index.js          |   3 +-
 .../components/__tests__/AnchorButton.spec.js |  88 ++++++++++
 .../__snapshots__/AnchorButton.spec.js.snap   | 156 ++++++++++++++++++
 .../components/anchor-button/AnchorButton.css |  10 ++
 .../anchor-button/AnchorButton.svelte         |  69 ++++++++
 explorer/src/lib/dusk/components/index.js     |   1 +
 9 files changed, 420 insertions(+), 1 deletion(-)
 create mode 100644 explorer/src/lib/components/__tests__/AppAnchorButton.spec.js
 create mode 100644 explorer/src/lib/components/__tests__/__snapshots__/AppAnchorButton.spec.js.snap
 create mode 100644 explorer/src/lib/components/app-anchor-button/AppAnchorButton.svelte
 create mode 100644 explorer/src/lib/dusk/components/__tests__/AnchorButton.spec.js
 create mode 100644 explorer/src/lib/dusk/components/__tests__/__snapshots__/AnchorButton.spec.js.snap
 create mode 100644 explorer/src/lib/dusk/components/anchor-button/AnchorButton.css
 create mode 100644 explorer/src/lib/dusk/components/anchor-button/AnchorButton.svelte

diff --git a/explorer/src/lib/components/__tests__/AppAnchorButton.spec.js b/explorer/src/lib/components/__tests__/AppAnchorButton.spec.js
new file mode 100644
index 0000000000..25e5255e88
--- /dev/null
+++ b/explorer/src/lib/components/__tests__/AppAnchorButton.spec.js
@@ -0,0 +1,66 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render } from "@testing-library/svelte";
+import { base } from "$app/paths";
+
+import { AppAnchorButton } from "..";
+
+describe("AppAnchorButton", () => {
+  const baseProps = {
+    className: "foo bar",
+    href: "/setup",
+    id: "some-id",
+  };
+
+  afterEach(cleanup);
+
+  it("should render an `AnchorButton` with the base path prepended to the `href` attribute, if the `href` represents an absolute URL", () => {
+    const { container, getByRole, rerender } = render(
+      AppAnchorButton,
+      baseProps
+    );
+    const anchorA = getByRole("link");
+
+    expect(container.firstChild).toMatchSnapshot();
+    expect(anchorA).toHaveAttribute("href", `${base}${baseProps.href}`);
+    expect(anchorA).toHaveClass("foo bar");
+    expect(anchorA).toHaveAttribute("id", baseProps.id);
+
+    rerender({ ...baseProps, href: "/" });
+
+    const anchorB = getByRole("link");
+
+    expect(anchorB).toHaveAttribute("href", `${base}/`);
+    expect(anchorB).toHaveClass("foo bar");
+    expect(anchorB).toHaveAttribute("id", baseProps.id);
+  });
+
+  it("should leave the `AnchorButton` as it is if the `href` points to a relative path", () => {
+    const { getByRole } = render(AppAnchorButton, {
+      ...baseProps,
+      href: "foo/bar",
+    });
+
+    expect(getByRole("link")).toHaveAttribute("href", "foo/bar");
+  });
+
+  it("should leave the `AnchorButton` as it is if the `href` points to an external URL", () => {
+    const href = "http://example.com";
+    const { getByRole } = render(AppAnchorButton, { ...baseProps, href });
+
+    expect(getByRole("link")).toHaveAttribute("href", href);
+  });
+
+  it("should forward the `onclick` event to the `AnchorButton`", async () => {
+    const handler = vi.fn();
+    const { component, getByRole } = render(AppAnchorButton, {
+      ...baseProps,
+      href: "#",
+    });
+
+    component.$on("click", handler);
+
+    await fireEvent.click(getByRole("link"));
+
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/AppAnchorButton.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/AppAnchorButton.spec.js.snap
new file mode 100644
index 0000000000..0e9235d24e
--- /dev/null
+++ b/explorer/src/lib/components/__tests__/__snapshots__/AppAnchorButton.spec.js.snap
@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AppAnchorButton > should render an \`AnchorButton\` with the base path prepended to the \`href\` attribute, if the \`href\` represents an absolute URL 1`] = `
+<div>
+  <a
+    aria-disabled="false"
+    class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal foo bar"
+    href="/some-base-path/setup"
+    id="some-id"
+  >
+    
+  </a>
+  <!--&lt;Anchor&gt;-->
+  <!--&lt;AnchorButton&gt;-->
+  <!--&lt;AppAnchorButton&gt;-->
+</div>
+`;
diff --git a/explorer/src/lib/components/app-anchor-button/AppAnchorButton.svelte b/explorer/src/lib/components/app-anchor-button/AppAnchorButton.svelte
new file mode 100644
index 0000000000..72800f2284
--- /dev/null
+++ b/explorer/src/lib/components/app-anchor-button/AppAnchorButton.svelte
@@ -0,0 +1,11 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { AnchorButton } from "$lib/dusk/components";
+  import { addBasePath } from "$lib/navigation";
+
+  /** @type {string} */
+  export let href;
+</script>
+
+<AnchorButton {...$$restProps} href={addBasePath(href)} on:click />
diff --git a/explorer/src/lib/components/index.js b/explorer/src/lib/components/index.js
index a231b8b92d..837c1189b9 100644
--- a/explorer/src/lib/components/index.js
+++ b/explorer/src/lib/components/index.js
@@ -1,10 +1,11 @@
-export { default as DataAlert } from "./data-alert/DataAlert.svelte";
 export { default as AppAnchor } from "./app-anchor/AppAnchor.svelte";
+export { default as AppAnchorButton } from "./app-anchor-button/AppAnchorButton.svelte";
 export { default as AppImage } from "./app-image/AppImage.svelte";
 export { default as BlockDetails } from "./block-details/BlockDetails.svelte";
 export { default as BlocksCard } from "./blocks-card/BlocksCard.svelte";
 export { default as BlocksList } from "./blocks-list/BlocksList.svelte";
 export { default as BlocksTable } from "./blocks-table/BlocksTable.svelte";
+export { default as DataAlert } from "./data-alert/DataAlert.svelte";
 export { default as DataCard } from "./data-card/DataCard.svelte";
 export { default as DataGuard } from "./data-guard/DataGuard.svelte";
 export { default as DetailList } from "./detail-list/DetailList.svelte";
diff --git a/explorer/src/lib/dusk/components/__tests__/AnchorButton.spec.js b/explorer/src/lib/dusk/components/__tests__/AnchorButton.spec.js
new file mode 100644
index 0000000000..98417aa383
--- /dev/null
+++ b/explorer/src/lib/dusk/components/__tests__/AnchorButton.spec.js
@@ -0,0 +1,88 @@
+// @ts-nocheck
+
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+import { mdiFolderOutline } from "@mdi/js";
+
+import { AnchorButton } from "..";
+
+describe("AnchorButton", () => {
+  const baseProps = {
+    href: "/some-url",
+    text: "some text",
+  };
+  const baseOptions = {
+    props: baseProps,
+    target: document.body,
+  };
+
+  afterEach(cleanup);
+
+  it("should render the AnchorButton component", () => {
+    const { container } = render(AnchorButton, baseOptions);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should add a disabled class if the related property is `true`", () => {
+    const props = {
+      ...baseProps,
+      disabled: true,
+    };
+    const { container } = render(AnchorButton, { ...baseOptions, props });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should pass additional class names and attributes to the rendered element", () => {
+    const props = {
+      ...baseProps,
+      className: "foo bar",
+      id: "some-id",
+    };
+    const { container } = render(AnchorButton, { ...baseOptions, props });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should render a AnchorButton without a text", () => {
+    const props = {
+      ...baseProps,
+      text: "",
+    };
+    const { container } = render(AnchorButton, { ...baseOptions, props });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should be able to render a AnchorButton with an icon and text", () => {
+    ["after", "before"].forEach((position) => {
+      const props = {
+        ...baseProps,
+        icon: {
+          path: mdiFolderOutline,
+          position,
+        },
+      };
+      const { container } = render(AnchorButton, { ...baseOptions, props });
+
+      expect(container.firstChild).toMatchSnapshot();
+    });
+  });
+
+  it("should be able to render a AnchorButton with an icon only", () => {
+    ["after", "before"].forEach((position) => {
+      const props = {
+        ...baseProps,
+        icon: {
+          path: mdiFolderOutline,
+          position,
+        },
+        text: "",
+      };
+      const { container } = render(AnchorButton, { ...baseOptions, props });
+
+      expect(container.firstChild).toMatchSnapshot();
+    });
+  });
+});
diff --git a/explorer/src/lib/dusk/components/__tests__/__snapshots__/AnchorButton.spec.js.snap b/explorer/src/lib/dusk/components/__tests__/__snapshots__/AnchorButton.spec.js.snap
new file mode 100644
index 0000000000..e64474dc92
--- /dev/null
+++ b/explorer/src/lib/dusk/components/__tests__/__snapshots__/AnchorButton.spec.js.snap
@@ -0,0 +1,156 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AnchorButton > should add a disabled class if the related property is \`true\` 1`] = `
+<a
+  aria-disabled="true"
+  class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal dusk-anchor-button--disabled"
+  href="/some-url"
+  tabindex="-1"
+>
+  <span
+    class="dusk-anchor-button__text"
+  >
+    some text
+  </span>
+  
+</a>
+`;
+
+exports[`AnchorButton > should be able to render a AnchorButton with an icon and text 1`] = `
+<a
+  aria-disabled="false"
+  class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal dusk-icon-button--labeled"
+  href="/some-url"
+>
+  <span
+    class="dusk-anchor-button__text"
+  >
+    some text
+  </span>
+   
+  <svg
+    class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
+    role="graphics-symbol"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
+    />
+  </svg>
+  
+  <!--&lt;Icon&gt;-->
+  
+</a>
+`;
+
+exports[`AnchorButton > should be able to render a AnchorButton with an icon and text 2`] = `
+<a
+  aria-disabled="false"
+  class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal dusk-icon-button--labeled"
+  href="/some-url"
+>
+  <span
+    class="dusk-anchor-button__text"
+  >
+    some text
+  </span>
+   
+  <svg
+    class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
+    role="graphics-symbol"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
+    />
+  </svg>
+  
+  <!--&lt;Icon&gt;-->
+  
+</a>
+`;
+
+exports[`AnchorButton > should be able to render a AnchorButton with an icon only 1`] = `
+<a
+  aria-disabled="false"
+  class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal dusk-icon-button"
+  href="/some-url"
+>
+   
+  <svg
+    class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
+    role="graphics-symbol"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
+    />
+  </svg>
+  
+  <!--&lt;Icon&gt;-->
+  
+</a>
+`;
+
+exports[`AnchorButton > should be able to render a AnchorButton with an icon only 2`] = `
+<a
+  aria-disabled="false"
+  class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal dusk-icon-button"
+  href="/some-url"
+>
+   
+  <svg
+    class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
+    role="graphics-symbol"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
+    />
+  </svg>
+  
+  <!--&lt;Icon&gt;-->
+  
+</a>
+`;
+
+exports[`AnchorButton > should pass additional class names and attributes to the rendered element 1`] = `
+<a
+  aria-disabled="false"
+  class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal foo bar"
+  href="/some-url"
+  id="some-id"
+>
+  <span
+    class="dusk-anchor-button__text"
+  >
+    some text
+  </span>
+  
+</a>
+`;
+
+exports[`AnchorButton > should render a AnchorButton without a text 1`] = `
+<a
+  aria-disabled="false"
+  class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal"
+  href="/some-url"
+>
+  
+</a>
+`;
+
+exports[`AnchorButton > should render the AnchorButton component 1`] = `
+<a
+  aria-disabled="false"
+  class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal"
+  href="/some-url"
+>
+  <span
+    class="dusk-anchor-button__text"
+  >
+    some text
+  </span>
+  
+</a>
+`;
diff --git a/explorer/src/lib/dusk/components/anchor-button/AnchorButton.css b/explorer/src/lib/dusk/components/anchor-button/AnchorButton.css
new file mode 100644
index 0000000000..0d98b9baaa
--- /dev/null
+++ b/explorer/src/lib/dusk/components/anchor-button/AnchorButton.css
@@ -0,0 +1,10 @@
+.dusk-anchor-button {
+  appearance: button;
+  text-decoration: none;
+  text-align: center;
+}
+
+.dusk-anchor-button.dusk-anchor-button--disabled {
+  cursor: default;
+  pointer-events: none;
+}
diff --git a/explorer/src/lib/dusk/components/anchor-button/AnchorButton.svelte b/explorer/src/lib/dusk/components/anchor-button/AnchorButton.svelte
new file mode 100644
index 0000000000..1b40d993be
--- /dev/null
+++ b/explorer/src/lib/dusk/components/anchor-button/AnchorButton.svelte
@@ -0,0 +1,69 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { makeClassName } from "$lib/dusk/string";
+  import { Anchor, Icon } from "$lib/dusk/components";
+
+  import "./AnchorButton.css";
+
+  /** @type {String | Undefined} */
+  export let className = undefined;
+
+  /** @type {Boolean} */
+  export let disabled = false;
+
+  /** @type {String} */
+  export let href;
+
+  /** @type {IconProp | Undefined} */
+  export let icon = undefined;
+
+  /** @type {ButtonSize} */
+  export let size = "normal";
+
+  /** @type {ButtonVariant} */
+  export let variant = "primary";
+
+  /** @type {String | Undefined} */
+  export let text = undefined;
+
+  $: classes = makeClassName([
+    "dusk-anchor-button",
+    `dusk-anchor-button--variant--${variant}`,
+    `dusk-anchor-button--size--${size}`,
+    disabled ? "dusk-anchor-button--disabled" : "",
+    icon && text ? "dusk-icon-button--labeled" : icon ? "dusk-icon-button" : "",
+    className,
+  ]);
+</script>
+
+<Anchor
+  {...$$restProps}
+  aria-disabled={disabled}
+  className={classes}
+  {href}
+  on:click
+  tabindex={disabled ? "-1" : $$restProps.tabindex ?? undefined}
+>
+  {#if icon?.position === "after"}
+    {#if text}
+      <span class="dusk-anchor-button__text">{text}</span>
+    {/if}
+    <Icon
+      className="dusk-anchor-button__icon"
+      path={icon.path}
+      size={icon.size}
+    />
+  {:else if icon}
+    <Icon
+      className="dusk-anchor-button__icon"
+      path={icon.path}
+      size={icon.size}
+    />
+    {#if text}
+      <span class="dusk-anchor-button__text">{text}</span>
+    {/if}
+  {:else if text}
+    <span class="dusk-anchor-button__text">{text}</span>
+  {/if}
+</Anchor>
diff --git a/explorer/src/lib/dusk/components/index.js b/explorer/src/lib/dusk/components/index.js
index 8984b0c0e5..0be65f3158 100644
--- a/explorer/src/lib/dusk/components/index.js
+++ b/explorer/src/lib/dusk/components/index.js
@@ -1,4 +1,5 @@
 export { default as Anchor } from "./anchor/Anchor.svelte";
+export { default as AnchorButton } from "./anchor-button/AnchorButton.svelte";
 export { default as Badge } from "./badge/Badge.svelte";
 export { default as Button } from "./button/Button.svelte";
 export { default as Card } from "./card/Card.svelte";

From 4809d19e5002ff429199a7f54b8e392acaa5456d Mon Sep 17 00:00:00 2001
From: Alex Panturu <panturu.alexandru@gmail.com>
Date: Thu, 23 May 2024 17:28:44 +0300
Subject: [PATCH 2/3] explorer: disable block height navigation

---
 .../__snapshots__/BlockDetails.spec.js.snap   | 22 ++++++++++++++-----
 .../block-details/BlockDetails.svelte         | 20 ++++++++---------
 .../__tests__/__snapshots__/page.spec.js.snap | 22 ++++++++++++++-----
 3 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
index 65fd87bc42..61719f10fc 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
@@ -85,11 +85,12 @@ exports[`Block Details > renders the Block Details component 1`] = `
         class="details-list__definition"
       >
         <a
-          class="dusk-anchor block-details__list-anchor"
+          aria-disabled="false"
+          class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal dusk-icon-button block-details__list-anchor"
           href="/some-base-path/blocks/block?id=07b74b35c2c7cf8f41426cd0870bafa1a2c7adee3fdd876643548096186fc4cb"
         >
           <svg
-            class="dusk-icon dusk-icon--size--normal"
+            class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
@@ -99,18 +100,23 @@ exports[`Block Details > renders the Block Details component 1`] = `
           </svg>
           
           <!--&lt;Icon&gt;-->
+           
+          
+          
         </a>
         <!--&lt;Anchor&gt;-->
-        <!--&lt;AppAnchor&gt;-->
+        <!--&lt;AnchorButton&gt;-->
+        <!--&lt;AppAnchorButton&gt;-->
          
         495,868
          
         <a
-          class="dusk-anchor block-details__list-anchor"
+          aria-disabled="false"
+          class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal dusk-icon-button block-details__list-anchor"
           href="/some-base-path/blocks/block?id=6011556208a85e6001bd01ccbf936486b91318a7f6cbcf7ab810adf6fae34204"
         >
           <svg
-            class="dusk-icon dusk-icon--size--normal"
+            class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
@@ -120,9 +126,13 @@ exports[`Block Details > renders the Block Details component 1`] = `
           </svg>
           
           <!--&lt;Icon&gt;-->
+           
+          
+          
         </a>
         <!--&lt;Anchor&gt;-->
-        <!--&lt;AppAnchor&gt;-->
+        <!--&lt;AnchorButton&gt;-->
+        <!--&lt;AppAnchorButton&gt;-->
          
       </dd>
       <!--&lt;ListItem&gt;-->
diff --git a/explorer/src/lib/components/block-details/BlockDetails.svelte b/explorer/src/lib/components/block-details/BlockDetails.svelte
index 965d635206..bff9635df7 100644
--- a/explorer/src/lib/components/block-details/BlockDetails.svelte
+++ b/explorer/src/lib/components/block-details/BlockDetails.svelte
@@ -2,8 +2,8 @@
 
 <script>
   import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
-  import { AppAnchor, DataCard, ListItem } from "$lib/components";
-  import { Icon, ProgressBar } from "$lib/dusk/components";
+  import { AppAnchorButton, DataCard, ListItem } from "$lib/components";
+  import { ProgressBar } from "$lib/dusk/components";
   import { luxToDusk } from "$lib/dusk/currency";
   import { createValueFormatter } from "$lib/dusk/value";
   import {
@@ -80,19 +80,19 @@
     >
       <svelte:fragment slot="term">height</svelte:fragment>
       <svelte:fragment slot="definition">
-        <AppAnchor
+        <AppAnchorButton
           className="block-details__list-anchor"
           href="/blocks/block?id={data.header.prevblockhash}"
-        >
-          <Icon path={mdiArrowLeft} />
-        </AppAnchor>
+          icon={{ path: mdiArrowLeft }}
+          disabled={!data.header.prevblockhash}
+        />
         {formatter(data.header.height)}
-        <AppAnchor
+        <AppAnchorButton
           className="block-details__list-anchor"
           href="/blocks/block?id={data.header.nextblockhash}"
-        >
-          <Icon path={mdiArrowRight} />
-        </AppAnchor>
+          icon={{ path: mdiArrowRight }}
+          disabled={!data.header.nextblockhash}
+        />
       </svelte:fragment>
     </ListItem>
 
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
index 379f3fc131..25515a14cd 100644
--- a/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap
+++ b/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap
@@ -175,11 +175,12 @@ exports[`Block Details > should render the Block Details page and query the nece
             class="details-list__definition"
           >
             <a
-              class="dusk-anchor block-details__list-anchor"
+              aria-disabled="false"
+              class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal dusk-icon-button block-details__list-anchor"
               href="/some-base-path/blocks/block?id=07b74b35c2c7cf8f41426cd0870bafa1a2c7adee3fdd876643548096186fc4cb"
             >
               <svg
-                class="dusk-icon dusk-icon--size--normal"
+                class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
                 role="graphics-symbol"
                 viewBox="0 0 24 24"
               >
@@ -189,18 +190,23 @@ exports[`Block Details > should render the Block Details page and query the nece
               </svg>
               
               <!--&lt;Icon&gt;-->
+               
+              
+              
             </a>
             <!--&lt;Anchor&gt;-->
-            <!--&lt;AppAnchor&gt;-->
+            <!--&lt;AnchorButton&gt;-->
+            <!--&lt;AppAnchorButton&gt;-->
              
             495,868
              
             <a
-              class="dusk-anchor block-details__list-anchor"
+              aria-disabled="false"
+              class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal dusk-icon-button block-details__list-anchor"
               href="/some-base-path/blocks/block?id=6011556208a85e6001bd01ccbf936486b91318a7f6cbcf7ab810adf6fae34204"
             >
               <svg
-                class="dusk-icon dusk-icon--size--normal"
+                class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
                 role="graphics-symbol"
                 viewBox="0 0 24 24"
               >
@@ -210,9 +216,13 @@ exports[`Block Details > should render the Block Details page and query the nece
               </svg>
               
               <!--&lt;Icon&gt;-->
+               
+              
+              
             </a>
             <!--&lt;Anchor&gt;-->
-            <!--&lt;AppAnchor&gt;-->
+            <!--&lt;AnchorButton&gt;-->
+            <!--&lt;AppAnchorButton&gt;-->
              
           </dd>
           <!--&lt;ListItem&gt;-->

From 468fce9ca7cc689037c5d927ca0d0d419355c1ae Mon Sep 17 00:00:00 2001
From: Alex Panturu <panturu.alexandru@gmail.com>
Date: Fri, 24 May 2024 16:26:09 +0300
Subject: [PATCH 3/3] explorer: update AnchorButton test

---
 .../components/__tests__/AnchorButton.spec.js |  7 ++-
 .../__snapshots__/AnchorButton.spec.js.snap   | 49 +++++++++++++++++++
 2 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/explorer/src/lib/dusk/components/__tests__/AnchorButton.spec.js b/explorer/src/lib/dusk/components/__tests__/AnchorButton.spec.js
index 98417aa383..092f84d019 100644
--- a/explorer/src/lib/dusk/components/__tests__/AnchorButton.spec.js
+++ b/explorer/src/lib/dusk/components/__tests__/AnchorButton.spec.js
@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 import { afterEach, describe, expect, it } from "vitest";
 import { cleanup, render } from "@testing-library/svelte";
 import { mdiFolderOutline } from "@mdi/js";
@@ -15,6 +13,7 @@ describe("AnchorButton", () => {
     props: baseProps,
     target: document.body,
   };
+  const iconPositions = /** @type {const} */ (["after", "before", undefined]);
 
   afterEach(cleanup);
 
@@ -56,7 +55,7 @@ describe("AnchorButton", () => {
   });
 
   it("should be able to render a AnchorButton with an icon and text", () => {
-    ["after", "before"].forEach((position) => {
+    iconPositions.forEach((position) => {
       const props = {
         ...baseProps,
         icon: {
@@ -71,7 +70,7 @@ describe("AnchorButton", () => {
   });
 
   it("should be able to render a AnchorButton with an icon only", () => {
-    ["after", "before"].forEach((position) => {
+    iconPositions.forEach((position) => {
       const props = {
         ...baseProps,
         icon: {
diff --git a/explorer/src/lib/dusk/components/__tests__/__snapshots__/AnchorButton.spec.js.snap b/explorer/src/lib/dusk/components/__tests__/__snapshots__/AnchorButton.spec.js.snap
index e64474dc92..e6a93f5359 100644
--- a/explorer/src/lib/dusk/components/__tests__/__snapshots__/AnchorButton.spec.js.snap
+++ b/explorer/src/lib/dusk/components/__tests__/__snapshots__/AnchorButton.spec.js.snap
@@ -70,6 +70,33 @@ exports[`AnchorButton > should be able to render a AnchorButton with an icon and
 </a>
 `;
 
+exports[`AnchorButton > should be able to render a AnchorButton with an icon and text 3`] = `
+<a
+  aria-disabled="false"
+  class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal dusk-icon-button--labeled"
+  href="/some-url"
+>
+  <span
+    class="dusk-anchor-button__text"
+  >
+    some text
+  </span>
+   
+  <svg
+    class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
+    role="graphics-symbol"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
+    />
+  </svg>
+  
+  <!--&lt;Icon&gt;-->
+  
+</a>
+`;
+
 exports[`AnchorButton > should be able to render a AnchorButton with an icon only 1`] = `
 <a
   aria-disabled="false"
@@ -114,6 +141,28 @@ exports[`AnchorButton > should be able to render a AnchorButton with an icon onl
 </a>
 `;
 
+exports[`AnchorButton > should be able to render a AnchorButton with an icon only 3`] = `
+<a
+  aria-disabled="false"
+  class="dusk-anchor dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--normal dusk-icon-button"
+  href="/some-url"
+>
+   
+  <svg
+    class="dusk-icon dusk-icon--size--normal dusk-anchor-button__icon"
+    role="graphics-symbol"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
+    />
+  </svg>
+  
+  <!--&lt;Icon&gt;-->
+  
+</a>
+`;
+
 exports[`AnchorButton > should pass additional class names and attributes to the rendered element 1`] = `
 <a
   aria-disabled="false"