@gsa-tts/graymatter-ui 0.4.7 → 0.4.8

package/package.json

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

package/src/components/DesktopSideNav.svelte

@@ -11,15 +11,17 @@
     selectedItem,
     isMenuButtonDisabled,
     navigationStore,
+    selectedSubNavItemId,
     type NavigationItem,
   } from '../stores/navigationStore.js';
+  import { get } from 'svelte/store';
   import DiscoverIcon from './icons/DiscoverIcon.svelte';
   import ChatIcon from './icons/ChatIcon.svelte';
   import ConsoleIcon from './icons/ConsoleIcon.svelte';
   import ApiIcon from './icons/ApiIcon.svelte';
   import MenuIcon from './icons/MenuIcon.svelte';
   import ProfileMenu from './ProfileMenu.svelte';
-  // import HelpIcon from './icons/HelpIcon.svelte';
+  import HelpIcon from './icons/HelpIcon.svelte';
 
   const {
     ssrSelectedItem = undefined,
@@ -32,6 +34,7 @@
     chatUrl,
     consoleUrl,
     discoverUrl,
+    supplementalMenuData,
   } = $props();
 
   let hydrated = false;
@@ -39,7 +42,6 @@
   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);
@@ -92,6 +94,7 @@
     if (navContainer) {
       navContainer.classList.add('hydrated');
     }
+
     // Detect if device supports hover (desktop only)
     if (typeof window !== 'undefined') {
       const mq = window.matchMedia('(hover: hover)');
@@ -425,23 +428,24 @@
 
     {#if profileMenuData}
       <div class="nav-footer" part="nav-footer">
-        <!-- TODO: Add help icon back in when we have decided on full functionality-->
-        <!-- <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} />
+        {#if supplementalMenuData?.help?.url}
+          <div
+            class="nav-footer-icon-container"
+            part="nav-footer-icon-container"
+          >
+            <a
+              class="help-link"
+              class:selected={get(selectedSubNavItemId) === 'help'}
+              aria-current={get(selectedSubNavItemId) === 'help'}
+              href={supplementalMenuData.help.url}
+              part="help-link"
+              title="Help"
+              aria-label="Help"
+            >
+              <HelpIcon />
+            </a>
           </div>
-        </button>
-      </div> -->
+        {/if}
         <div class="nav-footer-profile-container">
           <ProfileMenu
             userMeta={profileMenuData?.userMeta}
@@ -742,15 +746,13 @@
     color: var(--ai-color-neutral-700);
   }
 
-  /* .nav-footer-icon-container {
+  .nav-footer-icon-container {
+    align-items: center;
     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;
-  } */
+    margin-block-end: var(--ai-size-4);
+  }
 
   .nav-footer-profile-container {
     display: flex;
@@ -761,38 +763,22 @@
     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 var(--ai-transition-ease-medium), border-radius var(--ai-transition-ease-medium);
-  } */
-  /* .nav-footer-icon-inner:hover,
-  .nav-footer-icon-inner:focus {
-    background-color: var(--ai-color-steel-300);
+
+  .help-link {
     border-radius: var(--ai-size-4);
+    padding: var(--ai-size-4);
+    transition: background-color var(--ai-transition-ease-medium);
   }
-  .nav-footer-icon-inner:focus {
-    outline: none;
+
+  .help-link :global(svg) {
+    display: block;
   }
-  .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);
+
+  .help-link:hover {
+    background: var(--ai-color-steel-300);
+  }
+
+  .help-link:is(.selected) {
+    background-color: var(--ai-color-steel-300);
   }
-  .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

@@ -19,6 +19,7 @@
     chatUrl,
     consoleUrl,
     discoverUrl,
+    supplementalMenuData,
   } = $props();
 </script>
 
@@ -33,6 +34,7 @@
   {chatUrl}
   {consoleUrl}
   {discoverUrl}
+  {supplementalMenuData}
 >
   <slot />
 </DesktopSideNav>

package/src/layouts/GlobalAppLayout.astro

@@ -16,12 +16,14 @@ const {
   gtmID,
   showAppIcons = true,
   profileMenuData = undefined,
+  supplementalMenuData = undefined,
   logoLinkUrl,
   logoLinkLabel,
   title: pageTitle,
   description,
   openGraphImage,
   hideDiscover = true,
+  className = '',
 } = Astro.props;
 
 // Use getSecret directly for better environment variable handling
@@ -33,13 +35,13 @@ const discoverUrl =
   getSecret('DISCOVER_URL') || getSecret('PUBLIC_DISCOVER_URL');
 
 const chat = chatUrl || '#';
-const console = consoleUrl || '#';
+const consoleApp = consoleUrl || '#';
 const api = apiDocsUrl || '#';
 const discover = discoverUrl || '#';
 ---
 
 <BaseLayout title={pageTitle} {gtmID} {description} {openGraphImage}>
-  <div class="app">
+  <div class={`app ${className}`}>
     <!-- Desktop Navigation -->
     <div class="layout-container">
       <nav aria-label="Main navigation">
@@ -51,8 +53,9 @@ const discover = discoverUrl || '#';
           profileMenuData={profileMenuData}
           apiUrl={api}
           chatUrl={chat}
-          consoleUrl={console}
+          consoleUrl={consoleApp}
           discoverUrl={discover}
+          {supplementalMenuData}
         >
           <slot name="sub-nav" />
         </DesktopSideNav>

package/src/utils/setupMocks.ts

@@ -6,6 +6,7 @@ export function setupCommonMocks() {
   vi.mock('../stores/navigationStore.js', () => {
     const isExpanded = writable(true);
     const selectedItem = writable('console');
+    const selectedSubNavItemId = writable('');
     const selectedSubNavItemTitle = writable('');
 
     const isMenuButtonDisabled = derived(
@@ -17,6 +18,7 @@ export function setupCommonMocks() {
       isExpanded,
       selectedItem,
       isMenuButtonDisabled,
+      selectedSubNavItemId,
       selectedSubNavItemTitle,
       navigationStore: {
         setSelectedItem: vi.fn(),