@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/primitives/Tabs/Tabs.spec.js

@@ -0,0 +1,295 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import Tabs from './Tabs.svelte';
+import TabsWithItems from './TabsWithItems.test.svelte';
+
+describe('Tabs Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(Tabs);
+    expect(container.querySelector('div.flex.flex-col')).toBeInTheDocument();
+  });
+
+  test('renders a tablist ul', () => {
+    const { container } = render(Tabs);
+    expect(container.querySelector('ul[role="tablist"]')).toBeInTheDocument();
+  });
+
+  test('renders content area with pt-4 padding', () => {
+    const { container } = render(Tabs);
+    expect(container.querySelector('.pt-4')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Tabs, { props: { class: 'custom-tabs' } });
+    const wrapper = container.querySelector('div.flex.flex-col');
+    expect(wrapper).toHaveClass('custom-tabs');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(Tabs, { props: { 'data-testid': 'my-tabs' } });
+    const wrapper = container.querySelector('[data-testid="my-tabs"]');
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  test('applies contentClass to content div', () => {
+    const { container } = render(Tabs, { props: { contentClass: 'custom-content' } });
+    expect(container.querySelector('.custom-content')).toBeInTheDocument();
+  });
+});
+
+describe('Tabs Styles - Underline', () => {
+  test('underline style has border-b class', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'underline' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('border-b');
+    expect(tablist).toHaveClass('border-gray-200');
+  });
+
+  test('underline style has -mb-px class', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'underline' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('-mb-px');
+  });
+
+  test('underline is default style', () => {
+    const { container } = render(Tabs);
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('border-b');
+  });
+});
+
+describe('Tabs Styles - Pills', () => {
+  test('pills style has gap-2 class', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'pills' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('gap-2');
+  });
+
+  test('pills style does not have border-b', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'pills' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).not.toHaveClass('border-b');
+  });
+});
+
+describe('Tabs Styles - Full', () => {
+  test('full style has divide-x class', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'full' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('divide-x');
+    expect(tablist).toHaveClass('divide-gray-200');
+  });
+
+  test('full style has rounded-lg class', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'full' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('rounded-lg');
+  });
+
+  test('full style has shadow class', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'full' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('shadow');
+  });
+
+  test('full style has overflow-hidden', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'full' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('overflow-hidden');
+  });
+});
+
+describe('Tabs Common Styling', () => {
+  test('tablist has flex class', () => {
+    const { container } = render(Tabs);
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('flex');
+  });
+
+  test('tablist has flex-wrap class', () => {
+    const { container } = render(Tabs);
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('flex-wrap');
+  });
+
+  test('tablist has text-center class', () => {
+    const { container } = render(Tabs);
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('text-center');
+  });
+
+  test('tablist has font-medium class', () => {
+    const { container } = render(Tabs);
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('font-medium');
+  });
+});
+
+describe('Tabs Props', () => {
+  test('tabStyle defaults to underline', () => {
+    const { container } = render(Tabs);
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('border-b');
+  });
+
+  test('contentClass is applied to content div', () => {
+    const { container } = render(Tabs, { props: { contentClass: 'my-content-class' } });
+    expect(container.querySelector('.my-content-class')).toBeInTheDocument();
+  });
+
+  test('activeTabValue can be set', () => {
+    const { container } = render(Tabs, { props: { activeTabValue: 'tab1' } });
+    // Component accepts the prop without error
+    expect(container.querySelector('div.flex.flex-col')).toBeInTheDocument();
+  });
+});
+
+describe('Tabs Accessibility', () => {
+  test('tablist has role="tablist"', () => {
+    const { container } = render(Tabs);
+    expect(container.querySelector('[role="tablist"]')).toBeInTheDocument();
+  });
+});
+
+describe('Tabs Dark Mode', () => {
+  test('underline has dark mode border class', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'underline' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('dark:border-gray-700');
+  });
+
+  test('full style has dark mode divide class', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'full' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('dark:divide-gray-700');
+  });
+});
+
+describe('Tabs with TabItems - registerTab functionality', () => {
+  test('auto-selects first tab when no active tab is set', async () => {
+    const { container } = render(TabsWithItems);
+
+    // Wait for tabs to register and render
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    // First tab content should be visible
+    expect(screen.getByTestId('tab1-content')).toBeInTheDocument();
+
+    // First tab button should be active
+    const buttons = container.querySelectorAll('button[role="tab"]');
+    expect(buttons[0]).toHaveAttribute('aria-selected', 'true');
+  });
+
+  test('respects open prop on TabItem', async () => {
+    const { container } = render(TabsWithItems, { props: { withOpen: true } });
+
+    // Wait for tabs to register
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    // First tab with open=true should be active
+    expect(screen.getByTestId('tab1-content')).toBeInTheDocument();
+
+    const buttons = container.querySelectorAll('button[role="tab"]');
+    expect(buttons[0]).toHaveAttribute('aria-selected', 'true');
+  });
+
+  test('registerTab prevents duplicate tab registration', async () => {
+    const { container } = render(TabsWithItems);
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    // Should only have 3 tabs, not duplicates
+    const buttons = container.querySelectorAll('button[role="tab"]');
+    expect(buttons).toHaveLength(3);
+  });
+
+  test('can switch between tabs', async () => {
+    const { container } = render(TabsWithItems);
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    // Click second tab
+    const buttons = container.querySelectorAll('button[role="tab"]');
+    buttons[1].click();
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    // Second tab content should be visible
+    expect(screen.getByTestId('tab2-content')).toBeInTheDocument();
+    expect(buttons[1]).toHaveAttribute('aria-selected', 'true');
+  });
+
+  test('activeTabValue can be set to specific tab', async () => {
+    const { container } = render(TabsWithItems, {
+      props: {
+        activeTabValue: 'tab2'
+      }
+    });
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    // Second tab should be active
+    expect(screen.getByTestId('tab2-content')).toBeInTheDocument();
+
+    const buttons = container.querySelectorAll('button[role="tab"]');
+    expect(buttons[1]).toHaveAttribute('aria-selected', 'true');
+  });
+
+  test('renders tab titles correctly', async () => {
+    const { container } = render(TabsWithItems);
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    const buttons = container.querySelectorAll('button[role="tab"]');
+    expect(buttons[0]).toHaveTextContent('First Tab');
+    expect(buttons[1]).toHaveTextContent('Second Tab');
+    expect(buttons[2]).toHaveTextContent('Third Tab');
+  });
+
+  test('pills style applies correct active classes', async () => {
+    const { container } = render(TabsWithItems, { props: { tabStyle: 'pills' } });
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    const buttons = container.querySelectorAll('button[role="tab"]');
+
+    // Active tab should have pills active classes
+    expect(buttons[0]).toHaveClass('bg-blue-600');
+    expect(buttons[0]).toHaveClass('text-white');
+    expect(buttons[0]).toHaveClass('rounded-lg');
+
+    // Inactive tabs should have pills inactive classes
+    expect(buttons[1]).toHaveClass('rounded-lg');
+    expect(buttons[1]).not.toHaveClass('bg-blue-600');
+  });
+
+  test('pills style inactive tab hover state', async () => {
+    const { container } = render(TabsWithItems, { props: { tabStyle: 'pills' } });
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    const buttons = container.querySelectorAll('button[role="tab"]');
+
+    // Check that inactive button has hover classes in its className
+    const inactiveButton = buttons[1];
+    expect(inactiveButton.className).toContain('hover:text-gray-900');
+    expect(inactiveButton.className).toContain('hover:bg-gray-100');
+  });
+
+  test('full style applies correct classes', async () => {
+    const { container } = render(TabsWithItems, { props: { tabStyle: 'full' } });
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    const buttons = container.querySelectorAll('button[role="tab"]');
+
+    // Active tab should have full active classes
+    expect(buttons[0]).toHaveClass('w-full');
+    expect(buttons[0]).toHaveClass('bg-gray-100');
+    expect(buttons[0]).toHaveClass('text-gray-900');
+
+    // Inactive tabs should have full inactive classes
+    expect(buttons[1]).toHaveClass('w-full');
+    expect(buttons[1]).toHaveClass('bg-white');
+  });
+});

