Merge pull request #2103 from dusk-network/feature-2074

web-wallet: Add DashboardMenu component

web-wallet/src/lib/components/DashboardNav/DashboardNav.svelte

@@ -0,0 +1,72 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { AppAnchor } from "$lib/components";
+  import { Icon } from "$lib/dusk/components";
+  import { makeClassName } from "$lib/dusk/string";
+
+  /** @type {String | Undefined} */
+  export let className = undefined;
+
+  /** @type {DashboardNavItem[]} */
+  export let items;
+</script>
+
+<nav {...$$restProps} class={makeClassName(["dashboard-nav", className])}>
+  <ul class="dashboard-nav-list">
+    {#each items as item (item.id)}
+      {@const { icons, label, href } = item}
+      <li>
+        <AppAnchor {href} className="dashboard-nav-list__item">
+          <span class="dashboard-nav-item-label">{label}</span>
+          {#if icons && icons.length}
+            <span class="dashboard-nav-item-icons">
+              {#each icons as icon (icon.path)}
+                <Icon path={icon.path} />
+              {/each}
+            </span>
+          {/if}
+        </AppAnchor>
+      </li>
+    {/each}
+  </ul>
+</nav>
+
+<style lang="postcss">
+  .dashboard-nav {
+    background-color: var(--surface-color);
+    border-radius: var(--control-border-radius-size);
+    padding: 0.5rem 1.375rem;
+    width: 100%;
+  }
+
+  .dashboard-nav-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    list-style: none;
+
+    :global(&__item) {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.625rem;
+    }
+
+    .dashboard-nav-item-label {
+      color: var(--on-surface-color);
+      font-size: 1.125rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.6875rem;
+    }
+
+    .dashboard-nav-item-icons {
+      color: var(--on-surface-color);
+      display: flex;
+      flex-direction: row;
+      gap: 0.625rem;
+    }
+  }
+</style>

web-wallet/src/lib/components/__tests__/DashboardNav.spec.js

@@ -0,0 +1,106 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+import { DashboardNav } from "..";
+import { mdiPlusBoxOutline, mdiSwapHorizontal, mdiTimerSand } from "@mdi/js";
+
+describe("DashboardNav", () => {
+  const baseProps = {
+    items: [
+      {
+        href: "#",
+        id: "item-1",
+        label: "Something",
+      },
+      {
+        href: "#",
+        icons: [],
+        id: "item-2",
+        label: "Send",
+      },
+      {
+        href: "#",
+        icons: [{ path: mdiTimerSand }],
+        id: "item-3",
+        label: "Receive",
+      },
+      {
+        href: "#",
+        icons: [
+          { path: mdiTimerSand },
+          { path: mdiSwapHorizontal },
+          { path: mdiPlusBoxOutline },
+        ],
+        id: "item-4",
+        label: "Stake",
+      },
+    ],
+  };
+  const baseOptions = {
+    props: baseProps,
+    target: document.body,
+  };
+
+  afterEach(cleanup);
+
+  it("renders the DashboardNav component", () => {
+    const { container } = render(DashboardNav, baseOptions);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should pass additional class names and attributes to the rendered element", async () => {
+    const props = {
+      ...baseProps,
+      className: "foo bar",
+    };
+    const { container, rerender } = render(DashboardNav, {
+      ...baseOptions,
+      props,
+    });
+
+    expect(container.firstChild).toHaveClass("foo bar");
+
+    await rerender({
+      ...props,
+      className: "qux",
+    });
+
+    expect(container.firstChild).toHaveClass("qux");
+  });
+
+  it("should not display icons if the item's icons array is undefined", () => {
+    const { container } = render(DashboardNav, baseProps);
+
+    expect(
+      container.querySelector(
+        ".dashboard-nav-list > li:nth-child(1) > .dashboard-nav-list__item > .dashboard-nav-item-icons"
+      )
+    ).toBeNull();
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should not display icons if the item's icon array is empty", () => {
+    const { container } = render(DashboardNav, baseProps);
+
+    expect(
+      container.querySelector(
+        ".dashboard-nav-list > li:nth-child(2) > .dashboard-nav-list__item > .dashboard-nav-item-icons"
+      )
+    ).toBeNull();
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should display icons if the item's icon array is present", () => {
+    const { container } = render(DashboardNav, baseProps);
+
+    expect(
+      container.querySelector(
+        ".dashboard-nav-list > li:nth-child(3) > .dashboard-nav-list__item > .dashboard-nav-item-icons"
+      )
+    ).toBeTruthy();
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});