From ef8ab961fa384bad88907d16e681aa128e2577e2 Mon Sep 17 00:00:00 2001
From: JulienAuvo <julien@auvo.io>
Date: Mon, 31 Mar 2025 13:05:36 +0300
Subject: [PATCH 1/2] feat: add Hero fragment

---
 infrastructure/eid-wallet/src/app.css         | 12 +++---
 .../lib/fragments/Header/Header.stories.ts    | 39 -----------------
 .../src/lib/fragments/Header/Header.svelte    | 36 ----------------
 .../src/lib/fragments/Hero/Hero.stories.ts    | 31 +++++++++++++
 .../src/lib/fragments/Hero/Hero.svelte        | 43 +++++++++++++++++++
 .../IdentityCard/IdentityCard.svelte          |  2 +-
 .../eid-wallet/src/lib/fragments/index.ts     |  2 +-
 .../src/routes/(auth)/e-passport/+page.svelte |  8 +++-
 .../src/routes/(auth)/onboarding/+page.svelte | 12 ++++--
 .../src/routes/(auth)/register/+page.svelte   | 15 +++++--
 .../src/routes/(auth)/review/+page.svelte     | 12 +++---
 .../src/routes/(auth)/verify/+page.svelte     | 11 ++---
 12 files changed, 121 insertions(+), 102 deletions(-)
 delete mode 100644 infrastructure/eid-wallet/src/lib/fragments/Header/Header.stories.ts
 delete mode 100644 infrastructure/eid-wallet/src/lib/fragments/Header/Header.svelte
 create mode 100644 infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.stories.ts
 create mode 100644 infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.svelte

diff --git a/infrastructure/eid-wallet/src/app.css b/infrastructure/eid-wallet/src/app.css
index 7a82f580..5333d875 100644
--- a/infrastructure/eid-wallet/src/app.css
+++ b/infrastructure/eid-wallet/src/app.css
@@ -11,27 +11,27 @@
 @layer base {
 	/* Typography */
 	h1 {
-		@apply text-[90px] text-black font-semibold;
+		@apply text-[90px]/[1.5] text-black font-semibold;
 	}
 
 	h2 {
-		@apply text-6xl text-black font-semibold;
+		@apply text-6xl/[1.5] text-black font-semibold;
 	}
 
 	h3 {
-		@apply text-3xl text-black font-semibold;
+		@apply text-3xl/[1.5] text-black font-semibold;
 	}
 
 	h4 {
-		@apply text-xl text-black font-semibold;
+		@apply text-xl/[1.5] text-black font-semibold;
 	}
 
 	p {
-		@apply text-base text-black font-normal;
+		@apply text-base/[1.5] text-black font-normal;
 	}
 
 	.small {
-		@apply text-xs text-black font-normal;
+		@apply text-xs/[1.5] text-black font-normal;
 	}
 }
 
