@conduction/docusaurus-preset 0.1.0

package/src/components/AppMock/variants/ZaakAfhandelAppMock.jsx

@@ -0,0 +1,71 @@
+/**
+ * ZaakAfhandelApp abstract — citizen + case-worker portal.
+ *
+ * Inferred from the app role (citizen-facing case portal, ZGW APIs,
+ * archive interfaces): centre shows the active case-worker queue
+ * (werkvoorraad widget) with stage pips, plus a citizen-side timeline
+ * of recent submissions. Left nav for queue / archive / public portal /
+ * audit / settings.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+export default function ZaakAfhandelAppMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.procest].filter(Boolean).join(' ')}>
+        <div className={styles.nav}>
+          <div className={styles.navHead}><div className={styles.h}></div><div className={styles.l}></div></div>
+          {[true, false, false, false, false].map((active, i) => (
+            <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.l}></div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.col}>
+          <div className={styles.head}>
+            <div className={styles.row + ' ' + styles.head} style={{width: '35%'}}></div>
+            <div className={styles.actions}>
+              <div className={styles.btn + ' ' + styles.ghost}></div>
+              <div className={styles.btn}></div>
+            </div>
+          </div>
+          {/* Case-worker werkvoorraad */}
+          <div className={[styles.w, styles['w-werkvoorraad']].join(' ')}>
+            <div className={styles.wHead}>
+              <div className={styles.h}></div><div className={styles.t}></div>
+            </div>
+            <div className={styles.list}>
+              <div className={[styles.item, styles.now].join(' ')}><div className={styles.stage}></div><div className={styles.l1}></div><div className={styles.av}></div></div>
+              <div className={styles.item}><div className={styles.stage}></div><div className={styles.l1}></div><div className={[styles.av, styles.b].join(' ')}></div></div>
+              <div className={[styles.item, styles.late].join(' ')}><div className={styles.stage}></div><div className={styles.l1}></div><div className={[styles.av, styles.c].join(' ')}></div></div>
+              <div className={styles.item}><div className={styles.stage}></div><div className={styles.l1}></div><div className={styles.av}></div></div>
+              <div className={styles.item}><div className={styles.stage}></div><div className={styles.l1}></div><div className={[styles.av, styles.b].join(' ')}></div></div>
+            </div>
+          </div>
+          {/* Citizen-side recent submissions list */}
+          <div className={[styles.w, styles['w-rss']].join(' ')}>
+            <div className={styles.wHead}>
+              <div className={styles.h}></div><div className={styles.t}></div>
+            </div>
+            <div className={styles.list}>
+              <div className={styles.item}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></div></div>
+              <div className={styles.item}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></div></div>
+              <div className={styles.item}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></div></div>
+              <div className={styles.item}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></div></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/AppsGrid/AppsGrid.jsx

@@ -0,0 +1,84 @@
+/**
+ * <AppsGrid />
+ *
+ * Filterable apps grid: a row of category chips above a 3-up grid of
+ * <AppCard/> tiles. Mirrors preview/components/apps-grid.html. Each
+ * app declares one or more categories; clicking a chip narrows the
+ * grid to apps in that category. The first chip is always "All".
+ *
+ * For non-interactive 3-up rows (e.g. "Most installed" on landing.html),
+ * use <AppsPreview/> instead. AppsGrid is the catalogue surface.
+ *
+ * Usage in MDX:
+ *
+ *   <AppsGrid
+ *     categories={['All', 'Data', 'Processes', 'Connectors', 'Documents', 'AI']}
+ *     apps={[
+ *       {
+ *         name: 'OpenRegister',
+ *         tagline: 'Schemas, registers, structured data objects.',
+ *         status: 'STABLE', version: 'v3.1',
+ *         href: '/apps/openregister',
+ *         icon: <svg>...</svg>,
+ *         categories: ['Data'],
+ *       },
+ *       // ...
+ *     ]}
+ *   />
+ */
+
+import React, {useState, useMemo} from 'react';
+import {AppCard} from '../AppsPreview/AppsPreview';
+import styles from './AppsGrid.module.css';
+
+const ALL_KEY = 'All';
+
+export default function AppsGrid({categories, apps = [], className}) {
+  const cats = categories && categories.length > 0
+    ? categories
+    : [ALL_KEY, ...uniqueCategories(apps)];
+
+  const [active, setActive] = useState(cats[0] || ALL_KEY);
+
+  const visible = useMemo(() => {
+    if (!active || active === ALL_KEY) return apps;
+    return apps.filter(a => Array.isArray(a.categories) && a.categories.includes(active));
+  }, [apps, active]);
+
+  return (
+    <div className={[styles.section, className].filter(Boolean).join(' ')}>
+      <div className={styles.chips} role="tablist" aria-label="Filter apps by category">
+        {cats.map((c, i) => (
+          <button
+            key={i}
+            type="button"
+            role="tab"
+            aria-selected={c === active}
+            className={[styles.chip, c === active ? styles.chipActive : null].filter(Boolean).join(' ')}
+            onClick={() => setActive(c)}
+          >
+            {c}
+          </button>
+        ))}
+      </div>
+
+      <div className={styles.grid}>
+        {visible.map((app, i) => <AppCard key={i} app={app} />)}
+      </div>
+
+      {visible.length === 0 && (
+        <p className={styles.empty}>No apps match this filter.</p>
+      )}
+    </div>
+  );
+}
+
+function uniqueCategories(apps) {
+  const seen = new Set();
+  for (const a of apps) {
+    if (Array.isArray(a.categories)) {
+      for (const c of a.categories) seen.add(c);
+    }
+  }
+  return Array.from(seen);
+}

