web-wallet: Replace Card component

Resolves #1295, Resolves #1650
dusk-network · May 16, 2024 · 5e787b2 · 5e787b2
1 parent 36e1946
commit 5e787b2
Show file tree

Hide file tree

Showing 27 changed files with 651 additions and 488 deletions.
diff --git a/web-wallet/src/lib/components/ExistingWalletNotice/ExistingWalletNotice.svelte b/web-wallet/src/lib/components/ExistingWalletNotice/ExistingWalletNotice.svelte
@@ -1,14 +1,18 @@
 <script>
-  import { Button, Card } from "$lib/dusk/components";
+  import { Button } from "$lib/dusk/components";
   import { AppAnchorButton } from "$lib/components";
+  import { IconHeaderToggleCard } from "$lib/containers";
   import { mdiAlertOutline } from "@mdi/js";
 
   /** @type {boolean} */
   export let notice = false;
 </script>
 
 <section>
-  <Card iconPath={mdiAlertOutline} heading="Existing Wallet Detected">
+  <IconHeaderToggleCard
+    heading="Existing Wallet Detected"
+    iconPath={mdiAlertOutline}
+  >
     <p>
       Initializing a new wallet will replace your existing local wallet cache,
       erasing any stored data. Ensure you have securely backed up your current
@@ -30,7 +34,7 @@
         }}
       />
     </div>
-  </Card>
+  </IconHeaderToggleCard>
 </section>
 
 <style lang="postcss">

diff --git a/web-wallet/src/lib/components/Stake/Stake.svelte b/web-wallet/src/lib/components/Stake/Stake.svelte
@@ -171,11 +171,11 @@
           }}
         >
           <Badge text="WARNING" variant="warning" />
-          <Card
-            onSurface
-            iconPath={mdiAlertOutline}
-            heading="Only stake if you have a node set up!"
-          >
+          <Card onSurface>
+            <div slot="header" class="card__header">
+              <Icon path={mdiAlertOutline} />
+              <h3 class="h4">Only stake if you have a node set up!</h3>
+            </div>
             <p class="staking-warning">
               I understand that I have set up a node properly, as described <AppAnchor
                 class="staking-warning__step-node-setup-link"
@@ -359,6 +359,12 @@
     }
   }
 
+  .card__header {
+    display: flex;
+    gap: var(--small-gap);
+    align-items: center;
+  }
+
   .staking-warning {
     margin-bottom: 1em;
   }

diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap
@@ -302,13 +302,14 @@ exports[`Stake > should render the Stake notice 1`] = `
       <!--&lt;Badge&gt;-->
        
       <div
-        class="dusk-card dusk-card--on-surface"
+        class="dusk-card dusk-card--gap-default dusk-card--on-surface"
       >
-        <header
-          class="dusk-card__header"
+        <div
+          class="card__header s-DFOGCf36SJsY"
+          slot="header"
         >
           <svg
-            class="dusk-icon dusk-icon--size--normal dusk-card__icon"
+            class="dusk-icon dusk-icon--size--normal"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
@@ -320,12 +321,11 @@ exports[`Stake > should render the Stake notice 1`] = `
           <!--&lt;Icon&gt;-->
            
           <h3
-            class="h4"
+            class="h4 s-DFOGCf36SJsY"
           >
             Only stake if you have a node set up!
           </h3>
-           
-        </header>
+        </div>
          
         <p
           class="staking-warning s-DFOGCf36SJsY"
