update: use ButtonIcon is IdentityCard (#78)

* update: use ButtonIcon is IdentityCard

* feat: refactor ButtonIcon to be used anywhere in the app

* chore: format indent

* chore: remove useless change

Author: JulienAuvo

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

@@ -1,7 +1,7 @@
 <script lang="ts">
+import * as Button from "$lib/ui/Button";
 import { cn } from "$lib/utils";
 import { ArrowLeft01Icon, UserCircleIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
 import type { HTMLAttributes } from "svelte/elements";
 
 interface IHeaderProps extends HTMLAttributes<HTMLElement> {
@@ -11,7 +11,7 @@ interface IHeaderProps extends HTMLAttributes<HTMLElement> {
 	handleProfile?: () => void;
 }
 
-let {
+const {
 	title = "Create PIN",
 	isUserLoggedIn = true,
 	isBackRequired = true,
@@ -23,20 +23,14 @@ const cBase = "w-full h-[9vh] flex justify-between items-center";
 
 <header {...restProps} class={cn(cBase, restProps.class)}>
     {#if isBackRequired}
-        <button class="flex justify-start" onclick={() => window.history.back()}>
-            <HugeiconsIcon size="5.5vw"  color="var(--color-black-700)" icon={ArrowLeft01Icon} />
-        </button>
+        <Button.Icon icon={ArrowLeft01Icon} iconSize="5.5vw" iconColor={"text-black-700"} onclick={() => window.history.back()} />
     {:else}
-        <!-- svelte-ignore element_invalid_self_closing_tag -->
-        <span aria-hidden="true"/>
+        <span aria-hidden="true"></span>
     {/if}
     <h3 class="text-center">{title}</h3>
     {#if isUserLoggedIn}
-        <button class="flex justify-end" onclick={handleProfile}>
-            <HugeiconsIcon size="8.1vw" color="var(--color-black-700)" icon={UserCircleIcon} />
-        </button>
+        <Button.Icon icon={UserCircleIcon} iconSize="8.1vw" iconColor={"text-black-700"} onclick={handleProfile} />
     {:else}
-        <!-- svelte-ignore element_invalid_self_closing_tag -->
-        <span aria-hidden="true"/>
+        <span aria-hidden="true"></span>
     {/if}
 </header>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+import * as Button from "$lib/ui/Button";
 import {
 	CheckmarkBadge02Icon,
 	Upload03Icon,
@@ -20,7 +21,7 @@ interface IIdentityCard extends HTMLAttributes<HTMLElement> {
 	usedStorage?: number;
 }
 
-let {
+const {
 	variant = "eName",
 	userId,
 	viewBtn,
@@ -48,22 +49,17 @@ $effect(() => {
     <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>
+                <HugeiconsIcon size={30} strokeWidth={2} className="text-secondary" icon={CheckmarkBadge02Icon} />
+                <div class="flex gap-3 items-center">  
+                    <Button.Icon icon={Upload03Icon} iconColor={"white"} strokeWidth={2} onclick={shareBtn} />
+                    <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
+                    </div>
             {:else if variant === 'ePassport'}
-                <p class="bg-white flex items-center rounded-4xl px-5 py-2 small font-semibold">HIGH SECURITY</p>
-                <button class="flex justify-start" onclick={viewBtn}>
-                    <HugeiconsIcon size={30} strokeWidth={2} color="white" icon={ViewIcon} />
-                </button>
+                <p class="bg-white text-black flex items-center rounded-4xl px-5 py-2 text-xs font-semibold">HIGH SECURITY</p>
+                <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
+                
             {:else if variant === 'eVault'}
-            <h3 class="text-black-300 font-semibold mb-3">{state.progressWidth} Used</h3>
+                <div class="text-black-300 text-3xl mb-3">{state.progressWidth} Used</div>
             {/if}
         </div>
         <div>
@@ -98,4 +94,5 @@ $effect(() => {
     </div>
 </div>
 
-
+    
+    

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.stories.ts

@@ -1,15 +1,12 @@
-import { FlashlightIcon } from "@hugeicons/core-free-icons";
+import { FlashlightIcon, ViewIcon } from "@hugeicons/core-free-icons";
 import type { ComponentProps } from "svelte";
 import ButtonIcon from "./ButtonIcon.svelte";
 
 export default {
 	title: "UI/ButtonIcon",
 	component: ButtonIcon,
 	tags: ["autodocs"],
-	render: (args: {
-		Component: ButtonIcon<{ icon: typeof FlashlightIcon }>;
-		props: ComponentProps<typeof ButtonIcon>;
-	}) => ({
+	render: (args: ComponentProps<typeof ButtonIcon>) => ({
 		Component: ButtonIcon,
 		props: args,
 	}),
@@ -19,10 +16,26 @@ export const Default = {
 	render: () => ({
 		Component: ButtonIcon,
 		props: {
-			variant: "white",
 			ariaLabel: "Default button",
-			size: "md",
+			bgSize: "md", // Predefined size
+			iconSize: "md",
+			icon: ViewIcon,
+			bgColor: "black",
+			iconColor: "white",
+		},
+	}),
+};
+
+export const CustomSize = {
+	render: () => ({
+		Component: ButtonIcon,
+		props: {
+			ariaLabel: "Custom sized button",
+			bgSize: "w-[120px] h-[120px]", // Custom Tailwind size
+			iconSize: 56, // Custom pixel size
 			icon: FlashlightIcon,
+			bgColor: "bg-danger",
+			iconColor: "white",
 		},
 	}),
 };
@@ -31,24 +44,32 @@ export const Loading = {
 	render: () => ({
 		Component: ButtonIcon,
 		props: {
-			variant: "white",
 			ariaLabel: "Loading button",
-			size: "md",
+			bgSize: "md",
+			iconSize: "md",
 			icon: FlashlightIcon,
 			isLoading: true,
+			bgColor: "black",
+			iconColor: "white",
 		},
 	}),
 };
 
-export const Active = {
+export const WithCallback = {
 	render: () => ({
 		Component: ButtonIcon,
 		props: {
-			variant: "white",
-			ariaLabel: "Active button",
-			size: "md",
+			ariaLabel: "Button with async callback",
+			bgSize: "md",
+			iconSize: "md",
 			icon: FlashlightIcon,
-			isActive: true,
+			callback: async () => {
+				await new Promise((resolve) => setTimeout(resolve, 2000));
+				console.log("Action completed!");
+			},
+			blockingClick: true,
+			bgColor: "primary",
+			iconColor: "white",
 		},
 	}),
 };