package/src/components/AppsGrid/AppsGrid.module.css

@@ -0,0 +1,46 @@
+/**
+ * <AppsGrid /> styles. Mirrors apps-grid.html chip-row + 3-up grid.
+ */
+
+.section { font-family: var(--conduction-typography-font-family-body); }
+
+.chips {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 32px;
+  flex-wrap: wrap;
+}
+
+.chip {
+  padding: 7px 16px;
+  border-radius: var(--radius-pill);
+  background: var(--c-cobalt-50);
+  color: var(--c-cobalt-700);
+  font-size: 14px;
+  font-weight: 500;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 140ms ease, color 140ms ease;
+}
+.chip:hover { background: var(--c-cobalt-100); }
+.chipActive {
+  background: var(--c-blue-cobalt);
+  color: white;
+}
+.chipActive:hover { background: var(--c-cobalt-700); }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
+
+.empty {
+  margin: 32px 0;
+  font-size: 14px;
+  color: var(--c-cobalt-400);
+  text-align: center;
+}

package/src/components/AppsPreview/AppsPreview.jsx

@@ -0,0 +1,85 @@
+/**
+ * <AppsPreview />
+ *
+ * Featured apps section: 3-up app cards + "browse all" link.
+ * Section-head pattern (eyebrow + h2 + lede) above the cards.
+ *
+ * Mirrors the .apps-preview section in preview/pages/landing.html,
+ * with .app-card cards from preview/components/apps-grid.css.
+ *
+ * Composes from primitives:
+ *   <SectionHead/>  for the eyebrow + title + lede pattern
+ *   <HexBullet/>    for the status dot inside each <AppCard/> meta
+ *
+ * Usage in MDX:
+ *
+ *   <AppsPreview
+ *     eyebrow="Most installed"
+ *     title="Three apps that ship the most outcomes."
+ *     lede={<>Start with the apps that solve a concrete problem ...</>}
+ *     apps={[
+ *       {
+ *         name: 'OpenCatalogi',
+ *         tagline: 'Public software catalog. Every app, dataset...',
+ *         status: 'STABLE',
+ *         version: 'v2.4 · NL · EN',
+ *         href: '/apps/opencatalogi',
+ *         icon: <svg>...</svg>,
+ *       },
+ *       ...
+ *     ]}
+ *     seeAll={{label: 'Browse all twelve apps', href: '/apps'}}
+ *   />
+ */
+
+import React from 'react';
+import HexBullet from '../primitives/HexBullet';
+import SectionHead from '../primitives/SectionHead';
+import styles from './AppsPreview.module.css';
+
+function AppCard({app}) {
+  const statusColor = (app.status || '').toLowerCase() === 'beta'
+    ? 'var(--c-orange-knvb)'
+    : 'var(--c-mint-500)';
+
+  return (
+    <a href={app.href || '#'} className={styles.card}>
+      <div className={styles.iconWrap}>{app.icon}</div>
+      <div className={styles.name}>{app.name}</div>
+      <div className={styles.tagline}>{app.tagline}</div>
+      <div className={styles.meta}>
+        {app.status && (
+          <span className={styles.badge}>
+            <HexBullet size="sm" color={statusColor} />
+            {app.status}
+          </span>
+        )}
+        {app.version && <span className={styles.ver}>{app.version}</span>}
+      </div>
+    </a>
+  );
+}
+
+export default function AppsPreview({eyebrow, title, lede, apps = [], seeAll}) {
+  return (
+    <section className={styles.section}>
+      {(eyebrow || title || lede) && (
+        <SectionHead eyebrow={eyebrow} title={title} lede={lede} />
+      )}
+
+      <div className={styles.row}>
+        {apps.map((app, i) => (
+          <AppCard key={i} app={app} />
+        ))}
+      </div>
+
+      {seeAll && (
+        <a href={seeAll.href || '#'} className={styles.seeAll}>
+          {seeAll.label} →
+        </a>
+      )}
+    </section>
+  );
+}
+
+export {AppCard};

