@helloimjolopez-pathway/pathway-components 0.3.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
* a 240px nav, no item radius, a 4px stripe rounded at 4, a 20px glyph, a 22px
|
|
9
9
|
* module mark, raw rgba hover fills, and a 56px NavHeader Figma does not draw.
|
|
10
10
|
*/
|
|
11
|
-
import React from "react";
|
|
11
|
+
import React, { useState } from "react";
|
|
12
12
|
import { DemoChrome, mount } from "../_demo/harness.jsx";
|
|
13
|
-
import { NavShell } from "./nav-shell.jsx";
|
|
13
|
+
import { NavShell, ACCOUNTING_APP_SWITCHER } from "./nav-shell.jsx";
|
|
14
14
|
import { PageTemplate } from "../page-template/page-template.jsx";
|
|
15
15
|
import { NAV_SECTIONS } from "../../src/stories/Library/SideNav/sidenavDemoData.jsx";
|
|
16
16
|
|
|
@@ -25,14 +25,26 @@ const ORG = { id: "gcc", name: "Grace Community Church", campus: "Knoxville", in
|
|
|
25
25
|
const USER = { name: "Jo Lopez", initials: "JL", email: "jo@gracecommunity.org" };
|
|
26
26
|
|
|
27
27
|
function App() {
|
|
28
|
+
// The app switcher's on/off, the same switch as the web component's
|
|
29
|
+
// `app-switcher` attribute. It lives in the page so it works in every width.
|
|
30
|
+
const [appSwitcher, setAppSwitcher] = useState(false);
|
|
31
|
+
const [app, setApp] = useState("financials-home");
|
|
28
32
|
return (
|
|
29
33
|
<DemoChrome title="NavShell" widths={WIDTHS}
|
|
30
34
|
blurb={"TopNav, SideNav and the page area composed into one application frame. " +
|
|
31
35
|
"Desktop pushes the page with a collapsible nav, Tablet locks the 72px rail, " +
|
|
32
|
-
"Mobile opens the nav as an overlay from the hamburger."}>
|
|
36
|
+
"Mobile opens the nav as an overlay from the hamburger. Tick App switcher to turn on the Accounting app switcher."}>
|
|
33
37
|
<NavShell activeModuleId="accounting" org={ORG} user={USER}
|
|
34
|
-
navSections={NAV_SECTIONS} activeNavId="balance_sheet" onNavigate={() => {}}
|
|
38
|
+
navSections={NAV_SECTIONS} activeNavId="balance_sheet" onNavigate={() => {}}
|
|
39
|
+
appSwitcher={appSwitcher ? { ...ACCOUNTING_APP_SWITCHER, activeId: app, onSelect: setApp } : null}>
|
|
35
40
|
<PageTemplate>
|
|
41
|
+
<label style={{ display: "flex", alignItems: "center", gap: "var(--semantic-layout-units-gap-tight)",
|
|
42
|
+
fontSize: Y("font-size-s"), lineHeight: Y("line-height-s-single"),
|
|
43
|
+
color: C("foreground-static-neutral-base"), cursor: "pointer" }}>
|
|
44
|
+
<input id="navshell-app-switcher" type="checkbox" checked={appSwitcher}
|
|
45
|
+
onChange={(e) => setAppSwitcher(e.target.checked)} />
|
|
46
|
+
App switcher (Accounting)
|
|
47
|
+
</label>
|
|
36
48
|
<h1 style={{ margin: 0, fontSize: Y("font-size-xl"), lineHeight: Y("line-height-xl-single"),
|
|
37
49
|
fontWeight: Y("weight-semibold"), color: C("foreground-static-neutral-bold") }}>
|
|
38
50
|
Balance Sheet
|
|
@@ -105,7 +105,9 @@ export const T = {
|
|
|
105
105
|
navActive: c("foreground-action-secondary-pressed"),
|
|
106
106
|
navDisabled: c("foreground-action-disabled"),
|
|
107
107
|
secondary: c("foreground-static-neutral-subtle"), // PopoverMenu.SectionHeader
|
|
108
|
-
|
|
108
|
+
// NavSectionLabel. Subtle, not Faint: Faint at 11px measured 4.23:1 on
|
|
109
|
+
// white in Amplify Light, under AA's 4.5. Figma SectionLabel rebound to match.
|
|
110
|
+
secondarySubtle: c("foreground-static-neutral-subtle"),
|
|
109
111
|
strong: c("foreground-static-neutral-strong"), // PopoverMenu.Item, tooltip
|
|
110
112
|
},
|
|
111
113
|
icon: {
|
|
@@ -749,7 +751,7 @@ export function CollapseButton({ isSidebarCollapsed, onToggle, collapseIcon, exp
|
|
|
749
751
|
// ─── SideNav (top-level container) ────────────────────────────────────────────
|
|
750
752
|
// ── NavSectionLabel ──────────────────────────────────────────────────────────
|
|
751
753
|
// Optional in-nav section heading. Figma: SideNav.SectionLabel (node 40006794:5975).
|
|
752
|
-
// Tokens: Label/Section/Small/Semibold (11px/600/16px/0.6px), Foreground/Static/Neutral/
|
|
754
|
+
// Tokens: Label/Section/Small/Semibold (11px/600/16px/0.6px), Foreground/Static/Neutral/Subtle
|
|
753
755
|
// Container: h 40, padding 6 left, 6 right, 12 vertical (read 2026-11-03; was
|
|
754
756
|
// 4 / 4 / 8 in neutral-base)
|
|
755
757
|
// In collapsed rail: hidden, replaced by a Divider (rendered by SideNav itself, see §2.3)
|