@getmicdrop/svelte-components 5.9.6 → 5.10.0

package/dist/recipes/modals/ModalStateManager.spec.js

@@ -1,100 +1,100 @@
-import { render, screen } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import ModalStateManager from "./ModalStateManager.svelte";
-
-describe("ModalStateManager Component Tests", () => {
-  test("Shows processing state when isProcessing is true", () => {
-    render(ModalStateManager, {
-      props: { isProcessing: true, isSuccess: false },
-    });
-    expect(screen.getByText("Processing your request")).toBeInTheDocument();
-  });
-
-  test("Shows custom processing message", () => {
-    render(ModalStateManager, {
-      props: {
-        isProcessing: true,
-        isSuccess: false,
-        processingMessage: "Please wait...",
-      },
-    });
-    expect(screen.getByText("Please wait...")).toBeInTheDocument();
-  });
-
-  test("Shows success state when isSuccess is true", () => {
-    render(ModalStateManager, {
-      props: { isProcessing: false, isSuccess: true, successTitle: "Done!" },
-    });
-    expect(screen.getByText("Done!")).toBeInTheDocument();
-  });
-
-  test("Shows success message when provided", () => {
-    render(ModalStateManager, {
-      props: {
-        isProcessing: false,
-        isSuccess: true,
-        successTitle: "Success",
-        successMessage: "Your action was completed.",
-      },
-    });
-    expect(screen.getByText("Your action was completed.")).toBeInTheDocument();
-  });
-
-  test("Shows continue button in success state", () => {
-    render(ModalStateManager, {
-      props: { isProcessing: false, isSuccess: true },
-    });
-    expect(screen.getByText("Continue")).toBeInTheDocument();
-  });
-
-  test("Uses custom success button text", () => {
-    render(ModalStateManager, {
-      props: {
-        isProcessing: false,
-        isSuccess: true,
-        successButtonText: "Close",
-      },
-    });
-    expect(screen.getByText("Close")).toBeInTheDocument();
-  });
-
-  test("Calls onSuccessClose when success button clicked", async () => {
-    const user = userEvent.setup();
-    const onSuccessClose = vi.fn();
-
-    render(ModalStateManager, {
-      props: { isProcessing: false, isSuccess: true, onSuccessClose },
-    });
-
-    await user.click(screen.getByText("Continue"));
-    expect(onSuccessClose).toHaveBeenCalledTimes(1);
-  });
-
-  test("Processing state shows spinner animation", () => {
-    const { container } = render(ModalStateManager, {
-      props: { isProcessing: true, isSuccess: false },
-    });
-    const spinner = container.querySelector(".animate-spin");
-    expect(spinner).toBeInTheDocument();
-  });
-
-  test("Processing state has orange background", () => {
-    const { container } = render(ModalStateManager, {
-      props: { isProcessing: true, isSuccess: false },
-    });
-    const spinnerBg = container.querySelector(".bg-orange-300");
-    expect(spinnerBg).toBeInTheDocument();
-  });
-
-  test("Success state priority over processing", () => {
-    // When both are true, success should show
-    render(ModalStateManager, {
-      props: { isProcessing: true, isSuccess: true, successTitle: "Complete" },
-    });
-    expect(screen.getByText("Complete")).toBeInTheDocument();
-    expect(
-      screen.queryByText("Processing your request")
-    ).not.toBeInTheDocument();
-  });
-});
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import ModalStateManager from "./ModalStateManager.svelte";
+
+describe("ModalStateManager Component Tests", () => {
+  test("Shows processing state when isProcessing is true", () => {
+    render(ModalStateManager, {
+      props: { isProcessing: true, isSuccess: false },
+    });
+    expect(screen.getByText("Processing your request")).toBeInTheDocument();
+  });
+
+  test("Shows custom processing message", () => {
+    render(ModalStateManager, {
+      props: {
+        isProcessing: true,
+        isSuccess: false,
+        processingMessage: "Please wait...",
+      },
+    });
+    expect(screen.getByText("Please wait...")).toBeInTheDocument();
+  });
+
+  test("Shows success state when isSuccess is true", () => {
+    render(ModalStateManager, {
+      props: { isProcessing: false, isSuccess: true, successTitle: "Done!" },
+    });
+    expect(screen.getByText("Done!")).toBeInTheDocument();
+  });
+
+  test("Shows success message when provided", () => {
+    render(ModalStateManager, {
+      props: {
+        isProcessing: false,
+        isSuccess: true,
+        successTitle: "Success",
+        successMessage: "Your action was completed.",
+      },
+    });
+    expect(screen.getByText("Your action was completed.")).toBeInTheDocument();
+  });
+
+  test("Shows continue button in success state", () => {
+    render(ModalStateManager, {
+      props: { isProcessing: false, isSuccess: true },
+    });
+    expect(screen.getByText("Continue")).toBeInTheDocument();
+  });
+
+  test("Uses custom success button text", () => {
+    render(ModalStateManager, {
+      props: {
+        isProcessing: false,
+        isSuccess: true,
+        successButtonText: "Close",
+      },
+    });
+    expect(screen.getByText("Close")).toBeInTheDocument();
+  });
+
+  test("Calls onSuccessClose when success button clicked", async () => {
+    const user = userEvent.setup();
+    const onSuccessClose = vi.fn();
+
+    render(ModalStateManager, {
+      props: { isProcessing: false, isSuccess: true, onSuccessClose },
+    });
+
+    await user.click(screen.getByText("Continue"));
+    expect(onSuccessClose).toHaveBeenCalledTimes(1);
+  });
+
+  test("Processing state shows spinner animation", () => {
+    const { container } = render(ModalStateManager, {
+      props: { isProcessing: true, isSuccess: false },
+    });
+    const spinner = container.querySelector(".animate-spin");
+    expect(spinner).toBeInTheDocument();
+  });
+
+  test("Processing state has orange background", () => {
+    const { container } = render(ModalStateManager, {
+      props: { isProcessing: true, isSuccess: false },
+    });
+    const spinnerBg = container.querySelector(".bg-orange-300");
+    expect(spinnerBg).toBeInTheDocument();
+  });
+
+  test("Success state priority over processing", () => {
+    // When both are true, success should show
+    render(ModalStateManager, {
+      props: { isProcessing: true, isSuccess: true, successTitle: "Complete" },
+    });
+    expect(screen.getByText("Complete")).toBeInTheDocument();
+    expect(
+      screen.queryByText("Processing your request")
+    ).not.toBeInTheDocument();
+  });
+});