package/src/components/AppsPreview/AppsPreview.module.css

@@ -0,0 +1,128 @@
+/**
+ * <AppsPreview /> styles. Mirrors the .apps-preview section from
+ * preview/pages/landing.html plus .app-card from
+ * preview/components/apps-grid.css (CSS Module copy so it scopes).
+ *
+ * SectionHead + HexBullet primitives carry their own styling now;
+ * this module only owns the section frame, the card grid, and the
+ * .app-card rules.
+ */
+
+.section {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 96px 64px;
+  font-family: var(--conduction-typography-font-family-body);
+  background: white;
+}
+@media (max-width: 900px) {
+  .section { padding: 64px 24px; }
+}
+
+/* App card grid */
+.row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+@media (max-width: 900px) {
+  .row { grid-template-columns: 1fr; }
+}
+
+/* App card, mirrors .app-card from preview/components/apps-grid.css */
+.card {
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: 28px;
+  text-decoration: none;
+  color: inherit;
+  transition: all 160ms ease;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.card:hover {
+  border-color: var(--c-blue-cobalt);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-2);
+  text-decoration: none;
+  color: inherit;
+}
+
+.iconWrap {
+  width: 56px;
+  height: 64px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-blue-cobalt);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.iconWrap svg {
+  width: 26px;
+  height: 26px;
+  stroke: currentColor;
+  stroke-width: 2;
+  fill: none;
+}
+
+.name {
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--c-cobalt-900);
+}
+
+.tagline {
+  font-size: 15px;
+  color: var(--c-cobalt-700);
+  line-height: 1.5;
+}
+.tagline :global(.next-blue) { color: var(--c-nextcloud-blue); }
+
+.meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
+  padding-top: 20px;
+  border-top: 1px solid var(--c-cobalt-100);
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-700);
+}
+
+.ver {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  color: var(--c-cobalt-400);
+}
+
+/* "Browse all" link */
+.seeAll {
+  margin-top: 32px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--c-blue-cobalt);
+  font-weight: 600;
+  font-size: 15px;
+  text-decoration: none;
+  border-bottom: 2px solid var(--c-orange-knvb);
+  padding-bottom: 2px;
+}
+.seeAll:hover {
+  color: var(--c-orange-knvb);
+  text-decoration: none;
+}

package/src/components/Clients/Clients.jsx