package/dist/primitives/Tabs/Tabs.stories.svelte

@@ -1,112 +1,112 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Tabs from './Tabs.svelte';
-  import TabItem from './TabItem.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Tabs',
-    component: Tabs,
-    tags: ['autodocs'],
-    parameters: {
-      docs: {
-        description: {
-          component: 'Tabbed content navigation component. Use TabItem children for each tab panel.',
-        },
-      },
-    },
-  });
-
-  let activeTab = $state(0);
-</script>
-
-<Story name="Default">
-  {#snippet template()}
-    <Tabs>
-      <TabItem title="Profile">
-        <div class="p-4">
-          <h3 class="font-medium mb-2">Profile Settings</h3>
-          <p class="text-gray-600">Manage your profile information and preferences.</p>
-        </div>
-      </TabItem>
-      <TabItem title="Account">
-        <div class="p-4">
-          <h3 class="font-medium mb-2">Account Settings</h3>
-          <p class="text-gray-600">Manage your account security and billing.</p>
-        </div>
-      </TabItem>
-      <TabItem title="Notifications">
-        <div class="p-4">
-          <h3 class="font-medium mb-2">Notification Settings</h3>
-          <p class="text-gray-600">Configure how you receive notifications.</p>
-        </div>
-      </TabItem>
-    </Tabs>
-  {/snippet}
-</Story>
-
-<Story name="Controlled">
-  {#snippet template()}
-    <div>
-      <p class="text-sm text-gray-500 mb-4">Active tab: {activeTab}</p>
-      <Tabs bind:activeTab={activeTab}>
-        <TabItem title="Tab 1">
-          <div class="p-4">Content for Tab 1</div>
-        </TabItem>
-        <TabItem title="Tab 2">
-          <div class="p-4">Content for Tab 2</div>
-        </TabItem>
-        <TabItem title="Tab 3">
-          <div class="p-4">Content for Tab 3</div>
-        </TabItem>
-      </Tabs>
-      <div class="mt-4 flex gap-2">
-        <button
-          class="px-3 py-1 bg-gray-200 rounded text-sm"
-          onclick={() => activeTab = 0}
-        >Go to Tab 1</button>
-        <button
-          class="px-3 py-1 bg-gray-200 rounded text-sm"
-          onclick={() => activeTab = 2}
-        >Go to Tab 3</button>
-      </div>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Icons">
-  {#snippet template()}
-    <Tabs>
-      <TabItem title="🏠 Home">
-        <div class="p-4">Home tab content</div>
-      </TabItem>
-      <TabItem title="⚙️ Settings">
-        <div class="p-4">Settings tab content</div>
-      </TabItem>
-      <TabItem title="👤 Profile">
-        <div class="p-4">Profile tab content</div>
-      </TabItem>
-    </Tabs>
-  {/snippet}
-</Story>
-
-<Story name="Many Tabs">
-  {#snippet template()}
-    <Tabs>
-      <TabItem title="Overview">
-        <div class="p-4">Overview content</div>
-      </TabItem>
-      <TabItem title="Analytics">
-        <div class="p-4">Analytics content</div>
-      </TabItem>
-      <TabItem title="Reports">
-        <div class="p-4">Reports content</div>
-      </TabItem>
-      <TabItem title="Notifications">
-        <div class="p-4">Notifications content</div>
-      </TabItem>
-      <TabItem title="Settings">
-        <div class="p-4">Settings content</div>
-      </TabItem>
-    </Tabs>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Tabs from './Tabs.svelte';
+  import TabItem from './TabItem.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Tabs',
+    component: Tabs,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        description: {
+          component: 'Tabbed content navigation component. Use TabItem children for each tab panel.',
+        },
+      },
+    },
+  });
+
+  let activeTab = $state(0);
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <Tabs>
+      <TabItem title="Profile">
+        <div class="p-4">
+          <h3 class="font-medium mb-2">Profile Settings</h3>
+          <p class="text-gray-600">Manage your profile information and preferences.</p>
+        </div>
+      </TabItem>
+      <TabItem title="Account">
+        <div class="p-4">
+          <h3 class="font-medium mb-2">Account Settings</h3>
+          <p class="text-gray-600">Manage your account security and billing.</p>
+        </div>
+      </TabItem>
+      <TabItem title="Notifications">
+        <div class="p-4">
+          <h3 class="font-medium mb-2">Notification Settings</h3>
+          <p class="text-gray-600">Configure how you receive notifications.</p>
+        </div>
+      </TabItem>
+    </Tabs>
+  {/snippet}
+</Story>
+
+<Story name="Controlled">
+  {#snippet template()}
+    <div>
+      <p class="text-sm text-gray-500 mb-4">Active tab: {activeTab}</p>
+      <Tabs bind:activeTab={activeTab}>
+        <TabItem title="Tab 1">
+          <div class="p-4">Content for Tab 1</div>
+        </TabItem>
+        <TabItem title="Tab 2">
+          <div class="p-4">Content for Tab 2</div>
+        </TabItem>
+        <TabItem title="Tab 3">
+          <div class="p-4">Content for Tab 3</div>
+        </TabItem>
+      </Tabs>
+      <div class="mt-4 flex gap-2">
+        <button
+          class="px-3 py-1 bg-gray-200 rounded text-sm"
+          onclick={() => activeTab = 0}
+        >Go to Tab 1</button>
+        <button
+          class="px-3 py-1 bg-gray-200 rounded text-sm"
+          onclick={() => activeTab = 2}
+        >Go to Tab 3</button>
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Icons">
+  {#snippet template()}
+    <Tabs>
+      <TabItem title="🏠 Home">
+        <div class="p-4">Home tab content</div>
+      </TabItem>
+      <TabItem title="⚙️ Settings">
+        <div class="p-4">Settings tab content</div>
+      </TabItem>
+      <TabItem title="👤 Profile">
+        <div class="p-4">Profile tab content</div>
+      </TabItem>
+    </Tabs>
+  {/snippet}
+</Story>
+
+<Story name="Many Tabs">
+  {#snippet template()}
+    <Tabs>
+      <TabItem title="Overview">
+        <div class="p-4">Overview content</div>
+      </TabItem>
+      <TabItem title="Analytics">
+        <div class="p-4">Analytics content</div>
+      </TabItem>
+      <TabItem title="Reports">
+        <div class="p-4">Reports content</div>
+      </TabItem>
+      <TabItem title="Notifications">
+        <div class="p-4">Notifications content</div>
+      </TabItem>
+      <TabItem title="Settings">
+        <div class="p-4">Settings content</div>
+      </TabItem>
+    </Tabs>
+  {/snippet}
+</Story>