@getmicdrop/svelte-components 5.5.1 → 5.5.5

package/dist/calendar/FAQs/FAQs.spec.d.ts

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

package/dist/calendar/FAQs/FAQs.spec.d.ts.map

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

package/dist/calendar/FAQs/FAQs.spec.js

@@ -0,0 +1,238 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/svelte';
+import FAQs from './FAQs.svelte';
+
+describe('FAQs Component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('basic rendering', () => {
+    it('renders empty state when no faqs provided', () => {
+      render(FAQs);
+      expect(screen.getByText('No FAQs available.')).toBeInTheDocument();
+    });
+
+    it('renders title by default', () => {
+      render(FAQs, { props: { faqs: [] } });
+      expect(screen.getByRole('heading', { name: 'FAQs' })).toBeInTheDocument();
+    });
+
+    it('renders custom title', () => {
+      render(FAQs, { props: { title: 'Questions', faqs: [] } });
+      expect(screen.getByRole('heading', { name: 'Questions' })).toBeInTheDocument();
+    });
+
+    it('hides title when showTitle is false', () => {
+      render(FAQs, { props: { showTitle: false, faqs: [] } });
+      expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('simple list mode', () => {
+    const faqs = [
+      { question: 'What is this?', answer: 'This is a FAQ component.' },
+      { question: 'How does it work?', answer: 'It displays questions and answers.' },
+    ];
+
+    it('renders questions', () => {
+      render(FAQs, { props: { faqs } });
+      expect(screen.getByText('What is this?')).toBeInTheDocument();
+      expect(screen.getByText('How does it work?')).toBeInTheDocument();
+    });
+
+    it('renders answers', () => {
+      render(FAQs, { props: { faqs } });
+      expect(screen.getByText('This is a FAQ component.')).toBeInTheDocument();
+      expect(screen.getByText('It displays questions and answers.')).toBeInTheDocument();
+    });
+
+    it('handles string-only faqs', () => {
+      render(FAQs, { props: { faqs: ['Just an answer', 'Another answer'] } });
+      expect(screen.getByText('Just an answer')).toBeInTheDocument();
+      expect(screen.getByText('Another answer')).toBeInTheDocument();
+    });
+
+    it('renders faq without question', () => {
+      render(FAQs, { props: { faqs: [{ question: '', answer: 'Just the answer' }] } });
+      expect(screen.getByText('Just the answer')).toBeInTheDocument();
+    });
+  });
+
+  describe('accordion mode', () => {
+    const faqs = [
+      { question: 'First question?', answer: 'First answer.' },
+      { question: 'Second question?', answer: 'Second answer.' },
+    ];
+
+    it('renders accordion buttons', () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      expect(screen.getByRole('button', { name: /First question/ })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Second question/ })).toBeInTheDocument();
+    });
+
+    it('starts with all items collapsed', () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach(button => {
+        expect(button).toHaveAttribute('aria-expanded', 'false');
+      });
+    });
+
+    it('expands item when clicked', async () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const button = screen.getByRole('button', { name: /First question/ });
+
+      await fireEvent.click(button);
+
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('collapses item when clicked again', async () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const button = screen.getByRole('button', { name: /First question/ });
+
+      await fireEvent.click(button);
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+
+      await fireEvent.click(button);
+      expect(button).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('closes other items when new one is opened', async () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const firstButton = screen.getByRole('button', { name: /First question/ });
+      const secondButton = screen.getByRole('button', { name: /Second question/ });
+
+      await fireEvent.click(firstButton);
+      expect(firstButton).toHaveAttribute('aria-expanded', 'true');
+
+      await fireEvent.click(secondButton);
+      expect(firstButton).toHaveAttribute('aria-expanded', 'false');
+      expect(secondButton).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('shows answer content when expanded', async () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const button = screen.getByRole('button', { name: /First question/ });
+
+      // Content is hidden initially
+      const answerDiv = screen.getByText('First answer.').closest('[id^="accordion-body"]');
+      expect(answerDiv).toHaveClass('hidden');
+
+      await fireEvent.click(button);
+
+      // Content is visible after click
+      expect(answerDiv).not.toHaveClass('hidden');
+    });
+
+    it('uses fallback text for items without question', () => {
+      render(FAQs, {
+        props: {
+          faqs: [{ question: '', answer: 'Answer only' }],
+          accordion: true
+        }
+      });
+      expect(screen.getByRole('button', { name: /Item 1/ })).toBeInTheDocument();
+    });
+  });
+
+  describe('accessibility', () => {
+    const faqs = [
+      { question: 'Question 1?', answer: 'Answer 1.' },
+      { question: 'Question 2?', answer: 'Answer 2.' },
+    ];
+
+    it('buttons have aria-controls', () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach((button, index) => {
+        expect(button).toHaveAttribute('aria-controls', `accordion-body-${index}`);
+      });
+    });
+
+    it('content has aria-labelledby', () => {
+      const { container } = render(FAQs, { props: { faqs, accordion: true } });
+      const contents = container.querySelectorAll('[id^="accordion-body-"]');
+      contents.forEach((content, index) => {
+        expect(content).toHaveAttribute('aria-labelledby', `accordion-heading-${index}`);
+      });
+    });
+  });
+
+  describe('styling', () => {
+    const faqs = [
+      { question: 'Q1?', answer: 'A1.' },
+      { question: 'Q2?', answer: 'A2.' },
+      { question: 'Q3?', answer: 'A3.' },
+    ];
+
+    it('applies rounded-t-lg to first accordion item', () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const buttons = screen.getAllByRole('button');
+      expect(buttons[0].className).toContain('rounded-t-lg');
+    });
+
+    it('applies rounded-b-lg to last accordion item when collapsed', () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const buttons = screen.getAllByRole('button');
+      expect(buttons[buttons.length - 1].className).toContain('rounded-b-lg');
+    });
+
+    it('applies active styling when expanded', async () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const button = screen.getByRole('button', { name: /Q1/ });
+
+      await fireEvent.click(button);
+
+      expect(button.className).toContain('text-gray-900');
+      expect(button.className).toContain('bg-gray-100');
+    });
+
+    it('chevron rotates when expanded', async () => {
+      const { container } = render(FAQs, { props: { faqs, accordion: true } });
+      const button = screen.getByRole('button', { name: /Q1/ });
+      const chevron = button.querySelector('svg');
+
+      expect(chevron.className.baseVal).not.toContain('rotate-180');
+
+      await fireEvent.click(button);
+
+      expect(chevron.className.baseVal).toContain('rotate-180');
+    });
+
+    it('accordion container has border', () => {
+      const { container } = render(FAQs, { props: { faqs, accordion: true } });
+      const accordionDiv = container.querySelector('.border.border-gray-200');
+      expect(accordionDiv).toBeInTheDocument();
+    });
+
+    it('simple list has space-y-4 gap', () => {
+      const { container } = render(FAQs, { props: { faqs, accordion: false } });
+      const listDiv = container.querySelector('.space-y-4');
+      expect(listDiv).toBeInTheDocument();
+    });
+  });
+
+  describe('dark mode', () => {
+    const faqs = [{ question: 'Q?', answer: 'A.' }];
+
+    it('accordion has dark mode border', () => {
+      const { container } = render(FAQs, { props: { faqs, accordion: true } });
+      const accordionDiv = container.querySelector('.border');
+      expect(accordionDiv.className).toContain('dark:border-gray-700');
+    });
+
+    it('accordion buttons have dark mode hover', () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const button = screen.getByRole('button');
+      expect(button.className).toContain('dark:hover:bg-gray-800');
+    });
+
+    it('accordion buttons have dark mode focus ring', () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const button = screen.getByRole('button');
+      expect(button.className).toContain('dark:focus:ring-gray-800');
+    });
+  });
+});

