@getmicdrop/svelte-components 5.5.4 → 5.5.5

package/dist/patterns/data/DataList.spec.js

@@ -0,0 +1,158 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import DataList from './DataList.svelte';
+
+describe('DataList Component', () => {
+  test('renders a ul element', () => {
+    const { container } = render(DataList);
+    expect(container.querySelector('ul')).toBeInTheDocument();
+  });
+
+  test('has role="list"', () => {
+    const { container } = render(DataList);
+    const list = container.querySelector('ul');
+    expect(list).toHaveAttribute('role', 'list');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(DataList, { props: { class: 'custom-list' } });
+    const list = container.querySelector('ul');
+    expect(list).toHaveClass('custom-list');
+  });
+});
+
+describe('DataList Dividers', () => {
+  test('dividers are enabled by default', () => {
+    const { container } = render(DataList);
+    const list = container.querySelector('ul');
+    expect(list).toHaveClass('divide-y');
+    expect(list).toHaveClass('divide-gray-200');
+  });
+
+  test('dividers=true shows divide classes', () => {
+    const { container } = render(DataList, { props: { dividers: true } });
+    const list = container.querySelector('ul');
+    expect(list).toHaveClass('divide-y');
+    expect(list).toHaveClass('divide-gray-200');
+  });
+
+  test('dividers=false removes divide classes', () => {
+    const { container } = render(DataList, { props: { dividers: false } });
+    const list = container.querySelector('ul');
+    expect(list).not.toHaveClass('divide-y');
+    expect(list).not.toHaveClass('divide-gray-200');
+  });
+
+  test('dividers have dark mode class', () => {
+    const { container } = render(DataList, { props: { dividers: true } });
+    const list = container.querySelector('ul');
+    expect(list).toHaveClass('dark:divide-gray-700');
+  });
+});
+
+describe('DataList Gap', () => {
+  test('gap defaults to 0 (no space class)', () => {
+    const { container } = render(DataList);
+    const list = container.querySelector('ul');
+    // With gap 0, dividers are shown instead of spacing
+    expect(list).toHaveClass('divide-y');
+  });
+
+  test('gap > 0 adds space-y class', () => {
+    const { container } = render(DataList, { props: { gap: 4 } });
+    const list = container.querySelector('ul');
+    expect(list).toHaveClass('space-y-4');
+  });
+
+  test('gap > 0 removes dividers', () => {
+    const { container } = render(DataList, { props: { gap: 4, dividers: true } });
+    const list = container.querySelector('ul');
+    // When gap > 0, dividers are disabled
+    expect(list).not.toHaveClass('divide-y');
+  });
+
+  test('gap 2 applies space-y-2', () => {
+    const { container } = render(DataList, { props: { gap: 2 } });
+    const list = container.querySelector('ul');
+    expect(list).toHaveClass('space-y-2');
+  });
+
+  test('gap 6 applies space-y-6', () => {
+    const { container } = render(DataList, { props: { gap: 6 } });
+    const list = container.querySelector('ul');
+    expect(list).toHaveClass('space-y-6');
+  });
+});
+
+describe('DataList Items', () => {
+  test('renders without items', () => {
+    const { container } = render(DataList);
+    expect(container.querySelector('ul')).toBeInTheDocument();
+  });
+
+  test('accepts items array', () => {
+    const { container } = render(DataList, { props: { items: ['a', 'b', 'c'] } });
+    expect(container.querySelector('ul')).toBeInTheDocument();
+  });
+
+  test('empty items array renders children', () => {
+    const { container } = render(DataList, { props: { items: [] } });
+    expect(container.querySelector('ul')).toBeInTheDocument();
+  });
+});
+
+describe('DataList Li Elements', () => {
+  test('items render inside li elements', () => {
+    const { container } = render(DataList, { props: { items: ['item1', 'item2'] } });
+    const listItems = container.querySelectorAll('li');
+    expect(listItems.length).toBe(2);
+  });
+
+  test('li elements have py-3 padding', () => {
+    const { container } = render(DataList, { props: { items: ['item1'] } });
+    const listItem = container.querySelector('li');
+    expect(listItem).toHaveClass('py-3');
+  });
+
+  test('first li has first:pt-0', () => {
+    const { container } = render(DataList, { props: { items: ['item1'] } });
+    const listItem = container.querySelector('li');
+    expect(listItem).toHaveClass('first:pt-0');
+  });
+
+  test('last li has last:pb-0', () => {
+    const { container } = render(DataList, { props: { items: ['item1'] } });
+    const listItem = container.querySelector('li');
+    expect(listItem).toHaveClass('last:pb-0');
+  });
+});
+
+describe('DataList Accessibility', () => {
+  test('ul has role="list" for screen readers', () => {
+    const { container } = render(DataList);
+    const list = container.querySelector('ul');
+    expect(list).toHaveAttribute('role', 'list');
+  });
+});
+
+describe('DataList Combinations', () => {
+  test('dividers=true with gap=0 shows dividers', () => {
+    const { container } = render(DataList, { props: { dividers: true, gap: 0 } });
+    const list = container.querySelector('ul');
+    expect(list).toHaveClass('divide-y');
+  });
+
+  test('dividers=false with gap=0 shows no styling', () => {
+    const { container } = render(DataList, { props: { dividers: false, gap: 0 } });
+    const list = container.querySelector('ul');
+    expect(list).not.toHaveClass('divide-y');
+    expect(list).not.toHaveClass('space-y-0');
+  });
+
+  test('dividers=true with gap>0 uses gap, not dividers', () => {
+    const { container } = render(DataList, { props: { dividers: true, gap: 4 } });
+    const list = container.querySelector('ul');
+    expect(list).toHaveClass('space-y-4');
+    expect(list).not.toHaveClass('divide-y');
+  });
+});

