feat: add Button.Nav (#77)

* feat: add Button.Nav

* chore: format

* chore: sort imports

* update: remove unused snippet and add missing props

* feat: stick to fragment definition

* update: documentation

* fix: stories

* chore: sort imports

Author: JulienAuvo

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.snippet.svelte

@@ -1,21 +1,24 @@
-import type { Snippet } from "svelte";
-import { icon } from "./SettingsNavigationBtn.stories.snippet.svelte";
+import { LanguageSquareIcon } from "@hugeicons/core-free-icons";
+import type { ComponentProps } from "svelte";
 import SettingsNavigationBtn from "./SettingsNavigationBtn.svelte";
 
 export default {
 	title: "Fragments/SettingsNavigationBtn",
 	component: SettingsNavigationBtn,
 	tags: ["autodocs"],
-	render: (args: { icon: Snippet; label: string; onClick: () => void }) => ({
+	render: (args: {
+		Component: SettingsNavigationBtn;
+		props: ComponentProps<typeof SettingsNavigationBtn>;
+	}) => ({
 		Component: SettingsNavigationBtn,
 		props: args,
 	}),
 };
 
 export const Primary = {
 	args: {
-		icon: icon,
+		icon: LanguageSquareIcon,
 		label: "Language",
-		onClick: () => alert("asdf"),
+		href: "#",
 	},
 };

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

@@ -1,25 +1,25 @@
 <script lang="ts">
+import * as Button from "$lib/ui/Button";
 import { cn } from "$lib/utils";
 import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
-import type { Snippet } from "svelte";
+import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
 import type { HTMLAttributes } from "svelte/elements";
 
 interface ISettingsNavigationBtn extends HTMLAttributes<HTMLElement> {
-	icon: Snippet;
+	icon: IconSvgElement;
 	label: string;
-	onClick: () => void;
+	href: string;
 }
 
-let { icon, label, onClick, ...restProps }: ISettingsNavigationBtn = $props();
+const { icon, label, href, ...restProps }: ISettingsNavigationBtn = $props();
 </script>
 
-<div {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)} onclick={onClick}>
+<Button.Nav {href} {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)}>
     <div class="flex items-center gap-2">
-        <div class="p-3 bg-gray max-w-max rounded-4xl object-cover flex items-center" >
-            {@render icon?.()}
+        <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+            <HugeiconsIcon {icon} size={30}  color="var(--color-black-500)" />
         </div>
         <p class="font-medium!">{label}</p>
     </div>
     <HugeiconsIcon size={30}  color="var(--color-black-500)" icon={ArrowRight01Icon} />
-</div>
+</Button.Nav>

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

@@ -1,7 +1,24 @@
 <script context="module">
-export { ButtonText };
+import { ArrowRight01Icon, SettingsIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+export { ButtonText, ButtonNavText, ButtonNavSettings };
 </script>
 
 {#snippet ButtonText()}
   Button
 {/snippet}
+
+{#snippet ButtonNavText()}
+  Nav Button
+{/snippet}
+
+{#snippet ButtonNavSettings()}
+  <div class="flex items-center gap-2">
+    <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+        <HugeiconsIcon icon={SettingsIcon} size={30}  color="var(--color-black-500)" />
+    </div>
+    <h1>Settings</h1>
+  </div>
+  <HugeiconsIcon size={30}  color="var(--color-black-500)" icon={ArrowRight01Icon} />
+{/snippet}

infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte

@@ -27,7 +27,6 @@ const {
 	icon,
 	iconSize = undefined,
 	isActive = false,
-	children = undefined,
 	...restProps
 }: IButtonProps = $props();
 

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import {
+	ButtonNavSettings,
+	ButtonNavText,
+} from "./Button.stories.snippet.svelte";
+import ButtonNav from "./ButtonNav.svelte";
+
+export default {
+	title: "UI/ButtonNav",
+	component: ButtonNav,
+	tags: ["autodocs"],
+	render: (args: {
+		Component: ButtonNav;
+		props: ComponentProps<typeof ButtonNav>;
+	}) => ({
+		Component: ButtonNav,
+		props: args,
+	}),
+};
+
+export const Default = {
+	args: { href: "#", children: ButtonNavText },
+};
+
+export const ForSettings = {
+	args: {
+		href: "#",
+		children: ButtonNavSettings,
+		class: "flex items-center justify-between px-3 py-2",
+	},
+};

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { cn } from "$lib/utils";
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+
+interface IButtonNav extends HTMLAnchorAttributes {
+	href: string;
+	children: Snippet;
+}
+
+const { href, children, ...restProps }: IButtonNav = $props();
+</script>
+
+<a {href} {...restProps} class={cn(restProps.class)}>
+    {@render children()}
+</a>
+
+<!-- 
+@component
+export default ButtonNav;
+@description
+This component is a wrapper for a button that navigates to a different page.
+
+@props
+- href: The URL of the page to navigate to.
+- children: The content of the button.
+- ...restProps: Any other props that can be passed to an anchor element.
+
+@usage
+```html
+<script lang="ts">
+    import * as Button from '$lib/ui/Button'
+    import { SettingsIcon, ArrowRight01Icon } from "@hugeicons/core-free-icons";
+</script>
+
+<Button.Nav href="/settings">
+    // The content of the button
+</Button.Nav>
+```
+ -->

infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.svelte

@@ -1,4 +1,5 @@
 import Action from "./ButtonAction.svelte";
 import Icon from "./ButtonIcon.svelte";
+import Nav from "./ButtonNav.svelte";
 
-export { Action, Icon };
+export { Action, Icon, Nav };