web-wallet: Replace Card component

Resolves #1295, Resolves #1650

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 { IconHeadingCard } from "$lib/containers/Cards";
   import { mdiAlertOutline } from "@mdi/js";
 
   /** @type {boolean} */
   export let notice = false;
 </script>
 
 <section>
-  <Card iconPath={mdiAlertOutline} heading="Existing Wallet Detected">
+  <IconHeadingCard
+    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>
+  </IconHeadingCard>
 </section>
 
 <style lang="postcss">

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 { IconHeadingCard } from "$lib/containers/Cards";
+
   import StakeOverview from "./StakeOverview.svelte";
 
   /** @type {(...args: any[]) => Promise<string>} */
@@ -171,10 +172,10 @@
           }}
         >
           <Badge text="WARNING" variant="warning" />
-          <Card
+          <IconHeadingCard
             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>
+          </IconHeadingCard>
         </WizardStep>
       {/if}
 

web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap

@@ -269,28 +269,32 @@ exports[`Stake > should render the Stake notice 1`] = `
     </span>
      
     <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>
-        
-         
-        <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>
+          
+           
+          <h3
+            class="h4"
+          >
+            Only stake if you have a node set up!
+          </h3>
+        </div>
       </header>
        
       <p
@@ -326,6 +330,7 @@ exports[`Stake > should render the Stake notice 1`] = `
           Don't show this step again.
         </label>
       </div>
+       
     </div>
     
      

web-wallet/src/lib/containers/Cards/Card.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;
+}

web-wallet/src/lib/containers/Cards/IconHeadingCard.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { Card, Icon } from "$lib/dusk/components";
+
+  import "./Card.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;
+</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>
+  </header>
+  <slot />
+</Card>

web-wallet/src/lib/containers/Cards/ToggleableCard.svelte

@@ -0,0 +1,35 @@
+<script>
+  import { Card, Icon, Switch } from "$lib/dusk/components";
+
+  import "./Card.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} */
+  export let isToggled = false;
+</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>
+    <Switch onSurface bind:value={isToggled} />
+  </header>
+  {#if isToggled}
+    <slot />
+  {/if}
+</Card>

web-wallet/src/lib/containers/Cards/index.js

@@ -0,0 +1,2 @@
+export { default as IconHeadingCard } from "./IconHeadingCard.svelte";
+export { default as ToggleableCard } from "./ToggleableCard.svelte";

web-wallet/src/lib/containers/__tests__/IconHeadingCard.spec.js

@@ -0,0 +1,28 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+import { IconHeadingCard } from "../Cards";
+
+describe("IconHeadingCard", () => {
+  afterEach(cleanup);
+
+  it("renders the IconHeadingCard component with a heading", () => {
+    const { container } = render(IconHeadingCard, {
+      props: {
+        heading: "My Card",
+      },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("renders the IconHeadingCard component with a heading and an icon", () => {
+    const { container } = render(IconHeadingCard, {
+      props: {
+        heading: "My Card",
+        iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z",
+      },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-wallet/src/lib/containers/__tests__/ToggleableCard.spec.js

@@ -0,0 +1,40 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+import { ToggleableCard } from "../Cards";
+
+describe("IconHeadingCard", () => {
+  afterEach(cleanup);
+
+  it("renders the ToggleableCard component with a heading", () => {
+    const { container } = render(ToggleableCard, {
+      props: {
+        heading: "My Card",
+      },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("renders the ToggleableCard component with a heading and an icon", () => {
+    const { container } = render(ToggleableCard, {
+      props: {
+        heading: "My Card",
+        iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z",
+      },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("renders the ToggleableCard component with a toggle", () => {
+    const { container } = render(ToggleableCard, {
+      props: {
+        heading: "My Card",
+        iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z",
+        isToggled: true,
+      },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});