feat(#2177): add click event for app header toggle menu

GovAlta · Oct 23, 2024 · 86d7512 · 86d7512
1 parent 716d000
commit 86d7512
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 13 deletions.
diff --git a/libs/react-components/src/lib/app-header/app-header.spec.tsx b/libs/react-components/src/lib/app-header/app-header.spec.tsx
@@ -10,4 +10,15 @@ describe("GoAAppHeader", () => {
     const header = baseElement.querySelector("goa-app-header");
     expect(header).toBeTruthy();
   });
+  it("should dispatch onMobileMenuClick if provided", () => {
+    const onMobileMenuClick = vi.fn();
+    const { baseElement } = render(
+      <GoAAppHeader heading="Test heading" url="test" onMenuClick={onMobileMenuClick} />
+    );
+
+    const header = baseElement.querySelector("goa-app-header");
+    expect(header).toBeTruthy();
+    header?.dispatchEvent(new Event("_menuClick"));
+    expect(onMobileMenuClick).toHaveBeenCalled();
+  })
 });
diff --git a/libs/react-components/src/lib/app-header/app-header.tsx b/libs/react-components/src/lib/app-header/app-header.tsx
@@ -1,8 +1,12 @@
+import { useEffect, useRef } from "react";
+
 interface WCProps {
   heading?: string;
   url?: string;
   maxcontentwidth?: string;
   fullmenubreakpoint?: number;
+  hasmenuclickhandler?: boolean;
+  ref: React.RefObject<HTMLElement>;
   testid?: string;
 }
 
@@ -21,6 +25,7 @@ export interface GoAAppHeaderProps {
   maxContentWidth?: string;
   fullMenuBreakpoint?: number;
   children?: React.ReactNode;
+  onMenuClick?: () => void;
   testId?: string;
 }
 
@@ -31,14 +36,36 @@ export function GoAAppHeader({
   fullMenuBreakpoint,
   testId,
   children,
+  onMenuClick,
 }: GoAAppHeaderProps): JSX.Element {
+  const el = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    if (!onMenuClick) {
+      return;
+    }
+    const current = el.current;
+    const listener = () => {
+      onMenuClick();
+    }
+    current.addEventListener("_menuClick", listener);
+    return () => {
+      current.removeEventListener("_menuClick", listener);
+    }
+  }, [el, onMenuClick]);
+
   return (
     <goa-app-header
+      ref={el}
       heading={heading}
       url={url}
       fullmenubreakpoint={fullMenuBreakpoint}
       maxcontentwidth={maxContentWidth}
       testid={testId}
+      hasmenuclickhandler={!!onMenuClick}
     >
       {children}
     </goa-app-header>

diff --git a/libs/react-components/src/lib/side-menu-group/side-menu-group.spec.tsx b/libs/react-components/src/lib/side-menu-group/side-menu-group.spec.tsx
@@ -10,4 +10,12 @@ describe("SideMenuGroup", () => {
     expect(el?.getAttribute("heading")).toBe("some header");
     expect(el?.getAttribute("testid")).toBe("foo");
   });
+  it("should render icon if provided", () => {
+    const { baseElement } = render(
+      <SideMenuGroup heading={"Some header"} testId={"foo"} icon={"accessibility"} />,
+    );
+
+    const el = baseElement.querySelector("goa-side-menu-group");
+    expect(el?.getAttribute("icon")).toBe("accessibility");
+  })
 });
