@reshape-biotech/design-system 0.0.4 → 0.0.5
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/avatar/Avatar.svelte +47 -47
- package/dist/components/tooltip/Tooltip.stories.svelte +105 -105
- package/dist/components/tooltip/Tooltip.svelte +28 -28
- package/dist/tokens.d.ts +552 -552
- package/dist/tokens.js +27 -27
- package/package.json +9 -2
|
@@ -1,66 +1,66 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
|
|
2
|
+
import Tooltip from '../tooltip/Tooltip.svelte';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
interface Props {
|
|
5
|
+
name: string | null | undefined;
|
|
6
|
+
size?: 'sm' | 'md';
|
|
7
|
+
showTooltip?: boolean;
|
|
8
|
+
}
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
let { name, size = 'md', showTooltip = true }: Props = $props();
|
|
11
|
+
const sizes = {
|
|
12
|
+
sm: 'h-5 w-5 min-w-5 text-xxs font-medium',
|
|
13
|
+
md: 'h-7 w-7 min-w-7 text-xs font-medium'
|
|
14
|
+
};
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
let sizeClassName = $derived(sizes[size]);
|
|
17
17
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
18
|
+
const getInitials = (name: string | null | undefined) => {
|
|
19
|
+
if (!name) {
|
|
20
|
+
return '?'; // You can use any default value here
|
|
21
|
+
}
|
|
22
|
+
// Check if the name is an email
|
|
23
|
+
const isEmail = name.includes('@');
|
|
24
|
+
if (isEmail) {
|
|
25
|
+
return name.slice(0, 2).toUpperCase();
|
|
26
|
+
}
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
// Split the name by space
|
|
29
|
+
const splitName = name.split(' ');
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
// Check if the name is a single word or already initials
|
|
32
|
+
if (splitName.length === 1 || (splitName.length === 1 && splitName[0].length <= 2)) {
|
|
33
|
+
return name.slice(0, 2).toUpperCase();
|
|
34
|
+
}
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
// If the name is multiple words, use the first letter of the first and last word
|
|
37
|
+
const firstInitial = splitName[0][0];
|
|
38
|
+
const lastInitial = splitName[splitName.length - 1][0];
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
return (firstInitial + lastInitial).toUpperCase();
|
|
41
|
+
};
|
|
42
|
+
let initials = $derived(getInitials(name));
|
|
43
43
|
</script>
|
|
44
44
|
|
|
45
45
|
{#snippet avatar()}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
46
|
+
<div
|
|
47
|
+
class="{sizeClassName} flex items-center justify-center rounded-full bg-accent-inverse text-primary-inverse"
|
|
48
|
+
>
|
|
49
|
+
{initials}
|
|
50
|
+
</div>
|
|
51
51
|
{/snippet}
|
|
52
52
|
|
|
53
53
|
{#if showTooltip}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
54
|
+
<Tooltip>
|
|
55
|
+
{#snippet trigger()}
|
|
56
|
+
{@render avatar()}
|
|
57
|
+
{/snippet}
|
|
58
|
+
{#snippet content()}
|
|
59
|
+
<span>{name ? name : 'Unknown'}</span>
|
|
60
|
+
{/snippet}
|
|
61
|
+
</Tooltip>
|
|
62
62
|
{:else}
|
|
63
|
-
|
|
63
|
+
{@render avatar()}
|
|
64
64
|
{/if}
|
|
65
65
|
|
|
66
66
|
<style>
|
|
@@ -1,126 +1,126 @@
|
|
|
1
1
|
<script module>
|
|
2
|
-
|
|
2
|
+
import Tooltip from './Tooltip.svelte';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
5
|
+
const { Story } = defineMeta({
|
|
6
|
+
component: Tooltip,
|
|
7
|
+
title: 'Design System/Tooltip',
|
|
8
|
+
tags: ['autodocs']
|
|
9
|
+
});
|
|
10
10
|
</script>
|
|
11
11
|
|
|
12
12
|
<Story name="Base">
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
13
|
+
<div class="flex justify-center">
|
|
14
|
+
<Tooltip>
|
|
15
|
+
{#snippet trigger()}
|
|
16
|
+
<button>Hover me</button>
|
|
17
|
+
{/snippet}
|
|
18
|
+
{#snippet content()}
|
|
19
|
+
<span>Hello World</span>
|
|
20
|
+
{/snippet}
|
|
21
|
+
</Tooltip>
|
|
22
|
+
</div>
|
|
23
23
|
</Story>
|
|
24
24
|
|
|
25
25
|
<Story name="Force Open">
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
26
|
+
<div class="flex justify-center">
|
|
27
|
+
<Tooltip forceOpen={true}>
|
|
28
|
+
{#snippet trigger()}
|
|
29
|
+
<button>Hover me</button>
|
|
30
|
+
{/snippet}
|
|
31
|
+
{#snippet content()}
|
|
32
|
+
<span>Hello World</span>
|
|
33
|
+
{/snippet}
|
|
34
|
+
</Tooltip>
|
|
35
|
+
</div>
|
|
36
36
|
</Story>
|
|
37
37
|
|
|
38
38
|
<Story name="No Arrow">
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
39
|
+
<div class="flex justify-center">
|
|
40
|
+
<Tooltip showArrow={false}>
|
|
41
|
+
{#snippet trigger()}
|
|
42
|
+
<button>This one has no arrow</button>
|
|
43
|
+
{/snippet}
|
|
44
|
+
{#snippet content()}
|
|
45
|
+
<span>Wow, no arrow</span>
|
|
46
|
+
{/snippet}
|
|
47
|
+
</Tooltip>
|
|
48
|
+
</div>
|
|
49
49
|
</Story>
|
|
50
50
|
|
|
51
51
|
<Story name="Different Placements">
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
52
|
+
<div class="flex justify-center gap-4 py-8">
|
|
53
|
+
<div>
|
|
54
|
+
<Tooltip placement="top">
|
|
55
|
+
{#snippet trigger()}
|
|
56
|
+
<button>Top</button>
|
|
57
|
+
{/snippet}
|
|
58
|
+
{#snippet content()}
|
|
59
|
+
<span>Tooltip on top</span>
|
|
60
|
+
{/snippet}
|
|
61
|
+
</Tooltip>
|
|
62
|
+
</div>
|
|
63
|
+
<div>
|
|
64
|
+
<Tooltip placement="right">
|
|
65
|
+
{#snippet trigger()}
|
|
66
|
+
<button>Right</button>
|
|
67
|
+
{/snippet}
|
|
68
|
+
{#snippet content()}
|
|
69
|
+
<span>Tooltip on right</span>
|
|
70
|
+
{/snippet}
|
|
71
|
+
</Tooltip>
|
|
72
|
+
</div>
|
|
73
|
+
<div>
|
|
74
|
+
<Tooltip placement="bottom">
|
|
75
|
+
{#snippet trigger()}
|
|
76
|
+
<button>Bottom</button>
|
|
77
|
+
{/snippet}
|
|
78
|
+
{#snippet content()}
|
|
79
|
+
<span>Tooltip on bottom</span>
|
|
80
|
+
{/snippet}
|
|
81
|
+
</Tooltip>
|
|
82
|
+
</div>
|
|
83
|
+
<div>
|
|
84
|
+
<Tooltip placement="left">
|
|
85
|
+
{#snippet trigger()}
|
|
86
|
+
<button>Left</button>
|
|
87
|
+
{/snippet}
|
|
88
|
+
{#snippet content()}
|
|
89
|
+
<span>Tooltip on left</span>
|
|
90
|
+
{/snippet}
|
|
91
|
+
</Tooltip>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
94
|
</Story>
|
|
95
95
|
|
|
96
96
|
<Story name="Custom Content">
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
97
|
+
<div class="flex h-28 items-end justify-center">
|
|
98
|
+
<Tooltip>
|
|
99
|
+
{#snippet trigger()}
|
|
100
|
+
<button>Hover me</button>
|
|
101
|
+
{/snippet}
|
|
102
|
+
{#snippet content()}
|
|
103
|
+
<div>
|
|
104
|
+
<h3>Custom Heading</h3>
|
|
105
|
+
<p>This is some custom content inside the tooltip.</p>
|
|
106
|
+
</div>
|
|
107
|
+
{/snippet}
|
|
108
|
+
</Tooltip>
|
|
109
|
+
</div>
|
|
110
110
|
</Story>
|
|
111
111
|
|
|
112
112
|
<Story name="Custom Content Forced Open">
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
113
|
+
<div class="flex h-28 items-end justify-center">
|
|
114
|
+
<Tooltip forceOpen={true}>
|
|
115
|
+
{#snippet trigger()}
|
|
116
|
+
<button>Hover me</button>
|
|
117
|
+
{/snippet}
|
|
118
|
+
{#snippet content()}
|
|
119
|
+
<div>
|
|
120
|
+
<h3>Custom Heading</h3>
|
|
121
|
+
<p>This is some custom content inside the tooltip.</p>
|
|
122
|
+
</div>
|
|
123
|
+
{/snippet}
|
|
124
|
+
</Tooltip>
|
|
125
|
+
</div>
|
|
126
126
|
</Story>
|
|
@@ -1,41 +1,41 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
import { Tooltip } from 'flowbite-svelte';
|
|
3
|
+
import type { Snippet } from 'svelte';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
5
|
+
interface Props {
|
|
6
|
+
class?: string;
|
|
7
|
+
forceOpen?: boolean;
|
|
8
|
+
showArrow?: boolean;
|
|
9
|
+
placement?: 'top' | 'right' | 'bottom' | 'left';
|
|
10
|
+
trigger?: Snippet;
|
|
11
|
+
content?: Snippet;
|
|
12
|
+
}
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
14
|
+
let {
|
|
15
|
+
class: className = '',
|
|
16
|
+
forceOpen = false,
|
|
17
|
+
showArrow = true,
|
|
18
|
+
placement = 'top',
|
|
19
|
+
trigger,
|
|
20
|
+
content
|
|
21
|
+
}: Props = $props();
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
let tooltipClass = $derived(`${className} ${showArrow ? 'with-arrow' : ''}`);
|
|
24
24
|
</script>
|
|
25
25
|
|
|
26
26
|
{@render trigger?.()}
|
|
27
27
|
<Tooltip
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
open={forceOpen}
|
|
29
|
+
arrow={showArrow}
|
|
30
|
+
{placement}
|
|
31
|
+
class={`${tooltipClass} rounded bg-base-inverse px-2 py-1 text-sm font-normal text-primary-inverse shadow`}
|
|
32
32
|
>
|
|
33
|
-
|
|
33
|
+
{@render content?.()}
|
|
34
34
|
</Tooltip>
|
|
35
35
|
|
|
36
36
|
<style>
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
/* Hack to get the arrow styling to work */
|
|
38
|
+
:global(.tooltip.with-arrow > :last-child) {
|
|
39
|
+
@apply pointer-events-none absolute block h-2 w-2 rotate-45 transform border-inherit bg-inherit;
|
|
40
|
+
}
|
|
41
41
|
</style>
|