@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/primitives/Label/Label.spec.js

@@ -0,0 +1,157 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import Label from './Label.svelte';
+
+describe('Label Component', () => {
+  test('renders a label element', () => {
+    const { container } = render(Label);
+    expect(container.querySelector('label')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Label, { props: { class: 'custom-label' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('custom-label');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(Label, { props: { 'data-testid': 'my-label' } });
+    const label = container.querySelector('[data-testid="my-label"]');
+    expect(label).toBeInTheDocument();
+  });
+
+  test('passes for attribute', () => {
+    const { container } = render(Label, { props: { for: 'input-id' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveAttribute('for', 'input-id');
+  });
+});
+
+describe('Label Colors', () => {
+  test('default color is gray', () => {
+    const { container } = render(Label);
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('text-gray-900');
+  });
+
+  test('gray color applies text-gray-900', () => {
+    const { container } = render(Label, { props: { color: 'gray' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('text-gray-900');
+  });
+
+  test('green color applies text-green-700', () => {
+    const { container } = render(Label, { props: { color: 'green' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('text-green-700');
+  });
+
+  test('red color applies text-red-700', () => {
+    const { container } = render(Label, { props: { color: 'red' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('text-red-700');
+  });
+
+  test('disabled color applies text-gray-400', () => {
+    const { container } = render(Label, { props: { color: 'disabled' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('text-gray-400');
+  });
+});
+
+describe('Label Dark Mode', () => {
+  test('gray has dark mode class', () => {
+    const { container } = render(Label, { props: { color: 'gray' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('dark:text-gray-300');
+  });
+
+  test('green has dark mode class', () => {
+    const { container } = render(Label, { props: { color: 'green' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('dark:text-green-500');
+  });
+
+  test('red has dark mode class', () => {
+    const { container } = render(Label, { props: { color: 'red' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('dark:text-red-500');
+  });
+
+  test('disabled has dark mode class', () => {
+    const { container } = render(Label, { props: { color: 'disabled' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('dark:text-gray-500');
+  });
+});
+
+describe('Label Show Prop', () => {
+  test('shows label by default (show=true)', () => {
+    const { container } = render(Label);
+    expect(container.querySelector('label')).toBeInTheDocument();
+  });
+
+  test('hides label when show is false', () => {
+    const { container } = render(Label, { props: { show: false } });
+    expect(container.querySelector('label')).not.toBeInTheDocument();
+  });
+
+  test('renders children without label when show is false', () => {
+    // When show=false, children render without label wrapper
+    const { container } = render(Label, { props: { show: false } });
+    expect(container.querySelector('label')).not.toBeInTheDocument();
+  });
+});
+
+describe('Label Default Styling', () => {
+  test('has text-sm class', () => {
+    const { container } = render(Label);
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('text-sm');
+  });
+
+  test('has font-medium class', () => {
+    const { container } = render(Label);
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('font-medium');
+  });
+
+  test('has block display', () => {
+    const { container } = render(Label);
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('block');
+  });
+
+  test('has rtl:text-right for RTL support', () => {
+    const { container } = render(Label);
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('rtl:text-right');
+  });
+});
+
+describe('Label Custom Default Class', () => {
+  test('accepts defaultClass prop', () => {
+    const { container } = render(Label, { props: { defaultClass: 'text-lg font-bold' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('text-lg');
+    expect(label).toHaveClass('font-bold');
+  });
+
+  test('defaultClass replaces default styling', () => {
+    const { container } = render(Label, { props: { defaultClass: 'custom-default' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('custom-default');
+  });
+});
+
+describe('Label Class Composition', () => {
+  test('combines defaultClass, color class, and custom class', () => {
+    const { container } = render(Label, {
+      props: { color: 'green', class: 'extra-class' }
+    });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('text-sm'); // from defaultClass
+    expect(label).toHaveClass('text-green-700'); // from color
+    expect(label).toHaveClass('extra-class'); // from custom class
+  });
+});

package/dist/primitives/Label/Label.svelte

@@ -1,37 +1,37 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    color?: 'gray' | 'green' | 'red' | 'disabled';
-    defaultClass?: string;
-    show?: boolean;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  let {
-    color = "gray",
-    defaultClass = "text-sm rtl:text-right font-medium block",
-    show = true,
-    class: className = "",
-    children,
-    ...restProps
-  }: Props = $props();
-
-  const colorClasses = {
-    gray: "text-gray-900 dark:text-gray-300",
-    green: "text-green-700 dark:text-green-500",
-    red: "text-red-700 dark:text-red-500",
-    disabled: "text-gray-400 dark:text-gray-500"
-  };
-
-  let labelClass = $derived(`${defaultClass} ${colorClasses[color] || colorClasses.gray} ${className}`.trim());
-</script>
-
-{#if show}
-  <!-- svelte-ignore a11y_label_has_associated_control -->
-  <label {...restProps} class={labelClass}>{#if children}{@render children()}{/if}</label>
-{:else}
-  {#if children}{@render children()}{/if}
-{/if}
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    color?: 'gray' | 'green' | 'red' | 'disabled';
+    defaultClass?: string;
+    show?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    color = "gray",
+    defaultClass = "text-sm rtl:text-right font-medium block",
+    show = true,
+    class: className = "",
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const colorClasses = {
+    gray: "text-gray-900 dark:text-gray-300",
+    green: "text-green-700 dark:text-green-500",
+    red: "text-red-700 dark:text-red-500",
+    disabled: "text-gray-400 dark:text-gray-500"
+  };
+
+  let labelClass = $derived(`${defaultClass} ${colorClasses[color] || colorClasses.gray} ${className}`.trim());
+</script>
+
+{#if show}
+  <!-- svelte-ignore a11y_label_has_associated_control -->
+  <label {...restProps} class={labelClass}>{#if children}{@render children()}{/if}</label>
+{:else}
+  {#if children}{@render children()}{/if}
+{/if}

package/dist/primitives/Modal/Modal.spec.js

@@ -1,95 +1,99 @@
-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);
-  });
-});
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi } from 'vitest';
+import ModalTestWrapper from './ModalTestWrapper.svelte';
+
+function setupTest(args) {
+  const user = userEvent.setup();
+  const { component, rerender } = render(ModalTestWrapper, { props: { ...args } });
+  return { user, component, rerender };
+}
+
+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((content, element) => content.includes('Test Title')).length).toBeGreaterThan(0);
+    expect(screen.getAllByText((content, element) => content.includes('Test Description')).length).toBeGreaterThan(0);
+    expect(screen.getAllByText((content, element) => content.includes('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((content) => content.includes(title)).length).toBeGreaterThan(0);
+    expect(screen.getAllByText((content) => content.includes(description)).length).toBeGreaterThan(0);
+    expect(screen.getAllByText((content) => content.includes(warningText)).length).toBeGreaterThan(0);
+  });
+
+  test('Dispatches cancel event on escape key press', async () => {
+    // Create a mock function to track cancel calls
+    const oncancel = vi.fn();
+
+    const { user } = setupTest({
+      show: true,
+      title: 'Test Title',
+      oncancel
+    });
+
+    // Verify modal is open
+    expect(screen.getAllByText((content) => content.includes('Test Title')).length).toBeGreaterThan(0);
+
+    // Press Escape key
+    await fireEvent.keyDown(window, { key: 'Escape' });
+
+    // Cancel callback should be called
+    expect(oncancel).toHaveBeenCalled();
+  });
+
+  test('Prevents propagation of click events within modal', async () => {
+    const { user } = setupTest({
+      show: true,
+      title: 'Test Title'
+    });
+
+    // Find the modal content (first instance)
+    const modalElements = screen.getAllByText((content) => content.includes('Test Title'));
+    expect(modalElements.length).toBeGreaterThan(0);
+
+    const modalContent = modalElements[0].closest('.md\\:hidden, .hidden');
+    if (modalContent) {
+      const clickEvent = new MouseEvent('click', { bubbles: true });
+      modalContent.dispatchEvent(clickEvent);
+
+      // Modal should still be visible
+      expect(screen.getAllByText((content) => content.includes('Test Title')).length).toBeGreaterThan(0);
+    }
+  });
+});

package/dist/primitives/Modal/Modal.stories.svelte

@@ -1,86 +1,86 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import ModalProgress from "./Modal.svelte";
-
-  const { Story } = defineMeta({
-    title: "Components/Modal/ModalProgress",
-    component: ModalProgress,
-  });
-</script>
-
-<script>
-  let show1 = $state(false);
-  let show2 = $state(false);
-  let show3 = $state(false);
-</script>
-
-<Story name="Basic Modal">
-  <button
-    onclick={() => (show1 = true)}
-    class="px-4 py-2 bg-primary text-white rounded-lg"
-  >
-    Open Basic Modal
-  </button>
-  <ModalProgress bind:show={show1}>
-    {#snippet header()}
-      <h2 class="text-xl font-semibold mb-2">Modal Title</h2>
-    {/snippet}
-    {#snippet body()}
-      <p class="text-gray-500 dark:text-gray-400">This is the modal body content.</p>
-    {/snippet}
-    {#snippet footer()}
-      <button
-        onclick={() => (show1 = false)}
-        class="px-4 py-2 bg-gray-600 text-white rounded-lg"
-      >
-        Close
-      </button>
-    {/snippet}
-  </ModalProgress>
-</Story>
-
-<Story name="Processing State">
-  <button
-    onclick={() => (show2 = true)}
-    class="px-4 py-2 bg-primary text-white rounded-lg"
-  >
-    Open Processing Modal
-  </button>
-  <ModalProgress bind:show={show2} isProcessing={true}>
-    {#snippet body()}
-      <div class="flex flex-col items-center gap-4">
-        <div
-          class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"
-        ></div>
-        <p class="text-gray-500 dark:text-gray-400">Processing your request...</p>
-      </div>
-    {/snippet}
-  </ModalProgress>
-</Story>
-
-<Story name="Success State">
-  <button
-    onclick={() => (show3 = true)}
-    class="px-4 py-2 bg-green-600 text-white rounded-lg"
-  >
-    Open Success Modal
-  </button>
-  <ModalProgress bind:show={show3} isSuccess={true}>
-    {#snippet body()}
-      <div class="flex flex-col items-center gap-4 text-center">
-        <div class="text-green-600 dark:text-green-400 text-5xl">✓</div>
-        <h3 class="text-xl font-semibold">Success!</h3>
-        <p class="text-gray-500 dark:text-gray-400">Your action was completed successfully.</p>
-      </div>
-    {/snippet}
-    {#snippet footer()}
-      <button
-        onclick={() => (show3 = false)}
-        class="px-4 py-2 bg-green-600 text-white rounded-lg"
-      >
-        Done
-      </button>
-    {/snippet}
-  </ModalProgress>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import ModalProgress from "./Modal.svelte";
+
+  const { Story } = defineMeta({
+    title: "Components/Modal/ModalProgress",
+    component: ModalProgress,
+  });
+</script>
+
+<script>
+  let show1 = $state(false);
+  let show2 = $state(false);
+  let show3 = $state(false);
+</script>
+
+<Story name="Basic Modal">
+  <button
+    onclick={() => (show1 = true)}
+    class="px-4 py-2 bg-primary text-white rounded-lg"
+  >
+    Open Basic Modal
+  </button>
+  <ModalProgress bind:show={show1}>
+    {#snippet header()}
+      <h2 class="text-xl font-semibold mb-2">Modal Title</h2>
+    {/snippet}
+    {#snippet body()}
+      <p class="text-gray-500 dark:text-gray-400">This is the modal body content.</p>
+    {/snippet}
+    {#snippet footer()}
+      <button
+        onclick={() => (show1 = false)}
+        class="px-4 py-2 bg-gray-600 text-white rounded-lg"
+      >
+        Close
+      </button>
+    {/snippet}
+  </ModalProgress>
+</Story>
+
+<Story name="Processing State">
+  <button
+    onclick={() => (show2 = true)}
+    class="px-4 py-2 bg-primary text-white rounded-lg"
+  >
+    Open Processing Modal
+  </button>
+  <ModalProgress bind:show={show2} isProcessing={true}>
+    {#snippet body()}
+      <div class="flex flex-col items-center gap-4">
+        <div
+          class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"
+        ></div>
+        <p class="text-gray-500 dark:text-gray-400">Processing your request...</p>
+      </div>
+    {/snippet}
+  </ModalProgress>
+</Story>
+
+<Story name="Success State">
+  <button
+    onclick={() => (show3 = true)}
+    class="px-4 py-2 bg-green-600 text-white rounded-lg"
+  >
+    Open Success Modal
+  </button>
+  <ModalProgress bind:show={show3} isSuccess={true}>
+    {#snippet body()}
+      <div class="flex flex-col items-center gap-4 text-center">
+        <div class="text-green-600 dark:text-green-400 text-5xl">✓</div>
+        <h3 class="text-xl font-semibold">Success!</h3>
+        <p class="text-gray-500 dark:text-gray-400">Your action was completed successfully.</p>
+      </div>
+    {/snippet}
+    {#snippet footer()}
+      <button
+        onclick={() => (show3 = false)}
+        class="px-4 py-2 bg-green-600 text-white rounded-lg"
+      >
+        Done
+      </button>
+    {/snippet}
+  </ModalProgress>
+</Story>