@conduction/docusaurus-preset 3.19.0 → 3.20.0

package/package.json

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

package/src/components/SetupSteps/SetupSteps.jsx

@@ -0,0 +1,81 @@
+/**
+ * <SetupSteps /> + <SetupStep />
+ *
+ * Vertical numbered-step list for docs setup/install/walkthrough
+ * sections and editorial action prompts. A small orange hex with a
+ * white number sits on the left of each row; bold title + one short
+ * body paragraph sit on the right.
+ *
+ * Distinct from <HowSteps />, which renders a 3-up card row for
+ * marketing surfaces (How install works, How to get help, …).
+ * SetupSteps lives in body prose where steps are sequential and
+ * detailed, and the list reads top to bottom.
+ *
+ * Numbers are auto-assigned in document order. Pass `start` to
+ * resume after a break (e.g. a continued procedure split across
+ * sections).
+ *
+ * Usage:
+ *
+ *   <SetupSteps title="Setup" lede="Numbered steps you read top to bottom.">
+ *     <SetupStep title="Add an xWiki source">
+ *       Open *Integrations → Sources → New source*, paste the base URL.
+ *     </SetupStep>
+ *     <SetupStep title="Pick the spaces to index">
+ *       Per source, choose one or more xWiki spaces.
+ *     </SetupStep>
+ *     <SetupStep title="Verify">
+ *       Open the app's chat sidebar and ask a matching question.
+ *     </SetupStep>
+ *   </SetupSteps>
+ *
+ *   // Editorial / action-prompt use, no h2 above the list:
+ *   <SetupSteps title={null}>
+ *     <SetupStep title="Call Nextcloud by its proper name.">
+ *       In tenders, in policy documents, in architecture diagrams.
+ *     </SetupStep>
+ *     ...
+ *   </SetupSteps>
+ *
+ * Mirrors preview/components/setup-steps.html.
+ */
+
+import React, {Children, cloneElement, isValidElement} from 'react';
+import styles from './SetupSteps.module.css';
+
+export function SetupStep({number, title, children, className}) {
+  const composed = [styles.row, className].filter(Boolean).join(' ');
+  return (
+    <div className={composed}>
+      {number != null && <div className={styles.num}>{number}</div>}
+      {/* div not p: MDX may wrap inline children in its own <p>,
+          which would be invalid nested inside another <p>. */}
+      <div className={styles.body}>
+        {title && <span className={styles.bodyTitle}>{title}</span>}
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default function SetupSteps({
+  title,
+  lede,
+  start = 1,
+  children,
+  className,
+}) {
+  const numbered = Children.map(children, (child, i) => {
+    if (!isValidElement(child)) return child;
+    if (child.props.number != null) return child;
+    return cloneElement(child, {number: start + i});
+  });
+  const composed = [styles.wrap, className].filter(Boolean).join(' ');
+  return (
+    <section className={composed}>
+      {title && <h2 className={styles.title}>{title}</h2>}
+      {lede && <p className={styles.lede}>{lede}</p>}
+      {numbered}
+    </section>
+  );
+}

package/src/components/SetupSteps/SetupSteps.module.css

@@ -0,0 +1,82 @@
+/**
+ * <SetupSteps /> + <SetupStep /> styles. Vertical numbered-row
+ * pattern for docs setup/install/walkthrough sections and editorial
+ * action lists. Small orange hex with a white number on the left,
+ * bold title + one short body paragraph on the right.
+ *
+ * Distinct from <HowSteps /> which is a 3-up card row for marketing
+ * surfaces. SetupSteps lives inside body prose, so steps stack
+ * vertically and read like sentences in a list.
+ *
+ * Mirrors preview/components/setup-steps.html.
+ */
+
+.wrap {
+  margin: var(--space-7) 0;
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--c-cobalt-900);
+  margin: 0 0 var(--space-3);
+  line-height: 1.2;
+}
+
+.lede {
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--c-cobalt-700);
+  margin: 0 0 var(--space-5);
+  max-width: 60ch;
+}
+
+.row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-4);
+  margin: var(--space-4) 0;
+}
+
+.num {
+  width: 36px;
+  height: 42px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-orange-knvb);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.body {
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--c-cobalt-700);
+}
+
+.body strong,
+.bodyTitle {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--c-cobalt-900);
+  font-size: 17px;
+  font-weight: 600;
+}
+
+.body p {
+  margin: 0;
+}
+
+.body code {
+  background: var(--c-cobalt-50);
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 13px;
+  color: var(--c-cobalt-900);
+}

package/src/components/index.js

@@ -48,6 +48,7 @@ export {default as ReferenceCard, ReferenceGrid} from './ReferenceCard/Reference
 export {default as PairCard, PairRow} from './PairCard/PairCard.jsx';
 export {default as FeatureList, FeatureItem} from './FeatureList/FeatureList.jsx';
 export {default as HowSteps, HowStep} from './HowSteps/HowSteps.jsx';
+export {default as SetupSteps, SetupStep} from './SetupSteps/SetupSteps.jsx';
 export {default as FAQ, FAQItem} from './FAQ/FAQ.jsx';
 export {default as EmployeeCard, TeamGrid} from './EmployeeCard/EmployeeCard.jsx';
 export {default as DetailHero} from './DetailHero/DetailHero.jsx';