@getmicdrop/svelte-components 1.0.1 → 1.0.3

package/dist/components/Modal/ConfirmationModal.spec.js

@@ -0,0 +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-accent-Danger");
+    expect(warning).toHaveClass("font-bold");
+  });
+
+  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-Text-Tartiary");
+    expect(desc).toHaveClass("text-sm");
+  });
+});

package/dist/components/Modal/ConfirmationModal.stories.svelte

@@ -0,0 +1,124 @@
+<script context="module">
+  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";
+
+  export const meta = {
+    title: "Components/Modal",
+    component: Modal,
+    argTypes: {
+      title: { control: "text" },
+      description: { control: "text" },
+      warningText: { control: "text" },
+    },
+  };
+</script>
+
+<script>
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+
+  function handleAction(label) {
+    console.log(label + " action triggered");
+  }
+</script>
+
+<Template let:args>
+  <Modal
+    {...args}
+    on:cancel={() => handleAction("cancel")}
+    on:confirm={() => handleAction("confirm")}
+  ></Modal>
+</Template>
+
+<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!",
+  }}
+  />

package/dist/components/Modal/ConfirmationModal.stories.svelte.d.ts

@@ -0,0 +1,45 @@
+export namespace meta {
+    export let title: string;
+    export { Modal as component };
+    export namespace argTypes {
+        export namespace title_1 {
+            let control: string;
+        }
+        export { title_1 as title };
+        export namespace description {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        export namespace warningText {
+            let control_2: string;
+            export { control_2 as control };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  ConfirmationModalProps */
+/** @typedef {typeof __propDef.events}  ConfirmationModalEvents */
+/** @typedef {typeof __propDef.slots}  ConfirmationModalSlots */
+export default class ConfirmationModal extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ConfirmationModalProps = typeof __propDef.props;
+export type ConfirmationModalEvents = typeof __propDef.events;
+export type ConfirmationModalSlots = typeof __propDef.slots;
+import Modal from "./ConfirmationModal.svelte";
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=ConfirmationModal.stories.svelte.d.ts.map

package/dist/components/Modal/ConfirmationModal.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationModal.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/ConfirmationModal.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAgHA,gEAAgE;AAChE,kEAAkE;AAClE,gEAAgE;AAEhE;;;;;CACC;qCALa,OAAO,SAAS,CAAC,KAAK;sCACtB,OAAO,SAAS,CAAC,MAAM;qCACvB,OAAO,SAAS,CAAC,KAAK;kBA/GhB,4BAA4B;gCAHhB,QAAQ;AA+GxC;;;;;;;;;;EAAgF"}

package/dist/components/Modal/ConfirmationModal.svelte

@@ -0,0 +1,105 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import Button from "../Button/Button.svelte";
+  import Cancel from "../../assets/svg/cancel.svg";
+  import Modal from "./Modal.svelte";
+
+  export let show = false;
+  export let title = "";
+  export let description = "";
+  export let warningText = "";
+  export let actions = [];
+  export let icon = null;
+  export let closeBtn = false; // To show close button
+
+  const dispatch = createEventDispatcher();
+
+  const handleAction = (action) => {
+    action.onClick();
+    dispatch(action.label.toLowerCase());
+    show = false;
+  };
+
+  const getVariant = (action) => {
+    // If variant is already specified, use it
+    if (action.variant) return action.variant;
+
+    const { strokebtn, deemphasized, btnDanger, danger, textBtn } = action;
+
+    // Map old props to new variants
+    if (strokebtn && deemphasized) return "gray-outline";
+    if ((strokebtn && danger) || (btnDanger && strokebtn)) return "red-outline";
+    if (strokebtn) return "blue-outline";
+    if (textBtn && danger) return "red-text";
+    if (danger || btnDanger || action.label === "Delete") return "red-solid";
+
+    // Default variant
+    return undefined;
+  };
+
+  const cleanActionProps = (action) => {
+    const {
+      strokebtn,
+      deemphasized,
+      btnDanger,
+      danger,
+      textBtn,
+      label,
+      onClick,
+      beforeIcon,
+      afterIcon,
+      ...rest
+    } = action;
+    return rest;
+  };
+</script>
+
+<Modal bind:show>
+  <div slot="header" class="flex flex-col gap-6 text-center">
+    {#if closeBtn}
+      <div class="flex justify-end">
+        <button class="focus:outline-none" on:click={() => (show = false)}>
+          <img src={Cancel} alt="Close Icon" />
+        </button>
+      </div>
+    {/if}
+    {#if icon}
+      <div class="flex justify-center items-center">
+        <img src={icon} alt="Icon here" />
+      </div>
+    {/if}
+    {#if title}
+      <h2 class="text-xl text-Text-Primary leading-5 font-normal">{title}</h2>
+    {/if}
+  </div>
+
+  <div slot="body" class="flex flex-col gap-6 text-center mt-6">
+    {#if description}
+      <p class="text-Text-Tartiary text-sm leading-[22px] font-normal">
+        {description}
+      </p>
+    {/if}
+    {#if warningText}
+      <p
+        class="text-accent-Danger text-center text-sm leading-[22px] font-bold"
+      >
+        {warningText}
+      </p>
+    {/if}
+  </div>
+
+  <div slot="footer" class="flex justify-around gap-3 mt-6">
+    {#each actions as action}
+      <Button
+        size="full"
+        variant={getVariant(action)}
+        {...cleanActionProps(action)}
+        beforeIcon={action.beforeIcon}
+        afterIcon={action.afterIcon}
+        on:click={() => handleAction(action)}
+      >
+        {action.label}
+      </Button>
+    {/each}
+  </div>
+</Modal>

package/dist/components/Modal/ConfirmationModal.svelte.d.ts

@@ -0,0 +1,38 @@
+/** @typedef {typeof __propDef.props}  ConfirmationModalProps */
+/** @typedef {typeof __propDef.events}  ConfirmationModalEvents */
+/** @typedef {typeof __propDef.slots}  ConfirmationModalSlots */
+export default class ConfirmationModal extends SvelteComponent<{
+    title?: string | undefined;
+    actions?: any[] | undefined;
+    show?: boolean | undefined;
+    icon?: null | undefined;
+    description?: string | undefined;
+    warningText?: string | undefined;
+    closeBtn?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ConfirmationModalProps = typeof __propDef.props;
+export type ConfirmationModalEvents = typeof __propDef.events;
+export type ConfirmationModalSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        actions?: any[] | undefined;
+        show?: boolean | undefined;
+        icon?: null | undefined;
+        description?: string | undefined;
+        warningText?: string | undefined;
+        closeBtn?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=ConfirmationModal.svelte.d.ts.map

package/dist/components/Modal/ConfirmationModal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/ConfirmationModal.svelte.js"],"names":[],"mappings":"AA4GA,gEAAgE;AAChE,kEAAkE;AAClE,gEAAgE;AAEhE;;;;;;;;;;;CACC;qCALa,OAAO,SAAS,CAAC,KAAK;sCACtB,OAAO,SAAS,CAAC,MAAM;qCACvB,OAAO,SAAS,CAAC,KAAK;gCA9GJ,QAAQ;AA2GxC;;;;;;;;;;;;;;;;EAA0J"}

package/dist/components/Modal/Modal.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Modal.spec.d.ts.map

package/dist/components/Modal/Modal.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Modal/Modal.spec.js"],"names":[],"mappings":""}

package/dist/components/Modal/Modal.spec.js

@@ -0,0 +1,95 @@
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test } from 'vitest';
+import ModalTestWrapper from './ModalTestWrapper.svelte';
+
+function setupTest(args) {
+  const user = userEvent.setup();
+  const { component } = render(ModalTestWrapper, { props: { ...args } });
+  return { user, component };
+}
+
+describe('Modal 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 and check that at least one exists
+
+  test('Renders Modal when show is true', () => {
+    setupTest({
+      show: true,
+      title: 'Test Title',
+      description: 'Test Description',
+      warningText: 'Test Warning'
+    });
+    // Modal renders both mobile and desktop versions, so use getAllByText
+    expect(screen.getAllByText('Test Title').length).toBeGreaterThan(0);
+    expect(screen.getAllByText(/Test Description/).length).toBeGreaterThan(0);
+    expect(screen.getAllByText(/Test Warning/).length).toBeGreaterThan(0);
+    expect(screen.getAllByRole('button', { name: /Cancel/i }).length).toBeGreaterThan(0);
+    expect(screen.getAllByRole('button', { name: /Confirm/i }).length).toBeGreaterThan(0);
+  });
+
+  test('Does not render Modal when show is false', () => {
+    setupTest({
+      show: false,
+      title: 'Test Title',
+      description: 'Test Description',
+      warningText: 'Test Warning'
+    });
+    expect(screen.queryByText('Test Title')).not.toBeInTheDocument();
+    expect(screen.queryByText('Test Description')).not.toBeInTheDocument();
+    expect(screen.queryByText('Test Warning')).not.toBeInTheDocument();
+  });
+
+  test('Displays the correct title, description, and warning text', () => {
+    const title = 'Correct Title';
+    const description = 'Correct Description';
+    const warningText = 'Correct Warning';
+    setupTest({
+      show: true,
+      title,
+      description,
+      warningText,
+    });
+    // Modal renders both mobile and desktop versions
+    expect(screen.getAllByText(title).length).toBeGreaterThan(0);
+    expect(screen.getAllByText(new RegExp(description)).length).toBeGreaterThan(0);
+    expect(screen.getAllByText(new RegExp(warningText)).length).toBeGreaterThan(0);
+  });
+
+  test('Dispatches cancel event on escape key press', async () => {
+    const { user, component } = setupTest({
+      show: true,
+      title: 'Test Title'
+    });
+
+    // Verify modal is open
+    expect(screen.getAllByText('Test Title').length).toBeGreaterThan(0);
+
+    // Listen for the cancel event
+    let cancelCalled = false;
+    component.$on('cancel', () => { cancelCalled = true; });
+
+    // Press Escape key
+    await fireEvent.keyDown(window, { key: 'Escape' });
+
+    // Cancel event should be dispatched
+    expect(cancelCalled).toBe(true);
+  });
+
+  test('Prevents propagation of click events within modal', async () => {
+    const { user } = setupTest({
+      show: true,
+      title: 'Test Title'
+    });
+
+    // Find the modal sheet content (first instance)
+    const modalText = screen.getAllByText('Test Title')[0];
+    const modalContent = modalText.closest('.modal-sheet') || modalText.closest('.modal-centered');
+    const clickEvent = new MouseEvent('click', { bubbles: true });
+    modalContent.dispatchEvent(clickEvent);
+
+    // Modal should still be visible
+    expect(screen.getAllByText('Test Title').length).toBeGreaterThan(0);
+  });
+});