@reshape-biotech/design-system 1.2.6 → 2.0.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.
Files changed (187) hide show
  1. package/README.md +5 -1
  2. package/dist/app.css +97 -97
  3. package/dist/components/activity/Activity.stories.svelte +104 -104
  4. package/dist/components/activity/Activity.svelte +112 -112
  5. package/dist/components/avatar/Avatar.stories.svelte +23 -23
  6. package/dist/components/avatar/Avatar.svelte +54 -54
  7. package/dist/components/banner/Banner.stories.svelte +105 -105
  8. package/dist/components/banner/Banner.svelte +42 -42
  9. package/dist/components/button/Button.stories.svelte +61 -61
  10. package/dist/components/button/Button.svelte +95 -95
  11. package/dist/components/card/Card.stories.svelte +112 -112
  12. package/dist/components/card/Card.svelte +18 -18
  13. package/dist/components/checkbox/Checkbox.stories.svelte +8 -8
  14. package/dist/components/checkbox/Checkbox.svelte +17 -17
  15. package/dist/components/collapsible/Collapsible.stories.svelte +26 -26
  16. package/dist/components/collapsible/components/collapsible-content.svelte +20 -20
  17. package/dist/components/collapsible/components/collapsible-trigger.svelte +12 -12
  18. package/dist/components/collapsible/index.d.ts +1 -1
  19. package/dist/components/combobox/Combobox.stories.svelte +412 -412
  20. package/dist/components/combobox/components/combobox-add.svelte +8 -8
  21. package/dist/components/combobox/components/combobox-content.svelte +39 -39
  22. package/dist/components/combobox/components/combobox-indicator.svelte +1 -1
  23. package/dist/components/combobox/index.d.ts +1 -1
  24. package/dist/components/datepicker/DatePicker.stories.svelte +196 -196
  25. package/dist/components/datepicker/DatePicker.svelte +173 -173
  26. package/dist/components/divider/Divider.stories.svelte +7 -7
  27. package/dist/components/divider/Divider.svelte +9 -9
  28. package/dist/components/drawer/Drawer.stories.svelte +51 -51
  29. package/dist/components/drawer/Drawer.svelte +33 -33
  30. package/dist/components/drawer/DrawerLabel.svelte +10 -10
  31. package/dist/components/dropdown/Dropdown.stories.svelte +210 -210
  32. package/dist/components/dropdown/Dropdown.svelte +57 -57
  33. package/dist/components/dropdown/components/DropdownContent.svelte +16 -16
  34. package/dist/components/dropdown/components/DropdownMenu.svelte +10 -10
  35. package/dist/components/dropdown/components/DropdownTrigger.svelte +37 -37
  36. package/dist/components/dropdown/components/OutlinedButton.svelte +9 -9
  37. package/dist/components/empty-content/EmptyContent.stories.svelte +38 -38
  38. package/dist/components/empty-content/EmptyContent.svelte +12 -12
  39. package/dist/components/graphs/bar-chart/BarChart.stories.svelte +91 -91
  40. package/dist/components/graphs/bar-chart/BarChart.svelte +147 -147
  41. package/dist/components/graphs/bar-chart/StackedBarChart.stories.svelte +57 -57
  42. package/dist/components/graphs/bar-chart/StackedBarChart.svelte +198 -199
  43. package/dist/components/graphs/chart/Chart.stories.svelte +96 -96
  44. package/dist/components/graphs/chart/Chart.svelte +207 -207
  45. package/dist/components/graphs/line/LineChart.stories.svelte +138 -138
  46. package/dist/components/graphs/line/LineChart.svelte +140 -142
  47. package/dist/components/graphs/matrix/Matrix.stories.svelte +117 -117
  48. package/dist/components/graphs/matrix/Matrix.svelte +141 -141
  49. package/dist/components/graphs/multiline/MultiLineChart.stories.svelte +168 -168
  50. package/dist/components/graphs/multiline/MultiLineChart.svelte +236 -236
  51. package/dist/components/graphs/scatterplot/Scatterplot.stories.svelte +84 -84
  52. package/dist/components/graphs/scatterplot/Scatterplot.svelte +302 -302
  53. package/dist/components/graphs/utils/duration.d.ts +1 -0
  54. package/dist/components/graphs/utils/duration.js +33 -0
  55. package/dist/components/graphs/utils/tooltipFormatter.js +1 -1
  56. package/dist/components/icon-button/IconButton.stories.svelte +64 -64
  57. package/dist/components/icon-button/IconButton.svelte +88 -88
  58. package/dist/components/icons/AnalysisIcon.stories.svelte +18 -18
  59. package/dist/components/icons/AnalysisIcon.svelte +96 -96
  60. package/dist/components/icons/Icon.stories.svelte +111 -111
  61. package/dist/components/icons/Icon.svelte +17 -17
  62. package/dist/components/icons/PrincipalIcon.svelte +59 -59
  63. package/dist/components/icons/custom/Halo.svelte +31 -31
  64. package/dist/components/icons/custom/Well.svelte +27 -27
  65. package/dist/components/icons/index.js +1 -1
  66. package/dist/components/image/Image.svelte +42 -42
  67. package/dist/components/input/Input.stories.svelte +55 -55
  68. package/dist/components/input/Input.svelte +121 -121
  69. package/dist/components/label/Label.stories.svelte +18 -18
  70. package/dist/components/label/Label.svelte +11 -11
  71. package/dist/components/list/List.stories.svelte +84 -84
  72. package/dist/components/list/List.svelte +20 -20
  73. package/dist/components/logo/Logo.stories.svelte +15 -15
  74. package/dist/components/logo/Logo.svelte +30 -30
  75. package/dist/components/manual-cfu-counter/ManualCFUCounter.stories.svelte +102 -102
  76. package/dist/components/manual-cfu-counter/ManualCFUCounter.svelte +557 -557
  77. package/dist/components/manual-cfu-counter/test/ManualCFUCounterTestWrapper.svelte +11 -11
  78. package/dist/components/markdown/Markdown.stories.svelte +10 -10
  79. package/dist/components/markdown/Markdown.svelte +6 -6
  80. package/dist/components/modal/Modal.stories.svelte +29 -29
  81. package/dist/components/modal/Modal.svelte +71 -71
  82. package/dist/components/multi-cfu-counter/MultiCFUCounter.stories.svelte +201 -201
  83. package/dist/components/multi-cfu-counter/MultiCFUCounter.svelte +606 -606
  84. package/dist/components/multi-cfu-counter/test/MultiCFUCounterTestWrapper.svelte +17 -17
  85. package/dist/components/notification-popup/NotificationPopup.stories.svelte +18 -18
  86. package/dist/components/notification-popup/NotificationPopup.svelte +26 -26
  87. package/dist/components/notifications/Notifications.stories.svelte +101 -101
  88. package/dist/components/notifications/Notifications.svelte +9 -9
  89. package/dist/components/pill/Pill.stories.svelte +8 -8
  90. package/dist/components/pill/Pill.svelte +27 -27
  91. package/dist/components/progress-circle/ProgressCircle.stories.svelte +8 -8
  92. package/dist/components/progress-circle/ProgressCircle.svelte +54 -54
  93. package/dist/components/required-status-indicator/RequiredStatusIndicator.stories.svelte +18 -18
  94. package/dist/components/required-status-indicator/RequiredStatusIndicator.svelte +14 -14
  95. package/dist/components/segmented-control-buttons/ControlButton.svelte +36 -36
  96. package/dist/components/segmented-control-buttons/SegmentedControlButtons.stories.svelte +35 -35
  97. package/dist/components/segmented-control-buttons/SegmentedControlButtons.svelte +13 -13
  98. package/dist/components/select/Select.stories.svelte +200 -94
  99. package/dist/components/select/Select.stories.svelte.d.ts +1 -1
  100. package/dist/components/select/components/Group.svelte +24 -0
  101. package/dist/components/select/components/MultiSelectTrigger.svelte +66 -0
  102. package/dist/components/select/components/SelectContent.svelte +33 -0
  103. package/dist/components/select/components/SelectGroupHeading.svelte +19 -0
  104. package/dist/components/select/components/SelectItem.svelte +39 -0
  105. package/dist/components/select/components/SelectTrigger.svelte +48 -0
  106. package/dist/components/select/index.d.ts +10 -7
  107. package/dist/components/select/index.js +12 -1
  108. package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte +102 -87
  109. package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte.d.ts +1 -1
  110. package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte +53 -53
  111. package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte.d.ts +1 -1
  112. package/dist/components/sjsf-wrappers/sjsfCustomTheme.js +1 -1
  113. package/dist/components/skeleton-loader/SkeletonLoader.stories.svelte +32 -32
  114. package/dist/components/skeleton-loader/SkeletonLoader.svelte +10 -10
  115. package/dist/components/skeleton-loader/StatcardSkeleton.svelte +9 -9
  116. package/dist/components/skeleton-loader/components/Skeleton.svelte +7 -7
  117. package/dist/components/skeleton-loader/components/SkeletonImage.svelte +12 -12
  118. package/dist/components/slider/Slider.stories.svelte +23 -23
  119. package/dist/components/slider/Slider.svelte +107 -107
  120. package/dist/components/spinner/Spinner.stories.svelte +8 -8
  121. package/dist/components/spinner/Spinner.svelte +18 -18
  122. package/dist/components/stat-card/StatCard.stories.svelte +26 -26
  123. package/dist/components/stat-card/StatCard.svelte +128 -128
  124. package/dist/components/status-badge/StatusBadge.stories.svelte +365 -365
  125. package/dist/components/status-badge/StatusBadge.svelte +54 -54
  126. package/dist/components/stepper/Stepper.stories.svelte +219 -219
  127. package/dist/components/stepper/components/stepper-root.svelte +12 -12
  128. package/dist/components/stepper/components/stepper-step.svelte +83 -83
  129. package/dist/components/table/Table.stories.svelte +87 -87
  130. package/dist/components/table/Table.svelte +32 -32
  131. package/dist/components/table/components/TBody.svelte +7 -7
  132. package/dist/components/table/components/THead.svelte +7 -7
  133. package/dist/components/table/components/Td.svelte +8 -8
  134. package/dist/components/table/components/Th.svelte +8 -8
  135. package/dist/components/table/components/Tr.svelte +11 -11
  136. package/dist/components/tabs/Tabs.stories.svelte +20 -20
  137. package/dist/components/tabs/Tabs.svelte +8 -8
  138. package/dist/components/tabs/components/Content.svelte +8 -8
  139. package/dist/components/tabs/components/Tab.svelte +14 -14
  140. package/dist/components/tabs/components/Tabs.svelte +7 -7
  141. package/dist/components/tag/Tag.stories.svelte +57 -57
  142. package/dist/components/tag/Tag.svelte +95 -95
  143. package/dist/components/textarea/Textarea.stories.svelte +70 -70
  144. package/dist/components/textarea/Textarea.svelte +76 -76
  145. package/dist/components/toast/Toast.stories.svelte +204 -204
  146. package/dist/components/toast/Toast.svelte +53 -53
  147. package/dist/components/toggle/Toggle.stories.svelte +9 -9
  148. package/dist/components/toggle/Toggle.svelte +53 -53
  149. package/dist/components/toggle-icon-button/ToggleIconButton.stories.svelte +152 -152
  150. package/dist/components/toggle-icon-button/ToggleIconButton.svelte +99 -99
  151. package/dist/components/tooltip/Tooltip.stories.svelte +85 -111
  152. package/dist/components/tooltip/Tooltip.svelte +57 -46
  153. package/dist/components/tooltip/Tooltip.svelte.d.ts +1 -1
  154. package/dist/components/tooltip/TooltipTest.svelte +31 -0
  155. package/dist/components/tooltip/TooltipTest.svelte.d.ts +11 -0
  156. package/dist/fonts/index.js +1 -1
  157. package/dist/index.d.ts +0 -1
  158. package/dist/index.js +0 -1
  159. package/dist/notifications.d.ts +1 -4
  160. package/dist/notifications.js +1 -1
  161. package/dist/tailwind-safelist.js +406 -406
  162. package/dist/tailwind.preset.js +10 -10
  163. package/dist/tokens/colors.js +18 -18
  164. package/dist/tokens/typography.js +6 -6
  165. package/dist/tokens.js +19 -19
  166. package/dist/types/fonts.d.ts +2 -2
  167. package/package.json +199 -204
  168. package/dist/components/select/Select.svelte +0 -139
  169. package/dist/components/select/Select.svelte.d.ts +0 -60
  170. package/dist/components/select-new/Select.stories.svelte +0 -219
  171. package/dist/components/select-new/Select.stories.svelte.d.ts +0 -19
  172. package/dist/components/select-new/components/Group.svelte +0 -24
  173. package/dist/components/select-new/components/MultiSelectTrigger.svelte +0 -66
  174. package/dist/components/select-new/components/SelectContent.svelte +0 -33
  175. package/dist/components/select-new/components/SelectGroupHeading.svelte +0 -19
  176. package/dist/components/select-new/components/SelectItem.svelte +0 -39
  177. package/dist/components/select-new/components/SelectTrigger.svelte +0 -48
  178. package/dist/components/select-new/index.d.ts +0 -10
  179. package/dist/components/select-new/index.js +0 -12
  180. /package/dist/components/{select-new → select}/components/Group.svelte.d.ts +0 -0
  181. /package/dist/components/{select-new → select}/components/MultiSelectTrigger.svelte.d.ts +0 -0
  182. /package/dist/components/{select-new → select}/components/SelectContent.svelte.d.ts +0 -0
  183. /package/dist/components/{select-new → select}/components/SelectGroupHeading.svelte.d.ts +0 -0
  184. /package/dist/components/{select-new → select}/components/SelectItem.svelte.d.ts +0 -0
  185. /package/dist/components/{select-new → select}/components/SelectTrigger.svelte.d.ts +0 -0
  186. /package/dist/components/{select-new → select}/types.d.ts +0 -0
  187. /package/dist/components/{select-new → select}/types.js +0 -0
