web-wallet: Replace Card component

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

Hide file tree

Showing 27 changed files with 720 additions and 399 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
@@ -17,7 +17,6 @@
     Agreement,
     Badge,
     Button,
-    Card,
     Icon,
     Textbox,
     Wizard,
@@ -33,6 +32,8 @@
     OperationResult,
   } from "$lib/components";
 
+  import { IconHeaderToggleCard } from "$lib/containers";
+
   import StakeOverview from "./StakeOverview.svelte";
 
   /** @type {(...args: any[]) => Promise<string>} */
@@ -171,10 +172,10 @@
           }}
         >
           <Badge text="WARNING" variant="warning" />
-          <Card
+          <IconHeaderToggleCard
             onSurface
-            iconPath={mdiAlertOutline}
             heading="Only stake if you have a node set up!"
+            iconPath={mdiAlertOutline}
           >
             <p class="staking-warning">
               I understand that I have set up a node properly, as described <AppAnchor
@@ -192,7 +193,7 @@
               label="Don't show this step again."
               bind:checked={hideStakingNoticeNextTime}
             />
-          </Card>
+          </IconHeaderToggleCard>
         </WizardStep>
       {/if}
 

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,28 +302,33 @@ 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"
+          class="card__header"
+          slot="header"
         >
-          <svg
-            class="dusk-icon dusk-icon--size--normal dusk-card__icon"
-            role="graphics-symbol"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
-            />
-          </svg>
-          
-          <!--&lt;Icon&gt;-->
-           
-          <h3
-            class="h4"
+          <div
+            class="card__header-title"
           >
-            Only stake if you have a node set up!
-          </h3>
+            <svg
+              class="dusk-icon dusk-icon--size--normal"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
+              />
+            </svg>
+            
+            <!--&lt;Icon&gt;-->
+             
+            <h3
+              class="h4"
+            >
+              Only stake if you have a node set up!
+            </h3>
+          </div>
            
         </header>
          
@@ -364,9 +369,12 @@ exports[`Stake > should render the Stake notice 1`] = `
           </label>
         </div>
         <!--&lt;Agreement&gt;-->
+        
+         
       </div>
       
       <!--&lt;Card&gt;-->
+      <!--&lt;IconHeaderToggleCard&gt;-->
        
       <div
         class="dusk-wizard__step-navigation"

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,37 @@
+<script>
+  import { Card, Icon, Switch } from "$lib/dusk/components";
+
+  import "./IconHeaderToggleCard.css";
+
+  /** @type {string | undefined} */
+  export let iconPath = undefined;
+
+  /** @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}>
+  <header slot="header" class="card__header">
+    <div class="card__header-title">
+      {#if iconPath}
+        <Icon path={iconPath} />
+      {/if}
+      <h3 class="h4">{heading}</h3>
+    </div>
+    {#if isToggled !== undefined}
+      <Switch onSurface bind:value={isToggled} />
+    {/if}
+  </header>
+  {#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,40 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+import { IconHeaderToggleCard } from "..";
+
+describe("IconHeaderToggleCard", () => {
+  afterEach(cleanup);
+
+  it("renders the IconHeaderToggleCard component with a heading", () => {
+    const { container } = render(IconHeaderToggleCard, {
+      props: {
+        heading: "My Card",
+      },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("renders the IconHeaderToggleCard component with a heading and an icon", () => {
+    const { container } = render(IconHeaderToggleCard, {
+      props: {
+        heading: "My Card",
+        iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z",
+      },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("renders the IconHeaderToggleCard component with a toggle", () => {
+    const { container } = render(IconHeaderToggleCard, {
+      props: {
+        heading: "My Card",
+        iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z",
+        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,124 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`IconHeaderToggleCard > renders the IconHeaderToggleCard component with a heading 1`] = `
+<div>
+  <div
+    class="dusk-card dusk-card--gap-default"
+  >
+    <header
+      class="card__header"
+      slot="header"
+    >
+      <div
+        class="card__header-title"
+      >
+         
+        <h3
+          class="h4"
+        >
+          My Card
+        </h3>
+      </div>
+       
+    </header>
+     
+    
+     
+  </div>
+  
+  <!--&lt;Card&gt;-->
+  <!--&lt;IconHeaderToggleCard&gt;-->
+</div>
+`;
+
+exports[`IconHeaderToggleCard > renders the IconHeaderToggleCard component with a heading and an icon 1`] = `
+<div>
+  <div
+    class="dusk-card dusk-card--gap-default"
+  >
+    <header
+      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>
+       
+    </header>
+     
+    
+     
+  </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"
+  >
+    <header
+      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;-->
+    </header>
+     
+    
+     
+  </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";