@getmicdrop/svelte-components 5.5.4 → 5.6.0

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

@@ -1,88 +1,95 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import FormActions from "./FormActions.svelte";
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component, container } = render(FormActions, {
-    props: {
-      onCancel: vi.fn(),
-      onSubmit: vi.fn(),
-      ...args,
-    },
-  });
-  return { user, component, container };
-}
-
-describe("FormActions Component Tests", () => {
-  test("Renders submit and cancel buttons", () => {
-    setupTest();
-    expect(screen.getByText("Save")).toBeInTheDocument();
-    expect(screen.getByText("Cancel")).toBeInTheDocument();
-  });
-
-  test("Uses custom button labels", () => {
-    setupTest({ submitLabel: "Update", cancelLabel: "Discard" });
-    expect(screen.getByText("Update")).toBeInTheDocument();
-    expect(screen.getByText("Discard")).toBeInTheDocument();
-  });
-
-  test("Calls onSubmit when submit button clicked", async () => {
-    const onSubmit = vi.fn();
-    const { user } = setupTest({ onSubmit });
-
-    await user.click(screen.getByText("Save"));
-    expect(onSubmit).toHaveBeenCalledTimes(1);
-  });
-
-  test("Calls onCancel when cancel button clicked", async () => {
-    const onCancel = vi.fn();
-    const { user } = setupTest({ onCancel });
-
-    await user.click(screen.getByText("Cancel"));
-    expect(onCancel).toHaveBeenCalledTimes(1);
-  });
-
-  test("Submit button shows loading state", () => {
-    setupTest({ isSubmitting: true });
-    const submitBtn = screen.getByText("Save").closest("button, a");
-    expect(submitBtn).toBeDisabled();
-  });
-
-  test("Submit button shows success state", () => {
-    setupTest({ isSuccess: true });
-    const submitBtn = screen.getByText("Save").closest("button, a");
-    expect(submitBtn).toHaveClass("btn-success");
-  });
-
-  test("Submit button is disabled when disabled prop is true", () => {
-    setupTest({ disabled: true });
-    const submitBtn = screen.getByText("Save").closest("button, a");
-    expect(submitBtn).toBeDisabled();
-  });
-
-  test("Hides cancel button when showCancel is false", () => {
-    setupTest({ showCancel: false });
-    expect(screen.queryByText("Cancel")).not.toBeInTheDocument();
-  });
-
-  test("Uses custom submit variant", () => {
-    setupTest({ submitVariant: "red-solid" });
-    const submitBtn = screen.getByText("Save").closest("button, a");
-    expect(submitBtn).toHaveClass("btn-red-solid");
-  });
-
-  test("Uses custom cancel variant", () => {
-    setupTest({ cancelVariant: "blue-outline" });
-    const cancelBtn = screen.getByText("Cancel").closest("button, a");
-    expect(cancelBtn).toHaveClass("btn-blue-outline");
-  });
-
-  test("Has responsive layout classes", () => {
-    const { container } = setupTest();
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("w-full");
-    expect(wrapper).toHaveClass("flex");
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import FormActions from "./FormActions.svelte";
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component, container } = render(FormActions, {
+    props: {
+      onCancel: vi.fn(),
+      onSubmit: vi.fn(),
+      ...args,
+    },
+  });
+  return { user, component, container };
+}
+
+describe("FormActions Component Tests", () => {
+  test("Renders submit and cancel buttons", () => {
+    setupTest();
+    expect(screen.getByText("Save")).toBeInTheDocument();
+    expect(screen.getByText("Cancel")).toBeInTheDocument();
+  });
+
+  test("Uses custom button labels", () => {
+    setupTest({ submitLabel: "Update", cancelLabel: "Discard" });
+    expect(screen.getByText("Update")).toBeInTheDocument();
+    expect(screen.getByText("Discard")).toBeInTheDocument();
+  });
+
+  test("Calls onSubmit when submit button clicked", async () => {
+    const onSubmit = vi.fn();
+    const { user } = setupTest({ onSubmit });
+
+    await user.click(screen.getByText("Save"));
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  test("Calls onCancel when cancel button clicked", async () => {
+    const onCancel = vi.fn();
+    const { user } = setupTest({ onCancel });
+
+    await user.click(screen.getByText("Cancel"));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  test("Submit button shows loading state", () => {
+    setupTest({ isSubmitting: true });
+    const submitBtn = screen.getByText("Save").closest("button, a");
+    expect(submitBtn).toBeDisabled();
+  });
+
+  test("Submit button shows success state", () => {
+    setupTest({ isSuccess: true });
+    const submitBtn = screen.getByText("Save").closest("button, a");
+    // 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", () => {
+    setupTest({ disabled: true });
+    const submitBtn = screen.getByText("Save").closest("button, a");
+    expect(submitBtn).toBeDisabled();
+  });
+
+  test("Hides cancel button when showCancel is false", () => {
+    setupTest({ showCancel: false });
+    expect(screen.queryByText("Cancel")).not.toBeInTheDocument();
+  });
+
+  test("Uses custom submit variant", () => {
+    setupTest({ submitVariant: "red-solid" });
+    const submitBtn = screen.getByText("Save").closest("button, a");
+    // 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");
+    // 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", () => {
+    const { container } = setupTest();
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("w-full");
+    expect(wrapper).toHaveClass("flex");
+  });
+});

package/dist/patterns/forms/FormActions.stories.svelte

@@ -1,97 +1,97 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  const { Story } = defineMeta({
-    title: 'Components/FormActions',
-    component: FormActions,
-    tags: ['autodocs'],
-    argTypes: {
-      submitLabel: { control: 'text' },
-      cancelLabel: { control: 'text' },
-      isSubmitting: { control: 'boolean' },
-      isSuccess: { control: 'boolean' },
-      disabled: { control: 'boolean' },
-      showCancel: { control: 'boolean' },
-    },
-  });
-
-</script>
-
-<script>
-    import FormActions from './FormActions.svelte';
-
-  let submitting = false;
-  let success = false;
-
-  function handleSubmit() {
-    submitting = true;
-    setTimeout(() => {
-      submitting = false;
-      success = true;
-      setTimeout(() => success = false, 2000);
-    }, 2000);
-  }
-</script>
-
-
-<Story
-  name="Default"
-  args={{
-    submitLabel: 'Save',
-    cancelLabel: 'Cancel',
-    onCancel: () => console.log('Cancel clicked'),
-    onSubmit: () => console.log('Submit clicked'),
-  }}
-/>
-
-<Story
-  name="Submitting State"
-  args={{
-    isSubmitting: true,
-    submitLabel: 'Save Changes',
-  }}
-/>
-
-<Story
-  name="Success State"
-  args={{
-    isSuccess: true,
-    submitLabel: 'Save Changes',
-  }}
-/>
-
-<Story name="Interactive Submit">
-  <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg">
-    <FormActions
-      submitLabel="Save Changes"
-      isSubmitting={submitting}
-      isSuccess={success}
-      onSubmit={handleSubmit}
-      onCancel={() => console.log('Cancelled')}
-    />
-  </div>
-</Story>
-
-<Story
-  name="No Cancel Button"
-  args={{
-    showCancel: false,
-    submitLabel: 'Continue',
-  }}
-/>
-
-<Story
-  name="Disabled State"
-  args={{
-    disabled: true,
-    submitLabel: 'Submit',
-  }}
-/>
-
-<Story
-  name="Custom Labels"
-  args={{
-    submitLabel: 'Confirm Payment',
-    cancelLabel: 'Go Back',
-  }}
-/>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const { Story } = defineMeta({
+    title: 'Components/FormActions',
+    component: FormActions,
+    tags: ['autodocs'],
+    argTypes: {
+      submitLabel: { control: 'text' },
+      cancelLabel: { control: 'text' },
+      isSubmitting: { control: 'boolean' },
+      isSuccess: { control: 'boolean' },
+      disabled: { control: 'boolean' },
+      showCancel: { control: 'boolean' },
+    },
+  });
+
+</script>
+
+<script>
+    import FormActions from './FormActions.svelte';
+
+  let submitting = false;
+  let success = false;
+
+  function handleSubmit() {
+    submitting = true;
+    setTimeout(() => {
+      submitting = false;
+      success = true;
+      setTimeout(() => success = false, 2000);
+    }, 2000);
+  }
+</script>
+
+
+<Story
+  name="Default"
+  args={{
+    submitLabel: 'Save',
+    cancelLabel: 'Cancel',
+    onCancel: () => console.log('Cancel clicked'),
+    onSubmit: () => console.log('Submit clicked'),
+  }}
+/>
+
+<Story
+  name="Submitting State"
+  args={{
+    isSubmitting: true,
+    submitLabel: 'Save Changes',
+  }}
+/>
+
+<Story
+  name="Success State"
+  args={{
+    isSuccess: true,
+    submitLabel: 'Save Changes',
+  }}
+/>
+
+<Story name="Interactive Submit">
+  <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg">
+    <FormActions
+      submitLabel="Save Changes"
+      isSubmitting={submitting}
+      isSuccess={success}
+      onSubmit={handleSubmit}
+      onCancel={() => console.log('Cancelled')}
+    />
+  </div>
+</Story>
+
+<Story
+  name="No Cancel Button"
+  args={{
+    showCancel: false,
+    submitLabel: 'Continue',
+  }}
+/>
+
+<Story
+  name="Disabled State"
+  args={{
+    disabled: true,
+    submitLabel: 'Submit',
+  }}
+/>
+
+<Story
+  name="Custom Labels"
+  args={{
+    submitLabel: 'Confirm Payment',
+    cancelLabel: 'Go Back',
+  }}
+/>

package/dist/patterns/forms/FormActions.svelte

@@ -1,46 +1,46 @@
-<script>
-  import Button from "../../primitives/Button/Button.svelte";
-
-  let {
-    onCancel = () => {},
-    onSubmit = () => {},
-    submitLabel = "Save",
-    cancelLabel = "Cancel",
-    isSubmitting = false,
-    isSuccess = false,
-    disabled = false,
-    showCancel = true,
-    submitVariant = "default",
-    cancelVariant = "alternative",
-    submitType = "submit",
-    className = "",
-  } = $props();
-</script>
-
-<div
-  class="w-full md:static flex bg-white dark:bg-gray-800 md:bg-transparent md:dark:bg-transparent md:rounded-b-lg items-center justify-center md:justify-end gap-4 py-5 px-4 {className}"
->
-  {#if showCancel}
-    <Button
-      variant={cancelVariant}
-      type="button"
-      size="full-md-auto"
-      minWidth="action"
-      onclick={onCancel}
-    >
-      {cancelLabel}
-    </Button>
-  {/if}
-  <Button
-    variant={submitVariant}
-    type={submitType}
-    size="full-md-auto"
-    minWidth="action"
-    loading={isSubmitting}
-    success={isSuccess}
-    disabled={disabled || isSubmitting}
-    onclick={onSubmit}
-  >
-    {submitLabel}
-  </Button>
-</div>
+<script>
+  import Button from "../../primitives/Button/Button.svelte";
+
+  let {
+    onCancel = () => {},
+    onSubmit = () => {},
+    submitLabel = "Save",
+    cancelLabel = "Cancel",
+    isSubmitting = false,
+    isSuccess = false,
+    disabled = false,
+    showCancel = true,
+    submitVariant = "default",
+    cancelVariant = "alternative",
+    submitType = "submit",
+    className = "",
+  } = $props();
+</script>
+
+<div
+  class="w-full md:static flex bg-white dark:bg-gray-800 md:bg-transparent md:dark:bg-transparent md:rounded-b-lg items-center justify-center md:justify-end gap-4 py-5 px-4 {className}"
+>
+  {#if showCancel}
+    <Button
+      variant={cancelVariant}
+      type="button"
+      size="full-md-auto"
+      minWidth="action"
+      onclick={onCancel}
+    >
+      {cancelLabel}
+    </Button>
+  {/if}
+  <Button
+    variant={submitVariant}
+    type={submitType}
+    size="full-md-auto"
+    minWidth="action"
+    loading={isSubmitting}
+    success={isSuccess}
+    disabled={disabled || isSubmitting}
+    onclick={onSubmit}
+  >
+    {submitLabel}
+  </Button>
+</div>

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/FormGrid.svelte

@@ -1,33 +1,33 @@
-<script>
-  let {
-    cols = 2,
-    gap = 4,
-    class: className = '',
-    children,
-  } = $props();
-
-  // Map cols to Tailwind grid classes
-  const colsClass = {
-    1: 'md:grid-cols-1',
-    2: 'md:grid-cols-2',
-    3: 'md:grid-cols-3',
-    4: 'md:grid-cols-4'
-  };
-
-  // Map gap to Tailwind gap classes
-  const gapClass = {
-    2: 'gap-2',
-    3: 'gap-3',
-    4: 'gap-4',
-    5: 'gap-5',
-    6: 'gap-6',
-    8: 'gap-8'
-  };
-
-  let gridCols = $derived(colsClass[cols] || colsClass[2]);
-  let gridGap = $derived(gapClass[gap] || gapClass[4]);
-</script>
-
-<div class="grid grid-cols-1 {gridCols} {gridGap} {className}">
-  {@render children?.()}
-</div>
+<script>
+  let {
+    cols = 2,
+    gap = 4,
+    class: className = '',
+    children,
+  } = $props();
+
+  // Map cols to Tailwind grid classes
+  const colsClass = {
+    1: 'md:grid-cols-1',
+    2: 'md:grid-cols-2',
+    3: 'md:grid-cols-3',
+    4: 'md:grid-cols-4'
+  };
+
+  // Map gap to Tailwind gap classes
+  const gapClass = {
+    2: 'gap-2',
+    3: 'gap-3',
+    4: 'gap-4',
+    5: 'gap-5',
+    6: 'gap-6',
+    8: 'gap-8'
+  };
+
+  let gridCols = $derived(colsClass[cols] || colsClass[2]);
+  let gridGap = $derived(gapClass[gap] || gapClass[4]);
+</script>
+
+<div class="grid grid-cols-1 {gridCols} {gridGap} {className}">
+  {@render children?.()}
+</div>

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

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