@conduction/docusaurus-preset 2.1.1 → 2.2.0

package/package.json

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

package/src/components/WidgetMock/WidgetMock.jsx

@@ -0,0 +1,94 @@
+/**
+ * <WidgetMock />
+ *
+ * Standalone abstract of a Nextcloud dashboard widget that a
+ * Conduction app registers (DocuDesk anonymise, Procest werkvoorraad,
+ * OpenRegister activity, etc.) plus a few of the stock Nextcloud
+ * widgets we frame around (Mail, Calendar, Files, Decks, RSS).
+ *
+ * Companion to <AppMock />: AppMock paints the whole product surface
+ * (topbar + nav + col + optional sidebar); WidgetMock paints just one
+ * tile, sized for inline use in marketing copy or docs that talk
+ * about a single integration point.
+ *
+ * Visual reference: every Conduction widget renders against a dashboard
+ * background (cobalt-900 in MyDash, white in stock Nextcloud). The
+ * WidgetMock chrome is cobalt to match MyDash since most Conduction
+ * widgets are built for that surface; the same widget atoms render
+ * fine on white when reused there.
+ *
+ * Usage:
+ *
+ *   <WidgetMock kind="procest-werkvoorraad" />
+ *   <WidgetMock kind="docudesk-anonymise" caption />
+ *   <WidgetMock kind="nextcloud-calendar" size="sm" />
+ *
+ * Props:
+ *   - kind:    one of VARIANTS keys                   (required)
+ *   - size:    'sm' | 'md' (default) | 'lg'           — frame width
+ *   - caption: boolean                                — adds a small
+ *                                                       label below
+ *                                                       the frame
+ *   - className: string
+ */
+
+import React from 'react';
+import styles from './WidgetMock.module.css';
+import amStyles from '../AppMock/AppMock.module.css';
+
+import DocuDeskAnonymise       from './variants/DocuDeskAnonymise.jsx';
+import DocuDeskPendingSign     from './variants/DocuDeskPendingSign.jsx';
+import ProcestWerkvoorraad     from './variants/ProcestWerkvoorraad.jsx';
+import ProcestDueToday         from './variants/ProcestDueToday.jsx';
+import OpenRegisterActivity    from './variants/OpenRegisterActivity.jsx';
+import OpenCatalogiPublications from './variants/OpenCatalogiPublications.jsx';
+import OpenConnectorRuns       from './variants/OpenConnectorRuns.jsx';
+import DeciDeskActions         from './variants/DeciDeskActions.jsx';
+import PipelinQDeals           from './variants/PipelinQDeals.jsx';
+import NextcloudMail           from './variants/NextcloudMail.jsx';
+import NextcloudCalendar       from './variants/NextcloudCalendar.jsx';
+import NextcloudFiles          from './variants/NextcloudFiles.jsx';
+import NextcloudDecks          from './variants/NextcloudDecks.jsx';
+import NextcloudRss            from './variants/NextcloudRss.jsx';
+
+const VARIANTS = {
+  'docudesk-anonymise':       { Component: DocuDeskAnonymise,       label: 'DocuDesk · Anonymise drop' },
+  'docudesk-pending-sign':    { Component: DocuDeskPendingSign,     label: 'DocuDesk · Pending signatures' },
+  'procest-werkvoorraad':     { Component: ProcestWerkvoorraad,     label: 'Procest · Werkvoorraad' },
+  'procest-due-today':        { Component: ProcestDueToday,         label: 'Procest · Due today' },
+  'openregister-activity':    { Component: OpenRegisterActivity,    label: 'OpenRegister · Activity' },
+  'opencatalogi-publications':{ Component: OpenCatalogiPublications,label: 'OpenCatalogi · Recent publications' },
+  'openconnector-runs':       { Component: OpenConnectorRuns,       label: 'OpenConnector · Recent runs' },
+  'decidesk-actions':         { Component: DeciDeskActions,         label: 'DeciDesk · Action items' },
+  'pipelinq-deals':           { Component: PipelinQDeals,           label: 'PipelinQ · Deals closing' },
+  'nextcloud-mail':           { Component: NextcloudMail,           label: 'Nextcloud · Important mail' },
+  'nextcloud-calendar':       { Component: NextcloudCalendar,       label: 'Nextcloud · Calendar' },
+  'nextcloud-files':          { Component: NextcloudFiles,          label: 'Nextcloud · Recent files' },
+  'nextcloud-decks':          { Component: NextcloudDecks,          label: 'Nextcloud · Decks' },
+  'nextcloud-rss':            { Component: NextcloudRss,            label: 'Nextcloud · RSS feed' },
+};
+
+export default function WidgetMock({ kind, size = 'md', caption = false, className }) {
+  const variant = VARIANTS[kind];
+  const wrap = [amStyles.am, styles.wm].filter(Boolean).join(' ');
+  if (!variant) {
+    return (
+      <div className={wrap}>
+        <div className={[styles.wmFrame, styles[`wm-size-${size}`]].filter(Boolean).join(' ')}>
+          <div style={{ color: 'var(--c-cobalt-200)', fontSize: 11 }}>Unknown widget: {kind}</div>
+        </div>
+      </div>
+    );
+  }
+  const { Component, label } = variant;
+  return (
+    <div className={wrap}>
+      <figure className={[styles.wmFigure, className].filter(Boolean).join(' ')}>
+        <div className={[styles.wmFrame, styles[`wm-size-${size}`]].filter(Boolean).join(' ')}>
+          <Component />
+        </div>
+        {caption && <figcaption className={styles.wmCaption}>{label}</figcaption>}
+      </figure>
+    </div>
+  );
+}

