@helloimjolopez-pathway/pathway-components 0.8.1 → 0.9.0

package/components/nav-shell/nav-shell.jsx

@@ -13,7 +13,7 @@
 import React, { useState, useEffect, useCallback } from "react";
 import TopNav, { DEFAULT_MODULES } from "../top-nav/top-nav.jsx";
 import { SideNav } from "../sidenav/sidenav.jsx";
-import { ModuleMark } from "../module-icon/module-icon.jsx";
+import { moduleHeader } from "../sidenav/accounting-side-nav.jsx";
 
 // ─── CONSTANTS ────────────────────────────────────────────────────────────────
 const TOPNAV_H = 60; // px — spec §9.3 rule 1
@@ -292,7 +292,7 @@ export function NavShell({
           hideCollapseButton={isTablet || isMobile}
           headerEnd={navHeaderEnd}
           footer={navFooter}
-          headerStart={appSwitcher && appSwitcher.moduleMark ? <ModuleMark {...appSwitcher.moduleMark} /> : null}
+          headerStart={moduleHeader(appSwitcher)}
           appSwitcher={appSwitcher ? { ...appSwitcher, activeId: appActive, onSelect: handleAppSelect,
             // Mobile opens the menu as a BottomSheet (Figma 40016737:141824).
             presentation: isMobile ? "sheet" : "popover" } : null}

package/components/sidenav/accounting-side-nav.jsx

@@ -29,7 +29,8 @@
  */
 import React, { useEffect, useState } from "react";
 import { SideNav } from "./sidenav.jsx";
-import { ModuleMark } from "../module-icon/module-icon.jsx";
+import { SideNavHeaderLabel } from "./sidenav.jsx";
+import { ModuleIcon } from "../module-icon/module-icon.jsx";
 
 // The Accounting module's applications, each with its own side nav. NavShell's
 // `app-switcher` and <pathway-accounting-sidenav> fall back to this when no
@@ -49,7 +50,8 @@ const APP_NAV_STANDARD = ["Dashboard", "Enter", "Manage", "View", "Reports", "Mo
 export const ACCOUNTING_APP_SWITCHER = {
   label: "Financials Home",
   icon: "apps",
-  // The module's mark in the SideNav header (Figma Module.Mark, Accounting).
+  // The module's label in the SideNav header: Figma SideNav.Header.Label with
+  // the Accounting icon chip (40016737:141726, 2026-11-12).
   moduleMark: { module: "accounting", label: "Financials" },
   // The Accounting TopNav is TopNav.Global with Search and Actions hidden
   // (Figma 40007879:18072): module switcher, org switcher and profile only.
@@ -66,6 +68,15 @@ export const ACCOUNTING_APP_SWITCHER = {
     { id: "purchasing-management", label: "Purchasing Management", navItems: accountingNav("pm", ["Dashboard", "Enter", "Manage", "Reports", "Modify", "Help"]) },
   ],
 };
+// The nav header's start slot for a module: SideNav.Header.Label with the
+// module's icon chip. NavShell uses the same, so the two headers never differ.
+export function moduleHeader(appSwitcher) {
+  const m = appSwitcher && appSwitcher.moduleMark;
+  if (!m) return null;
+  return <SideNavHeaderLabel label={m.label}
+    icon={m.module ? <ModuleIcon module={m.module} size={14} color="mono" /> : null} />;
+}
+
 const MOBILE_MAX = 767; // below 768, as NavShell's breakpoint
 
 function useIsMobile() {
@@ -107,7 +118,7 @@ export function AccountingSideNav({
 
   return (
     <SideNav key={current && current.id} items={items} activeId={active} onNavigate={navigate}
-      headerStart={appSwitcher.moduleMark ? <ModuleMark {...appSwitcher.moduleMark} /> : null}
+      headerStart={moduleHeader(appSwitcher)}
       appSwitcher={{ ...appSwitcher, activeId: current && current.id, onSelect: selectApp, presentation: mode }}
       {...rest} />
   );

package/components/sidenav/sidenav.jsx

@@ -747,6 +747,38 @@ export function AppSwitcher({ label: fallbackLabel, icon = "apps", home, apps =
   );
 }
 
+// ─── SideNavHeaderLabel ───────────────────────────────────────────────────────
+// Figma SideNav.Header.Label (40018260:4928), read 2026-11-12 from the
+// Accounting Module Nav Shell (40016737:141726). The label at the start of the
+// nav header, beside the collapse control. Text only for a pillar rail; with
+// `icon`, the module's icon chip sits before the name (a module rail, such as
+// Accounting's Financials).
+//   IconChip  28, CornerRadius/Base, Fill/Static/Brand/Strong, clips
+//     icon    the module glyph at 14, Fill/Static/Neutral/Mono
+//   label     Heading/Local/Base/Semibold: 14 / 600 / 18 / 0.3,
+//             Foreground/Static/Neutral/Strong, truncates; gap Gap/XXTight
+//   width     160 in Figma: here it fills the row up to the collapse control
+export function SideNavHeaderLabel({ label, icon = null }) {
+  return (
+    <span style={{ display: "flex", alignItems: "center", minWidth: 0, flex: 1,
+      gap: "var(--semantic-layout-units-gap-xxtight)" }}>
+      {icon && (
+        <span aria-hidden="true" style={{ width: 28, height: 28, flexShrink: 0, overflow: "hidden",
+          display: "inline-flex", alignItems: "center", justifyContent: "center",
+          borderRadius: "var(--semantic-layout-units-cornerradius-base)",
+          background: c("fill-static-brand-strong"), color: c("fill-static-neutral-mono") }}>
+          {icon}
+        </span>
+      )}
+      <span style={{ flex: 1, minWidth: 0, fontFamily: "var(--semantic-type-family-brand)",
+        fontWeight: "var(--semantic-type-weight-semibold)", fontSize: "var(--semantic-type-font-size-s)",
+        lineHeight: "var(--semantic-type-line-height-s-tight)", letterSpacing: "var(--semantic-type-letter-spacing-spacious)",
+        color: c("foreground-static-neutral-strong"),
+        whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{label}</span>
+    </span>
+  );
+}
+
 // ─── CollapseButton ───────────────────────────────────────────────────────────
 // Redesigned in Figma (2026-05-12): now uses Slot.RowStart (Module.Mark icon)
 // + Slot.RowEnd (Action Icon). The action icon uses Foreground/Action/Secondary/Rest