@conduction/docusaurus-preset 2.6.0 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js"
   },

package/src/components/AtomZones/AtomZones.jsx

@@ -10,7 +10,10 @@
  *
  * Mirrors the static-HTML reference at
  *   preview/components/app-mock.html#five-atoms
- * so the React surface and the design-system kit page stay aligned.
+ * but trimmed to the educational essentials: title, "applies to"
+ * tag, one-paragraph description, and the chassis illustration.
+ * Implementation-detail metadata (Inside / Tokens / Width / tips)
+ * lives on the design-system kit page, not here.
  *
  * Used by Docusaurus consumers (nextcloud-vue.conduction.nl,
  * procest.conduction.nl, openregister.conduction.nl) to teach the
@@ -20,10 +23,6 @@
  * via :global() in AtomZones.module.css. Doesn't reuse <AppMock/>'s
  * variants — those intentionally skip the .pageHeader atom — so
  * the page-header zone can render correctly.
- *
- * No props today. A future `app="..."` prop could re-tint the body
- * accent (cobalt/mint/lavender), but the zone-focus story is
- * inherently chassis-level, not variant-level.
  */
 
 import React from 'react';
@@ -37,16 +36,6 @@ const ZONES = [
     body:
       "The Nextcloud chrome row. Sits across every page unconditionally because every Conduction app lives inside Nextcloud's workspace. The shelf icons are the cross-app navigation; per-app links never go here.",
     focus: 'focusTopbar',
-    facts: [
-      ['Inside', <>logo, 14 app-shelf icons, spacer, optional pill, bell, avatar</>],
-      ['Tokens', <><code>--c-blue-cobalt</code> bg; whites at <code>0.4</code> / <code>0.7</code> / <code>1.0</code> alpha</>],
-      ['Height', <><code>24px</code> fixed; <code>flex-shrink: 0</code></>],
-    ],
-    tips: [
-      { text: "The shelf shows other Nextcloud apps, never this app's own pages" },
-      { text: 'Avatar is the only solid white circle, top-right' },
-      { text: "Don't add a per-app logo here; the body handles that", dont: true },
-    ],
   },
   {
     code: '.nav',
@@ -55,16 +44,6 @@ const ZONES = [
     body:
       "The per-app sidebar. Carries this app's own primary navigation, plus a footer pinned to the bottom for global access (Settings, Feedback). The active item is the only place cobalt-100 backgrounds a row.",
     focus: 'focusNav',
-    facts: [
-      ['Inside', <>navHead (cobalt-blue card with hex glyph + label), 5&ndash;9 nav items (one with <code>.active</code>), and a <code>.footer</code> with Settings + Feedback pinned to the bottom</>],
-      ['Width', <><code>22%</code>, min <code>100px</code>; <code>flex-shrink: 0</code></>],
-      ['Tokens', <><code>--c-cobalt-50</code> bg; <code>--c-cobalt-100</code> right border + active bg + footer divider; <code>--c-orange-knvb</code> on the navHead hex</>],
-    ],
-    tips: [
-      { text: 'Always exactly one .active item; never zero, never two' },
-      { text: 'Footer always carries Settings + Feedback, anchored bottom via margin-top: auto' },
-      { text: "Don't add per-app sign-out here; the user's avatar in the topbar handles identity", dont: true },
-    ],
   },
   {
     code: '.col',
@@ -73,35 +52,14 @@ const ZONES = [
     body:
       'The work surface. In an App pattern, the column opens with a .pageHeader (title + actions), then KPI strip and panels. In a Desk pattern, .col nests inside .grid to become a full-bleed widget canvas with no page header.',
     focus: 'focusCol',
-    facts: [
-      ['Inside', <>App pattern: <code>.pageHeader</code> + <code>.kpiRow</code> + <code>.panelRow</code>s + tables. Desk pattern: <code>.grid</code> with <code>.w</code> widgets (no pageHeader)</>],
-      ['Width', <><code>flex: 1</code>; <code>min-width: 0</code>; <code>overflow: hidden</code></>],
-      ['Tokens', <>White bg; tokens scope to inner panels (<code>--c-cobalt-100</code> borders, <code>--c-mint-500</code> / <code>--c-orange-knvb</code> KPI accents)</>],
-    ],
-    tips: [
-      { text: 'The single orange accent of the variant lives somewhere in here, never in the rails' },
-      { text: "KPI strip is the most-recognisable App-pattern signature; use it when there's a number worth surfacing" },
-      { text: "Don't let panels overflow horizontally; min-width: 0 is load-bearing", dont: true },
-    ],
   },
   {
     code: '.pageHeader',
     title: 'Page header',
     applies: <><strong>Index</strong> &middot; <strong>Detail</strong> &middot; <em className={styles.never}>Desk: never</em></>,
     body:
-      "The first row of .col on every Index and Detail template. Carries the page title (left) and exactly two action buttons (right): one ghost (border-only, secondary action) and one primary (filled cobalt). The header tracks .col's width: when the sidebar is open the header constrains; when the sidebar is closed it spans full-width.",
+      "The first row of .col on every Index and Detail template. Carries the page title (left) and exactly two action buttons (right): one ghost (secondary), one primary (filled cobalt). The header tracks .col's width: full-spread when the sidebar is closed, constrained when it is open.",
     focus: 'focusPageHeader',
-    facts: [
-      ['Inside', <>title-bar (left, cobalt-blue rounded rect with the page title), spacer, then exactly two action buttons: <code>.btn.ghost</code> (white with cobalt border, secondary) on the left of the pair, then <code>.btn</code> (filled cobalt, primary)</>],
-      ['Height', <><code>14&ndash;16px</code> band, sits flush with <code>.col</code>'s top padding</>],
-      ['Width', <>tracks <code>.col</code>: full-spread when sidebar closed, constrained when sidebar open</>],
-      ['Tokens', <><code>--c-blue-cobalt</code> for the title-bar and primary button; <code>--c-cobalt-200</code> border on ghost button; white bg on ghost</>],
-    ],
-    tips: [
-      { text: 'Identical anatomy on Index and Detail; only the title changes' },
-      { text: 'Exactly two buttons, never one, never three. If you need a third action, group into an "Actions…" dropdown behind the ghost button' },
-      { text: "Don't render the page title as plain text inside a panel; the page header IS the title", dont: true },
-    ],
   },
   {
     code: '.detail',
@@ -110,16 +68,6 @@ const ZONES = [
     body:
       'The right-hand sidebar. Optional, dismissible, anchored to the active record or the active view. Carries an icon + title + description in a header, then a tabbed body (Search / Columns by default). Class stays .detail for code; we call it the Sidebar in copy.',
     focus: 'focusDetail',
-    facts: [
-      ['Inside', <><code>.sb-head</code> (icon + title + description + close), <code>.sb-tabs</code> (2&ndash;3 tabs, one <code>.active</code>), then a <code>.sb-body</code> of inputs / filters / pinned metadata</>],
-      ['Width', <><code>26%</code>, min <code>130px</code>; <code>flex-shrink: 0</code></>],
-      ['Tokens', <>White bg; <code>--c-cobalt-100</code> left border; <code>--c-blue-cobalt</code> active-tab underline; <code>--c-cobalt-50</code> on the icon background</>],
-    ],
-    tips: [
-      { text: "Sidebar should be dismissible; it's a drawer, not a permanent rail" },
-      { text: 'Default tabs on an Index page: Search + Columns. Default on Detail: Overview + Activity' },
-      { text: "Don't put global navigation here; that's .nav's job. The sidebar is scoped to the current view.", dont: true },
-    ],
   },
 ];
 
@@ -289,21 +237,6 @@ function ZoneCard({ zone }) {
       </div>
       <p className={styles.lede}>{zone.body}</p>
       <ChassisFrame focus={zone.focus} />
-      <dl className={styles.facts}>
-        {zone.facts.map(([term, def], i) => (
-          <React.Fragment key={i}>
-            <dt>{term}</dt>
-            <dd>{def}</dd>
-          </React.Fragment>
-        ))}
-      </dl>
-      <ul className={styles.tips}>
-        {zone.tips.map((tip, i) => (
-          <li key={i} className={tip.dont ? styles.dont : undefined}>
-            {tip.text}
-          </li>
-        ))}
-      </ul>
     </div>
   );
 }

package/src/components/AtomZones/AtomZones.module.css

@@ -99,72 +99,6 @@
   line-height: 1.55;
 }
 
-.facts {
-  margin: 0;
-  display: grid;
-  grid-template-columns: 110px 1fr;
-  gap: 8px var(--space-4);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.facts dt {
-  font-family: var(--conduction-typography-font-family-code);
-  font-size: 11px;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--c-cobalt-400);
-  align-self: start;
-  padding-top: 2px;
-}
-
-.facts dd {
-  margin: 0;
-  color: var(--c-cobalt-700);
-}
-
-.facts dd code {
-  font-family: var(--conduction-typography-font-family-code);
-  font-size: 12px;
-  color: var(--c-blue-cobalt);
-  background: var(--c-cobalt-50);
-  padding: 1px 5px;
-  border-radius: 3px;
-  white-space: nowrap;
-}
-
-.tips {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.tips li {
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--c-cobalt-700);
-  padding-left: 18px;
-  position: relative;
-}
-
-.tips li::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 7px;
-  width: 8px;
-  height: 9px;
-  clip-path: var(--hex-pointy-top);
-  background: var(--c-orange-knvb);
-}
-
-.tips li.dont::before {
-  background: var(--c-red-vermillion, #c0392b);
-}
-
 /* ============================================================
    Zone frame (the cobalt-50 cushion that holds the chassis)
    ============================================================ */