package/dist/patterns/data/DataTable.spec.d.ts

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

package/dist/patterns/data/DataTable.spec.d.ts.map

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

package/dist/patterns/data/DataTable.spec.js

@@ -0,0 +1,196 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/svelte';
+import DataTable from './DataTable.svelte';
+
+describe('DataTable Component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders a table element', () => {
+    const { container } = render(DataTable);
+    const table = container.querySelector('table');
+    expect(table).toBeInTheDocument();
+  });
+
+  it('renders with default classes', () => {
+    const { container } = render(DataTable);
+    const wrapper = container.querySelector('.overflow-x-auto');
+    expect(wrapper).toBeInTheDocument();
+    expect(wrapper).toHaveClass('rounded-lg', 'border', 'border-gray-200');
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(DataTable, { props: { class: 'my-custom-class' } });
+    const wrapper = container.querySelector('.overflow-x-auto');
+    expect(wrapper).toHaveClass('my-custom-class');
+  });
+
+  describe('striped prop', () => {
+    it('does not apply striped classes by default', () => {
+      const { container } = render(DataTable);
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).not.toContain('[&>tr:nth-child(odd)]');
+    });
+
+    it('applies striped classes when striped is true', () => {
+      const { container } = render(DataTable, { props: { striped: true } });
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-gray-50');
+    });
+  });
+
+  describe('hoverable prop', () => {
+    it('applies hover classes by default', () => {
+      const { container } = render(DataTable);
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).toContain('[&>tr]:hover:bg-gray-50');
+    });
+
+    it('does not apply hover classes when hoverable is false', () => {
+      const { container } = render(DataTable, { props: { hoverable: false } });
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).not.toContain('[&>tr]:hover:bg-gray-50');
+    });
+  });
+
+  describe('bordered prop', () => {
+    it('does not apply bordered classes by default', () => {
+      const { container } = render(DataTable);
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).not.toContain('[&_td]:border-x');
+    });
+
+    it('applies bordered classes when bordered is true', () => {
+      const { container } = render(DataTable, { props: { bordered: true } });
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).toContain('[&_td]:border-x');
+    });
+  });
+
+  describe('size prop', () => {
+    it('uses md size by default', () => {
+      const { container } = render(DataTable);
+      const table = container.querySelector('table');
+      expect(table).toBeInTheDocument();
+      // Size is passed to snippets, so we verify the table renders
+    });
+
+    it('accepts sm size', () => {
+      const { container } = render(DataTable, { props: { size: 'sm' } });
+      const table = container.querySelector('table');
+      expect(table).toBeInTheDocument();
+    });
+
+    it('accepts lg size', () => {
+      const { container } = render(DataTable, { props: { size: 'lg' } });
+      const table = container.querySelector('table');
+      expect(table).toBeInTheDocument();
+    });
+
+    it('falls back to md for invalid size', () => {
+      const { container } = render(DataTable, { props: { size: 'invalid' } });
+      const table = container.querySelector('table');
+      expect(table).toBeInTheDocument();
+    });
+  });
+
+  describe('table structure', () => {
+    it('renders tbody element', () => {
+      const { container } = render(DataTable);
+      const tbody = container.querySelector('tbody');
+      expect(tbody).toBeInTheDocument();
+    });
+
+    it('tbody has divide styles', () => {
+      const { container } = render(DataTable);
+      const tbody = container.querySelector('tbody');
+      expect(tbody).toHaveClass('divide-y', 'divide-gray-200');
+    });
+
+    it('table has full width', () => {
+      const { container } = render(DataTable);
+      const table = container.querySelector('table');
+      expect(table).toHaveClass('w-full');
+    });
+
+    it('table has left text alignment', () => {
+      const { container } = render(DataTable);
+      const table = container.querySelector('table');
+      expect(table).toHaveClass('text-left');
+    });
+  });
+
+  describe('dark mode support', () => {
+    it('includes dark mode border classes', () => {
+      const { container } = render(DataTable);
+      const wrapper = container.querySelector('.overflow-x-auto');
+      expect(wrapper.className).toContain('dark:border-gray-700');
+    });
+
+    it('includes dark mode divide classes on tbody', () => {
+      const { container } = render(DataTable);
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).toContain('dark:divide-gray-700');
+    });
+
+    it('includes dark mode striped classes when enabled', () => {
+      const { container } = render(DataTable, { props: { striped: true } });
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).toContain('dark:[&>tr:nth-child(odd)]:bg-gray-800');
+    });
+
+    it('includes dark mode hover classes when enabled', () => {
+      const { container } = render(DataTable, { props: { hoverable: true } });
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).toContain('dark:[&>tr]:hover:bg-gray-700');
+    });
+
+    it('includes dark mode bordered classes when enabled', () => {
+      const { container } = render(DataTable, { props: { bordered: true } });
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).toContain('dark:[&_td]:border-gray-700');
+    });
+  });
+
+  describe('combination of props', () => {
+    it('can combine striped and bordered', () => {
+      const { container } = render(DataTable, { props: { striped: true, bordered: true } });
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-gray-50');
+      expect(tbody.className).toContain('[&_td]:border-x');
+    });
+
+    it('can combine all visual props', () => {
+      const { container } = render(DataTable, {
+        props: {
+          striped: true,
+          bordered: true,
+          hoverable: true,
+          size: 'lg',
+          class: 'test-class'
+        }
+      });
+      const wrapper = container.querySelector('.overflow-x-auto');
+      expect(wrapper).toHaveClass('test-class');
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).toContain('[&>tr:nth-child(odd)]:bg-gray-50');
+      expect(tbody.className).toContain('[&_td]:border-x');
+      expect(tbody.className).toContain('[&>tr]:hover:bg-gray-50');
+    });
+
+    it('can disable all visual effects', () => {
+      const { container } = render(DataTable, {
+        props: {
+          striped: false,
+          bordered: false,
+          hoverable: false
+        }
+      });
+      const tbody = container.querySelector('tbody');
+      expect(tbody.className).not.toContain('[&>tr:nth-child(odd)]');
+      expect(tbody.className).not.toContain('[&_td]:border-x');
+      expect(tbody.className).not.toContain('[&>tr]:hover');
+    });
+  });
+});