@@ -364,6 +364,7 @@ exports[`Stake > should render the Stake notice 1`] = `
           </label>
         </div>
         <!--&lt;Agreement&gt;-->
+         
       </div>
       
       <!--&lt;Card&gt;-->

diff --git a/web-wallet/src/lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.css b/web-wallet/src/lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.css
@@ -0,0 +1,11 @@
+.card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card__header-title {
+  display: flex;
+  gap: var(--small-gap);
+  align-items: center;
+}
diff --git a/web-wallet/src/lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.svelte b/web-wallet/src/lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { Card, Icon, Switch } from "$lib/dusk/components";
+
+  import "./IconHeaderToggleCard.css";
+
+  /** @type {string} */
+  export let iconPath;
+
+  /** @type {string} */
+  export let heading;
+
+  /** @type {CardGap} */
+  export let gap = "default";
+
+  /** @type {boolean} */
+  export let onSurface = false;
+
+  /** @type {boolean | undefined} */
+  export let isToggled = undefined;
+</script>
+
+<Card {...$$restProps} {gap} {onSurface}>
+  <div slot="header" class="card__header">
+    <div class="card__header-title">
+      <Icon path={iconPath} />
+      <h3 class="h4">{heading}</h3>
+    </div>
+    {#if isToggled !== undefined}
+      <Switch onSurface bind:value={isToggled} />
+    {/if}
+  </div>
+  {#if isToggled || isToggled === undefined}
+    <slot />
+  {/if}
+</Card>
diff --git a/web-wallet/src/lib/containers/__tests__/IconHeaderToggleCard.spec.js b/web-wallet/src/lib/containers/__tests__/IconHeaderToggleCard.spec.js
@@ -0,0 +1,28 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+import { IconHeaderToggleCard } from "..";
+
+describe("IconHeaderToggleCard", () => {
+  afterEach(cleanup);
+
+  const props = {
+    heading: "My Card",
+    iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z",
+  };
+
+  it("renders the IconHeaderToggleCard component", () => {
+    const { container } = render(IconHeaderToggleCard, {
+      props,
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("renders the IconHeaderToggleCard component with a toggle", () => {
+    const { container } = render(IconHeaderToggleCard, {
+      props: { ...props, isToggled: true },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeaderToggleCard.spec.js.snap b/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeaderToggleCard.spec.js.snap
@@ -0,0 +1,93 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`IconHeaderToggleCard > renders the IconHeaderToggleCard component 1`] = `
+<div>
+  <div
+    class="dusk-card dusk-card--gap-default"
+  >
+    <div
+      class="card__header"
+      slot="header"
+    >
+      <div
+        class="card__header-title"
+      >
+        <svg
+          class="dusk-icon dusk-icon--size--normal"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
+          />
+        </svg>
+        
+        <!--&lt;Icon&gt;-->
+         
+        <h3
+          class="h4"
+        >
+          My Card
+        </h3>
+      </div>
+       
+    </div>
+     
+    
+     
+  </div>
+  
+  <!--&lt;Card&gt;-->
+  <!--&lt;IconHeaderToggleCard&gt;-->
+</div>
+`;
+
+exports[`IconHeaderToggleCard > renders the IconHeaderToggleCard component with a toggle 1`] = `
+<div>
+  <div
+    class="dusk-card dusk-card--gap-default"
+  >
+    <div
+      class="card__header"
+      slot="header"
+    >
+      <div
+        class="card__header-title"
+      >
+        <svg
+          class="dusk-icon dusk-icon--size--normal"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
+          />
+        </svg>
+        
+        <!--&lt;Icon&gt;-->
+         
+        <h3
+          class="h4"
+        >
+          My Card
+        </h3>
+      </div>
+       
+      <div
+        aria-checked="true"
+        aria-disabled="false"
+        class="dusk-switch dusk-switch--on-surface"
+        role="switch"
+        tabindex="0"
+      />
+      <!--&lt;Switch&gt;-->
+    </div>
+     
+    
+     
+  </div>
+  
+  <!--&lt;Card&gt;-->
+  <!--&lt;IconHeaderToggleCard&gt;-->
+</div>
+`;
diff --git a/web-wallet/src/lib/containers/index.js b/web-wallet/src/lib/containers/index.js
@@ -1,2 +1,3 @@
 export { default as StakeContract } from "./StakeContract/StakeContract.svelte";
 export { default as TransferContract } from "./TransferContract/TransferContract.svelte";
+export { default as IconHeaderToggleCard } from "./IconHeaderToggleCard/IconHeaderToggleCard.svelte";
diff --git a/web-wallet/src/lib/dusk/components/Card/Card.svelte b/web-wallet/src/lib/dusk/components/Card/Card.svelte
@@ -1,26 +1,19 @@
 <script>
-  import Icon from "../Icon/Icon.svelte";
-  import Switch from "../Switch/Switch.svelte";
   import { makeClassName } from "$lib/dusk/string";
 
   /** @type {string} */
   export let tag = "div";
 
-  /** @type {string | Undefined} */
-  export let className = undefined;
+  /** @type {CardGap} */
+  export let gap = "default";
 
   /** @type {string | Undefined} */
-  export let iconPath = undefined;
-
-  /** @type {string} */
-  export let heading;
-
-  export let hasToggle = false;
-  export let isToggled = false;
+  export let className = undefined;
 
+  /** @type {boolean} */
   export let onSurface = false;
 
-  $: classes = makeClassName(["dusk-card", className]);
+  $: classes = makeClassName(["dusk-card", `dusk-card--gap-${gap}`, className]);
 </script>
 
 <svelte:element
@@ -29,19 +22,11 @@
   class={classes}
   class:dusk-card--on-surface={onSurface}
 >
-  <header
-    class="dusk-card__header"
-    class:dusk-card__header--toggle-off={hasToggle && !isToggled}
-  >
-    {#if iconPath}
-      <Icon className="dusk-card__icon" path={iconPath} />
-    {/if}
-    <h3 class="h4">{heading}</h3>
-    {#if hasToggle}
-      <Switch onSurface bind:value={isToggled} />
-    {/if}
-  </header>
-  {#if !hasToggle || isToggled}
-    <slot />
+  {#if $$slots.header}
+    <slot name="header" />
+  {/if}
+  <slot />
+  {#if $$slots.footer}
+    <slot name="footer" />
   {/if}
 </svelte:element>
diff --git a/web-wallet/src/lib/dusk/components/__tests__/Card.spec.js b/web-wallet/src/lib/dusk/components/__tests__/Card.spec.js
@@ -5,16 +5,8 @@ import { Card } from "..";
 describe("Card", () => {
   afterEach(cleanup);
 
-  it("renders the Card component with a heading", () => {
-    const { container } = render(Card, { props: { heading: "My Card" } });
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it("renders the Card component with an icon when iconPath is provided", () => {
-    const { container } = render(Card, {
-      props: { heading: "My Card", iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z" },
-    });
+  it("renders the Card component", () => {
+    const { container } = render(Card);
 
     expect(container.firstChild).toMatchSnapshot();
   });