@gsa-tts/graymatter-ui 0.3.1 → 0.3.3

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(),
       },
     };
   });