@reshape-biotech/design-system 2.7.47 → 2.7.48
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/activity/Activity.stories.svelte +12 -0
- package/dist/components/activity/Activity.svelte +28 -8
- package/dist/components/activity/Activity.svelte.d.ts +1 -0
- package/dist/components/activity/ActivityIcon.svelte +8 -0
- package/dist/components/activity/ActivityIcon.svelte.d.ts +1 -1
- package/package.json +1 -1
|
@@ -56,6 +56,18 @@
|
|
|
56
56
|
timestamp: '3 Aug 2025, 10:30',
|
|
57
57
|
author: 'Jim Halpert',
|
|
58
58
|
},
|
|
59
|
+
{
|
|
60
|
+
icon: 'door-opened' as const,
|
|
61
|
+
label: 'Door opened',
|
|
62
|
+
timestamp: '3 Aug 2025, 11:30',
|
|
63
|
+
tooltip:
|
|
64
|
+
'Opening the door of the device while it is running can cause temperature fluctuations or misalignment of the images and their analysis',
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
icon: 'door-closed' as const,
|
|
68
|
+
label: 'Door closed',
|
|
69
|
+
timestamp: '3 Aug 2025, 11:31',
|
|
70
|
+
},
|
|
59
71
|
{
|
|
60
72
|
icon: 'failed' as const,
|
|
61
73
|
label: 'Job failed',
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { type BackgroundClass } from '../icons';
|
|
3
3
|
import ActivityIcon from './ActivityIcon.svelte';
|
|
4
4
|
import type { ActivityIconType } from './ActivityIcon.svelte';
|
|
5
|
+
import { Tooltip } from '../tooltip';
|
|
5
6
|
import { DateTime } from 'luxon';
|
|
6
7
|
import { twMerge } from 'tailwind-merge';
|
|
7
8
|
|
|
@@ -14,6 +15,7 @@
|
|
|
14
15
|
field?: string | null;
|
|
15
16
|
previous_value?: string | null;
|
|
16
17
|
value?: string | null;
|
|
18
|
+
tooltip?: string | null;
|
|
17
19
|
};
|
|
18
20
|
|
|
19
21
|
type Props = {
|
|
@@ -32,6 +34,8 @@
|
|
|
32
34
|
stop: 'bg-neutral',
|
|
33
35
|
warning: 'bg-warning',
|
|
34
36
|
success: 'bg-neutral',
|
|
37
|
+
'door-opened': 'bg-warning',
|
|
38
|
+
'door-closed': 'bg-neutral',
|
|
35
39
|
'export-succeeded': 'bg-neutral',
|
|
36
40
|
'export-failed': 'bg-danger',
|
|
37
41
|
};
|
|
@@ -58,14 +62,30 @@
|
|
|
58
62
|
<div class={twMerge('group flex items-stretch gap-3', className)}>
|
|
59
63
|
<div class="flex min-h-12 flex-col items-center gap-1.5">
|
|
60
64
|
<div class="bg-neutral w-0.5 grow group-first:invisible"></div>
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
65
|
+
{#snippet activityIconBadge()}
|
|
66
|
+
<div
|
|
67
|
+
class={twMerge(
|
|
68
|
+
'text-secondary flex h-5 w-5 shrink-0 items-center justify-center rounded p-0.5',
|
|
69
|
+
ACTIVITY_BACKGROUND[activity.icon]
|
|
70
|
+
)}
|
|
71
|
+
>
|
|
72
|
+
<ActivityIcon icon={activity.icon} />
|
|
73
|
+
</div>
|
|
74
|
+
{/snippet}
|
|
75
|
+
{#if activity.tooltip}
|
|
76
|
+
<Tooltip>
|
|
77
|
+
{#snippet trigger()}
|
|
78
|
+
{@render activityIconBadge()}
|
|
79
|
+
{/snippet}
|
|
80
|
+
{#snippet content()}
|
|
81
|
+
<div class="max-w-72 p-1 text-xs">
|
|
82
|
+
{activity.tooltip}
|
|
83
|
+
</div>
|
|
84
|
+
{/snippet}
|
|
85
|
+
</Tooltip>
|
|
86
|
+
{:else}
|
|
87
|
+
{@render activityIconBadge()}
|
|
88
|
+
{/if}
|
|
69
89
|
<div class="bg-neutral w-0.5 grow group-last:invisible"></div>
|
|
70
90
|
</div>
|
|
71
91
|
<div class="flex items-center py-4">
|
|
@@ -14,6 +14,8 @@
|
|
|
14
14
|
import Warning from 'phosphor-svelte/lib/Warning';
|
|
15
15
|
import Check from 'phosphor-svelte/lib/Check';
|
|
16
16
|
import DownloadSimple from 'phosphor-svelte/lib/DownloadSimple';
|
|
17
|
+
import ArrowSquareUp from 'phosphor-svelte/lib/ArrowSquareUp';
|
|
18
|
+
import ArrowSquareDown from 'phosphor-svelte/lib/ArrowSquareDown';
|
|
17
19
|
import type { IconColor } from '../icons';
|
|
18
20
|
|
|
19
21
|
export type ActivityIconType =
|
|
@@ -27,6 +29,8 @@
|
|
|
27
29
|
| 'stop'
|
|
28
30
|
| 'warning'
|
|
29
31
|
| 'success'
|
|
32
|
+
| 'door-opened'
|
|
33
|
+
| 'door-closed'
|
|
30
34
|
| 'export-succeeded'
|
|
31
35
|
| 'export-failed';
|
|
32
36
|
|
|
@@ -49,6 +53,8 @@
|
|
|
49
53
|
stop: Stop,
|
|
50
54
|
warning: Warning,
|
|
51
55
|
success: Check,
|
|
56
|
+
'door-opened': ArrowSquareUp,
|
|
57
|
+
'door-closed': ArrowSquareDown,
|
|
52
58
|
'export-succeeded': DownloadSimple,
|
|
53
59
|
'export-failed': DownloadSimple,
|
|
54
60
|
};
|
|
@@ -64,6 +70,8 @@
|
|
|
64
70
|
stop: 'icon-secondary',
|
|
65
71
|
warning: 'icon-warning',
|
|
66
72
|
success: 'icon-secondary',
|
|
73
|
+
'door-opened': 'icon-warning',
|
|
74
|
+
'door-closed': 'icon-secondary',
|
|
67
75
|
'export-succeeded': 'icon-secondary',
|
|
68
76
|
'export-failed': 'icon-danger',
|
|
69
77
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Component } from 'svelte';
|
|
2
|
-
export type ActivityIconType = 'add' | 'capture' | 'delete' | 'edit' | 'failed' | 'pause' | 'start' | 'stop' | 'warning' | 'success' | 'export-succeeded' | 'export-failed';
|
|
2
|
+
export type ActivityIconType = 'add' | 'capture' | 'delete' | 'edit' | 'failed' | 'pause' | 'start' | 'stop' | 'warning' | 'success' | 'door-opened' | 'door-closed' | 'export-succeeded' | 'export-failed';
|
|
3
3
|
interface Props {
|
|
4
4
|
icon: ActivityIconType;
|
|
5
5
|
size?: number | string;
|