From f8bee3dd0d245b91ffebdadf701083c8f88c9d0d Mon Sep 17 00:00:00 2001 From: JulienAuvo Date: Tue, 25 Mar 2025 13:22:02 +0300 Subject: [PATCH 1/7] feat: add icon button component --- .../src/lib/ui/Button/ButtonIcon.svelte | 115 ++++++++++++++++++ 1 file changed, 115 insertions(+) diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte index e69de29b..737a8172 100644 --- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte +++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte @@ -0,0 +1,115 @@ + + + + + From 0c4973aadfcd737a6bd83447252d5b6c52e9c4a7 Mon Sep 17 00:00:00 2001 From: JulienAuvo Date: Wed, 26 Mar 2025 10:25:06 +0300 Subject: [PATCH 2/7] feat: finish up buttonIcon + stories --- .../src/lib/ui/Button/ButtonIcon.stories.ts | 63 ++++++++ .../src/lib/ui/Button/ButtonIcon.svelte | 150 ++++++++++++------ 2 files changed, 163 insertions(+), 50 deletions(-) create mode 100644 infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.stories.ts diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.stories.ts b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.stories.ts new file mode 100644 index 00000000..d17781a9 --- /dev/null +++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.stories.ts @@ -0,0 +1,63 @@ +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 + }) => ({ + Component: ButtonIcon, + props: args, + }), +} + +export const Default = { + 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, + }, + }), +} + +export const Active = { + render: () => ({ + Component: ButtonIcon, + props: { + variant: 'white', + ariaLabel: 'Active button', + size: 'md', + icon: FlashlightIcon, + isActive: true, + }, + }), +} diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte index 737a8172..850334e6 100644 --- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte +++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte @@ -1,21 +1,32 @@ @@ -72,44 +111,55 @@ ].join(' ') )} {disabled} - onclick={handleClick} + onclick={callback ? handleClick : onclick} {type} > -
- {#if isLoading || isSubmitting} - - {/if} + {#if isLoading || isSubmitting}
- {@render children?.()} -
-
+ class="loading loading-spinner absolute loading-lg {variantClasses[ + variant + ].text}" + > + {:else} + + {/if} + import { FlashlightIcon } from '@hugeicons/core-free-icons' + + let flashlightOn = $state(false) + + + (flashlightOn = !flashlightOn)} + isActive={flashlightOn} + > + ``` + --> From 90ff7e45c890dd464dd2f368f87467987dfb6a64 Mon Sep 17 00:00:00 2001 From: JulienAuvo Date: Wed, 26 Mar 2025 12:13:55 +0300 Subject: [PATCH 3/7] fix: update with new color naming --- .../eid-wallet/src/lib/ui/Button/ButtonIcon.svelte | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte index 850334e6..7fb04f65 100644 --- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte +++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte @@ -48,21 +48,21 @@ } const variantClasses = { - white: { background: 'bg-white-900', text: 'text-black' }, + white: { background: 'bg-white', text: 'text-black' }, 'clear-on-light': { background: 'transparent', text: 'text-black' }, 'clear-on-dark': { background: 'transparent', text: 'text-white' }, } const disabledClasses = { - white: { background: 'bg-white-900', text: 'text-black-500' }, + white: { background: 'bg-white', text: 'text-black-500' }, 'clear-on-light': { background: 'bg-transparent', text: 'text-black-500' }, 'clear-on-dark': { background: 'bg-transparent', text: 'text-black-500' }, } const isActiveClasses = { - white: { background: 'bg-secondary-900', text: 'text-black' }, - 'clear-on-light': { background: 'bg-secondary-900', text: 'text-black' }, - 'clear-on-dark': { background: 'bg-secondary-900', text: 'text-black' }, + white: { background: 'bg-secondary-500', text: 'text-black' }, + 'clear-on-light': { background: 'bg-secondary-500', text: 'text-black' }, + 'clear-on-dark': { background: 'bg-secondary-500', text: 'text-black' }, } const sizeVariant = { From 05f586e2e690952e925e5d08f96866271475b46e Mon Sep 17 00:00:00 2001 From: JulienAuvo Date: Thu, 27 Mar 2025 09:17:51 +0300 Subject: [PATCH 4/7] feat: polish button icon (and button action too) --- ...s.svelte => Button.stories.snippet.svelte} | 0 .../src/lib/ui/Button/ButtonAction.stories.ts | 46 ++-- .../src/lib/ui/Button/ButtonAction.svelte | 6 +- .../src/lib/ui/Button/ButtonIcon.stories.ts | 101 ++++----- .../src/lib/ui/Button/ButtonIcon.svelte | 196 +++++++++--------- 5 files changed, 170 insertions(+), 179 deletions(-) rename infrastructure/eid-wallet/src/lib/ui/Button/{ButtonSnippets.svelte => Button.stories.snippet.svelte} (100%) diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonSnippets.svelte b/infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte similarity index 100% rename from infrastructure/eid-wallet/src/lib/ui/Button/ButtonSnippets.svelte rename to infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.stories.ts b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.stories.ts index bc7ad728..ad723e4c 100644 --- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.stories.ts +++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.stories.ts @@ -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; - }) => ({ - Component: ButtonAction, - props: args, - }), + title: "UI/ButtonAction", + component: ButtonAction, + tags: ["autodocs"], + render: (args: { + Component: ButtonAction; + props: ComponentProps; + }) => ({ + 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)); + }, + }, }; diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte index 499a70c7..88f8a776 100644 --- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte +++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte @@ -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], diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.stories.ts b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.stories.ts index d17781a9..2e879b8d 100644 --- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.stories.ts +++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.stories.ts @@ -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 - }) => ({ - Component: ButtonIcon, - props: args, - }), -} + title: "UI/ButtonIcon", + component: ButtonIcon, + tags: ["autodocs"], + render: (args: { + Component: ButtonIcon<{ icon: typeof FlashlightIcon }>; + props: ComponentProps; + }) => ({ + 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, + }, + }), +}; diff --git a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte index 7fb04f65..471edc37 100644 --- a/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte +++ b/infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte @@ -1,102 +1,102 @@