@reshape-biotech/design-system 2.4.0 → 2.4.2

package/dist/components/status-badge/StatusBadge.stories.svelte

@@ -1,393 +0,0 @@
-<script module lang="ts">
-  import StatusBadge from '../status-badge/StatusBadge.svelte';
-  import Tooltip from '../tooltip/Tooltip.svelte';
-  import ProgressCircle from '../progress-circle/ProgressCircle.svelte';
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { Icon } from '../icons';
-
-  const { Story } = defineMeta({
-    component: StatusBadge,
-    title: 'Design System/StatusBadge',
-    tags: ['autodocs'],
-  });
-
-  let calculated_progress = 32;
-</script>
-
-<Story name="Neutral" asChild>
-  <p class="font-mono text-xs">Medium:</p>
-  <div class="flex flex-row gap-4">
-    <div class="flex flex-row gap-1">
-      <StatusBadge type="neutral">
-        {#snippet icon()}
-          <Icon iconName="SpinnerGap" />
-        {/snippet}
-        {#snippet content()}
-          <div>Pending</div>
-        {/snippet}
-      </StatusBadge>
-      <StatusBadge type="neutral">
-        {#snippet icon()}
-          <Icon iconName="SpinnerGap" />
-        {/snippet}
-      </StatusBadge>
-    </div>
-    <div class="flex flex-row gap-1">
-      <StatusBadge type="neutral">
-        {#snippet icon()}
-          <Icon iconName="Moon" />
-        {/snippet}
-        {#snippet content()}
-          <div>Idle</div>
-        {/snippet}
-      </StatusBadge>
-      <StatusBadge type="neutral">
-        {#snippet icon()}
-          <Icon iconName="Moon" />
-        {/snippet}
-      </StatusBadge>
-    </div>
-  </div>
-  <br />
-  <p class="font-mono text-xs">Small:</p>
-  <div class="flex flex-row gap-10">
-    <div class="flex flex-row gap-1">
-      <StatusBadge type="neutral" size="sm">
-        {#snippet icon()}
-          <Icon iconName="SpinnerGap" />
-        {/snippet}
-        {#snippet content()}
-          <div>Pending</div>
-        {/snippet}
-      </StatusBadge>
-      <StatusBadge type="neutral" size="sm">
-        {#snippet icon()}
-          <Icon iconName="SpinnerGap" />
-        {/snippet}
-      </StatusBadge>
-    </div>
-    <div class="flex flex-row gap-1">
-      <StatusBadge type="neutral" size="sm">
-        {#snippet icon()}
-          <Icon iconName="Moon" />
-        {/snippet}
-        {#snippet content()}
-          <div>Idle</div>
-        {/snippet}
-      </StatusBadge>
-      <StatusBadge type="neutral" size="sm">
-        {#snippet icon()}
-          <Icon iconName="Moon" />
-        {/snippet}
-      </StatusBadge>
-    </div>
-  </div>
-</Story>
-
-<Story name="Success" asChild>
-  <p class="font-mono text-xs">Medium:</p>
-  <div class="flex flex-row gap-4">
-    <div class="flex flex-row gap-1">
-      <Tooltip>
-        {#snippet trigger()}
-          <div>
-            <StatusBadge type="success">
-              {#snippet icon()}
-                <Icon iconName="CheckCircle" />
-              {/snippet}
-              {#snippet content()}
-                <div>Completed</div>
-              {/snippet}
-            </StatusBadge>
-          </div>
-        {/snippet}
-        {#snippet content()}
-          <div class="flex flex-col text-left">
-            <p class="font-bold">Job completed</p>
-            <p class="text-xs">8/30/2024, 11:07 AM</p>
-          </div>
-        {/snippet}
-      </Tooltip>
-      <StatusBadge type="success">
-        {#snippet icon()}
-          <Icon iconName="CheckCircle" weight="fill" />
-        {/snippet}
-      </StatusBadge>
-    </div>
-    <div class="flex flex-row gap-1">
-      <Tooltip>
-        {#snippet trigger()}
-          <div>
-            <StatusBadge type="success">
-              {#snippet icon()}
-                <Icon iconName="StopCircle" />
-              {/snippet}
-              {#snippet content()}
-                <div>Stopped</div>
-              {/snippet}
-            </StatusBadge>
-          </div>
-        {/snippet}
-        {#snippet content()}
-          <div class="flex flex-col text-left">
-            <p class="font-bold">Job stopped</p>
-            <p class="text-xs">8/30/2024, 11:07 AM</p>
-          </div>
-        {/snippet}
-      </Tooltip>
-      <StatusBadge type="success">
-        {#snippet icon()}
-          <Icon iconName="StopCircle" />
-        {/snippet}
-      </StatusBadge>
-    </div>
-  </div>
-  <br />
-  <p class="font-mono text-xs">Small:</p>
-  <div class="flex flex-row gap-10">
-    <div class="flex flex-row gap-1">
-      <Tooltip>
-        {#snippet trigger()}
-          <StatusBadge type="success" size="sm">
-            {#snippet icon()}
-              <Icon iconName="CheckCircle" weight="fill" />
-            {/snippet}
-            {#snippet content()}
-              <div>Completed</div>
-            {/snippet}
-          </StatusBadge>
-        {/snippet}
-        {#snippet content()}
-          <div class="flex flex-col text-left">
-            <p class="font-bold">Job completed</p>
-            <p class="text-xs">8/30/2024, 11:07 AM</p>
-          </div>
-        {/snippet}
-      </Tooltip>
-      <StatusBadge type="success" size="sm">
-        {#snippet icon()}
-          <Icon iconName="CheckCircle" weight="fill" />
-        {/snippet}
-      </StatusBadge>
-    </div>
-    <div class="flex flex-row gap-1">
-      <Tooltip>
-        {#snippet trigger()}
-          <StatusBadge type="success" size="sm">
-            {#snippet icon()}
-              <Icon iconName="StopCircle" />
-            {/snippet}
-            {#snippet content()}
-              <div>Stopped</div>
-            {/snippet}
-          </StatusBadge>
-        {/snippet}
-        {#snippet content()}
-          <div class="flex flex-col text-left">
-            <p class="font-bold">Job stopped</p>
-            <p class="text-xs">8/30/2024, 11:07 AM</p>
-          </div>
-        {/snippet}
-      </Tooltip>
-      <StatusBadge type="success" size="sm">
-        {#snippet icon()}
-          <Icon iconName="StopCircle" />
-        {/snippet}
-      </StatusBadge>
-    </div>
-  </div>
-</Story>
-
-<Story name="Progress" asChild>
-  <p class="font-mono text-xs">Medium:</p>
-  <div class="flex flex-row gap-1">
-    <Tooltip>
-      {#snippet trigger()}
-        <StatusBadge type="progress">
-          {#snippet icon()}
-            <ProgressCircle progress={calculated_progress} size="md" />
-          {/snippet}
-          {#snippet content()}
-            <div>Running</div>
-          {/snippet}
-          {#snippet progress()}
-            <div>{calculated_progress}%</div>
-          {/snippet}
-        </StatusBadge>
-      {/snippet}
-      {#snippet content()}
-        <div class="flex flex-col text-left">
-          <p class="font-bold">Job running</p>
-          <p class="text-xs">1d 3h 2m left</p>
-        </div>
-      {/snippet}
-    </Tooltip>
-
-    <StatusBadge type="progress">
-      {#snippet icon()}
-        <ProgressCircle progress={calculated_progress} size="md" />
-      {/snippet}
-      {#snippet progress()}
-        <div>{calculated_progress}%</div>
-      {/snippet}
-    </StatusBadge>
-  </div>
-  <br />
-  <p class="font-mono text-xs">Small:</p>
-  <div class="flex flex-row gap-1">
-    <Tooltip>
-      {#snippet trigger()}
-        <StatusBadge type="progress" size="sm">
-          {#snippet icon()}
-            <ProgressCircle progress={calculated_progress} size="sm" />
-          {/snippet}
-          {#snippet content()}
-            <div>Running</div>
-          {/snippet}
-          {#snippet progress()}
-            <div>{calculated_progress}%</div>
-          {/snippet}
-        </StatusBadge>
-      {/snippet}
-      {#snippet content()}
-        <div class="flex flex-col text-left">
-          <p class="font-bold">Job running</p>
-          <p class="text-xs">1d 3h 2m left</p>
-        </div>
-      {/snippet}
-    </Tooltip>
-
-    <StatusBadge type="progress" size="sm">
-      {#snippet icon()}
-        <ProgressCircle progress={calculated_progress} size="sm" />
-      {/snippet}
-      {#snippet progress()}
-        <div>{calculated_progress}%</div>
-      {/snippet}
-    </StatusBadge>
-  </div>
-</Story>
-
-<Story name="Warning" asChild>
-  <p class="font-mono text-xs">Medium:</p>
-  <div class="flex flex-row gap-1">
-    <Tooltip>
-      {#snippet trigger()}
-        <StatusBadge type="warning">
-          {#snippet icon()}
-            <Icon iconName="WifiSlash" />
-          {/snippet}
-          {#snippet content()}
-            <div>Offline</div>
-          {/snippet}
-        </StatusBadge>
-      {/snippet}
-      {#snippet content()}
-        <div class="flex flex-col text-left">
-          <p class="font-bold">Device is offline</p>
-          <p class="text-xs">Connect to the internet to start a Job</p>
-        </div>
-      {/snippet}
-    </Tooltip>
-
-    <StatusBadge type="warning">
-      {#snippet icon()}
-        <Icon iconName="WifiSlash" />
-      {/snippet}
-    </StatusBadge>
-  </div>
-  <br />
-  <p class="font-mono text-xs">Small:</p>
-  <div class="flex flex-row gap-1">
-    <Tooltip>
-      {#snippet trigger()}
-        <StatusBadge type="warning" size="sm">
-          {#snippet icon()}
-            <Icon iconName="WifiSlash" />
-          {/snippet}
-          {#snippet content()}
-            <div>Offline</div>
-          {/snippet}
-        </StatusBadge>
-      {/snippet}
-      {#snippet content()}
-        <div class="flex flex-col text-left">
-          <p class="font-bold">Device is offline</p>
-          <p class="text-xs">Connect to the internet to start a Job</p>
-        </div>
-      {/snippet}
-    </Tooltip>
-
-    <StatusBadge type="warning" size="sm">
-      {#snippet icon()}
-        <Icon iconName="WifiSlash" />
-      {/snippet}
-    </StatusBadge>
-  </div>
-</Story>
-
-<Story name="Error" asChild>
-  <p class="font-mono text-xs">Medium:</p>
-  <div class="flex flex-row gap-1">
-    <Tooltip>
-      {#snippet trigger()}
-        <StatusBadge type="error">
-          {#snippet icon()}
-            <Icon iconName="WarningCircle" weight="fill" />
-          {/snippet}
-          {#snippet content()}
-            <div>Failed</div>
-          {/snippet}
-        </StatusBadge>
-      {/snippet}
-      {#snippet content()}
-        <div class="flex flex-col text-left">
-          <p class="font-bold">Job failed</p>
-          <p class="text-xs">8/30/2024, 11:07 AM</p>
-        </div>
-      {/snippet}</Tooltip
-    >
-
-    <StatusBadge type="error">
-      {#snippet icon()}
-        <Icon iconName="WarningCircle" weight="fill" />
-      {/snippet}
-    </StatusBadge>
-  </div>
-  <br />
-  <p class="font-mono text-xs">Small:</p>
-  <div class="flex flex-row gap-1">
-    <Tooltip>
-      {#snippet trigger()}
-        <StatusBadge type="error" size="sm">
-          {#snippet icon()}
-            <Icon iconName="WarningCircle" weight="fill" />
-          {/snippet}
-          {#snippet content()}
-            <div>Failed</div>
-          {/snippet}
-        </StatusBadge>
-      {/snippet}
-      {#snippet content()}
-        <div class="flex flex-col text-left">
-          <p class="font-bold">Job failed</p>
-          <p class="text-xs">8/30/2024, 11:07 AM</p>
-        </div>
-      {/snippet}</Tooltip
-    >
-
-    <StatusBadge type="error" size="sm">
-      {#snippet icon()}
-        <Icon iconName="WarningCircle" weight="fill" />
-      {/snippet}
-    </StatusBadge>
-  </div>
-</Story>
-
-<Story name="Icon only" asChild>
-  <StatusBadge type="neutral" iconOnly>
-    {#snippet icon()}
-      <Icon iconName="SpinnerGap" />
-    {/snippet}
-  </StatusBadge>
-</Story>

package/dist/components/status-badge/StatusBadge.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import StatusBadge from '../status-badge/StatusBadge.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const StatusBadge: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type StatusBadge = InstanceType<typeof StatusBadge>;
-export default StatusBadge;

package/dist/components/status-badge/StatusBadge.svelte

@@ -1,149 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    // we can add dynamic classes because they are safelisted in tailwind-safelist.txt
-    type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
-    size?: 'md' | 'sm';
-    content?: Snippet;
-    progress?: Snippet;
-    icon?: Snippet;
-    iconOnly?: boolean;
-  }
-
-  let {
-    type = 'neutral',
-    size = 'md',
-    content,
-    progress,
-    icon,
-    iconOnly: propIconOnly = false,
-  }: Props = $props();
-
-  let iconOnly = $derived((content === undefined && progress === undefined) || propIconOnly);
-</script>
-
-<div
-  class={`badge badge-${type} badge-${size}`}
-  class:badge-icon-only={iconOnly}
-  data-testid="status-badge"
->
-  {#if icon}
-    <div class={`icon`}>
-      {@render icon?.()}
-    </div>
-  {/if}
-  <div class="gap-2">
-    {@render content?.()}
-    {@render progress?.()}
-  </div>
-</div>
-
-<style>
-  .badge {
-    gap: 0.5rem;
-    border-style: none;
-    --tw-text-opacity: 1;
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
-}
-  .badge-md {
-    height: 2rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    padding-left: 0.5rem;
-    padding-right: 0.75rem
-}
-  .badge-md .icon {
-    width: 1.25rem;
-    height: 1.25rem
-}
-
-  .badge-sm {
-    height: 1.5rem;
-    gap: 0.25rem;
-    padding-left: 0.25rem;
-    padding-right: 0.5rem
-}
-
-  .badge-sm .icon {
-    width: 1rem;
-    height: 1rem
-}
-  .badge-icon-only {
-    width: 2rem;
-    height: 2rem;
-    gap: 0px;
-    padding: 0px
-}
-
-  .badge-sm.badge-icon-only {
-    width: 1.5rem;
-    height: 1.5rem;
-    padding: 0px
-}
-
-  .badge-neutral {
-    background-color: #12192a0A
-}
-
-  .badge-neutral:hover {
-    background-color: #12192A1A
-}
-
-  .badge-neutral .icon {
-    --tw-text-opacity: 1;
-    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
-}
-
-  .badge-success {
-    background-color: #0aad6e1A
-}
-
-  .badge-success:hover {
-    background-color: #0aad6e40
-}
-
-  .badge-success .icon {
-    --tw-text-opacity: 1;
-    color: rgb(10 173 110 / var(--tw-text-opacity, 1))
-}
-  .badge-progress {
-    background-color: #5750ee1A
-}
-  .badge-progress:hover {
-    background-color: #5750ee40
-}
-  .badge-progress .icon {
-    --tw-text-opacity: 1;
-    color: rgb(71 65 193 / var(--tw-text-opacity, 1))
-}
-  .badge-warning {
-    background-color: #f1b1231A
-}
-  .badge-warning:hover {
-    background-color: #f1b12340
-}
-  .badge-warning .icon {
-    --tw-text-opacity: 1;
-    color: rgb(241 177 35 / var(--tw-text-opacity, 1))
-}
-  .badge-error {
-    background-color: #eb46471A
-}
-  .badge-error:hover {
-    background-color: #eb464740
-}
-  .badge-error .icon {
-    --tw-text-opacity: 1;
-    color: rgb(235 70 71 / var(--tw-text-opacity, 1))
-}
-
-  :global(.badge > div) {
-    display: flex;
-    height: 100%;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    white-space: nowrap
-}
-</style>

package/dist/components/status-badge/StatusBadge.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
-    size?: 'md' | 'sm';
-    content?: Snippet;
-    progress?: Snippet;
-    icon?: Snippet;
-    iconOnly?: boolean;
-}
-declare const StatusBadge: import("svelte").Component<Props, {}, "">;
-type StatusBadge = ReturnType<typeof StatusBadge>;
-export default StatusBadge;

package/dist/components/status-badge/index.d.ts

@@ -1 +0,0 @@
-export { default as StatusBadge } from './StatusBadge.svelte';

package/dist/components/status-badge/index.js

@@ -1 +0,0 @@
-export { default as StatusBadge } from './StatusBadge.svelte';