@gsa-tts/graymatter-ui 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -56,15 +56,15 @@
     "vitest": "^3.0.7",
     "vite": "^6.3.5",
     "@gsa-tts/graymatter-eslint": "0.0.1",
-    "@gsa-tts/graymatter-typescript-config": "0.0.1",
-    "@gsa-tts/graymatter-vitest-config": "0.0.1"
+    "@gsa-tts/graymatter-vitest-config": "0.0.1",
+    "@gsa-tts/graymatter-typescript-config": "0.0.1"
   },
   "dependencies": {
     "@fontsource-variable/archivo": "^5.2.6",
     "@uswds/uswds": "3.12.0",
     "astro": "^5.11.0",
     "slugify": "^1.6.6",
-    "@gsa-tts/graymatter-style-tokens": "0.2.2"
+    "@gsa-tts/graymatter-style-tokens": "0.2.3"
   },
   "scripts": {
     "build": "gulp update && vite build",

package/src/components/DesktopSideNav.svelte

@@ -18,16 +18,34 @@
   import ConsoleIcon from './icons/ConsoleIcon.svelte';
   import ApiIcon from './icons/ApiIcon.svelte';
   import MenuIcon from './icons/MenuIcon.svelte';
+  import ProfileMenu from './ProfileMenu.svelte';
   import { getAppUrls } from '../utils/getAppUrls';
+  import HelpIcon from './icons/HelpIcon.svelte';
   const urls = getAppUrls();
-  
-  const { ssrSelectedItem = undefined, onNavToggle = undefined, onNavItemClick = undefined, onProfileClick = undefined, children, apiUrl, chatUrl, consoleUrl, discoverUrl } = $props();
+
+  const {
+    ssrSelectedItem = undefined,
+    onNavToggle = undefined,
+    onNavItemClick = undefined,
+    children,
+    showAppIcons = true,
+    profileMenuData,
+    apiUrl,
+    chatUrl,
+    consoleUrl,
+    discoverUrl
+  } = $props();
 
   let hydrated = false;
   let navContainer: HTMLDivElement;
   let hoveredItem = $state<string | null>(null);
   let menuButtonHovered = $state(false);
   let canHover = $state(false);
+  let helpIconHovered = $state(false);
+  let discoverNavRef = $state<HTMLAnchorElement | null>(null);
+  let chatNavRef = $state<HTMLAnchorElement | null>(null);
+  let consoleNavRef = $state<HTMLAnchorElement | null>(null);
+  let apiNavRef = $state<HTMLAnchorElement | null>(null);
 
   function ssrOrHydrated<T>(hydratedValue: T, ssrValue: T): T {
     return hydrated ? hydratedValue : ssrValue;
@@ -94,8 +112,22 @@
       
       window.addEventListener('layoutTransition', handleLayoutTransition);
       
+      // Add Escape key handler for nav collapse, but ignore if focus is in profile context menu
+      const handleEscape = (e: KeyboardEvent) => {
+        const active = document.activeElement;
+        if (
+          e.key === 'Escape' &&
+          $isExpanded &&
+          !(active && active.closest('.profile-context-menu'))
+        ) {
+          navigationStore.setExpanded(false);
+        }
+      };
+      window.addEventListener('keydown', handleEscape);
+      
       return () => {
         window.removeEventListener('layoutTransition', handleLayoutTransition);
+        window.removeEventListener('keydown', handleEscape);
       };
     }
   });
@@ -171,6 +203,27 @@
       handleNavItemClick(item);
     }
   }
+
+  function handleNavKeyDown(event: KeyboardEvent, index: number) {
+    const navRefs = [discoverNavRef, chatNavRef, consoleNavRef, apiNavRef];
+    const navCount = navRefs.length;
+    if (!navCount) return;
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      const next = (index + 1) % navCount;
+      navRefs[next]?.focus();
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      const prev = (index - 1 + navCount) % navCount;
+      navRefs[prev]?.focus();
+    } else if (event.key === 'Home') {
+      event.preventDefault();
+      navRefs[0]?.focus();
+    } else if (event.key === 'End') {
+      event.preventDefault();
+      navRefs[navCount - 1]?.focus();
+    }
+  }
 </script>
 
 <div
