Skip to content

Commit

Permalink
Merge pull request #2354 from dusk-network/feature-2285
Browse files Browse the repository at this point in the history 
web-wallet: Fix Cards appearance
  • Loading branch information
@nortonandreev
nortonandreev authored Sep 12, 2024
2 parents 72d44ea + f854642 commit 8680964
Show file tree
Hide file tree
Showing 7 changed files with 127 additions and 110 deletions.
24 changes: 16 additions & 8 deletions web-wallet/src/lib/containers/Cards/Card.css
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
.dusk-card {
width: 100%;
}

.dusk-card__header {
display: flex;
gap: var(--small-gap);
align-items: center;
width: 100%;
}

.dusk-card__heading-icon {
fill: var(--secondary-color-variant-dark);
}

.dark .dusk-card__heading-icon {
fill: var(--secondary-color-variant-light);
}

.dusk-card__heading-container {
display: flex;
align-items: center;
Expand All @@ -25,3 +21,15 @@
justify-content: space-between;
gap: 0;
}

.dusk-card__header-toggle {
display: flex;
align-items: center;
justify-content: space-between;
}

.dusk-card__header-controls-wrapper {
display: flex;
gap: var(--small-gap);
align-items: center;
}
14 changes: 9 additions & 5 deletions web-wallet/src/lib/containers/Cards/ToggleableCard.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,19 @@
}
</script>