diff --git a/infrastructure/eid-wallet/src/lib/fragments/Header/Header.stories.ts b/infrastructure/eid-wallet/src/lib/fragments/Header/Header.stories.ts
deleted file mode 100644
index f41b19a6..00000000
--- a/infrastructure/eid-wallet/src/lib/fragments/Header/Header.stories.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import Header from "./Header.svelte";
-
-export default {
-	title: "Fragments/Header",
-	component: Header,
-	tags: ["autodocs"],
-	render: (args: {
-		title: string;
-		isBackRequired: boolean;
-		isUserLoggedIn: boolean;
-	}) => ({
-		Component: Header,
-		props: args,
-	}),
-};
-
-export const Primary = {
-	args: {
-		title: "Create PIN",
-		isBackRequired: false,
-		isUserLoggedIn: false,
-	},
-};
-
-export const Secondary = {
-	args: {
-		title: "Create PIN",
-		isBackRequired: true,
-		isUserLoggedIn: false,
-	},
-};
-
-export const Tertiary = {
-	args: {
-		title: "Create PIN",
-		isBackRequired: true,
-		isUserLoggedIn: true,
-	},
-};
diff --git a/infrastructure/eid-wallet/src/lib/fragments/Header/Header.svelte b/infrastructure/eid-wallet/src/lib/fragments/Header/Header.svelte
deleted file mode 100644
index bf8bbc8b..00000000
--- a/infrastructure/eid-wallet/src/lib/fragments/Header/Header.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-import * as Button from "$lib/ui/Button";
-import { cn } from "$lib/utils";
-import { ArrowLeft01Icon, UserCircleIcon } from "@hugeicons/core-free-icons";
-import type { HTMLAttributes } from "svelte/elements";
-
-interface IHeaderProps extends HTMLAttributes<HTMLElement> {
-	title: string;
-	isUserLoggedIn?: boolean;
-	isBackRequired?: boolean;
-	handleProfile?: () => void;
-}
-
-const {
-	title = "Create PIN",
-	isUserLoggedIn = true,
-	isBackRequired = true,
-	handleProfile = undefined,
-	...restProps
-}: IHeaderProps = $props();
-const cBase = "w-full h-[9vh] flex justify-between items-center";
-</script>
-
-<header {...restProps} class={cn(cBase, restProps.class)}>
-    {#if isBackRequired}
-        <Button.Icon icon={ArrowLeft01Icon} iconSize="5.5vw" iconColor={"text-black-700"} onclick={() => window.history.back()} />
-    {:else}
-        <span aria-hidden="true"></span>
-    {/if}
-    <h3 class="text-center">{title}</h3>
-    {#if isUserLoggedIn}
-        <Button.Icon icon={UserCircleIcon} iconSize="8.1vw" iconColor={"text-black-700"} onclick={handleProfile} />
-    {:else}
-        <span aria-hidden="true"></span>
-    {/if}
-</header>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.stories.ts b/infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.stories.ts
new file mode 100644
index 00000000..6978b3f9
--- /dev/null
+++ b/infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.stories.ts
@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import Hero from "./Hero.svelte";
+
+export default {
+	title: "Fragments/Hero",
+	component: Hero,
+	tags: ["autodocs"],
+	render: (args: {
+		Component: Hero;
+		props: ComponentProps<typeof Hero>;
+	}) => ({
+		Component: Hero,
+		props: args,
+	}),
+};
+
+export const Basic = {
+	args: {
+		title: "Create PIN",
+		subtitle: "Create a PIN to protect your wallet",
+	},
+};
+
+export const WithSettings = {
+	args: {
+		title: "Good morning!",
+		subtitle: "Don't forget to drink water.",
+		titleClasses: "-mb-2",
+		showSettings: true,
+	},
+};
diff --git a/infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.svelte b/infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.svelte
new file mode 100644
index 00000000..48c7e9ff
--- /dev/null
+++ b/infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+import { cn } from "$lib/utils";
+import { Settings02Icon } from "@hugeicons/core-free-icons";
+import type { HTMLAttributes } from "svelte/elements";
+import * as Button from "$lib/ui/Button";
+interface IHeroProps extends HTMLAttributes<HTMLElement> {
+	title?: string;
+	subtitle?: string;
+	showSettings?: boolean;
+	titleClasses?: string;
+}
+const {
+	title,
+	subtitle,
+	showSettings = false,
+	titleClasses,
+	children,
+	...restProps
+}: IHeroProps = $props();
+const baseClasses = "w-full flex justify-between items-center";
+</script>
+    
+<header {...restProps} class={cn(baseClasses, restProps.class)}>
+    <div class="flex flex-col items-start">
+            <h3 class={cn(titleClasses)}>
+                {@render children?.()}
+                {title}
+            </h3>
+        {#if subtitle}
+            <p class="text-black-700 mt-2">{subtitle}</p>
+        {/if}
+    </div>
+    {#if showSettings}
+        <Button.Nav href="/settings">
+            <Button.Icon
+                icon={Settings02Icon}
+                iconSize="lg"
+            />
+        </Button.Nav>
+    {:else}
+        <span aria-hidden="true"></span>
+    {/if}
+</header>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
index 7c056126..eb0811f2 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
+++ b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte
@@ -41,7 +41,7 @@ $effect(() => {
 });
 </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 overflow-hidden">
+<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"}  rounded-3xl w-full min-h-[150px] text-white 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>
diff --git a/infrastructure/eid-wallet/src/lib/fragments/index.ts b/infrastructure/eid-wallet/src/lib/fragments/index.ts
index 21e9aaf3..fa153456 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/index.ts
+++ b/infrastructure/eid-wallet/src/lib/fragments/index.ts
@@ -1,3 +1,3 @@
-export { default as Header } from "./Header/Header.svelte";
+export { default as Hero } from "./Hero/Hero.svelte";
 export { default as IdentityCard } from "./IdentityCard/IdentityCard.svelte";
 export { default as SettingsNavigationBtn } from "./SettingsNavigationBtn/SettingsNavigationBtn.svelte";
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte
index a77df0ea..a4d30cc3 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Hero } from "$lib/fragments";
 import IdentityCard from "$lib/fragments/IdentityCard/IdentityCard.svelte";
 import { ButtonAction } from "$lib/ui";
 
@@ -20,8 +21,11 @@ const handleFinish = async () => {};
 		}}/>
     </section>
     <section class="mt-[4vh] mb-[9vh]">
-        <h4 class="mb-[0.5vh]">Your eVault</h4>
-        <p class="text-black-700 mb-[3vh]">We’ve also created your eVault—secure cloud storage for your personal data. W3DS platforms access it directly, keeping you in control.</p>
+        <Hero
+        title="Your ePassport and eVault are ready"
+        subtitle="Log into any W3DS platform without passwords. It’s tied to this phone; if lost, you’ll need to revoke and reissue it on a new device."
+        class="mb-2"
+        />
         <IdentityCard variant= "eVault"
 		usedStorage= {15}
 		totalStorage= {80}/>
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
index 1edd0c8c..c349b53e 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer } from "$lib/ui";
 
 let isPaneOpen = $state(false);
