@gsa-tts/graymatter-ui 0.0.2 → 0.2.0

package/src/components/MobileTopNav.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+  import {
+    isMenuButtonDisabled,
+    navigationStore,
+    selectedSubNavItemTitle,
+  } from '../stores/navigationStore.js';
+  import Logo from './Logo.svelte';
+  import MenuIcon from './icons/MenuIcon.svelte';
+  import { onMount } from 'svelte';
+
+  export let onProfileClick: (() => void) | undefined = undefined;
+
+  onMount(() => {
+    // Listen for section visibility changes to update header
+    const handleSectionVisible = (event: Event) => {
+      if (window.innerWidth <= 640) {
+        return;
+      }
+      const customEvent = event as CustomEvent;
+      if (customEvent.detail && customEvent.detail.title) {
+        selectedSubNavItemTitle.set(customEvent.detail.title);
+        if (typeof window !== 'undefined') {
+          sessionStorage.setItem('subNav-selectedTitle', JSON.stringify(customEvent.detail.title));
+        }
+      }
+    };
+
+    // Set default header based on first submenu item
+    const setDefaultHeaderFromFirstSubmenu = () => {
+      if (typeof window === 'undefined') return;
+      
+      const mainContent = document.getElementById('main-content');
+      if (!mainContent) return;
+      
+      // Find the first heading with an ID (first submenu item)
+      const firstSection = mainContent.querySelector('h2[id], h3[id], h4[id], h5[id], h6[id]');
+      if (firstSection && firstSection.textContent) {
+        const firstSectionTitle = firstSection.textContent.trim();
+        
+        // Only set if no header is currently set
+        if (!$selectedSubNavItemTitle) {
+          selectedSubNavItemTitle.set(firstSectionTitle);
+          if (typeof window !== 'undefined') {
+            sessionStorage.setItem('subNav-selectedTitle', JSON.stringify(firstSectionTitle));
+          }
+        }
+      }
+    };
+
+    window.addEventListener('sectionVisible', handleSectionVisible);
+    
+    // Set default header on mount only if no stored title exists
+    const storedTitle = sessionStorage.getItem('subNav-selectedTitle');
+    if (!storedTitle || storedTitle === '""' || storedTitle === 'null') {
+      setTimeout(() => {
+        setDefaultHeaderFromFirstSubmenu();
+      }, 100);
+    }
+    
+    return () => {
+      window.removeEventListener('sectionVisible', handleSectionVisible);
+    };
+  });
+
+  function toggleMobileNav() {
+    navigationStore.toggleExpanded();
+  }
+
+  function handleProfileClick() {
+    onProfileClick?.();
+  }
+</script>
+
+<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"
+    part="menu-button"
+  >
+    <MenuIcon />
+  </button>
+
+  <div class="brand">
+    <Logo width={75} height={22} />
+    <span class="brand-text">{$selectedSubNavItemTitle || ''}</span>
+  </div>
+
+  <button
+    class="profile-button"
+    on:click={handleProfileClick}
+    aria-label="Open profile menu"
+    part="profile-button"
+  >
+    <div class="user-profile-container">
+      <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/components/NavigationInitializer.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { navigationStore, type NavigationItem } from '../stores/navigationStore.js';
+
+  export let item: NavigationItem;
+  export let autoExpand: boolean = false;
+
+  onMount(() => {
+    if (item) {
+      navigationStore.setSelectedItem(item);
+      // Auto-expand for non-discover pages on desktop
+      if (autoExpand && item !== 'discover' && typeof window !== 'undefined' && window.innerWidth > 640) {
+        navigationStore.setExpanded(true);
+      }
+    }
+  });
+</script>
+
+<!-- This component is invisible and only handles navigation initialization -->