package/src/components/WidgetMock/WidgetMock.module.css

@@ -0,0 +1,61 @@
+/**
+ * <WidgetMock /> styles.
+ *
+ * The widget atoms themselves (.w, .w-mail, .w-calendar, .w-files,
+ * .w-decks, .w-rss, .w-jira, .w-video, .w-upload, .w-werkvoorraad,
+ * .w-launcher, .w-subgrid, .w-graph-bar / .w-graph-line / .w-graph-donut)
+ * live in AppMock/AppMock.module.css under the `.am` parent scope.
+ * They were authored there because MyDash variants render dashboard
+ * grids full of them. WidgetMock standalonises a single widget:
+ * same atoms, new chrome.
+ *
+ * To get both rule sets, every WidgetMock instance wraps content in
+ * <div className={[styles.am, styles.wm].join(' ')}>. The static
+ * kit page uses <div class="am wm"> for the same effect.
+ *
+ * The .wm parent here is `display: contents` so the wrapper doesn't
+ * affect layout. .wmFrame is the container that gives the widget its
+ * native dashboard background (cobalt-900) and a shadow, so it reads
+ * as a tile lifted off the page.
+ */
+
+.am.wm { display: contents; }
+
+.am .wmFigure {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  align-items: flex-start;
+}
+
+.am .wmFrame {
+  background: var(--c-cobalt-900);
+  border-radius: var(--radius-md);
+  padding: 12px;
+  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+}
+
+/* Widget sizes. The .w block inside fills the frame. */
+.am .wmFrame.wm-size-sm { width: 220px; aspect-ratio: 5 / 4; }
+.am .wmFrame.wm-size-md { width: 300px; aspect-ratio: 5 / 4; }
+.am .wmFrame.wm-size-lg { width: 380px; aspect-ratio: 5 / 4; }
+
+/* The widget atom (.w) inside should fill the frame and not have its
+   own outer shadow, since wmFrame already provides one. */
+.am .wmFrame > .w {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+}
+
+.am .wmCaption {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-400);
+  margin: 0;
+}

package/src/components/WidgetMock/variants/DeciDeskActions.jsx

