@getmicdrop/svelte-components 5.5.1 → 5.5.5

package/dist/recipes/inputs/Search.spec.js

@@ -0,0 +1,177 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import Search from './Search.svelte';
+
+describe('Search Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(Search);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('wrapper has relative class', () => {
+    const { container } = render(Search);
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('relative');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Search, { props: { class: 'custom-search' } });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-search');
+  });
+
+  test('renders a search input', () => {
+    const { container } = render(Search);
+    const input = container.querySelector('input[type="search"]');
+    expect(input).toBeInTheDocument();
+  });
+
+  test('renders a search icon', () => {
+    const { container } = render(Search);
+    const icon = container.querySelector('svg');
+    expect(icon).toBeInTheDocument();
+  });
+});
+
+describe('Search Placeholder', () => {
+  test('default placeholder is "Search"', () => {
+    const { container } = render(Search);
+    const input = container.querySelector('input');
+    expect(input.placeholder).toBe('Search');
+  });
+
+  test('custom placeholder is displayed', () => {
+    const { container } = render(Search, { props: { placeholder: 'Search events...' } });
+    const input = container.querySelector('input');
+    expect(input.placeholder).toBe('Search events...');
+  });
+});
+
+describe('Search Props', () => {
+  test('name prop is passed to input', () => {
+    const { container } = render(Search, { props: { name: 'search-query' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveAttribute('name', 'search-query');
+  });
+
+  test('id prop is passed to input', () => {
+    const { container } = render(Search, { props: { id: 'main-search' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveAttribute('id', 'main-search');
+  });
+
+  test('disabled prop disables input', () => {
+    const { container } = render(Search, { props: { disabled: true } });
+    const input = container.querySelector('input');
+    expect(input).toBeDisabled();
+  });
+
+  test('input is not disabled by default', () => {
+    const { container } = render(Search);
+    const input = container.querySelector('input');
+    expect(input).not.toBeDisabled();
+  });
+
+  test('disabled applies opacity class', () => {
+    const { container } = render(Search, { props: { disabled: true } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('opacity-50');
+  });
+});
+
+describe('Search Size', () => {
+  test('default size is lg', () => {
+    const { container } = render(Search);
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('h-11');
+  });
+
+  test('size sm applies h-8', () => {
+    const { container } = render(Search, { props: { size: 'sm' } });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('h-8');
+  });
+
+  test('size md applies h-10', () => {
+    const { container } = render(Search, { props: { size: 'md' } });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('h-10');
+  });
+
+  test('size lg applies h-11', () => {
+    const { container } = render(Search, { props: { size: 'lg' } });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('h-11');
+  });
+});
+
+describe('Search Input Styling', () => {
+  test('has gray background', () => {
+    const { container } = render(Search);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('bg-gray-50');
+  });
+
+  test('has rounded corners', () => {
+    const { container } = render(Search);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('rounded-lg');
+  });
+
+  test('has border', () => {
+    const { container } = render(Search);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('border');
+    expect(input).toHaveClass('border-gray-300');
+  });
+
+  test('has focus ring', () => {
+    const { container } = render(Search);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('focus:ring-4');
+    expect(input).toHaveClass('focus:ring-blue-300');
+  });
+});
+
+describe('Search Icon Positioning', () => {
+  test('icon is in absolute positioned container', () => {
+    const { container } = render(Search);
+    const iconContainer = container.querySelector('.absolute');
+    expect(iconContainer).toBeInTheDocument();
+  });
+
+  test('icon container has left positioning', () => {
+    const { container } = render(Search);
+    const iconContainer = container.querySelector('.absolute.inset-y-0.left-0');
+    expect(iconContainer).toBeInTheDocument();
+  });
+
+  test('icon is not clickable', () => {
+    const { container } = render(Search);
+    const iconContainer = container.querySelector('.pointer-events-none');
+    expect(iconContainer).toBeInTheDocument();
+  });
+});
+
+describe('Search Combinations', () => {
+  test('all props together', () => {
+    const { container } = render(Search, {
+      props: {
+        placeholder: 'Find venues...',
+        name: 'venue-search',
+        id: 'venue-search-input',
+        size: 'md',
+        disabled: true,
+        class: 'custom-search'
+      }
+    });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-search');
+    expect(wrapper).toHaveClass('h-10');
+    const input = container.querySelector('input');
+    expect(input.placeholder).toBe('Find venues...');
+    expect(input).toHaveAttribute('name', 'venue-search');
+    expect(input).toHaveAttribute('id', 'venue-search-input');
+    expect(input).toBeDisabled();
+  });
+});

package/dist/recipes/inputs/Search.svelte

@@ -39,15 +39,15 @@
     children,
     ...restProps
   }: Props = $props();
-
-  const sizes = {
-    sm: { icon: "w-3.5 h-3.5", input: `h-8 ${typography.xs} pl-8`, wrapper: "h-8" },
-    md: { icon: "w-4 h-4", input: `h-10 ${typography.sm} pl-9`, wrapper: "h-10" },
-    lg: { icon: "w-5 h-5", input: `h-11 ${typography.sm} pl-10`, wrapper: "h-11" }
-  };
-
-  let sizeConfig = $derived(sizes[size] || sizes.lg);
-
+
+  const sizes = {
+    sm: { icon: "w-3.5 h-3.5", input: `h-8 ${typography.xs} pl-8`, wrapper: "h-8" },
+    md: { icon: "w-4 h-4", input: `h-10 ${typography.sm} pl-9`, wrapper: "h-10" },
+    lg: { icon: "w-5 h-5", input: `h-11 ${typography.sm} pl-10`, wrapper: "h-11" }
+  };
+
+  let sizeConfig = $derived(sizes[size] || sizes.lg);
+
   function handleInput(event: Event) {
     value = (event.target as HTMLInputElement).value;
     oninput?.(event);
@@ -72,31 +72,31 @@
   function handleBlur(event: FocusEvent) {
     onblur?.(event);
   }
-</script>
-
-<div class="relative w-full {sizeConfig.wrapper} {className}">
-  <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-    <SearchOutline class={`${typography.iconMuted} ${sizeConfig.icon}`} />
-  </div>
-  <input
-    type="search"
-    {id}
-    {name}
-    {placeholder}
-    {disabled}
-    class="w-full pr-3 bg-gray-50 dark:bg-gray-700 font-medium border border-gray-300 dark:border-gray-600 rounded-lg transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:border-blue-500 hover:border-blue-500 placeholder-gray-500 dark:placeholder-gray-400 [&::-webkit-search-cancel-button]:appearance-none {sizeConfig.input} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
-    bind:value
-    oninput={handleInput}
-    onchange={handleChange}
-    onkeydown={handleKeydown}
-    onkeyup={handleKeyup}
-    onfocus={handleFocus}
-    onblur={handleBlur}
-    {...restProps}
-  />
-  {#if children}
-    <div class={`absolute inset-y-0 right-0 flex items-center ${typography.iconMuted}`}>
-      {@render children()}
-    </div>
-  {/if}
-</div>
+</script>
+
+<div class="relative w-full {sizeConfig.wrapper} {className}">
+  <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+    <SearchOutline class={`${typography.iconMuted} ${sizeConfig.icon}`} />
+  </div>
+  <input
+    type="search"
+    {id}
+    {name}
+    {placeholder}
+    {disabled}
+    class="w-full pr-3 bg-gray-50 dark:bg-gray-700 font-medium border border-gray-300 dark:border-gray-600 rounded-lg transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:border-blue-500 hover:border-blue-500 placeholder-gray-500 dark:placeholder-gray-400 [&::-webkit-search-cancel-button]:appearance-none {sizeConfig.input} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+    bind:value
+    oninput={handleInput}
+    onchange={handleChange}
+    onkeydown={handleKeydown}
+    onkeyup={handleKeyup}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    {...restProps}
+  />
+  {#if children}
+    <div class={`absolute inset-y-0 right-0 flex items-center ${typography.iconMuted}`}>
+      {@render children()}
+    </div>
+  {/if}
+</div>

package/dist/recipes/inputs/SelectDropdown.spec.d.ts

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

package/dist/recipes/inputs/SelectDropdown.spec.d.ts.map

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