@gsa-tts/graymatter-ui 0.2.0 → 0.2.1

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
   "exports": {
     ".": "./index.ts",
+    "./graymatter-ui.js": "./dist/graymatter-ui.js",
+    "./graymatter-ui.umd.cjs": "./dist/graymatter-ui.umd.cjs",
     "./stores/navigationStore": "./src/stores/navigationStore.ts",
     "./stores/subNavReadyStore": "./src/stores/subNavReadyStore.ts",
     "./assets/*": "./assets/*",
@@ -62,7 +64,7 @@
     "@uswds/uswds": "3.12.0",
     "astro": "^5.11.0",
     "slugify": "^1.6.6",
-    "@gsa-tts/graymatter-style-tokens": "0.2.0"
+    "@gsa-tts/graymatter-style-tokens": "0.2.1"
   },
   "scripts": {
     "build": "gulp update && vite build",

package/src/components/DesktopSideNav.svelte

@@ -21,7 +21,7 @@
   import { getAppUrls } from '../utils/getAppUrls';
   const urls = getAppUrls();
   
-  const { ssrSelectedItem = undefined, onNavToggle = undefined, onNavItemClick = undefined, onProfileClick = undefined, children } = $props();
+  const { ssrSelectedItem = undefined, onNavToggle = undefined, onNavItemClick = undefined, onProfileClick = undefined, children, apiUrl, chatUrl, consoleUrl, discoverUrl } = $props();
 
   let hydrated = false;
   let navContainer: HTMLDivElement;
@@ -189,16 +189,18 @@
           onclick={toggleNav}
           onmouseenter={() => (menuButtonHovered = true)}
           onmouseleave={() => (menuButtonHovered = false)}
-          aria-label="Open navigation menu"
+          onfocus={() => (menuButtonHovered = true)}
+          onblur={() => (menuButtonHovered = false)}
+          aria-label={sideNavExpanded() ? 'Close navigation menu' : 'Open navigation menu'}
+          aria-expanded={sideNavExpanded() ? 'true' : 'false'}
         >
-          <span class="sr-only">Open navigation menu</span>
           <div class="icon-container">
             <div class="icon-wrapper">
               <MenuIcon
-              isHovered={menuBtnHovered()}
-              isDisabled={menuBtnDisabled()}
-              isOpen={menuBtnOpen()}
-            />
+                isHovered={menuBtnHovered()}
+                isDisabled={menuBtnDisabled()}
+                isOpen={menuBtnOpen()}
+              />
             </div>
           </div>
         </button>
@@ -206,16 +208,16 @@
 
       <div class="nav-items" part="nav-items">
         <a
-          href={urls.discover}
+          href={discoverUrl || urls.discover}
           class="nav-item discover-item"
           class:selected={isNavSelected('discover')}
           class:hovered={isNavHovered('discover')}
-          role="button"
-          tabindex="0"
           onclick={() => handleNavItemClick('discover')}
           onkeydown={e => handleKeyDown(e, 'discover')}
           onmouseenter={() => (hoveredItem = 'discover')}
           onmouseleave={() => (hoveredItem = null)}
+          aria-current={isNavSelected('discover') ? 'page' : undefined}
+          part="discover-item"
         >
           <div class="icon-container">
             <div class="icon-wrapper">
@@ -225,16 +227,16 @@
           <span class="nav-text">Discover</span>
         </a>
         <a
-          href={urls.chat}
+          href={chatUrl || urls.chat}
           class="nav-item chat-item"
           class:selected={isNavSelected('chat')}
           class:hovered={isNavHovered('chat')}
-          role="button"
-          tabindex="0"
           onclick={() => handleNavItemClick('chat')}
           onkeydown={e => handleKeyDown(e, 'chat')}
           onmouseenter={() => (hoveredItem = 'chat')}
           onmouseleave={() => (hoveredItem = null)}
+          aria-current={isNavSelected('chat') ? 'page' : undefined}
+          part="chat-item"
         >
           <div class="icon-container">
             <div class="icon-wrapper">
@@ -245,16 +247,16 @@
         </a>
 
         <a
-          href={urls.console}
+          href={consoleUrl || urls.console}
           class="nav-item console-item"
           class:selected={isNavSelected('console')}
           class:hovered={isNavHovered('console')}
-          role="button"
-          tabindex="0"
           onclick={() => handleNavItemClick('console')}
           onkeydown={e => handleKeyDown(e, 'console')}
           onmouseenter={() => (hoveredItem = 'console')}
           onmouseleave={() => (hoveredItem = null)}
+          aria-current={isNavSelected('console') ? 'page' : undefined}
+          part="console-item"
         >
           <div class="icon-container">
             <div class="icon-wrapper">
@@ -265,16 +267,16 @@
         </a>
 
         <a
-          href={urls.api}
+          href={apiUrl || urls.api}
           class="nav-item api-item"
           class:selected={isNavSelected('api')}
           class:hovered={isNavHovered('api')}
-          role="button"
-          tabindex="0"
           onclick={() => handleNavItemClick('api')}
           onkeydown={e => handleKeyDown(e, 'api')}
           onmouseenter={() => (hoveredItem = 'api')}
           onmouseleave={() => (hoveredItem = null)}
+          aria-current={isNavSelected('api') ? 'page' : undefined}
+          part="api-item"
         >
           <div class="icon-container">
             <div class="icon-wrapper">
@@ -342,18 +344,6 @@
     height: var(--ai-size-72);
   }
 
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
-    white-space: nowrap;
-  }
-
   .user-profile-container,
   .user-profile-icon {
     display: flex;

package/src/components/DesktopSideNav.webcomponent.svelte

@@ -6,7 +6,16 @@
   import DesktopSideNav from './DesktopSideNav.svelte';
 
   // Props for the web component
-  let { ssrSelectedItem, onNavToggle, onNavItemClick, onProfileClick } = $props();
+  let {
+    ssrSelectedItem,
+    onNavToggle,
+    onNavItemClick,
+    onProfileClick,
+    apiUrl,
+    chatUrl,
+    consoleUrl,
+    discoverUrl
+  } = $props();
 </script>
 
 <DesktopSideNav
@@ -14,6 +23,10 @@
   {onNavToggle}
   {onNavItemClick}
   {onProfileClick}
+  {apiUrl}
+  {chatUrl}
+  {consoleUrl}
+  {discoverUrl}
 >
   <slot />
 </DesktopSideNav>

package/src/components/MobileBottomNav.svelte

@@ -6,16 +6,23 @@
   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: 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 }
