@gsa-tts/graymatter-ui 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -56,8 +56,8 @@
     "vitest": "^3.0.7",
     "vite": "^6.3.5",
     "@gsa-tts/graymatter-eslint": "0.0.1",
-    "@gsa-tts/graymatter-vitest-config": "0.0.1",
-    "@gsa-tts/graymatter-typescript-config": "0.0.1"
+    "@gsa-tts/graymatter-typescript-config": "0.0.1",
+    "@gsa-tts/graymatter-vitest-config": "0.0.1"
   },
   "dependencies": {
     "@fontsource-variable/archivo": "^5.2.6",

package/src/components/DesktopSideNav.svelte

@@ -274,7 +274,7 @@
           part="discover-item"
           bind:this={discoverNavRef}
         >
-          <div class="icon-container">
+          <div class="icon-container" part="discover-icon-container">
             <div class="icon-wrapper">
               <DiscoverIcon isSelected={isNavSelected('discover')} />
             </div>
@@ -294,7 +294,7 @@
           part="chat-item"
           bind:this={chatNavRef}
         >
-          <div class="icon-container">
+          <div class="icon-container" part="chat-icon-container">
             <div class="icon-wrapper">
               <ChatIcon isSelected={isNavSelected('chat') as boolean} />
             </div>
@@ -315,7 +315,7 @@
           part="console-item"
           bind:this={consoleNavRef}
         >
-          <div class="icon-container">
+          <div class="icon-container" part="console-icon-container">
             <div class="icon-wrapper">
               <ConsoleIcon isSelected={isNavSelected('console') as boolean} />
             </div>
@@ -336,7 +336,7 @@
           part="api-item"
           bind:this={apiNavRef}
         >
-          <div class="icon-container">
+          <div class="icon-container" part="api-icon-container">
             <div class="icon-wrapper">
               <ApiIcon isSelected={isNavSelected('api')} />
             </div>

package/src/components/MobileBottomNav.svelte

@@ -91,7 +91,7 @@
   {#each navItems as navItem}
     <a
       href={navItem.href}
-      class="nav-item"
+      class={`nav-item ${slugify(navItem.id)}-item`}
       class:active={$selectedItem === navItem.id}
       onclick={() => handleNavItemClick(navItem.id)}
       part={`${slugify(navItem.id)}-item`}

package/src/components/ProfileMenu.svelte

@@ -2,9 +2,9 @@
   import { onMount } from 'svelte';
   /**
    * Array of menu items to render in the profile menu.
-   * Each item: { label: string, icon: string, onClick: () => void }
+   * Each item: { label: string, icon: string, onClick: string | (() => void) }
    */
-  export let menuItems: Array<{ label: string; icon: string; onClick: () => void }> = [];
+  export let menuItems: Array<{ label: string; icon: string; onClick: string | (() => void) }> = [];
   export let userMeta: { initials: string};
   export let ariaLabel: string = 'Open profile menu';
   export let menuAlign: 'desktop' | 'mobile' = 'desktop';
@@ -14,6 +14,24 @@
   function toggleMenu() { menuOpen = !menuOpen; }
   function closeMenu() { menuOpen = false; }
 
+  // Execute the onClick function - handles both string and function types
+  function executeOnClick(onClick: string | (() => void)) {
+    try {
+      if (typeof onClick === 'string') {
+        // Handle string-based function (for Astro apps)
+        const onClickFunction = new Function('return ' + onClick)();
+        onClickFunction();
+      } else if (typeof onClick === 'function') {
+        // Handle actual function (for Svelte apps)
+        onClick();
+      } else {
+        console.error('Invalid onClick type:', typeof onClick);
+      }
+    } catch (error) {
+      console.error('Error executing onClick function:', error);
+    }
+  }
+
   // Optional: close menu on outside click
   function handleBlur(event: FocusEvent) {
     const related = event.relatedTarget as HTMLElement | null;
@@ -91,7 +109,7 @@
         <button
           type="button"
           class="menu-item"
-          on:click={() => { item.onClick(); closeMenu(); }}
+          on:click={() => { executeOnClick(item.onClick); closeMenu(); }}
           bind:this={btns[idx]}
           on:keydown={(e) => handleMenuKeydown(e, idx)}
           role="menuitem"

package/src/layouts/GlobalAppLayout.astro

@@ -18,12 +18,11 @@ const {
   profileMenuData = undefined,
   logoLinkUrl,
   logoLinkLabel,
+  title: pageTitle,
 } = Astro.props;
-
-const title = getPageTitle(Astro);
 ---
 
-<BaseLayout title={title} gtmID={gtmID}>
+<BaseLayout title={pageTitle} gtmID={gtmID}>
   <div class="app">
     <!-- Desktop Navigation -->
     <div class="layout-container">

package/src/utils/index.ts

@@ -1 +1 @@
-export * from './getAppUrls';
+export * from './getAppUrls.js';