-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1655 from dusk-network/feature-1650
web-wallet: Replace Card component
- Loading branch information
Showing
30 changed files
with
772 additions
and
391 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| .dusk-card__header { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .dusk-card__header-title { | ||
| display: flex; | ||
| gap: var(--small-gap); | ||
| align-items: center; | ||
| } |
29 changes: 29 additions & 0 deletions
29
web-wallet/src/lib/containers/Cards/IconHeadingCard.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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="dusk-card__header"> | ||
| <div class="dusk-card__header-title"> | ||
| {#if iconPath} | ||
| <Icon path={iconPath} /> | ||
| {/if} | ||
| <h3 class="h4">{heading}</h3> | ||
| </div> | ||
| </header> | ||
| <slot /> | ||
| </Card> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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="dusk-card__header"> | ||
| <div class="dusk-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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { default as IconHeadingCard } from "./IconHeadingCard.svelte"; | ||
| export { default as ToggleableCard } from "./ToggleableCard.svelte"; |
28 changes: 28 additions & 0 deletions
28
web-wallet/src/lib/containers/__tests__/IconHeadingCard.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| }); | ||
| }); |
40 changes: 40 additions & 0 deletions
40
web-wallet/src/lib/containers/__tests__/ToggleableCard.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| }); | ||
| }); |
59 changes: 59 additions & 0 deletions
59
web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeadingCard.spec.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html | ||
|
|
||
| exports[`IconHeadingCard > renders the IconHeadingCard component with a heading 1`] = ` | ||
| <div | ||
| class="dusk-card dusk-card--gap-default" | ||
| > | ||
| <header | ||
| class="dusk-card__header" | ||
| slot="header" | ||
| > | ||
| <div | ||
| class="dusk-card__header-title" | ||
| > | ||
| <h3 | ||
| class="h4" | ||
| > | ||
| My Card | ||
| </h3> | ||
| </div> | ||
| </header> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`IconHeadingCard > renders the IconHeadingCard component with a heading and an icon 1`] = ` | ||
| <div | ||
| class="dusk-card dusk-card--gap-default" | ||
| > | ||
| <header | ||
| class="dusk-card__header" | ||
| slot="header" | ||
| > | ||
| <div | ||
| class="dusk-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> | ||
| <h3 | ||
| class="h4" | ||
| > | ||
| My Card | ||
| </h3> | ||
| </div> | ||
| </header> | ||
| </div> | ||
| `; |
Oops, something went wrong.