feat: add Hero fragment (#88)

* feat: add Hero fragment

* chore: sort imports + add doc

Author: JulienAuvo

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;
 	}
 }
 

infrastructure/eid-wallet/src/lib/fragments/Header/Header.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,
+	},
+};

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

@@ -0,0 +1,69 @@
+<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";
+
+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>
+
+<!-- 
+@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>
+```
+ -->

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

@@ -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>

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

@@ -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";

infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.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}/>

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

@@ -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>

infrastructure/eid-wallet/src/routes/(auth)/e-passport/+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,17 +56,23 @@ $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>
     </main>
 {: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>