package/dist/patterns/forms/FormActions.spec.js

@@ -53,7 +53,9 @@ describe("FormActions Component Tests", () => {
   test("Submit button shows success state", () => {
     setupTest({ isSuccess: true });
     const submitBtn = screen.getByText("Save").closest("button, a");
-    expect(submitBtn).toHaveClass("btn-success");
+    // Check for success variant classes (green background)
+    expect(submitBtn).toHaveClass("bg-green-600");
+    expect(submitBtn).toHaveClass("border-green-600");
   });
 
   test("Submit button is disabled when disabled prop is true", () => {
@@ -70,13 +72,18 @@ describe("FormActions Component Tests", () => {
   test("Uses custom submit variant", () => {
     setupTest({ submitVariant: "red-solid" });
     const submitBtn = screen.getByText("Save").closest("button, a");
-    expect(submitBtn).toHaveClass("btn-red-solid");
+    // Check for red variant classes (red-solid maps to "red" variant)
+    expect(submitBtn).toHaveClass("bg-red-700");
+    expect(submitBtn).toHaveClass("border-red-700");
   });
 
   test("Uses custom cancel variant", () => {
     setupTest({ cancelVariant: "blue-outline" });
     const cancelBtn = screen.getByText("Cancel").closest("button, a");
-    expect(cancelBtn).toHaveClass("btn-blue-outline");
+    // Check for outline variant classes (blue-outline maps to "outline" variant)
+    expect(cancelBtn).toHaveClass("text-blue-700");
+    expect(cancelBtn).toHaveClass("border-blue-700");
+    expect(cancelBtn).toHaveClass("bg-transparent");
   });
 
   test("Has responsive layout classes", () => {

package/dist/patterns/forms/FormGrid.spec.d.ts

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

package/dist/patterns/forms/FormGrid.spec.d.ts.map

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

package/dist/patterns/forms/FormGrid.spec.js

@@ -0,0 +1,125 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import FormGrid from './FormGrid.svelte';
+
+describe('FormGrid Component', () => {
+  test('renders a grid container', () => {
+    const { container } = render(FormGrid);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('has grid class', () => {
+    const { container } = render(FormGrid);
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('grid');
+  });
+
+  test('has grid-cols-1 base class', () => {
+    const { container } = render(FormGrid);
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('grid-cols-1');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(FormGrid, { props: { class: 'custom-form-grid' } });
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('custom-form-grid');
+  });
+});
+
+describe('FormGrid Column Classes', () => {
+  test('1 col applies md:grid-cols-1', () => {
+    const { container } = render(FormGrid, { props: { cols: 1 } });
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('md:grid-cols-1');
+  });
+
+  test('2 cols (default) applies md:grid-cols-2', () => {
+    const { container } = render(FormGrid);
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('md:grid-cols-2');
+  });
+
+  test('3 cols applies md:grid-cols-3', () => {
+    const { container } = render(FormGrid, { props: { cols: 3 } });
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('md:grid-cols-3');
+  });
+
+  test('4 cols applies md:grid-cols-4', () => {
+    const { container } = render(FormGrid, { props: { cols: 4 } });
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('md:grid-cols-4');
+  });
+});
+
+describe('FormGrid Gap Classes', () => {
+  test('default gap is 4 (gap-4)', () => {
+    const { container } = render(FormGrid);
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('gap-4');
+  });
+
+  test('gap 2 applies gap-2', () => {
+    const { container } = render(FormGrid, { props: { gap: 2 } });
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('gap-2');
+  });
+
+  test('gap 3 applies gap-3', () => {
+    const { container } = render(FormGrid, { props: { gap: 3 } });
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('gap-3');
+  });
+
+  test('gap 5 applies gap-5', () => {
+    const { container } = render(FormGrid, { props: { gap: 5 } });
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('gap-5');
+  });
+
+  test('gap 6 applies gap-6', () => {
+    const { container } = render(FormGrid, { props: { gap: 6 } });
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('gap-6');
+  });
+
+  test('gap 8 applies gap-8', () => {
+    const { container } = render(FormGrid, { props: { gap: 8 } });
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('gap-8');
+  });
+});
+
+describe('FormGrid Responsive Behavior', () => {
+  test('always has grid-cols-1 for mobile', () => {
+    const { container } = render(FormGrid, { props: { cols: 4 } });
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('grid-cols-1');
+  });
+
+  test('uses md breakpoint for columns', () => {
+    const { container } = render(FormGrid, { props: { cols: 3 } });
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('md:grid-cols-3');
+  });
+});
+
+describe('FormGrid Combinations', () => {
+  test('cols and gap work together', () => {
+    const { container } = render(FormGrid, { props: { cols: 3, gap: 6 } });
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('md:grid-cols-3');
+    expect(grid).toHaveClass('gap-6');
+  });
+
+  test('all props together', () => {
+    const { container } = render(FormGrid, { props: { cols: 4, gap: 8, class: 'extra' } });
+    const grid = container.querySelector('div');
+    expect(grid).toHaveClass('grid');
+    expect(grid).toHaveClass('grid-cols-1');
+    expect(grid).toHaveClass('md:grid-cols-4');
+    expect(grid).toHaveClass('gap-8');
+    expect(grid).toHaveClass('extra');
+  });
+});

package/dist/patterns/forms/FormSection.spec.d.ts

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

package/dist/patterns/forms/FormSection.spec.d.ts.map

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