@gsa-tts/graymatter-ui 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/components/DesktopSideNav.svelte

@@ -247,7 +247,7 @@
           aria-label={sideNavExpanded() ? 'Close navigation menu' : 'Open navigation menu'}
           aria-expanded={sideNavExpanded() ? 'true' : 'false'}
         >
-          <div class="icon-container">
+          <div class="icon-container" part="icon-container">
             <div class="icon-wrapper">
               <MenuIcon
                 isHovered={menuBtnHovered()}
@@ -541,6 +541,12 @@
     border-radius: var(--ai-size-4);
   }
 
+  /* Hide focus outline on click */
+  .menu-button:focus:not(:focus-visible) .icon-container,
+  .nav-item:focus:not(:focus-visible) .icon-container {
+    outline: none;
+  }
+
   .nav-items {
     display: flex;
     width: var(--ai-size-72);

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,14 +109,16 @@
         <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"
         >
+          {#if item.icon}
           <span class="icon">
             <img src={item.icon} alt="" aria-hidden="true" width="20" height="20" />
           </span>
+          {/if}
           <div class="menu-text">{item.label}</div>
         </button>
       {/each}
@@ -122,15 +142,24 @@
   }
 
   .user-profile-icon {
-    border-radius: var(--ai-size-4);
     background: var(--ai-color-blue-800);
+    border-radius: var(--ai-size-4);
+    box-sizing: border-box;
+    height: var(--ai-size-40);
+    padding: var(--ai-size-4);
+    white-space: nowrap;
+    width: var(--ai-size-40);
   }
 
   .user-initials {
     color: var(--ai-color-white);
-    text-align: center;
+    font-size: var(--ai-size-16);
+    font-style: normal;
     font-weight: 400;
-    line-height: 1.3;
+    line-height: 1;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
   }
 
   .user-profile-button {
@@ -150,7 +179,7 @@
   }
 
   .user-profile-button:focus:not(:focus-visible) {
-  outline: none;
+    outline: none;
   }
 
   .user-profile-container {
@@ -159,14 +188,6 @@
     aspect-ratio: 1/1;
   }
 
-  .user-profile-icon {
-    padding: 0.5556rem 0.4931rem 0.5694rem 0.3819rem;
-  }
-
-  .user-initials {
-    font-size: var(--ai-size-16);
-    font-style: normal;
-  }
   .profile-context-menu {
     display: flex;
     width: 13.75rem;
@@ -238,4 +259,4 @@
     font-weight: 400;
     line-height: 130%;
   }
-</style> 
+</style> 

package/src/constants/common.ts

@@ -1,2 +1,2 @@
-export const siteName = 'USAI.GOV';
+export const siteName = 'USAi.gov';
 export const salesEmail = 'partnerships@usai.gov';

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';