@gsa-tts/graymatter-ui 0.0.2 → 0.2.0

package/src/stores/navigationStore.ts

@@ -0,0 +1,138 @@
+// Store for selected subnav item id and title (for all apps)
+import { writable, type Writable, derived } from 'svelte/store';
+
+export type NavigationItem = 'discover' | 'chat' | 'console' | 'api' | null;
+
+const browser = typeof window !== 'undefined';
+
+// Persistent subnav item id and title in sessionStorage
+function getSessionValue<T>(key: string, defaultValue: T): T {
+  if (browser && typeof sessionStorage !== 'undefined') {
+    const stored = sessionStorage.getItem(key);
+    if (stored !== null) {
+      try {
+        return JSON.parse(stored) as T;
+      } catch (e) {
+        console.warn(`Failed to parse stored value for ${key}:`, e);
+        return defaultValue;
+      }
+    }
+  }
+  return defaultValue;
+}
+
+function createSessionStore<T>(key: string, defaultValue: T): Writable<T> {
+  const initialValue = getSessionValue(key, defaultValue);
+  const store = writable<T>(initialValue);
+
+  if (browser) {
+    store.subscribe((value: T) => {
+      try {
+        sessionStorage.setItem(key, JSON.stringify(value));
+      } catch (e) {
+        console.warn(`Failed to persist ${key} to sessionStorage:`, e);
+      }
+    });
+  }
+
+  return store;
+}
+
+export const selectedSubNavItemId: Writable<string | null> = createSessionStore(
+  'subNav-selectedId',
+  null
+);
+export const selectedSubNavItemTitle: Writable<string | null> =
+  createSessionStore('subNav-selectedTitle', '');
+
+function getInitialValue<T>(key: string, defaultValue: T): T {
+  if (browser && typeof localStorage !== 'undefined') {
+    const stored = localStorage.getItem(key);
+    if (stored !== null) {
+      try {
+        return JSON.parse(stored) as T;
+      } catch (e) {
+        console.warn(`Failed to parse stored value for ${key}:`, e);
+        return defaultValue;
+      }
+    }
+  }
+  return defaultValue;
+}
+
+function createPersistentStore<T>(key: string, defaultValue: T): Writable<T> {
+  const initialValue = getInitialValue(key, defaultValue);
+  const store = writable<T>(initialValue);
+
+  if (browser) {
+    store.subscribe((value: T) => {
+      try {
+        localStorage.setItem(key, JSON.stringify(value));
+      } catch (e) {
+        console.warn(`Failed to persist ${key} to localStorage:`, e);
+      }
+    });
+  }
+
+  return store;
+}
+
+export const isExpanded: Writable<boolean> = createPersistentStore(
+  'globalSideNav-isExpanded',
+  false
+);
+export const selectedItem: Writable<NavigationItem> = createPersistentStore(
+  'globalSideNav-selectedItem',
+  null
+);
+
+// Derived store to determine if menu button should be disabled
+export const isMenuButtonDisabled = derived(
+  selectedItem,
+  $selectedItem => $selectedItem === 'discover'
+);
+
+export interface NavigationStore {
+  toggleExpanded: () => void;
+  setExpanded: (value: boolean) => void;
+  setSelectedItem: (item: NavigationItem) => void;
+  handleLayoutTransition: (isMobile: boolean) => void;
+}
+
+export const navigationStore: NavigationStore = {
+  toggleExpanded: (): void => {
+    isExpanded.update((expanded: boolean) => !expanded);
+  },
+
+  setExpanded: (value: boolean): void => {
+    isExpanded.set(value);
+  },
+
+  setSelectedItem: (item: NavigationItem): void => {
+    selectedItem.set(item);
+    if (item === 'discover') {
+      isExpanded.set(false);
+    } else {
+      // For non-discover items (API, Console, Chat), ALWAYS expand on desktop
+      if (browser && window.innerWidth > 640) {
+        isExpanded.set(true);
+      }
+    }
+  },
+
+  handleLayoutTransition: (isMobile: boolean): void => {
+    if (isMobile) {
+      isExpanded.set(false);
+    } else {
+      const currentItem = getInitialValue('globalSideNav-selectedItem', null);
+      if (currentItem && currentItem !== 'discover') {
+        console.log(
+          '[NavigationStore] Opening navigation for desktop (non-discover page)'
+        );
+        isExpanded.set(true);
+      } else {
+        isExpanded.set(false);
+      }
+    }
+  },
+};

package/src/stores/subNavReadyStore.ts

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const subNavReady = writable(false);

package/src/styles/base/global.css

@@ -1,4 +1,4 @@
-@layer designsystem, theme, buttons;
+@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);
@@ -6,3 +6,10 @@
 @import 'typography.css' layer(theme);
 @import '../utilities/layout.css' layer(theme);
 @import '../components/heroCards.css' layer(theme);
