@gsa-tts/graymatter-ui 0.1.0 → 0.2.1

package/src/components/MobileBottomNav.svelte

@@ -5,23 +5,30 @@
   import ChatIcon from './icons/ChatIcon.svelte';
   import ConsoleIcon from './icons/ConsoleIcon.svelte';
   import ApiIcon from './icons/ApiIcon.svelte';
+  import { getAppUrls } from '../utils/getAppUrls';
+  import slugify from "slugify";
 
-  export let onNavItemClick: ((data: { item: NavigationItem; expanded: boolean }) => void) | undefined = undefined;
+  let {onNavItemClick, apiUrl, chatUrl, consoleUrl, discoverUrl}: {
+    onNavItemClick?: (data: { item: NavigationItem; expanded: boolean }) => void,
+    apiUrl?: string,
+    chatUrl?: string,
+    consoleUrl?: string,
+    discoverUrl?: string,
+  } = $props();
+
+  const urls = getAppUrls();
 
   const navItems = [
-    { id: 'discover', label: 'Discover', icon: DiscoverIcon, href: '/discover' },
-    { id: 'chat', label: 'Chat', icon: ChatIcon, href: '/' },
-    { id: 'console', label: 'Console', icon: ConsoleIcon, href: '/' },
-    { id: 'api', label: 'API', icon: ApiIcon, href: '/api' }
+    { id: 'discover', label: 'Discover', icon: DiscoverIcon, href: discoverUrl || urls.discover },
+    { id: 'chat', label: 'Chat', icon: ChatIcon, href: chatUrl || urls.chat },
+    { id: 'console', label: 'Console', icon: ConsoleIcon, href: consoleUrl || urls.console },
+    { id: 'api', label: 'API', icon: ApiIcon, href: apiUrl || urls.api }
   ] as const;
 
