@scalio-cloud/ui 0.5.0 → 0.5.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.5.2
+- Navigation items take `match` (further paths that mark the item active), for one menu item over several pages.
+- New `SubNav` (tabs as links on top of a page) and `WorkspaceSwitcher` (Identity / HR in Nexus). No change for
+  apps that do not use them.
+
+## 0.5.1
+- Phones: the context select (tenant, customer) is hidden in the header below 640px, there is no room next to
+  the header buttons. `AppShell` takes `drawerTop` and shows it above the navigation in the phone drawer.
+
 ## 0.5.0
 - **Visible change:** `rounded-sm` is now 2px as UISPEC says (was 0px from the preset). Buttons, fields, cards and
   badges in Nexus, Citadel and Foundry get barely visible round corners; Rosetta already had 2px and can drop its

package/README.md

@@ -102,6 +102,7 @@ const apps = useScalioApps(() => api.get("/apps").then((r) => r.data));   // onc
   sidebar={<Sidebar nav={NAV} link={NavLink} lang={lang} version={VERSION} commit={COMMIT}
     search={{ onOpen: openPalette, shortcut: "⌘K" }} primaryAction={{ label: t("Scan starten"), icon: Play, onSelect: scan }} />}
   drawerOpen={drawer} onDrawerClose={() => setDrawer(false)}   // phones: same sidebar in a drawer (test ids with "m-")
+  drawerTop={<ContextSelect ... testId="m-tenant-switcher" />}  // below 640px the header hides the select, the drawer shows it
 >
   <Routes>...</Routes>
 </AppShell>
@@ -116,6 +117,12 @@ sidebar renders plain links and marks the item for `activePath`. Item test ids d
 `EmptyState` (children = next step), `Loading`, `Notice` (`info`, `ok`, `warn`, `error`), `StatusBadge`
 (tones `neutral`, `running`, `ok`, `warn`, `error`) and `PageHeader` with `back` for detail pages.
 
+Pages that belong together under one menu item keep their own addresses: the item lists them in `match`
+(`{ to: "/groups", label: "Gruppen", match: ["/teams", "/distribution-lists"] }`, pass `activePath` with
+`link`) and each page shows `<SubNav items={[{ to: "/groups", label: "Sicherheit", end: true }, ...]} link={NavLink} />`
+on top. An app with two work areas (Nexus Identity and HR) puts `<WorkspaceSwitcher options value onSelect />`
+into the sidebar's `top`.
+
 ## Sign-in page and profile (React)
 
 All sign-in pages use the same frame and order: Microsoft first, then "oder mit E-Mail", the password field with

package/nav.css

@@ -32,6 +32,22 @@
 .scalio-nav-item.is-active { border-left-color: hsl(var(--primary)); background: hsl(var(--background)); color: hsl(var(--foreground)); font-weight: 600; }
 .scalio-nav-item.is-bold { font-weight: 700; }
 .scalio-nav-item:focus-visible, .scalio-nav-cta:focus-visible, .scalio-nav-search:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
