@reshape-biotech/design-system 2.7.38 → 2.7.39
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.
|
@@ -486,6 +486,80 @@
|
|
|
486
486
|
</div>
|
|
487
487
|
</Story>
|
|
488
488
|
|
|
489
|
+
<Story name="Init" asChild>
|
|
490
|
+
<p class="font-mono text-xs">Medium:</p>
|
|
491
|
+
<div class="flex flex-row gap-1">
|
|
492
|
+
<Tooltip>
|
|
493
|
+
{#snippet trigger()}
|
|
494
|
+
<StatusBadge type="init">
|
|
495
|
+
{#snippet icon()}
|
|
496
|
+
<Icon>
|
|
497
|
+
{#snippet children(props)}
|
|
498
|
+
<SpinnerGap {...props} />
|
|
499
|
+
{/snippet}
|
|
500
|
+
</Icon>
|
|
501
|
+
{/snippet}
|
|
502
|
+
{#snippet content()}
|
|
503
|
+
<div>Initializing</div>
|
|
504
|
+
{/snippet}
|
|
505
|
+
</StatusBadge>
|
|
506
|
+
{/snippet}
|
|
507
|
+
{#snippet content()}
|
|
508
|
+
<div class="flex flex-col text-left">
|
|
509
|
+
<p class="font-bold">Device initializing</p>
|
|
510
|
+
<p class="text-xs">Will be ready soon</p>
|
|
511
|
+
</div>
|
|
512
|
+
{/snippet}</Tooltip
|
|
513
|
+
>
|
|
514
|
+
|
|
515
|
+
<StatusBadge type="init">
|
|
516
|
+
{#snippet icon()}
|
|
517
|
+
<Icon>
|
|
518
|
+
{#snippet children(props)}
|
|
519
|
+
<SpinnerGap {...props} />
|
|
520
|
+
{/snippet}
|
|
521
|
+
</Icon>
|
|
522
|
+
{/snippet}
|
|
523
|
+
</StatusBadge>
|
|
524
|
+
</div>
|
|
525
|
+
<br />
|
|
526
|
+
<p class="font-mono text-xs">Small:</p>
|
|
527
|
+
<div class="flex flex-row gap-1">
|
|
528
|
+
<Tooltip>
|
|
529
|
+
{#snippet trigger()}
|
|
530
|
+
<StatusBadge type="init" size="sm">
|
|
531
|
+
{#snippet icon()}
|
|
532
|
+
<Icon>
|
|
533
|
+
{#snippet children(props)}
|
|
534
|
+
<SpinnerGap {...props} />
|
|
535
|
+
{/snippet}
|
|
536
|
+
</Icon>
|
|
537
|
+
{/snippet}
|
|
538
|
+
{#snippet content()}
|
|
539
|
+
<div>Initializing</div>
|
|
540
|
+
{/snippet}
|
|
541
|
+
</StatusBadge>
|
|
542
|
+
{/snippet}
|
|
543
|
+
{#snippet content()}
|
|
544
|
+
<div class="flex flex-col text-left">
|
|
545
|
+
<p class="font-bold">Device initializing</p>
|
|
546
|
+
<p class="text-xs">Will be ready soon</p>
|
|
547
|
+
</div>
|
|
548
|
+
{/snippet}</Tooltip
|
|
549
|
+
>
|
|
550
|
+
|
|
551
|
+
<StatusBadge type="init" size="sm">
|
|
552
|
+
{#snippet icon()}
|
|
553
|
+
<Icon>
|
|
554
|
+
{#snippet children(props)}
|
|
555
|
+
<SpinnerGap {...props} />
|
|
556
|
+
{/snippet}
|
|
557
|
+
</Icon>
|
|
558
|
+
{/snippet}
|
|
559
|
+
</StatusBadge>
|
|
560
|
+
</div>
|
|
561
|
+
</Story>
|
|
562
|
+
|
|
489
563
|
<Story name="Icon only" asChild>
|
|
490
564
|
<StatusBadge type="neutral" iconOnly>
|
|
491
565
|
{#snippet icon()}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
interface Props {
|
|
6
6
|
// we can add dynamic classes because they are safelisted in tailwind-safelist.txt
|
|
7
|
-
type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
|
|
7
|
+
type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error' | 'init';
|
|
8
8
|
size?: 'md' | 'sm';
|
|
9
9
|
content?: Snippet;
|
|
10
10
|
progress?: Snippet;
|
|
@@ -145,6 +145,16 @@
|
|
|
145
145
|
--tw-text-opacity: 1;
|
|
146
146
|
color: rgb(235 70 71 / var(--tw-text-opacity, 1))
|
|
147
147
|
}
|
|
148
|
+
.badge-init {
|
|
149
|
+
background-color: #ff7a001A
|
|
150
|
+
}
|
|
151
|
+
.badge-init:hover {
|
|
152
|
+
background-color: #ff7a0040
|
|
153
|
+
}
|
|
154
|
+
.badge-init .icon {
|
|
155
|
+
--tw-text-opacity: 1;
|
|
156
|
+
color: rgb(255 122 0 / var(--tw-text-opacity, 1))
|
|
157
|
+
}
|
|
148
158
|
|
|
149
159
|
:global(.badge > div) {
|
|
150
160
|
display: flex;
|