<Card {...$$restProps} {gap} {onSurface}>
<header slot="header" class="dusk-card__header">
<div class="dusk-card__header-title">
<Card {...$$restProps} {gap} {onSurface} showBody={isToggled}>
<header slot="header" class="dusk-card__header dusk-card__header-toggle">
<h3 class="h4">{heading}</h3>
<div class="dusk-card__header-controls-wrapper">
<Switch
onSurface
bind:value={isToggled}
on:change={dispatchToggleEvent}
/>
{#if iconPath}
<Icon path={iconPath} />
{/if}
<h3 class="h4">{heading}</h3>
</div>
<Switch onSurface bind:value={isToggled} on:change={dispatchToggleEvent} />
</header>
{#if isToggled}
<slot />
Expand Down
104 changes: 47 additions & 57 deletions web-wallet/src/lib/containers/__tests__/__snapshots__/ToggleableCard.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,35 +8,30 @@ exports[`IconHeadingCard > renders the ToggleableCard component with a heading 1
class="dusk-card__header-container"
>
<header
class="dusk-card__header"
class="dusk-card__header dusk-card__header-toggle"
slot="header"
>
<h3
class="h4"
>
My Card
</h3>
<div
class="dusk-card__header-title"
class="dusk-card__header-controls-wrapper"
>
<div
aria-checked="false"
aria-disabled="false"
class="dusk-switch dusk-switch--on-surface"
role="switch"
tabindex="0"
/>
<h3
class="h4"
>
My Card
</h3>
</div>
<div
aria-checked="false"
aria-disabled="false"
class="dusk-switch dusk-switch--on-surface"
role="switch"
tabindex="0"
/>
</header>
</div>
<div
class="dusk-card__body-container"
>
</div>
</div>
`;
Expand All @@ -49,12 +44,26 @@ exports[`IconHeadingCard > renders the ToggleableCard component with a heading a
class="dusk-card__header-container"
>
<header
class="dusk-card__header"
class="dusk-card__header dusk-card__header-toggle"
slot="header"
>
<h3
class="h4"
>
My Card
</h3>
<div
class="dusk-card__header-title"
class="dusk-card__header-controls-wrapper"
>
<div
aria-checked="false"
aria-disabled="false"
class="dusk-switch dusk-switch--on-surface"
role="switch"
tabindex="0"
/>
<svg
class="dusk-icon dusk-icon--size--default"
role="graphics-symbol"
Expand All @@ -65,29 +74,10 @@ exports[`IconHeadingCard > renders the ToggleableCard component with a heading a
/>
</svg>
<h3
class="h4"
>
My Card
</h3>
</div>
<div
aria-checked="false"
aria-disabled="false"
class="dusk-switch dusk-switch--on-surface"
role="switch"
tabindex="0"
/>
</header>
</div>
<div
class="dusk-card__body-container"
>
</div>
</div>
`;
Expand All @@ -100,12 +90,26 @@ exports[`IconHeadingCard > renders the ToggleableCard component with a toggle 1`
class="dusk-card__header-container"
>
<header
class="dusk-card__header"
class="dusk-card__header dusk-card__header-toggle"
slot="header"
>
<h3
class="h4"
>
My Card
</h3>
<div
class="dusk-card__header-title"
class="dusk-card__header-controls-wrapper"
>
<div
aria-checked="true"
aria-disabled="false"
class="dusk-switch dusk-switch--on-surface"
role="switch"
tabindex="0"
/>
<svg
class="dusk-icon dusk-icon--size--default"
role="graphics-symbol"
Expand All @@ -116,21 +120,7 @@ exports[`IconHeadingCard > renders the ToggleableCard component with a toggle 1`
/>
</svg>
<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"
/>
</header>
</div>
Expand Down
11 changes: 8 additions & 3 deletions web-wallet/src/lib/dusk/components/Card/Card.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@
/** @type {boolean} */
export let onSurface = false;
/** @type {boolean} */
export let showBody = true;
$: classes = makeClassName(["dusk-card", `dusk-card--gap-${gap}`, className]);
</script>

Expand All @@ -27,9 +30,11 @@
<slot name="header" />
</div>
{/if}
<div class="dusk-card__body-container">
<slot />
</div>
{#if showBody}
<div class="dusk-card__body-container">
<slot />
</div>
{/if}
{#if $$slots.footer}
<div class="dusk-card__footer-container">
<slot name="footer" />
Expand Down
69 changes: 32 additions & 37 deletions web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1944,12 +1944,26 @@ exports[`Create > ensures the Password step renders as expected 1`] = `
class="dusk-card__header-container"
>
<header
class="dusk-card__header"
class="dusk-card__header dusk-card__header-toggle"
slot="header"
>
<h3
class="h4"
>
Password
</h3>
<div
class="dusk-card__header-title"
class="dusk-card__header-controls-wrapper"
>
<div
aria-checked="false"
aria-disabled="false"
class="dusk-switch dusk-switch--on-surface"
role="switch"
tabindex="0"
/>
<svg
class="dusk-icon dusk-icon--size--default"
role="graphics-symbol"
Expand All @@ -1960,29 +1974,10 @@ exports[`Create > ensures the Password step renders as expected 1`] = `
/>
</svg>
<h3
class="h4"
>
Password
</h3>
</div>
<div
aria-checked="false"
aria-disabled="false"
class="dusk-switch dusk-switch--on-surface"
role="switch"
tabindex="0"
/>
</header>
</div>
<div
class="dusk-card__body-container"
>
</div>
</div>
Expand Down Expand Up @@ -2142,12 +2137,26 @@ exports[`Create > ensures the Password step renders as expected 2`] = `
class="dusk-card__header-container"
>
<header
class="dusk-card__header"
class="dusk-card__header dusk-card__header-toggle"
slot="header"
>
<h3
class="h4"
>
Password
</h3>
<div
class="dusk-card__header-title"
class="dusk-card__header-controls-wrapper"
>
<div
aria-checked="true"
aria-disabled="false"
class="dusk-switch dusk-switch--on-surface"
role="switch"
tabindex="0"
/>
<svg
class="dusk-icon dusk-icon--size--default"
role="graphics-symbol"
Expand All @@ -2158,21 +2167,7 @@ exports[`Create > ensures the Password step renders as expected 2`] = `
/>
</svg>
<h3
class="h4"
>
Password
</h3>
</div>
<div
aria-checked="true"
aria-disabled="false"
class="dusk-switch dusk-switch--on-surface"
role="switch"
tabindex="0"
/>
</header>
</div>
Expand Down
14 changes: 14 additions & 0 deletions web-wallet/src/routes/components-showcase/Cards.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { Card } from "$lib/dusk/components";
import { IconHeadingCard } from "$lib/containers/Cards";
import { mdiHome } from "@mdi/js";
import ToggleableCard from "$lib/containers/Cards/ToggleableCard.svelte";
</script>

<section>
Expand Down Expand Up @@ -62,6 +63,19 @@
in erat.
</p>
</IconHeadingCard>
<hr />
<ToggleableCard heading="No place like home" iconPath={mdiHome}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra
tincidunt dolor, nec imperdiet felis tristique non. Nunc quis tempus est,
sit amet euismod arcu. Sed malesuada scelerisque metus, ut tempor metus.
</p>
<p>
Nam at nisi nibh. Nulla augue ex, imperdiet mattis commodo vel,
ullamcorper in velit. Aenean eros dolor, condimentum sed tempor et, ornare
in erat.
</p>
</ToggleableCard>
</section>

<style lang="postcss">
Expand Down
1 change: 1 addition & 0 deletions web-wallet/src/style/dusk-components/card.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.dusk-card {
background-color: var(--surface-color);
border-radius: var(--control-border-radius-size);
padding: 0.5rem 0;
}

.dusk-card__header-container,
Expand Down

0 comments on commit 8680964

Please sign in to comment.