@getmicdrop/svelte-components 5.3.10 → 5.3.13

package/dist/recipes/modals/AlertModal.svelte

@@ -1,130 +1,130 @@
-<script>
-  /**
-   * AlertModal - Simple alert with single action and optional auto-close
-   *
-   * A lighter alternative to StatusModal for simple notifications.
-   * Supports auto-close after a delay.
-   *
-   * @example
-   * <AlertModal
-   *   bind:show={showAlert}
-   *   variant="success"
-   *   title="Changes saved"
-   *   message="Your changes have been saved successfully."
-   *   autoClose={3000}
-   * />
-   */
-  import Modal from '../../primitives/Modal/Modal.svelte';
-  import Button from '../../primitives/Button/Button.svelte';
-  import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from '../../primitives/Icons';
-  import { typography } from '../../tokens/typography';
-
-  let {
-    /** Whether the modal is visible */
-    show = $bindable(false),
-    /** Alert variant */
-    variant = 'info',
-    /** Alert title */
-    title = '',
-    /** Alert message */
-    message = '',
-    /** Button text */
-    buttonText = 'OK',
-    /** Auto-close delay in milliseconds (0 to disable) */
-    autoClose = 0,
-    /** Modal size */
-    size = 'small',
-    /** Callbacks */
-    onclose,
-    onconfirm,
-  } = $props();
-
-  // Variant styles
-  const variantStyles = {
-    success: {
-      bg: 'bg-green-100 dark:bg-green-900/30',
-      icon: 'text-green-600 dark:text-green-400',
-      button: 'default'
-    },
-    error: {
-      bg: 'bg-red-100 dark:bg-red-900/30',
-      icon: 'text-red-600 dark:text-red-400',
-      button: 'red'
-    },
-    warning: {
-      bg: 'bg-amber-100 dark:bg-amber-900/30',
-      icon: 'text-amber-600 dark:text-amber-400',
-      button: 'default'
-    },
-    info: {
-      bg: 'bg-blue-100 dark:bg-blue-900/30',
-      icon: 'text-blue-600 dark:text-blue-400',
-      button: 'default'
-    }
-  };
-
-  let styles = $derived(variantStyles[variant] || variantStyles.info);
-
-  function closeModal() {
-    show = false;
-    onclose?.();
-  }
-
-  function handleConfirm() {
-    onconfirm?.();
-    closeModal();
-  }
-
-  // Start auto-close timer when modal opens
-  $effect(() => {
-    if (show && autoClose > 0) {
-      const timer = setTimeout(() => {
-        closeModal();
-      }, autoClose);
-      return () => clearTimeout(timer);
-    }
-  });
-</script>
-
-<Modal bind:show {size}>
-  {#snippet header()}
-    <div class="text-center">
-      <div class="flex justify-center items-center">
-        <div class="w-14 h-14 rounded-full {styles.bg} flex items-center justify-center">
-          {#if variant === 'success'}
-            <CheckOutline class="w-7 h-7 {styles.icon}" />
-          {:else if variant === 'error'}
-            <CloseOutline class="w-7 h-7 {styles.icon}" />
-          {:else if variant === 'warning'}
-            <ExclamationTriangleOutline class="w-7 h-7 {styles.icon}" />
-          {:else}
-            <InfoCircleOutline class="w-7 h-7 {styles.icon}" />
-          {/if}
-        </div>
-      </div>
-      {#if title}
-        <h2 class={`${typography.h2} mt-4`}>{title}</h2>
-      {/if}
-    </div>
-  {/snippet}
-
-  {#snippet body()}
-    <div class="text-center mt-4">
-      {#if message}
-        <p class={`${typography.smMuted} leading-relaxed`}>{message}</p>
-      {/if}
-    </div>
-  {/snippet}
-
-  {#snippet footer()}
-    <div class="w-full">
-      <Button
-        size="full"
-        variant={styles.button}
-        onclick={handleConfirm}
-      >
-        {buttonText}
-      </Button>
-    </div>
-  {/snippet}
-</Modal>
+<script>
+  /**
+   * AlertModal - Simple alert with single action and optional auto-close
+   *
+   * A lighter alternative to StatusModal for simple notifications.
+   * Supports auto-close after a delay.
+   *
+   * @example
+   * <AlertModal
+   *   bind:show={showAlert}
+   *   variant="success"
+   *   title="Changes saved"
+   *   message="Your changes have been saved successfully."
+   *   autoClose={3000}
+   * />
+   */
+  import Modal from '../../primitives/Modal/Modal.svelte';
+  import Button from '../../primitives/Button/Button.svelte';
+  import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from '../../primitives/Icons';
+  import { typography } from '../../tokens/typography';
+
+  let {
+    /** Whether the modal is visible */
+    show = $bindable(false),
+    /** Alert variant */
+    variant = 'info',
+    /** Alert title */
+    title = '',
+    /** Alert message */
+    message = '',
+    /** Button text */
+    buttonText = 'OK',
+    /** Auto-close delay in milliseconds (0 to disable) */
+    autoClose = 0,
+    /** Modal size */
+    size = 'small',
+    /** Callbacks */
+    onclose,
+    onconfirm,
+  } = $props();
+
+  // Variant styles
+  const variantStyles = {
+    success: {
+      bg: 'bg-green-100 dark:bg-green-900/30',
+      icon: 'text-green-600 dark:text-green-400',
+      button: 'default'
+    },
+    error: {
+      bg: 'bg-red-100 dark:bg-red-900/30',
+      icon: 'text-red-600 dark:text-red-400',
+      button: 'red'
+    },
+    warning: {
+      bg: 'bg-amber-100 dark:bg-amber-900/30',
+      icon: 'text-amber-600 dark:text-amber-400',
+      button: 'default'
+    },
+    info: {
+      bg: 'bg-blue-100 dark:bg-blue-900/30',
+      icon: 'text-blue-600 dark:text-blue-400',
+      button: 'default'
+    }
+  };
+
+  let styles = $derived(variantStyles[variant] || variantStyles.info);
+
+  function closeModal() {
+    show = false;
+    onclose?.();
+  }
+
+  function handleConfirm() {
+    onconfirm?.();
+    closeModal();
+  }
+
+  // Start auto-close timer when modal opens
+  $effect(() => {
+    if (show && autoClose > 0) {
+      const timer = setTimeout(() => {
+        closeModal();
+      }, autoClose);
+      return () => clearTimeout(timer);
+    }
+  });
+</script>
+
+<Modal bind:show {size}>
+  {#snippet header()}
+    <div class="text-center">
+      <div class="flex justify-center items-center">
+        <div class="w-14 h-14 rounded-full {styles.bg} flex items-center justify-center">
+          {#if variant === 'success'}
+            <CheckOutline class="w-7 h-7 {styles.icon}" />
+          {:else if variant === 'error'}
+            <CloseOutline class="w-7 h-7 {styles.icon}" />
+          {:else if variant === 'warning'}
+            <ExclamationTriangleOutline class="w-7 h-7 {styles.icon}" />
+          {:else}
+            <InfoCircleOutline class="w-7 h-7 {styles.icon}" />
+          {/if}
+        </div>
+      </div>
+      {#if title}
+        <h2 class={`${typography.h2} mt-4`}>{title}</h2>
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet body()}
+    <div class="text-center mt-4">
+      {#if message}
+        <p class={`${typography.smMuted} leading-relaxed`}>{message}</p>
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet footer()}
+    <div class="w-full">
+      <Button
+        size="full"
+        variant={styles.button}
+        onclick={handleConfirm}
+      >
+        {buttonText}
+      </Button>
+    </div>
+  {/snippet}
+</Modal>

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

@@ -1,191 +1,191 @@
-import { render, screen, fireEvent, waitFor } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import ConfirmationModal from "./ConfirmationModal.svelte";
-
-const defaultActions = [
-  { label: "Cancel", onClick: vi.fn(), variant: "gray-outline" },
-  { label: "Confirm", onClick: vi.fn(), variant: "blue-solid" },
-];
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component } = render(ConfirmationModal, {
-    props: {
-      show: true,
-      title: "Test Modal",
-      description: "This is a test description",
-      actions: defaultActions.map((a) => ({ ...a, onClick: vi.fn() })),
-      ...args,
-    },
-  });
-  return { user, component };
-}
-
-describe("ConfirmationModal Component Tests", () => {
-  // Note: Modal renders both mobile sheet and desktop centered versions
-  // CSS hides one based on viewport, but in tests both are in DOM
-  // Use getAllByText/queryAllByText and check length or first element
-
-  test("Does not render when show is false", () => {
-    render(ConfirmationModal, { props: { show: false } });
-    expect(screen.queryByText("Test Modal")).not.toBeInTheDocument();
-  });
-
-  test("Renders when show is true", () => {
-    setupTest();
-    // Modal renders both mobile and desktop versions
-    expect(screen.getAllByText("Test Modal").length).toBeGreaterThan(0);
-  });
-
-  test("Displays title", () => {
-    setupTest({ title: "Confirm Delete" });
-    expect(screen.getAllByText("Confirm Delete").length).toBeGreaterThan(0);
-  });
-
-  test("Displays description", () => {
-    setupTest({ description: "Are you sure you want to proceed?" });
-    expect(
-      screen.getAllByText("Are you sure you want to proceed?").length
-    ).toBeGreaterThan(0);
-  });
-
-  test("Displays warning text when provided", () => {
-    setupTest({ warningText: "This action cannot be undone" });
-    expect(
-      screen.getAllByText("This action cannot be undone").length
-    ).toBeGreaterThan(0);
-  });
-
-  test("Warning text has danger styling", () => {
-    setupTest({ warningText: "Warning!" });
-    const warning = screen.getAllByText("Warning!")[0];
-    expect(warning).toHaveClass("text-red-600");
-    expect(warning).toHaveClass("font-medium");
-  });
-
-  test("Renders action buttons", () => {
-    const actions = [
-      { label: "No", onClick: vi.fn() },
-      { label: "Yes", onClick: vi.fn() },
-    ];
-    setupTest({ actions });
-    expect(screen.getAllByText("No").length).toBeGreaterThan(0);
-    expect(screen.getAllByText("Yes").length).toBeGreaterThan(0);
-  });
-
-  test("Calls action onClick when button clicked", async () => {
-    const cancelFn = vi.fn();
-    const confirmFn = vi.fn();
-    const actions = [
-      { label: "Cancel", onClick: cancelFn },
-      { label: "Confirm", onClick: confirmFn },
-    ];
-    const { user } = setupTest({ actions });
-
-    // Click the first Confirm button (both mobile and desktop versions exist)
-    await user.click(screen.getAllByText("Confirm")[0]);
-    expect(confirmFn).toHaveBeenCalled();
-  });
-
-  test("Dispatches event with action label", async () => {
-    const confirmFn = vi.fn();
-    const actions = [{ label: "Delete", onClick: confirmFn }];
-    const { user, component } = setupTest({ actions });
-
-    const deleteSpy = vi.fn();
-    component.$on("delete", deleteSpy);
-
-    await user.click(screen.getAllByText("Delete")[0]);
-    expect(deleteSpy).toHaveBeenCalled();
-  });
-
-  test("Shows close button when closeBtn is true", () => {
-    setupTest({ closeBtn: true });
-    const closeImg = document.querySelector('img[alt="Close Icon"]');
-    expect(closeImg).toBeInTheDocument();
-  });
-
-  test("Does not show close button by default", () => {
-    setupTest({ closeBtn: false });
-    const closeImg = document.querySelector('img[alt="Close Icon"]');
-    expect(closeImg).not.toBeInTheDocument();
-  });
-
-  test("Shows icon when provided", () => {
-    setupTest({ icon: "/test-icon.svg" });
-    const icon = document.querySelector('img[alt="Icon here"]');
-    expect(icon).toBeInTheDocument();
-    expect(icon).toHaveAttribute("src", "/test-icon.svg");
-  });
-
-  test("Does not show icon by default", () => {
-    setupTest();
-    const icon = document.querySelector('img[alt="Icon here"]');
-    expect(icon).not.toBeInTheDocument();
-  });
-
-  test("Maps danger action to red-solid variant", async () => {
-    const actions = [{ label: "Delete", onClick: vi.fn(), danger: true }];
-    setupTest({ actions });
-    const button = screen.getAllByText("Delete")[0].closest("button");
-    expect(button).toHaveClass("btn-red-solid");
-  });
-
-  test("Maps strokebtn + danger to red-outline variant", async () => {
-    const actions = [
-      { label: "Remove", onClick: vi.fn(), strokebtn: true, danger: true },
-    ];
-    setupTest({ actions });
-    const button = screen.getAllByText("Remove")[0].closest("button, a");
-    expect(button).toHaveClass("btn-red-outline");
-  });
-
-  test("Maps strokebtn + deemphasized to gray-outline variant", async () => {
-    const actions = [
-      { label: "Cancel", onClick: vi.fn(), strokebtn: true, deemphasized: true },
-    ];
-    setupTest({ actions });
-    const button = screen.getAllByText("Cancel")[0].closest("button, a");
-    expect(button).toHaveClass("btn-gray-outline");
-  });
-
-  test("Maps textBtn + danger to red-text variant", async () => {
-    const actions = [
-      { label: "Delete Text", onClick: vi.fn(), textBtn: true, danger: true },
-    ];
-    setupTest({ actions });
-    const button = screen.getAllByText("Delete Text")[0].closest("button, a");
-    expect(button).toHaveClass("btn-red-text");
-  });
-
-  test("Uses explicit variant when provided", async () => {
-    const actions = [
-      { label: "Custom", onClick: vi.fn(), variant: "blue-outline" },
-    ];
-    setupTest({ actions });
-    const button = screen.getAllByText("Custom")[0].closest("button, a");
-    expect(button).toHaveClass("btn-blue-outline");
-  });
-
-  test("Auto-maps Delete label to red-solid variant", async () => {
-    const actions = [{ label: "Delete", onClick: vi.fn() }];
-    setupTest({ actions });
-    const button = screen.getAllByText("Delete")[0].closest("button, a");
-    expect(button).toHaveClass("btn-red-solid");
-  });
-
-  test("Title has proper styling", () => {
-    setupTest({ title: "Modal Title" });
-    const title = screen.getAllByText("Modal Title")[0];
-    expect(title.tagName).toBe("H2");
-    expect(title).toHaveClass("text-xl");
-  });
-
-  test("Description has proper styling", () => {
-    setupTest({ description: "Description text" });
-    const desc = screen.getAllByText("Description text")[0];
-    expect(desc).toHaveClass("text-gray-500");
-    expect(desc).toHaveClass("text-sm");
-  });
-});
+import { render, screen, fireEvent, waitFor } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import ConfirmationModal from "./ConfirmationModal.svelte";
+
+const defaultActions = [
+  { label: "Cancel", onClick: vi.fn(), variant: "gray-outline" },
+  { label: "Confirm", onClick: vi.fn(), variant: "blue-solid" },
+];
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component } = render(ConfirmationModal, {
+    props: {
+      show: true,
+      title: "Test Modal",
+      description: "This is a test description",
+      actions: defaultActions.map((a) => ({ ...a, onClick: vi.fn() })),
+      ...args,
+    },
+  });
+  return { user, component };
+}
+
+describe("ConfirmationModal Component Tests", () => {
+  // Note: Modal renders both mobile sheet and desktop centered versions
+  // CSS hides one based on viewport, but in tests both are in DOM
+  // Use getAllByText/queryAllByText and check length or first element
+
+  test("Does not render when show is false", () => {
+    render(ConfirmationModal, { props: { show: false } });
+    expect(screen.queryByText("Test Modal")).not.toBeInTheDocument();
+  });
+
+  test("Renders when show is true", () => {
+    setupTest();
+    // Modal renders both mobile and desktop versions
+    expect(screen.getAllByText("Test Modal").length).toBeGreaterThan(0);
+  });
+
+  test("Displays title", () => {
+    setupTest({ title: "Confirm Delete" });
+    expect(screen.getAllByText("Confirm Delete").length).toBeGreaterThan(0);
+  });
+
+  test("Displays description", () => {
+    setupTest({ description: "Are you sure you want to proceed?" });
+    expect(
+      screen.getAllByText("Are you sure you want to proceed?").length
+    ).toBeGreaterThan(0);
+  });
+
+  test("Displays warning text when provided", () => {
+    setupTest({ warningText: "This action cannot be undone" });
+    expect(
+      screen.getAllByText("This action cannot be undone").length
+    ).toBeGreaterThan(0);
+  });
+
+  test("Warning text has danger styling", () => {
+    setupTest({ warningText: "Warning!" });
+    const warning = screen.getAllByText("Warning!")[0];
+    expect(warning).toHaveClass("text-red-600");
+    expect(warning).toHaveClass("font-medium");
+  });
+
+  test("Renders action buttons", () => {
+    const actions = [
+      { label: "No", onClick: vi.fn() },
+      { label: "Yes", onClick: vi.fn() },
+    ];
+    setupTest({ actions });
+    expect(screen.getAllByText("No").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Yes").length).toBeGreaterThan(0);
+  });
+
+  test("Calls action onClick when button clicked", async () => {
+    const cancelFn = vi.fn();
+    const confirmFn = vi.fn();
+    const actions = [
+      { label: "Cancel", onClick: cancelFn },
+      { label: "Confirm", onClick: confirmFn },
+    ];
+    const { user } = setupTest({ actions });
+
+    // Click the first Confirm button (both mobile and desktop versions exist)
+    await user.click(screen.getAllByText("Confirm")[0]);
+    expect(confirmFn).toHaveBeenCalled();
+  });
+
+  test("Dispatches event with action label", async () => {
+    const confirmFn = vi.fn();
+    const actions = [{ label: "Delete", onClick: confirmFn }];
+    const { user, component } = setupTest({ actions });
+
+    const deleteSpy = vi.fn();
+    component.$on("delete", deleteSpy);
+
+    await user.click(screen.getAllByText("Delete")[0]);
+    expect(deleteSpy).toHaveBeenCalled();
+  });
+
+  test("Shows close button when closeBtn is true", () => {
+    setupTest({ closeBtn: true });
+    const closeImg = document.querySelector('img[alt="Close Icon"]');
+    expect(closeImg).toBeInTheDocument();
+  });
+
+  test("Does not show close button by default", () => {
+    setupTest({ closeBtn: false });
+    const closeImg = document.querySelector('img[alt="Close Icon"]');
+    expect(closeImg).not.toBeInTheDocument();
+  });
+
+  test("Shows icon when provided", () => {
+    setupTest({ icon: "/test-icon.svg" });
+    const icon = document.querySelector('img[alt="Icon here"]');
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveAttribute("src", "/test-icon.svg");
+  });
+
+  test("Does not show icon by default", () => {
+    setupTest();
+    const icon = document.querySelector('img[alt="Icon here"]');
+    expect(icon).not.toBeInTheDocument();
+  });
+
+  test("Maps danger action to red-solid variant", async () => {
+    const actions = [{ label: "Delete", onClick: vi.fn(), danger: true }];
+    setupTest({ actions });
+    const button = screen.getAllByText("Delete")[0].closest("button");
+    expect(button).toHaveClass("btn-red-solid");
+  });
+
+  test("Maps strokebtn + danger to red-outline variant", async () => {
+    const actions = [
+      { label: "Remove", onClick: vi.fn(), strokebtn: true, danger: true },
+    ];
+    setupTest({ actions });
+    const button = screen.getAllByText("Remove")[0].closest("button, a");
+    expect(button).toHaveClass("btn-red-outline");
+  });
+
+  test("Maps strokebtn + deemphasized to gray-outline variant", async () => {
+    const actions = [
+      { label: "Cancel", onClick: vi.fn(), strokebtn: true, deemphasized: true },
+    ];
+    setupTest({ actions });
+    const button = screen.getAllByText("Cancel")[0].closest("button, a");
+    expect(button).toHaveClass("btn-gray-outline");
+  });
+
+  test("Maps textBtn + danger to red-text variant", async () => {
+    const actions = [
+      { label: "Delete Text", onClick: vi.fn(), textBtn: true, danger: true },
+    ];
+    setupTest({ actions });
+    const button = screen.getAllByText("Delete Text")[0].closest("button, a");
+    expect(button).toHaveClass("btn-red-text");
+  });
+
+  test("Uses explicit variant when provided", async () => {
+    const actions = [
+      { label: "Custom", onClick: vi.fn(), variant: "blue-outline" },
+    ];
+    setupTest({ actions });
+    const button = screen.getAllByText("Custom")[0].closest("button, a");
+    expect(button).toHaveClass("btn-blue-outline");
+  });
+
+  test("Auto-maps Delete label to red-solid variant", async () => {
+    const actions = [{ label: "Delete", onClick: vi.fn() }];
+    setupTest({ actions });
+    const button = screen.getAllByText("Delete")[0].closest("button, a");
+    expect(button).toHaveClass("btn-red-solid");
+  });
+
+  test("Title has proper styling", () => {
+    setupTest({ title: "Modal Title" });
+    const title = screen.getAllByText("Modal Title")[0];
+    expect(title.tagName).toBe("H2");
+    expect(title).toHaveClass("text-xl");
+  });
+
+  test("Description has proper styling", () => {
+    setupTest({ description: "Description text" });
+    const desc = screen.getAllByText("Description text")[0];
+    expect(desc).toHaveClass("text-gray-500");
+    expect(desc).toHaveClass("text-sm");
+  });
+});