@r2digisolutions/components 0.4.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/atoms/Button/Button.stories.d.ts +6 -0
- package/dist/components/atoms/Button/Button.stories.js +7 -0
- package/dist/components/atoms/Button/Button.svelte +15 -17
- package/dist/components/atoms/Button/Button.svelte.d.ts +1 -0
- package/dist/components/atoms/Button/ButtonStory.svelte +2 -0
- package/dist/components/atoms/Button/ButtonStory.svelte.d.ts +1 -0
- package/package.json +1 -1
|
@@ -7,6 +7,7 @@ declare const meta: {
|
|
|
7
7
|
loading?: boolean;
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
fullWidth?: boolean;
|
|
10
|
+
href?: string;
|
|
10
11
|
label?: string;
|
|
11
12
|
}, {}, "">;
|
|
12
13
|
tags: string[];
|
|
@@ -33,6 +34,10 @@ declare const meta: {
|
|
|
33
34
|
control: "boolean";
|
|
34
35
|
description: string;
|
|
35
36
|
};
|
|
37
|
+
href: {
|
|
38
|
+
control: "text";
|
|
39
|
+
description: string;
|
|
40
|
+
};
|
|
36
41
|
label: {
|
|
37
42
|
control: "text";
|
|
38
43
|
description: string;
|
|
@@ -59,3 +64,4 @@ export declare const Disabled: Story;
|
|
|
59
64
|
export declare const ExtraSmall: Story;
|
|
60
65
|
export declare const Large: Story;
|
|
61
66
|
export declare const FullWidth: Story;
|
|
67
|
+
export declare const AsLink: Story;
|
|
@@ -26,6 +26,10 @@ const meta = {
|
|
|
26
26
|
control: 'boolean',
|
|
27
27
|
description: 'Makes the button take full container width'
|
|
28
28
|
},
|
|
29
|
+
href: {
|
|
30
|
+
control: 'text',
|
|
31
|
+
description: 'If set, renders as an anchor instead of a button'
|
|
32
|
+
},
|
|
29
33
|
label: {
|
|
30
34
|
control: 'text',
|
|
31
35
|
description: 'Button text content'
|
|
@@ -71,3 +75,6 @@ export const Large = {
|
|
|
71
75
|
export const FullWidth = {
|
|
72
76
|
args: { fullWidth: true, label: 'Full Width' }
|
|
73
77
|
};
|
|
78
|
+
export const AsLink = {
|
|
79
|
+
args: { href: '#', label: 'Go to page' }
|
|
80
|
+
};
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
loading?: boolean;
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
fullWidth?: boolean;
|
|
13
|
+
href?: string;
|
|
13
14
|
type?: 'button' | 'submit' | 'reset';
|
|
14
15
|
class?: string;
|
|
15
16
|
children?: Snippet;
|
|
@@ -23,6 +24,7 @@
|
|
|
23
24
|
loading = false,
|
|
24
25
|
disabled = false,
|
|
25
26
|
fullWidth = false,
|
|
27
|
+
href,
|
|
26
28
|
type = 'button',
|
|
27
29
|
class: className = '',
|
|
28
30
|
children,
|
|
@@ -31,6 +33,7 @@
|
|
|
31
33
|
}: ButtonProps = $props();
|
|
32
34
|
|
|
33
35
|
const isDisabled = $derived(disabled || loading);
|
|
36
|
+
const tag = $derived(href ? 'a' : 'button');
|
|
34
37
|
|
|
35
38
|
const baseClasses =
|
|
36
39
|
'relative inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 select-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 overflow-hidden';
|
|
@@ -65,24 +68,28 @@
|
|
|
65
68
|
};
|
|
66
69
|
</script>
|
|
67
70
|
|
|
68
|
-
<
|
|
69
|
-
{
|
|
71
|
+
<svelte:element
|
|
72
|
+
this={tag}
|
|
73
|
+
href={isDisabled ? undefined : href}
|
|
74
|
+
type={href ? undefined : type}
|
|
75
|
+
disabled={href ? undefined : isDisabled}
|
|
76
|
+
aria-disabled={href && isDisabled ? true : undefined}
|
|
77
|
+
aria-busy={loading}
|
|
70
78
|
class={[
|
|
71
79
|
baseClasses,
|
|
72
80
|
variantClasses[variant],
|
|
73
81
|
sizeClasses[size],
|
|
74
82
|
(size === 'md' || size === 'lg' || size === 'xl') && 'touch-target',
|
|
75
83
|
fullWidth && 'w-full',
|
|
84
|
+
href && isDisabled && 'pointer-events-none cursor-not-allowed opacity-50',
|
|
76
85
|
className
|
|
77
86
|
]}
|
|
78
|
-
disabled={isDisabled}
|
|
79
|
-
aria-busy={loading}
|
|
80
87
|
{onclick}
|
|
81
88
|
{...rest}
|
|
82
89
|
>
|
|
83
90
|
{#if loading}
|
|
84
91
|
<!-- Spinner overlay -->
|
|
85
|
-
<span class="
|
|
92
|
+
<span class="inset-0 absolute flex items-center justify-center">
|
|
86
93
|
<svg
|
|
87
94
|
class={['animate-spin', iconSizeClasses[size]]}
|
|
88
95
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -90,18 +97,9 @@
|
|
|
90
97
|
viewBox="0 0 24 24"
|
|
91
98
|
aria-hidden="true"
|
|
92
99
|
>
|
|
93
|
-
<circle
|
|
94
|
-
class="opacity-25"
|
|
95
|
-
cx="12"
|
|
96
|
-
cy="12"
|
|
97
|
-
r="10"
|
|
98
|
-
stroke="currentColor"
|
|
99
|
-
stroke-width="4"
|
|
100
|
+
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
|
|
100
101
|
></circle>
|
|
101
|
-
<path
|
|
102
|
-
class="opacity-75"
|
|
103
|
-
fill="currentColor"
|
|
104
|
-
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
102
|
+
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
105
103
|
></path>
|
|
106
104
|
</svg>
|
|
107
105
|
</span>
|
|
@@ -112,4 +110,4 @@
|
|
|
112
110
|
{:else}
|
|
113
111
|
{@render children?.()}
|
|
114
112
|
{/if}
|
|
115
|
-
</
|
|
113
|
+
</svelte:element>
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
loading?: boolean;
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
fullWidth?: boolean;
|
|
10
|
+
href?: string;
|
|
10
11
|
label?: string;
|
|
11
12
|
}>();
|
|
12
13
|
</script>
|
|
@@ -18,6 +19,7 @@
|
|
|
18
19
|
loading={props.loading ?? false}
|
|
19
20
|
disabled={props.disabled ?? false}
|
|
20
21
|
fullWidth={props.fullWidth ?? false}
|
|
22
|
+
href={props.href}
|
|
21
23
|
>
|
|
22
24
|
{props.label ?? 'Button'}
|
|
23
25
|
</Button>
|