package/src/components/icons/ApiIcon.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  export let isSelected = false;
+</script>
+
+<svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  width="24" 
+  height="24" 
+  viewBox="0 0 24 24" 
+  fill="none"
+>
+  {#if isSelected}
+    <!-- Selected state - black outline with filled center -->
+    <rect x="4.41699" y="4.62451" width="15.1664" height="15.1664" rx="1.75" stroke="black" stroke-width="1.5"/>
+    <g>
+      <path d="M9.5 3.66664V2" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M3.66664 14.4998L2 14.4998" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M22.0001 14.4998L20.3335 14.4998" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M9.5 21.9999V20.3333" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M12.0005 3.66664V2" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M3.66664 12.0005L2 12.0005" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M22.0001 12.0005L20.3335 12.0005" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M12.0005 21.9999V20.3333" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M14.4995 3.66664V2" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M3.66664 9.5L2 9.5" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M22.0001 9.5L20.3335 9.5" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M14.4995 21.9999V20.3333" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+    </g>
+    <path d="M10.5 8.52856H13.7559C14.7224 8.52856 15.5059 9.31207 15.5059 10.2786V13.5344C15.5059 14.5009 14.7224 15.2844 13.7559 15.2844H10.5C9.5335 15.2844 8.75 14.5009 8.75 13.5344V10.2786C8.75 9.31207 9.5335 8.52856 10.5 8.52856Z" fill="black" stroke="black" stroke-width="1.5"/>
+  {:else}
+    <!-- Default state - gray outline -->
+    <rect x="4.41699" y="4.62451" width="15.1664" height="15.1664" rx="1.75" stroke="#585C63" stroke-width="1.5"/>
+    <g>
+      <path d="M9.5 3.66664V2" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M3.66664 14.4995L2 14.4995" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M22.0001 14.4995L20.3335 14.4995" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M9.5 21.9999V20.3333" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M12.0005 3.66664V2" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M3.66664 12.0002L2 12.0002" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M22.0001 12.0002L20.3335 12.0002" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M12.0005 21.9999V20.3333" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M14.4995 3.66664V2" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M3.66664 9.49976L2 9.49976" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M22.0001 9.49976L20.3335 9.49976" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
+      <path d="M14.4995 21.9999V20.3333" stroke="#585C63" stroke-width="1.5" stroke-linecap="round"/>
+    </g>
+    <rect x="8.52881" y="8.52856" width="6.75594" height="6.75594" rx="1.75" stroke="#585C63" stroke-width="1.5"/>
+  {/if}
+</svg>

package/src/components/icons/ChatIcon.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  export let isSelected = false;
+</script>
+
+<svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  width="24" 
+  height="24" 
+  viewBox="0 0 24 24" 
+  fill="none"
+>
+  {#if isSelected}
+    <!-- Selected state - black filled -->
+    <path 
+      fill-rule="evenodd" 
+      clip-rule="evenodd" 
+      d="M17.0508 3C19.6009 3.00039 21.6688 5.06802 21.6689 7.61816V13.2832C21.6688 15.8333 19.6009 17.901 17.0508 17.9014H13.2686L9.23926 21.7168C8.58852 22.3323 7.5166 21.8705 7.5166 20.9746V17.8984C5.01299 17.8445 3.00011 15.7997 3 13.2832V7.61816C3.00012 5.06785 5.06785 3.00012 7.61816 3H17.0508Z" 
+      fill="black"
+    />
+  {:else}
+    <!-- Default state - gray -->
+    <path 
+      d="M17.0508 3C19.6009 3.00039 21.6688 5.06802 21.6689 7.61816V13.2832C21.6688 15.8333 19.6009 17.901 17.0508 17.9014H13.2686L9.23926 21.7168C8.58852 22.3323 7.5166 21.8705 7.5166 20.9746V17.8984C5.01299 17.8445 3.00011 15.7997 3 13.2832V7.61816C3.00012 5.06785 5.06785 3.00012 7.61816 3H17.0508ZM7.61816 4.45898C5.87327 4.4591 4.4591 5.87327 4.45898 7.61816V13.2832C4.4591 15.0281 5.87327 16.4432 7.61816 16.4434L8.24609 16.4424C8.64868 16.4424 8.97539 16.7693 8.97559 17.1719V19.958L12.4775 16.6426C12.6186 16.5091 12.7994 16.4443 12.9795 16.4443V16.4434H17.0508C18.7954 16.443 20.2099 15.0279 20.21 13.2832V7.61816C20.2098 5.87344 18.7954 4.45938 17.0508 4.45898H7.61816Z"
+      fill="#585C63"
+    />
+  {/if}
+</svg>

package/src/components/icons/CloseIcon.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+</script>
+
+<svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  width="24" 
+  height="24" 
+  viewBox="0 0 24 24" 
+  fill="none"
+>
+  <path 
+    d="M6 18L18 6M6 6L18 18" 
+    stroke="#585C63" 
+    stroke-width="1.5" 
+    stroke-linecap="round" 
+    stroke-linejoin="round"
+  />
+</svg>

package/src/components/icons/ConsoleIcon.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  export let isSelected = false;
+</script>
+
+<svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  width="24" 
+  height="24" 
+  viewBox="0 0 24 24" 
+  fill="none"
+>
+  {#if isSelected}
+    <!-- Selected state - black filled bars -->
+    <rect x="2.75" y="6.02856" width="3.7459" height="12.9262" fill="black" stroke="black" stroke-width="1.5"/>
+    <rect x="9.96338" y="9.96313" width="3.7459" height="8.9918" fill="black" stroke="black" stroke-width="1.5"/>
+    <rect x="17.1763" y="2.75" width="3.7459" height="16.2049" fill="black" stroke="black" stroke-width="1.5"/>
+    <path d="M2.32764 22H21.344" stroke="black" stroke-width="1.5" stroke-linecap="square"/>
+  {:else}
+    <!-- Default state - gray -->
+    <rect x="2.75" y="6.02856" width="3.7459" height="12.9262" stroke="#585C63" stroke-width="1.5"/>
+    <rect x="9.96338" y="9.96313" width="3.7459" height="8.9918" stroke="#585C63" stroke-width="1.5"/>
+    <rect x="17.1763" y="2.75" width="3.7459" height="16.2049" stroke="#585C63" stroke-width="1.5"/>
+    <path d="M2.32764 22H21.344" stroke="#585C63" stroke-width="1.5" stroke-linecap="square"/>
+  {/if}
+</svg>

package/src/components/icons/DiscoverIcon.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  export let isSelected = false;
+</script>
+
+<svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  width="24" 
+  height="24" 
+  viewBox="0 0 24 24" 
+  fill="none"
+>
+  {#if isSelected}
+    <!-- Selected state - black filled -->
+    <path 
+      fill-rule="evenodd" 
+      clip-rule="evenodd" 
+      d="M10.7883 3.2108C11.2367 2.13286 12.7637 2.13286 13.212 3.2108L15.294 8.21652L20.6981 8.64976C21.8619 8.74306 22.3337 10.1953 21.4471 10.9549L17.3298 14.4818L18.5877 19.7553C18.8585 20.8909 17.6232 21.7884 16.6268 21.1799L12.0002 18.354L7.37353 21.1799C6.37721 21.7884 5.14182 20.8909 5.4127 19.7553L6.67062 14.4818L2.55328 10.9549C1.66664 10.1953 2.13851 8.74306 3.30224 8.64976L8.70633 8.21652L10.7883 3.2108Z" 
+      fill="black"
+    />
+  {:else}
+    <!-- Default state - gray -->
+    <path 
+      d="M11.4807 3.49883C11.6729 3.03685 12.3273 3.03685 12.5195 3.49883L14.6454 8.61028C14.7264 8.80504 14.9096 8.93811 15.1199 8.95497L20.6381 9.39736C21.1369 9.43735 21.3391 10.0598 20.9591 10.3853L16.7548 13.9867C16.5946 14.1239 16.5246 14.3392 16.5736 14.5444L17.858 19.9293C17.9741 20.416 17.4447 20.8007 17.0177 20.5398L12.2933 17.6542C12.1133 17.5443 11.8869 17.5443 11.7069 17.6542L6.98251 20.5398C6.55551 20.8007 6.02606 20.416 6.14215 19.9293L7.42664 14.5444C7.47558 14.3392 7.40562 14.1239 7.24543 13.9867L3.04111 10.3853C2.66112 10.0598 2.86335 9.43735 3.36209 9.39736L8.88034 8.95497C9.0906 8.93811 9.27375 8.80504 9.35476 8.61028L11.4807 3.49883Z" 
+      stroke="#585C63" 
+      stroke-width="1.5" 
+      stroke-linecap="round" 
+      stroke-linejoin="round"
+    />
+  {/if}
+</svg>

package/src/components/icons/MenuIcon.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  export let isDisabled: boolean = false;
+  export let isHovered: boolean = false;
+  export let isOpen: boolean = false;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  {...$$restProps}
+>
+  {#if isDisabled}
+    <!-- Disabled state -->
+    <path d="M18.75 3H5.25C4.00736 3 3 4.09719 3 5.45064V7.90129V18.5207C3 19.8742 4.00736 20.9714 5.25 20.9714H18.75C19.9926 20.9714 21 19.8742 21 18.5207V7.90129V5.45064C21 4.09719 19.9926 3 18.75 3Z" stroke="#C7CDD6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M{isOpen ? '8.18018' : '9.18018'} {isOpen ? '5.45068' : '3.27222'}V{isOpen ? '18.5208' : '20.9203'}" stroke="#C7CDD6" stroke-width="1.5" />
+  {:else if isHovered}
+    {#if isOpen}
+      <!-- Hovered, nav open: arrow left -->
+      <path d="M12.25 18L6 12M6 12L12.25 6M6 12L21 12" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M3 3V21" stroke="black" stroke-width="1.5" stroke-linecap="round" />
+    {:else}
+      <!-- Hovered, nav collapsed: arrow right -->
+      <path d="M11.75 18.25L18 12M18 12L11.75 5.75M18 12L3 12" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M21 3V21" stroke="black" stroke-width="1.5" stroke-linecap="round" />
+    {/if}
+  {:else}
+    <!-- Default state -->
+    <path d="M18.75 3H5.25C4.00736 3 3 4.09719 3 5.45064V7.90129V18.5207C3 19.8742 4.00736 20.9714 5.25 20.9714H18.75C19.9926 20.9714 21 19.8742 21 18.5207V7.90129V5.45064C21 4.09719 19.9926 3 18.75 3Z" stroke="#585C63" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    {#if isOpen}
+      <path d="M8.18018 5.45068V18.5208" stroke="#585C63" stroke-width="1.5" />
+    {:else}
+      <path d="M9.18018 3.27222V20.9203" stroke="#585C63" stroke-width="1.5" />
+    {/if}
+  {/if}
+</svg>

package/src/components/icons/index.ts

@@ -0,0 +1,6 @@
+export { default as DiscoverIcon } from './DiscoverIcon.svelte';
+export { default as ChatIcon } from './ChatIcon.svelte';
+export { default as ConsoleIcon } from './ConsoleIcon.svelte';
+export { default as ApiIcon } from './ApiIcon.svelte';
+export { default as MenuIcon } from './MenuIcon.svelte';
+export { default as CloseIcon } from './CloseIcon.svelte';

package/src/components/index.ts

@@ -6,3 +6,12 @@ export { default as UsaSkipNav } from './UsaSkipNav.astro';
 // Svelte Components
 export { default as Logo } from './Logo.svelte';
 export { default as Button } from './Button.svelte';
+export { default as DesktopSideNav } from './DesktopSideNav.svelte';
+export { default as DesktopHeader } from './DesktopHeader.svelte';
+export { default as MobileTopNav } from './MobileTopNav.svelte';
+export { default as MobileBottomNav } from './MobileBottomNav.svelte';
+export { default as MobileSideMenu } from './MobileSideMenu.svelte';
+export { default as NavigationInitializer } from './NavigationInitializer.svelte';
+
+// Icon Components
+export * from './icons/index.js';

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/AppLayout.astro

@@ -12,7 +12,7 @@ const { componentOptions = {} } = Astro.props;
 const title = getPageTitle(Astro);
 ---
 
-<BaseLayout title={title}>
+<BaseLayout title={title} gtmID={Astro.props.gtmID}>
   <div class="app">
     <div class="banner">
       <UsaBanner isInverted={componentOptions.usaBanner?.theme === 'inverse'} />

package/src/layouts/BaseLayout.astro

@@ -3,6 +3,7 @@ import '../styles/base/global.css';
 import Head from '../components/Head.astro';
 import UsaSkipNav from '../components/UsaSkipNav.astro';
 import { getPageTitle } from '../helpers/meta';
+import GoogleTagManager from '../components/GoogleTagManager.astro';
 
 const title = getPageTitle(Astro);
 ---
@@ -12,6 +13,9 @@ const title = getPageTitle(Astro);
   <head>
     <meta charset="UTF-8" />
     <Head title={title} />
+    <slot name="analytics">
+      <GoogleTagManager gtmID={Astro.props.gtmID} />
+    </slot>
   </head>
   <body>
     <slot name="skip-nav">