package/dist/components/status-badge/StatusBadge.stories.svelte CHANGED
@@ -1,393 +1,393 @@
1
1
  <script module lang="ts">
2
- import StatusBadge from '../status-badge/StatusBadge.svelte';
3
- import Tooltip from '../tooltip/Tooltip.svelte';
4
- import ProgressCircle from '../progress-circle/ProgressCircle.svelte';
5
- import { defineMeta } from '@storybook/addon-svelte-csf';
6
- import { Icon } from '../icons';
2
+ import StatusBadge from '../status-badge/StatusBadge.svelte';
3
+ import Tooltip from '../tooltip/Tooltip.svelte';
4
+ import ProgressCircle from '../progress-circle/ProgressCircle.svelte';
5
+ import { defineMeta } from '@storybook/addon-svelte-csf';
6
+ import { Icon } from '../icons';
7
7
 
8
- const { Story } = defineMeta({
9
- component: StatusBadge,
10
- title: 'Design System/StatusBadge',
11
- tags: ['autodocs']
12
- });
8
+ const { Story } = defineMeta({
9
+ component: StatusBadge,
10
+ title: 'Design System/StatusBadge',
11
+ tags: ['autodocs'],
12
+ });
13
13
 
14
- let calculated_progress = 32;
14
+ let calculated_progress = 32;
15
15
  </script>
