@conduction/docusaurus-preset 2.1.1 → 2.3.0

package/package.json

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

package/src/components/AppMock/AppMock.jsx

@@ -17,11 +17,16 @@
  *   <AppMock app="mydash" />
  *   <AppMock app="openregister" caption />
  *   <AppMock app="decidesk" size="sm" />
+ *   <AppMock app="procest" sidebar={<SidebarMock kind="procest-xwiki" />} />
  *
  * Props:
- *   - app:     'mydash' | 'opencatalogi' | 'openconnector' |
- *              'openregister' | 'procest' | 'decidesk'  (required)
+ *   - app:     keyof VARIANTS                           (required)
  *   - size:    'sm' | 'md' (default)                    — frame width
+ *   - sidebar: ReactNode                                — renders inside
+ *              the right-edge overlay of the frame. Pass a SidebarMock
+ *              JSX to model a Nextcloud sidebar opened over this app
+ *              (e.g. xWiki tab over a Procest case). Any other node
+ *              renders verbatim
  *   - caption: boolean — adds a small app-name caption below the frame
  *   - className: string
  */
@@ -65,7 +70,7 @@ const VARIANTS = {
   zaakafhandelapp:  {Component: ZaakAfhandelAppMock,  label: 'ZaakAfhandelApp'},
 };
 