-  function handleNavItemClick(item: NavigationItem) {
-    console.log('[MobileBottomNav] handleNavItemClick called for:', item, 'at:', Date.now());
-    
+  function handleNavItemClick(item: NavigationItem) {    
     // Set navigation flag immediately to prevent header restoration
     if (item !== 'discover' && typeof window !== 'undefined') {
       sessionStorage.setItem('navigatingToMainNav', 'true');
-      console.log('[MobileBottomNav] Set navigation flag for:', item, 'at:', Date.now());
     }
     
     navigationStore.setSelectedItem(item);
@@ -44,7 +51,6 @@
               const firstSection = mainContent.querySelector('h2[id], h3[id], h4[id], h5[id], h6[id]');
               if (firstSection && firstSection.textContent) {
                 const firstSectionTitle = firstSection.textContent.trim();
-                console.log('[MobileBottomNav] Setting default header for', item, ':', firstSectionTitle);
                 selectedSubNavItemTitle.set(firstSectionTitle);
                 if (typeof window !== 'undefined') {
                   sessionStorage.setItem('subNav-selectedTitle', JSON.stringify(firstSectionTitle));
@@ -79,21 +85,67 @@
   }
 </script>
 
-<nav class="mobile-bottom-nav">
+<nav class="mobile-bottom-nav" part="mobile-bottom-nav">
   {#each navItems as navItem}
     <a
       href={navItem.href}
       class="nav-item"
       class:active={$selectedItem === navItem.id}
-      on:click={() => handleNavItemClick(navItem.id)}
+      onclick={() => handleNavItemClick(navItem.id)}
+      part={`${slugify(navItem.id)}-item`}
     >
       <div class="icon">
-        <svelte:component 
-          this={navItem.icon} 
-          isActive={$selectedItem === navItem.id}
+        <navItem.icon
+          isSelected={$selectedItem === navItem.id}
         />
       </div>
       <span class="label">{navItem.label}</span>
     </a>
   {/each}
 </nav>
+
+<style>
+  .nav-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--ai-size-4);
+    text-decoration: none;
+    color: var(--ai-color-neutral-600);
+    transition: color 0.2s ease;
+    height: 100%;
+  }
+
+  .nav-item.active {
+    color: var(--ai-color-neutral-900);
+  }
+
+  .nav-item.active .icon {
+    background-color: var(--ai-color-neutral-200);
+    border-radius: var(--ai-size-8);
+  }
+
+  .nav-item:hover {
+    color: var(--ai-color-neutral-700);
+  }
+  
+  .icon {
+    width: var(--ai-size-24);
+    height: var(--ai-size-24);
+    margin-bottom: var(--ai-size-2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--ai-size-2);
+    transition: background-color 0.2s ease;
+  }
+
+  .label {
+    font-size: 0.6875rem; /* 11px */
+    font-weight: 500;
+    line-height: 1;
+    text-align: center;
+  }
+</style>

package/src/components/MobileBottomNav.webcomponent.svelte

@@ -0,0 +1,18 @@
+<svelte:options customElement={{
+  tag: 'graymatter-mobile-bottom-nav'
+}} />
+
+<script lang="ts">
+  import MobileBottomNav from './MobileBottomNav.svelte';
+
+  // Props for the web component
+  let { onNavItemClick, apiUrl, chatUrl, consoleUrl, discoverUrl } = $props();
+</script>
+
+<MobileBottomNav
+  {onNavItemClick}
+  {apiUrl}
+  {chatUrl}
+  {consoleUrl}
+  {discoverUrl}
+/>

package/src/components/MobileSideMenu.svelte

@@ -74,28 +74,21 @@
     // Listen for the custom event globally
     window.addEventListener('mobileAnchorNavigate', handleMobileAnchorNavigate);
     
-    // Listen for close mobile menu event
     const handleCloseMobileMenu = () => {
-      console.log('[MobileSideMenu] Received closeMobileMenu event');
       closeMobileMenu();
     };
     window.addEventListener('closeMobileMenu', handleCloseMobileMenu);
     
-    // Listen for layout transitions
     const handleLayoutTransition = (event: Event) => {
       const customEvent = event as CustomEvent;
       const { isMobile } = customEvent.detail;
-      console.log('[MobileSideMenu] Layout transition detected:', { isMobile });
       
       if (isMobile) {
-        // Switching to mobile: close navigation
-        console.log('[MobileSideMenu] Closing navigation for mobile');
         navigationStore.setExpanded(false);
       }
     };
     window.addEventListener('layoutTransition', handleLayoutTransition);
 
-    // Listen for Escape key globally to close menu
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape' && $isExpanded) {
         closeMobileMenu();
@@ -123,6 +116,7 @@
     role="button"
     tabindex="0"
     aria-label="Close navigation menu (Escape key supported)"
+    part="mobile-overlay"
     on:click={closeMobileMenu}
     on:keydown={(e) => {
       if (e.key === 'Enter' || e.key === ' ') closeMobileMenu();
@@ -131,25 +125,25 @@
 {/if}
 
 <!-- Mobile side menu -->
-<div class="mobile-side-menu" class:open={$isExpanded} bind:this={sideMenuElement}>
-  <div class="menu-header">
-    <div class="logo-container">
+<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} />
     </div>
-    <button class="close-button" on:click={closeMobileMenu} aria-label="Close navigation menu">
+    <button class="close-button" on:click={closeMobileMenu} aria-label="Close navigation menu" part="close-button">
       <CloseIcon />
     </button>
   </div>
   
-  <div class="menu-content">
+  <div class="menu-content" part="menu-content">
     <!-- Show submenu items if available and not on discover -->
     {#if $selectedItem && $selectedItem !== 'discover'}
-      <div class="subnav-section">
+      <div class="subnav-section" part="subnav-section">
         <slot />
       </div>
     {:else}
       <!-- Show message when no submenu is available -->
-      <div class="no-subnav-message">
+      <div class="no-subnav-message" part="no-subnav-message">
         <p>Select a section from the bottom navigation</p>
       </div>
     {/if}
@@ -167,4 +161,65 @@
   .no-subnav-message p {
     margin: 0;
   }
+  
+  .mobile-side-menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 15rem;
+    max-width: 85vw;
+    background: var(--ai-color-white);
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+    z-index: var(--ai-layer-50);
+    flex-direction: column;
+    box-shadow: var(--ai-size-2) 0 var(--ai-size-10) #0000001a;
+  }
+  
+  .mobile-side-menu.open {
+    transform: translateX(0);
+  }
+  
+  .menu-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--ai-size-16) var(--ai-size-20);
+    border-bottom: 0.0625rem solid var(--ai-color-neutral-200);
+  }
+  
+  .mobile-side-menu .logo-container {
+    display: flex;
+  }
+
+  .close-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--ai-size-32);
+    height: var(--ai-size-32);
+    border: none;
+    background: none;
+    color: var(--ai-color-neutral-700);
+    cursor: pointer;
+    border-radius: var(--ai-size-6);
+    transition: background-color 0.2s ease;
+  }
+
+  .close-button:hover {
+    background-color: var(--ai-color-neutral-100);
+  }
+  
+  .menu-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0;
+  }
+  
+  .subnav-section {
+    padding: var(--ai-size-16) 0;
+    overflow-y: auto;
+    max-height: calc(100vh - 4rem); /* leave space for header/close */
+  }
 </style>