package/dist/calendar/FAQs/FAQs.svelte

@@ -1,75 +1,75 @@
-<script>
-  import { ChevronUpOutline } from "../../primitives/Icons";
-  import { typography } from '../../tokens/typography';
-
-  let {
-    faqs = [],
-    title = "FAQs",
-    showTitle = true,
-    accordion = false,
-  } = $props();
-
-  let openIndex = $state(null);
-
-  let items = $derived(faqs.map((f) =>
-    typeof f === 'string' ? { question: '', answer: f } : f
-  ));
-
-  function toggleAccordion(index) {
-    openIndex = openIndex === index ? null : index;
-  }
-</script>
-
-<div class="flex flex-col gap-3">
-  {#if showTitle}
-    <h2 class={typography.h2}>{title}</h2>
-  {/if}
-
-  {#if items.length}
-    {#if accordion}
-      <div class="border border-gray-200 rounded-lg dark:border-gray-700">
-        {#each items as { question, answer }, index}
-          <div>
-            <h3>
-              <button
-                type="button"
-                class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border-b border-gray-200 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-800 gap-3
-                  {index === 0 ? 'rounded-t-lg' : ''}
-                  {index === items.length - 1 && openIndex !== index ? 'border-b-0 rounded-b-lg' : ''}
-                  {openIndex === index ? 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:text-white' : ''}"
-                onclick={() => toggleAccordion(index)}
-                aria-expanded={openIndex === index}
-                aria-controls="accordion-body-{index}"
-              >
-                <span>{question || `Item ${index + 1}`}</span>
-                <ChevronUpOutline class="w-3 h-3 shrink-0 transition-transform duration-200 {openIndex === index ? 'rotate-180' : ''}" aria-hidden="true" />
-              </button>
-            </h3>
-            <div
-              id="accordion-body-{index}"
-              class="{openIndex === index ? '' : 'hidden'}"
-              aria-labelledby="accordion-heading-{index}"
-            >
-              <div class="p-5 border-b border-gray-200 dark:border-gray-700 {index === items.length - 1 ? 'border-b-0 rounded-b-lg' : ''}">
-                <p class="{typography.smMuted} leading-relaxed">{answer}</p>
-              </div>
-            </div>
-          </div>
-        {/each}
-      </div>
-    {:else}
-      <div class="space-y-4">
-        {#each items as { question, answer }}
-          <div>
-            {#if question}
-              <p class="{typography.label} mb-1">{question}</p>
-            {/if}
-            <p class="{typography.smMuted} leading-relaxed">{answer}</p>
-          </div>
-        {/each}
-      </div>
-    {/if}
-  {:else}
-    <p class="{typography.smMuted}">No FAQs available.</p>
-  {/if}
-</div>
+<script>
+  import { ChevronUpOutline } from "../../primitives/Icons";
+  import { typography } from '../../tokens/typography';
+
+  let {
+    faqs = [],
+    title = "FAQs",
+    showTitle = true,
+    accordion = false,
+  } = $props();
+
+  let openIndex = $state(null);
+
+  let items = $derived(faqs.map((f) =>
+    typeof f === 'string' ? { question: '', answer: f } : f
+  ));
+
+  function toggleAccordion(index) {
+    openIndex = openIndex === index ? null : index;
+  }
+</script>
+
+<div class="flex flex-col gap-3">
+  {#if showTitle}
+    <h2 class={typography.h2}>{title}</h2>
+  {/if}
+
+  {#if items.length}
+    {#if accordion}
+      <div class="border border-gray-200 rounded-lg dark:border-gray-700">
+        {#each items as { question, answer }, index}
+          <div>
+            <h3>
+              <button
+                type="button"
+                class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border-b border-gray-200 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-800 gap-3
+                  {index === 0 ? 'rounded-t-lg' : ''}
+                  {index === items.length - 1 && openIndex !== index ? 'border-b-0 rounded-b-lg' : ''}
+                  {openIndex === index ? 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:text-white' : ''}"
+                onclick={() => toggleAccordion(index)}
+                aria-expanded={openIndex === index}
+                aria-controls="accordion-body-{index}"
+              >
+                <span>{question || `Item ${index + 1}`}</span>
+                <ChevronUpOutline class="w-3 h-3 shrink-0 transition-transform duration-200 {openIndex === index ? 'rotate-180' : ''}" aria-hidden="true" />
+              </button>
+            </h3>
+            <div
+              id="accordion-body-{index}"
+              class="{openIndex === index ? '' : 'hidden'}"
+              aria-labelledby="accordion-heading-{index}"
+            >
+              <div class="p-5 border-b border-gray-200 dark:border-gray-700 {index === items.length - 1 ? 'border-b-0 rounded-b-lg' : ''}">
+                <p class="{typography.smMuted} leading-relaxed">{answer}</p>
+              </div>
+            </div>
+          </div>
+        {/each}
+      </div>
+    {:else}
+      <div class="space-y-4">
+        {#each items as { question, answer }}
+          <div>
+            {#if question}
+              <p class="{typography.label} mb-1">{question}</p>
+            {/if}
+            <p class="{typography.smMuted} leading-relaxed">{answer}</p>
+          </div>
+        {/each}
+      </div>
+    {/if}
+  {:else}
+    <p class="{typography.smMuted}">No FAQs available.</p>
+  {/if}
+</div>

package/dist/calendar/MonthSwitcher/MonthSwitcher.spec.d.ts

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

package/dist/calendar/MonthSwitcher/MonthSwitcher.spec.d.ts.map

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