@helloimjolopez-pathway/pathway-components 0.3.0 → 0.3.2

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

@@ -8,9 +8,9 @@
  * a 240px nav, no item radius, a 4px stripe rounded at 4, a 20px glyph, a 22px
  * module mark, raw rgba hover fills, and a 56px NavHeader Figma does not draw.
  */
-import React from "react";
+import React, { useState } from "react";
 import { DemoChrome, mount } from "../_demo/harness.jsx";
-import { NavShell } from "./nav-shell.jsx";
+import { NavShell, ACCOUNTING_APP_SWITCHER } from "./nav-shell.jsx";
 import { PageTemplate } from "../page-template/page-template.jsx";
 import { NAV_SECTIONS } from "../../src/stories/Library/SideNav/sidenavDemoData.jsx";
 
@@ -25,14 +25,27 @@ const ORG = { id: "gcc", name: "Grace Community Church", campus: "Knoxville", in
 const USER = { name: "Jo Lopez", initials: "JL", email: "jo@gracecommunity.org" };
 
 function App() {
+  // The app switcher's on/off, the same switch as the web component's
+  // `app-switcher` attribute. It lives in the page so it works in every width.
+  const [appSwitcher, setAppSwitcher] = useState(false);
   return (
     <DemoChrome title="NavShell" widths={WIDTHS}
       blurb={"TopNav, SideNav and the page area composed into one application frame. " +
              "Desktop pushes the page with a collapsible nav, Tablet locks the 72px rail, " +
-             "Mobile opens the nav as an overlay from the hamburger."}>
+             "Mobile opens the nav as an overlay from the hamburger. Tick App switcher to turn on the Accounting app switcher."}>
       <NavShell activeModuleId="accounting" org={ORG} user={USER}
-        navSections={NAV_SECTIONS} activeNavId="balance_sheet" onNavigate={() => {}}>
+        navSections={NAV_SECTIONS} activeNavId="balance_sheet"
+        // NavShell tracks the current page and app itself. With the switcher on,
+        // each Accounting app brings its own side nav.
+        appSwitcher={appSwitcher ? ACCOUNTING_APP_SWITCHER : null}>
         <PageTemplate>
+          <label style={{ display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-tight)",
+            fontSize: Y("font-size-s"), lineHeight: Y("line-height-s-single"),
+            color: C("foreground-static-neutral-base"), cursor: "pointer" }}>
+            <input id="navshell-app-switcher" type="checkbox" checked={appSwitcher}
+              onChange={(e) => setAppSwitcher(e.target.checked)} />
+            App switcher (Accounting)
+          </label>
           <h1 style={{ margin: 0, fontSize: Y("font-size-xl"), lineHeight: Y("line-height-xl-single"),
             fontWeight: Y("weight-semibold"), color: C("foreground-static-neutral-bold") }}>
             Balance Sheet

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

@@ -75,17 +75,31 @@ function useBreakpoint() {
  *   defaultCollapsed boolean — initial desktop collapse state (default false)
  *   children         ReactNode — page content (renders inside Shell.Main)
  */
-// The Accounting module's apps, as Figma's Accounting.AppSwitcher lists them.
-// The web component falls back to this when `app-switcher` is on and no
-// `appSwitcher` property has been set.
+// The Accounting module's apps, as Figma's Accounting.AppSwitcher lists them,
+// each with its own side nav. The web component falls back to this when
+// `app-switcher` is on and no `appSwitcher` property has been set.
+//
+// Financials Home's nav is Figma's SideNav.Local.Accounting (40016737:141666),
+// icons included. Figma draws no other app's nav, so Accounts Payable,
+// Accounts Receivable and Bank Reconciliation use the item lists the widget
+// demo read from production (Bank Reconciliation takes Bank Account
+// Management's), on the same Figma icons.
+const accountingNav = (app, labels) => labels.map((l) => ({ id: `${app}-${l.toLowerCase().replace(/\s+/g, "-")}`, label: l, icon: ACCOUNTING_ICONS[l] }));
+const ACCOUNTING_ICONS = {
+  Dashboard: "space_dashboard", Enter: "input", Manage: "bookmark_manager", View: "visibility",
+  Reports: "insert_chart", Modify: "edit_square", Help: "help", Utilities: "tools_wrench",
+  "Security Setup": "security",
+};
+const APP_NAV_STANDARD = ["Dashboard", "Enter", "Manage", "View", "Reports", "Modify", "Utilities", "Help"];
 export const ACCOUNTING_APP_SWITCHER = {
   label: "Financials Home",
   icon: "apps",
-  home: { id: "financials-home", label: "Financials Home" },
+  home: { id: "financials-home", label: "Financials Home",
+    navItems: accountingNav("fh", ["Dashboard", "Enter", "Manage", "View", "Reports", "Modify", "Help", "Utilities", "Security Setup"]) },
   apps: [
-    { id: "accounts-payable", label: "Accounts Payable" },
-    { id: "accounts-receivable", label: "Accounts Receivable" },
-    { id: "bank-reconciliation", label: "Bank Reconciliation" },
+    { id: "accounts-payable",    label: "Accounts Payable",    navItems: accountingNav("ap", APP_NAV_STANDARD) },
+    { id: "accounts-receivable", label: "Accounts Receivable", navItems: accountingNav("ar", APP_NAV_STANDARD) },
+    { id: "bank-reconciliation", label: "Bank Reconciliation", navItems: accountingNav("br", APP_NAV_STANDARD) },
   ],
 };
 
@@ -132,6 +146,49 @@ export function NavShell({
   // opened with a 72 rail inside it and 178px of blank.
   const effectiveCollapsed = isTablet ? true : isMobile ? false : collapsed;
 
+  // ── Current page and current app ──────────────────────────────────────────
+  // Both follow their props when given, and otherwise NavShell tracks them
+  // itself, so a tap always moves the selection even when the host only
+  // listens to onNavigate (or does not listen at all). Before this the shell
+  // was purely controlled: a host that did not echo activeNavId back got a nav
+  // whose items looked dead.
+  const [navActive, setNavActive] = useState(activeNavId);
+  useEffect(() => { setNavActive(activeNavId); }, [activeNavId]);
+
+  const apps = appSwitcher ? [appSwitcher.home, ...(appSwitcher.apps || [])].filter(Boolean) : [];
+  const [appActive, setAppActive] = useState(appSwitcher && (appSwitcher.activeId ?? (appSwitcher.home && appSwitcher.home.id)));
+  useEffect(() => {
+    if (appSwitcher && appSwitcher.activeId !== undefined) setAppActive(appSwitcher.activeId);
+  }, [appSwitcher && appSwitcher.activeId]);
+  const currentApp = apps.find((a) => a.id === appActive);
+
+  // An app that carries its own nav replaces the shell's: choosing Accounts
+  // Payable shows Accounts Payable's items. Apps without one keep the shell's.
+  const appNav = currentApp && (currentApp.navItems || currentApp.navSections);
+  const sideItems    = appNav ? currentApp.navItems    : navItems;
+  const sideSections = appNav ? currentApp.navSections : navSections;
+  // Figma shows the app's Dashboard active on arrival, so when the current page
+  // is not one of this app's items, its first item is the active one.
+  const appIds = appNav
+    ? (currentApp.navItems || currentApp.navSections.flatMap((x) => x.items))
+        .flatMap((i) => [i.id, ...((i.children || []).map((c) => c.id))])
+    : null;
+  const sideActive = appIds && !appIds.includes(navActive) ? appIds[0] : navActive;
+
+  const handleNavigate = useCallback((id) => {
+    setNavActive(id);
+    onNavigate && onNavigate(id);
+  }, [onNavigate]);
+
+  const handleAppSelect = useCallback((id) => {
+    setAppActive(id);
+    appSwitcher && appSwitcher.onSelect && appSwitcher.onSelect(id);
+    // Land on the new app's first page (its Dashboard).
+    const next = apps.find((a) => a.id === id);
+    const first = next && (next.navItems ? next.navItems[0] : next.navSections && next.navSections[0] && next.navSections[0].items[0]);
+    if (first) handleNavigate(first.id);
+  }, [appSwitcher, apps, handleNavigate]);
+
   // Shell.Main margin-left: matches current SideNav width for push layout.
   // Mobile: no margin (SideNav is an overlay).
   const mainMarginLeft = isMobile
@@ -240,17 +297,19 @@ export function NavShell({
         }}
       >
         <SideNav
-          items={navItems}
-          sections={navSections}
-          activeId={activeNavId}
-          onNavigate={onNavigate}
+          // Remount per app so one app's open groups do not carry into the next.
+          key={appNav ? currentApp.id : "shell"}
+          items={sideItems}
+          sections={sideSections}
+          activeId={sideActive}
+          onNavigate={handleNavigate}
           collapsed={effectiveCollapsed}
           onCollapseChange={handleCollapseChange}
           // Mobile: the TopNav hamburger is the only toggle (NavHeader spec).
           hideCollapseButton={isTablet || isMobile}
           headerEnd={navHeaderEnd}
           footer={navFooter}
-          appSwitcher={appSwitcher}
+          appSwitcher={appSwitcher ? { ...appSwitcher, activeId: appActive, onSelect: handleAppSelect } : null}
         >
           {navChildren}
         </SideNav>

package/components/sidenav/sidenav.jsx

@@ -105,7 +105,9 @@ export const T = {
     navActive:       c("foreground-action-secondary-pressed"),
     navDisabled:     c("foreground-action-disabled"),
     secondary:       c("foreground-static-neutral-subtle"), // PopoverMenu.SectionHeader
-    secondarySubtle: c("foreground-static-neutral-faint"),  // NavSectionLabel
+    // NavSectionLabel. Subtle, not Faint: Faint at 11px measured 4.23:1 on
+    // white in Amplify Light, under AA's 4.5. Figma SectionLabel rebound to match.
+    secondarySubtle: c("foreground-static-neutral-subtle"),
     strong:          c("foreground-static-neutral-strong"), // PopoverMenu.Item, tooltip
   },
   icon: {
@@ -233,9 +235,12 @@ export function SideNavItem({
     : (isActive || isCollapsedActiveGrouper || isExpandedGrouper) ? T.text.navActive
     : hovered ? T.text.navHover
     :           T.text.navBase;
+  // Figma SideNavItem State=Trail (an open grouper) binds Secondary/Pressed on
+  // the leading icon AND the chevron, as it does on the label. The icon used to
+  // stay on Rest/Hover there, so an open group's glyphs read lighter than its label.
   const iconColor =
     isDisabled ? T.icon.navDisabled
-    : (isActive || isCollapsedActiveGrouper) ? T.icon.navActive
+    : (isActive || isCollapsedActiveGrouper || isExpandedGrouper) ? T.icon.navActive
     : hovered                              ? T.icon.navHover
     :                                        T.icon.navBase;
 
@@ -579,7 +584,12 @@ const APP_T = {
   separator:    c("stroke-static-neutral-base"),
 };
 
-export function AppSwitcher({ label, icon = "apps", home, apps = [], activeId, onSelect, collapsed = false }) {
+export function AppSwitcher({ label: fallbackLabel, icon = "apps", home, apps = [], activeId, onSelect, collapsed = false }) {
+  // The trigger names WHERE YOU ARE: the current app's label, so after choosing
+  // Accounts Payable it reads Accounts Payable. `label` is only the fallback
+  // for when no app is current.
+  const current = [home, ...apps].filter(Boolean).find(a => a.id === activeId);
+  const label = (current && current.label) || fallbackLabel || (home && home.label);
   const [hov, setHov] = useState(false);
   const [press, setPress] = useState(false);
   const [open, setOpen] = useState(false);
@@ -612,7 +622,7 @@ export function AppSwitcher({ label, icon = "apps", home, apps = [], activeId, o
   const active = open || press;
   const fg = active ? APP_T.openFg : hov ? APP_T.hoverFg : APP_T.restFg;
   const chevron = active ? APP_T.openFg : hov ? APP_T.hoverFg : APP_T.restChevron;
-  const homeItem = home || { id: "__home", label };
+  const homeItem = home || { id: "__home", label: fallbackLabel };
 
   return (
     // Full column width in both states: 218 expanded, the rail's 48 collapsed,
@@ -749,7 +759,7 @@ export function CollapseButton({ isSidebarCollapsed, onToggle, collapseIcon, exp
 // ─── SideNav (top-level container) ────────────────────────────────────────────
 // ── NavSectionLabel ──────────────────────────────────────────────────────────
 // Optional in-nav section heading. Figma: SideNav.SectionLabel (node 40006794:5975).
-// Tokens: Label/Section/Small/Semibold (11px/600/16px/0.6px), Foreground/Static/Neutral/Faint
+// Tokens: Label/Section/Small/Semibold (11px/600/16px/0.6px), Foreground/Static/Neutral/Subtle
 // Container: h 40, padding 6 left, 6 right, 12 vertical (read 2026-11-03; was
 // 4 / 4 / 8 in neutral-base)
 // In collapsed rail: hidden, replaced by a Divider (rendered by SideNav itself, see §2.3)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helloimjolopez-pathway/pathway-components",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Pathway Design System React components",
   "type": "module",
   "sideEffects": false,