@getmicdrop/svelte-components 5.5.4 → 5.6.0

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

@@ -56,69 +56,73 @@ describe('Header', () => {
     });
     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');
+            render(Header, { ...defaultProps, showBackButton: true });
+            const backButton = screen.getByText('Back');
             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();
+            render(Header, defaultProps);
+            const backButtons = screen.queryAllByText('Back');
+            expect(backButtons.length).toBe(0);
         });
     });
     describe('avatar buttons', () => {
         it('renders mobile avatar button', () => {
             const { container } = render(Header, defaultProps);
-            const mobileButton = container.querySelector('.avatar-button--mobile');
+            // The mobile button has "block md:hidden" class
+            const mobileButton = container.querySelector('button.block.md\\:hidden');
             expect(mobileButton).toBeTruthy();
         });
         it('renders desktop avatar button', () => {
             const { container } = render(Header, defaultProps);
-            const desktopButton = container.querySelector('.avatar-button--desktop');
+            // The desktop button has "hidden md:block" class
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
             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');
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
             await fireEvent.click(desktopButton);
-            const dropdown = container.querySelector('.desktop-dropdown');
+            // Look for the dropdown by its class - it's an absolute positioned div with specific classes
+            const dropdown = container.querySelector('div.absolute.top-\\[calc\\(100\\%\\+0\\.5rem\\)\\]');
             expect(dropdown).toBeTruthy();
         });
         it('displays user name and email in dropdown', async () => {
             const { container } = render(Header, defaultProps);
-            const desktopButton = container.querySelector('.avatar-button--desktop');
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
             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');
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
             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');
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
             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');
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
             await fireEvent.click(desktopButton);
-            const backdrop = container.querySelector('.dropdown-backdrop');
+            // The backdrop is the fixed inset-0 div with z-30
+            const backdrop = container.querySelector('div.fixed.inset-0.z-30');
             await fireEvent.click(backdrop);
-            const dropdown = container.querySelector('.desktop-dropdown');
+            const dropdown = container.querySelector('div.absolute.top-\\[calc\\(100\\%\\+0\\.5rem\\)\\]');
             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');
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
             await fireEvent.click(desktopButton);
             const signOutButton = screen.getByText('Sign out');
             await fireEvent.click(signOutButton);
@@ -126,34 +130,39 @@ describe('Header', () => {
         });
         it('toggles dropdown on repeated clicks', async () => {
             const { container } = render(Header, defaultProps);
-            const desktopButton = container.querySelector('.avatar-button--desktop');
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
             await fireEvent.click(desktopButton);
-            expect(container.querySelector('.desktop-dropdown')).toBeTruthy();
+            expect(container.querySelector('div.absolute.top-\\[calc\\(100\\%\\+0\\.5rem\\)\\]')).toBeTruthy();
             await fireEvent.click(desktopButton);
-            expect(container.querySelector('.desktop-dropdown')).toBeFalsy();
+            expect(container.querySelector('div.absolute.top-\\[calc\\(100\\%\\+0\\.5rem\\)\\]')).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);
+            const mobileButton = container.querySelector('button.block.md\\:hidden');
             // The mobile button should exist and be clickable
             expect(mobileButton).toBeTruthy();
+            // Click should trigger the sheet opening (internal state)
+            await fireEvent.click(mobileButton);
+            // The mobile sheet uses portal action to render to document.body,
+            // so we need to check in document.body instead of container
+            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-black\\/50');
+            expect(mobileSheet).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);
+            // The active link should have 'text-blue-700' class (or dark mode 'dark:text-blue-500')
+            expect(showsLink.classList.contains('text-blue-700')).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');
+            const desktopButton = container.querySelector('button.hidden.md\\:block');
             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>