@getmicdrop/svelte-components 5.4.0 → 5.4.1

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

@@ -1,32 +1,32 @@
-<script>
-  import { typography } from '../../tokens/typography';
-
-  let {
-    title = '',
-    description = '',
-    divider = false,
-    class: className = '',
-    children,
-  } = $props();
-</script>
-
-<section class="space-y-4 {className}">
-  {#if divider}
-    <hr class="border-gray-200 dark:border-gray-700" />
-  {/if}
-
-  {#if title || description}
-    <div class="space-y-1">
-      {#if title}
-        <h3 class={typography.h3}>{title}</h3>
-      {/if}
-      {#if description}
-        <p class={typography.smMuted}>{description}</p>
-      {/if}
-    </div>
-  {/if}
-
-  <div class="space-y-4">
-    {@render children?.()}
-  </div>
-</section>
+<script>
+  import { typography } from '../../tokens/typography';
+
+  let {
+    title = '',
+    description = '',
+    divider = false,
+    class: className = '',
+    children,
+  } = $props();
+</script>
+
+<section class="space-y-4 {className}">
+  {#if divider}
+    <hr class="border-gray-200 dark:border-gray-700" />
+  {/if}
+
+  {#if title || description}
+    <div class="space-y-1">
+      {#if title}
+        <h3 class={typography.h3}>{title}</h3>
+      {/if}
+      {#if description}
+        <p class={typography.smMuted}>{description}</p>
+      {/if}
+    </div>
+  {/if}
+
+  <div class="space-y-4">
+    {@render children?.()}
+  </div>
+</section>

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

@@ -1,203 +1,203 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import FormValidationSummary from './FormValidationSummary.svelte';
-
-describe('FormValidationSummary Component', () => {
-  it('does not render when show is false', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: false,
-        errors: { firstName: 'Required' },
-      },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeFalsy();
-  });
-
-  it('does not render when there are no errors', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: {},
-      },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeFalsy();
-  });
-
-  it('does not render when errors have empty messages', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: '', lastName: '   ' },
-      },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeFalsy();
-  });
-
-  it('renders when show is true and has errors', () => {
-    const { container, getByText } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'First name is required' },
-      },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeTruthy();
-    expect(getByText('Please fix the following:')).toBeTruthy();
-  });
-
-  it('displays error field labels', () => {
-    const { getByText } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required', email: 'Invalid' },
-        fieldLabels: { firstName: 'First Name', email: 'Email Address' },
-      },
-    });
-    expect(getByText('First Name')).toBeTruthy();
-    expect(getByText('Email Address')).toBeTruthy();
-  });
-
-  it('uses field key as label when no label provided', () => {
-    const { getByText } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-        fieldLabels: {},
-      },
-    });
-    expect(getByText('firstName')).toBeTruthy();
-  });
-
-  it('renders multiple error fields', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: {
-          firstName: 'Required',
-          lastName: 'Required',
-          email: 'Invalid format',
-        },
-        fieldLabels: {
-          firstName: 'First Name',
-          lastName: 'Last Name',
-          email: 'Email',
-        },
-      },
-    });
-    const listItems = container.querySelectorAll('li');
-    expect(listItems.length).toBe(3);
-  });
-
-  it('has role="alert" and aria-live="polite"', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-      },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.getAttribute('aria-live')).toBe('polite');
-  });
-
-  it('renders clickable buttons for each error', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required', email: 'Invalid' },
-        fieldLabels: { firstName: 'First Name', email: 'Email' },
-      },
-    });
-    const buttons = container.querySelectorAll('button[type="button"]');
-    expect(buttons.length).toBe(2);
-  });
-
-  it('calls scrollIntoView on button click', async () => {
-    // Create a mock element
-    const mockElement = document.createElement('input');
-    mockElement.id = 'firstName';
-    mockElement.scrollIntoView = vi.fn();
-    mockElement.focus = vi.fn();
-    document.body.appendChild(mockElement);
-
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-        fieldLabels: { firstName: 'First Name' },
-      },
-    });
-
-    const button = container.querySelector('button[type="button"]');
-    await fireEvent.click(button);
-
-    expect(mockElement.scrollIntoView).toHaveBeenCalledWith({
-      behavior: 'smooth',
-      block: 'center',
-    });
-
-    // Clean up
-    document.body.removeChild(mockElement);
-  });
-
-  it('uses custom fieldIds for scrolling', async () => {
-    const mockElement = document.createElement('input');
-    mockElement.id = 'custom-first-name-input';
-    mockElement.scrollIntoView = vi.fn();
-    mockElement.focus = vi.fn();
-    document.body.appendChild(mockElement);
-
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-        fieldLabels: { firstName: 'First Name' },
-        fieldIds: { firstName: 'custom-first-name-input' },
-      },
-    });
-
-    const button = container.querySelector('button[type="button"]');
-    await fireEvent.click(button);
-
-    expect(mockElement.scrollIntoView).toHaveBeenCalled();
-
-    document.body.removeChild(mockElement);
-  });
-
-  it('has red background styling', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-      },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.classList.contains('bg-red-50')).toBe(true);
-    expect(alert.classList.contains('border-red-200')).toBe(true);
-  });
-
-  it('renders warning icon', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-      },
-    });
-    const svg = container.querySelector('svg');
-    expect(svg).toBeTruthy();
-  });
-
-  it('filters out null and undefined error values', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required', lastName: null, email: undefined },
-        fieldLabels: { firstName: 'First Name', lastName: 'Last Name', email: 'Email' },
-      },
-    });
-    const listItems = container.querySelectorAll('li');
-    expect(listItems.length).toBe(1);
-  });
-});
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import FormValidationSummary from './FormValidationSummary.svelte';
+
+describe('FormValidationSummary Component', () => {
+  it('does not render when show is false', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: false,
+        errors: { firstName: 'Required' },
+      },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeFalsy();
+  });
+
+  it('does not render when there are no errors', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: {},
+      },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeFalsy();
+  });
+
+  it('does not render when errors have empty messages', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: '', lastName: '   ' },
+      },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeFalsy();
+  });
+
+  it('renders when show is true and has errors', () => {
+    const { container, getByText } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'First name is required' },
+      },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeTruthy();
+    expect(getByText('Please fix the following:')).toBeTruthy();
+  });
+
+  it('displays error field labels', () => {
+    const { getByText } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required', email: 'Invalid' },
+        fieldLabels: { firstName: 'First Name', email: 'Email Address' },
+      },
+    });
+    expect(getByText('First Name')).toBeTruthy();
+    expect(getByText('Email Address')).toBeTruthy();
+  });
+
+  it('uses field key as label when no label provided', () => {
+    const { getByText } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required' },
+        fieldLabels: {},
+      },
+    });
+    expect(getByText('firstName')).toBeTruthy();
+  });
+
+  it('renders multiple error fields', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: {
+          firstName: 'Required',
+          lastName: 'Required',
+          email: 'Invalid format',
+        },
+        fieldLabels: {
+          firstName: 'First Name',
+          lastName: 'Last Name',
+          email: 'Email',
+        },
+      },
+    });
+    const listItems = container.querySelectorAll('li');
+    expect(listItems.length).toBe(3);
+  });
+
+  it('has role="alert" and aria-live="polite"', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required' },
+      },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.getAttribute('aria-live')).toBe('polite');
+  });
+
+  it('renders clickable buttons for each error', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required', email: 'Invalid' },
+        fieldLabels: { firstName: 'First Name', email: 'Email' },
+      },
+    });
+    const buttons = container.querySelectorAll('button[type="button"]');
+    expect(buttons.length).toBe(2);
+  });
+
+  it('calls scrollIntoView on button click', async () => {
+    // Create a mock element
+    const mockElement = document.createElement('input');
+    mockElement.id = 'firstName';
+    mockElement.scrollIntoView = vi.fn();
+    mockElement.focus = vi.fn();
+    document.body.appendChild(mockElement);
+
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required' },
+        fieldLabels: { firstName: 'First Name' },
+      },
+    });
+
+    const button = container.querySelector('button[type="button"]');
+    await fireEvent.click(button);
+
+    expect(mockElement.scrollIntoView).toHaveBeenCalledWith({
+      behavior: 'smooth',
+      block: 'center',
+    });
+
+    // Clean up
+    document.body.removeChild(mockElement);
+  });
+
+  it('uses custom fieldIds for scrolling', async () => {
+    const mockElement = document.createElement('input');
+    mockElement.id = 'custom-first-name-input';
+    mockElement.scrollIntoView = vi.fn();
+    mockElement.focus = vi.fn();
+    document.body.appendChild(mockElement);
+
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required' },
+        fieldLabels: { firstName: 'First Name' },
+        fieldIds: { firstName: 'custom-first-name-input' },
+      },
+    });
+
+    const button = container.querySelector('button[type="button"]');
+    await fireEvent.click(button);
+
+    expect(mockElement.scrollIntoView).toHaveBeenCalled();
+
+    document.body.removeChild(mockElement);
+  });
+
+  it('has red background styling', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required' },
+      },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.classList.contains('bg-red-50')).toBe(true);
+    expect(alert.classList.contains('border-red-200')).toBe(true);
+  });
+
+  it('renders warning icon', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required' },
+      },
+    });
+    const svg = container.querySelector('svg');
+    expect(svg).toBeTruthy();
+  });
+
+  it('filters out null and undefined error values', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required', lastName: null, email: undefined },
+        fieldLabels: { firstName: 'First Name', lastName: 'Last Name', email: 'Email' },
+      },
+    });
+    const listItems = container.querySelectorAll('li');
+    expect(listItems.length).toBe(1);
+  });
+});