Feat/#32 identity card fragment

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

@@ -23,24 +23,20 @@ const cBase = "w-full h-[9vh] flex justify-between items-center";
 
 <header {...restProps} class={cn(cBase, restProps.class)}>
     {#if isBackRequired}
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <span class="flex justify-start" onclick={() => window.history.back()}>
-        <HugeiconsIcon size="5.5vw"  color="var(--color-black-700)" icon={ArrowLeft01Icon} />
-    </span>
+        <button class="flex justify-start" onclick={() => window.history.back()}>
+            <HugeiconsIcon size="5.5vw"  color="var(--color-black-700)" icon={ArrowLeft01Icon} />
+        </button>
     {:else}
-    <!-- svelte-ignore element_invalid_self_closing_tag -->
-    <span aria-hidden="true"/>
+        <!-- svelte-ignore element_invalid_self_closing_tag -->
+        <span aria-hidden="true"/>
     {/if}
     <h1 class="text-3xl text-black text-center font-semibold">{title}</h1>
     {#if isUserLoggedIn}
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <span class="flex justify-end" onclick={handleProfile}>
-        <HugeiconsIcon size="8.1vw" color="var(--color-black-700)" icon={UserCircleIcon} />
-    </span>
+        <button class="flex justify-end" onclick={handleProfile}>
+            <HugeiconsIcon size="8.1vw" color="var(--color-black-700)" icon={UserCircleIcon} />
+        </button>
     {:else}
-    <!-- svelte-ignore element_invalid_self_closing_tag -->
-    <span aria-hidden="true"/>
+        <!-- svelte-ignore element_invalid_self_closing_tag -->
+        <span aria-hidden="true"/>
     {/if}
 </header>

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

@@ -0,0 +1,53 @@
+import IdentityCard from "./IdentityCard.svelte";
+
+interface userData {
+	[fieldName: string]: string;
+}
+
+export default {
+	title: "UI/IdentityCard",
+	component: IdentityCard,
+	tags: ["autodocs"],
+	render: (args: {
+		variant: string;
+		userId: string;
+		shareBtn: () => void;
+		viewBtn: () => void;
+		userData: userData;
+		usedStorage: number;
+		totalStorage: number;
+	}) => ({
+		Component: IdentityCard,
+		props: args,
+	}),
+};
+
+export const eName = {
+	args: {
+		variant: "eName",
+		userId: "ananyayayayaya",
+		shareBtn: () => alert("Share"),
+		viewBtn: () => alert("View"),
+	},
+};
+
+export const ePassport = {
+	args: {
+		variant: "ePassport",
+		viewBtn: () => alert("View"),
+		userData: {
+			Name: "Ananya",
+			Dob: "29 Nov 2003",
+			Nationality: "Indian",
+			Passport: "234dfvgsdfg",
+		},
+	},
+};
+
+export const eVault = {
+	args: {
+		variant: "eVault",
+		usedStorage: "15",
+		totalStorage: "80",
+	},
+};

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

@@ -0,0 +1,101 @@
+<script lang="ts">
+import {
+	CheckmarkBadge02Icon,
+	Upload03Icon,
+	ViewIcon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import type { HTMLAttributes } from "svelte/elements";
+
+interface userData {
+	[fieldName: string]: string;
+}
+interface IIdentityCard extends HTMLAttributes<HTMLElement> {
+	variant?: "eName" | "ePassport" | "eVault";
+	userId?: string;
+	viewBtn?: () => void;
+	shareBtn?: () => void;
+	userData?: userData;
+	totalStorage?: number;
+	usedStorage?: number;
+}
+
+let {
+	variant = "eName",
+	userId,
+	viewBtn,
+	shareBtn,
+	userData,
+	totalStorage = 0,
+	usedStorage = 0,
+	...restProps
+}: IIdentityCard = $props();
+const state = $state({
+	progressWidth: "0%",
+});
+
+$effect(() => {
+	state.progressWidth =
+		usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
+});
+</script>
+
+<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">
+    <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
+        <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
+        <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
+    </div>
+    <div class="p-5 flex flex-col gap-2">
+        <div class="flex justify-between">
+            {#if variant === 'eName'}  
+                <HugeiconsIcon size={30} strokeWidth={2} color="var(--color-secondary)" icon={CheckmarkBadge02Icon} />
+                <div class="flex gap-3 items-center"> 
+                    <button class="flex justify-start" onclick={shareBtn}>
+                        <HugeiconsIcon size={30} strokeWidth={2} color="white" icon={Upload03Icon} />
+                    </button>
+                    <button class="flex justify-start" onclick={viewBtn}>
+                        <HugeiconsIcon size={30} strokeWidth={2} color="white" icon={ViewIcon} />
+                    </button>
+                </div>
+            {:else if variant === 'ePassport'}
+                <p class="bg-white text-black flex items-center rounded-4xl px-5 py-2 text-xs font-semibold">HIGH SECURITY</p>
+                <button class="flex justify-start" onclick={viewBtn}>
+                    <HugeiconsIcon size={30} strokeWidth={2} color="white" icon={ViewIcon} />
+                </button>
+            {:else if variant === 'eVault'}
+            <div class="text-black-300 text-3xl mb-3">{state.progressWidth} Used</div>
+            {/if}
+        </div>
+        <div>
+            {#if variant === "eName"}        
+                <h2 class="text-md text-gray font-light">Your eName</h2>
+                <div class="flex items-center justify-between w-full">
+                    <p class="text-white w-[60%] font-medium">@{userId}</p>
+                </div>
+            {:else if variant === "ePassport"}
+                <div class="flex gap-2 flex-col">
+                    {#if userData}
+                        {#each Object.entries(userData) as [fieldName, value] }    
+                            <div class="flex justify-between">
+                                <div class="text-md font-normal text-gray">{fieldName}</div>
+                                <div class="text-md font-medium text-white">{value}</div>
+                            </div>
+                        {/each}
+                    {/if}
+                </div>
+            {:else if variant === "eVault"}
+            <div>
+                <div class="flex justify-between text-black mb-1">
+                    <div>{usedStorage}GB Used</div>
+                    <div>{totalStorage}GB Used</div>
+                </div>
+                <div class="relative w-full h-3 rounded-full overflow-hidden bg-primary-400">
+                    <div class="h-full bg-secondary rounded-full" style={`width: calc(${state.progressWidth})`}></div>
+                </div>
+            </div>
+            {/if}
+        </div>
+    </div>
+</div>
+
+

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

@@ -1,2 +1,3 @@
 export { default as Header } from "./Header/Header.svelte";
+export { default as IdentityCard } from "./IdentityCard/IdentityCard.svelte";
 export { default as SettingsNavigationBtn } from "./SettingsNavigationBtn/SettingsNavigationBtn.svelte";