@getmicdrop/svelte-components 5.3.12 → 5.3.13

package/dist/patterns/navigation/Header.spec.js

@@ -1,203 +1,203 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/svelte';
-import Header from './Header.svelte';
-
-// Mock SvelteKit modules
-vi.mock('$app/stores', () => ({
-  page: {
-    subscribe: (fn) => {
-      fn({ url: { pathname: '/shows' } });
-      return () => {};
-    }
-  }
-}));
-
-vi.mock('$app/paths', () => ({
-  base: '/performers'
-}));
-
-vi.mock('$app/navigation', () => ({
-  goto: vi.fn()
-}));
-
-describe('Header', () => {
-  const defaultProps = {
-    name: 'Test Performer',
-    email: 'test@example.com',
-    avatar: 'https://example.com/avatar.jpg',
-    navLinks: [
-      { label: 'Shows', href: '/shows' },
-      { label: 'Availability', href: '/availability' },
-      { label: 'Profile', href: '/profile' }
-    ],
-    dropdownLinks: [
-      { label: 'Account Settings', href: '/account-settings' },
-      { label: 'Payment Settings', href: '/payment-settings' }
-    ],
-    signoutHandler: vi.fn(),
-    showBackButton: false
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('basic rendering', () => {
-    it('renders the logo', () => {
-      const { container } = render(Header, defaultProps);
-      const logo = container.querySelector('img[alt="Micdrop"]');
-      expect(logo).toBeTruthy();
-    });
-
-    it('renders navigation links', () => {
-      render(Header, defaultProps);
-      expect(screen.getByText('Shows')).toBeTruthy();
-      expect(screen.getByText('Availability')).toBeTruthy();
-      expect(screen.getByText('Profile')).toBeTruthy();
-    });
-
-    it('renders dark mode toggle', () => {
-      const { container } = render(Header, defaultProps);
-      // DarkModeToggle should be present
-      expect(container.querySelector('button[aria-label]')).toBeTruthy();
-    });
-  });
-
-  describe('back button mode', () => {
-    it('shows back button when showBackButton is true', () => {
-      const { container } = render(Header, { ...defaultProps, showBackButton: true });
-      const backButton = container.querySelector('.header-back-button');
-      expect(backButton).toBeTruthy();
-    });
-
-    it('does not show back button by default', () => {
-      const { container } = render(Header, defaultProps);
-      const backButton = container.querySelector('.header-back-button');
-      expect(backButton).toBeFalsy();
-    });
-  });
-
-  describe('avatar buttons', () => {
-    it('renders mobile avatar button', () => {
-      const { container } = render(Header, defaultProps);
-      const mobileButton = container.querySelector('.avatar-button--mobile');
-      expect(mobileButton).toBeTruthy();
-    });
-
-    it('renders desktop avatar button', () => {
-      const { container } = render(Header, defaultProps);
-      const desktopButton = container.querySelector('.avatar-button--desktop');
-      expect(desktopButton).toBeTruthy();
-    });
-  });
-
-  describe('desktop dropdown', () => {
-    it('shows dropdown when desktop avatar is clicked', async () => {
-      const { container } = render(Header, defaultProps);
-      const desktopButton = container.querySelector('.avatar-button--desktop');
-
-      await fireEvent.click(desktopButton);
-
-      const dropdown = container.querySelector('.desktop-dropdown');
-      expect(dropdown).toBeTruthy();
-    });
-
-    it('displays user name and email in dropdown', async () => {
-      const { container } = render(Header, defaultProps);
-      const desktopButton = container.querySelector('.avatar-button--desktop');
-
-      await fireEvent.click(desktopButton);
-
-      expect(screen.getByText('Test Performer')).toBeTruthy();
-      expect(screen.getByText('test@example.com')).toBeTruthy();
-    });
-
-    it('displays dropdown links', async () => {
-      const { container } = render(Header, defaultProps);
-      const desktopButton = container.querySelector('.avatar-button--desktop');
-
-      await fireEvent.click(desktopButton);
-
-      expect(screen.getByText('Account Settings')).toBeTruthy();
-      expect(screen.getByText('Payment Settings')).toBeTruthy();
-    });
-
-    it('displays sign out button', async () => {
-      const { container } = render(Header, defaultProps);
-      const desktopButton = container.querySelector('.avatar-button--desktop');
-
-      await fireEvent.click(desktopButton);
-
-      expect(screen.getByText('Sign out')).toBeTruthy();
-    });
-
-    it('closes dropdown when backdrop is clicked', async () => {
-      const { container } = render(Header, defaultProps);
-      const desktopButton = container.querySelector('.avatar-button--desktop');
-
-      await fireEvent.click(desktopButton);
-
-      const backdrop = container.querySelector('.dropdown-backdrop');
-      await fireEvent.click(backdrop);
-
-      const dropdown = container.querySelector('.desktop-dropdown');
-      expect(dropdown).toBeFalsy();
-    });
-
-    it('calls signoutHandler when sign out is clicked', async () => {
-      const signoutHandler = vi.fn();
-      const { container } = render(Header, { ...defaultProps, signoutHandler });
-      const desktopButton = container.querySelector('.avatar-button--desktop');
-
-      await fireEvent.click(desktopButton);
-
-      const signOutButton = screen.getByText('Sign out');
-      await fireEvent.click(signOutButton);
-
-      expect(signoutHandler).toHaveBeenCalled();
-    });
-
-    it('toggles dropdown on repeated clicks', async () => {
-      const { container } = render(Header, defaultProps);
-      const desktopButton = container.querySelector('.avatar-button--desktop');
-
-      await fireEvent.click(desktopButton);
-      expect(container.querySelector('.desktop-dropdown')).toBeTruthy();
-
-      await fireEvent.click(desktopButton);
-      expect(container.querySelector('.desktop-dropdown')).toBeFalsy();
-    });
-  });
-
-  describe('mobile sheet', () => {
-    it('triggers mobile sheet state when mobile avatar is clicked', async () => {
-      const { container } = render(Header, defaultProps);
-      const mobileButton = container.querySelector('.avatar-button--mobile');
-
-      // Click should trigger the sheet opening (internal state)
-      await fireEvent.click(mobileButton);
-
-      // The mobile button should exist and be clickable
-      expect(mobileButton).toBeTruthy();
-    });
-  });
-
-  describe('navigation active state', () => {
-    it('marks current path as active', () => {
-      const { container } = render(Header, defaultProps);
-      const showsLink = container.querySelector('a[href="/shows"]');
-      expect(showsLink.classList.contains('active')).toBe(true);
-    });
-  });
-
-  describe('default values', () => {
-    it('shows "Performer" when name is empty', async () => {
-      const { container } = render(Header, { ...defaultProps, name: '' });
-      const desktopButton = container.querySelector('.avatar-button--desktop');
-
-      await fireEvent.click(desktopButton);
-
-      expect(screen.getByText('Performer')).toBeTruthy();
-    });
-  });
-});
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import Header from './Header.svelte';
+
+// Mock SvelteKit modules
+vi.mock('$app/stores', () => ({
+  page: {
+    subscribe: (fn) => {
+      fn({ url: { pathname: '/shows' } });
+      return () => {};
+    }
+  }
+}));
+
+vi.mock('$app/paths', () => ({
+  base: '/performers'
+}));
+
+vi.mock('$app/navigation', () => ({
+  goto: vi.fn()
+}));
+
+describe('Header', () => {
+  const defaultProps = {
+    name: 'Test Performer',
+    email: 'test@example.com',
+    avatar: 'https://example.com/avatar.jpg',
+    navLinks: [
+      { label: 'Shows', href: '/shows' },
+      { label: 'Availability', href: '/availability' },
+      { label: 'Profile', href: '/profile' }
+    ],
+    dropdownLinks: [
+      { label: 'Account Settings', href: '/account-settings' },
+      { label: 'Payment Settings', href: '/payment-settings' }
+    ],
+    signoutHandler: vi.fn(),
+    showBackButton: false
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('basic rendering', () => {
+    it('renders the logo', () => {
+      const { container } = render(Header, defaultProps);
+      const logo = container.querySelector('img[alt="Micdrop"]');
+      expect(logo).toBeTruthy();
+    });
+
+    it('renders navigation links', () => {
+      render(Header, defaultProps);
+      expect(screen.getByText('Shows')).toBeTruthy();
+      expect(screen.getByText('Availability')).toBeTruthy();
+      expect(screen.getByText('Profile')).toBeTruthy();
+    });
+
+    it('renders dark mode toggle', () => {
+      const { container } = render(Header, defaultProps);
+      // DarkModeToggle should be present
+      expect(container.querySelector('button[aria-label]')).toBeTruthy();
+    });
+  });
+
+  describe('back button mode', () => {
+    it('shows back button when showBackButton is true', () => {
+      const { container } = render(Header, { ...defaultProps, showBackButton: true });
+      const backButton = container.querySelector('.header-back-button');
+      expect(backButton).toBeTruthy();
+    });
+
+    it('does not show back button by default', () => {
+      const { container } = render(Header, defaultProps);
+      const backButton = container.querySelector('.header-back-button');
+      expect(backButton).toBeFalsy();
+    });
+  });
+
+  describe('avatar buttons', () => {
+    it('renders mobile avatar button', () => {
+      const { container } = render(Header, defaultProps);
+      const mobileButton = container.querySelector('.avatar-button--mobile');
+      expect(mobileButton).toBeTruthy();
+    });
+
+    it('renders desktop avatar button', () => {
+      const { container } = render(Header, defaultProps);
+      const desktopButton = container.querySelector('.avatar-button--desktop');
+      expect(desktopButton).toBeTruthy();
+    });
+  });
+
+  describe('desktop dropdown', () => {
+    it('shows dropdown when desktop avatar is clicked', async () => {
+      const { container } = render(Header, defaultProps);
+      const desktopButton = container.querySelector('.avatar-button--desktop');
+
+      await fireEvent.click(desktopButton);
+
+      const dropdown = container.querySelector('.desktop-dropdown');
+      expect(dropdown).toBeTruthy();
+    });
+
+    it('displays user name and email in dropdown', async () => {
+      const { container } = render(Header, defaultProps);
+      const desktopButton = container.querySelector('.avatar-button--desktop');
+
+      await fireEvent.click(desktopButton);
+
+      expect(screen.getByText('Test Performer')).toBeTruthy();
+      expect(screen.getByText('test@example.com')).toBeTruthy();
+    });
+
+    it('displays dropdown links', async () => {
+      const { container } = render(Header, defaultProps);
+      const desktopButton = container.querySelector('.avatar-button--desktop');
+
+      await fireEvent.click(desktopButton);
+
+      expect(screen.getByText('Account Settings')).toBeTruthy();
+      expect(screen.getByText('Payment Settings')).toBeTruthy();
+    });
+
+    it('displays sign out button', async () => {
+      const { container } = render(Header, defaultProps);
+      const desktopButton = container.querySelector('.avatar-button--desktop');
+
+      await fireEvent.click(desktopButton);
+
+      expect(screen.getByText('Sign out')).toBeTruthy();
+    });
+
+    it('closes dropdown when backdrop is clicked', async () => {
+      const { container } = render(Header, defaultProps);
+      const desktopButton = container.querySelector('.avatar-button--desktop');
+
+      await fireEvent.click(desktopButton);
+
+      const backdrop = container.querySelector('.dropdown-backdrop');
+      await fireEvent.click(backdrop);
+
+      const dropdown = container.querySelector('.desktop-dropdown');
+      expect(dropdown).toBeFalsy();
+    });
+
+    it('calls signoutHandler when sign out is clicked', async () => {
+      const signoutHandler = vi.fn();
+      const { container } = render(Header, { ...defaultProps, signoutHandler });
+      const desktopButton = container.querySelector('.avatar-button--desktop');
+
+      await fireEvent.click(desktopButton);
+
+      const signOutButton = screen.getByText('Sign out');
+      await fireEvent.click(signOutButton);
+
+      expect(signoutHandler).toHaveBeenCalled();
+    });
+
+    it('toggles dropdown on repeated clicks', async () => {
+      const { container } = render(Header, defaultProps);
+      const desktopButton = container.querySelector('.avatar-button--desktop');
+
+      await fireEvent.click(desktopButton);
+      expect(container.querySelector('.desktop-dropdown')).toBeTruthy();
+
+      await fireEvent.click(desktopButton);
+      expect(container.querySelector('.desktop-dropdown')).toBeFalsy();
+    });
+  });
+
+  describe('mobile sheet', () => {
+    it('triggers mobile sheet state when mobile avatar is clicked', async () => {
+      const { container } = render(Header, defaultProps);
+      const mobileButton = container.querySelector('.avatar-button--mobile');
+
+      // Click should trigger the sheet opening (internal state)
+      await fireEvent.click(mobileButton);
+
+      // The mobile button should exist and be clickable
+      expect(mobileButton).toBeTruthy();
+    });
+  });
+
+  describe('navigation active state', () => {
+    it('marks current path as active', () => {
+      const { container } = render(Header, defaultProps);
+      const showsLink = container.querySelector('a[href="/shows"]');
+      expect(showsLink.classList.contains('active')).toBe(true);
+    });
+  });
+
+  describe('default values', () => {
+    it('shows "Performer" when name is empty', async () => {
+      const { container } = render(Header, { ...defaultProps, name: '' });
+      const desktopButton = container.querySelector('.avatar-button--desktop');
+
+      await fireEvent.click(desktopButton);
+
+      expect(screen.getByText('Performer')).toBeTruthy();
+    });
+  });
+});

package/dist/patterns/navigation/Header.stories.svelte

@@ -1,77 +1,77 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-    import Header from "./Header.svelte";
-
-  const { Story } = defineMeta({
-    title: "Components/Layout/Header",
-    component: Header,
-    argTypes: {
-      name: { control: "text" },
-      email: { control: "text" },
-      avatar: { control: "text" },
-      signoutHandler: { action: "signout" },
-    },
-  });
-
-  function handleSignout() {
-    alert("User signed out");
-  }
-
-</script>
-
-
-<Story
-  name="Default Header"
-  args={{
-    name: "John Performer",
-    email: "john@example.com",
-    avatar: "https://i.pravatar.cc/150?img=12",
-    signoutHandler: handleSignout
-  }}
-/>
-
-<Story name="With Long Name">
-  <Header
-    name="Alexander Christopher Wellington"
-    email="alexander.wellington@performersportal.com"
-    avatar="https://i.pravatar.cc/150?img=33"
-    signoutHandler={handleSignout}
-  />
-</Story>
-
-<Story name="With Short Name">
-  <Header
-    name="Jo"
-    email="jo@test.com"
-    avatar="https://i.pravatar.cc/150?img=5"
-    signoutHandler={handleSignout}
-  />
-</Story>
-
-<Story name="Female Performer">
-  <Header
-    name="Sarah Johnson"
-    email="sarah.johnson@comedy.com"
-    avatar="https://i.pravatar.cc/150?img=47"
-    signoutHandler={handleSignout}
-  />
-</Story>
-
-<Story name="Without Email">
-  <Header
-    name="Anonymous Performer"
-    email=""
-    avatar="https://i.pravatar.cc/150?img=68"
-    signoutHandler={handleSignout}
-  />
-</Story>
-
-<Story name="With Default Avatar">
-  <Header
-    name="Default User"
-    email="default@performers.com"
-    avatar=""
-    signoutHandler={handleSignout}
-  />
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+    import Header from "./Header.svelte";
+
+  const { Story } = defineMeta({
+    title: "Components/Layout/Header",
+    component: Header,
+    argTypes: {
+      name: { control: "text" },
+      email: { control: "text" },
+      avatar: { control: "text" },
+      signoutHandler: { action: "signout" },
+    },
+  });
+
+  function handleSignout() {
+    alert("User signed out");
+  }
+
+</script>
+
+
+<Story
+  name="Default Header"
+  args={{
+    name: "John Performer",
+    email: "john@example.com",
+    avatar: "https://i.pravatar.cc/150?img=12",
+    signoutHandler: handleSignout
+  }}
+/>
+
+<Story name="With Long Name">
+  <Header
+    name="Alexander Christopher Wellington"
+    email="alexander.wellington@performersportal.com"
+    avatar="https://i.pravatar.cc/150?img=33"
+    signoutHandler={handleSignout}
+  />
+</Story>
+
+<Story name="With Short Name">
+  <Header
+    name="Jo"
+    email="jo@test.com"
+    avatar="https://i.pravatar.cc/150?img=5"
+    signoutHandler={handleSignout}
+  />
+</Story>
+
+<Story name="Female Performer">
+  <Header
+    name="Sarah Johnson"
+    email="sarah.johnson@comedy.com"
+    avatar="https://i.pravatar.cc/150?img=47"
+    signoutHandler={handleSignout}
+  />
+</Story>
+
+<Story name="Without Email">
+  <Header
+    name="Anonymous Performer"
+    email=""
+    avatar="https://i.pravatar.cc/150?img=68"
+    signoutHandler={handleSignout}
+  />
+</Story>
+
+<Story name="With Default Avatar">
+  <Header
+    name="Default User"
+    email="default@performers.com"
+    avatar=""
+    signoutHandler={handleSignout}
+  />
+</Story>