@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/patterns/navigation/Header.svelte

@@ -60,196 +60,196 @@
     goto(href);
   }
 </script>
-
-{#if showBackButton}
-  <div class="block flex-1 md:hidden">
-    <Button variant="ghost" size="sm" onclick={() => history.back()}>
-      <ChevronLeft class="w-5 h-5" />
-      Back
-    </Button>
-  </div>
-  <div class="hidden md:flex w-full items-center">
-    <div class="flex items-center">
-      <a href="/" class="flex items-center"><img src={Logo} alt="Micdrop" width="100" /></a>
-    </div>
-
-    <nav class="hidden md:flex items-center gap-1 ml-8 flex-1">
-      {#each navLinks as { label, href }}
-        <a
-          {href}
-          class={`px-4 py-2 ${typography.label} ${typography.textMuted} no-underline rounded-lg transition-all duration-150
-            hover:text-gray-900 hover:bg-gray-100 hover:no-underline dark:hover:text-white dark:hover:bg-gray-700
-            ${isActive(href, currentPath) ? 'text-blue-700 bg-gray-100 dark:text-blue-500 dark:bg-gray-700' : ''}`}
-        >
-          {label}
-        </a>
-      {/each}
-    </nav>
-
-    <div class="flex items-center gap-3">
-      <DarkModeToggle />
-      <div class="relative ml-1">
-        <Button
-          variant="avatar"
-          size="md"
-          onclick={() => showDesktopDropdown = !showDesktopDropdown}
-        >
-          <Avatar src={avatar} rounded size="md" />
-        </Button>
-
-        {#if showDesktopDropdown}
-          <!-- svelte-ignore a11y_click_events_have_key_events -->
-          <!-- svelte-ignore a11y_no_static_element_interactions -->
-          <div class="fixed inset-0 z-30 bg-transparent" onclick={() => showDesktopDropdown = false}></div>
-          <div class="absolute top-[calc(100%+0.5rem)] right-0 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-40 overflow-hidden">
-            <div class="py-3 px-4 border-b border-gray-200 dark:border-gray-700">
-              <span class={`block ${typography.label}`}>{name || "Performer"}</span>
-              <span class={`block ${typography.xsMuted} mt-0.5`}>{email || ""}</span>
-            </div>
-            {#each dropdownLinks as { label, href }}
-              <Button
-                variant="menu-item"
-                size="md"
-                onclick={() => handleDropdownItemClick(href)}
-              >
-                {label}
-              </Button>
-            {/each}
-            <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
-            <Button
-              variant="menu-item-danger"
-              size="md"
-              onclick={() => { showDesktopDropdown = false; signoutHandler(); }}
-            >
-              Sign out
-            </Button>
-          </div>
-        {/if}
-      </div>
-    </div>
-  </div>
-{:else}
-  <div class="flex items-center">
-    <a href="/" class="flex items-center"><img src={Logo} alt="Micdrop" width="100" /></a>
-  </div>
-
-  <nav class="hidden md:flex items-center gap-1 ml-8 flex-1">
-    {#each navLinks as { label, href }}
-      <a
-        {href}
-        class={`px-4 py-2 ${typography.label} ${typography.textMuted} no-underline rounded-lg transition-all duration-150
-          hover:text-gray-900 hover:bg-gray-100 hover:no-underline dark:hover:text-white dark:hover:bg-gray-700
-          ${isActive(href, currentPath) ? 'text-blue-700 bg-gray-100 dark:text-blue-500 dark:bg-gray-700' : ''}`}
-      >
-        {label}
-      </a>
-    {/each}
-  </nav>
-
-  <div class="flex items-center gap-3">
-    <DarkModeToggle />
-
-    <div class="relative ml-1">
-      <Button
-        variant="avatar"
-        size="md"
-        class="block md:hidden"
-        onclick={() => showMobileSheet = true}
-      >
-        <Avatar src={avatar} rounded size="md" />
-      </Button>
-
-      <Button
-        variant="avatar"
-        size="md"
-        class="hidden md:block"
-        onclick={() => showDesktopDropdown = !showDesktopDropdown}
-      >
-        <Avatar src={avatar} rounded size="md" />
-      </Button>
-
-      {#if showDesktopDropdown}
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div class="fixed inset-0 z-30 bg-transparent" onclick={() => showDesktopDropdown = false}></div>
-        <div class="absolute top-[calc(100%+0.5rem)] right-0 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-40 overflow-hidden">
-          <div class="py-3 px-4 border-b border-gray-200 dark:border-gray-700">
-            <span class={`block ${typography.label}`}>{name || "Performer"}</span>
-            <span class={`block ${typography.xsMuted} mt-0.5`}>{email || ""}</span>
-          </div>
-          {#each dropdownLinks as { label, href }}
-            <Button
-              variant="menu-item"
-              size="md"
-              onclick={() => handleDropdownItemClick(href)}
-            >
-              {label}
-            </Button>
-          {/each}
-          <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
-          <Button
-            variant="menu-item-danger"
-            size="md"
-            onclick={() => { showDesktopDropdown = false; signoutHandler(); }}
-          >
-            Sign out
-          </Button>
-        </div>
-      {/if}
-    </div>
-  </div>
-{/if}
-
-{#if showMobileSheet}
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div
-    class="fixed inset-0 flex items-end justify-center bg-black/50 z-50 touch-none overscroll-none"
-    onclick={() => { showMobileSheet = false; }}
-    transition:fade={{ duration: 300 }}
-    use:portal
-  >
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="bg-white dark:bg-gray-800 rounded-t-3xl shadow-xl w-full max-h-[90vh] max-h-[90dvh] overflow-hidden pb-[var(--safe-bottom,0px)] touch-pan-y overscroll-contain"
-      onclick={(e) => e.stopPropagation()}
-      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
-    >
-      <div class="flex justify-center pt-3 pb-2">
-        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-sm"></div>
-      </div>
-
-      <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-        <p class={`${typography.h4} m-0`}>{name || "Performer"}</p>
-        <p class={`${typography.smMuted} mt-0.5 m-0`}>{email || ""}</p>
-      </div>
-
-      <div class="py-2">
-        {#each dropdownLinks as { label, href }}
-          <Button
-            variant="menu-item"
-            size="lg"
-            onclick={() => handleMobileSheetItemClick(href)}
-          >
-            {label}
-          </Button>
-        {/each}
-
-        <Button
-          variant="menu-item-danger"
-          size="lg"
-          onclick={() => { showMobileSheet = false; signoutHandler(); }}
-        >
-          Sign Out
-        </Button>
-      </div>
-
-      <div class="border-t-8 border-gray-100 dark:border-gray-700">
-        <Button variant="ghost" size="full" class="py-4 text-base font-semibold" onclick={() => showMobileSheet = false}>
-          Cancel
-        </Button>
-      </div>
-    </div>
-  </div>
-{/if}
+
+{#if showBackButton}
+  <div class="block flex-1 md:hidden">
+    <Button variant="ghost" size="sm" onclick={() => history.back()}>
+      <ChevronLeft class="w-5 h-5" />
+      Back
+    </Button>
+  </div>
+  <div class="hidden md:flex w-full items-center">
+    <div class="flex items-center">
+      <a href="/" class="flex items-center"><img src={Logo} alt="Micdrop" width="100" /></a>
+    </div>
+
+    <nav class="hidden md:flex items-center gap-1 ml-8 flex-1">
+      {#each navLinks as { label, href }}
+        <a
+          {href}
+          class={`px-4 py-2 ${typography.label} ${typography.textMuted} no-underline rounded-lg transition-all duration-150
+            hover:text-gray-900 hover:bg-gray-100 hover:no-underline dark:hover:text-white dark:hover:bg-gray-700
+            ${isActive(href, currentPath) ? 'text-blue-700 bg-gray-100 dark:text-blue-500 dark:bg-gray-700' : ''}`}
+        >
+          {label}
+        </a>
+      {/each}
+    </nav>
+
+    <div class="flex items-center gap-3">
+      <DarkModeToggle />
+      <div class="relative ml-1">
+        <Button
+          variant="avatar"
+          size="md"
+          onclick={() => showDesktopDropdown = !showDesktopDropdown}
+        >
+          <Avatar src={avatar} rounded size="md" />
+        </Button>
+
+        {#if showDesktopDropdown}
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div class="fixed inset-0 z-30 bg-transparent" onclick={() => showDesktopDropdown = false}></div>
+          <div class="absolute top-[calc(100%+0.5rem)] right-0 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-40 overflow-hidden">
+            <div class="py-3 px-4 border-b border-gray-200 dark:border-gray-700">
+              <span class={`block ${typography.label}`}>{name || "Performer"}</span>
+              <span class={`block ${typography.xsMuted} mt-0.5`}>{email || ""}</span>
+            </div>
+            {#each dropdownLinks as { label, href }}
+              <Button
+                variant="menu-item"
+                size="md"
+                onclick={() => handleDropdownItemClick(href)}
+              >
+                {label}
+              </Button>
+            {/each}
+            <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
+            <Button
+              variant="menu-item-danger"
+              size="md"
+              onclick={() => { showDesktopDropdown = false; signoutHandler(); }}
+            >
+              Sign out
+            </Button>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+{:else}
+  <div class="flex items-center">
+    <a href="/" class="flex items-center"><img src={Logo} alt="Micdrop" width="100" /></a>
+  </div>
+
+  <nav class="hidden md:flex items-center gap-1 ml-8 flex-1">
+    {#each navLinks as { label, href }}
+      <a
+        {href}
+        class={`px-4 py-2 ${typography.label} ${typography.textMuted} no-underline rounded-lg transition-all duration-150
+          hover:text-gray-900 hover:bg-gray-100 hover:no-underline dark:hover:text-white dark:hover:bg-gray-700
+          ${isActive(href, currentPath) ? 'text-blue-700 bg-gray-100 dark:text-blue-500 dark:bg-gray-700' : ''}`}
+      >
+        {label}
+      </a>
+    {/each}
+  </nav>
+
+  <div class="flex items-center gap-3">
+    <DarkModeToggle />
+
+    <div class="relative ml-1">
+      <Button
+        variant="avatar"
+        size="md"
+        class="block md:hidden"
+        onclick={() => showMobileSheet = true}
+      >
+        <Avatar src={avatar} rounded size="md" />
+      </Button>
+
+      <Button
+        variant="avatar"
+        size="md"
+        class="hidden md:block"
+        onclick={() => showDesktopDropdown = !showDesktopDropdown}
+      >
+        <Avatar src={avatar} rounded size="md" />
+      </Button>
+
+      {#if showDesktopDropdown}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="fixed inset-0 z-30 bg-transparent" onclick={() => showDesktopDropdown = false}></div>
+        <div class="absolute top-[calc(100%+0.5rem)] right-0 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-40 overflow-hidden">
+          <div class="py-3 px-4 border-b border-gray-200 dark:border-gray-700">
+            <span class={`block ${typography.label}`}>{name || "Performer"}</span>
+            <span class={`block ${typography.xsMuted} mt-0.5`}>{email || ""}</span>
+          </div>
+          {#each dropdownLinks as { label, href }}
+            <Button
+              variant="menu-item"
+              size="md"
+              onclick={() => handleDropdownItemClick(href)}
+            >
+              {label}
+            </Button>
+          {/each}
+          <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
+          <Button
+            variant="menu-item-danger"
+            size="md"
+            onclick={() => { showDesktopDropdown = false; signoutHandler(); }}
+          >
+            Sign out
+          </Button>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+{#if showMobileSheet}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="fixed inset-0 flex items-end justify-center bg-black/50 z-50 touch-none overscroll-none"
+    onclick={() => { showMobileSheet = false; }}
+    transition:fade={{ duration: 300 }}
+    use:portal
+  >
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="bg-white dark:bg-gray-800 rounded-t-3xl shadow-xl w-full max-h-[90vh] max-h-[90dvh] overflow-hidden pb-[var(--safe-bottom,0px)] touch-pan-y overscroll-contain"
+      onclick={(e) => e.stopPropagation()}
+      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
+    >
+      <div class="flex justify-center pt-3 pb-2">
+        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-sm"></div>
+      </div>
+
+      <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+        <p class={`${typography.h4} m-0`}>{name || "Performer"}</p>
+        <p class={`${typography.smMuted} mt-0.5 m-0`}>{email || ""}</p>
+      </div>
+
+      <div class="py-2">
+        {#each dropdownLinks as { label, href }}
+          <Button
+            variant="menu-item"
+            size="lg"
+            onclick={() => handleMobileSheetItemClick(href)}
+          >
+            {label}
+          </Button>
+        {/each}
+
+        <Button
+          variant="menu-item-danger"
+          size="lg"
+          onclick={() => { showMobileSheet = false; signoutHandler(); }}
+        >
+          Sign Out
+        </Button>
+      </div>
+
+      <div class="border-t-8 border-gray-100 dark:border-gray-700">
+        <Button variant="ghost" size="full" class="py-4 text-base font-semibold" onclick={() => showMobileSheet = false}>
+          Cancel
+        </Button>
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/patterns/page/PageHeader.spec.d.ts

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

package/dist/patterns/page/PageHeader.spec.d.ts.map

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

package/dist/patterns/page/PageHeader.spec.js

@@ -0,0 +1,167 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import PageHeader from './PageHeader.svelte';
+
+describe('PageHeader Component', () => {
+  test('renders a header element', () => {
+    const { container } = render(PageHeader);
+    expect(container.querySelector('header')).toBeInTheDocument();
+  });
+
+  test('has space-y-4 class', () => {
+    const { container } = render(PageHeader);
+    const header = container.querySelector('header');
+    expect(header).toHaveClass('space-y-4');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(PageHeader, { props: { class: 'custom-header' } });
+    const header = container.querySelector('header');
+    expect(header).toHaveClass('custom-header');
+  });
+});
+
+describe('PageHeader Title', () => {
+  test('no title renders no h1', () => {
+    const { container } = render(PageHeader);
+    expect(container.querySelector('h1')).not.toBeInTheDocument();
+  });
+
+  test('title prop renders h1', () => {
+    render(PageHeader, { props: { title: 'Dashboard' } });
+    expect(screen.getByText('Dashboard')).toBeInTheDocument();
+  });
+
+  test('title is in h1 element', () => {
+    const { container } = render(PageHeader, { props: { title: 'Settings' } });
+    const h1 = container.querySelector('h1');
+    expect(h1).toBeInTheDocument();
+    expect(h1).toHaveTextContent('Settings');
+  });
+});
+
+describe('PageHeader Subtitle', () => {
+  test('no subtitle renders no p', () => {
+    const { container } = render(PageHeader);
+    expect(container.querySelector('p')).not.toBeInTheDocument();
+  });
+
+  test('subtitle prop renders p', () => {
+    render(PageHeader, { props: { subtitle: 'Manage your account' } });
+    expect(screen.getByText('Manage your account')).toBeInTheDocument();
+  });
+
+  test('subtitle is in p element', () => {
+    const { container } = render(PageHeader, { props: { subtitle: 'Welcome back' } });
+    const p = container.querySelector('p');
+    expect(p).toBeInTheDocument();
+    expect(p).toHaveTextContent('Welcome back');
+  });
+
+  test('subtitle p has mt-1 margin', () => {
+    const { container } = render(PageHeader, { props: { subtitle: 'Test' } });
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('mt-1');
+  });
+});
+
+describe('PageHeader Breadcrumb', () => {
+  test('no breadcrumb by default', () => {
+    const { container } = render(PageHeader);
+    expect(container.querySelector('nav')).not.toBeInTheDocument();
+  });
+
+  test('empty breadcrumb array renders no nav', () => {
+    const { container } = render(PageHeader, { props: { breadcrumb: [] } });
+    expect(container.querySelector('nav')).not.toBeInTheDocument();
+  });
+
+  test('breadcrumb with items renders nav', () => {
+    const { container } = render(PageHeader, {
+      props: {
+        breadcrumb: [
+          { name: 'Home', href: '/' },
+          { name: 'Settings', href: '/settings' }
+        ]
+      }
+    });
+    expect(container.querySelector('nav')).toBeInTheDocument();
+  });
+
+  test('breadcrumb links are rendered', () => {
+    render(PageHeader, {
+      props: {
+        breadcrumb: [{ name: 'Home', href: '/' }]
+      }
+    });
+    expect(screen.getByText('Home')).toBeInTheDocument();
+  });
+});
+
+describe('PageHeader Layout', () => {
+  test('has flex container for title and actions', () => {
+    const { container } = render(PageHeader, { props: { title: 'Test' } });
+    const flexDiv = container.querySelector('header > div.flex');
+    expect(flexDiv).toBeInTheDocument();
+  });
+
+  test('flex container has responsive classes', () => {
+    const { container } = render(PageHeader, { props: { title: 'Test' } });
+    const flexDiv = container.querySelector('header > div.flex');
+    expect(flexDiv).toHaveClass('flex-col');
+    expect(flexDiv).toHaveClass('sm:flex-row');
+  });
+
+  test('flex container has gap-4', () => {
+    const { container } = render(PageHeader, { props: { title: 'Test' } });
+    const flexDiv = container.querySelector('header > div.flex');
+    expect(flexDiv).toHaveClass('gap-4');
+  });
+
+  test('flex container has sm:items-center', () => {
+    const { container } = render(PageHeader, { props: { title: 'Test' } });
+    const flexDiv = container.querySelector('header > div.flex');
+    expect(flexDiv).toHaveClass('sm:items-center');
+  });
+
+  test('flex container has sm:justify-between', () => {
+    const { container } = render(PageHeader, { props: { title: 'Test' } });
+    const flexDiv = container.querySelector('header > div.flex');
+    expect(flexDiv).toHaveClass('sm:justify-between');
+  });
+});
+
+describe('PageHeader Combinations', () => {
+  test('title and subtitle together', () => {
+    render(PageHeader, { props: { title: 'Users', subtitle: 'Manage all users' } });
+    expect(screen.getByText('Users')).toBeInTheDocument();
+    expect(screen.getByText('Manage all users')).toBeInTheDocument();
+  });
+
+  test('breadcrumb with title', () => {
+    const { container } = render(PageHeader, {
+      props: {
+        title: 'Profile',
+        breadcrumb: [{ name: 'Settings', href: '/settings' }]
+      }
+    });
+    expect(container.querySelector('nav')).toBeInTheDocument();
+    expect(screen.getByText('Profile')).toBeInTheDocument();
+  });
+
+  test('all props together', () => {
+    const { container } = render(PageHeader, {
+      props: {
+        title: 'Account',
+        subtitle: 'Update your details',
+        breadcrumb: [{ name: 'Home', href: '/' }],
+        class: 'mb-8'
+      }
+    });
+    const header = container.querySelector('header');
+    expect(header).toHaveClass('mb-8');
+    expect(container.querySelector('nav')).toBeInTheDocument();
+    expect(screen.getByText('Account')).toBeInTheDocument();
+    expect(screen.getByText('Update your details')).toBeInTheDocument();
+  });
+});

package/dist/patterns/page/PageHeader.svelte

@@ -29,21 +29,21 @@
   {#if breadcrumb.length > 0}
     <Breadcrumb data={breadcrumb} />
   {/if}
-
-  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-    <div>
-      {#if title}
-        <h1 class={typography.h1}>{title}</h1>
-      {/if}
-      {#if subtitle}
-        <p class={`mt-1 ${typography.smMuted}`}>{subtitle}</p>
-      {/if}
-    </div>
-
-    {#if actions}
-      <div class="flex items-center gap-3">
-        {@render actions()}
-      </div>
-    {/if}
-  </div>
-</header>
+
+  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+    <div>
+      {#if title}
+        <h1 class={typography.h1}>{title}</h1>
+      {/if}
+      {#if subtitle}
+        <p class={`mt-1 ${typography.smMuted}`}>{subtitle}</p>
+      {/if}
+    </div>
+
+    {#if actions}
+      <div class="flex items-center gap-3">
+        {@render actions()}
+      </div>
+    {/if}
+  </div>
+</header>

package/dist/patterns/page/PageLayout.spec.d.ts

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

package/dist/patterns/page/PageLayout.spec.d.ts.map

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