16
16
 
17
17
  <Story name="Neutral" asChild>
18
- <p class="font-mono text-xs">Medium:</p>
19
- <div class="flex flex-row gap-4">
20
- <div class="flex flex-row gap-1">
21
- <StatusBadge type="neutral">
22
- {#snippet icon()}
23
- <Icon iconName="SpinnerGap" />
24
- {/snippet}
25
- {#snippet content()}
26
- <div>Pending</div>
27
- {/snippet}
28
- </StatusBadge>
29
- <StatusBadge type="neutral">
30
- {#snippet icon()}
31
- <Icon iconName="SpinnerGap" />
32
- {/snippet}
33
- </StatusBadge>
34
- </div>
35
- <div class="flex flex-row gap-1">
36
- <StatusBadge type="neutral">
37
- {#snippet icon()}
38
- <Icon iconName="Moon" />
39
- {/snippet}
40
- {#snippet content()}
41
- <div>Idle</div>
42
- {/snippet}
43
- </StatusBadge>
44
- <StatusBadge type="neutral">
45
- {#snippet icon()}
46
- <Icon iconName="Moon" />
47
- {/snippet}
48
- </StatusBadge>
49
- </div>
50
- </div>
51
- <br />
52
- <p class="font-mono text-xs">Small:</p>
53
- <div class="flex flex-row gap-10">
54
- <div class="flex flex-row gap-1">
55
- <StatusBadge type="neutral" size="sm">
56
- {#snippet icon()}
57
- <Icon iconName="SpinnerGap" />
58
- {/snippet}
59
- {#snippet content()}
60
- <div>Pending</div>
61
- {/snippet}
62
- </StatusBadge>
63
- <StatusBadge type="neutral" size="sm">
64
- {#snippet icon()}
65
- <Icon iconName="SpinnerGap" />
66
- {/snippet}
67
- </StatusBadge>
68
- </div>
69
- <div class="flex flex-row gap-1">
70
- <StatusBadge type="neutral" size="sm">
71
- {#snippet icon()}
72
- <Icon iconName="Moon" />
73
- {/snippet}
74
- {#snippet content()}
75
- <div>Idle</div>
76
- {/snippet}
77
- </StatusBadge>
78
- <StatusBadge type="neutral" size="sm">
79
- {#snippet icon()}
80
- <Icon iconName="Moon" />
81
- {/snippet}
82
- </StatusBadge>
83
- </div>
84
- </div>
18
+ <p class="font-mono text-xs">Medium:</p>
19
+ <div class="flex flex-row gap-4">
20
+ <div class="flex flex-row gap-1">
21
+ <StatusBadge type="neutral">
22
+ {#snippet icon()}
23
+ <Icon iconName="SpinnerGap" />
24
+ {/snippet}
25
+ {#snippet content()}
26
+ <div>Pending</div>
27
+ {/snippet}
28
+ </StatusBadge>
29
+ <StatusBadge type="neutral">
30
+ {#snippet icon()}
31
+ <Icon iconName="SpinnerGap" />
32
+ {/snippet}
33
+ </StatusBadge>
34
+ </div>
35
+ <div class="flex flex-row gap-1">
36
+ <StatusBadge type="neutral">
37
+ {#snippet icon()}
38
+ <Icon iconName="Moon" />
39
+ {/snippet}
40
+ {#snippet content()}
41
+ <div>Idle</div>
42
+ {/snippet}
43
+ </StatusBadge>
44
+ <StatusBadge type="neutral">
45
+ {#snippet icon()}
46
+ <Icon iconName="Moon" />
47
+ {/snippet}
48
+ </StatusBadge>
49
+ </div>
50
+ </div>
51
+ <br />
52
+ <p class="font-mono text-xs">Small:</p>
53
+ <div class="flex flex-row gap-10">
54
+ <div class="flex flex-row gap-1">
55
+ <StatusBadge type="neutral" size="sm">
56
+ {#snippet icon()}
57
+ <Icon iconName="SpinnerGap" />
58
+ {/snippet}
59
+ {#snippet content()}
60
+ <div>Pending</div>
61
+ {/snippet}
62
+ </StatusBadge>
63
+ <StatusBadge type="neutral" size="sm">
64
+ {#snippet icon()}
65
+ <Icon iconName="SpinnerGap" />
66
+ {/snippet}
67
+ </StatusBadge>
68
+ </div>
69
+ <div class="flex flex-row gap-1">
70
+ <StatusBadge type="neutral" size="sm">
71
+ {#snippet icon()}
72
+ <Icon iconName="Moon" />
73
+ {/snippet}
74
+ {#snippet content()}
75
+ <div>Idle</div>
76
+ {/snippet}
77
+ </StatusBadge>
78
+ <StatusBadge type="neutral" size="sm">
79
+ {#snippet icon()}
80
+ <Icon iconName="Moon" />
81
+ {/snippet}
82
+ </StatusBadge>
83
+ </div>
84
+ </div>
85
85
  </Story>
86
86
 
87
87
  <Story name="Success" asChild>
88
- <p class="font-mono text-xs">Medium:</p>
89
- <div class="flex flex-row gap-4">
90
- <div class="flex flex-row gap-1">
91
- <Tooltip>
92
- {#snippet trigger()}
93
- <div>
94
- <StatusBadge type="success">
95
- {#snippet icon()}
96
- <Icon iconName="CheckCircle" />
97
- {/snippet}
98
- {#snippet content()}
99
- <div>Completed</div>
100
- {/snippet}
101
- </StatusBadge>
102
- </div>
103
- {/snippet}
104
- {#snippet content()}
105
- <div class="flex flex-col text-left">
106
- <p class="font-bold">Job completed</p>
107
- <p class="text-xs">8/30/2024, 11:07 AM</p>
108
- </div>
109
- {/snippet}
110
- </Tooltip>
111
- <StatusBadge type="success">
112
- {#snippet icon()}
113
- <Icon iconName="CheckCircle" weight="fill" />
114
- {/snippet}
115
- </StatusBadge>
116
- </div>
117
- <div class="flex flex-row gap-1">
118
- <Tooltip>
119
- {#snippet trigger()}
120
- <div>
121
- <StatusBadge type="success">
122
- {#snippet icon()}
123
- <Icon iconName="StopCircle" />
124
- {/snippet}
125
- {#snippet content()}
126
- <div>Stopped</div>
127
- {/snippet}
128
- </StatusBadge>
129
- </div>
130
- {/snippet}
131
- {#snippet content()}
132
- <div class="flex flex-col text-left">
133
- <p class="font-bold">Job stopped</p>
134
- <p class="text-xs">8/30/2024, 11:07 AM</p>
135
- </div>
136
- {/snippet}
137
- </Tooltip>
138
- <StatusBadge type="success">
139
- {#snippet icon()}
140
- <Icon iconName="StopCircle" />
141
- {/snippet}
142
- </StatusBadge>
143
- </div>
144
- </div>
145
- <br />
146
- <p class="font-mono text-xs">Small:</p>
147
- <div class="flex flex-row gap-10">
148
- <div class="flex flex-row gap-1">
149
- <Tooltip>
150
- {#snippet trigger()}
151
- <StatusBadge type="success" size="sm">
152
- {#snippet icon()}
153
- <Icon iconName="CheckCircle" weight="fill" />
154
- {/snippet}
155
- {#snippet content()}
156
- <div>Completed</div>
157
- {/snippet}
158
- </StatusBadge>
159
- {/snippet}
160
- {#snippet content()}
161
- <div class="flex flex-col text-left">
162
- <p class="font-bold">Job completed</p>
163
- <p class="text-xs">8/30/2024, 11:07 AM</p>
164
- </div>
165
- {/snippet}
166
- </Tooltip>
167
- <StatusBadge type="success" size="sm">
168
- {#snippet icon()}
169
- <Icon iconName="CheckCircle" weight="fill" />
170
- {/snippet}
171
- </StatusBadge>
172
- </div>
173
- <div class="flex flex-row gap-1">
174
- <Tooltip>
175
- {#snippet trigger()}
176
- <StatusBadge type="success" size="sm">
177
- {#snippet icon()}
178
- <Icon iconName="StopCircle" />
179
- {/snippet}
180
- {#snippet content()}
181
- <div>Stopped</div>
182
- {/snippet}
183
- </StatusBadge>
184
- {/snippet}
185
- {#snippet content()}
186
- <div class="flex flex-col text-left">
187
- <p class="font-bold">Job stopped</p>
188
- <p class="text-xs">8/30/2024, 11:07 AM</p>
189
- </div>
190
- {/snippet}
191
- </Tooltip>
192
- <StatusBadge type="success" size="sm">
193
- {#snippet icon()}
194
- <Icon iconName="StopCircle" />
195
- {/snippet}
196
- </StatusBadge>
197
- </div>
198
- </div>
88
+ <p class="font-mono text-xs">Medium:</p>
89
+ <div class="flex flex-row gap-4">
90
+ <div class="flex flex-row gap-1">
91
+ <Tooltip>
92
+ {#snippet trigger()}
93
+ <div>
94
+ <StatusBadge type="success">
95
+ {#snippet icon()}
96
+ <Icon iconName="CheckCircle" />
97
+ {/snippet}
98
+ {#snippet content()}
99
+ <div>Completed</div>
100
+ {/snippet}
101
+ </StatusBadge>
102
+ </div>
103
+ {/snippet}
104
+ {#snippet content()}
105
+ <div class="flex flex-col text-left">
106
+ <p class="font-bold">Job completed</p>
107
+ <p class="text-xs">8/30/2024, 11:07 AM</p>
108
+ </div>
109
+ {/snippet}
110
+ </Tooltip>
111
+ <StatusBadge type="success">
112
+ {#snippet icon()}
113
+ <Icon iconName="CheckCircle" weight="fill" />
114
+ {/snippet}
115
+ </StatusBadge>
116
+ </div>
117
+ <div class="flex flex-row gap-1">
118
+ <Tooltip>
119
+ {#snippet trigger()}
120
+ <div>
121
+ <StatusBadge type="success">
122
+ {#snippet icon()}
123
+ <Icon iconName="StopCircle" />
124
+ {/snippet}
125
+ {#snippet content()}
126
+ <div>Stopped</div>
127
+ {/snippet}
128
+ </StatusBadge>
129
+ </div>
130
+ {/snippet}
131
+ {#snippet content()}
132
+ <div class="flex flex-col text-left">
133
+ <p class="font-bold">Job stopped</p>
134
+ <p class="text-xs">8/30/2024, 11:07 AM</p>
135
+ </div>
136
+ {/snippet}
137
+ </Tooltip>
138
+ <StatusBadge type="success">
139
+ {#snippet icon()}
140
+ <Icon iconName="StopCircle" />
141
+ {/snippet}
142
+ </StatusBadge>
143
+ </div>
144
+ </div>
145
+ <br />
146
+ <p class="font-mono text-xs">Small:</p>
147
+ <div class="flex flex-row gap-10">
148
+ <div class="flex flex-row gap-1">
149
+ <Tooltip>
150
+ {#snippet trigger()}
151
+ <StatusBadge type="success" size="sm">
152
+ {#snippet icon()}
153
+ <Icon iconName="CheckCircle" weight="fill" />
154
+ {/snippet}
155
+ {#snippet content()}
156
+ <div>Completed</div>
157
+ {/snippet}
158
+ </StatusBadge>
159
+ {/snippet}
160
+ {#snippet content()}
161
+ <div class="flex flex-col text-left">
162
+ <p class="font-bold">Job completed</p>
163
+ <p class="text-xs">8/30/2024, 11:07 AM</p>
164
+ </div>
165
+ {/snippet}
166
+ </Tooltip>
167
+ <StatusBadge type="success" size="sm">
168
+ {#snippet icon()}
169
+ <Icon iconName="CheckCircle" weight="fill" />
170
+ {/snippet}
171
+ </StatusBadge>
172
+ </div>
173
+ <div class="flex flex-row gap-1">
174
+ <Tooltip>
175
+ {#snippet trigger()}
176
+ <StatusBadge type="success" size="sm">
177
+ {#snippet icon()}
178
+ <Icon iconName="StopCircle" />
179
+ {/snippet}
180
+ {#snippet content()}
181
+ <div>Stopped</div>
182
+ {/snippet}
183
+ </StatusBadge>
184
+ {/snippet}
185
+ {#snippet content()}
186
+ <div class="flex flex-col text-left">
187
+ <p class="font-bold">Job stopped</p>
188
+ <p class="text-xs">8/30/2024, 11:07 AM</p>
189
+ </div>
190
+ {/snippet}
191
+ </Tooltip>
192
+ <StatusBadge type="success" size="sm">
193
+ {#snippet icon()}
194
+ <Icon iconName="StopCircle" />
195
+ {/snippet}
196
+ </StatusBadge>
197
+ </div>
198
+ </div>
199
199
  </Story>
200
200
 
201
201
  <Story name="Progress" asChild>
202
- <p class="font-mono text-xs">Medium:</p>
203
- <div class="flex flex-row gap-1">
204
- <Tooltip>
205
- {#snippet trigger()}
206
- <StatusBadge type="progress">
207
- {#snippet icon()}
208
- <ProgressCircle progress={calculated_progress} size="md" />
209
- {/snippet}
210
- {#snippet content()}
211
- <div>Running</div>
212
- {/snippet}
213
- {#snippet progress()}
214
- <div>{calculated_progress}%</div>
215
- {/snippet}
216
- </StatusBadge>
217
- {/snippet}
218
- {#snippet content()}
219
- <div class="flex flex-col text-left">
220
- <p class="font-bold">Job running</p>
221
- <p class="text-xs">1d 3h 2m left</p>
222
- </div>
223
- {/snippet}
224
- </Tooltip>
202
+ <p class="font-mono text-xs">Medium:</p>
203
+ <div class="flex flex-row gap-1">
204
+ <Tooltip>
205
+ {#snippet trigger()}
206
+ <StatusBadge type="progress">
207
+ {#snippet icon()}
208
+ <ProgressCircle progress={calculated_progress} size="md" />
209
+ {/snippet}
210
+ {#snippet content()}
211
+ <div>Running</div>
212
+ {/snippet}
213
+ {#snippet progress()}
214
+ <div>{calculated_progress}%</div>
215
+ {/snippet}
216
+ </StatusBadge>
217
+ {/snippet}
218
+ {#snippet content()}
219
+ <div class="flex flex-col text-left">
220
+ <p class="font-bold">Job running</p>
221
+ <p class="text-xs">1d 3h 2m left</p>
222
+ </div>
223
+ {/snippet}
224
+ </Tooltip>
225
225
 
226
- <StatusBadge type="progress">
227
- {#snippet icon()}
228
- <ProgressCircle progress={calculated_progress} size="md" />
229
- {/snippet}
230
- {#snippet progress()}
231
- <div>{calculated_progress}%</div>
232
- {/snippet}
233
- </StatusBadge>
234
- </div>
235
- <br />
236
- <p class="font-mono text-xs">Small:</p>
237
- <div class="flex flex-row gap-1">
238
- <Tooltip>
239
- {#snippet trigger()}
240
- <StatusBadge type="progress" size="sm">
241
- {#snippet icon()}
242
- <ProgressCircle progress={calculated_progress} size="sm" />
243
- {/snippet}
244
- {#snippet content()}
245
- <div>Running</div>
246
- {/snippet}
247
- {#snippet progress()}
248
- <div>{calculated_progress}%</div>
249
- {/snippet}
250
- </StatusBadge>
251
- {/snippet}
252
- {#snippet content()}
253
- <div class="flex flex-col text-left">
254
- <p class="font-bold">Job running</p>
255
- <p class="text-xs">1d 3h 2m left</p>
256
- </div>
257
- {/snippet}
258
- </Tooltip>
226
+ <StatusBadge type="progress">
227
+ {#snippet icon()}
228
+ <ProgressCircle progress={calculated_progress} size="md" />
229
+ {/snippet}
230
+ {#snippet progress()}
231
+ <div>{calculated_progress}%</div>
232
+ {/snippet}
233
+ </StatusBadge>
234
+ </div>
235
+ <br />
236
+ <p class="font-mono text-xs">Small:</p>
237
+ <div class="flex flex-row gap-1">
238
+ <Tooltip>
239
+ {#snippet trigger()}
240
+ <StatusBadge type="progress" size="sm">
241
+ {#snippet icon()}
242
+ <ProgressCircle progress={calculated_progress} size="sm" />
243
+ {/snippet}
244
+ {#snippet content()}
245
+ <div>Running</div>
246
+ {/snippet}
247
+ {#snippet progress()}
248
+ <div>{calculated_progress}%</div>
249
+ {/snippet}
250
+ </StatusBadge>
251
+ {/snippet}
252
+ {#snippet content()}
253
+ <div class="flex flex-col text-left">
254
+ <p class="font-bold">Job running</p>
255
+ <p class="text-xs">1d 3h 2m left</p>
256
+ </div>
257
+ {/snippet}
258
+ </Tooltip>
259
259
 
260
- <StatusBadge type="progress" size="sm">
261
- {#snippet icon()}
262
- <ProgressCircle progress={calculated_progress} size="sm" />
263
- {/snippet}
264
- {#snippet progress()}
265
- <div>{calculated_progress}%</div>
266
- {/snippet}
267
- </StatusBadge>
268
- </div>
260
+ <StatusBadge type="progress" size="sm">
261
+ {#snippet icon()}
262
+ <ProgressCircle progress={calculated_progress} size="sm" />
263
+ {/snippet}
264
+ {#snippet progress()}
265
+ <div>{calculated_progress}%</div>
266
+ {/snippet}
267
+ </StatusBadge>
268
+ </div>
269
269
  </Story>
270
270
 
271
271
  <Story name="Warning" asChild>
272
- <p class="font-mono text-xs">Medium:</p>
273
- <div class="flex flex-row gap-1">
274
- <Tooltip>
275
- {#snippet trigger()}
276
- <StatusBadge type="warning">
277
- {#snippet icon()}
278
- <Icon iconName="WifiSlash" />
279
- {/snippet}
280
- {#snippet content()}
281
- <div>Offline</div>
282
- {/snippet}
283
- </StatusBadge>
284
- {/snippet}
285
- {#snippet content()}
286
- <div class="flex flex-col text-left">
287
- <p class="font-bold">Device is offline</p>
288
- <p class="text-xs">Connect to the internet to start a Job</p>
289
- </div>
290
- {/snippet}
291
- </Tooltip>
272
+ <p class="font-mono text-xs">Medium:</p>
273
+ <div class="flex flex-row gap-1">
274
+ <Tooltip>
275
+ {#snippet trigger()}
276
+ <StatusBadge type="warning">
277
+ {#snippet icon()}
278
+ <Icon iconName="WifiSlash" />
279
+ {/snippet}
280
+ {#snippet content()}
281
+ <div>Offline</div>
282
+ {/snippet}
283
+ </StatusBadge>
284
+ {/snippet}
285
+ {#snippet content()}
286
+ <div class="flex flex-col text-left">
287
+ <p class="font-bold">Device is offline</p>
288
+ <p class="text-xs">Connect to the internet to start a Job</p>
289
+ </div>
290
+ {/snippet}
291
+ </Tooltip>
292
292
 
293
- <StatusBadge type="warning">
294
- {#snippet icon()}
295
- <Icon iconName="WifiSlash" />
296
- {/snippet}
297
- </StatusBadge>
298
- </div>
299
- <br />
300
- <p class="font-mono text-xs">Small:</p>
301
- <div class="flex flex-row gap-1">
302
- <Tooltip>
303
- {#snippet trigger()}
304
- <StatusBadge type="warning" size="sm">
305
- {#snippet icon()}
306
- <Icon iconName="WifiSlash" />
307
- {/snippet}
308
- {#snippet content()}
309
- <div>Offline</div>
310
- {/snippet}
311
- </StatusBadge>
312
- {/snippet}
313
- {#snippet content()}
314
- <div class="flex flex-col text-left">
315
- <p class="font-bold">Device is offline</p>
316
- <p class="text-xs">Connect to the internet to start a Job</p>
317
- </div>
318
- {/snippet}
319
- </Tooltip>
293
+ <StatusBadge type="warning">
294
+ {#snippet icon()}
295
+ <Icon iconName="WifiSlash" />
296
+ {/snippet}
297
+ </StatusBadge>
298
+ </div>
299
+ <br />
300
+ <p class="font-mono text-xs">Small:</p>
301
+ <div class="flex flex-row gap-1">
302
+ <Tooltip>
303
+ {#snippet trigger()}
304
+ <StatusBadge type="warning" size="sm">
305
+ {#snippet icon()}
306
+ <Icon iconName="WifiSlash" />
307
+ {/snippet}
308
+ {#snippet content()}
309
+ <div>Offline</div>
310
+ {/snippet}
311
+ </StatusBadge>
312
+ {/snippet}
313
+ {#snippet content()}
314
+ <div class="flex flex-col text-left">
315
+ <p class="font-bold">Device is offline</p>
316
+ <p class="text-xs">Connect to the internet to start a Job</p>
317
+ </div>
318
+ {/snippet}
319
+ </Tooltip>
320
320
 
321
- <StatusBadge type="warning" size="sm">
322
- {#snippet icon()}
323
- <Icon iconName="WifiSlash" />
324
- {/snippet}
325
- </StatusBadge>
326
- </div>
321
+ <StatusBadge type="warning" size="sm">
322
+ {#snippet icon()}
323
+ <Icon iconName="WifiSlash" />
324
+ {/snippet}
325
+ </StatusBadge>
326
+ </div>
327
327
  </Story>
328
328
 
329
329
  <Story name="Error" asChild>
330
- <p class="font-mono text-xs">Medium:</p>
331
- <div class="flex flex-row gap-1">
332
- <Tooltip>
333
- {#snippet trigger()}
334
- <StatusBadge type="error">
335
- {#snippet icon()}
336
- <Icon iconName="WarningCircle" weight="fill" />
337
- {/snippet}
338
- {#snippet content()}
339
- <div>Failed</div>
340
- {/snippet}
341
- </StatusBadge>
342
- {/snippet}
343
- {#snippet content()}
344
- <div class="flex flex-col text-left">
345
- <p class="font-bold">Job failed</p>
346
- <p class="text-xs">8/30/2024, 11:07 AM</p>
347
- </div>
348
- {/snippet}</Tooltip
349
- >
330
+ <p class="font-mono text-xs">Medium:</p>
331
+ <div class="flex flex-row gap-1">
332
+ <Tooltip>
333
+ {#snippet trigger()}
334
+ <StatusBadge type="error">
335
+ {#snippet icon()}
336
+ <Icon iconName="WarningCircle" weight="fill" />
337
+ {/snippet}
338
+ {#snippet content()}
339
+ <div>Failed</div>
340
+ {/snippet}
341
+ </StatusBadge>
342
+ {/snippet}
343
+ {#snippet content()}
344
+ <div class="flex flex-col text-left">
345
+ <p class="font-bold">Job failed</p>
346
+ <p class="text-xs">8/30/2024, 11:07 AM</p>
347
+ </div>
348
+ {/snippet}</Tooltip
349
+ >
350
350
 
351
- <StatusBadge type="error">
352
- {#snippet icon()}
353
- <Icon iconName="WarningCircle" weight="fill" />
354
- {/snippet}
355
- </StatusBadge>
356
- </div>
357
- <br />
358
- <p class="font-mono text-xs">Small:</p>
359
- <div class="flex flex-row gap-1">
360
- <Tooltip>
361
- {#snippet trigger()}
362
- <StatusBadge type="error" size="sm">
363
- {#snippet icon()}
364
- <Icon iconName="WarningCircle" weight="fill" />
365
- {/snippet}
366
- {#snippet content()}
367
- <div>Failed</div>
368
- {/snippet}
369
- </StatusBadge>
370
- {/snippet}
371
- {#snippet content()}
372
- <div class="flex flex-col text-left">
373
- <p class="font-bold">Job failed</p>
374
- <p class="text-xs">8/30/2024, 11:07 AM</p>
375
- </div>
376
- {/snippet}</Tooltip
377
- >
351
+ <StatusBadge type="error">
352
+ {#snippet icon()}
353
+ <Icon iconName="WarningCircle" weight="fill" />
354
+ {/snippet}
355
+ </StatusBadge>
356
+ </div>
357
+ <br />
358
+ <p class="font-mono text-xs">Small:</p>
359
+ <div class="flex flex-row gap-1">
360
+ <Tooltip>
361
+ {#snippet trigger()}
362
+ <StatusBadge type="error" size="sm">
363
+ {#snippet icon()}
364
+ <Icon iconName="WarningCircle" weight="fill" />
365
+ {/snippet}
366
+ {#snippet content()}
367
+ <div>Failed</div>
368
+ {/snippet}
369
+ </StatusBadge>
370
+ {/snippet}
371
+ {#snippet content()}
372
+ <div class="flex flex-col text-left">
373
+ <p class="font-bold">Job failed</p>
374
+ <p class="text-xs">8/30/2024, 11:07 AM</p>
375
+ </div>
376
+ {/snippet}</Tooltip
377
+ >
378
378
 
379
- <StatusBadge type="error" size="sm">
380
- {#snippet icon()}
381
- <Icon iconName="WarningCircle" weight="fill" />
382
- {/snippet}
383
- </StatusBadge>
384
- </div>
379
+ <StatusBadge type="error" size="sm">
380
+ {#snippet icon()}
381
+ <Icon iconName="WarningCircle" weight="fill" />
382
+ {/snippet}
383
+ </StatusBadge>
384
+ </div>
385
385
  </Story>
386
386
 
387
387
  <Story name="Icon only" asChild>
388
- <StatusBadge type="neutral" iconOnly>
389
- {#snippet icon()}
390
- <Icon iconName="SpinnerGap" />
391
- {/snippet}
392
- </StatusBadge>
388
+ <StatusBadge type="neutral" iconOnly>
389
+ {#snippet icon()}
390
+ <Icon iconName="SpinnerGap" />
391
+ {/snippet}
392
+ </StatusBadge>
393
393
  </Story>