@gsa-tts/graymatter-ui 0.0.2 → 0.2.0

package/src/components/Logo.svelte

@@ -2,8 +2,8 @@
   export let isInverted: boolean = false;
   export let width: number | undefined;
   export let height: number | undefined;
-  const defaultWidth = 105;
-  const defaultHeight = 33;
+  const defaultWidth = 102;
+  const defaultHeight = 30;
   width = width || defaultWidth;
   height = height || defaultHeight;
 
@@ -13,7 +13,7 @@
 <svg
   {width}
   {height}
-  viewBox="0 0 105 33"
+  viewBox="0 0 102 30"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
   style="fill: {logoColor};"
@@ -21,14 +21,15 @@
 >
   <g>
     <path
-      d="M13.4937 19.864H26.5932C25.3427 24.7736 21.4655 27.9119 16.5655 27.9119C10.167 27.9119 4.96116 22.7532 4.96116 16.4125C4.96116 10.0717 10.1636 4.91296 16.5621 4.91296C20.1777 4.91296 23.5248 6.53939 25.7437 9.37806L27.2626 11.321L31.184 8.31061L29.665 6.36765C26.4981 2.3201 21.7238 0 16.5621 0C7.43155 0 0 7.36102 0 16.4125C0 25.4639 7.43155 32.8249 16.5621 32.8249C24.9553 32.8249 31.4218 26.4 31.9383 17.5506L32.0913 14.951H13.4937V19.864Z"
+      d="M57.5791 20.4177C57.5791 15.5645 53.7309 11.6187 48.9988 11.6187H40.188C38.6688 11.6187 37.4304 10.3567 37.4304 8.80197C37.4304 7.24729 38.6658 5.98522 40.188 5.98522H56.2373V0H38.8757C34.1466 0 30.2983 3.94877 30.2983 8.80197C30.2983 13.6552 34.1466 17.6039 38.8757 17.6039H47.6865C49.2057 17.6039 50.4442 18.866 50.4442 20.4207C50.4442 21.9754 49.2087 23.2374 47.6865 23.2374H31.0284V29.2197H48.9988C53.7309 29.2197 57.5791 25.2709 57.5791 20.4207V20.4177Z"
     />
     <path
-      d="M52.9238 13.9544H44.0379C41.6559 13.9544 39.7156 12.035 39.7156 9.67113C39.7156 7.30725 41.6559 5.38786 44.0379 5.38786H61.0282V0.478271H44.0379C38.9204 0.478271 34.7578 4.60327 34.7578 9.6745C34.7578 14.7457 38.9204 18.8707 44.0379 18.8707H52.9238C55.3059 18.8707 57.2462 20.7901 57.2462 23.154C57.2462 25.5179 55.3059 27.4373 52.9238 27.4373H35.4V32.3502H52.9238C58.0413 32.3502 62.2039 28.2252 62.2039 23.154C62.2039 18.0828 58.0413 13.9578 52.9238 13.9578V13.9544Z"
+      d="M82.1466 24.7153L82.188 24.7685L83.6747 29.2197H90.6914L80.917 0H68.3525L58.5781 29.2167H65.5949L67.0993 24.7153H82.1466ZM69.186 18.4818L73.3653 5.98522H75.9013L75.919 6.03547L80.1161 18.5793H69.1535L69.186 18.4818Z"
     />
-    <path d="M104.809 0.478271H99.8516V32.3468H104.809V0.478271Z" />
     <path
-      d="M76.2292 0.478271L62.7559 32.3536H68.1316L79.5287 5.39123H79.9874L91.3811 32.3536H96.7568L83.2835 0.478271H76.2292Z"
+      d="M27.198 0H20.5626V15.8158C20.5626 21.4345 16.9626 23.4355 13.5961 23.4355C9.03842 23.4355 6.62956 20.799 6.62956 15.8158V0H0V17.0069C0 20.6985 1.46305 24.0532 4.11724 26.4532C6.64729 28.7409 10.0138 30 13.599 30C20.3586 30 27.198 25.5369 27.198 17.0039V0Z"
     />
+    <path d="M101.708 9.78915H93.8662V29.2197H101.708V9.78915Z" />
+    <path d="M101.823 0H93.8662V5.98227H101.823V0Z" />
   </g>
 </svg>

package/src/components/Logo.webcomponent.svelte