package/dist/recipes/modals/ModalStateManager.svelte

@@ -1,77 +1,77 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import Icon from "../../primitives/Icons/Icon.svelte";
-  import Button from "../../primitives/Button/Button.svelte";
-  import { typography } from '../../tokens/typography';
-
-  type IconName = "Home" | "Shows" | "Availability" | "Profile" | "Payment" | "Notification" | "More" | "MoreHori" | "Info" | "ChevronLeft" | "ChevronRight" | "Signout" | "CheckCircle" | "CheckCircleOutline" | "ErrorCircle" | "ArrowLeft" | "ArrowRight" | "Back" | "DownArrow" | "Message" | "Reload" | "Copy" | "Cross";
-
-  interface Props {
-    /** Whether the modal is currently processing an action */
-    isProcessing?: boolean;
-    /** Whether the action completed successfully */
-    isSuccess?: boolean;
-    /** Icon to show on success (from Icon component) */
-    successIcon?: IconName;
-    /** Title to show on success */
-    successTitle?: string;
-    /** Optional message to show on success */
-    successMessage?: string;
-    /** Text to show while processing */
-    processingMessage?: string;
-    /** Button text for the success state */
-    successButtonText?: string;
-    /** Callback when success button is clicked */
-    onSuccessClose?: () => void;
-    /** Custom success icon color class */
-    successIconColor?: string;
-    /** Custom processing icon color class */
-    processingIconBgColor?: string;
-    /** Child content (normal state) */
-    children?: Snippet;
-  }
-
-  let {
-    isProcessing = false,
-    isSuccess = false,
-    successIcon = "CheckCircle",
-    successTitle = "Success",
-    successMessage = "",
-    processingMessage = "Processing your request",
-    successButtonText = "Continue",
-    onSuccessClose = () => {},
-    successIconColor = "text-green-600",
-    processingIconBgColor = "bg-orange-300",
-    children
-  }: Props = $props();
-</script>
-
-{#if isProcessing && !isSuccess}
-  <div class="py-6 px-4 flex flex-col items-center justify-center gap-4">
-    <div
-      class="w-12 h-12 {processingIconBgColor} rounded-full flex items-center justify-center"
-    >
-      <span class="animate-spin">
-        <Icon name="Reload" size="20" />
-      </span>
-    </div>
-    <p class={`${typography.body} text-center font-medium`}>{processingMessage}</p>
-  </div>
-{:else if isSuccess}
-  <div class="py-6 px-4 flex flex-col items-center justify-center gap-4">
-    <div class={successIconColor}>
-      <Icon name={successIcon} size="48" />
-    </div>
-    <h2 class={`${typography.h2} text-center`}>
-      {successTitle}
-    </h2>
-    {#if successMessage}
-      <p class={`${typography.smMuted} text-center`}>{successMessage}</p>
-    {/if}
-    <Button variant="default" size="full" onclick={onSuccessClose}>
-      {successButtonText}
-    </Button>
-  </div>
-{:else}
-  {@render children?.()}
-{/if}
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Icon from "../../primitives/Icons/Icon.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
+  import { typography } from '../../tokens/typography';
+
+  type IconName = "Home" | "Shows" | "Availability" | "Profile" | "Payment" | "Notification" | "More" | "MoreHori" | "Info" | "ChevronLeft" | "ChevronRight" | "Signout" | "CheckCircle" | "CheckCircleOutline" | "ErrorCircle" | "ArrowLeft" | "ArrowRight" | "Back" | "DownArrow" | "Message" | "Reload" | "Copy" | "Cross";
+
+  interface Props {
+    /** Whether the modal is currently processing an action */
+    isProcessing?: boolean;
+    /** Whether the action completed successfully */
+    isSuccess?: boolean;
+    /** Icon to show on success (from Icon component) */
+    successIcon?: IconName;
+    /** Title to show on success */
+    successTitle?: string;
+    /** Optional message to show on success */
+    successMessage?: string;
+    /** Text to show while processing */
+    processingMessage?: string;
+    /** Button text for the success state */
+    successButtonText?: string;
+    /** Callback when success button is clicked */
+    onSuccessClose?: () => void;
+    /** Custom success icon color class */
+    successIconColor?: string;
+    /** Custom processing icon color class */
+    processingIconBgColor?: string;
+    /** Child content (normal state) */
+    children?: Snippet;
+  }
+
+  let {
+    isProcessing = false,
+    isSuccess = false,
+    successIcon = "CheckCircle",
+    successTitle = "Success",
+    successMessage = "",
+    processingMessage = "Processing your request",
+    successButtonText = "Continue",
+    onSuccessClose = () => {},
+    successIconColor = "text-green-600",
+    processingIconBgColor = "bg-orange-300",
+    children
+  }: Props = $props();
+</script>
+
+{#if isProcessing && !isSuccess}
+  <div class="py-6 px-4 flex flex-col items-center justify-center gap-4">
+    <div
+      class="w-12 h-12 {processingIconBgColor} rounded-full flex items-center justify-center"
+    >
+      <span class="animate-spin">
+        <Icon name="Reload" size="20" />
+      </span>
+    </div>
+    <p class={`${typography.body} text-center font-medium`}>{processingMessage}</p>
+  </div>
+{:else if isSuccess}
+  <div class="py-6 px-4 flex flex-col items-center justify-center gap-4">
+    <div class={successIconColor}>
+      <Icon name={successIcon} size="48" />
+    </div>
+    <h2 class={`${typography.h2} text-center`}>
+      {successTitle}
+    </h2>
+    {#if successMessage}
+      <p class={`${typography.smMuted} text-center`}>{successMessage}</p>
+    {/if}
+    <Button variant="default" size="full" onclick={onSuccessClose}>
+      {successButtonText}
+    </Button>
+  </div>
+{:else}
+  {@render children?.()}
+{/if}

package/dist/recipes/modals/ModalTestWrapper.svelte

@@ -1,65 +1,65 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import Modal from "../../primitives/Modal/Modal.svelte";
-  import Button from "../../primitives/Button/Button.svelte";
-
-  interface Props {
-    /** Whether the modal is visible */
-    show?: boolean;
-    /** Modal title */
-    title?: string;
-    /** Modal description */
-    description?: string;
-    /** Warning text */
-    warningText?: string;
-    /** Callback when modal is cancelled */
-    oncancel?: () => void;
-    /** Header content */
-    header?: Snippet;
-    /** Body content */
-    body?: Snippet;
-    /** Footer content */
-    footer?: Snippet;
-  }
-
-  let {
-    show = $bindable(false),
-    title = '',
-    description = '',
-    warningText = '',
-    oncancel,
-    header,
-    body,
-    footer
-  }: Props = $props();
-</script>
-
-<Modal bind:show oncancel={oncancel}>
-  {#snippet headerSnippet()}
-    {#if header}
-      {@render header()}
-    {:else}
-      {title}
-    {/if}
-  {/snippet}
-
-  {#snippet bodySnippet()}
-    {#if body}
-      {@render body()}
-    {:else}
-      {description}
-      {#if warningText}
-        <br /> {warningText}
-      {/if}
-    {/if}
-  {/snippet}
-
-  {#snippet footerSnippet()}
-    {#if footer}
-      {@render footer()}
-    {:else}
-      <Button variant="alternative">Cancel</Button>
-      <Button variant="default">Confirm</Button>
-    {/if}
-  {/snippet}
-</Modal>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Modal from "../../primitives/Modal/Modal.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
+
+  interface Props {
+    /** Whether the modal is visible */
+    show?: boolean;
+    /** Modal title */
+    title?: string;
+    /** Modal description */
+    description?: string;
+    /** Warning text */
+    warningText?: string;
+    /** Callback when modal is cancelled */
+    oncancel?: () => void;
+    /** Header content */
+    header?: Snippet;
+    /** Body content */
+    body?: Snippet;
+    /** Footer content */
+    footer?: Snippet;
+  }
+
+  let {
+    show = $bindable(false),
+    title = '',
+    description = '',
+    warningText = '',
+    oncancel,
+    header,
+    body,
+    footer
+  }: Props = $props();
+</script>
+
+{#snippet headerContent()}
+  {#if header}
+    {@render header()}
+  {:else}
+    {title}
+  {/if}
+{/snippet}
+
+{#snippet bodyContent()}
+  {#if body}
+    {@render body()}
+  {:else}
+    {description}
+    {#if warningText}
+      <br /> {warningText}
+    {/if}
+  {/if}
+{/snippet}
+
+{#snippet footerContent()}
+  {#if footer}
+    {@render footer()}
+  {:else}
+    <Button variant="alternative">Cancel</Button>
+    <Button variant="default">Confirm</Button>
+  {/if}
+{/snippet}
+
+<Modal bind:show {oncancel} header={headerContent} body={bodyContent} footer={footerContent} />