feat: polish button icon (and button action too)

Author: JulienAuvo

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

@@ -1,46 +1,46 @@
 import type { ComponentProps } from "svelte";
 import ButtonAction from "./ButtonAction.svelte";
-import { ButtonText } from "./ButtonSnippets.svelte";
+import { ButtonText } from "./Button.stories.snippet.svelte";
 
 export default {
-	title: "UI/ButtonAction",
-	component: ButtonAction,
-	tags: ["autodocs"],
-	render: (args: {
-		Component: ButtonAction;
-		props: ComponentProps<typeof ButtonAction>;
-	}) => ({
-		Component: ButtonAction,
-		props: args,
-	}),
+    title: "UI/ButtonAction",
+    component: ButtonAction,
+    tags: ["autodocs"],
+    render: (args: {
+        Component: ButtonAction;
+        props: ComponentProps<typeof ButtonAction>;
+    }) => ({
+        Component: ButtonAction,
+        props: args,
+    }),
 };
 
 export const Solid = {
-	args: { variant: "solid", children: ButtonText },
+    args: { variant: "solid", children: ButtonText },
 };
 
 export const Soft = {
-	args: { variant: "soft", children: ButtonText },
+    args: { variant: "soft", children: ButtonText },
 };
 
 export const Danger = {
-	args: { variant: "danger", children: ButtonText },
+    args: { variant: "danger", children: ButtonText },
 };
 
 export const DangerSoft = {
-	args: { variant: "danger-soft", children: ButtonText },
+    args: { variant: "danger-soft", children: ButtonText },
 };
 
 export const Loading = {
-	args: { isLoading: true, children: ButtonText },
+    args: { isLoading: true, children: ButtonText },
 };
 
 export const BlockingClick = {
-	args: {
-		blockingClick: true,
-		children: ButtonText,
-		callback: async () => {
-			await new Promise((resolve) => setTimeout(resolve, 2000));
-		},
-	},
+    args: {
+        blockingClick: true,
+        children: ButtonText,
+        callback: async () => {
+            await new Promise((resolve) => setTimeout(resolve, 2000));
+        },
+    },
 };

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

@@ -11,7 +11,7 @@ interface IButtonProps extends HTMLButtonAttributes {
 	size?: "sm" | "md";
 }
 
-let {
+const {
 	variant = "solid",
 	isLoading,
 	callback,
@@ -23,7 +23,7 @@ let {
 }: IButtonProps = $props();
 
 let isSubmitting = $state(false);
-let disabled = $derived(restProps.disabled || isLoading || isSubmitting);
+const disabled = $derived(restProps.disabled || isLoading || isSubmitting);
 
 const handleClick = async () => {
 	if (typeof callback !== "function") return;
@@ -59,7 +59,7 @@ const sizeVariant = {
 	md: "px-8 py-2.5 text-xl h-14",
 };
 
-let classes = $derived({
+const classes = $derived({
 	common: cn(
 		"cursor-pointer w-min flex items-center justify-center rounded-full font-semibold duration-100",
 		sizeVariant[size],

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

@@ -1,63 +1,54 @@
-import ButtonIcon from './ButtonIcon.svelte'
-import { FlashlightIcon } from '@hugeicons/core-free-icons'
-import type { ComponentProps } from 'svelte'
+import ButtonIcon from "./ButtonIcon.svelte";
+import { FlashlightIcon } from "@hugeicons/core-free-icons";
+import type { ComponentProps } from "svelte";
 
 export default {
-  title: 'UI/ButtonIcon',
-  component: ButtonIcon,
-  tags: ['autodocs'],
-
-  parameters: {
-    backgrounds: { default: 'dark' },
-  },
-  render: (args: {
-    Component: ButtonIcon<{
-      variant: 'white'
-      ariaLabel: 'Default button'
-      size: 'md'
-      icon: typeof FlashlightIcon
-    }>
-    props: ComponentProps<typeof ButtonIcon>
-  }) => ({
-    Component: ButtonIcon,
-    props: args,
-  }),
-}
+    title: "UI/ButtonIcon",
+    component: ButtonIcon,
+    tags: ["autodocs"],
+    render: (args: {
+        Component: ButtonIcon<{ icon: typeof FlashlightIcon }>;
+        props: ComponentProps<typeof ButtonIcon>;
+    }) => ({
+        Component: ButtonIcon,
+        props: args,
+    }),
+};
 
 export const Default = {
-  render: () => ({
-    Component: ButtonIcon,
-    props: {
-      variant: 'white',
-      ariaLabel: 'Default button',
-      size: 'md',
-      icon: FlashlightIcon,
-    },
-  }),
-}
+    render: () => ({
+        Component: ButtonIcon,
+        props: {
+            variant: "white",
+            ariaLabel: "Default button",
+            size: "md",
+            icon: FlashlightIcon,
+        },
+    }),
+};
 
 export const Loading = {
-  render: () => ({
-    Component: ButtonIcon,
-    props: {
-      variant: 'white',
-      ariaLabel: 'Loading button',
-      size: 'md',
-      icon: FlashlightIcon,
-      isLoading: true,
-    },
-  }),
-}
+    render: () => ({
+        Component: ButtonIcon,
+        props: {
+            variant: "white",
+            ariaLabel: "Loading button",
+            size: "md",
+            icon: FlashlightIcon,
+            isLoading: true,
+        },
+    }),
+};
 
 export const Active = {
-  render: () => ({
-    Component: ButtonIcon,
-    props: {
-      variant: 'white',
-      ariaLabel: 'Active button',
-      size: 'md',
-      icon: FlashlightIcon,
-      isActive: true,
-    },
-  }),
-}
+    render: () => ({
+        Component: ButtonIcon,
+        props: {
+            variant: "white",
+            ariaLabel: "Active button",
+            size: "md",
+            icon: FlashlightIcon,
+            isActive: true,
+        },
+    }),
+};