@gsa-tts/graymatter-ui 0.2.1 → 0.2.3

package/src/components/ProfileMenu.svelte

@@ -0,0 +1,241 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  /**
+   * Array of menu items to render in the profile menu.
+   * Each item: { label: string, icon: string, onClick: () => void }
+   */
+  export let menuItems: Array<{ label: string; icon: string; onClick: () => void }> = [];
+  export let userMeta: { initials: string};
+  export let ariaLabel: string = 'Open profile menu';
+  export let menuAlign: 'desktop' | 'mobile' = 'desktop';
+
+  let menuId = `profile-menu-${Math.random().toString(36).slice(2, 10)}`;
+  let menuOpen = false;
+  function toggleMenu() { menuOpen = !menuOpen; }
+  function closeMenu() { menuOpen = false; }
+
+  // Optional: close menu on outside click
+  function handleBlur(event: FocusEvent) {
+    const related = event.relatedTarget as HTMLElement | null;
+    if (!related || !related.closest('.profile-context-menu')) {
+      closeMenu();
+    }
+  }
+
+  let profileButton: HTMLButtonElement;
+
+  // For keyboard navigation, keep refs to all menu item buttons
+  let menuItemButtons: HTMLButtonElement[] = [];
+  let btns: (HTMLButtonElement | null)[] = [];
+  $: menuItemButtons = btns.filter(Boolean) as HTMLButtonElement[];
+
+  function handleMenuKeydown(e: KeyboardEvent, idx: number) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      const next = (idx + 1) % menuItems.length;
+      menuItemButtons[next]?.focus();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      const prev = (idx - 1 + menuItems.length) % menuItems.length;
+      menuItemButtons[prev]?.focus();
+    } else if (e.key === 'Escape') {
+      closeMenu();
+      profileButton?.focus();
+      e.stopPropagation();
+    }
+  }
+
+  function handleGlobalEscape(e: KeyboardEvent) {
+    if (menuOpen && e.key === 'Escape') {
+      closeMenu();
+      profileButton?.focus();
+      e.stopPropagation();
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener('keydown', handleGlobalEscape, true);
+    return () => {
+      window.removeEventListener('keydown', handleGlobalEscape, true);
+    };
+  });
+</script>
+
+<div style="position: relative; display: inline-block;">
+  <button
+    class="user-profile-button"
+    tabindex="0"
+    aria-label={ariaLabel}
+    aria-haspopup="menu"
+    aria-expanded={menuOpen}
+    aria-controls={menuId}
+    on:click={toggleMenu}
+    on:blur={handleBlur}
+    bind:this={profileButton}
+  >
+    <div class="user-profile-container">
+      <div class="user-profile-icon" part="user-profile-icon">
+        <span class="user-initials">{userMeta?.initials}</span>
+      </div>
+    </div>
+  </button>
+
+  {#if menuOpen}
+    <div
+      class="profile-context-menu {menuAlign === 'desktop' ? 'desktop-align' : 'mobile-align'}"
+      tabindex="-1"
+      id={menuId}
+      role="menu"
+    >
+      {#each menuItems as item, idx (item.label)}
+        <button
+          type="button"
+          class="menu-item"
+          on:click={() => { item.onClick(); closeMenu(); }}
+          bind:this={btns[idx]}
+          on:keydown={(e) => handleMenuKeydown(e, idx)}
+          role="menuitem"
+        >
+          <span class="icon">
+            <img src={item.icon} alt="" aria-hidden="true" width="20" height="20" />
+          </span>
+          <div class="menu-text">{item.label}</div>
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .user-profile-container,
+  .user-profile-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .user-profile-container,
+  .user-profile-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .user-profile-icon {
+    border-radius: var(--ai-size-4);
+    background: var(--ai-color-blue-800);
+  }
+
+  .user-initials {
+    color: var(--ai-color-white);
+    text-align: center;
+    font-weight: 400;
+    line-height: 1.3;
+  }
+
+  .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-button:focus:not(:focus-visible) {
+  outline: none;
+  }
+
+  .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;
+  }
+  .profile-context-menu {
+    display: flex;
+    width: 13.75rem;
+    padding: var(--ai-size-12);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--ai-size-2);
+    border-radius: var(--ai-size-8);
+    border: 0.0625rem solid var(--ai-color-steel-200);
+    background: var(--ai-color-white);
+    box-shadow: 0 0.1875rem var(--ai-size-6) 0 rgba(50, 54, 61, 0.20);
+    position: absolute;
+    z-index: var(--ai-layer-50);
+  }
+  .profile-context-menu.desktop-align {
+    left: 100%;
+    top: auto;
+    bottom: 0;
+    margin-left: var(--ai-size-8);
+    /* aligns bottom of menu with bottom of button */
+    transform: translateY(0);
+  }
+  .profile-context-menu.mobile-align {
+    top: 110%;
+    right: 0;
+    left: auto;
+    bottom: auto;
+    margin-left: 0;
+    transform: none;
+  }
+  .menu-item {
+    display: flex;
+    align-items: center;
+    gap: var(--ai-size-10);
+    flex: 1 0 0;
+    width: 100%;
+    cursor: pointer;
+    padding: var(--ai-size-8);
+    background: none;
+    border: none;
+    box-shadow: none;
+    outline: none;
+  }
+  .menu-item:focus {
+    background: var(--ai-color-steel-200);
+    border-radius: var(--ai-size-4);
+    outline: var(--ai-size-2) solid var(--ai-color-blue-600);
+    outline-offset: var(--ai-size-2);
+  }
+
+  .menu-item:focus:not(:focus-visible) {
+    outline: none;
+  }
+  .menu-item:hover {
+    background: var(--ai-color-steel-200);
+    border-radius: var(--ai-size-4);
+  }
+  .icon {
+    width: var(--ai-size-20);
+    height: var(--ai-size-20);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .menu-text {
+    color: var(--ai-color-black);
+    font-size: var(--ai-size-14);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 130%;
+  }
+</style> 

package/src/components/UsaBanner.astro

@@ -18,7 +18,10 @@ const mappedSize = sizeMap[maxWidth] || sizeMap.none;
   aria-label="Official website of the United States government"
 >
   <div class="usa-accordion">
-    <header class="usa-banner__header ai-banner__header">
+    <header
+      class="usa-banner__header ai-banner__header"
+      aria-label="USA banner"
+    >
       <div class=`usa-banner__inner ${mappedSize}`>
         <div class="grid-col-auto">
           <img

package/src/components/icons/HelpIcon.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  export let isHovered: boolean = false;
+</script>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+>
+  <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-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg> 

package/src/constants/common.ts

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

package/src/layouts/GlobalAppLayout.astro

@@ -8,8 +8,17 @@ import MobileTopNav from '../components/MobileTopNav.svelte';
 import MobileBottomNav from '../components/MobileBottomNav.svelte';
 import MobileSideMenu from '../components/MobileSideMenu.svelte';
 import Logo from '../components/Logo.svelte';
-
-const { componentOptions = {}, ssrSelectedItem, gtmID } = Astro.props;
+import { siteName } from '../constants';
+
+const {
+  componentOptions = {},
+  ssrSelectedItem,
+  gtmID,
+  showAppIcons = true,
+  profileMenuData = undefined,
+  logoLinkUrl,
+  logoLinkLabel,
+} = Astro.props;
 
 const title = getPageTitle(Astro);
 ---
@@ -19,15 +28,20 @@ const title = getPageTitle(Astro);
     <!-- Desktop Navigation -->
     <div class="layout-container">
       <nav aria-label="Main navigation">
-        <DesktopSideNav client:load ssrSelectedItem={ssrSelectedItem}>
+        <DesktopSideNav
+          client:load
+          ssrSelectedItem={ssrSelectedItem}
+          {showAppIcons}
+          {profileMenuData}
+        >
           <slot name="sub-nav" />
         </DesktopSideNav>
       </nav>
       <div class="main-container">
-        <header>
+        <header aria-label="Main site header">
           <DesktopHeader client:load />
         </header>
-        <main id="main-content">
+        <main id="main-content" tabindex="0">
           <slot />
         </main>
       </div>
@@ -35,16 +49,28 @@ const title = getPageTitle(Astro);
 
     <!-- Mobile Navigation -->
     <nav aria-label="Mobile navigation">
-      <MobileTopNav client:load />
-      <MobileSideMenu client:load>
+      <MobileTopNav client:load {profileMenuData} />
+      <MobileSideMenu client:load {logoLinkUrl} {logoLinkLabel}>
         <slot name="sub-nav" />
       </MobileSideMenu>
-      <MobileBottomNav client:load />
+      <MobileBottomNav client:load {showAppIcons} />
     </nav>
 
     <!-- Fixed Logo (Desktop only) -->
-    <div class="logo-fixed-container display-none tablet:display-flex">
-      <Logo width={75} height={22} />
+    <div
+      class="logo-fixed-container display-none tablet:display-flex"
+      aria-label={siteName}
+      role="region"
+    >
+      {
+        logoLinkUrl ? (
+          <a class="display-flex" href={logoLinkUrl} aria-label={logoLinkLabel}>
+            <Logo width={75} height={22} />
+          </a>
+        ) : (
+          <Logo width={75} height={22} />
+        )
+      }
     </div>
 
     <!-- Mobile Main Content -->

package/src/utils/setupMocks.ts

@@ -0,0 +1,44 @@
+import { vi } from 'vitest';
+import { writable } from 'svelte/store';
+
+export function setupCommonMocks() {
+  // navigationStore.js mock
+  vi.mock('../stores/navigationStore.js', () => {
+    const isExpanded = writable(true);
+    const selectedItem = writable('console');
+    const isMenuButtonDisabled = writable(false);
+    const selectedSubNavItemTitle = writable('');
+    return {
+      isExpanded,
+      selectedItem,
+      isMenuButtonDisabled,
+      selectedSubNavItemTitle,
+      navigationStore: {
+        setSelectedItem: vi.fn(),
+        setExpanded: (val: boolean) => isExpanded.set(val),
+      },
+    };
+  });
+
+  vi.mock('../utils/getAppUrls', () => ({
+    getAppUrls: () => ({
+      discover: '/fake-discover',
+      chat: '/fake-chat',
+      console: '/fake-console',
+      api: '/fake-api',
+    }),
+  }));
+
+  vi.mock('slugify', () => ({
+    default: (x: string) => x.toLowerCase().replace(/ /g, '-'),
+  }));
+
+  vi.stubGlobal(
+    'window',
+    Object.create(window, {
+      sessionStorage: {
+        value: { setItem: vi.fn(), removeItem: vi.fn(), getItem: vi.fn() },
+      },
+    })
+  );
+}