@gsa-tts/graymatter-ui 0.4.9 → 0.4.11

package/package.json

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

package/src/components/DesktopSideNav.svelte

@@ -38,6 +38,7 @@
   } = $props();
 
   const helpUrl = supplementalMenuData?.help?.url?.trim();
+  const isHelpSelected = $derived(() => get(selectedSubNavItemId) === 'help');
 
   let hydrated = false;
   let navContainer: HTMLDivElement;
@@ -169,9 +170,40 @@
         );
       };
 
+      // Detect help page and set selection state
+      const checkHelpPage = () => {
+        // Skip check for hash links - they stay on the same page
+        if (!helpUrl || helpUrl === '#' || helpUrl.startsWith('#')) {
+          return;
+        }
+
+        const location = (
+          globalThis as { location?: { pathname?: string; origin?: string } }
+        ).location;
+        if (location?.origin && location?.pathname) {
+          const helpPath = getPathname(helpUrl, location.origin);
+          if (helpPath && location.pathname === helpPath) {
+            selectedSubNavItemId.set('help');
+          } else if (
+            get(selectedSubNavItemId) === 'help' &&
+            helpPath &&
+            location.pathname !== helpPath
+          ) {
+            // Clear help selection if we navigated away from help page
+            selectedSubNavItemId.set(null);
+          }
+        }
+      };
+
+      checkHelpPage();
+
+      // Also listen for popstate events (back/forward navigation)
+      window.addEventListener('popstate', checkHelpPage);
+
       return () => {
         window.removeEventListener('layoutTransition', handleLayoutTransition);
         window.removeEventListener('keydown', handleEscape);
+        window.removeEventListener('popstate', checkHelpPage);
         if (eventListenerCleanup) {
           eventListenerCleanup();
         }
@@ -179,6 +211,25 @@
     }
   });
 
+  function getPathname(url: string, baseOrigin: string) {
+    try {
+      return new URL(url, baseOrigin).pathname;
+    } catch {
+      return null;
+    }
+  }
+
+  function handleHelpClick(event: MouseEvent) {
+    selectedSubNavItemId.set('help');
+
+    // If it's a hash link, prevent default to maintain state on same page
+    if (helpUrl === '#' || helpUrl?.startsWith('#')) {
+      event.preventDefault();
+      // State is already set above, so it will persist
+      return;
+    }
+  }
+
   function toggleNav() {
     if ($isMenuButtonDisabled) return;
     navigationStore.toggleExpanded();
@@ -437,14 +488,19 @@
           >
             <a
               class="help-link"
-              class:selected={get(selectedSubNavItemId) === 'help'}
-              aria-current={get(selectedSubNavItemId) === 'help'}
+              class:selected={isHelpSelected()}
+              aria-current={isHelpSelected()}
               href={helpUrl}
               part="help-link"
               title="Help"
               aria-label="Help"
+              onclick={handleHelpClick}
             >
-              <HelpIcon />
+              <div class="icon-container" part="help-icon-container">
+                <div class="icon-wrapper">
+                  <HelpIcon isSelected={isHelpSelected()} />
+                </div>
+              </div>
             </a>
           </div>
         {/if}
@@ -624,7 +680,8 @@
   }
 
   .menu-button:focus .icon-container,
-  .nav-item:focus .icon-container {
+  .nav-item:focus .icon-container,
+  .help-link:focus .icon-container {
     outline: var(--ai-size-2) solid var(--ai-color-blue-600);
     outline-offset: var(--ai-size-2);
     border-radius: var(--ai-size-4);
@@ -632,7 +689,8 @@
 
   /* Hide focus outline on click */
   .menu-button:focus:not(:focus-visible) .icon-container,
-  .nav-item:focus:not(:focus-visible) .icon-container {
+  .nav-item:focus:not(:focus-visible) .icon-container,
+  .help-link:focus:not(:focus-visible) .icon-container {
     outline: none;
   }
 
@@ -726,7 +784,9 @@
   .nav-item.selected .icon-container,
   .nav-item.selected.hovered .icon-container,
   .menu-button:hover .icon-container,
-  .menu-button:active .icon-container {
+  .menu-button:active .icon-container,
+  .help-link:hover .icon-container,
+  .help-link.selected .icon-container {
     background-color: var(--ai-color-steel-300);
     border-radius: var(--ai-size-4);
   }
@@ -767,20 +827,14 @@
   }
 
   .help-link {
-    border-radius: var(--ai-size-4);
-    padding: var(--ai-size-4);
-    transition: background-color var(--ai-transition-ease-medium);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    color: inherit;
   }
 
   .help-link :global(svg) {
     display: block;
   }
-
-  .help-link:hover {
-    background: var(--ai-color-steel-300);
-  }
-
-  .help-link:is(.selected) {
-    background-color: var(--ai-color-steel-300);
-  }
 </style>

package/src/components/MobileBottomNav.svelte

@@ -162,7 +162,7 @@
   }
 
   .nav-item.active .icon {
-    background-color: var(--ai-color-neutral-200);
+    background-color: var(--ai-color-steel-300);
     border-radius: var(--ai-size-8);
   }
 

package/src/components/MobileTopNav.svelte

@@ -3,15 +3,22 @@
     isMenuButtonDisabled,
     navigationStore,
     selectedSubNavItemTitle,
+    selectedSubNavItemId,
   } from '../stores/navigationStore.js';
   import Logo from './Logo.svelte';
   import MenuIcon from './icons/MenuIcon.svelte';
+  import HelpIcon from './icons/HelpIcon.svelte';
   import { onMount } from 'svelte';
+  import { get } from 'svelte/store';
 
-  let { profileMenuData, logoLinkUrl, logoLinkLabel } = $props();
+  let { profileMenuData, logoLinkUrl, logoLinkLabel, supplementalMenuData } =
+    $props();
 
   import ProfileMenu from './ProfileMenu.svelte';
 
+  const helpUrl = supplementalMenuData?.help?.url?.trim();
+  const isHelpSelected = $derived(() => get(selectedSubNavItemId) === 'help');
+
   onMount(() => {
     // Listen for section visibility changes to update header
     const handleSectionVisible = (event: Event) => {
@@ -67,14 +74,66 @@
       }, 100);
     }
 
+    // Detect help page and set selection state (aligned with DesktopSideNav logic)
+    const checkHelpPage = () => {
+      // Skip check for hash links - they stay on the same page
+      if (!helpUrl || helpUrl === '#' || helpUrl.startsWith('#')) {
+        return;
+      }
+
+      const location = (
+        globalThis as {
+          location?: { pathname?: string; origin?: string };
+        }
+      ).location;
+      if (location?.origin && location?.pathname) {
+        const helpPath = getPathname(helpUrl, location.origin);
+        if (helpPath && location.pathname === helpPath) {
+          selectedSubNavItemId.set('help');
+        } else if (
+          get(selectedSubNavItemId) === 'help' &&
+          helpPath &&
+          location.pathname !== helpPath
+        ) {
+          // Clear help selection if we navigated away from help page
+          selectedSubNavItemId.set(null);
+        }
+      }
+    };
+
+    checkHelpPage();
+
+    // Also listen for popstate events (back/forward navigation)
+    window.addEventListener('popstate', checkHelpPage);
+
     return () => {
       window.removeEventListener('sectionVisible', handleSectionVisible);
+      window.removeEventListener('popstate', checkHelpPage);
     };
   });
 