+@import '../components/globalAppNav.css' layer(appnav);
+@import '../components/globalAppLayout.css' layer(applayout);
+
+/* Ensure anchor targets are not hidden behind fixed header */
+[id] {
+  scroll-margin-top: 56px;
+}

package/src/styles/base/typography.css

@@ -9,43 +9,44 @@
 
 h1,
 .ai-heading-size-1 {
-  font-size: clamp(var(--ai-size-36), 5vw, var(--ai-size-48));
+  font-size: clamp(var(--ai-size-30), 5vw, var(--ai-size-32));
   font-weight: var(--ai-font-weight-semibold);
-  margin-bottom: var(--ai-size-24);
+  margin-bottom: var(--ai-size-20);
 }
 
 h2,
 .ai-heading-size-2 {
-  font-size: clamp(var(--ai-size-32), 5vw, var(--ai-size-36));
-  margin-bottom: var(--ai-size-20);
+  font-size: var(--ai-size-26);
+  font-weight: var(--ai-font-weight-semibold);
+  margin-bottom: var(--ai-size-16);
 }
 
 h3,
 .ai-heading-size-3 {
-  font-size: clamp(var(--ai-size-28), 5vw, var(--ai-size-32));
-  font-weight: var(--ai-font-weight-normal);
-  margin-bottom: var(--ai-size-18);
+  font-size: var(--ai-size-24);
+  font-weight: var(--ai-font-weight-semibold);
+  margin-bottom: var(--ai-size-16);
 }
 
 h4,
 .ai-heading-size-4 {
-  font-size: var(--ai-size-24);
-  font-weight: var(--ai-font-weight-normal);
-  margin-bottom: var(--ai-size-16);
+  font-size: var(--ai-size-22);
+  font-weight: var(--ai-font-weight-semibold);
+  margin-bottom: var(--ai-size-10);
 }
 
 h5,
 .ai-heading-size-5 {
   font-size: var(--ai-size-22);
   font-weight: var(--ai-font-weight-normal);
-  margin-bottom: var(--ai-size-12);
+  margin-bottom: var(--ai-size-10);
 }
 
 h6,
 .ai-heading-size-6 {
-  font-size: var(--ai-size-20);
-  font-weight: var(--ai-font-weight-normal);
-  margin-bottom: var(--ai-size-8);
+  font-size: var(--ai-size-18);
+  font-weight: var(--ai-font-weight-semibold);
+  margin-bottom: var(--ai-size-6);
 }
 
 pre {

package/src/styles/components/globalAppLayout.css

@@ -0,0 +1,73 @@
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.main-content-mobile {
+  flex: 1;
+  padding: var(--initial-main-top-padding, calc(3.5rem + 1rem)) 1rem
+    var(--initial-main-bottom-padding, calc(5rem + 1rem)) 1rem;
+  overflow-y: auto;
+  display: block;
+}
+
+.layout-container {
+  display: none;
+}
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.app main {
+  flex: 1;
+  padding: var(--initial-main-top-padding, calc(3.5rem + 1rem)) 1rem
+    var(--initial-main-bottom-padding, calc(5rem + 1rem)) 1rem;
+  overflow-y: auto;
+}
+
+.logo-fixed-container {
+  position: fixed;
+  top: var(--ai-size-40);
+  left: var(--ai-size-88);
+  z-index: 500;
+  background: transparent;
+}
+
+@media (--ai-size-breakpoint-tablet) {
+  .main-content-mobile {
+    display: none;
+  }
+  .layout-container {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    flex-direction: row;
+  }
+  .main-container {
+    flex: 1 1 0%;
+    min-width: 0;
+    position: relative;
+    z-index: var(--ai-layer-1);
+  }
+  .app main {
+    padding: var(--ai-size-40) var(--ai-size-32) var(--ai-size-8) 4.875rem;
+  }
+
+  :global(.side-nav-container.expanded) ~ .main-container main {
+    padding-top: var(--ai-size-8);
+  }
+  :global(.side-nav-container),
+  :global(.side-nav-container .expanded-content) {
+    transition: none;
+  }
+  :global(body) {
+    overflow-y: hidden;
+    height: 100%;
+  }
+}

package/src/styles/components/globalAppNav.css

@@ -0,0 +1,95 @@
+/* DesktopHeader styles */
+.global-header,
+graymatter-desktop-header::part(global-header) {
+  display: none;
+}
+
+/* MobileTopNav styles */
+.mobile-top-nav,
+graymatter-mobile-top-nav::part(mobile-top-nav) {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--ai-size-56);
+  padding: 0 var(--ai-size-16);
+  padding-top: env(safe-area-inset-top);
+  background: var(--ai-color-white);
+  border-bottom: 0.0625rem solid var(--ai-color-neutral-200);
+  z-index: var(--ai-layer-30);
+}
+
+/* MobileBottomNav styles */
+.mobile-bottom-nav,
+graymatter-mobile-bottom-nav::part(mobile-bottom-nav) {
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--ai-color-white);
+  border-top: 0.0625rem solid var(--ai-neutral-200);
+  height: 3.125rem;
+  padding-bottom: env(safe-area-inset-bottom);
+  z-index: var(--ai-layer-30);
+}
+
+/* MobileSideMenu styles */
+.mobile-overlay,
+graymatter-mobile-side-menu::part(mobile-overlay) {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #00000080;
+  z-index: var(--ai-layer-40);
+}
+
+.mobile-side-menu,
+graymatter-mobile-side-menu::part(mobile-side-menu) {
+  display: flex;
+}
+
+@media (--ai-size-breakpoint-tablet) {
+  .global-header,
+  graymatter-desktop-header::part(global-header) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    width: 100%;
+    height: var(--ai-size-56);
+    padding: var(--ai-size-12) var(--ai-size-16);
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    background: var(--ai-color-white);
+    z-index: var(--ai-layer-20);
+  }
+
+  .mobile-top-nav,
+  graymatter-mobile-top-nav::part(mobile-top-nav) {
+    display: none;
+  }
+
+  .mobile-bottom-nav,
+  graymatter-mobile-bottom-nav::part(mobile-bottom-nav) {
+    display: none;
+  }
+
+  .mobile-overlay,
+  graymatter-mobile-side-menu::part(mobile-overlay) {
+    display: none;
+  }
+
+  .mobile-side-menu,
+  graymatter-mobile-side-menu::part(mobile-side-menu) {
+    display: none;
+  }
+}