@@ -0,0 +1,205 @@
+/**
+ * <Clients />
+ *
+ * Public-sector and ecosystem logo wall. Trust-signal section for the
+ * Conduction landing, separate from <PartnerCard /> which is the
+ * commercial implementation-partner row on /partners.
+ *
+ * Two variants:
+ *   - "grid"    (default): static columns, used for the partners row
+ *                          and any short logo set
+ *   - "marquee": three pointy-top hex rows, honeycomb stagger, all
+ *                lanes scroll right-to-left at the same speed so the
+ *                rows read as one continuous wall. Logos default to
+ *                grayscale and restore colour on hover; the lane pauses
+ *                on hover and respects prefers-reduced-motion. Below
+ *                720px it collapses to a single lane.
+ *
+ * Logos live in sites/www/static/img/clients/ and ship via the brand
+ * assets folder; the kit's downloads page mirrors the same set.
+ */
+
+import React from 'react';
+import Head from '@docusaurus/Head';
+import SectionHead from '../primitives/SectionHead';
+import {useLazyScript} from '../../utils/lazyScript';
+import styles from './Clients.module.css';
+
+const LOGO_MEMORY_BASE = '/lib';
+
+export const DEFAULT_CLIENTS = [
+  {name: 'Albrandswaard',     src: '/img/clients/albrandswaard.png'},
+  {name: 'Alkmaar',           src: '/img/clients/alkmaar.png'},
+  {name: 'Amsterdam',         src: '/img/clients/amsterdam.png'},
+  {name: 'Baarn',             src: '/img/clients/baarn.png'},
+  {name: 'Barendrecht',       src: '/img/clients/barendrecht.png'},
+  {name: 'Barneveld',         src: '/img/clients/barneveld.svg'},
+  {name: 'Beek',              src: '/img/clients/beek.svg'},
+  {name: 'Breda',             src: '/img/clients/breda.png'},
+  {name: 'Buren',             src: '/img/clients/buren.png'},
+  {name: 'DBP',               src: '/img/clients/dbp.svg'},
+  {name: 'De Bilt',           src: '/img/clients/de-bilt.svg'},
+  {name: 'Delft',             src: '/img/clients/delft.png'},
+  {name: 'Dinkelland',        src: '/img/clients/dinkelland.png'},
+  {name: 'Edam-Volendam',     src: '/img/clients/edam-volendam.png'},
+  {name: 'Ede',               src: '/img/clients/ede.svg'},
+  {name: 'Epe',               src: '/img/clients/epe.png'},
+  {name: 'Gooise Meren',      src: '/img/clients/gooise-meren.svg'},
+  {name: 'Gouda',             src: '/img/clients/gouda.png'},
+  {name: 'Hoeksche Waard',    src: '/img/clients/hoeksche-waard.png'},
+  {name: 'Hof van Twente',    src: '/img/clients/hof-van-twente.svg'},
+  {name: 'Kansspelautoriteit', src: '/img/clients/ksa.svg'},
+  {name: 'Lansingerland',     src: '/img/clients/lansingerland.svg'},
+  {name: 'Meppel',            src: '/img/clients/meppel.svg'},
+  {name: 'Moerdijk',          src: '/img/clients/moerdijk.svg'},
+  {name: 'Molenlanden',       src: '/img/clients/molenlanden.png'},
+  {name: 'Noaberkracht',      src: '/img/clients/noaberkracht.svg'},
+  {name: 'Noordwijk',         src: '/img/clients/noordwijk.svg'},
+  {name: 'ODMH',              src: '/img/clients/odmh.svg'},
+  {name: 'Oude IJsselstreek', src: '/img/clients/oude-ijsselstreek.png'},
+  {name: 'Overbetuwe',        src: '/img/clients/over-betuwe.svg'},
+  {name: 'Provincie Zeeland', src: '/img/clients/provincie-zeeland.svg'},
+  {name: 'Ridderkerk',        src: '/img/clients/ridderkerk.png'},
+  {name: 'Rijswijk',          src: '/img/clients/rijswijk.png'},
+  {name: 'Roosendaal',        src: '/img/clients/roosendaal.svg'},
+  {name: 'Rotterdam',         src: '/img/clients/rotterdam.png'},
+  {name: 'Soest',             src: '/img/clients/soest.svg'},
+  {name: 'Stichtse Vecht',    src: '/img/clients/stichtse-vecht.svg'},
+  {name: 'SURF',              src: '/img/clients/surf.svg'},
+  {name: 'Tilburg',           src: '/img/clients/tilburg.png'},
+  {name: 'Tubbergen',         src: '/img/clients/tubbergen.png'},
+  {name: 'VNG',               src: '/img/clients/vng.png'},
+  {name: 'Zutphen',           src: '/img/clients/zutphen.svg'},
+  {name: 'Zwolle',            src: '/img/clients/zwolle.svg'},
+];
+
+export const DEFAULT_PARTNERS = [
+  {name: 'Nextcloud',          src: '/img/clients/nextcloud.png'},
+  {name: 'iO',                 src: '/img/clients/io.webp'},
+  {name: 'Ritense',            src: '/img/clients/ritense.png'},
+  {name: 'Shift2',             src: '/img/clients/Shift2.png'},
+  {name: 'Open Webconcept',    src: '/img/clients/open_webconcept.png'},
+  {name: 'SIDN Fonds',         src: '/img/clients/SIDN.png'},
+  {name: 'BCT',                src: '/img/clients/bct.png'},
+];
+
+function splitIntoRows(items, rowCount) {
+  const rows = Array.from({length: rowCount}, () => []);
+  items.forEach((item, i) => rows[i % rowCount].push(item));
+  /* Pad shorter rows with duplicates from their own front so every row
+     has the same length and the same track width. Without this, the
+     marquee's translateX(-50%) animation drifts the rows out of
+     honeycomb alignment because each track's 50% resolves to a
+     different pixel offset. */
+  const max = Math.max(...rows.map(r => r.length));
+  rows.forEach(r => {
+    let i = 0;
+    while (r.length < max) {
+      r.push(r[i % (r.length || 1)]);
+      i++;
+    }
+  });
+  return rows;
+}
+
+/* ClientsMarquee
+ *
+ * Marquee variant body. The hex wall is now driven by the JS runtime
+ * lib/clients-flow.js: each row is a static relative band, the runtime
+ * spawns absolutely-positioned hex anchors on the right with random
+ * logos from the supplied pool, drifts them left, and culls them once
+ * they leave the viewport. We render only the empty row containers
+ * here and pass the client pool through as a data-clients JSON
+ * attribute. CSS Modules hashes the .hex / .hexLogo class names, so
+ * the runtime needs them via data-hex-class / data-hex-logo-class to
+ * style its spawned children consistently.
+ *
+ * Logo Memory's click trigger still works the same way — the runtime
+ * spawns real <a class={styles.hex}> elements, so e.target.closest('a')
+ * inside the click handler picks them up.
+ */
+function ClientsMarquee({head, clients, title, className}) {
+  useLazyScript(LOGO_MEMORY_BASE + '/clients-flow.js', 'clients-flow');
+  useLazyScript(LOGO_MEMORY_BASE + '/logo-memory.js', 'logo-memory');
+  React.useEffect(() => {
+    if (window.ConductionClientsFlow?.hydrate) window.ConductionClientsFlow.hydrate();
+    if (window.LogoMemory?.hydrate) window.LogoMemory.hydrate();
+  });
+  const clientsJson = React.useMemo(() => JSON.stringify(clients), [clients]);
+  return (
+    <>
+      <Head>
+        <link rel="stylesheet" href={LOGO_MEMORY_BASE + '/logo-memory.css'} />
+      </Head>
+      <section
+        className={[styles.section, className].filter(Boolean).join(' ')}
+        data-logo-memory
+      >
+        <div className={styles.inner}>{head}</div>
+        <div
+          className={styles.marquee}
+          data-memory-marquee
+          data-clients={clientsJson}
+          data-hex-class={styles.hex}
+          data-hex-logo-class={styles.hexLogo}
+          role="region"
+          aria-label={typeof title === 'string' ? title : 'Clients'}
+        >
+          <div data-flow-row className={[styles.row, styles.row1].join(' ')} />
+          <div data-flow-row className={[styles.row, styles.row2].join(' ')} />
+          <div data-flow-row className={[styles.row, styles.row3].join(' ')} />
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default function Clients({
+  eyebrow = 'Who we work with',
+  title = 'Public sector, ecosystem, partners.',
+  lede,
+  clients = DEFAULT_CLIENTS,
+  variant = 'grid',
+  className,
+}) {
+  const head = (
+    <SectionHead
+      eyebrow={eyebrow}
+      title={title}
+      align="stack"
+      lede={lede}
+    />
+  );
+
+  if (variant === 'marquee') {
+    return (
+      <ClientsMarquee
+        head={head}
+        clients={clients}
+        title={title}
+        className={className}
+      />
+    );
+  }
+
+  return (
+    <section className={[styles.section, className].filter(Boolean).join(' ')}>
+      <div className={styles.inner}>
+        {head}
+        <div className={styles.grid} role="list">
+          {clients.map((c, i) => (
+            <div key={i} className={styles.cell} role="listitem">
+              <img
+                src={c.src}
+                alt={c.name}
+                title={c.name}
+                loading="lazy"
+                className={styles.logo}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}