+.scalio-workspace { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.25rem; padding: 0.25rem; border-radius: 0.375rem; background: hsl(var(--border) / 0.6); }
+.scalio-workspace-item {
+  display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.375rem 0.5rem; border: 0; border-radius: 0.25rem;
+  background: transparent; font: inherit; font-size: 0.75rem; font-weight: 600; color: hsl(var(--muted-foreground)); cursor: pointer;
+}
+.scalio-workspace-item.is-active { background: hsl(var(--background)); color: hsl(var(--primary)); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }
+.scalio-workspace-item:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
+.scalio-workspace-item .scalio-icon { width: 0.875rem; height: 0.875rem; }
+.scalio-subnav { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid hsl(var(--border)); overflow-x: auto; }
+.scalio-subnav-item {
+  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; margin-bottom: -1px; white-space: nowrap;
+  border-bottom: 2px solid transparent; font-size: 0.875rem; color: hsl(var(--muted-foreground)); text-decoration: none;
+}
+.scalio-subnav-item:hover { color: hsl(var(--foreground)); }
+.scalio-subnav-item.is-active { border-bottom-color: hsl(var(--primary)); color: hsl(var(--foreground)); font-weight: 600; }
+.scalio-subnav-item:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
 .scalio-nav-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
 .scalio-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .scalio-nav-badge {
@@ -97,8 +113,13 @@
 .scalio-switcher-icon { width: 0.75rem; height: 0.75rem; }
 .scalio-switcher-soon { margin-left: 0.125rem; padding: 0 0.25rem; border: 1px solid #3f3f46; border-radius: 2px; font-size: 9px; line-height: 14px; text-transform: none; letter-spacing: normal; color: #71717a; }
 
-/* Context select (tenant, customer, organisation) in the header */
+/* Context select (tenant, customer, organisation) in the header; below 640px it moves into the drawer (drawerTop) */
 .scalio-context { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
+.scalio-header .scalio-context { display: none; }
+@media (min-width: 640px) { .scalio-header .scalio-context { display: flex; } }
+.scalio-sidebar-top .scalio-context { flex-wrap: wrap; }
+.scalio-sidebar-top .scalio-context-label { display: block; width: 100%; }
+.scalio-sidebar-top .scalio-context-field, .scalio-sidebar-top .scalio-context-select { width: 100%; max-width: none; }
 .scalio-context-label { display: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: hsl(var(--muted-foreground)); }
 @media (min-width: 1024px) { .scalio-context-label { display: inline; } }
 .scalio-context-field { position: relative; min-width: 0; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Scalio Control Room design tokens, Tailwind preset, self-hosted fonts, the shared app header, sign-in layout, sidebar and page blocks",
   "license": "SEE LICENSE IN README.md",
   "private": false,

package/react/nav.js

@@ -47,10 +47,12 @@ function NavItem({ item, link, activePath, onNavigate, testIdPrefix }) {
       : null,
   ];
   const testId = itemTestId(item, testIdPrefix);
+  // match: further paths that belong to this item (e.g. "Gruppen" also for /teams); needs activePath.
+  const matched = (item.match || []).some((m) => isActivePath(activePath, m));
   if (link) {
-    return h(link, { to: item.to, end: item.end, className: ({ isActive }) => cls(isActive), onClick: onNavigate, "data-testid": testId }, content);
+    return h(link, { to: item.to, end: item.end, className: ({ isActive }) => cls(isActive || matched), onClick: onNavigate, "data-testid": testId }, content);
   }
-  const active = isActivePath(activePath, item.to, item.end);
+  const active = isActivePath(activePath, item.to, item.end) || matched;
   return h("a", { href: item.to, className: cls(active), "aria-current": active ? "page" : undefined, onClick: onNavigate, "data-testid": testId }, content);
 }
 
@@ -140,6 +142,53 @@ function Sidebar(props) {
   );
 }
 
+// Tabs as links on top of a page, for pages that belong together under one menu item
+// (e.g. Gruppen: Sicherheit, Verteiler, Microsoft 365, Teams). Each tab keeps its own address.
+function SubNav({ items, link, activePath, label, testId }) {
+  const visible = (items || []).filter((i) => i && !i.hidden);
+  if (visible.length < 2) return null;
+  return h(
+    "nav",
+    { className: "scalio-subnav", "aria-label": label || undefined, "data-testid": testId || "subnav" },
+    visible.map((item) => {
+      const tid = item.testId || `subnav-${slug(item.to)}`;
+      const cls = (active) => cx("scalio-subnav-item", active && "is-active");
+      const content = [item.label, item.badge != null && item.badge !== false ? h("span", { key: "b", className: "scalio-nav-badge" }, item.badge) : null];
+      if (link) {
+        return h(link, { key: item.to, to: item.to, end: item.end, className: ({ isActive }) => cls(isActive), "data-testid": tid }, content);
+      }
+      const active = isActivePath(activePath, item.to, item.end);
+      return h("a", { key: item.to, href: item.to, className: cls(active), "aria-current": active ? "page" : undefined, "data-testid": tid }, content);
+    })
+  );
+}
+
+// Two (or more) work areas of one app, e.g. Nexus Identity and HR. Sits in the sidebar's top slot.
+// options: [{ id, label, icon }]; onSelect(id) switches (the app navigates).
+function WorkspaceSwitcher({ options, value, onSelect, testIdPrefix, testId }) {
+  const prefix = testIdPrefix || "";
+  if (!options || options.length < 2) return null;
+  return h(
+    "div",
+    { className: "scalio-workspace", role: "group", "data-testid": prefix + (testId || "workspace-switcher") },
+    options.map((o) =>
+      h(
+        "button",
+        {
+          key: o.id,
+          type: "button",
+          className: cx("scalio-workspace-item", o.id === value && "is-active"),
+          "aria-pressed": o.id === value,
+          onClick: () => onSelect && onSelect(o.id),
+          "data-testid": `${prefix}ws-${o.id}`,
+        },
+        o.icon ? h(o.icon, { className: "scalio-icon", "aria-hidden": "true" }) : null,
+        o.label
+      )
+    )
+  );
+}
+
 // "Version 1.2.4 · 3f2a1bc" at the bottom of the sidebar.
 function VersionTag({ version, commit, lang, labels, testId }) {
   const L = labelsFor(lang, labels);
@@ -190,7 +239,9 @@ function NavDrawer({ open, onClose, children, lang, labels, testId }) {
 
 // Whole frame: switcher, header, banners, then sidebar + content. The same sidebar element is shown
 // inside the drawer on phones (variant "drawer", closes on navigation).
-function AppShell({ switcher, header, banner, sidebar, children, drawerOpen, onDrawerClose, lang, labels, testId }) {
+// drawerTop: shown above the navigation in the phone drawer, e.g. the context select (the header hides it
+// below 640px, there is no room next to the header buttons).
+function AppShell({ switcher, header, banner, sidebar, children, drawerOpen, onDrawerClose, drawerTop, lang, labels, testId }) {
   return h(
     "div",
     { className: "scalio-shell", "data-testid": testId || "app-shell" },
@@ -207,7 +258,7 @@ function AppShell({ switcher, header, banner, sidebar, children, drawerOpen, onD
       ? h(
           NavDrawer,
           { open: !!drawerOpen, onClose: onDrawerClose, lang, labels },
-          React.cloneElement(sidebar, { variant: "drawer", onNavigate: onDrawerClose })
+          React.cloneElement(sidebar, drawerTop ? { variant: "drawer", onNavigate: onDrawerClose, top: drawerTop } : { variant: "drawer", onNavigate: onDrawerClose })
         )
       : null
   );
@@ -441,6 +492,8 @@ module.exports = {
   Sidebar,
   NavItem,
   NavDrawer,
+  SubNav,
+  WorkspaceSwitcher,
   AppShell,
   ContextSelect,
   ProductSwitcher,