@gsa-tts/graymatter-ui 0.4.9 → 0.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "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;
@@ -177,8 +178,30 @@
         }
       };
     }
+
+    const location = (
+      globalThis as { location?: { pathname?: string; origin?: string } }
+    ).location;
+    if (helpUrl && location?.origin && location?.pathname) {
+      const helpPath = getPathname(helpUrl, location.origin);
+      if (helpPath && location.pathname === helpPath) {
+        selectedSubNavItemId.set('help');
+      }
+    }
   });
 
+  function getPathname(url: string, baseOrigin: string) {
+    try {
+      return new URL(url, baseOrigin).pathname;
+    } catch {
+      return null;
+    }
+  }
+
+  function handleHelpClick() {
+    selectedSubNavItemId.set('help');
+  }
+
   function toggleNav() {
     if ($isMenuButtonDisabled) return;
     navigationStore.toggleExpanded();
@@ -437,14 +460,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 +652,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 +661,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 +756,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 +799,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/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) => {
@@ -72,9 +79,35 @@
     };
   });
 
+  onMount(() => {
+    const location = (
+      globalThis as {
+        location?: { pathname?: string; origin?: string };
+      }
+    ).location;
+    if (helpUrl && location?.origin && location?.pathname) {
+      const helpPath = getPathname(helpUrl, location.origin);
+      if (helpPath && location.pathname === helpPath) {
+        selectedSubNavItemId.set('help');
+      }
+    }
+  });
+
+  function getPathname(url: string, baseOrigin: string) {
+    try {
+      return new URL(url, baseOrigin).pathname;
+    } catch {
+      return null;
+    }
+  }
+
   function toggleMobileNav() {
     navigationStore.toggleExpanded();
   }
+
+  function handleHelpClick() {
+    selectedSubNavItemId.set('help');
+  }
 </script>
 
 <nav class="mobile-top-nav" part="mobile-top-nav">
@@ -101,6 +134,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 +233,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"