diff --git a/libs/react-components/src/lib/three-column-layout/three-column-layout.spec.tsx b/libs/react-components/src/lib/three-column-layout/three-column-layout.spec.tsx
@@ -39,7 +39,7 @@ describe("ThreeColumnLayout", () => {
     expect(baseElement.innerHTML).toContain(
       "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
     );
-    expect(baseElement.innerHTML).toContain("<goa-app-header>");
+    expect(baseElement.querySelector("goa-app-header")).toBeTruthy();
     expect(baseElement.innerHTML).toContain("<goa-app-footer>");
     expect(baseElement.querySelectorAll("[slot=nav] a").length).toEqual(5);
 

diff --git a/libs/react-components/src/lib/two-column-layout/two-column-layout.spec.tsx b/libs/react-components/src/lib/two-column-layout/two-column-layout.spec.tsx
@@ -34,7 +34,7 @@ describe("TwoColumnLayout", () => {
     expect(baseElement.innerHTML).toContain(
       "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
     );
-    expect(baseElement.innerHTML).toContain("<goa-app-header>");
+    expect(baseElement.querySelector("goa-app-header")).toBeTruthy();
     expect(baseElement.innerHTML).toContain("<goa-app-footer>");
     expect(baseElement.querySelectorAll("[slot=nav] a").length).toEqual(5);
   });

diff --git a/libs/web-components/src/components/app-header/AppHeader.svelte b/libs/web-components/src/components/app-header/AppHeader.svelte
@@ -5,7 +5,7 @@
 <script lang="ts">
   import { onDestroy, onMount, tick } from "svelte";
   import { MOBILE_BP, TABLET_BP } from "../../common/breakpoints";
-  import { getSlottedChildren, styles } from "../../common/utils";
+  import { getSlottedChildren, styles, toBoolean } from "../../common/utils";
   import { isUrlMatch, getMatchedLink } from "../../common/urls";
   import { AppHeaderMenuProps } from "../app-header-menu/AppHeaderMenu.svelte";
 
@@ -15,6 +15,7 @@
   export let testid: string = "";
   export let maxcontentwidth = "";
   export let fullmenubreakpoint: number = TABLET_BP; // minimum window width to show all menu links
+  export let hasmenuclickhandler: string = "false"; // If this is yes, we will not expand menu when clicking a toggle button
 
   // Private
 
@@ -31,6 +32,7 @@
 
   let _appHeaderLinks: Element[] = [];
   let _appHeaderMenuItems: AppHeaderMenuProps[] = [];
+  let _menuButton: HTMLButtonElement;
 
   // Reactive
 
@@ -41,6 +43,7 @@
     _showToggleMenu = _desktop ? false : ((await hasChildren()) as boolean);
     onShowToggleMenuChange();
   })();
+  $: _hasMenuClickHandler = toBoolean(hasmenuclickhandler);
 
   // Hooks
 
@@ -58,6 +61,11 @@
   const toggleMenu = () => (_showMenu = !_showMenu);
   const hideMenu = () => (_showMenu = false);
 
+  const dispatchMenuClick = () => {
+    if (_hasMenuClickHandler) {
+      _menuButton.dispatchEvent(new CustomEvent("_menuClick", { composed: true, bubbles: true }));
+    }
+  }
   function getChildren() {
     if (!_slotParentEl) return;
 
@@ -202,9 +210,11 @@
     <!-- Menu button for mobile -->
     {#if _showToggleMenu && _mobile}
       <div class="menu-toggle-area">
-        <button on:click={toggleMenu} data-testid="menu-toggle">
+        <button on:click={_hasMenuClickHandler ? dispatchMenuClick : toggleMenu} data-testid="menu-toggle" bind:this={_menuButton}>
           Menu
-          <goa-icon type={_showMenu ? "chevron-up" : "chevron-down"} mt="1" />
+          {#if !_hasMenuClickHandler}
+            <goa-icon type={_showMenu ? "chevron-up" : "chevron-down"} mt="1" />
+          {/if}
         </button>
       </div>
     {/if}
@@ -229,9 +239,11 @@
           style={styles("height: 100%")}
           class="menu-toggle-area"
         >
-          <button on:click={toggleMenu} data-testid="menu-toggle">
+          <button on:click={_hasMenuClickHandler ? dispatchMenuClick : toggleMenu} data-testid="menu-toggle" bind:this={_menuButton}>
             Menu
-            <goa-icon type={_showMenu ? "chevron-up" : "chevron-down"} mt="1" />
+            {#if !_hasMenuClickHandler}
+             <goa-icon type={_showMenu ? "chevron-up" : "chevron-down"} mt="1" />
+            {/if}
           </button>
         </div>
 
@@ -255,7 +267,7 @@
     {/if}
 
     <!-- Mobile and desktop slot content -->
-    {#if (_showMenu && _mobile) || _desktop}
+    {#if (_showMenu && _mobile && !_hasMenuClickHandler) || _desktop}
       <div bind:this={_slotParentEl} data-testid="slot" class="content-area">
         <slot />
       </div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
   },
   "private": true,
   "devDependencies": {
-    "@abgov/design-tokens": "^1.4.0",
+    "@abgov/design-tokens": "^1.4.1",
     "@abgov/nx-release": "8.0.0",
     "@angular-devkit/build-angular": "18.2.8",
     "@angular-devkit/core": "18.1.4",