@gsa-tts/graymatter-ui 0.3.2 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -54,8 +54,8 @@
     "typescript": "5.7.3",
     "vite": "^6.3.5",
     "vitest": "^3.0.7",
-    "@gsa-tts/graymatter-typescript-config": "0.0.1",
-    "@gsa-tts/graymatter-eslint": "0.0.1",
+    "@gsa-tts/graymatter-eslint": "0.0.2",
+    "@gsa-tts/graymatter-typescript-config": "0.0.2",
     "@gsa-tts/graymatter-vitest-config": "0.0.1"
   },
   "dependencies": {

package/src/components/DesktopSideNav.svelte

@@ -21,7 +21,6 @@
   import ProfileMenu from './ProfileMenu.svelte';
   import { getAppUrls } from '../utils/getAppUrls';
   // import HelpIcon from './icons/HelpIcon.svelte';
-  const urls = getAppUrls();
 
   const {
     ssrSelectedItem = undefined,
@@ -36,6 +35,12 @@
     discoverUrl,
   } = $props();
 
+  // Only call getAppUrls if not all URLs are provided via props
+  const urls =
+    apiUrl && chatUrl && consoleUrl && discoverUrl
+      ? { api: '#', chat: '#', console: '#', discover: '#' }
+      : getAppUrls();
+
   let hydrated = false;
   let navContainer: HTMLDivElement;
   let hoveredItem = $state<string | null>(null);
@@ -47,6 +52,9 @@
   let consoleNavRef = $state<HTMLAnchorElement | null>(null);
   let apiNavRef = $state<HTMLAnchorElement | null>(null);
 
+  // Event system for external control
+  let eventListenerCleanup: (() => void) | null = null;
+
   function ssrOrHydrated<T>(hydratedValue: T, ssrValue: T): T {
     return hydrated ? hydratedValue : ssrValue;
   }
@@ -134,9 +142,40 @@
       };
       window.addEventListener('keydown', handleEscape);
 
+      // Custom event system for external control
+      const handleDesktopNavControlEvent = (event: CustomEvent) => {
+        const { action, isOpen: eventIsOpen } = event.detail;
+
+        if (action === 'toggle') {
+          navigationStore.toggleExpanded();
+        } else if (action === 'open') {
+          navigationStore.setExpanded(true);
+        } else if (action === 'close') {
+          navigationStore.setExpanded(false);
+        } else if (action === 'set' && typeof eventIsOpen === 'boolean') {
+          navigationStore.setExpanded(eventIsOpen);
+        }
+      };
+
+      // Listen for custom desktop navigation control events
+      window.addEventListener(
+        'graymatter-desktop-nav-control',
+        handleDesktopNavControlEvent
+      );
+
+      eventListenerCleanup = () => {
+        window.removeEventListener(
+          'graymatter-desktop-nav-control',
+          handleDesktopNavControlEvent
+        );
+      };
+
       return () => {
         window.removeEventListener('layoutTransition', handleLayoutTransition);
         window.removeEventListener('keydown', handleEscape);
+        if (eventListenerCleanup) {
+          eventListenerCleanup();
+        }
       };
     }
   });
@@ -255,6 +294,7 @@
   class:expanded={sideNavExpanded()}
   bind:this={navContainer}
   part="side-nav-container"
+  data-testid="side-nav-container"
 >
   <div class="nav-content" part="nav-content">
     <div class="nav-main" part="nav-main">

package/src/components/MobileBottomNav.svelte

@@ -27,7 +27,11 @@
     discoverUrl?: string;
   } = $props();
 
