Feat/improve button component (#60)

* feat: add white variant

* feat: add small variant

* chore: update doc and story for button

* chore: rename cb into callback

* update: improve small size

* update: modify loading style

Author: JulienAuvo

infrastructure/eid-wallet/src/app.css

@@ -37,7 +37,7 @@
   --color-black-300: #a5a5a5;
   --color-black-100: #d2d2d2;
 
-  --color-black: #1F1F1F;
+  --color-black: #1f1f1f;
 
   --color-red-900: #FF5255;
   --color-red-700: #FF7B77;
@@ -46,7 +46,8 @@
   --color-red-100: #FFDCDD;
 
   --color-danger-500: #ff5255;
-  --color-danger-300: #ffdcdd;
+  --color-danger-300: #ff7d7f;
+  --color-danger-100: #ffdcdd;
 }
 
 body {

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

@@ -15,12 +15,18 @@ const meta: Meta<ButtonAction> = {
     variant: {
       control: {
         type: 'select',
-        options: ['solid', 'soft', 'danger', 'danger-soft'],
+        options: ['solid', 'soft', 'danger', 'danger-soft', 'white'],
+      },
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: ['sm', 'md'],
       },
     },
     isLoading: { control: 'boolean' },
     blockingClick: { control: 'boolean' },
-    cb: { action: 'clicked' },
+    callback: { action: 'clicked' },
   },
 }
 
@@ -51,7 +57,7 @@ export const BlockingClick: Story = {
   args: {
     blockingClick: true,
     children: ButtonText,
-    cb: async () => {
+    callback: async () => {
       await new Promise((resolve) => setTimeout(resolve, 2000))
     },
   },

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

@@ -3,19 +3,21 @@
   import type { HTMLButtonAttributes } from 'svelte/elements'
 
   interface IButtonProps extends HTMLButtonAttributes {
-    variant?: 'solid' | 'soft' | 'danger' | 'danger-soft'
+    variant?: 'solid' | 'soft' | 'danger' | 'danger-soft' | 'white'
     isLoading?: boolean
-    cb?: () => Promise<void>
+    callback?: () => Promise<void>
     blockingClick?: boolean
     type?: 'button' | 'submit' | 'reset'
+    size?: 'sm' | 'md'
   }
 
   let {
     variant = 'solid',
     isLoading,
-    cb,
+    callback,
     blockingClick,
     type = 'button',
+    size = 'md',
     children = undefined,
     ...restProps
   }: IButtonProps = $props()
@@ -24,11 +26,11 @@
   let disabled = $derived(restProps.disabled || isLoading || isSubmitting)
 
   const handleClick = async () => {
-    if (typeof cb !== 'function') return
+    if (typeof callback !== 'function') return
 
     if (blockingClick) isSubmitting = true
     try {
-      await cb()
+      await callback()
     } catch (error) {
       console.error('Error in button callback:', error)
     } finally {
@@ -40,19 +42,28 @@
     solid: { background: 'bg-primary-900', text: 'text-white' },
     soft: { background: 'bg-primary-100', text: 'text-primary-900' },
     danger: { background: 'bg-danger-500', text: 'text-white' },
-    'danger-soft': { background: 'bg-danger-300', text: 'text-danger-500' },
+    'danger-soft': { background: 'bg-danger-100', text: 'text-danger-500' },
+    white: { background: 'bg-white', text: 'text-black' },
   }
 
   const disabledVariantClasses = {
     solid: { background: 'bg-primary-500', text: 'text-white' },
     soft: { background: 'bg-primary-100', text: 'text-primary-500' },
-    danger: { background: 'bg-danger-500', text: 'text-white' },
-    'danger-soft': { background: 'bg-danger-300', text: 'text-danger-500' },
+    danger: { background: 'bg-danger-300', text: 'text-white' },
+    'danger-soft': { background: 'bg-danger-100', text: 'text-danger-300' },
+    white: { background: 'bg-black-100', text: 'text-black-700' },
+  }
+
+  const sizeVariant = {
+    sm: 'px-4 py-1.5 text-base h-11',
+    md: 'px-8 py-2.5 text-xl h-14',
   }
 
   let classes = $derived({
-    common:
-      'cursor-pointer flex items-center justify-center px-8 py-2.5 rounded-full text-xl font-semibold h-[56px] duration-100',
+    common: cn(
+      'cursor-pointer w-min flex items-center justify-center rounded-full font-semibold duration-100',
+      sizeVariant[size]
+    ),
     background: disabled
       ? disabledVariantClasses[variant].background ||
         variantClasses[variant].background
@@ -80,15 +91,15 @@
   {type}
 >
   <div class="relative flex items-center justify-center">
-    {#if isLoading || isSubmitting}
-      <div class="loading loading-spinner loading-md absolute -left-4"></div>
-    {/if}
     <div
       class="flex items-center justify-center duration-100"
-      class:translate-x-4={isLoading || isSubmitting}
+      class:blur-xs={isLoading || isSubmitting}
     >
       {@render children?.()}
     </div>
+    {#if isLoading || isSubmitting}
+      <div class="loading loading-spinner absolute loading-xl text-white"></div>
+    {/if}
   </div>
 </button>
 
@@ -100,8 +111,9 @@ This component is a button with a loading spinner that can be used to indicate t
 
 @props
 - variant: The variant of the button. Default is `solid`.
+- size: The size of the button. Default is `md`.
 - isLoading: A boolean to indicate if the button is in a loading state.
-- cb: A callback function that will be called when the button is clicked.
+- callback: A callback function that will be called when the button is clicked.
 - blockingClick: A boolean to indicate if the button should block the click event while the callback function is being executed.
 - icon: A slot for an icon to be displayed inside the button.
 - ...restProps: Any other props that can be passed to a button element.
@@ -112,7 +124,7 @@ This component is a button with a loading spinner that can be used to indicate t
     import * as Button from '$lib/ui/Button'
 </script>
 
-<Button.Action variant="solid" cb={() => console.log('clicked')}>
+<Button.Action variant="solid" callback={() => console.log('clicked')}>
   Click me
 </Button.Action>
 ```