Design system  /  Components  /  WidgetMock

WidgetMock. One tile, one job.

The single Nextcloud-dashboard tile abstraction. A Conduction app registers a widget, you talk about that widget standalone in marketing or docs, this is the picture you reach for. Companion to AppMock: same atom toolkit, smaller frame.

Chassis

One frame, fourteen variants, same atom toolkit.

Every widget is the same frame: a .w tile with a .wHead on top (hex glyph plus title bar) and a body that varies per kind. The variants split by visualisation pattern, not per app: a list, a grid, a graph, a drop-zone. Most widgets reuse the existing .w-mail, .w-jira, .w-graph-line etc. atoms from AppMock; WidgetMock just standalonises one.

Status mapping is consistent across every widget: mint means stable or done, orange means active or due soon, red means blocked or overdue, cobalt-200 means upcoming or no action. Read the colour, you know the priority. One orange accent per tile, never two.

Variants

Fourteen widgets, nine apps, one tile shape.

Nine Conduction widgets (DocuDesk anonymise plus pending-sign, Procest werkvoorraad plus due-today, OpenRegister activity, OpenCatalogi publications, OpenConnector runs, DeciDesk actions, PipelinQ deals) and five stock Nextcloud surfaces we frame around (Mail, Calendar, Files, Decks, RSS). Call from MDX as <WidgetMock kind="procest-werkvoorraad" />.

01

DocuDesk · Anonymise drop

INFERRED

Drop a document into the tile, get back a redacted copy. Action-first widget; no status pip, no list, just the drop-zone. Slug: docudesk-anonymise.

02

DocuDesk · Pending signatures

INFERRED

Documents waiting on a signature, ranked by oldest. Pip colour shows how stuck each one is: orange waiting, red blocked, cobalt-200 idle. Slug: docudesk-pending-sign.

03

Procest · Werkvoorraad

INFERRED

Your case queue. Stage pip on the left, case title in the middle, owner avatar on the right. Active stages glow orange, SLA breaches glow red. Slug: procest-werkvoorraad.

04

Procest · Due today

INFERRED

A deadline-shaped take on the same atom. Cases that hit their deadline today or earlier, mostly red. Read it, then act. Slug: procest-due-today.

05

OpenRegister · Activity

INFERRED

Read and write rate over the past N hours, drawn as a sparkline. The dot on the right is "now". Quick health glance for an admin. Slug: openregister-activity.

06

OpenCatalogi · Recent publications

INFERRED

Last five items federated to the public catalogue. Type badge on the left, title in the middle, status pip on the right. Slug: opencatalogi-publications.

07

OpenConnector · Recent runs

INFERRED

Last few integration runs with status pip: mint success, orange partial, red failed, cobalt-200 scheduled. Slug: openconnector-runs.

08

DeciDesk · Action items

INFERRED

Action items the viewer owns, sorted by due date. Pip colour separates overdue, due-this-week, done, and upcoming. Slug: decidesk-actions.

09

PipelinQ · Deals closing

INFERRED

Deals expected to close this week, ranked by value. Avatar reads as the assigned rep, l1 the deal name, l2 value plus stage. Slug: pipelinq-deals.

10

Nextcloud · Important mail

STOCK

The stock Nextcloud Mail dashboard widget, framed for context. Shown so MKB readers can place where Conduction widgets sit. Slug: nextcloud-mail.

11

Nextcloud · Calendar

STOCK

Stock Nextcloud calendar mini-grid: today in orange, events in cobalt-300, leading and trailing days muted. Slug: nextcloud-calendar.

12

Nextcloud · Recent files

STOCK

Stock recent-files widget. Type-coloured icons: orange folders, terracotta documents, forest sheets, plain images. Slug: nextcloud-files.

13

Nextcloud · Decks

STOCK

Stock Decks board. Three columns of cards with priority borders: orange urgent, mint done, plain default. Slug: nextcloud-decks.

14

Nextcloud · RSS feed

STOCK

Stock RSS reader. Source badge, title, when. No avatar, no pip; the metadata IS the status. Slug: nextcloud-rss.

Status. All fourteen variants are token-painted, no real text. The Conduction widgets are inferred from app role: each app's MDX product page describes which widgets it registers, and WidgetMock paints the canonical shape. Once a real widget ships and gets a screenshot, the variant gets a refinement pass. The five stock-Nextcloud variants are shaped from the Nextcloud upstream defaults.

The React component lives in docusaurus-preset/src/components/WidgetMock/. Each kind is a sibling JSX file under variants/, all sharing the same atom CSS in AppMock.module.css. The VARIANTS map maps a kebab-case slug to a variant component; pick one with <WidgetMock kind="..." />.