@getmicdrop/svelte-components 5.3.15 → 5.4.0

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);
+  });
+});

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

@@ -1,97 +1,97 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import FormValidationSummary from './FormValidationSummary.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/FormValidationSummary',
-    component: FormValidationSummary,
-    tags: ['autodocs'],
-  });
-
-</script>
-
-<script>
-  
-  const sampleErrors = {
-    firstName: 'First name is required',
-    email: 'Please enter a valid email address',
-    phone: 'Phone number must be 10 digits',
-  };
-
-  const fieldLabels = {
-    firstName: 'First Name',
-    email: 'Email Address',
-    phone: 'Phone Number',
-  };
-</script>
-
-<Story name="Default">
-  <FormValidationSummary
-    errors={sampleErrors}
-    {fieldLabels}
-    show={true}
-  />
-</Story>
-
-<Story name="Single Error">
-  <FormValidationSummary
-    errors={{ email: 'Email is required' }}
-    fieldLabels={{ email: 'Email Address' }}
-    show={true}
-  />
-</Story>
-
-<Story name="Multiple Errors">
-  <FormValidationSummary
-    errors={{
-      firstName: 'First name is required',
-      lastName: 'Last name is required',
-      email: 'Invalid email format',
-      password: 'Password must be at least 8 characters',
-      confirmPassword: 'Passwords do not match',
-    }}
-    fieldLabels={{
-      firstName: 'First Name',
-      lastName: 'Last Name',
-      email: 'Email',
-      password: 'Password',
-      confirmPassword: 'Confirm Password',
-    }}
-    show={true}
-  />
-</Story>
-
-<Story name="With Form">
-  <div class="max-w-md">
-    <FormValidationSummary
-      errors={sampleErrors}
-      {fieldLabels}
-      show={true}
-    />
-
-    <div class="space-y-4 mt-4">
-      <div>
-        <label id="firstName" class="block text-sm font-medium mb-1">First Name</label>
-        <input type="text" class="w-full px-3 py-2 border border-red-300 rounded" />
-      </div>
-      <div>
-        <label id="email" class="block text-sm font-medium mb-1">Email</label>
-        <input type="email" class="w-full px-3 py-2 border border-red-300 rounded" />
-      </div>
-      <div>
-        <label id="phone" class="block text-sm font-medium mb-1">Phone</label>
-        <input type="tel" class="w-full px-3 py-2 border border-red-300 rounded" />
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="Hidden State">
-  <FormValidationSummary
-    errors={sampleErrors}
-    {fieldLabels}
-    show={false}
-  />
-  <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">The validation summary is hidden</p>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import FormValidationSummary from './FormValidationSummary.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/FormValidationSummary',
+    component: FormValidationSummary,
+    tags: ['autodocs'],
+  });
+
+</script>
+
+<script>
+  
+  const sampleErrors = {
+    firstName: 'First name is required',
+    email: 'Please enter a valid email address',
+    phone: 'Phone number must be 10 digits',
+  };
+
+  const fieldLabels = {
+    firstName: 'First Name',
+    email: 'Email Address',
+    phone: 'Phone Number',
+  };
+</script>
+
+<Story name="Default">
+  <FormValidationSummary
+    errors={sampleErrors}
+    {fieldLabels}
+    show={true}
+  />
+</Story>
+
+<Story name="Single Error">
+  <FormValidationSummary
+    errors={{ email: 'Email is required' }}
+    fieldLabels={{ email: 'Email Address' }}
+    show={true}
+  />
+</Story>
+
+<Story name="Multiple Errors">
+  <FormValidationSummary
+    errors={{
+      firstName: 'First name is required',
+      lastName: 'Last name is required',
+      email: 'Invalid email format',
+      password: 'Password must be at least 8 characters',
+      confirmPassword: 'Passwords do not match',
+    }}
+    fieldLabels={{
+      firstName: 'First Name',
+      lastName: 'Last Name',
+      email: 'Email',
+      password: 'Password',
+      confirmPassword: 'Confirm Password',
+    }}
+    show={true}
+  />
+</Story>
+
+<Story name="With Form">
+  <div class="max-w-md">
+    <FormValidationSummary
+      errors={sampleErrors}
+      {fieldLabels}
+      show={true}
+    />
+
+    <div class="space-y-4 mt-4">
+      <div>
+        <label id="firstName" class="block text-sm font-medium mb-1">First Name</label>
+        <input type="text" class="w-full px-3 py-2 border border-red-300 rounded" />
+      </div>
+      <div>
+        <label id="email" class="block text-sm font-medium mb-1">Email</label>
+        <input type="email" class="w-full px-3 py-2 border border-red-300 rounded" />
+      </div>
+      <div>
+        <label id="phone" class="block text-sm font-medium mb-1">Phone</label>
+        <input type="tel" class="w-full px-3 py-2 border border-red-300 rounded" />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Hidden State">
+  <FormValidationSummary
+    errors={sampleErrors}
+    {fieldLabels}
+    show={false}
+  />
+  <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">The validation summary is hidden</p>
+</Story>