@@ -194,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()}
@@ -206,6 +259,7 @@
         </button>
       </div>
 
+      {#if showAppIcons}
       <div class="nav-items" part="nav-items">
         <a
           href={discoverUrl || urls.discover}
@@ -213,11 +267,12 @@
           class:selected={isNavSelected('discover')}
           class:hovered={isNavHovered('discover')}
           onclick={() => handleNavItemClick('discover')}
-          onkeydown={e => handleKeyDown(e, 'discover')}
+          onkeydown={e => { handleKeyDown(e, 'discover'); handleNavKeyDown(e, 0); }}
           onmouseenter={() => (hoveredItem = 'discover')}
           onmouseleave={() => (hoveredItem = null)}
           aria-current={isNavSelected('discover') ? 'page' : undefined}
           part="discover-item"
+          bind:this={discoverNavRef}
         >
           <div class="icon-container">
             <div class="icon-wrapper">
@@ -232,11 +287,12 @@
           class:selected={isNavSelected('chat')}
           class:hovered={isNavHovered('chat')}
           onclick={() => handleNavItemClick('chat')}
-          onkeydown={e => handleKeyDown(e, 'chat')}
+          onkeydown={e => { handleKeyDown(e, 'chat'); handleNavKeyDown(e, 1); }}
           onmouseenter={() => (hoveredItem = 'chat')}
           onmouseleave={() => (hoveredItem = null)}
           aria-current={isNavSelected('chat') ? 'page' : undefined}
           part="chat-item"
+          bind:this={chatNavRef}
         >
           <div class="icon-container">
             <div class="icon-wrapper">
@@ -252,11 +308,12 @@
           class:selected={isNavSelected('console')}
           class:hovered={isNavHovered('console')}
           onclick={() => handleNavItemClick('console')}
-          onkeydown={e => handleKeyDown(e, 'console')}
+          onkeydown={e => { handleKeyDown(e, 'console'); handleNavKeyDown(e, 2); }}
           onmouseenter={() => (hoveredItem = 'console')}
           onmouseleave={() => (hoveredItem = null)}
           aria-current={isNavSelected('console') ? 'page' : undefined}
           part="console-item"
+          bind:this={consoleNavRef}
         >
           <div class="icon-container">
             <div class="icon-wrapper">
@@ -272,11 +329,12 @@
           class:selected={isNavSelected('api')}
           class:hovered={isNavHovered('api')}
           onclick={() => handleNavItemClick('api')}
-          onkeydown={e => handleKeyDown(e, 'api')}
+          onkeydown={e => { handleKeyDown(e, 'api'); handleNavKeyDown(e, 3); }}
           onmouseenter={() => (hoveredItem = 'api')}
           onmouseleave={() => (hoveredItem = null)}
           aria-current={isNavSelected('api') ? 'page' : undefined}
           part="api-item"
+          bind:this={apiNavRef}
         >
           <div class="icon-container">
             <div class="icon-wrapper">
@@ -286,27 +344,37 @@
           <span class="nav-text">API</span>
         </a>
       </div>
+      {/if}
     </div>
 
+    {#if profileMenuData}
     <div class="nav-footer" part="nav-footer">
-      <button
-        class="user-profile-button"
-        tabindex="0"
-        onclick={() => onProfileClick?.()}
-        onkeydown={e => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            onProfileClick?.();
-          }
-        }}
-      >
-        <div class="user-profile-container">
-          <div class="user-profile-icon" part="user-profile-icon">
-            <span class="user-initials">ZW</span>
+      <div class="nav-footer-icon-container">
+        <button
+          type="button"
+          class="nav-footer-icon-inner"
+          tabindex="0"
+          aria-label="Help"
+          onmouseenter={() => (helpIconHovered = true)}
+          onmouseleave={() => (helpIconHovered = false)}
+          onfocus={() => (helpIconHovered = true)}
+          onblur={() => (helpIconHovered = false)}
+        >
+          <div class="nav-footer-icon-svg-wrapper">
+            <HelpIcon isHovered={helpIconHovered} />
           </div>
