@getmicdrop/svelte-components 5.5.4 → 5.6.0

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

@@ -1,191 +1,206 @@
-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();
+  });
+
+  // Note: Svelte 5 removed $on - component no longer dispatches custom events
+  // The component calls action.onClick directly, which we test above
+  test("Clicking action calls onClick handler", async () => {
+    const confirmFn = vi.fn();
+    const actions = [{ label: "Delete", onClick: confirmFn }];
+    const { user } = setupTest({ actions });
+
+    await user.click(screen.getAllByText("Delete")[0]);
+    expect(confirmFn).toHaveBeenCalled();
+  });
+
+  test("Shows close button when closeBtn is true", () => {
+    setupTest({ closeBtn: true });
+    const closeImg = document.querySelector('img[alt="Close"]');
+    expect(closeImg).toBeInTheDocument();
+  });
+
+  test("Does not show close button by default", () => {
+    setupTest({ closeBtn: false });
+    const closeImg = document.querySelector('img[alt="Close"]');
+    expect(closeImg).not.toBeInTheDocument();
+  });
+
+  test("Shows icon when provided", () => {
+    setupTest({ icon: "/test-icon.svg" });
+    const icon = document.querySelector('img[alt=""]');
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveAttribute("src", "/test-icon.svg");
+  });
+
+  test("Does not show icon by default", () => {
+    setupTest();
+    const icon = document.querySelector('img[alt=""]');
+    expect(icon).not.toBeInTheDocument();
+  });
+
+  test("Maps danger action to red variant", async () => {
+    const actions = [{ label: "Delete", onClick: vi.fn(), danger: true }];
+    setupTest({ actions });
+    const button = screen.getAllByText("Delete")[0].closest("button");
+    // Button applies Tailwind classes for red variant
+    expect(button).toHaveClass("bg-red-700");
+    expect(button).toHaveClass("text-white");
+  });
+
+  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");
+    // Button applies Tailwind classes for red-outline variant
+    expect(button).toHaveClass("text-red-700");
+    expect(button).toHaveClass("bg-transparent");
+    expect(button).toHaveClass("border-red-700");
+  });
+
+  test("Maps strokebtn + deemphasized to alternative variant", async () => {
+    const actions = [
+      { label: "Cancel", onClick: vi.fn(), strokebtn: true, deemphasized: true },
+    ];
+    setupTest({ actions });
+    const button = screen.getAllByText("Cancel")[0].closest("button, a");
+    // Button applies Tailwind classes for alternative variant
+    expect(button).toHaveClass("text-gray-900");
+    expect(button).toHaveClass("bg-white");
+    expect(button).toHaveClass("border-gray-200");
+  });
+
+  test("Maps textBtn + danger to ghost-red 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");
+    // Button applies Tailwind classes for ghost-red variant
+    expect(button).toHaveClass("text-red-700");
+    expect(button).toHaveClass("bg-transparent");
+    expect(button).toHaveClass("border-transparent");
+  });
+
+  test("Uses explicit variant when provided", async () => {
+    const actions = [
+      { label: "Custom", onClick: vi.fn(), variant: "outline" },
+    ];
+    setupTest({ actions });
+    const button = screen.getAllByText("Custom")[0].closest("button, a");
+    // Button applies Tailwind classes for outline variant
+    expect(button).toHaveClass("text-blue-700");
+    expect(button).toHaveClass("bg-transparent");
+    expect(button).toHaveClass("border-blue-700");
+  });
+
+  test("Auto-maps Delete label to red variant", async () => {
+    const actions = [{ label: "Delete", onClick: vi.fn() }];
+    setupTest({ actions });
+    const button = screen.getAllByText("Delete")[0].closest("button, a");
+    // Button applies Tailwind classes for red variant (auto-detected from "Delete" label)
+    expect(button).toHaveClass("bg-red-700");
+    expect(button).toHaveClass("text-white");
+  });
+
+  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");
+  });
+});

package/dist/recipes/modals/ConfirmationModal.stories.svelte

