feat(components): Add StepConnector component

[codyde]

Summary

This PR introduces the StepConnector component - a visual component that connects sequential headings with a vertical rail and numbered circles, perfect for step-by-step guides and tutorials.

Features

• Visual connection of sequential headings with vertical rail and circles
• Optional step numbering inside circles (showNumbers prop)
• User-checkable completion state for interactive tutorials
• Session persistence for completion states
• Configurable starting number and heading selector
• Reset functionality for completed steps
• Full keyboard accessibility with ARIA attributes

Usage

// Basic usage
<StepConnector>
  <h2>First Step</h2>
  <p>Content...</p>
  <h2>Second Step</h2>
  <p>Content...</p>
</StepConnector>

// With checkable steps and custom options
<StepConnector 
  checkable 
  startAt={1}
  selector="h2"
  persistence="session"
  showReset
>
  {children}
</StepConnector>

Props

• startAt: Starting number for steps (default: 1)
• selector: CSS selector for headings to connect (default: 'h2')
• showNumbers: Show numbers inside circles (default: true)
• checkable: Allow users to mark steps complete (default: false)
• persistence: 'session' | 'none' for completion state storage (default: 'session')
• showReset: Show reset button when checkable (default: true)

Files Added

• src/components/stepConnector/index.tsx - Component implementation
• src/components/stepConnector/style.module.scss - Styles
• Updated src/mdxComponents.ts to register component for MDX usage

Status

• Component implementation complete
• Styles finalized
• Session persistence tested
• Accessibility tested
• MDX integration tested
• Documentation added
• Review requested

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
develop-docs	Ready	Preview	Comment	Sep 20, 2025 7:08am
sentry-docs	Ready	Preview	Comment	Sep 20, 2025 7:08am

[codecov]

Bundle Report

Changes will increase total bundle size by 10.15kB (0.04%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
sentry-docs-client-array-push	10.13MB	8.09kB (0.08%) ⬆️
sentry-docs-server-cjs	12.85MB	2.06kB (0.02%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: sentry-docs-client-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
static/chunks/pages/_app-*.js	-3 bytes	882.71kB	-0.0%
static/css/*.css	715 bytes	746.36kB	0.1%
static/css/*.css	1.97kB	21.39kB	10.13% ⚠️
static/chunks/8321-*.js	-3 bytes	425.87kB	-0.0%
server/app/api/ip-*.js	646 bytes	264.49kB	0.24%
server/app/_not-*.js	646 bytes	264.48kB	0.24%
server/app/[[...path]]/page_client-*.js	646 bytes	264.44kB	0.24%
server/app/platform-*.js	646 bytes	249.12kB	0.26%
static/chunks/app/[[...path]]/page-*.js	2.83kB	92.59kB	3.15%
static/bT8MOS1qTmUDT9PZA0jIa/_buildManifest.js (New)	684 bytes	684 bytes	100.0% 🚀
static/bT8MOS1qTmUDT9PZA0jIa/_ssgManifest.js (New)	77 bytes	77 bytes	100.0% 🚀
static/XNb0ryQLyyw3w6s_WOPZw/_buildManifest.js (Deleted)	-684 bytes	0 bytes	-100.0% 🗑️
static/XNb0ryQLyyw3w6s_WOPZw/_ssgManifest.js (Deleted)	-77 bytes	0 bytes	-100.0% 🗑️

Files in static/chunks/app/[[...path]]/page-*.js:

• ./src/components/stepConnector/style.module.scss → Total Size: 254 bytes

• ./src/components/stepConnector/index.tsx → Total Size: 7.05kB

view changes for bundle: sentry-docs-server-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
1729.js	-3 bytes	1.78MB	-0.0%
../instrumentation.js	-3 bytes	1.1MB	-0.0%
9523.js	-3 bytes	1.08MB	-0.0%
../app/[[...path]]/page.js	2.07kB	612.05kB	0.34%

Files in ../app/[[...path]]/page.js:

• ./src/components/stepConnector/index.tsx → Total Size: 6.83kB

• ./src/components/stepConnector/style.module.scss → Total Size: 242 bytes

• ./src/mdxComponents.ts → Total Size: 4.04kB

• ./src/components/stepConnector/index.tsx → Total Size: 870 bytes

App Routes Affected:

App Route	Size Change	Total Size	Change (%)
/[[...path]]	2.07kB	3.36MB	0.06%

[cursor]

Bug: Step Tracking Fails on Headings Without Unique IDs

The StepComponent uses h.id to track completion state, but headings may not have unique id attributes. When an id is missing, h.id is an empty string, causing multiple ID-less headings to share the same key. This leads to toggling completion on one such step incorrectly affecting all other ID-less steps, breaking individual tracking and aria-pressed states.