-        </div>
-      </button>
+        </button>
+      </div>
+      <div class="nav-footer-profile-container">
+
+      <ProfileMenu
+        userMeta={profileMenuData?.userMeta}
+        menuItems={profileMenuData?.menuItems}
+        ariaLabel="Open profile menu"
+      />
+      </div>
     </div>
+    {/if}
   </div>
 
   <div class="expanded-content drawer-anim" class:open={sideNavExpanded()} part="expanded-content">
@@ -344,13 +412,6 @@
     height: var(--ai-size-72);
   }
 
-  .user-profile-container,
-  .user-profile-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   .menu-button {
     display: flex;
     align-items: center;
@@ -368,18 +429,6 @@
     opacity: 0.5;
     background-color: transparent;
   }
-
-  .user-profile-icon {
-    border-radius: var(--ai-size-6);
-    background: var(--ai-color-steel-700);
-  }
-
-  .user-initials {
-    color: var(--ai-color-white);
-    text-align: center;
-    font-weight: 400;
-    line-height: 1.3;
-  }
   
   .side-nav-container {
     display: flex;
@@ -452,36 +501,6 @@
     margin-top: auto;
   }
 
-  .user-profile-button {
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .user-profile-button:focus {
-    outline: var(--ai-size-2) solid var(--ai-color-blue-600);
-    outline-offset: var(--ai-size-2);
-    border-radius: var(--ai-size-4);
-  }
-
-  .user-profile-container {
-    width: var(--ai-size-40);
-    height: var(--ai-size-40);
-    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;
-  }
 
   .menu-section {
     display: flex;
@@ -522,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);
@@ -632,4 +657,57 @@
     color: var(--ai-color-neutral-700);
   }
 