-  const urls = getAppUrls();
+  // Only call getAppUrls if not all URLs are provided via props
+  const urls =
+    apiUrl && chatUrl && consoleUrl && discoverUrl
+      ? { api: '#', chat: '#', console: '#', discover: '#' }
+      : getAppUrls();
 
   const navItems = [
     {

package/src/components/{UsaBanner.astro → UsaBanner.svelte}

@@ -1,20 +1,24 @@
----
-import { getUrlFromBase } from '@gsa-tts/graymatter-ui/helpers/url.js';
-const { isInverted = false, maxWidth = 'none' } = Astro.props as {
-  isInverted?: boolean;
-  maxWidth?: 'none' | 'widescreen';
-};
+<script lang="ts">
+  import { getUrlFromBase } from '@gsa-tts/graymatter-ui/helpers/url.js';
 
-const sizeMap: Record<'widescreen' | 'none', string> = {
-  none: 'ai-maxw-none',
-  widescreen: 'ai-maxw-widescreen',
-};
+  interface Props {
+    isInverted?: boolean;
+    maxWidth?: 'none' | 'widescreen';
+  }
+
+  let { isInverted = false, maxWidth = 'none' }: Props = $props();
+
+  const sizeMap: Record<'widescreen' | 'none', string> = {
+    none: 'ai-maxw-none',
+    widescreen: 'ai-maxw-widescreen',
+  };
 
-const mappedSize = sizeMap[maxWidth] || sizeMap.none;
----
+  const mappedSize = sizeMap[maxWidth] || sizeMap.none;
+</script>
 
 <section
-  class={`usa-banner site-banner ${isInverted ? 'inverted' : ''}`}
+  class="usa-banner site-banner"
+  class:inverted={isInverted}
   aria-label="Official website of the United States government"
 >
   <div class="usa-accordion">
@@ -22,43 +26,42 @@ const mappedSize = sizeMap[maxWidth] || sizeMap.none;
       class="usa-banner__header ai-banner__header"
       aria-label="USA banner"
     >
-      <div class=`usa-banner__inner ${mappedSize}`>
+      <div class="usa-banner__inner {mappedSize}">
         <div class="grid-col-auto">
           <img
             aria-hidden="true"
             class="usa-banner__header-flag"
-            src=`${getUrlFromBase('uswds/img/us_flag_small.png')}`
+            src={getUrlFromBase('uswds/img/us_flag_small.png')}
             alt=""
           />
         </div>
         <div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
-          <p class={'usa-banner__header-text ai-banner__header-text'}>
+          <p class="usa-banner__header-text ai-banner__header-text">
             An official website of the United States government
           </p>
-          <p class={'usa-banner__header-action ai-banner__header-action'}>
-            Here’s how you know
+          <p class="usa-banner__header-action ai-banner__header-action">
+            Here's how you know
           </p>
         </div>
         <button
           type="button"
-          class={'usa-accordion__button usa-banner__button ai-banner__button'}
+          class="usa-accordion__button usa-banner__button ai-banner__button"
           aria-expanded="false"
           aria-controls="gov-banner-default"
         >
-          <span class="usa-banner__button-text">Here’s how you know</span>
+          <span class="usa-banner__button-text">Here's how you know</span>
         </button>
       </div>
     </header>
     <div
-      class={`usa-banner__content usa-accordion__content ai-banner__content ${mappedSize}`}
+      class="usa-banner__content usa-accordion__content ai-banner__content {mappedSize}"
       id="gov-banner-default"
     >
       <div class="grid-row grid-gap-lg">
         <div class="usa-banner__guidance tablet:grid-col-6">
           <img
             class="usa-banner__icon ai-banner__icon usa-media-block__img"
-            src=`${getUrlFromBase('uswds/img/icon-dot-gov.svg')}`
-            role="img"
+            src={getUrlFromBase('uswds/img/icon-dot-gov.svg')}
             alt=""
             aria-hidden="true"
           />
@@ -73,8 +76,7 @@ const mappedSize = sizeMap[maxWidth] || sizeMap.none;
         <div class="usa-banner__guidance tablet:grid-col-6">
           <img
             class="usa-banner__icon ai-banner__icon usa-media-block__img"
-            src=`${getUrlFromBase('uswds/img/icon-https.svg')}`
-            role="img"
+            src={getUrlFromBase('uswds/img/icon-https.svg')}
             alt=""
             aria-hidden="true"
           />
@@ -82,8 +84,8 @@ const mappedSize = sizeMap[maxWidth] || sizeMap.none;
             <p>
               <strong>Secure .gov websites use HTTPS</strong><br />A
               <strong>lock</strong> (
-              <span class="icon-lock"
-                ><svg
+              <span class="icon-lock">
+                <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="52"
                   height="64"
@@ -94,16 +96,16 @@ const mappedSize = sizeMap[maxWidth] || sizeMap.none;
                   focusable="false"
                 >
                   <title id="banner-lock-title-default">Lock</title>
-                  <desc id="banner-lock-description-default"
-                    >Locked padlock icon</desc
-                  >
+                  <desc id="banner-lock-description-default">
+                    Locked padlock icon
+                  </desc>
                   <path
                     fill="#000000"
                     fill-rule="evenodd"
                     d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
                   ></path>
                 </svg>
-              </span>) or <strong>https://</strong> means you’ve safely connected
+              </span>) or <strong>https://</strong> means you've safely connected
               to the .gov website. Share sensitive information only on official,
               secure websites.
             </p>

package/src/components/index.ts

@@ -1,8 +1,8 @@
 // Astro Components
 export { default as Head } from './Head.astro';
-export { default as UsaBanner } from './UsaBanner.astro';
 
 // Svelte Components
+export { default as UsaBanner } from './UsaBanner.svelte';
 export { default as Logo } from './Logo.svelte';
 export { default as Button } from './Button.svelte';
 export { default as DesktopSideNav } from './DesktopSideNav.svelte';

package/src/index.ts

@@ -5,6 +5,9 @@ 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 * from './utils/navigationControl';
+
 export {
   Button,
   DesktopHeader,

package/src/styles/components/heroCards.css

@@ -65,16 +65,10 @@
   }
 
   .ai-hero-card__title {
-    font-size: var(--ai-size-24);
+    font-size: var(--ai-size-32);
   }
 
   .ai-hero-card__content {
     order: 1;
   }
 }
