@getmicdrop/svelte-components 5.17.3 → 5.18.0

package/dist/recipes/feedback/StatusIndicator/StatusIndicator.spec.js

@@ -1,133 +1,133 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import StatusIndicator from './StatusIndicator.svelte';
-
-describe('StatusIndicator', () => {
-  describe('idle state', () => {
-    it('renders empty container when status is idle', () => {
-      const { container } = render(StatusIndicator, { status: 'idle' });
-      // Check that no status indicators are rendered
-      expect(container.querySelector('.spinner')).toBeFalsy();
-      expect(container.querySelector('.success-circle')).toBeFalsy();
-      expect(container.querySelector('.error-circle')).toBeFalsy();
-    });
-
-    it('uses default status of idle', () => {
-      const { container } = render(StatusIndicator);
-      // Default status is idle - no status indicators should be rendered
-      expect(container.querySelector('.spinner')).toBeFalsy();
-      expect(container.querySelector('.success-circle')).toBeFalsy();
-      expect(container.querySelector('.error-circle')).toBeFalsy();
-    });
-  });
-
-  describe('loading state', () => {
-    it('renders spinner when status is loading', () => {
-      const { container } = render(StatusIndicator, { status: 'loading' });
-      const spinner = container.querySelector('.spinner');
-      expect(spinner).toBeTruthy();
-    });
-
-    it('renders spinner SVG with circles', () => {
-      const { container } = render(StatusIndicator, { status: 'loading' });
-      const spinner = container.querySelector('.spinner');
-      expect(spinner.querySelector('svg')).toBeTruthy();
-      const circles = spinner.querySelectorAll('circle');
-      expect(circles.length).toBe(2); // Background circle and animated spinner head
-      expect(spinner.querySelector('.spinner-head')).toBeTruthy();
-    });
-
-    it('applies size to spinner', () => {
-      const { container } = render(StatusIndicator, { status: 'loading', size: 64 });
-      const spinner = container.querySelector('.spinner');
-      expect(spinner.style.width).toBe('64px');
-      expect(spinner.style.height).toBe('64px');
-    });
-  });
-
-  describe('success state', () => {
-    it('renders success circle when status is success', () => {
-      const { container } = render(StatusIndicator, { status: 'success' });
-      const success = container.querySelector('.success-circle');
-      expect(success).toBeTruthy();
-    });
-
-    it('renders success SVG with circle and checkmark', () => {
-      const { container } = render(StatusIndicator, { status: 'success' });
-      const success = container.querySelector('.success-circle');
-      expect(success.querySelector('svg')).toBeTruthy();
-      expect(success.querySelector('circle')).toBeTruthy();
-      expect(success.querySelector('.checkmark')).toBeTruthy();
-    });
-
-    it('applies size to success circle', () => {
-      const { container } = render(StatusIndicator, { status: 'success', size: 32 });
-      const success = container.querySelector('.success-circle');
-      expect(success.style.width).toBe('32px');
-      expect(success.style.height).toBe('32px');
-    });
-  });
-
-  describe('error state', () => {
-    it('renders error circle when status is error', () => {
-      const { container } = render(StatusIndicator, { status: 'error' });
-      const error = container.querySelector('.error-circle');
-      expect(error).toBeTruthy();
-    });
-
-    it('renders error SVG with circle and X lines', () => {
-      const { container } = render(StatusIndicator, { status: 'error' });
-      const error = container.querySelector('.error-circle');
-      expect(error.querySelector('svg')).toBeTruthy();
-      expect(error.querySelector('circle')).toBeTruthy();
-      const xLines = error.querySelectorAll('.error-x');
-      expect(xLines.length).toBe(2);
-    });
-
-    it('applies size to error circle', () => {
-      const { container } = render(StatusIndicator, { status: 'error', size: 24 });
-      const error = container.querySelector('.error-circle');
-      expect(error.style.width).toBe('24px');
-      expect(error.style.height).toBe('24px');
-    });
-  });
-
-  describe('size prop', () => {
-    it('uses default size of 48px', () => {
-      const { container } = render(StatusIndicator, { status: 'loading' });
-      const spinner = container.querySelector('.spinner');
-      expect(spinner.style.width).toBe('48px');
-      expect(spinner.style.height).toBe('48px');
-    });
-
-    it('accepts custom size', () => {
-      const { container } = render(StatusIndicator, { status: 'loading', size: 100 });
-      const spinner = container.querySelector('.spinner');
-      expect(spinner.style.width).toBe('100px');
-      expect(spinner.style.height).toBe('100px');
-    });
-  });
-
-  describe('state transitions', () => {
-    it('only renders one state at a time - loading', () => {
-      const { container } = render(StatusIndicator, { status: 'loading' });
-      expect(container.querySelector('.spinner')).toBeTruthy();
-      expect(container.querySelector('.success-circle')).toBeFalsy();
-      expect(container.querySelector('.error-circle')).toBeFalsy();
-    });
-
-    it('only renders one state at a time - success', () => {
-      const { container } = render(StatusIndicator, { status: 'success' });
-      expect(container.querySelector('.spinner')).toBeFalsy();
-      expect(container.querySelector('.success-circle')).toBeTruthy();
-      expect(container.querySelector('.error-circle')).toBeFalsy();
-    });
-
-    it('only renders one state at a time - error', () => {
-      const { container } = render(StatusIndicator, { status: 'error' });
-      expect(container.querySelector('.spinner')).toBeFalsy();
-      expect(container.querySelector('.success-circle')).toBeFalsy();
-      expect(container.querySelector('.error-circle')).toBeTruthy();
-    });
-  });
-});
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import StatusIndicator from './StatusIndicator.svelte';
+
+describe('StatusIndicator', () => {
+  describe('idle state', () => {
+    it('renders empty container when status is idle', () => {
+      const { container } = render(StatusIndicator, { status: 'idle' });
+      // Check that no status indicators are rendered
+      expect(container.querySelector('.spinner')).toBeFalsy();
+      expect(container.querySelector('.success-circle')).toBeFalsy();
+      expect(container.querySelector('.error-circle')).toBeFalsy();
+    });
+
+    it('uses default status of idle', () => {
+      const { container } = render(StatusIndicator);
+      // Default status is idle - no status indicators should be rendered
+      expect(container.querySelector('.spinner')).toBeFalsy();
+      expect(container.querySelector('.success-circle')).toBeFalsy();
+      expect(container.querySelector('.error-circle')).toBeFalsy();
+    });
+  });
+
+  describe('loading state', () => {
+    it('renders spinner when status is loading', () => {
+      const { container } = render(StatusIndicator, { status: 'loading' });
+      const spinner = container.querySelector('.spinner');
+      expect(spinner).toBeTruthy();
+    });
+
+    it('renders spinner SVG with circles', () => {
+      const { container } = render(StatusIndicator, { status: 'loading' });
+      const spinner = container.querySelector('.spinner');
+      expect(spinner.querySelector('svg')).toBeTruthy();
+      const circles = spinner.querySelectorAll('circle');
+      expect(circles.length).toBe(2); // Background circle and animated spinner head
+      expect(spinner.querySelector('.spinner-head')).toBeTruthy();
+    });
+
+    it('applies size to spinner', () => {
+      const { container } = render(StatusIndicator, { status: 'loading', size: 64 });
+      const spinner = container.querySelector('.spinner');
+      expect(spinner.style.width).toBe('64px');
+      expect(spinner.style.height).toBe('64px');
+    });
+  });
+
+  describe('success state', () => {
+    it('renders success circle when status is success', () => {
+      const { container } = render(StatusIndicator, { status: 'success' });
+      const success = container.querySelector('.success-circle');
+      expect(success).toBeTruthy();
+    });
+
+    it('renders success SVG with circle and checkmark', () => {
+      const { container } = render(StatusIndicator, { status: 'success' });
+      const success = container.querySelector('.success-circle');
+      expect(success.querySelector('svg')).toBeTruthy();
+      expect(success.querySelector('circle')).toBeTruthy();
+      expect(success.querySelector('.checkmark')).toBeTruthy();
+    });
+
+    it('applies size to success circle', () => {
+      const { container } = render(StatusIndicator, { status: 'success', size: 32 });
+      const success = container.querySelector('.success-circle');
+      expect(success.style.width).toBe('32px');
+      expect(success.style.height).toBe('32px');
+    });
+  });
+
+  describe('error state', () => {
+    it('renders error circle when status is error', () => {
+      const { container } = render(StatusIndicator, { status: 'error' });
+      const error = container.querySelector('.error-circle');
+      expect(error).toBeTruthy();
+    });
+
+    it('renders error SVG with circle and X lines', () => {
+      const { container } = render(StatusIndicator, { status: 'error' });
+      const error = container.querySelector('.error-circle');
+      expect(error.querySelector('svg')).toBeTruthy();
+      expect(error.querySelector('circle')).toBeTruthy();
+      const xLines = error.querySelectorAll('.error-x');
+      expect(xLines.length).toBe(2);
+    });
+
+    it('applies size to error circle', () => {
+      const { container } = render(StatusIndicator, { status: 'error', size: 24 });
+      const error = container.querySelector('.error-circle');
+      expect(error.style.width).toBe('24px');
+      expect(error.style.height).toBe('24px');
+    });
+  });
+
+  describe('size prop', () => {
+    it('uses default size of 48px', () => {
+      const { container } = render(StatusIndicator, { status: 'loading' });
+      const spinner = container.querySelector('.spinner');
+      expect(spinner.style.width).toBe('48px');
+      expect(spinner.style.height).toBe('48px');
+    });
+
+    it('accepts custom size', () => {
+      const { container } = render(StatusIndicator, { status: 'loading', size: 100 });
+      const spinner = container.querySelector('.spinner');
+      expect(spinner.style.width).toBe('100px');
+      expect(spinner.style.height).toBe('100px');
+    });
+  });
+
+  describe('state transitions', () => {
+    it('only renders one state at a time - loading', () => {
+      const { container } = render(StatusIndicator, { status: 'loading' });
+      expect(container.querySelector('.spinner')).toBeTruthy();
+      expect(container.querySelector('.success-circle')).toBeFalsy();
+      expect(container.querySelector('.error-circle')).toBeFalsy();
+    });
+
+    it('only renders one state at a time - success', () => {
+      const { container } = render(StatusIndicator, { status: 'success' });
+      expect(container.querySelector('.spinner')).toBeFalsy();
+      expect(container.querySelector('.success-circle')).toBeTruthy();
+      expect(container.querySelector('.error-circle')).toBeFalsy();
+    });
+
+    it('only renders one state at a time - error', () => {
+      const { container } = render(StatusIndicator, { status: 'error' });
+      expect(container.querySelector('.spinner')).toBeFalsy();
+      expect(container.querySelector('.success-circle')).toBeFalsy();
+      expect(container.querySelector('.error-circle')).toBeTruthy();
+    });
+  });
+});