+  .nav-footer-icon-container {
+    display: flex;
+    padding: 0 var(--ai-size-4);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--ai-size-4);
+    align-self: stretch;
+  }
+
+  .nav-footer-profile-container {
+    display: flex;
+    padding: var(--ai-size-8) var(--ai-size-4);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--ai-size-4);
+    align-self: stretch;
+  }
+  .nav-footer-icon-inner {
+    display: flex;
+    width: var(--ai-size-40);
+    height: var(--ai-size-40);
+    padding: var(--ai-size-8);
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--ai-size-4);
+    background: none;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s ease, border-radius 0.3s ease;
+  }
+  .nav-footer-icon-inner:hover,
+  .nav-footer-icon-inner:focus {
+    background-color: var(--ai-color-steel-300);
+    border-radius: var(--ai-size-4);
+  }
+  .nav-footer-icon-inner:focus {
+    outline: none;
+  }
+  .nav-footer-icon-inner:focus-visible {
+    outline: var(--ai-size-2) solid var(--ai-color-blue-600);
+    outline-offset: var(--ai-size-2);
+    border-radius: var(--ai-size-4);
+  }
+  .nav-footer-icon-svg-wrapper {
+    width: var(--ai-size-24);
+    height: var(--ai-size-24);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 </style>

package/src/components/DesktopSideNav.webcomponent.svelte

@@ -10,7 +10,8 @@
     ssrSelectedItem,
     onNavToggle,
     onNavItemClick,
-    onProfileClick,
+    showAppIcons = true, 
+    profileMenuData,
     apiUrl,
     chatUrl,
     consoleUrl,
@@ -22,7 +23,8 @@
   {ssrSelectedItem}
   {onNavToggle}
   {onNavItemClick}
-  {onProfileClick}
+  {showAppIcons}
+  {profileMenuData}
   {apiUrl}
   {chatUrl}
   {consoleUrl}

package/src/components/MobileBottomNav.svelte

@@ -8,8 +8,9 @@
   import { getAppUrls } from '../utils/getAppUrls';
   import slugify from "slugify";
 
-  let {onNavItemClick, apiUrl, chatUrl, consoleUrl, discoverUrl}: {
+  let {onNavItemClick, showAppIcons = true, apiUrl, chatUrl, consoleUrl, discoverUrl}: {
     onNavItemClick?: (data: { item: NavigationItem; expanded: boolean }) => void,
+    showAppIcons: boolean,
     apiUrl?: string,
     chatUrl?: string,
     consoleUrl?: string,
@@ -85,6 +86,7 @@
   }
 </script>
 
+{#if showAppIcons}
 <nav class="mobile-bottom-nav" part="mobile-bottom-nav">
   {#each navItems as navItem}
     <a
@@ -103,6 +105,7 @@
     </a>
   {/each}
 </nav>
+{/if}
 
 <style>
   .nav-item {

package/src/components/MobileBottomNav.webcomponent.svelte

@@ -6,11 +6,12 @@
   import MobileBottomNav from './MobileBottomNav.svelte';
 
   // Props for the web component
-  let { onNavItemClick, apiUrl, chatUrl, consoleUrl, discoverUrl } = $props();
+  let { onNavItemClick, showAppIcons = true, apiUrl, chatUrl, consoleUrl, discoverUrl } = $props();
 </script>
 
 <MobileBottomNav
   {onNavItemClick}
+  {showAppIcons}
   {apiUrl}
   {chatUrl}
   {consoleUrl}

package/src/components/MobileSideMenu.svelte

@@ -6,6 +6,8 @@
 
   let sideMenuElement: HTMLDivElement;
   let pendingMobileHash: string | null = null;
+  
+  let { logoLinkUrl, logoLinkLabel } = $props();
 
   function handleMobileAnchorNavigate(event: Event) {
     const customEvent = event as CustomEvent;
@@ -90,7 +92,12 @@
     window.addEventListener('layoutTransition', handleLayoutTransition);
 
     const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && $isExpanded) {
+      const active = document.activeElement;
+      if (
+        e.key === 'Escape' &&
+        $isExpanded &&
+        !(active && active.closest('.profile-context-menu'))
+      ) {
         closeMobileMenu();
       }
     };
@@ -117,8 +124,8 @@
     tabindex="0"
     aria-label="Close navigation menu (Escape key supported)"
     part="mobile-overlay"
-    on:click={closeMobileMenu}
-    on:keydown={(e) => {
+    onclick={closeMobileMenu}
+    onkeydown={(e) => {
       if (e.key === 'Enter' || e.key === ' ') closeMobileMenu();
     }}
   ></div>
@@ -128,9 +135,15 @@
 <div class="mobile-side-menu" class:open={$isExpanded} bind:this={sideMenuElement} part="mobile-side-menu">
   <div class="menu-header" part="menu-header">
     <div class="logo-container" part="logo-container">
-      <Logo width={75} height={22} />
+      {#if logoLinkUrl}
+        <a href={logoLinkUrl} part="logo-link" class="logo-link" aria-label={logoLinkLabel}>
+          <Logo width={75} height={22}/>
+        </a>
+      {:else}
+        <Logo width={75} height={22}/>
+      {/if}
     </div>
-    <button class="close-button" on:click={closeMobileMenu} aria-label="Close navigation menu" part="close-button">
+    <button class="close-button" onclick={closeMobileMenu} aria-label="Close navigation menu" part="close-button">
       <CloseIcon />
     </button>
   </div>
@@ -192,6 +205,10 @@
   .mobile-side-menu .logo-container {
     display: flex;
   }
+  
+  .logo-link {
+    display: flex;
+  }
 
   .close-button {
     display: flex;

package/src/components/MobileSideMenu.webcomponent.svelte

@@ -4,8 +4,10 @@
 
 <script lang="ts">
   import MobileSideMenu from './MobileSideMenu.svelte';
+  
+  let { logoLinkUrl, logoLinkLabel } = $props();
 </script>
 
-<MobileSideMenu>
+<MobileSideMenu {logoLinkUrl} {logoLinkLabel}>
   <slot />
 </MobileSideMenu>

package/src/components/MobileTopNav.svelte

@@ -8,7 +8,9 @@
   import MenuIcon from './icons/MenuIcon.svelte';
   import { onMount } from 'svelte';
 
-  export let onProfileClick: (() => void) | undefined = undefined;
+  let { profileMenuData } = $props();
+
+  import ProfileMenu from './ProfileMenu.svelte';
 
   onMount(() => {
     // Listen for section visibility changes to update header
@@ -66,9 +68,6 @@
     navigationStore.toggleExpanded();
   }
 
-  function handleProfileClick() {
-    onProfileClick?.();
-  }
 </script>
 
 <nav class="mobile-top-nav" part="mobile-top-nav">
@@ -76,7 +75,7 @@
     class="menu-button"
     class:disabled={$isMenuButtonDisabled}
     disabled={$isMenuButtonDisabled}
-    on:click={toggleMobileNav}
+    onclick={toggleMobileNav}
     aria-label="Open navigation menu"
     part="menu-button"
   >
@@ -88,30 +87,19 @@
     <span class="brand-text">{$selectedSubNavItemTitle || ''}</span>
   </div>
 
-  <button
-    class="profile-button"
-    on:click={handleProfileClick}
-    aria-label="Open profile menu"
-    part="profile-button"
-  >
-    <div class="user-profile-container">
-      <div class="user-profile-icon" part="user-profile-icon">
-        <span class="user-initials">ZW</span>
-      </div>
-    </div>
-  </button>
+  {#if profileMenuData}
+  <ProfileMenu
+    userMeta={profileMenuData?.userMeta}
+    menuItems={profileMenuData?.menuItems}
+    ariaLabel="Open profile menu"
+    menuAlign="mobile"
+  />
+  {/if}
 </nav>
 
 <style>
-  .user-profile-container,
-  .user-profile-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 
-  .menu-button,
-  .profile-button {
+  .menu-button {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -129,18 +117,6 @@
     background-color: transparent;
   }
 
-  .user-profile-icon {
-    border-radius: var(--ai-size-6);
-    background: var(--ai-color-steel-700);
-  }
-
-  .user-initials {
-    color: var(--ai-color-white);
-    text-align: center;
-    font-weight: 400;
-    line-height: 1.3;
-  }
-
   .mobile-top-nav .menu-button {
     width: var(--ai-size-40);
     height: var(--ai-size-40);
@@ -173,42 +149,6 @@
     font-weight: 600;
     line-height: 1;
   }
-
-  .profile-button {
-    width: var(--ai-size-40);
-    height: var(--ai-size-40);
-  }
-
-  .profile-button:hover {
-    background-color: var(--ai-color-neutral-100);
-  }
-  
-  .mobile-top-nav .user-profile-icon {
-    width: var(--ai-size-32);
-    height: var(--ai-size-32);
-    border-radius: 0.3125rem;
-  }
-
-  .mobile-top-nav .user-initials {
-    font-size: var(--ai-size-14);
-    line-height: 1;
-  }
-
-  .user-profile-container {
-    width: var(--ai-size-40);
-    height: var(--ai-size-40);
-    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;
-  }
- 
   .menu-button {
     display: flex;
     padding: var(--ai-size-4);

package/src/components/MobileTopNav.webcomponent.svelte

@@ -6,9 +6,9 @@
   import MobileTopNav from './MobileTopNav.svelte';
 
   // Props for the web component
-  let { onMenuToggle } = $props();
+  let { profileMenuData } = $props();
 </script>
 
 <MobileTopNav
-  {onMenuToggle}
+  {profileMenuData}
 />