package/src/utils/getAppUrls.ts

@@ -0,0 +1,29 @@
+function warnIfMissing(name: string, value: string | undefined) {
+  if (!value) {
+    console.warn(`[getAppUrls] Environment variable for ${name} is missing!`);
+  }
+}
+
+export function getAppUrls(envArg?: Record<string, string | undefined>) {
+  const env = envArg || import.meta.env;
+  const fallback = '#';
+
+  const chatUrl = env.PUBLIC_CHAT_URL;
+  const consoleUrl = env.PUBLIC_CONSOLE_URL;
+  // NOTE: The Discover and API docs/pages are served as part of the Astro site app itself,
+  // so the API link typically points to a local route (e.g., /api) within the same deployment.
+  // We may not need to use the external FCS URLs for API here, since the content is bundled and deployed together with the site app.
+
+  // const apiUrl = env.PUBLIC_API_URL;
+
+  warnIfMissing('chat', chatUrl);
+  warnIfMissing('console', consoleUrl);
+  // warnIfMissing('api', api);
+
+  return {
+    chat: chatUrl || fallback,
+    console: consoleUrl || fallback,
+    api: '/api',
+    discover: '/discover',
+  };
+}

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './getAppUrls';

package/assets/images/gsai-logo-black.svg

@@ -1,18 +0,0 @@
-<svg width="105" height="33" viewBox="0 0 105 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2282_6725)">
-<mask id="mask0_2282_6725" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="105" height="33">
-<path d="M104.81 0H0V32.8249H104.81V0Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_2282_6725)">
-<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" fill="black"/>
-<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" fill="black"/>
-<path d="M104.809 0.478271H99.8516V32.3468H104.809V0.478271Z" fill="black"/>
-<path d="M76.2292 0.478271L62.7559 32.3536H68.1316L79.5287 5.39123H79.9874L91.3811 32.3536H96.7568L83.2835 0.478271H76.2292Z" fill="black"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_2282_6725">
-<rect width="105" height="33" fill="white"/>
-</clipPath>
-</defs>
-</svg>

package/assets/images/gsai-logo-white.svg

@@ -1,18 +0,0 @@
-<svg width="105" height="33" viewBox="0 0 105 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2282_6734)">
-<mask id="mask0_2282_6734" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="105" height="33">
-<path d="M104.81 0H0V32.8249H104.81V0Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_2282_6734)">
-<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" fill="white"/>
-<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" fill="white"/>
-<path d="M104.809 0.478271H99.8516V32.3468H104.809V0.478271Z" fill="white"/>
-<path d="M76.2292 0.478271L62.7559 32.3536H68.1316L79.5287 5.39123H79.9874L91.3811 32.3536H96.7568L83.2835 0.478271H76.2292Z" fill="white"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_2282_6734">
-<rect width="105" height="33" fill="white"/>
-</clipPath>
-</defs>
-</svg>