@conduction/docusaurus-preset 2.1.1 → 2.3.0

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>
+  );
+}