@reshape-biotech/design-system 1.2.5 → 1.2.7

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 (175) hide show
  1. package/README.md +3 -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/combobox/Combobox.stories.svelte +412 -412
  19. package/dist/components/combobox/components/combobox-add.svelte +8 -8
  20. package/dist/components/combobox/components/combobox-content.svelte +39 -39
  21. package/dist/components/combobox/components/combobox-indicator.svelte +1 -1
  22. package/dist/components/datepicker/DatePicker.stories.svelte +196 -196
  23. package/dist/components/datepicker/DatePicker.svelte +173 -173
  24. package/dist/components/divider/Divider.stories.svelte +7 -7
  25. package/dist/components/divider/Divider.svelte +9 -9
  26. package/dist/components/drawer/Drawer.stories.svelte +51 -51
  27. package/dist/components/drawer/Drawer.svelte +33 -33
  28. package/dist/components/drawer/DrawerLabel.svelte +10 -10
  29. package/dist/components/dropdown/Dropdown.stories.svelte +210 -210
  30. package/dist/components/dropdown/Dropdown.svelte +57 -57
  31. package/dist/components/dropdown/components/DropdownContent.svelte +16 -16
  32. package/dist/components/dropdown/components/DropdownMenu.svelte +10 -10
  33. package/dist/components/dropdown/components/DropdownTrigger.svelte +37 -37
  34. package/dist/components/dropdown/components/OutlinedButton.svelte +9 -9
  35. package/dist/components/empty-content/EmptyContent.stories.svelte +38 -38
  36. package/dist/components/empty-content/EmptyContent.svelte +12 -12
  37. package/dist/components/graphs/bar-chart/BarChart.stories.svelte +91 -91
  38. package/dist/components/graphs/bar-chart/BarChart.svelte +147 -147
  39. package/dist/components/graphs/bar-chart/StackedBarChart.stories.svelte +57 -57
  40. package/dist/components/graphs/bar-chart/StackedBarChart.svelte +198 -199
  41. package/dist/components/graphs/chart/Chart.stories.svelte +96 -96
  42. package/dist/components/graphs/chart/Chart.svelte +207 -207
  43. package/dist/components/graphs/line/LineChart.stories.svelte +138 -138
  44. package/dist/components/graphs/line/LineChart.svelte +140 -142
  45. package/dist/components/graphs/matrix/Matrix.stories.svelte +117 -117
  46. package/dist/components/graphs/matrix/Matrix.svelte +141 -141
  47. package/dist/components/graphs/multiline/MultiLineChart.stories.svelte +168 -168
  48. package/dist/components/graphs/multiline/MultiLineChart.svelte +236 -236
  49. package/dist/components/graphs/scatterplot/Scatterplot.stories.svelte +84 -84
  50. package/dist/components/graphs/scatterplot/Scatterplot.svelte +302 -302
  51. package/dist/components/graphs/utils/duration.d.ts +1 -0
  52. package/dist/components/graphs/utils/duration.js +33 -0
  53. package/dist/components/graphs/utils/tooltipFormatter.js +1 -1
  54. package/dist/components/icon-button/IconButton.stories.svelte +64 -64
  55. package/dist/components/icon-button/IconButton.svelte +88 -88
  56. package/dist/components/icons/AnalysisIcon.stories.svelte +18 -18
  57. package/dist/components/icons/AnalysisIcon.svelte +96 -96
  58. package/dist/components/icons/Icon.stories.svelte +111 -111
  59. package/dist/components/icons/Icon.svelte +17 -17
  60. package/dist/components/icons/PrincipalIcon.svelte +59 -59
  61. package/dist/components/icons/custom/Halo.svelte +31 -31
  62. package/dist/components/icons/custom/Well.svelte +27 -27
  63. package/dist/components/icons/index.d.ts +3 -2
  64. package/dist/components/icons/index.js +3 -1
  65. package/dist/components/image/Image.svelte +42 -42
  66. package/dist/components/input/Input.stories.svelte +55 -55
  67. package/dist/components/input/Input.svelte +121 -121
  68. package/dist/components/label/Label.stories.svelte +18 -18
  69. package/dist/components/label/Label.svelte +11 -11
  70. package/dist/components/list/List.stories.svelte +84 -84
  71. package/dist/components/list/List.svelte +20 -20
  72. package/dist/components/logo/Logo.stories.svelte +15 -15
  73. package/dist/components/logo/Logo.svelte +30 -30
  74. package/dist/components/manual-cfu-counter/ManualCFUCounter.stories.svelte +102 -102
  75. package/dist/components/manual-cfu-counter/ManualCFUCounter.svelte +557 -565
  76. package/dist/components/manual-cfu-counter/test/ManualCFUCounterTestWrapper.svelte +11 -11
  77. package/dist/components/markdown/Markdown.stories.svelte +10 -10
  78. package/dist/components/markdown/Markdown.svelte +6 -6
  79. package/dist/components/modal/Modal.stories.svelte +29 -29
  80. package/dist/components/modal/Modal.svelte +71 -71
  81. package/dist/components/multi-cfu-counter/MultiCFUCounter.stories.svelte +215 -0
  82. package/dist/components/multi-cfu-counter/MultiCFUCounter.stories.svelte.d.ts +3 -0
  83. package/dist/components/multi-cfu-counter/MultiCFUCounter.svelte +662 -0
  84. package/dist/components/multi-cfu-counter/MultiCFUCounter.svelte.d.ts +32 -0
  85. package/dist/components/multi-cfu-counter/index.d.ts +1 -0
  86. package/dist/components/multi-cfu-counter/index.js +1 -0
  87. package/dist/components/multi-cfu-counter/test/MultiCFUCounterTestWrapper.svelte +28 -0
  88. package/dist/components/multi-cfu-counter/test/MultiCFUCounterTestWrapper.svelte.d.ts +20 -0
  89. package/dist/components/notification-popup/NotificationPopup.stories.svelte +18 -18
  90. package/dist/components/notification-popup/NotificationPopup.svelte +26 -26
  91. package/dist/components/notifications/Notifications.stories.svelte +101 -101
  92. package/dist/components/notifications/Notifications.svelte +9 -9
  93. package/dist/components/pill/Pill.stories.svelte +8 -8
  94. package/dist/components/pill/Pill.svelte +27 -27
  95. package/dist/components/progress-circle/ProgressCircle.stories.svelte +8 -8
  96. package/dist/components/progress-circle/ProgressCircle.svelte +54 -54
  97. package/dist/components/required-status-indicator/RequiredStatusIndicator.stories.svelte +18 -18
  98. package/dist/components/required-status-indicator/RequiredStatusIndicator.svelte +14 -14
  99. package/dist/components/segmented-control-buttons/ControlButton.svelte +36 -36
  100. package/dist/components/segmented-control-buttons/SegmentedControlButtons.stories.svelte +35 -35
  101. package/dist/components/segmented-control-buttons/SegmentedControlButtons.svelte +13 -13
  102. package/dist/components/select/Select.stories.svelte +77 -77
  103. package/dist/components/select/Select.svelte +114 -114
  104. package/dist/components/select-new/Select.stories.svelte +188 -188
  105. package/dist/components/select-new/components/Group.svelte +17 -17
  106. package/dist/components/select-new/components/MultiSelectTrigger.svelte +57 -57
  107. package/dist/components/select-new/components/SelectContent.svelte +22 -22
  108. package/dist/components/select-new/components/SelectGroupHeading.svelte +10 -10
  109. package/dist/components/select-new/components/SelectItem.svelte +25 -25
  110. package/dist/components/select-new/components/SelectTrigger.svelte +38 -38
  111. package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte +76 -76
  112. package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte.d.ts +1 -1
  113. package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte +53 -53
  114. package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte.d.ts +1 -1
  115. package/dist/components/sjsf-wrappers/sjsfCustomTheme.js +1 -1
  116. package/dist/components/skeleton-loader/SkeletonLoader.stories.svelte +32 -32
  117. package/dist/components/skeleton-loader/SkeletonLoader.svelte +10 -10
  118. package/dist/components/skeleton-loader/StatcardSkeleton.svelte +9 -9
  119. package/dist/components/skeleton-loader/components/Skeleton.svelte +7 -7
  120. package/dist/components/skeleton-loader/components/SkeletonImage.svelte +12 -12
  121. package/dist/components/slider/Slider.stories.svelte +23 -23
  122. package/dist/components/slider/Slider.svelte +107 -107
  123. package/dist/components/spinner/Spinner.stories.svelte +8 -8
  124. package/dist/components/spinner/Spinner.svelte +18 -18
  125. package/dist/components/stat-card/StatCard.stories.svelte +26 -26
  126. package/dist/components/stat-card/StatCard.svelte +128 -128
  127. package/dist/components/status-badge/StatusBadge.stories.svelte +365 -365
  128. package/dist/components/status-badge/StatusBadge.svelte +54 -54
  129. package/dist/components/stepper/Stepper.stories.svelte +219 -219
  130. package/dist/components/stepper/components/stepper-root.svelte +12 -12
  131. package/dist/components/stepper/components/stepper-step.svelte +83 -83
  132. package/dist/components/table/Table.stories.svelte +87 -87
  133. package/dist/components/table/Table.svelte +32 -32
  134. package/dist/components/table/components/TBody.svelte +7 -7
  135. package/dist/components/table/components/THead.svelte +7 -7
  136. package/dist/components/table/components/Td.svelte +8 -8
  137. package/dist/components/table/components/Th.svelte +8 -8
  138. package/dist/components/table/components/Tr.svelte +11 -11
  139. package/dist/components/tabs/Tabs.stories.svelte +20 -20
  140. package/dist/components/tabs/Tabs.svelte +8 -8
  141. package/dist/components/tabs/components/Content.svelte +8 -8
  142. package/dist/components/tabs/components/Tab.svelte +14 -14
  143. package/dist/components/tabs/components/Tabs.svelte +7 -7
  144. package/dist/components/tag/Tag.stories.svelte +57 -57
  145. package/dist/components/tag/Tag.svelte +95 -95
  146. package/dist/components/textarea/Textarea.stories.svelte +70 -70
  147. package/dist/components/textarea/Textarea.svelte +76 -76
  148. package/dist/components/toast/Toast.stories.svelte +204 -204
  149. package/dist/components/toast/Toast.svelte +53 -53
  150. package/dist/components/toggle/Toggle.stories.svelte +9 -9
  151. package/dist/components/toggle/Toggle.svelte +53 -53
  152. package/dist/components/toggle-icon-button/ToggleIconButton.stories.svelte +152 -152
  153. package/dist/components/toggle-icon-button/ToggleIconButton.svelte +99 -99
  154. package/dist/components/tooltip/Tooltip.stories.svelte +105 -105
  155. package/dist/components/tooltip/Tooltip.svelte +26 -26
  156. package/dist/fonts/index.js +1 -1
  157. package/dist/index.d.ts +4 -1
  158. package/dist/index.js +5 -1
  159. package/dist/notifications.d.ts +1 -4
  160. package/dist/notifications.js +1 -1
  161. package/dist/styles.d.ts +1 -0
  162. package/dist/styles.js +4 -0
  163. package/dist/tailwind-safelist.js +406 -398
  164. package/dist/tailwind.preset.d.ts +4 -0
  165. package/dist/tailwind.preset.js +10 -10
  166. package/dist/tokens/colors.d.ts +246 -0
  167. package/dist/tokens/colors.js +139 -0
  168. package/dist/tokens/index.d.ts +3 -0
  169. package/dist/tokens/index.js +5 -0
  170. package/dist/tokens/typography.d.ts +48 -0
  171. package/dist/tokens/typography.js +48 -0
  172. package/dist/tokens.d.ts +16 -252
  173. package/dist/tokens.js +33 -164
  174. package/dist/types/fonts.d.ts +2 -2
  175. package/package.json +398 -78
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>