-export default function AppMock({app, size = 'md', caption = false, className}) {
+export default function AppMock({app, size = 'md', sidebar = null, caption = false, className}) {
   const variant = VARIANTS[app];
   if (!variant) {
     return (
@@ -77,11 +82,25 @@ export default function AppMock({app, size = 'md', caption = false, className})
     );
   }
   const {Component, label} = variant;
+  // The `sidebar` prop renders any node as a Nextcloud-style overlay
+  // panel pinned to the right edge of the frame. Typically a
+  // <SidebarMock kind="..." />; the SidebarMock component automatically
+  // drops its standalone chrome via the `embedded` flag we pass here.
+  // Anything else (custom JSX, an image, etc.) renders verbatim inside
+  // the overlay slot.
+  const renderedSidebar = React.isValidElement(sidebar)
+    ? React.cloneElement(sidebar, { embedded: true })
+    : sidebar;
   return (
     <div className={styles.am}>
       <figure className={[styles.figure, className].filter(Boolean).join(' ')}>
-        <div className={[styles.frame, styles[`size-${size}`]].filter(Boolean).join(' ')}>
+        <div className={[styles.frame, styles[`size-${size}`], renderedSidebar && styles.withSidebar].filter(Boolean).join(' ')}>
           <Component />
+          {renderedSidebar && (
+            <div className={styles.sidebarOverlay} aria-label="Sidebar overlay">
+              {renderedSidebar}
+            </div>
+          )}
         </div>
         {caption && <figcaption className={styles.caption}>{label}</figcaption>}
       </figure>

package/src/components/AppMock/AppMock.module.css

@@ -47,6 +47,27 @@
 .am .size-md { max-width: 720px; }
 .am .size-lg { max-width: 960px; }
 
+/* Sidebar overlay: when AppMock receives a `sidebar` prop, the
+   passed JSX renders pinned to the right edge of the frame, full
+   height, modeling a Nextcloud detail panel sliding over the app.
+   The .withSidebar modifier on .frame is a hook for variants that
+   want to dim the underlying canvas; today it doesn't add any
+   styles itself. */
+.am .frame .sidebarOverlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 32%;
+  min-width: 200px;
+  background: white;
+  border-left: 1px solid var(--c-cobalt-200);
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
 .am .caption {
   font-family: var(--conduction-typography-font-family-code);
   font-size: 11px;

package/src/components/SidebarMock/SidebarMock.jsx

@@ -0,0 +1,192 @@
+/**
+ * <SidebarMock />
+ *
+ * Token-painted abstract of the Nextcloud right-side detail panel.
+ * Each Conduction app registers tabs into specific Nextcloud
+ * sidebars (Procest adds xWiki + Timeline tabs to the case sidebar,
+ * DocuDesk adds Signatures + PII Map to the document sidebar, and
+ * so on). A SidebarMock variant represents one such sidebar with
+ * one tab active.
+ *
+ * Two render modes:
+ *
+ *   STANDALONE (default): wraps the panel in <div class="am sm"> with
+ *   a .smFrame card around it. Use in kit-page specimens or marketing
+ *   copy that talks about a single sidebar surface in isolation.
+ *
+ *     <SidebarMock kind="procest-xwiki" />
+ *
+ *   EMBEDDED: drops the frame so the panel slots directly into the
+ *   .sidebarOverlay slot inside an AppMock frame. Set automatically
+ *   by AppMock when the `sidebar` prop is a SidebarMock JSX element.
+ *
+ *     <AppMock app="procest" sidebar={<SidebarMock kind="procest-xwiki" />} />
+ *
+ * Header bar (title + close) and tab strip are chassis. Body content
+ * is per-variant: the JSX file under variants/ provides just the body
+ * children, the chassis wraps it.
+ *
+ * Status colour map matches WidgetMock and AppMock atoms:
+ *   mint     = stable / done / signed
+ *   orange   = active / pending / due soon
+ *   red      = blocked / overdue / failed
+ *   cobalt-200 = upcoming / idle / no action
+ *
+ * Props:
+ *   - kind:     one of VARIANTS keys      (required)
+ *   - embedded: boolean (default false)   — drop the standalone chrome
+ *                                           so this can render inside
+ *                                           an AppMock overlay slot
+ *   - className: string
+ */
+
+import React from 'react';
+import styles from './SidebarMock.module.css';
+import amStyles from '../AppMock/AppMock.module.css';
+
+import ProcestXWiki                  from './variants/ProcestXWiki.jsx';
+import ProcestTimeline               from './variants/ProcestTimeline.jsx';
+import DocuDeskSignatures            from './variants/DocuDeskSignatures.jsx';
+import DocuDeskPiiMap                from './variants/DocuDeskPiiMap.jsx';
+import OpenRegisterMetadata          from './variants/OpenRegisterMetadata.jsx';
+import OpenCatalogiPublicationHistory from './variants/OpenCatalogiPublicationHistory.jsx';
+import OpenConnectorRunDetail        from './variants/OpenConnectorRunDetail.jsx';
+import DeciDeskDecision              from './variants/DeciDeskDecision.jsx';
+import NextcloudActivity             from './variants/NextcloudActivity.jsx';
+
+/**
+ * Each VARIANTS entry carries:
+ *   Component: the JSX that fills the body
+ *   label:     human-readable name (used in caption / kit page)
+ *   tabs:      ordered list of tab labels with one marked active. The
+ *              labels are decorative (kit page renders width-fixed pills)
+ *              but the active flag drives the highlight.
+ */
+const VARIANTS = {
+  'procest-xwiki': {
+    Component: ProcestXWiki,
+    label: 'Procest · Case sidebar, xWiki tab',
+    tabs: [
+      { id: 'activity',  active: false },
+      { id: 'xwiki',     active: true  },
+      { id: 'timeline',  active: false },
+      { id: 'documents', active: false },
+    ],
+  },
+  'procest-timeline': {
+    Component: ProcestTimeline,
+    label: 'Procest · Case sidebar, Timeline tab',
+    tabs: [
+      { id: 'activity',  active: false },
+      { id: 'xwiki',     active: false },
+      { id: 'timeline',  active: true  },
+      { id: 'documents', active: false },
+    ],
+  },
+  'docudesk-signatures': {
+    Component: DocuDeskSignatures,
+    label: 'DocuDesk · Document sidebar, Signatures tab',
+    tabs: [
+      { id: 'activity',      active: false },
+      { id: 'signatures',    active: true  },
+      { id: 'pii',           active: false },
+      { id: 'versions',      active: false },
+    ],
+  },
+  'docudesk-pii-map': {
+    Component: DocuDeskPiiMap,
+    label: 'DocuDesk · Document sidebar, PII map tab',
+    tabs: [
+      { id: 'activity',      active: false },
+      { id: 'signatures',    active: false },
+      { id: 'pii',           active: true  },
+      { id: 'versions',      active: false },
+    ],
+  },
+  'openregister-metadata': {
+    Component: OpenRegisterMetadata,
+    label: 'OpenRegister · Object sidebar, Metadata tab',
+    tabs: [
+      { id: 'activity', active: false },
+      { id: 'metadata', active: true  },
+      { id: 'audit',    active: false },
+    ],
+  },
+  'opencatalogi-publication-history': {
+    Component: OpenCatalogiPublicationHistory,
+    label: 'OpenCatalogi · Publication sidebar, History tab',
+    tabs: [
+      { id: 'activity', active: false },
+      { id: 'history',  active: true  },
+      { id: 'sources',  active: false },
+    ],
+  },
+  'openconnector-run-detail': {
+    Component: OpenConnectorRunDetail,
+    label: 'OpenConnector · Run sidebar, Logs tab',
+    tabs: [
+      { id: 'activity', active: false },
+      { id: 'logs',     active: true  },
+      { id: 'mapping',  active: false },
+    ],
+  },
+  'decidesk-decision': {
+    Component: DeciDeskDecision,
+    label: 'DeciDesk · Decision sidebar, Detail tab',
+    tabs: [
+      { id: 'activity', active: false },
+      { id: 'detail',   active: true  },
+      { id: 'actions',  active: false },
+    ],
+  },
+  'nextcloud-activity': {
+    Component: NextcloudActivity,
+    label: 'Nextcloud · Stock activity feed',
+    tabs: [
+      { id: 'activity', active: true  },
+      { id: 'comments', active: false },
+    ],
+  },
+};
+
+export default function SidebarMock({ kind, embedded = false, className }) {
+  const variant = VARIANTS[kind];
+  if (!variant) {
+    return (
+      <div className={[amStyles.am, styles.sm].filter(Boolean).join(' ')}>
+        <div className={styles.smFrame}>
+          <div style={{ padding: 12, color: 'var(--c-cobalt-400)', fontSize: 11 }}>Unknown sidebar: {kind}</div>
+        </div>
+      </div>
+    );
+  }
+  const { Component, tabs } = variant;
+  const panel = (
+    <div className={styles.smPanel}>
+      <div className={styles.smHead}>
+        <div className={styles.smTitle}></div>
+        <div className={styles.smClose}></div>
+      </div>
+      {tabs && tabs.length > 0 && (
+        <div className={styles.smTabs}>
+          {tabs.map((t, i) => (
+            <div key={t.id || i} className={[styles.smTab, t.active && styles.smTabActive].filter(Boolean).join(' ')}></div>
+          ))}
+        </div>
+      )}
+      <div className={styles.smBody}>
+        <Component />
+      </div>
+    </div>
+  );
+
+  if (embedded) return panel;
+
+  return (
+    <div className={[amStyles.am, styles.sm, className].filter(Boolean).join(' ')}>
+      <div className={styles.smFrame}>
+        {panel}
+      </div>
+    </div>
+  );
+}

package/src/components/SidebarMock/SidebarMock.module.css

@@ -0,0 +1,252 @@
+/**
+ * <SidebarMock /> styles.
+ *
+ * Models the Nextcloud right-side detail panel (the surface where
+ * apps register tabs: Activity, Comments, plus app-specific extensions
+ * like Procest's xWiki tab or DocuDesk's Signatures tab).
+ *
+ * Two render modes share the same panel internals:
+ *
+ *   1. STANDALONE (default): the panel renders inside <div class="am sm">
+ *      with .smFrame around it (white card, shadow, border-radius). Used
+ *      in kit-page specimens and inline marketing copy.
+ *
+ *   2. EMBEDDED: the panel renders inside an <AppMock>'s .sidebarOverlay
+ *      via the AppMock `sidebar` prop. The overlay positions absolutely
+ *      against the right of the frame and extends full height. SidebarMock
+ *      drops the frame/shadow/radius in this mode so it slots cleanly.
+ *
+ * Both modes pass through the same atom toolkit defined under .smBody
+ * here (rows, lists, kvs, log lines). Body content is per-variant.
+ */
+
+.am.sm { display: contents; }
+
+/* ---- Standalone chrome ---- */
+
+.am .smFrame {
+  width: 300px;
+  height: 400px;
+  background: white;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--c-cobalt-100);
+  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ---- Panel internals (used in both modes) ---- */
+
+.am .smPanel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  background: white;
+}
+
+/* Header: title bar plus close button. */
+.am .smHead {
+  padding: 10px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-bottom: 1px solid var(--c-cobalt-100);
+  flex-shrink: 0;
+}
+.am .smHead .smTitle {
+  flex: 1;
+  height: 5px;
+  background: var(--c-cobalt-700);
+  border-radius: 1px;
+}
+.am .smHead .smClose {
+  width: 10px;
+  height: 10px;
+  background: var(--c-cobalt-300);
+  border-radius: 1px;
+  flex-shrink: 0;
+}
+
+/* Tab strip: each tab is a width-fixed pill. Active tab is cobalt with
+   a 2px underline that crosses the .smTabs bottom border. */
+.am .smTabs {
+  display: flex;
+  padding: 0 12px;
+  gap: 8px;
+  border-bottom: 1px solid var(--c-cobalt-100);
+  flex-shrink: 0;
+}
+.am .smTab {
+  height: 4px;
+  width: 28px;
+  background: var(--c-cobalt-200);
+  border-radius: 1px;
+  margin: 10px 0 8px;
+  position: relative;
+}
+.am .smTab.smTabActive {
+  background: var(--c-blue-cobalt);
+}
+.am .smTab.smTabActive::after {
+  content: "";
+  position: absolute;
+  bottom: -8px;
+  left: -2px;
+  right: -2px;
+  height: 2px;
+  background: var(--c-blue-cobalt);
+  border-radius: 1px;
+}
+
+/* Body: scrolling region with stacked sections. */
+.am .smBody {
+  flex: 1;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* ---- Body atoms ---- */
+
+/* Generic row. Defaults to a thin neutral bar. Modifiers below tweak it. */
+.am .smBody .row {
+  height: 3px;
+  background: var(--c-cobalt-200);
+  border-radius: 1px;
+  flex-shrink: 0;
+}
+.am .smBody .row.head {
+  height: 5px;
+  width: 55%;
+  background: var(--c-cobalt-700);
+  margin-bottom: 4px;
+}
+.am .smBody .row.short { width: 35%; }
+.am .smBody .row.med   { width: 70%; }
+.am .smBody .row.dark  { background: var(--c-cobalt-700); }
+.am .smBody .row.accent { background: var(--c-orange-knvb); }
+
+/* Section break: horizontal rule with a bit of vertical breathing. */
+.am .smBody .smBreak {
+  height: 1px;
+  background: var(--c-cobalt-100);
+  margin: 4px 0;
+}
+
+/* Subhead: small block-level title that introduces a section. */
+.am .smBody .smSub {
+  height: 4px;
+  width: 40%;
+  background: var(--c-cobalt-700);
+  border-radius: 1px;
+  margin-top: 4px;
+}
+
+/* Key-value list (used for metadata sidebars). Each row is a label +
+   value pair. Label is a short cobalt-400 bar, value is a longer
+   cobalt-700 bar. */
+.am .smBody .smKv {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.am .smBody .smKv .k {
+  height: 3px;
+  width: 30%;
+  background: var(--c-cobalt-400);
+  border-radius: 1px;
+  flex-shrink: 0;
+}
+.am .smBody .smKv .v {
+  flex: 1;
+  height: 3px;
+  background: var(--c-cobalt-700);
+  border-radius: 1px;
+}
+
+/* Person row (used for signatures, comments, talk). Avatar plus two
+   text rows plus an optional status pip on the right. */
+.am .smBody .smPerson {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.am .smBody .smPerson .av {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--c-mint-300);
+  flex-shrink: 0;
+}
+.am .smBody .smPerson.b .av { background: var(--c-lavender-300); }
+.am .smBody .smPerson.c .av { background: var(--c-orange-knvb); }
+.am .smBody .smPerson.d .av { background: var(--c-forest-300); }
+.am .smBody .smPerson.e .av { background: var(--c-terracotta-300); }
+.am .smBody .smPerson .lines {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.am .smBody .smPerson .l1 { height: 3px; width: 70%; background: var(--c-cobalt-700); border-radius: 1px; }
+.am .smBody .smPerson .l2 { height: 2px; width: 50%; background: var(--c-cobalt-300); border-radius: 1px; }
+.am .smBody .smPerson .pip {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--c-mint-500);
+  flex-shrink: 0;
+}
+.am .smBody .smPerson.pending .pip { background: var(--c-orange-knvb); }
+.am .smBody .smPerson.blocked .pip { background: var(--c-red-vermillion); }
+
+/* Stage timeline: vertical list with a left-side rail and stage hexes. */
+.am .smBody .smStage {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.am .smBody .smStage .h {
+  width: 10px;
+  height: 11px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-mint-500);
+  flex-shrink: 0;
+}
+.am .smBody .smStage.now .h    { background: var(--c-orange-knvb); }
+.am .smBody .smStage.todo .h   { background: var(--c-cobalt-200); }
+.am .smBody .smStage.late .h   { background: var(--c-red-vermillion); }
+.am .smBody .smStage .lines    { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.am .smBody .smStage .l1       { height: 3px; width: 60%; background: var(--c-cobalt-700); border-radius: 1px; }
+.am .smBody .smStage .l2       { height: 2px; width: 40%; background: var(--c-cobalt-300); border-radius: 1px; }
+
+/* Log line: monospace-ish row with a status colour at the start. */
+.am .smBody .smLog {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.am .smBody .smLog .ts { width: 22px; height: 3px; background: var(--c-cobalt-400); border-radius: 1px; flex-shrink: 0; }
+.am .smBody .smLog .msg { flex: 1; height: 3px; background: var(--c-cobalt-700); border-radius: 1px; }
+.am .smBody .smLog.warn .ts { background: var(--c-orange-knvb); }
+.am .smBody .smLog.error .ts { background: var(--c-red-vermillion); }
+
+/* PII tag: a small inline pill for redacted content. */
+.am .smBody .smPiiBlock {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.am .smBody .smPii {
+  height: 6px;
+  background: var(--c-cobalt-200);
+  border-radius: 1px;
+}
+.am .smBody .smPii.redacted { background: var(--c-red-vermillion); }
+.am .smBody .smPii.suggested { background: var(--c-orange-knvb); }

package/src/components/SidebarMock/variants/DeciDeskDecision.jsx

@@ -0,0 +1,36 @@
+/**
+ * DeciDesk · decision sidebar, Detail tab.
+ *
+ * Body of a single decision: title, decision summary paragraph, then
+ * structured fields (date, source meeting, decision-maker) and an
+ * action-items section showing who owns the follow-up.
+ */
+import React from 'react';
+import styles from '../SidebarMock.module.css';
+
+export default function DeciDeskDecision() {
+  return (
+    <>
+      <div className={[styles.row, styles.head].join(' ')}></div>
+      <div className={styles.row}></div>
+      <div className={[styles.row, styles.med].join(' ')}></div>
+      <div className={styles.smBreak}></div>
+      <div className={styles.smSub}></div>
+      <div className={styles.smKv}><div className={styles.k}></div><div className={styles.v}></div></div>
+      <div className={styles.smKv}><div className={styles.k}></div><div className={styles.v}></div></div>
+      <div className={styles.smKv}><div className={styles.k}></div><div className={styles.v}></div></div>
+      <div className={styles.smBreak}></div>
+      <div className={styles.smSub}></div>
+      <div className={styles.smPerson}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+        <div className={styles.pip}></div>
+      </div>
+      <div className={[styles.smPerson, styles.b, styles.pending].join(' ')}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+        <div className={styles.pip}></div>
+      </div>
+    </>
+  );
+}

package/src/components/SidebarMock/variants/DocuDeskPiiMap.jsx

@@ -0,0 +1,36 @@
+/**
+ * DocuDesk · document sidebar, PII map tab.
+ *
+ * Inline pills marking redacted spans (red) and suggested redactions
+ * (orange) within paragraphs. Reads as "here is what got covered up".
+ * Below: a key/value list of PII categories detected (BSN, IBAN, etc.)
+ * with counts.
+ */
+import React from 'react';
+import styles from '../SidebarMock.module.css';
+
+export default function DocuDeskPiiMap() {
+  return (
+    <>
+      <div className={[styles.row, styles.head].join(' ')}></div>
+      <div className={styles.smPiiBlock}>
+        <div className={styles.smPii} style={{ width: 30 }}></div>
+        <div className={[styles.smPii, styles.redacted].join(' ')} style={{ width: 22 }}></div>
+        <div className={styles.smPii} style={{ width: 40 }}></div>
+        <div className={[styles.smPii, styles.suggested].join(' ')} style={{ width: 18 }}></div>
+        <div className={styles.smPii} style={{ width: 26 }}></div>
+        <div className={[styles.smPii, styles.redacted].join(' ')} style={{ width: 30 }}></div>
+        <div className={styles.smPii} style={{ width: 16 }}></div>
+        <div className={[styles.smPii, styles.suggested].join(' ')} style={{ width: 34 }}></div>
+        <div className={styles.smPii} style={{ width: 22 }}></div>
+      </div>
+      <div className={styles.smBreak}></div>
+      <div className={styles.smSub}></div>
+      <div className={styles.smKv}><div className={styles.k}></div><div className={styles.v}></div></div>
+      <div className={styles.smKv}><div className={styles.k}></div><div className={styles.v}></div></div>
+      <div className={styles.smKv}><div className={styles.k}></div><div className={styles.v}></div></div>
+      <div className={styles.smKv}><div className={styles.k}></div><div className={styles.v}></div></div>
+      <div className={styles.smKv}><div className={styles.k}></div><div className={styles.v}></div></div>
+    </>
+  );
+}

package/src/components/SidebarMock/variants/DocuDeskSignatures.jsx

@@ -0,0 +1,43 @@
+/**
+ * DocuDesk · document sidebar, Signatures tab.
+ *
+ * List of recipients with status pip: signed (mint), pending (orange),
+ * blocked / declined (red). Avatar colour mix matches AppMock palette.
+ */
+import React from 'react';
+import styles from '../SidebarMock.module.css';
+
+export default function DocuDeskSignatures() {
+  return (
+    <>
+      <div className={[styles.row, styles.head].join(' ')}></div>
+      <div className={[styles.row, styles.short].join(' ')}></div>
+      <div className={styles.smBreak}></div>
+      <div className={styles.smPerson}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+        <div className={styles.pip}></div>
+      </div>
+      <div className={[styles.smPerson, styles.b].join(' ')}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+        <div className={styles.pip}></div>
+      </div>
+      <div className={[styles.smPerson, styles.c, styles.pending].join(' ')}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+        <div className={styles.pip}></div>
+      </div>
+      <div className={[styles.smPerson, styles.d, styles.pending].join(' ')}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+        <div className={styles.pip}></div>
+      </div>
+      <div className={[styles.smPerson, styles.e, styles.blocked].join(' ')}>
+        <div className={styles.av}></div>
+        <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+        <div className={styles.pip}></div>
+      </div>
+    </>
+  );
+}