Skip to content

Commit ded7f9c

Browse files
ananyayaya129ananyayaya129
authored
Feat/#32 identity card fragment (#74)
* identity card * identity card * lint fixski * lint fixski * lint fixski * fixed the font weight * added component to index.ts * changed span to buttton
1 parent e97f652 commit ded7f9c

File tree

4 files changed

+165
-14
lines changed

4 files changed

+165
-14
lines changed

‎infrastructure/eid-wallet/src/lib/fragments/Header/Header.svelte‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,24 +23,20 @@ const cBase = "w-full h-[9vh] flex justify-between items-center";
2323

2424
<header {...restProps} class={cn(cBase, restProps.class)}>
2525
{#if isBackRequired}
26-
<!-- svelte-ignore a11y_click_events_have_key_events -->
27-
<!-- svelte-ignore a11y_no_static_element_interactions -->
28-
<span class="flex justify-start" onclick={() => window.history.back()}>
29-
<HugeiconsIcon size="5.5vw" color="var(--color-black-700)" icon={ArrowLeft01Icon} />
30-
</span>
26+
<button class="flex justify-start" onclick={() => window.history.back()}>
27+
<HugeiconsIcon size="5.5vw" color="var(--color-black-700)" icon={ArrowLeft01Icon} />
28+
</button>
3129
{:else}
32-
<!-- svelte-ignore element_invalid_self_closing_tag -->
33-
<span aria-hidden="true"/>
30+
<!-- svelte-ignore element_invalid_self_closing_tag -->
31+
<span aria-hidden="true"/>
3432
{/if}
3533
<h1 class="text-3xl text-black text-center font-semibold">{title}</h1>
3634
{#if isUserLoggedIn}
37-
<!-- svelte-ignore a11y_click_events_have_key_events -->
38-
<!-- svelte-ignore a11y_no_static_element_interactions -->
39-
<span class="flex justify-end" onclick={handleProfile}>
40-
<HugeiconsIcon size="8.1vw" color="var(--color-black-700)" icon={UserCircleIcon} />
41-
</span>
35+
<button class="flex justify-end" onclick={handleProfile}>
36+
<HugeiconsIcon size="8.1vw" color="var(--color-black-700)" icon={UserCircleIcon} />
37+
</button>
4238
{:else}
43-
<!-- svelte-ignore element_invalid_self_closing_tag -->
44-
<span aria-hidden="true"/>
39+
<!-- svelte-ignore element_invalid_self_closing_tag -->
40+
<span aria-hidden="true"/>
4541
{/if}
4642
</header>

‎infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.stories.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import IdentityCard from "./IdentityCard.svelte";
2+
3+
interface userData {
4+
[fieldName: string]: string;
5+
}
6+
7+
export default {
8+
title: "UI/IdentityCard",
9+
component: IdentityCard,
10+
tags: ["autodocs"],
11+
render: (args: {
12+
variant: string;
13+
userId: string;
14+
shareBtn: () => void;
15+
viewBtn: () => void;
16+
userData: userData;
17+
usedStorage: number;
18+
totalStorage: number;
19+
}) => ({
20+
Component: IdentityCard,
21+
props: args,
22+
}),
23+
};
24+
25+
export const eName = {
26+
args: {
27+
variant: "eName",
28+
userId: "ananyayayayaya",
29+
shareBtn: () => alert("Share"),
30+
viewBtn: () => alert("View"),
31+
},
32+
};
33+
34+
export const ePassport = {
35+
args: {
36+
variant: "ePassport",
37+
viewBtn: () => alert("View"),
38+
userData: {
39+
Name: "Ananya",
40+
Dob: "29 Nov 2003",
41+
Nationality: "Indian",
42+
Passport: "234dfvgsdfg",
43+
},
44+
},
45+
};
46+
47+
export const eVault = {
48+
args: {
49+
variant: "eVault",
50+
usedStorage: "15",
51+
totalStorage: "80",
52+
},
53+
};

‎infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<script lang="ts">
2+
import {
3+
CheckmarkBadge02Icon,
4+
Upload03Icon,
5+
ViewIcon,
6+
} from "@hugeicons/core-free-icons";
7+
import { HugeiconsIcon } from "@hugeicons/svelte";
8+
import type { HTMLAttributes } from "svelte/elements";
9+
10+
interface userData {
11+
[fieldName: string]: string;
12+
}
13+
interface IIdentityCard extends HTMLAttributes<HTMLElement> {
14+
variant?: "eName" | "ePassport" | "eVault";
15+
userId?: string;
16+
viewBtn?: () => void;
17+
shareBtn?: () => void;
18+
userData?: userData;
19+
totalStorage?: number;
20+
usedStorage?: number;
21+
}
22+
23+
let {
24+
variant = "eName",
25+
userId,
26+
viewBtn,
27+
shareBtn,
28+
userData,
29+
totalStorage = 0,
30+
usedStorage = 0,
31+
...restProps
32+
}: IIdentityCard = $props();
33+
const state = $state({
34+
progressWidth: "0%",
35+
});
36+
37+
$effect(() => {
38+
state.progressWidth =
39+
usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
40+
});
41+
</script>
42+
43+
<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-xl w-full min-h-[150px] text-white shadow-lg overflow-hidden">
44+
<div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
45+
<div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
46+
<div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
47+
</div>
48+
<div class="p-5 flex flex-col gap-2">
49+
<div class="flex justify-between">
50+
{#if variant === 'eName'}
51+
<HugeiconsIcon size={30} strokeWidth={2} color="var(--color-secondary)" icon={CheckmarkBadge02Icon} />
52+
<div class="flex gap-3 items-center">
53+
<button class="flex justify-start" onclick={shareBtn}>
54+
<HugeiconsIcon size={30} strokeWidth={2} color="white" icon={Upload03Icon} />
55+
</button>
56+
<button class="flex justify-start" onclick={viewBtn}>
57+
<HugeiconsIcon size={30} strokeWidth={2} color="white" icon={ViewIcon} />
58+
</button>
59+
</div>
60+
{:else if variant === 'ePassport'}
61+
<p class="bg-white text-black flex items-center rounded-4xl px-5 py-2 text-xs font-semibold">HIGH SECURITY</p>
62+
<button class="flex justify-start" onclick={viewBtn}>
63+
<HugeiconsIcon size={30} strokeWidth={2} color="white" icon={ViewIcon} />
64+
</button>
65+
{:else if variant === 'eVault'}
66+
<div class="text-black-300 text-3xl mb-3">{state.progressWidth} Used</div>
67+
{/if}
68+
</div>
69+
<div>
70+
{#if variant === "eName"}
71+
<h2 class="text-md text-gray font-light">Your eName</h2>
72+
<div class="flex items-center justify-between w-full">
73+
<p class="text-white w-[60%] font-medium">@{userId}</p>
74+
</div>
75+
{:else if variant === "ePassport"}
76+
<div class="flex gap-2 flex-col">
77+
{#if userData}
78+
{#each Object.entries(userData) as [fieldName, value] }
79+
<div class="flex justify-between">
80+
<div class="text-md font-normal text-gray">{fieldName}</div>
81+
<div class="text-md font-medium text-white">{value}</div>
82+
</div>
83+
{/each}
84+
{/if}
85+
</div>
86+
{:else if variant === "eVault"}
87+
<div>
88+
<div class="flex justify-between text-black mb-1">
89+
<div>{usedStorage}GB Used</div>
90+
<div>{totalStorage}GB Used</div>
91+
</div>
92+
<div class="relative w-full h-3 rounded-full overflow-hidden bg-primary-400">
93+
<div class="h-full bg-secondary rounded-full" style={`width: calc(${state.progressWidth})`}></div>
94+
</div>
95+
</div>
96+
{/if}
97+
</div>
98+
</div>
99+
</div>
100+
101+

‎infrastructure/eid-wallet/src/lib/fragments/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export { default as Header } from "./Header/Header.svelte";
2+
export { default as IdentityCard } from "./IdentityCard/IdentityCard.svelte";
23
export { default as SettingsNavigationBtn } from "./SettingsNavigationBtn/SettingsNavigationBtn.svelte";

0 commit comments

Comments
 (0)