@@ -20,10 +21,15 @@ const handleNext = async () => {
         <img class="aspect-square w-full object-cover" src="/images/Onboarding.svg" alt="Infographic card">
     </article>
     <section class="mb-[9.3vh]">
-        <h2 class="text-[42px]/[1] font-medium mb-[1vh]">Your <br>
+        <Hero
+        subtitle="Store your IDs, verify instantly with QR codes, and manage your digital identity with ease."
+        class="mb-4"
+        titleClasses="text-[42px]/[1.1] font-medium"
+        >
+            Your <br>
             Digital Identity,
-            Secured</h2>
-        <p class="text-black-700">Store your IDs, verify instantly with QR codes, and manage your digital identity with ease.</p>
+            Secured
+        </Hero>
     </section>
     <section>
         <p class="max-w-[300px] mx-[auto] text-center small text-black-500">By continuing you agree to our <a href="/" class="text-primary underline underline-offset-5">Terms & Conditions </a> and <a href="/" class="text-primary underline underline-offset-5">privacy policy.</a></p>
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
index 0e4612ef..f1f1bff4 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer, InputPin } from "$lib/ui";
 import { CircleLock01Icon, FaceIdIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -55,8 +56,11 @@ $effect(() => {
 {#if firstStep}
     <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
         <section>
-            <h3 class="mb-[1vh]">Create a pin</h3>
-            <p class="text-black-700 mb-[14vh]">Enter a 4-digit PIN code</p>
+            <Hero
+            title="Create a pin"
+            subtitle="Enter a 4-digit PIN code"
+            class="mb-[14vh]"
+            />
             <InputPin bind:pin/>
         </section>
         <ButtonAction class="w-full" variant="soft" callback={handleFirstStep}>Confirm</ButtonAction>
@@ -64,8 +68,11 @@ $effect(() => {
 {:else}
     <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
         <section>
-            <h3 class="mb-[1vh]">Re-enter your pin</h3>
-            <p class="text-black-700 mb-[14vh]">Confirm by entering pin again</p>
+            <Hero
+            title="Re-enter your pin"
+                subtitle="Confirm by entering pin again"
+            class="mb-[14vh]"
+            />
             <InputPin bind:pin={repeatPin} {isError}/>
             <p class={`text-danger mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
         </section>
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/review/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/review/+page.svelte
index 8f82fc7d..15741f2a 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/review/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/review/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
-import { IdentityCard } from "$lib/fragments";
+import { Hero, IdentityCard } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 
 const handleNext = async () => {
@@ -10,10 +10,12 @@ const handleNext = async () => {
 
 <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
     <section>
-        <h3 class="mb-[0.5vh]">Here’s your eName</h3>
-        <p class="text-black-700  mb-[3vh]">This identifier is permanently yours, and it stays with you for your whole life.</p>
-        
-        <IdentityCard variant="eName" userId="acbsdjk-14n14k43-12412" shareBtn={() => null}  viewBtn={() => null}/>
+        <Hero
+            title="Here’s your eName"
+            subtitle="This identifier is permanently yours, and it stays with you for your whole life."
+            class="mb-4"
+        />
+        <IdentityCard variant="eName" userId= "acbsdjk-14n14k43-12412" shareBtn={() => null}  viewBtn={() => null}/>
     </section>
     <ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
 </main>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte
index cf549586..3c7c166c 100644
--- a/infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 </script>
 
 <main class="h-screen pt-[3vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between items-center">
     <section>
-        <h3 class="mb-[1vh]">Verify your account</h3>
-        <p class="text-black-700 mb-[6vh]">Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process</p>
-        <div class="flex justify-center">
-            <img src="images/Passport.svg" alt="passport">
-        </div>
+        <Hero
+            title="Verify your account"
+            subtitle="Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process"
+        />
+        <img class="mx-auto mt-20" src="images/Passport.svg" alt="passport">
     </section>
     <ButtonAction class="w-full" callback={async() => goto("/verify/id")}>I'm ready</ButtonAction>
 </main>
\ No newline at end of file

From c24fcd48e054593c15f6ec73cdb85eb74453c7d5 Mon Sep 17 00:00:00 2001
From: JulienAuvo <julien@auvo.io>
Date: Mon, 31 Mar 2025 13:11:42 +0300
Subject: [PATCH 2/2] chore: sort imports + add doc

---
 .../src/lib/fragments/Hero/Hero.svelte        | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.svelte b/infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.svelte
index 48c7e9ff..d84b2617 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.svelte
+++ b/infrastructure/eid-wallet/src/lib/fragments/Hero/Hero.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+import * as Button from "$lib/ui/Button";
 import { cn } from "$lib/utils";
 import { Settings02Icon } from "@hugeicons/core-free-icons";
 import type { HTMLAttributes } from "svelte/elements";
-import * as Button from "$lib/ui/Button";
+
 interface IHeroProps extends HTMLAttributes<HTMLElement> {
 	title?: string;
 	subtitle?: string;
@@ -40,4 +41,29 @@ const baseClasses = "w-full flex justify-between items-center";
     {:else}
         <span aria-hidden="true"></span>
     {/if}
-</header>
\ No newline at end of file
+</header>
+
+<!-- 
+@component
+@name Hero
+@description A component that displays a header with a title, subtitle, and optional settings icon.
+@props
+- title: string - The main title to display.
+- subtitle: string - An optional subtitle to display below the title.
+- showSettings: boolean - A flag to determine if the settings icon should be displayed.
+- titleClasses: string - Additional classes to apply to the title element.
+- children: Snippet - Optional child elements to render within the title.
+@slots
+- default - Slot for additional content to be rendered within the title.
+@usage
+```svelte
+<Hero
+        title="Good morning!"
+        subtitle="Don't forget to drink water."
+        class="mb-8"
+        titleClasses="-mb-2"
+        showSettings
+    >
+</Hero>
+```
+ -->
\ No newline at end of file