+    { 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) {    
@@ -84,12 +91,11 @@
       href={navItem.href}
       class="nav-item"
       class:active={$selectedItem === navItem.id}
-      on:click={() => handleNavItemClick(navItem.id)}
-      part="nav-item"
+      onclick={() => handleNavItemClick(navItem.id)}
+      part={`${slugify(navItem.id)}-item`}
     >
       <div class="icon">
-        <svelte:component 
-          this={navItem.icon} 
+        <navItem.icon
           isSelected={$selectedItem === navItem.id}
         />
       </div>

package/src/components/MobileBottomNav.webcomponent.svelte

@@ -6,9 +6,13 @@
   import MobileBottomNav from './MobileBottomNav.svelte';
 
   // Props for the web component
-  let { onNavItemClick } = $props();
+  let { onNavItemClick, apiUrl, chatUrl, consoleUrl, discoverUrl } = $props();
 </script>
 
 <MobileBottomNav
   {onNavItemClick}
+  {apiUrl}
+  {chatUrl}
+  {consoleUrl}
+  {discoverUrl}
 />

package/src/components/MobileTopNav.svelte

@@ -77,7 +77,7 @@
     class:disabled={$isMenuButtonDisabled}
     disabled={$isMenuButtonDisabled}
     on:click={toggleMobileNav}
-    aria-label="Toggle navigation menu"
+    aria-label="Open navigation menu"
     part="menu-button"
   >
     <MenuIcon />

package/src/layouts/GlobalAppLayout.astro

@@ -2,7 +2,6 @@
 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';
@@ -17,9 +16,6 @@ const title = getPageTitle(Astro);
 
 <BaseLayout title={title} gtmID={gtmID}>
   <div class="app">
-    <div class="banner">
-      <UsaBanner isInverted={componentOptions.usaBanner?.theme === 'inverse'} />
-    </div>
     <!-- Desktop Navigation -->
     <div class="layout-container">
       <nav aria-label="Main navigation">

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

@@ -33,9 +33,9 @@
 
 .logo-fixed-container {
   position: fixed;
-  top: var(--ai-size-40);
+  top: 1rem;
   left: var(--ai-size-88);
-  z-index: 500;
+  z-index: 10;
   background: transparent;
 }
 

package/src/utils/getAppUrls.ts

@@ -10,20 +10,17 @@ export function getAppUrls(envArg?: Record<string, string | undefined>) {
 
   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;
+  const apiUrl = env.PUBLIC_API_URL;
+  const discoverUrl = env.PUBLIC_DISCOVER_URL;
 
   warnIfMissing('chat', chatUrl);
   warnIfMissing('console', consoleUrl);
-  // warnIfMissing('api', api);
+  warnIfMissing('api', apiUrl);
 
   return {
     chat: chatUrl || fallback,
     console: consoleUrl || fallback,
-    api: '/api',
-    discover: '/discover',
+    api: apiUrl || '/api',
+    discover: discoverUrl || '/discover',
   };
 }

package/src/layouts/AppLayout.astro

@@ -1,88 +0,0 @@
----
-import BaseLayout from '@gsa-tts/graymatter-ui/layouts/BaseLayout.astro';
-import '../styles/base/global.css';
-import { getPageTitle } from '@gsa-tts/graymatter-ui/helpers';
-import PlatformFooter from '../components/PlatformFooter.astro';
-import AgencyHeader from '../components/AgencyHeader.astro';
-import Logo from '@gsa-tts/graymatter-ui/components/Logo.svelte';
-import UsaBanner from '../components/UsaBanner.astro';
-
-const { componentOptions = {} } = Astro.props;
-
-const title = getPageTitle(Astro);
----
-
-<BaseLayout title={title} gtmID={Astro.props.gtmID}>
-  <div class="app">
-    <div class="banner">
-      <UsaBanner isInverted={componentOptions.usaBanner?.theme === 'inverse'} />
-    </div>
-    <div class="sidebar">
-      <slot name="sidebar" />
-    </div>
-    <main id="main-content">
-      <slot />
-    </main>
-  </div>
-</BaseLayout>
-
-<style>
-  :root {
-    --ai-applayout-size-sidebar-spacing: var(--ai-size-8) var(--ai-size-32);
-    --ai-applayout-sidebar-background: var(--ai-color-steel-50);
-    --ai-applayout-sidebar-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.07) inset;
-  }
-
-  main {
-    padding: var(
-      --ai-applayout-size-content-spacing,
-      var(--ai-size-8) var(--ai-size-32)
-    );
-  }
-
-  .banner {
-    grid-column: 1 / -1;
-  }
-
-  .sidebar {
-    border-right: 1px solid var(--ai-color-steel-200);
-    background: var(--ai-applayout-sidebar-background);
-    box-shadow: var(--ai-applayout-sidebar-shadow);
-    padding: var(--ai-applayout-size-sidebar-spacing);
-  }
-
-  @media (--ai-size-breakpoint-tablet) {
-    :root {
-      --ai-applayout-size-sidebar-spacing: var(--ai-size-12) var(--ai-size-20);
-    }
-
-    body {
-      overflow-y: hidden;
-      height: 100%;
-    }
-
-    main {
-      padding: var(
-        --ai-applayout-size-content-spacing,
-        var(--ai-size-40) var(--ai-size-32)
-      );
-    }
-
-    .sidebar {
-      padding: var(--ai-applayout-size-sidebar-spacing);
-    }
-
-    main,
-    .sidebar {
-      height: 100%;
-      overflow-y: auto;
-    }
-
-    .app {
-      display: grid;
-      grid-template-columns: var(--ai-size-224) 1fr;
-      grid-template-rows: auto 1fr;
-      height: 100vh;
-    }
-  }
-</style>