@reshape-biotech/design-system 0.0.44 → 0.0.45
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/button/Button.svelte +8 -8
- package/dist/components/dropdown/components/DropdownContent.svelte +1 -4
- package/dist/components/icon-button/IconButton.stories.svelte +56 -26
- package/dist/components/icon-button/IconButton.svelte +96 -29
- package/dist/components/icon-button/IconButton.svelte.d.ts +3 -1
- package/dist/components/modal/Modal.svelte +1 -1
- package/package.json +1 -1
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
import Spinner from '../spinner/Spinner.svelte';
|
|
3
3
|
import type { Snippet } from 'svelte';
|
|
4
4
|
|
|
5
|
+
type Variant =
|
|
6
|
+
| 'primary'
|
|
7
|
+
| 'secondary'
|
|
8
|
+
| 'transparent'
|
|
9
|
+
| 'danger'
|
|
10
|
+
| 'outline'
|
|
11
|
+
| 'secondary-inverse';
|
|
12
|
+
|
|
5
13
|
interface Props {
|
|
6
14
|
class?: string;
|
|
7
15
|
onClick?: (event?: MouseEvent) => void;
|
|
@@ -32,14 +40,6 @@
|
|
|
32
40
|
dataTestId = undefined
|
|
33
41
|
}: Props = $props();
|
|
34
42
|
|
|
35
|
-
type Variant =
|
|
36
|
-
| 'primary'
|
|
37
|
-
| 'secondary'
|
|
38
|
-
| 'transparent'
|
|
39
|
-
| 'danger'
|
|
40
|
-
| 'outline'
|
|
41
|
-
| 'secondary-inverse';
|
|
42
|
-
|
|
43
43
|
let variantClass = $derived(`btn-${variant}`);
|
|
44
44
|
let sizeClass = $derived(`btn-size-${size}`);
|
|
45
45
|
</script>
|
|
@@ -21,9 +21,6 @@
|
|
|
21
21
|
|
|
22
22
|
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
|
23
23
|
<!-- DaisyUI have a bug wit safari dropdown. Requires tabindex=0-->
|
|
24
|
-
<div
|
|
25
|
-
class={`dropdown-content z-[1] mb-2 rounded-md p-1 shadow-2xl ${variantClass} ${className}`}
|
|
26
|
-
tabindex="0"
|
|
27
|
-
>
|
|
24
|
+
<div class={`z-[1] mb-2 rounded-md p-1 shadow-2xl ${variantClass} ${className}`} tabindex="0">
|
|
28
25
|
{@render children?.()}
|
|
29
26
|
</div>
|
|
@@ -10,35 +10,65 @@
|
|
|
10
10
|
});
|
|
11
11
|
</script>
|
|
12
12
|
|
|
13
|
-
<Story name="
|
|
14
|
-
<
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
</
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
13
|
+
<Story name="Base">
|
|
14
|
+
<div class="flex flex-col gap-2">
|
|
15
|
+
<IconButton variant="primary">
|
|
16
|
+
<Plus />
|
|
17
|
+
</IconButton>
|
|
18
|
+
<IconButton variant="secondary">
|
|
19
|
+
<Plus />
|
|
20
|
+
</IconButton>
|
|
21
|
+
<IconButton variant="danger">
|
|
22
|
+
<Plus />
|
|
23
|
+
</IconButton>
|
|
24
|
+
<IconButton variant="transparent">
|
|
25
|
+
<Plus />
|
|
26
|
+
</IconButton>
|
|
27
|
+
</div>
|
|
27
28
|
</Story>
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
|
|
30
|
+
<Story name="Sizes">
|
|
31
|
+
<div class="flex flex-col gap-2">
|
|
32
|
+
<IconButton variant="secondary" size="xs">
|
|
33
|
+
<Plus />
|
|
34
|
+
</IconButton>
|
|
35
|
+
<IconButton variant="secondary" size="sm">
|
|
36
|
+
<Plus />
|
|
37
|
+
</IconButton>
|
|
38
|
+
<IconButton variant="secondary" size="md">
|
|
39
|
+
<Plus />
|
|
40
|
+
</IconButton>
|
|
41
|
+
</div>
|
|
32
42
|
</Story>
|
|
33
|
-
<Story name="
|
|
34
|
-
<
|
|
35
|
-
<
|
|
36
|
-
|
|
43
|
+
<Story name="Not rounded base">
|
|
44
|
+
<div class="flex flex-col gap-2">
|
|
45
|
+
<IconButton variant="primary" rounded={false}>
|
|
46
|
+
<Plus />
|
|
47
|
+
</IconButton>
|
|
48
|
+
<IconButton variant="secondary" rounded={false}>
|
|
49
|
+
<Plus />
|
|
50
|
+
</IconButton>
|
|
51
|
+
<IconButton variant="danger" rounded={false}>
|
|
52
|
+
<Plus />
|
|
53
|
+
</IconButton>
|
|
54
|
+
<IconButton variant="transparent" rounded={false}>
|
|
55
|
+
<Plus />
|
|
56
|
+
</IconButton>
|
|
57
|
+
</div>
|
|
37
58
|
</Story>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
59
|
+
|
|
60
|
+
<Story name="Not rounded sizes">
|
|
61
|
+
<div class="flex flex-col gap-2">
|
|
62
|
+
<IconButton variant="secondary" size="xs" rounded={false}>
|
|
63
|
+
<Plus />
|
|
64
|
+
</IconButton>
|
|
65
|
+
<IconButton variant="secondary" size="sm" rounded={false}>
|
|
66
|
+
<Plus />
|
|
67
|
+
</IconButton>
|
|
68
|
+
<IconButton variant="secondary" size="md" rounded={false}>
|
|
69
|
+
<Plus />
|
|
70
|
+
</IconButton>
|
|
71
|
+
</div>
|
|
42
72
|
</Story>
|
|
43
73
|
<Story name="Disabled">
|
|
44
74
|
<IconButton disabled>
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
import type { Snippet } from 'svelte';
|
|
3
3
|
import { Spinner } from '../spinner/';
|
|
4
4
|
|
|
5
|
-
type
|
|
5
|
+
type Variant = 'primary' | 'secondary' | 'transparent' | 'danger';
|
|
6
6
|
interface Props {
|
|
7
|
-
|
|
7
|
+
variant?: Variant;
|
|
8
8
|
type?: 'button' | 'submit' | 'reset' | null | undefined;
|
|
9
9
|
loading?: boolean;
|
|
10
10
|
disabled?: boolean;
|
|
@@ -12,34 +12,23 @@
|
|
|
12
12
|
children?: Snippet;
|
|
13
13
|
onclick?: () => void;
|
|
14
14
|
tabindex?: number | undefined;
|
|
15
|
+
rounded?: boolean;
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
let {
|
|
18
|
-
|
|
19
|
+
variant = 'transparent',
|
|
19
20
|
type = 'button',
|
|
20
21
|
loading = false,
|
|
21
22
|
disabled = false,
|
|
22
23
|
size = 'sm',
|
|
23
24
|
children,
|
|
24
25
|
onclick,
|
|
25
|
-
tabindex
|
|
26
|
+
tabindex,
|
|
27
|
+
rounded = true
|
|
26
28
|
}: Props = $props();
|
|
27
29
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
sm: 'h-8 w-8 [&>svg]:w-4 [&>svg]:h-4',
|
|
31
|
-
md: 'h-10 w-10 [&>svg]:w-5 [&>svg]:h-5',
|
|
32
|
-
lg: 'h-8 w-8 '
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
const colors: Record<Color, string> = {
|
|
36
|
-
primary: 'bg-accent-inverse text-icon-primary-inverse hover:bg-accent-inverse-hover ',
|
|
37
|
-
secondary: 'bg-neutral text-icon-primary hover:bg-neutral-hover ',
|
|
38
|
-
transparent: 'bg-transparent text-icon-primary hover:bg-neutral-hover ',
|
|
39
|
-
danger: 'bg-danger-inverse text-icon-primary-inverse hover:bg-danger-inverse-hover '
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
const baseStyle = 'flex justify-center items-center rounded-full';
|
|
30
|
+
let sizeClass = $derived(`size-${size}`);
|
|
31
|
+
let variantClass = $derived(`color-${variant}`);
|
|
43
32
|
</script>
|
|
44
33
|
|
|
45
34
|
{#if disabled || loading}
|
|
@@ -49,9 +38,8 @@
|
|
|
49
38
|
}}
|
|
50
39
|
{type}
|
|
51
40
|
{disabled}
|
|
52
|
-
class="
|
|
53
|
-
|
|
54
|
-
]} cursor-default {colors['secondary']}"
|
|
41
|
+
class="{sizeClass} {variantClass} disabled"
|
|
42
|
+
class:rounded
|
|
55
43
|
>
|
|
56
44
|
{#if loading}
|
|
57
45
|
<Spinner />
|
|
@@ -60,13 +48,92 @@
|
|
|
60
48
|
{/if}
|
|
61
49
|
</button>
|
|
62
50
|
{:else}
|
|
63
|
-
<button
|
|
64
|
-
{onclick}
|
|
65
|
-
{type}
|
|
66
|
-
{disabled}
|
|
67
|
-
{tabindex}
|
|
68
|
-
class="{colors[color]} {sizeClass[size]} {baseStyle} cursor-pointer"
|
|
69
|
-
>
|
|
51
|
+
<button {onclick} {type} {disabled} {tabindex} class="{sizeClass} {variantClass}" class:rounded>
|
|
70
52
|
{@render children?.()}
|
|
71
53
|
</button>
|
|
72
54
|
{/if}
|
|
55
|
+
|
|
56
|
+
<style>
|
|
57
|
+
button {
|
|
58
|
+
display: flex;
|
|
59
|
+
cursor: pointer;
|
|
60
|
+
align-items: center;
|
|
61
|
+
justify-content: center;
|
|
62
|
+
border-radius: 0.125rem
|
|
63
|
+
}
|
|
64
|
+
.rounded {
|
|
65
|
+
border-radius: 9999px
|
|
66
|
+
}
|
|
67
|
+
.disabled {
|
|
68
|
+
cursor: default
|
|
69
|
+
}
|
|
70
|
+
.disabled:disabled {
|
|
71
|
+
background-color: #12192a0d;
|
|
72
|
+
--tw-text-opacity: 1;
|
|
73
|
+
color: rgb(136 140 148 / var(--tw-text-opacity, 1))
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.size-xs {
|
|
77
|
+
height: 1.5rem;
|
|
78
|
+
width: 1.5rem
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.size-xs :global(svg) {
|
|
82
|
+
height: 1rem;
|
|
83
|
+
width: 1rem
|
|
84
|
+
}
|
|
85
|
+
.size-sm {
|
|
86
|
+
height: 2rem;
|
|
87
|
+
width: 2rem
|
|
88
|
+
}
|
|
89
|
+
.size-sm :global(svg) {
|
|
90
|
+
height: 1rem;
|
|
91
|
+
width: 1rem
|
|
92
|
+
}
|
|
93
|
+
.size-md {
|
|
94
|
+
height: 2.5rem;
|
|
95
|
+
width: 2.5rem
|
|
96
|
+
}
|
|
97
|
+
.size-md :global(svg) {
|
|
98
|
+
height: 1.25rem;
|
|
99
|
+
width: 1.25rem
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.color-primary {
|
|
103
|
+
--tw-bg-opacity: 1;
|
|
104
|
+
background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
|
|
105
|
+
--tw-text-opacity: 1;
|
|
106
|
+
color: rgb(255 255 255 / var(--tw-text-opacity, 1))
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.color-primary:hover {
|
|
110
|
+
--tw-bg-opacity: 1;
|
|
111
|
+
background-color: rgb(71 65 193 / var(--tw-bg-opacity, 1))
|
|
112
|
+
}
|
|
113
|
+
.color-secondary {
|
|
114
|
+
background-color: #12192a0d;
|
|
115
|
+
--tw-text-opacity: 1;
|
|
116
|
+
color: rgb(18 25 42 / var(--tw-text-opacity, 1))
|
|
117
|
+
}
|
|
118
|
+
.color-secondary:hover {
|
|
119
|
+
background-color: #12192A1A
|
|
120
|
+
}
|
|
121
|
+
.color-transparent {
|
|
122
|
+
background-color: transparent;
|
|
123
|
+
--tw-text-opacity: 1;
|
|
124
|
+
color: rgb(18 25 42 / var(--tw-text-opacity, 1))
|
|
125
|
+
}
|
|
126
|
+
.color-transparent:hover {
|
|
127
|
+
background-color: #12192A1A
|
|
128
|
+
}
|
|
129
|
+
.color-danger {
|
|
130
|
+
--tw-bg-opacity: 1;
|
|
131
|
+
background-color: rgb(235 70 71 / var(--tw-bg-opacity, 1));
|
|
132
|
+
--tw-text-opacity: 1;
|
|
133
|
+
color: rgb(255 255 255 / var(--tw-text-opacity, 1))
|
|
134
|
+
}
|
|
135
|
+
.color-danger:hover {
|
|
136
|
+
--tw-bg-opacity: 1;
|
|
137
|
+
background-color: rgb(191 57 58 / var(--tw-bg-opacity, 1))
|
|
138
|
+
}
|
|
139
|
+
</style>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { Snippet } from 'svelte';
|
|
2
|
+
type Variant = 'primary' | 'secondary' | 'transparent' | 'danger';
|
|
2
3
|
interface Props {
|
|
3
|
-
|
|
4
|
+
variant?: Variant;
|
|
4
5
|
type?: 'button' | 'submit' | 'reset' | null | undefined;
|
|
5
6
|
loading?: boolean;
|
|
6
7
|
disabled?: boolean;
|
|
@@ -8,6 +9,7 @@ interface Props {
|
|
|
8
9
|
children?: Snippet;
|
|
9
10
|
onclick?: () => void;
|
|
10
11
|
tabindex?: number | undefined;
|
|
12
|
+
rounded?: boolean;
|
|
11
13
|
}
|
|
12
14
|
declare const IconButton: import("svelte").Component<Props, {}, "">;
|
|
13
15
|
type IconButton = ReturnType<typeof IconButton>;
|