package/src/components/MobileSideMenu.webcomponent.svelte

@@ -0,0 +1,11 @@
+<svelte:options customElement={{
+  tag: 'graymatter-mobile-side-menu'
+}} />
+
+<script lang="ts">
+  import MobileSideMenu from './MobileSideMenu.svelte';
+</script>
+
+<MobileSideMenu>
+  <slot />
+</MobileSideMenu>

package/src/components/MobileTopNav.svelte

@@ -71,13 +71,14 @@
   }
 </script>
 
-<nav class="mobile-top-nav">
+<nav class="mobile-top-nav" part="mobile-top-nav">
   <button
     class="menu-button"
     class:disabled={$isMenuButtonDisabled}
     disabled={$isMenuButtonDisabled}
     on:click={toggleMobileNav}
-    aria-label="Toggle navigation menu"
+    aria-label="Open navigation menu"
+    part="menu-button"
   >
     <MenuIcon />
   </button>
@@ -91,11 +92,144 @@
     class="profile-button"
     on:click={handleProfileClick}
     aria-label="Open profile menu"
+    part="profile-button"
   >
     <div class="user-profile-container">
-      <div class="user-profile-icon">
+      <div class="user-profile-icon" part="user-profile-icon">
         <span class="user-initials">ZW</span>
       </div>
     </div>
   </button>
 </nav>
+
+<style>
+  .user-profile-container,
+  .user-profile-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .menu-button,
+  .profile-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: none;
+    cursor: pointer;
+    border-radius: var(--ai-size-8);
+    transition: background-color 0.2s ease;
+  }
+
+  .menu-button:disabled,
+  .menu-button.disabled {
+    cursor: not-allowed;
+    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;
+  }
+
+  .mobile-top-nav .menu-button {
+    width: var(--ai-size-40);
+    height: var(--ai-size-40);
+    color: var(--ai-color-neutral-700);
+  }
+
+  .menu-button:hover {
+    background-color: var(--ai-color-neutral-100);
+  }
+
+  /* MobileTopNav specific disabled state */
+  .mobile-top-nav .menu-button.disabled,
+  .mobile-top-nav .menu-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    background-color: transparent;
+  }
+
+  .brand {
+    display: flex;
+    align-items: center;
+    gap: var(--ai-size-12);
+    flex: 1;
+    margin-left: var(--ai-size-8);
+  }
+
+  .brand-text {
+    color: var(--ai-color-neutral-900);
+    font-size: var(--ai-size-16);
+    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);
+    justify-content: center;
+    align-items: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    opacity: 1;
+    transition: opacity 0.2s ease;
+    will-change: opacity;
+  }
+
+  .menu-button.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    will-change: opacity;
+  }
+
+  .menu-button:focus {
+    outline: none;
+  }
+
+</style>

package/src/components/MobileTopNav.webcomponent.svelte

@@ -0,0 +1,14 @@
+<svelte:options customElement={{
+  tag: 'graymatter-mobile-top-nav'
+}} />
+
+<script lang="ts">
+  import MobileTopNav from './MobileTopNav.svelte';
+
+  // Props for the web component
+  let { onMenuToggle } = $props();
+</script>
+
+<MobileTopNav
+  {onMenuToggle}
+/>

package/src/index.ts

@@ -0,0 +1,16 @@
+import Button from './components/Button.webcomponent.svelte';
+import DesktopHeader from './components/DesktopHeader.webcomponent.svelte';
+import DesktopSideNav from './components/DesktopSideNav.webcomponent.svelte';
+import Logo from './components/Logo.webcomponent.svelte';
+import MobileBottomNav from './components/MobileBottomNav.webcomponent.svelte';
+import MobileSideMenu from './components/MobileSideMenu.webcomponent.svelte';
+import MobileTopNav from './components/MobileTopNav.webcomponent.svelte';
+export {
+  Button,
+  DesktopHeader,
+  DesktopSideNav,
+  Logo,
+  MobileBottomNav,
+  MobileSideMenu,
+  MobileTopNav,
+};

package/src/layouts/GlobalAppLayout.astro

@@ -2,12 +2,12 @@
 import BaseLayout from '@gsa-tts/graymatter-ui/layouts/BaseLayout.astro';
 import '../styles/base/global.css';
 import { getPageTitle } from '@gsa-tts/graymatter-ui/helpers';
-import UsaBanner from '../components/UsaBanner.astro';
 import DesktopSideNav from '../components/DesktopSideNav.svelte';
 import DesktopHeader from '../components/DesktopHeader.svelte';
 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;
 
