Support using VerticalStepper with H3

Author: Blargian

plugins/remark-custom-blocks.js

@@ -18,6 +18,8 @@ const extractText = (nodes) => {
 const plugin = (options) => {
     const transformer = (tree, file) => {
 
+        let total_steps = 0; // Keep track of the total number of steps
+
         // Target JSX elements in the AST
         visit(tree, 'mdxJsxFlowElement', (node, index, parent) => {
             // Look specifically for the <VerticalStepper> tag used in the markdown file
@@ -27,12 +29,16 @@ const plugin = (options) => {
                     const jsxAttributes = node.attributes || [];
                     let type = "numbered"; // Default type
                     let isExpanded = true;
+                    let headerLevel = 2;
 
                     // Extract attributes
                     jsxAttributes.forEach(attr => {
                         if (attr.type === 'mdxJsxAttribute') {
                             if (attr.name === 'type' && typeof attr.value === 'string') {
                                 type = attr.value;
+                            } else if (attr.name === 'headerLevel' && typeof attr.value === 'string') {
+                                if (attr.value === "h3")
+                                    headerLevel = 3
                             }
                         }
                     });
@@ -52,18 +58,19 @@ const plugin = (options) => {
                                 anchorId: currentAnchorId,
                                 content: [...currentStepContent],
                             });
+                            total_steps++;
                         }
                         currentStepContent = [];
                         currentStepLabel = null; // Reset label
                     };
 
                     if (node.children && node.children.length > 0) {
                         node.children.forEach((child) => {
-                            if (child.type === 'heading' && child.depth === 2) {
+                            if (child.type === 'heading' && child.depth === headerLevel) {
                                 finalizeStep(); // Finalize the previous step first
                                 currentStepLabel = extractText(child.children);
                                 currentAnchorId = child.data.hProperties.id;
-                                currentStepId = `step-${stepsData.length + 1}`; // Generate step-X ID
+                                currentStepId = `step-${total_steps}`; // Generate step-X ID
                                 currentStepContent.push(child); // We need the header otherwise onBrokenAnchors fails
                             } else if (currentStepLabel) {
                                 // Only collect content nodes *after* a heading has defined a step
@@ -81,6 +88,7 @@ const plugin = (options) => {
                     // Set attributes
                     node.attributes = [
                         { type: 'mdxJsxAttribute', name: 'type', value: type },
+                        { type: 'mdxJsxAttribute', name: 'headerLevel', value: headerLevel },
                     ];
                     if (isExpanded) {
                         node.attributes.push({

src/components/Stepper/Stepper.tsx

@@ -8,6 +8,7 @@ interface StepProps {
     label?: React.ReactNode;
     forceExpanded?: string; // From parent 'expanded' state
     isFirstStep?: boolean; // Prop calculated by parent
+    headerType?: string;
     [key: string]: any;
 }
 
@@ -17,6 +18,7 @@ const Step = ({
                   label,
                   forceExpanded,
                   isFirstStep = false,
+                  headerType,
                   ...restProps
               }: StepProps) => {
 
@@ -34,14 +36,14 @@ const Step = ({
             const divChildren = Array.from(button.children).filter(el => el.tagName === 'DIV');
             const label = divChildren[1];
             const content = button.nextElementSibling;
-            const header = content.querySelectorAll('h2')[0]
+            const header = content.querySelectorAll(headerType)[0]
             header.style.margin = '0';
             button.append(header)
             label.remove()
         } catch (e) {
-            console.log('Error occurred in Stepper.tsx while swapping H2 for Click-UI label')
+            console.log(`Error occurred in Stepper.tsx while swapping ${headerType} for Click-UI label:`, e)
         }
-    }, [id]);
+    }, [id, headerType]);
 
     // Filter out props specific to this wrapper logic
     const {
@@ -69,6 +71,7 @@ interface StepperProps {
     type?: 'numbered' | 'bulleted';
     className?: string;
     expanded?: string; // Corresponds to allExpanded in MDX
+    headerLevel?: number;
     [key: string]: any;
 }
 
@@ -77,13 +80,19 @@ const VStepper = ({
                       children,
                       type = 'numbered',
                       className,
-                      expanded, // 'true' if allExpanded was set
+                      expanded,
+                      headerLevel,
                       ...props
                   }: StepperProps) => {
 
     // Determine if all steps should be expanded from the start
     const isExpandedMode = expanded === 'true';
 
+    let hType = 'h2';
+    if (headerLevel == 3) {
+        hType = 'h3'
+    }
+
     // Get children and filter out non-elements
     const childSteps = React.Children.toArray(children)
         .filter(child => React.isValidElement(child));
@@ -104,7 +113,8 @@ const VStepper = ({
             key: stepId,
             id: stepId,
             isFirstStep, // Pass down flag for first step logic
-            forceExpanded: isExpandedMode ? 'true' : undefined // Pass down expanded mode
+            forceExpanded: isExpandedMode ? 'true' : undefined, // Pass down expanded mode
+            headerType: hType
         });
     });