-
-@media (--ai-size-breakpoint-desktop-lg) {
-  .ai-hero-card__title {
-    font-size: var(--ai-size-32);
-  }
-}

package/src/utils/navigationControl.ts

@@ -0,0 +1,78 @@
+/**
+ * Utility functions for controlling the DesktopSideNav component externally
+ * This allows external apps to control the desktop navigation state without direct prop access
+ */
+
+export interface DesktopNavControlEventDetail {
+  action: 'toggle' | 'open' | 'close' | 'set';
+  isOpen?: boolean;
+}
+
+/**
+ * Dispatches a custom event to control the DesktopSideNav component
+ * @param action - The action to perform ('toggle', 'open', 'close', or 'set')
+ * @param isOpen - Required when action is 'set', specifies the desired state
+ */
+export function controlDesktopNavigation(
+  action: 'toggle' | 'open' | 'close',
+  isOpen?: never
+): void;
+export function controlDesktopNavigation(action: 'set', isOpen: boolean): void;
+export function controlDesktopNavigation(
+  action: DesktopNavControlEventDetail['action'],
+  isOpen?: boolean
+): void {
+  if (typeof window === 'undefined') {
+    console.warn(
+      '[DesktopNavControl] Cannot control desktop navigation on server side'
+    );
+    return;
+  }
+
+  if (action === 'set' && typeof isOpen !== 'boolean') {
+    console.error(
+      '[DesktopNavControl] isOpen parameter is required when action is "set"'
+    );
+    return;
+  }
+
+  const event = new CustomEvent<DesktopNavControlEventDetail>(
+    'graymatter-desktop-nav-control',
+    {
+      detail: { action, isOpen },
+      bubbles: true,
+      cancelable: false,
+    }
+  );
+
+  window.dispatchEvent(event);
+}
+
+/**
+ * Toggle the desktop navigation state
+ */
+export function toggleNavigation(): void {
+  controlDesktopNavigation('toggle');
+}
+
+/**
+ * Open the desktop navigation
+ */
+export function openNavigation(): void {
+  controlDesktopNavigation('open');
+}
+
+/**
+ * Close the desktop navigation
+ */
+export function closeNavigation(): void {
+  controlDesktopNavigation('close');
+}
+
+/**
+ * Set the desktop navigation to a specific state
+ * @param isOpen - The desired desktop navigation state
+ */
+export function setNavigationState(isOpen: boolean): void {
+  controlDesktopNavigation('set', isOpen);
+}

package/src/utils/setupMocks.ts

@@ -1,13 +1,18 @@
 import { vi } from 'vitest';
-import { writable } from 'svelte/store';
+import { writable, derived } from 'svelte/store';
 
 export function setupCommonMocks() {
   // navigationStore.js mock
   vi.mock('../stores/navigationStore.js', () => {
     const isExpanded = writable(true);
     const selectedItem = writable('console');
-    const isMenuButtonDisabled = writable(false);
     const selectedSubNavItemTitle = writable('');
+
+    const isMenuButtonDisabled = derived(
+      selectedItem,
+      $selectedItem => $selectedItem === 'discover'
+    );
+
     return {
       isExpanded,
       selectedItem,
@@ -16,6 +21,9 @@ export function setupCommonMocks() {
       navigationStore: {
         setSelectedItem: vi.fn(),
         setExpanded: (val: boolean) => isExpanded.set(val),
+        toggleExpanded: () =>
+          isExpanded.update((expanded: boolean) => !expanded),
+        handleLayoutTransition: vi.fn(),
       },
     };
   });