@reshape-biotech/design-system 2.4.1 → 2.4.2

package/dist/components/banner/Banner.stories.svelte

@@ -1,129 +0,0 @@
-<script module lang="ts">
-  import { Icon } from '../icons';
-  import Banner from './Banner.svelte';
-  import Button from '../button/Button.svelte';
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-
-  const { Story } = defineMeta({
-    component: Banner,
-    title: 'Design System/Banner',
-    tags: ['autodocs'],
-  });
-
-  let showBanner = $state(true);
-</script>
-
-<Story name="Well finding warning" asChild>
-  <Banner type="warning" closable={false}>
-    {#snippet icon()}
-      <Icon size={20} iconName="Warning" color="warning" weight="bold" />
-    {/snippet}
-    {#snippet content()}
-      Our system couldn't find the wells in some plates. Analysis can't be done. For more help, <a
-        href="https://docs.reshapebiotech.com/reshape-biotech-knowledgebase/general-info/troubleshooting/well-detection"
-        >check our documentation</a
-      >
-      or <a href="mailto:support@reshapebiotech.com">contact us</a>.
-    {/snippet}
-  </Banner>
-</Story>
-
-<Story name="No icon" asChild>
-  <Banner type="success">
-    {#snippet content()}
-      This banner has no icon.
-    {/snippet}
-  </Banner>
-</Story>
-
-<Story name="No toggle" asChild>
-  <Banner type="progress" closable={false}>
-    {#snippet icon()}
-      <Icon size={20} iconName="Info" color="icon-blue" weight="bold" />
-    {/snippet}
-    {#snippet content()}
-      This banner has no toggle.
-    {/snippet}
-  </Banner>
-</Story>
-
-<Story name="Toggle back on" asChild>
-  <div class="h-28">
-    <Button onClick={() => (showBanner = true)} disabled={showBanner}>Toggle banner back on</Button>
-    <br />
-    <br />
-
-    <Banner type="error" bind:show={showBanner}>
-      {#snippet icon()}
-        <Icon size={20} iconName="Info" color="danger" weight="bold" />
-      {/snippet}
-      {#snippet content()}
-        This banner can be toggled off with the "x" to the right and back on with the button above.
-      {/snippet}
-    </Banner>
-  </div>
-</Story>
-
-<Story name="Type variations" asChild>
-  <div class="space-y-4">
-    <div class="space-y-2">
-      <h4>Neutral</h4>
-      <Banner type="neutral">
-        {#snippet icon()}
-          <Icon size={20} iconName="Info" weight="bold" />
-        {/snippet}
-        {#snippet content()}
-          This is a "neutral" banner.
-        {/snippet}
-      </Banner>
-    </div>
-
-    <div class="space-y-2">
-      <h4>Success</h4>
-      <Banner type="success">
-        {#snippet icon()}
-          <Icon size={20} iconName="CheckCircle" color="icon-success" weight="bold" />
-        {/snippet}
-        {#snippet content()}
-          This is a "success" banner.
-        {/snippet}
-      </Banner>
-    </div>
-
-    <div class="space-y-2">
-      <h4>Progress</h4>
-      <Banner type="progress">
-        {#snippet icon()}
-          <Icon size={20} iconName="Circle" color="icon-blue" weight="bold" />
-        {/snippet}
-        {#snippet content()}
-          This is a "progress" banner.
-        {/snippet}
-      </Banner>
-    </div>
-
-    <div class="space-y-2">
-      <h4>Warning</h4>
-      <Banner type="warning">
-        {#snippet icon()}
-          <Icon size={20} iconName="Warning" color="icon-warning" weight="bold" />
-        {/snippet}
-        {#snippet content()}
-          This is a "warning" banner.
-        {/snippet}
-      </Banner>
-    </div>
-
-    <div class="space-y-2">
-      <h4>Error</h4>
-      <Banner type="error">
-        {#snippet icon()}
-          <Icon size={20} iconName="WarningCircle" color="icon-danger" weight="bold" />
-        {/snippet}
-        {#snippet content()}
-          This is an "error" banner.
-        {/snippet}
-      </Banner>
-    </div>
-  </div>
-</Story>

package/dist/components/banner/Banner.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import Banner from './Banner.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 Banner: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Banner = InstanceType<typeof Banner>;
-export default Banner;

package/dist/components/banner/Banner.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { IconButton } from '../icon-button/';
-  import Icon from '../icons/Icon.svelte';
-
-  interface Props {
-    type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
-    show?: boolean;
-    closable?: boolean;
-    icon?: Snippet;
-    content: Snippet;
-  }
-
-  let {
-    type = 'neutral',
-    show = $bindable(true),
-    closable = true,
-    icon,
-    content,
-  }: Props = $props();
-
-  const color = {
-    neutral: 'neutral',
-    success: 'success',
-    progress: 'blue',
-    warning: 'warning',
-    error: 'danger',
-  }[type];
-</script>
-
-{#if show}
-  <div class="rounded-lg bg-{color} flex w-full items-center justify-between p-3">
-    <div class="inline-flex w-full items-center justify-start gap-3">
-      {#if icon}
-        <div class="flex size-5 items-center justify-center text-icon-{color} ">
-          {@render icon?.()}
-        </div>
-      {/if}
-      <div class="content w-full text-sm">
-        {@render content?.()}
-      </div>
-    </div>
-    {#if closable}
-      <IconButton size="sm" onclick={() => (show = false)}>
-        <Icon iconName="X" color="icon-secondary" weight="bold" />
-      </IconButton>
-    {/if}
-  </div>
-{/if}
-
-<style>
-  .content :global(a) {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    --tw-text-opacity: 1;
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1));
-    text-decoration-line: underline
-}
-</style>

package/dist/components/banner/Banner.svelte.d.ts

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

package/dist/components/banner/index.d.ts

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

package/dist/components/banner/index.js

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

package/dist/components/button/Button.stories.svelte

@@ -1,76 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Button, { type ButtonVariant, type ButtonSize } from './Button.svelte';
-
-  const { Story } = defineMeta({
-    component: Button,
-    title: 'Design System/Button',
-    tags: ['autodocs'],
-    parameters: {
-      design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-3068&t=sCuBI8dX6K6NjNR6-0',
-      },
-    },
-  });
-
-  const variants = [
-    'primary',
-    'secondary',
-    'danger',
-    'transparent',
-    'outline',
-    'secondary-inverse',
-  ];
-  const sizes = ['xs', 'sm', 'md', 'lg'];
-</script>
-
-<Story name="Variants" asChild>
-  <div class="flex flex-col gap-4">
-    {#each variants as variant}
-      {#if variant === 'secondary-inverse'}
-        <div class="bg-base-inverse p-4 text-primary-inverse">
-          <p>{variant}</p>
-          <Button variant={variant as ButtonVariant}>Button</Button>
-        </div>
-      {:else}
-        <div>
-          <p>{variant}</p>
-          <Button variant={variant as ButtonVariant}>Button</Button>
-        </div>
-      {/if}
-    {/each}
-  </div>
-</Story>
-
-<Story name="Sizes" asChild>
-  <div class="flex flex-col gap-4">
-    {#each sizes as size}
-      <div>
-        <p>{size}</p>
-        <Button variant="primary" size={size as ButtonSize}>Button</Button>
-      </div>
-    {/each}
-  </div>
-</Story>
-
-<Story name="Disabled" asChild>
-  <div class="flex flex-col gap-4">
-    {#each variants as variant}
-      <div>
-        <p>{variant}</p>
-        <Button variant={variant as ButtonVariant} disabled>Button</Button>
-      </div>
-    {/each}
-  </div>
-</Story>
-<Story name="Loading" asChild>
-  <div class="flex flex-col gap-4">
-    {#each variants as variant}
-      <div>
-        <p>{variant}</p>
-        <Button variant={variant as ButtonVariant} loading>Button</Button>
-      </div>
-    {/each}
-  </div>
-</Story>

package/dist/components/button/Button.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import Button from './Button.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 Button: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Button = InstanceType<typeof Button>;
-export default Button;

package/dist/components/button/Button.svelte

@@ -1,311 +0,0 @@
-<script lang="ts" module>
-  export type ButtonVariant =
-    | 'primary'
-    | 'secondary'
-    | 'transparent'
-    | 'danger'
-    | 'outline'
-    | 'secondary-inverse'
-    | 'transparent-inverse';
-  export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
-  import type { HTMLButtonAttributes } from 'svelte/elements';
-</script>
-
-<script lang="ts">
-  import Spinner from '../spinner/Spinner.svelte';
-  import type { Snippet } from 'svelte';
-
-  interface Props extends HTMLButtonAttributes {
-    class?: string;
-    onClick?: (event?: MouseEvent) => void;
-    type?: 'button' | 'submit' | 'reset' | null | undefined;
-    loading?: boolean;
-    disabled?: boolean;
-    accessibilityLabel?: string;
-    size?: ButtonSize;
-    id?: string | undefined;
-    tabindex?: number | undefined;
-    variant?: ButtonVariant;
-    children?: Snippet;
-    dataTestId?: string;
-    rounded?: boolean;
-  }
-
-  let {
-    class: className = '',
-    onClick = () => {},
-    type = 'button',
-    loading = false,
-    disabled = false,
-    accessibilityLabel = '',
-    size = 'lg',
-    id = undefined,
-    tabindex = undefined,
-    variant = 'primary',
-    children,
-    dataTestId = undefined,
-    rounded = false,
-    ...rest
-  }: Props = $props();
-
-  let variantClass = $derived(`btn-${variant}`);
-  let sizeClass = $derived(`btn-size-${size}`);
-</script>
-
-<button
-  aria-label={accessibilityLabel}
-  onclick={(e) => {
-    if (!loading && !disabled) {
-      onClick(e);
-    } else {
-      e.preventDefault();
-    }
-  }}
-  {type}
-  {disabled}
-  {id}
-  {tabindex}
-  class:cursor-wait={loading}
-  class="button {variantClass} {sizeClass} {className}"
-  data-testid={dataTestId}
-  class:rounded
-  class:disabled
-  {...rest}
->
-  {#if loading}
-    <Spinner />
-  {:else}
-    {@render children?.()}
-  {/if}
-</button>
-
-<style>
-  .button {
-
-    display: inline-flex;
-
-    align-items: center;
-
-    justify-content: center;
-
-    gap: 0.5rem;
-
-    overflow: hidden;
-
-    text-overflow: ellipsis;
-
-    white-space: nowrap;
-
-    text-wrap: nowrap;
-
-    border-radius: 0.5rem;
-
-    font-size: 0.875rem;
-
-    font-weight: 500;
-
-    line-height: 1.5rem;
-
-    transition-duration: 150ms
-}
-
-.button:disabled {
-
-    background-color: #12192a0A;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
-}
-
-.button:hover:disabled {
-
-    cursor: not-allowed;
-
-    background-color: #12192a0A;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
-}
-
-  .rounded {
-
-    border-radius: 9999px
-}
-
-  .disabled:hover {
-
-    background-color: #12192a0A !important
-}
-  /* Size variants */
-  .btn-size-xs {
-
-    height: 1.75rem;
-
-    border-radius: 0.375rem;
-
-    padding: 0.5rem
-}
-  .btn-size-sm {
-
-    height: 2rem;
-
-    padding-left: 0.75rem;
-
-    padding-right: 0.75rem;
-
-    padding-top: 0.5rem;
-
-    padding-bottom: 0.5rem
-}
-  .btn-size-md {
-
-    height: 2.5rem;
-
-    padding-left: 1rem;
-
-    padding-right: 1rem;
-
-    padding-top: 0.75rem;
-
-    padding-bottom: 0.75rem
-}
-  .btn-size-lg {
-
-    height: 3rem;
-
-    padding-left: 1.5rem;
-
-    padding-right: 1.5rem;
-
-    padding-top: 1rem;
-
-    padding-bottom: 1rem;
-
-    font-size: 1rem;
-
-    line-height: 1.5rem
-}
-
-  /* Button variants */
-  .btn-primary {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
-
-    --tw-text-opacity: 1;
-
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
-}
-  .btn-primary:hover {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(71 65 193 / var(--tw-bg-opacity, 1))
-}
-
-  .btn-secondary {
-
-    background-color: #12192a0A;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
-}
-
-  .btn-secondary:hover {
-
-    background-color: #12192A1A
-}
-
-  .btn-secondary:active {
-
-    background-color: #12192a0A
-}
-  .btn-transparent {
-
-    background-color: transparent;
-
-    color: inherit
-}
-  .btn-transparent:hover {
-
-    background-color: #12192a0A
-}
-  .btn-danger {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(235 70 71 / var(--tw-bg-opacity, 1));
-
-    --tw-text-opacity: 1;
-
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
-}
-  .btn-danger:hover {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(191 57 58 / var(--tw-bg-opacity, 1))
-}
-  .btn-outline {
-
-    border-width: 1px;
-
-    border-color: #12192A1A;
-
-    background-color: transparent;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
-}
-  .btn-outline:hover {
-
-    border-color: #12192A26;
-
-    background-color: #12192a0A;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
-}
-  .btn-outline:disabled {
-
-    border-style: none
-}
-  .btn-secondary-inverse {
-
-    background-color: #FFFFFF0D;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
-}
-  .btn-secondary-inverse:hover {
-
-    background-color: #FFFFFF26
-}
-  .btn-secondary-inverse:active {
-
-    background-color: #FFFFFF0D
-}
-  .btn-transparent-inverse {
-
-    background-color: transparent;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
-}
-  .btn-transparent-inverse:hover {
-
-    background-color: #FFFFFF26
-}
-  .btn-transparent-inverse:active {
-
-    background-color: #FFFFFF0D
-}
-</style>

package/dist/components/button/Button.svelte.d.ts

@@ -1,22 +0,0 @@
-export type ButtonVariant = 'primary' | 'secondary' | 'transparent' | 'danger' | 'outline' | 'secondary-inverse' | 'transparent-inverse';
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-import type { Snippet } from 'svelte';
-interface Props extends HTMLButtonAttributes {
-    class?: string;
-    onClick?: (event?: MouseEvent) => void;
-    type?: 'button' | 'submit' | 'reset' | null | undefined;
-    loading?: boolean;
-    disabled?: boolean;
-    accessibilityLabel?: string;
-    size?: ButtonSize;
-    id?: string | undefined;
-    tabindex?: number | undefined;
-    variant?: ButtonVariant;
-    children?: Snippet;
-    dataTestId?: string;
-    rounded?: boolean;
-}
-declare const Button: import("svelte").Component<Props, {}, "">;
-type Button = ReturnType<typeof Button>;
-export default Button;

package/dist/components/button/Button.test.d.ts

@@ -1 +0,0 @@
-export {};