+  function getPathname(url: string, baseOrigin: string) {
+    try {
+      return new URL(url, baseOrigin).pathname;
+    } catch {
+      return null;
+    }
+  }
+
   function toggleMobileNav() {
     navigationStore.toggleExpanded();
   }
+
+  function handleHelpClick(event: MouseEvent) {
+    selectedSubNavItemId.set('help');
+
+    // If it's a hash link, prevent default to maintain state on same page
+    if (helpUrl === '#' || helpUrl?.startsWith('#')) {
+      event.preventDefault();
+      // State is already set above, so it will persist
+      return;
+    }
+  }
 </script>
 
 <nav class="mobile-top-nav" part="mobile-top-nav">
@@ -101,6 +160,22 @@
     <span class="brand-text">{$selectedSubNavItemTitle || ''}</span>
   </div>
 
+  {#if helpUrl}
+    <a
+      class="help-button"
+      class:selected={isHelpSelected()}
+      aria-current={isHelpSelected()}
+      href={helpUrl}
+      title="Help"
+      aria-label="Help"
+      onclick={handleHelpClick}
+    >
+      <span class="icon-container">
+        <HelpIcon isSelected={isHelpSelected()} />
+      </span>
+    </a>
+  {/if}
+
   {#if profileMenuData}
     <ProfileMenu
       userMeta={profileMenuData?.userMeta}
@@ -184,4 +259,28 @@
   .menu-button:focus {
     outline: none;
   }
+
+  .help-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: var(--ai-size-4);
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .help-button .icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--ai-size-40);
+    height: var(--ai-size-40);
+    border-radius: var(--ai-size-4);
+    transition: background-color var(--ai-transition-ease-fast);
+  }
+
+  .help-button:hover .icon-container,
+  .help-button.selected .icon-container {
+    background-color: var(--ai-color-steel-300);
+  }
 </style>

package/src/components/MobileTopNav.webcomponent.svelte

@@ -8,7 +8,13 @@
   import MobileTopNav from './MobileTopNav.svelte';
 
   // Props for the web component
-  let { profileMenuData, logoLinkUrl, logoLinkLabel } = $props();
+  let { profileMenuData, logoLinkUrl, logoLinkLabel, supplementalMenuData } =
+    $props();
 </script>
 
-<MobileTopNav {profileMenuData} {logoLinkUrl} {logoLinkLabel} />
+<MobileTopNav
+  {profileMenuData}
+  {logoLinkUrl}
+  {logoLinkLabel}
+  {supplementalMenuData}
+/>

package/src/components/icons/HelpIcon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  export let isHovered: boolean = false;
+  export let isSelected = false;
 </script>
 
 <svg
@@ -11,7 +11,7 @@
 >
   <path
     d="M9.87891 7.51884C11.0505 6.49372 12.95 6.49372 14.1215 7.51884C15.2931 8.54397 15.2931 10.206 14.1215 11.2312C13.9176 11.4096 13.6917 11.5569 13.4513 11.6733C12.7056 12.0341 12.0002 12.6716 12.0002 13.5V14.25M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM12 17.25H12.0075V17.2575H12V17.25Z"
-    stroke={isHovered ? '#000' : '#585C63'}
+    stroke={isSelected ? '#000' : '#585C63'}
     stroke-width="1.5"
     stroke-linecap="round"
     stroke-linejoin="round"

package/src/layouts/GlobalAppLayout.astro

@@ -77,6 +77,7 @@ const discover = discoverUrl || '#';
         profileMenuData={profileMenuData}
         logoLinkUrl={logoLinkUrl}
         logoLinkLabel={logoLinkLabel}
+        {supplementalMenuData}
       />
       <MobileSideMenu client:load {logoLinkUrl} {logoLinkLabel}>
         <slot name="sub-nav" />
@@ -87,7 +88,7 @@ const discover = discoverUrl || '#';
         hideDiscover={hideDiscover}
         apiUrl={api}
         chatUrl={chat}
-        consoleUrl={console}
+        consoleUrl={consoleApp}
         discoverUrl={discover}
       />
     </nav>