@@ -1,119 +1,119 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import Modal from "./ConfirmationModal.svelte";
-
-  import SuccessIcon from "./../../assets/svg/Success-icon.svg";
-  import AttachmentIcon from "./../../assets/svg/attachment-square.svg";
-  import TickIcon from "./../../assets/icons/tick-01.png";
-
-  import ArrowLeft from "./../../assets/svg/arrow-left-02.svg";
-
-  const { Story } = defineMeta({
-    title: "Components/Modal",
-    component: Modal,
-    argTypes: {
-      title: { control: "text" },
-      description: { control: "text" },
-      warningText: { control: "text" },
-    },
-  });
-
-</script>
-
-<script>
-  
-  function handleAction(label) {
-    console.log(label + " action triggered");
-  }
-</script>
-
-
-<Story
-  name="Interactive Custom Modal"
-  args={{
-    show: true,
-    title: "Are you sure?",
-    description: "Please confirm that you want to proceed with this action.",
-    warningText: "This action is irreversible!",
-    actions: [
-      {
-        label: "Cancel",
-        onClick: () => console.log("Cancelled"),
-        variant: "gray-outline",
-      },
-      { label: "Confirm", onClick: () => console.log("Confirmed") },
-    ],
-    icon: SuccessIcon,
-  }}
-></Story>
-
-<Story
-  name="Success Modal"
-  args={{
-    show: true,
-    title: "Avail requests sent",
-    actions: [{ label: "Confirm", onClick: () => console.log("Confirmed") }],
-    icon: SuccessIcon,
-  }}
-></Story>
-
-<Story
-  name="Confirm Modal"
-  args={{
-    show: true,
-    title: "Create New Tracking Link",
-    description:
-      "Enter a name for your tracking link. This name will be used for reference on your dashboard.",
-    actions: [
-      {
-        label: "Cancel",
-        onClick: () => console.log("Cancelled"),
-        variant: "gray-outline",
-      },
-      { label: "Confirm", onClick: () => console.log("Confirmed") },
-    ],
-    icon: AttachmentIcon,
-  }}
-></Story>
-
-<Story
-  name="Password Reset Modal"
-  args={{
-    show: true,
-    title: "Password Reset!",
-    description:
-      "Your password has been successfully reset, click below to continue your access.",
-    actions: [
-      {
-        label: "Return to the login Screen",
-        onClick: () => console.log("Cancelled"),
-        variant: "blue-outline",
-        beforeIcon: ArrowLeft,
-      },
-    ],
-    icon: TickIcon,
-  }}
-></Story>
-
-<Story
-  name="Info Modal"
-  args={{
-    show: true,
-    title: "Please fill out your profile",
-    description:
-      "Your information may be used for show promotion, so please provide as much as you can.",
-    actions: [{ label: "Confirm", onClick: () => console.log("Confirmed") }],
-  }}
-></Story>
-
-<Story
-  name="Warning Modal"
-  args={{
-    show: true,
-    title: "Are you sure?",
-    description: "Please confirm that you want to proceed with this action.",
-    closeBtn: true,
-    warningText: "This action is irreversible!",
-  }}
-  />
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import Modal from "./ConfirmationModal.svelte";
+
+  import SuccessIcon from "./../../assets/svg/Success-icon.svg";
+  import AttachmentIcon from "./../../assets/svg/attachment-square.svg";
+  import TickIcon from "./../../assets/icons/tick-01.png";
+
+  import ArrowLeft from "./../../assets/svg/arrow-left-02.svg";
+
+  const { Story } = defineMeta({
+    title: "Components/Modal",
+    component: Modal,
+    argTypes: {
+      title: { control: "text" },
+      description: { control: "text" },
+      warningText: { control: "text" },
+    },
+  });
+
+</script>
+
+<script>
+  
+  function handleAction(label) {
+    console.log(label + " action triggered");
+  }
+</script>
+
+
+<Story
+  name="Interactive Custom Modal"
+  args={{
+    show: true,
+    title: "Are you sure?",
+    description: "Please confirm that you want to proceed with this action.",
+    warningText: "This action is irreversible!",
+    actions: [
+      {
+        label: "Cancel",
+        onClick: () => console.log("Cancelled"),
+        variant: "gray-outline",
+      },
+      { label: "Confirm", onClick: () => console.log("Confirmed") },
+    ],
+    icon: SuccessIcon,
+  }}
+></Story>
+
+<Story
+  name="Success Modal"
+  args={{
+    show: true,
+    title: "Avail requests sent",
+    actions: [{ label: "Confirm", onClick: () => console.log("Confirmed") }],
+    icon: SuccessIcon,
+  }}
+></Story>
+
+<Story
+  name="Confirm Modal"
+  args={{
+    show: true,
+    title: "Create New Tracking Link",
+    description:
+      "Enter a name for your tracking link. This name will be used for reference on your dashboard.",
+    actions: [
+      {
+        label: "Cancel",
+        onClick: () => console.log("Cancelled"),
+        variant: "gray-outline",
+      },
+      { label: "Confirm", onClick: () => console.log("Confirmed") },
+    ],
+    icon: AttachmentIcon,
+  }}
+></Story>
+
+<Story
+  name="Password Reset Modal"
+  args={{
+    show: true,
+    title: "Password Reset!",
+    description:
+      "Your password has been successfully reset, click below to continue your access.",
+    actions: [
+      {
+        label: "Return to the login Screen",
+        onClick: () => console.log("Cancelled"),
+        variant: "blue-outline",
+        beforeIcon: ArrowLeft,
+      },
+    ],
+    icon: TickIcon,
+  }}
+></Story>
+
+<Story
+  name="Info Modal"
+  args={{
+    show: true,
+    title: "Please fill out your profile",
+    description:
+      "Your information may be used for show promotion, so please provide as much as you can.",
+    actions: [{ label: "Confirm", onClick: () => console.log("Confirmed") }],
+  }}
+></Story>
+
+<Story
+  name="Warning Modal"
+  args={{
+    show: true,
+    title: "Are you sure?",
+    description: "Please confirm that you want to proceed with this action.",
+    closeBtn: true,
+    warningText: "This action is irreversible!",
+  }}
+  />