@@ -0,0 +1,27 @@
+/**
+ * DeciDesk · Action items widget.
+ *
+ * Action items assigned to the viewer, sorted by due date. .w-jira
+ * atom: id slot is the source decision, pip slot is status (orange =
+ * due this week, red = overdue, mint = done, cobalt-200 = upcoming).
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function DeciDeskActions() {
+  return (
+    <div className={[styles.w, styles['w-jira']].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.blocked].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+        <div className={[styles.item, styles.review].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+        <div className={[styles.item, styles.review].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+        <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+        <div className={[styles.item, styles.todo].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+      </div>
+    </div>
+  );
+}

package/src/components/WidgetMock/variants/DocuDeskAnonymise.jsx

@@ -0,0 +1,24 @@
+/**
+ * DocuDesk · Anonymise drop widget.
+ *
+ * Drop a document into the dashboard tile, get back a redacted copy.
+ * Visual: dashed cobalt drop-zone with a hex glyph. Status-pill is
+ * absent: this widget is action-first, not status-first.
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function DocuDeskAnonymise() {
+  return (
+    <div className={[styles.w, styles['w-upload']].join(' ')}>
+      <div className={styles.wHead}>
+        <div className={styles.h}></div>
+        <div className={styles.t}></div>
+      </div>
+      <div className={styles.zone}>
+        <div className={styles.ico}></div>
+        <div className={styles.label}></div>
+      </div>
+    </div>
+  );
+}

package/src/components/WidgetMock/variants/DocuDeskPendingSign.jsx

@@ -0,0 +1,28 @@
+/**
+ * DocuDesk · Pending signatures widget.
+ *
+ * Documents waiting on someone's signature, ranked by oldest. Reuses
+ * the .w-jira atom (id + title + status pip): id slot reads as a
+ * document type tag, pip slot reads as a status (orange = waiting,
+ * red = blocked, mint = done in the last day, cobalt-200 = no action).
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function DocuDeskPendingSign() {
+  return (
+    <div className={[styles.w, styles['w-jira']].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.review].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+        <div className={[styles.item, styles.review].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+        <div className={[styles.item, styles.blocked].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+        <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+        <div className={[styles.item, styles.todo].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+      </div>
+    </div>
+  );
+}

package/src/components/WidgetMock/variants/NextcloudCalendar.jsx

@@ -0,0 +1,37 @@
+/**
+ * Nextcloud · Calendar widget (stock, framed for context).
+ *
+ * 7-column day grid covering four weeks. .today = orange (the
+ * dashboard's "right now"), .event = cobalt-300 dot, .muted = leading
+ * or trailing days from neighbouring months.
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+const DAYS = [
+  2, 2, 1, 0, 0, 0, 2,
+  0, 0, 0, 3, 1, 0, 0,
+  0, 1, 0, 0, 0, 1, 0,
+  0, 0, 0, 0, 1, 0, 0,
+];
+
+export default function NextcloudCalendar() {
+  return (
+    <div className={[styles.w, styles['w-calendar']].join(' ')}>
+      <div className={styles.wHead}>
+        <div className={styles.h}></div>
+        <div className={styles.t}></div>
+      </div>
+      <div className={styles.grid}>
+        {DAYS.map((kind, i) => (
+          <div key={i} className={[
+            styles.day,
+            kind === 1 && styles.event,
+            kind === 2 && styles.muted,
+            kind === 3 && styles.today,
+          ].filter(Boolean).join(' ')}></div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/WidgetMock/variants/NextcloudDecks.jsx

@@ -0,0 +1,33 @@
+/**
+ * Nextcloud · Decks widget (stock, framed for context).
+ *
+ * Three kanban columns with cards. Coloured borders mark priority
+ * (.b = orange / urgent, .c = mint / done).
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function NextcloudDecks() {
+  return (
+    <div className={[styles.w, styles['w-decks']].join(' ')}>
+      <div className={styles.wHead}>
+        <div className={styles.h}></div>
+        <div className={styles.t}></div>
+      </div>
+      <div className={styles.columns}>
+        <div className={styles.col}>
+          <div className={styles.card}></div>
+          <div className={styles.card}></div>
+        </div>
+        <div className={styles.col}>
+          <div className={[styles.card, styles.b].join(' ')}></div>
+          <div className={styles.card}></div>
+          <div className={styles.card}></div>
+        </div>
+        <div className={styles.col}>
+          <div className={[styles.card, styles.c].join(' ')}></div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/WidgetMock/variants/NextcloudFiles.jsx

@@ -0,0 +1,26 @@
+/**
+ * Nextcloud · Recent files widget (stock, framed for context).
+ *
+ * File list with type-coloured icons: .folder = orange, .doc =
+ * terracotta, .sheet = forest. Last item plain (image / unknown).
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function NextcloudFiles() {
+  return (
+    <div className={[styles.w, styles['w-files']].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.folder].join(' ')}><div className={styles.ico}></div><div className={styles.l}></div></div>
+        <div className={[styles.item, styles.doc].join(' ')}><div className={styles.ico}></div><div className={styles.l}></div></div>
+        <div className={[styles.item, styles.sheet].join(' ')}><div className={styles.ico}></div><div className={styles.l}></div></div>
+        <div className={[styles.item, styles.doc].join(' ')}><div className={styles.ico}></div><div className={styles.l}></div></div>
+        <div className={styles.item}><div className={styles.ico}></div><div className={styles.l}></div></div>
+      </div>
+    </div>
+  );
+}

package/src/components/WidgetMock/variants/NextcloudMail.jsx

@@ -0,0 +1,28 @@
+/**
+ * Nextcloud · Important mail widget (stock, framed for context).
+ *
+ * Avatar list with two text lines (sender + subject). Class colour
+ * variants on .item give the avatar palette mix. We frame this as
+ * "the surface Conduction widgets sit next to" so MKB readers see
+ * the integration point clearly.
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function NextcloudMail() {
+  return (
+    <div className={[styles.w, styles['w-mail']].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.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+        <div className={[styles.item, styles.b].join(' ')}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+        <div className={[styles.item, styles.c].join(' ')}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+        <div className={[styles.item, styles.d].join(' ')}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+        <div className={styles.item}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+      </div>
+    </div>
+  );
+}

package/src/components/WidgetMock/variants/NextcloudRss.jsx

@@ -0,0 +1,26 @@
+/**
+ * Nextcloud · RSS feed widget (stock, framed for context).
+ *
+ * Three-column row: source badge, title, when. Mostly text, no avatar
+ * or pip needed since the feed metadata IS the status.
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function NextcloudRss() {
+  return (
+    <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 className={styles.item}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></div></div>
+      </div>
+    </div>
+  );
+}

package/src/components/WidgetMock/variants/OpenCatalogiPublications.jsx

@@ -0,0 +1,28 @@
+/**
+ * OpenCatalogi · Recent publications widget.
+ *
+ * The five most recent items federated to the public catalogue, each
+ * with a publication-type id badge, title, and status pip (mint =
+ * published, orange = pending review, vermillion = withdrawn).
+ * Reuses .w-jira atom.
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function OpenCatalogiPublications() {
+  return (
+    <div className={[styles.w, styles['w-jira']].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.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+        <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+        <div className={[styles.item, styles.review].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+        <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+        <div className={[styles.item, styles.blocked].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+      </div>
+    </div>
+  );
+}

package/src/components/WidgetMock/variants/OpenConnectorRuns.jsx

@@ -0,0 +1,27 @@
+/**
+ * OpenConnector · Recent runs widget.
+ *
+ * Last few integration runs with status pip (mint = success, orange =
+ * partial, red = failed, cobalt-200 = scheduled). Reuses .w-jira.
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function OpenConnectorRuns() {
+  return (
+    <div className={[styles.w, styles['w-jira']].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.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+        <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+        <div className={[styles.item, styles.review].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+        <div className={[styles.item, styles.blocked].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+        <div className={[styles.item, styles.todo].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+        <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+      </div>
+    </div>
+  );
+}

package/src/components/WidgetMock/variants/OpenRegisterActivity.jsx

@@ -0,0 +1,27 @@
+/**
+ * OpenRegister · Activity widget.
+ *
+ * Read and write rate over the past N hours, drawn as a line chart.
+ * The dot at the end is "now". Reuses .w-graph-line.
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function OpenRegisterActivity() {
+  return (
+    <div className={[styles.w, styles['w-graph-line']].join(' ')}>
+      <div className={styles.wHead}>
+        <div className={styles.h}></div>
+        <div className={styles.t}></div>
+      </div>
+      <div className={styles.chart}>
+        <svg viewBox="0 0 100 40" preserveAspectRatio="none">
+          <path className={styles.fill}   d="M0,30 L12,28 L24,32 L36,22 L48,26 L60,16 L72,18 L84,10 L100,14 L100,40 L0,40 Z"/>
+          <path className={styles.stroke} d="M0,30 L12,28 L24,32 L36,22 L48,26 L60,16 L72,18 L84,10 L100,14"/>
+          <circle className={styles.dot} cx="100" cy="14" r="2.5"/>
+        </svg>
+      </div>
+      <div className={styles.axis}></div>
+    </div>
+  );
+}

package/src/components/WidgetMock/variants/PipelinQDeals.jsx

@@ -0,0 +1,26 @@
+/**
+ * PipelinQ · Deals closing widget.
+ *
+ * Deals expected to close this week, ranked by value. Reuses .w-mail
+ * atom (avatar list with two lines): the avatar reads as the assigned
+ * sales rep, l1 is the deal name, l2 is value plus stage.
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function PipelinQDeals() {
+  return (
+    <div className={[styles.w, styles['w-mail']].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.b].join(' ')}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+        <div className={[styles.item, styles.c].join(' ')}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+        <div className={styles.item}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+        <div className={[styles.item, styles.d].join(' ')}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+      </div>
+    </div>
+  );
+}

package/src/components/WidgetMock/variants/ProcestDueToday.jsx

@@ -0,0 +1,28 @@
+/**
+ * Procest · Due today widget.
+ *
+ * Cases whose deadline lands today or earlier. Reuses .w-werkvoorraad
+ * but with more late items in red and one orange-active to read as
+ * "if you do nothing, this list grows red". Different framing from
+ * the regular werkvoorraad widget which is queue-shaped, not
+ * deadline-shaped.
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function ProcestDueToday() {
+  return (
+    <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.late].join(' ')}><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}></div></div>
+        <div className={[styles.item, styles.now].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, styles.b].join(' ')}></div></div>
+      </div>
+    </div>
+  );
+}

package/src/components/WidgetMock/variants/ProcestWerkvoorraad.jsx

@@ -0,0 +1,27 @@
+/**
+ * Procest · Werkvoorraad widget.
+ *
+ * The case worker's queue, with stage pip on the left, case title in
+ * the middle, owner avatar on the right. .now = active stage in
+ * orange, .late = SLA breached in red.
+ */
+import React from 'react';
+import styles from '../../AppMock/AppMock.module.css';
+
+export default function ProcestWerkvoorraad() {
+  return (
+    <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>
+  );
+}