@@ -0,0 +1,26 @@
+<svelte:options customElement={{
+  tag: 'graymatter-logo',
+  props: {
+    isInverted: { reflect: true, type: 'Boolean', attribute: 'is-inverted' },
+    width: { reflect: true, type: 'Number', attribute: 'width' },
+    height: { reflect: true, type: 'Number', attribute: 'height' }
+  }
+}} />
+
+<script lang="ts">
+  import Logo from './Logo.svelte';
+
+  let {
+    isInverted = false,
+    width = undefined,
+    height = undefined,
+    ...props
+  } = $props();
+</script>
+
+<Logo
+  {isInverted}
+  {width}
+  {height}
+  {...props}
+/>

package/src/components/MobileBottomNav.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+  import { selectedItem, navigationStore } from '../stores/navigationStore.js';
+  import type { NavigationItem } from '../stores/navigationStore.js';
+  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 { getAppUrls } from '../utils/getAppUrls';
+
+  export let onNavItemClick: ((data: { item: NavigationItem; expanded: boolean }) => void) | undefined = undefined;
+
+  const urls = getAppUrls();
+
+  const navItems = [
+    { id: 'discover', label: 'Discover', icon: DiscoverIcon, href: urls.discover },
+    { id: 'chat', label: 'Chat', icon: ChatIcon, href: urls.chat },
+    { id: 'console', label: 'Console', icon: ConsoleIcon, href: urls.console },
+    { id: 'api', label: 'API', icon: ApiIcon, href: urls.api }
+  ] as const;
+
+  function handleNavItemClick(item: NavigationItem) {    
+    // Set navigation flag immediately to prevent header restoration
+    if (item !== 'discover' && typeof window !== 'undefined') {
+      sessionStorage.setItem('navigatingToMainNav', 'true');
+    }
+    
+    navigationStore.setSelectedItem(item);
+    
+    // Clear header state for main navigation items (including discover)
+    if (item !== 'discover') {
+      try {
+        import('@gsa-tts/graymatter-ui/stores/navigationStore').then(({ selectedSubNavItemTitle }) => {
+          // Clear the store value immediately
+          selectedSubNavItemTitle.set('');
+          if (typeof window !== 'undefined') {
+            sessionStorage.removeItem('subNav-selectedTitle');
+            sessionStorage.removeItem('subNav-selectedId');
+          }
+          
+          // Set default header from first submenu item after a short delay
+          setTimeout(() => {
+            const mainContent = document.getElementById('main-content');
+            if (mainContent) {
+              const firstSection = mainContent.querySelector('h2[id], h3[id], h4[id], h5[id], h6[id]');
+              if (firstSection && firstSection.textContent) {
+                const firstSectionTitle = firstSection.textContent.trim();
+                selectedSubNavItemTitle.set(firstSectionTitle);
+                if (typeof window !== 'undefined') {
+                  sessionStorage.setItem('subNav-selectedTitle', JSON.stringify(firstSectionTitle));
+                }
+              }
+            }
+          }, 200); // Delay to ensure page content is loaded
+        }).catch((err) => {
+          console.log('[MobileBottomNav] Error clearing header state:', err);
+        });
+      } catch (err) {
+        console.log('[MobileBottomNav] Import failed for clearing state:', err);
+      }
+    } else {
+      // Clear header state for Discover page
+      try {
+        import('@gsa-tts/graymatter-ui/stores/navigationStore').then(({ selectedSubNavItemTitle }) => {
+          selectedSubNavItemTitle.set('');
+          if (typeof window !== 'undefined') {
+            sessionStorage.removeItem('subNav-selectedTitle');
+            sessionStorage.removeItem('subNav-selectedId');
+          }
+        }).catch((err) => {
+          console.log('[MobileBottomNav] Error clearing header state for Discover:', err);
+        });
+      } catch (err) {
+        console.log('[MobileBottomNav] Import failed for clearing Discover state:', err);
+      }
+    }
+    
+    onNavItemClick?.({ item, expanded: false });
+  }
+</script>
+
+<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)}
+      part="nav-item"
+    >
+      <div class="icon">
+        <svelte:component 
+          this={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,14 @@
+<svelte:options customElement={{
+  tag: 'graymatter-mobile-bottom-nav'
+}} />
+
+<script lang="ts">
+  import MobileBottomNav from './MobileBottomNav.svelte';
+
+  // Props for the web component
+  let { onNavItemClick } = $props();
+</script>
+
+<MobileBottomNav
+  {onNavItemClick}
+/>

package/src/components/MobileSideMenu.svelte

@@ -0,0 +1,225 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { selectedItem, isExpanded, navigationStore } from '../stores/navigationStore.js';
+  import Logo from './Logo.svelte';
+  import CloseIcon from './icons/CloseIcon.svelte';
+
+  let sideMenuElement: HTMLDivElement;
+  let pendingMobileHash: string | null = null;
+
+  function handleMobileAnchorNavigate(event: Event) {
+    const customEvent = event as CustomEvent;
+    pendingMobileHash = customEvent.detail.hash;
+    closeMobileMenu();
+    // Scroll immediately without delay
+    if (pendingMobileHash) {
+      const el = document.getElementById(pendingMobileHash);
+      if (el) {
+        // Check if the anchor exists in mobile content
+        const mobileContent = document.getElementById('main-content-mobile');
+        const mobileAnchor = mobileContent ? mobileContent.querySelector(`[id="${pendingMobileHash}"]`) : null;
+        
+        if (mobileAnchor && mobileContent) {
+          // For mobile: show section title in both header and content
+          const rect = mobileAnchor.getBoundingClientRect();
+          const mobileRect = mobileContent.getBoundingClientRect();
+          const scrollTop = mobileContent.scrollTop + rect.top - mobileRect.top;
+          mobileContent.scrollTo({ top: scrollTop, behavior: 'auto' });
+          
+          // Update header after scroll completes
+          setTimeout(() => {
+            window.dispatchEvent(new CustomEvent('sectionVisible', { 
+              detail: { 
+                title: mobileAnchor.textContent?.trim(),
+                id: mobileAnchor.id 
+              } 
+            }));
+          }, 100);
+        } else {
+          // Fallback to desktop content
+          let scrollableParent = el.parentElement;
+          while (scrollableParent && scrollableParent !== document.body) {
+            const style = window.getComputedStyle(scrollableParent);
+            if (style.overflowY === 'auto' || style.overflowY === 'scroll') {
+              break;
+            }
+            scrollableParent = scrollableParent.parentElement;
+          }
+          
+          if (scrollableParent && scrollableParent !== document.body) {
+            const desktopMain = document.getElementById('main-content');
+            if (desktopMain) {
+              el.scrollIntoView({ behavior: 'auto', block: 'start' });
+              setTimeout(() => {
+                window.dispatchEvent(new CustomEvent('sectionVisible', { 
+                  detail: { 
+                    title: el.textContent?.trim(),
+                    id: el.id 
+                  } 
+                }));
+              }, 100);
+            } else {
+              el.scrollIntoView({ behavior: 'auto', block: 'start' });
+            }
+          } else {
+            el.scrollIntoView({ behavior: 'auto', block: 'start' });
+          }
+        }
+      }
+      pendingMobileHash = null;
+    }
+  }
+
+  onMount(() => {
+    // Listen for the custom event globally
+    window.addEventListener('mobileAnchorNavigate', handleMobileAnchorNavigate);
+    
+    const handleCloseMobileMenu = () => {
+      closeMobileMenu();
+    };
+    window.addEventListener('closeMobileMenu', handleCloseMobileMenu);
+    
+    const handleLayoutTransition = (event: Event) => {
+      const customEvent = event as CustomEvent;
+      const { isMobile } = customEvent.detail;
+      
+      if (isMobile) {
+        navigationStore.setExpanded(false);
+      }
+    };
+    window.addEventListener('layoutTransition', handleLayoutTransition);
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && $isExpanded) {
+        closeMobileMenu();
+      }
+    };
+    window.addEventListener('keydown', handleEscape);
+    
+    return () => {
+      window.removeEventListener('mobileAnchorNavigate', handleMobileAnchorNavigate);
+      window.removeEventListener('closeMobileMenu', handleCloseMobileMenu);
+      window.removeEventListener('layoutTransition', handleLayoutTransition);
+      window.removeEventListener('keydown', handleEscape);
+    };
+  });
+
+  function closeMobileMenu() {
+    navigationStore.setExpanded(false);
+  }
+</script>
+
+<!-- Mobile overlay -->
+{#if $isExpanded}
+  <div 
+    class="mobile-overlay" 
+    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();
+    }}
+  ></div>
+{/if}
+
+<!-- Mobile side menu -->
+<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" part="close-button">
+      <CloseIcon />
+    </button>
+  </div>
+  
+  <div class="menu-content" part="menu-content">
+    <!-- Show submenu items if available and not on discover -->
+    {#if $selectedItem && $selectedItem !== 'discover'}
+      <div class="subnav-section" part="subnav-section">
+        <slot />
+      </div>
+    {:else}
+      <!-- Show message when no submenu is available -->
+      <div class="no-subnav-message" part="no-subnav-message">
+        <p>Select a section from the bottom navigation</p>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .no-subnav-message {
+    padding: var(--ai-size-16);
+    text-align: center;
+    color: var(--ai-color-steel-600);
+    font-size: var(--ai-size-14);
+  }
+  
+  .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>