package/dist/recipes/feedback/StatusIndicator/StatusIndicator.svelte

@@ -17,160 +17,160 @@
   
   let effectiveStatus = $derived(statusMap[status] ?? status);
 </script>
-
-<div
-  class="flex items-center justify-center"
-  style="width: {size}px; height: {size}px;"
->
-  {#if effectiveStatus === "loading"}
-    <div class="spinner" style="width: {size}px; height: {size}px;">
-      <svg viewBox="0 0 50 50">
-        <circle
-          class="stroke-gray-200 dark:stroke-gray-600"
-          cx="25"
-          cy="25"
-          r="20"
-          fill="none"
-          stroke-width="4"
-        />
-        <circle
-          class="spinner-head stroke-blue-700 dark:stroke-blue-500"
-          cx="25"
-          cy="25"
-          r="20"
-          fill="none"
-          stroke-width="4"
-        />
-      </svg>
-    </div>
-  {:else if effectiveStatus === "success"}
-    <div class="success-circle" style="width: {size}px; height: {size}px;">
-      <svg viewBox="0 0 50 50">
-        <circle
-          class="stroke-green-600 fill-green-50 dark:fill-green-900/20"
-          cx="25"
-          cy="25"
-          r="23"
-          fill="none"
-          stroke-width="2"
-        />
-        <polyline
-          class="checkmark stroke-green-600"
-          points="15,26 22,33 35,18"
-          fill="none"
-          stroke-width="3"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </div>
-  {:else if effectiveStatus === "error"}
-    <div class="error-circle" style="width: {size}px; height: {size}px;">
-      <svg viewBox="0 0 50 50">
-        <circle
-          class="stroke-red-600 fill-red-50 dark:fill-red-900/20"
-          cx="25"
-          cy="25"
-          r="23"
-          fill="none"
-          stroke-width="2"
-        />
-        <line
-          class="error-x stroke-red-600"
-          x1="17" y1="17" x2="33" y2="33"
-          stroke-width="3"
-          stroke-linecap="round"
-        />
-        <line
-          class="error-x error-x-2 stroke-red-600"
-          x1="33" y1="17" x2="17" y2="33"
-          stroke-width="3"
-          stroke-linecap="round"
-        />
-      </svg>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .spinner svg {
-    animation: rotate 1s linear infinite;
-  }
-
-  .spinner-head {
-    stroke-dasharray: 80, 200;
-    stroke-dashoffset: 0;
-    animation: dash 1.2s ease-in-out infinite;
-  }
-
-  @keyframes rotate {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes dash {
-    0% {
-      stroke-dasharray: 1, 200;
-      stroke-dashoffset: 0;
-    }
-    50% {
-      stroke-dasharray: 80, 200;
-      stroke-dashoffset: -35;
-    }
-    100% {
-      stroke-dasharray: 80, 200;
-      stroke-dashoffset: -125;
-    }
-  }
-
-  .success-circle {
-    animation: pop-in 300ms ease-out;
-  }
-
-  .checkmark {
-    stroke-dasharray: 40;
-    stroke-dashoffset: 40;
-    animation: draw-check 400ms ease-out 100ms forwards;
-  }
-
-  @keyframes pop-in {
-    0% {
-      transform: scale(0.8);
-      opacity: 0;
-    }
-    50% {
-      transform: scale(1.05);
-    }
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-  }
-
-  @keyframes draw-check {
-    to {
-      stroke-dashoffset: 0;
-    }
-  }
-
-  .error-circle {
-    animation: pop-in 300ms ease-out;
-  }
-
-  .error-x {
-    stroke-dasharray: 25;
-    stroke-dashoffset: 25;
-    animation: draw-x 300ms ease-out 100ms forwards;
-  }
-
-  .error-x-2 {
-    animation-delay: 200ms;
-  }
-
-  @keyframes draw-x {
-    to {
-      stroke-dashoffset: 0;
-    }
-  }
-</style>
+
+<div
+  class="flex items-center justify-center"
+  style="width: {size}px; height: {size}px;"
+>
+  {#if effectiveStatus === "loading"}
+    <div class="spinner" style="width: {size}px; height: {size}px;">
+      <svg viewBox="0 0 50 50">
+        <circle
+          class="stroke-gray-200 dark:stroke-gray-600"
+          cx="25"
+          cy="25"
+          r="20"
+          fill="none"
+          stroke-width="4"
+        />
+        <circle
+          class="spinner-head stroke-blue-700 dark:stroke-blue-500"
+          cx="25"
+          cy="25"
+          r="20"
+          fill="none"
+          stroke-width="4"
+        />
+      </svg>
+    </div>
+  {:else if effectiveStatus === "success"}
+    <div class="success-circle" style="width: {size}px; height: {size}px;">
+      <svg viewBox="0 0 50 50">
+        <circle
+          class="stroke-green-600 fill-green-50 dark:fill-green-900/20"
+          cx="25"
+          cy="25"
+          r="23"
+          fill="none"
+          stroke-width="2"
+        />
+        <polyline
+          class="checkmark stroke-green-600"
+          points="15,26 22,33 35,18"
+          fill="none"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  {:else if effectiveStatus === "error"}
+    <div class="error-circle" style="width: {size}px; height: {size}px;">
+      <svg viewBox="0 0 50 50">
+        <circle
+          class="stroke-red-600 fill-red-50 dark:fill-red-900/20"
+          cx="25"
+          cy="25"
+          r="23"
+          fill="none"
+          stroke-width="2"
+        />
+        <line
+          class="error-x stroke-red-600"
+          x1="17" y1="17" x2="33" y2="33"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+        <line
+          class="error-x error-x-2 stroke-red-600"
+          x1="33" y1="17" x2="17" y2="33"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+      </svg>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .spinner svg {
+    animation: rotate 1s linear infinite;
+  }
+
+  .spinner-head {
+    stroke-dasharray: 80, 200;
+    stroke-dashoffset: 0;
+    animation: dash 1.2s ease-in-out infinite;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 80, 200;
+      stroke-dashoffset: -35;
+    }
+    100% {
+      stroke-dasharray: 80, 200;
+      stroke-dashoffset: -125;
+    }
+  }
+
+  .success-circle {
+    animation: pop-in 300ms ease-out;
+  }
+
+  .checkmark {
+    stroke-dasharray: 40;
+    stroke-dashoffset: 40;
+    animation: draw-check 400ms ease-out 100ms forwards;
+  }
+
+  @keyframes pop-in {
+    0% {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(1.05);
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes draw-check {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  .error-circle {
+    animation: pop-in 300ms ease-out;
+  }
+
+  .error-x {
+    stroke-dasharray: 25;
+    stroke-dashoffset: 25;
+    animation: draw-x 300ms ease-out 100ms forwards;
+  }
+
+  .error-x-2 {
+    animation-delay: 200ms;
+  }
+
+  @keyframes draw-x {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+</style>