@@ -16,34 +16,39 @@ const title = getPageTitle(Astro);
 
 <BaseLayout title={title} gtmID={gtmID}>
   <div class="app">
-    <div class="banner">
-      <UsaBanner isInverted={componentOptions.usaBanner?.theme === 'inverse'} />
-    </div>
-    <!-- Mobile Navigation -->
-    <MobileTopNav client:load />
-    <MobileSideMenu client:load>
-      <slot name="sub-nav" />
-    </MobileSideMenu>
-    <MobileBottomNav client:load />
-
     <!-- Desktop Navigation -->
     <div class="layout-container">
-      <DesktopSideNav client:load ssrSelectedItem={ssrSelectedItem}>
-        <slot name="sub-nav" />
-      </DesktopSideNav>
+      <nav aria-label="Main navigation">
+        <DesktopSideNav client:load ssrSelectedItem={ssrSelectedItem}>
+          <slot name="sub-nav" />
+        </DesktopSideNav>
+      </nav>
       <div class="main-container">
-        <DesktopHeader client:load />
+        <header>
+          <DesktopHeader client:load />
+        </header>
         <main id="main-content">
           <slot />
         </main>
       </div>
     </div>
 
+    <!-- Mobile Navigation -->
+    <nav aria-label="Mobile navigation">
+      <MobileTopNav client:load />
+      <MobileSideMenu client:load>
+        <slot name="sub-nav" />
+      </MobileSideMenu>
+      <MobileBottomNav client:load />
+    </nav>
+
+    <!-- Fixed Logo (Desktop only) -->
+    <div class="logo-fixed-container display-none tablet:display-flex">
+      <Logo width={75} height={22} />
+    </div>
+
     <!-- Mobile Main Content -->
-    <main
-      id="main-content-mobile"
-      class="main-content-mobile"
-    >
+    <main id="main-content-mobile" class="main-content-mobile">
       <slot />
     </main>
   </div>

package/src/stores/navigationStore.ts

@@ -121,31 +121,16 @@ export const navigationStore: NavigationStore = {
   },
 
   handleLayoutTransition: (isMobile: boolean): void => {
-    console.log('[NavigationStore] handleLayoutTransition called:', {
-      isMobile,
-    });
-
     if (isMobile) {
-      // Switching to mobile: always close navigation
-      console.log('[NavigationStore] Closing navigation for mobile');
       isExpanded.set(false);
     } else {
-      // Switching to desktop: open navigation if on non-discover page
       const currentItem = getInitialValue('globalSideNav-selectedItem', null);
-      console.log(
-        '[NavigationStore] Desktop transition - current item:',
-        currentItem
-      );
-
       if (currentItem && currentItem !== 'discover') {
         console.log(
           '[NavigationStore] Opening navigation for desktop (non-discover page)'
         );
         isExpanded.set(true);
       } else {
-        console.log(
-          '[NavigationStore] Keeping navigation closed for desktop (discover page or no selection)'
-        );
         isExpanded.set(false);
       }
     }

package/src/styles/base/global.css

@@ -1,7 +1,6 @@
 @layer designsystem, theme, buttons, appnav, applayout;
 @import '../../../static/uswds/styles/styles.css' layer(designsystem);
-@import '../../../node_modules/@gsa-tts/graymatter-style-tokens/dist/css/variables.css'
-  layer(theme);
+@import '@gsa-tts/graymatter-style-tokens/dist/css/variables.css' layer(theme);
 @import 'theme.css' layer(theme);
 @import 'typography.css' layer(theme);
 @import '../utilities/layout.css' layer(theme);

package/src/styles/components/globalAppLayout.css

@@ -31,6 +31,14 @@
   overflow-y: auto;
 }
 
+.logo-fixed-container {
+  position: fixed;
+  top: 1rem;
+  left: var(--ai-size-88);
+  z-index: 10;
+  background: transparent;
+}
+
 @media (--ai-size-breakpoint-tablet) {
   .main-content-mobile {
     display: none;
@@ -41,22 +49,11 @@
     overflow: hidden;
     flex-direction: row;
   }
-  .side-nav-container {
-    display: flex;
-    flex-shrink: 0;
-    position: relative;
-    z-index: 2;
-  }
-  .side-nav-container.expanded {
-    width: 12.5rem;
-    min-width: 12.5rem;
-    max-width: 12.5rem;
-  }
   .main-container {
     flex: 1 1 0%;
     min-width: 0;
     position: relative;
-    z-index: 1;
+    z-index: var(--ai-layer-1);
   }
   .app main {
     padding: var(--ai-size-40) var(--ai-size-32) var(--ai-size-8) 4.875rem;