Guided Steps component: View code, commands etc. with instructions on the side

[aatuvai]

This PR adds the GuidedSteps component, which can be used to view code along descriptive text on the side.

Five complimenting components are added with the GuidedSteps component:

• Step: Used to place instruction steps to the GuidedSteps component.
• StepSection: Starts a new section of Step instructions.
• File: Groups the code of a particular file / type to its own tab.
• CodeBlock: marks the lines of code which should be highlighted when the associated instruction Step is active.
• Checkpoint: used to collect feedback from users while scrolling the code instruction guide (the component is added in Checkpoint component #477)

Rules for GuidedSteps:

• The main GuidedSteps component can contain as direct children:

1. Any .md content blocks
2. Step, StepSection, and File blocks
3. The File block can only contain CodeBlock blocks

Additionally:

• Each Step needs to have an id that matches a CodeBlock (with the stepId property).

[github-actions]

Amplify deployment status

Branch	Commit	Job ID	Status	Preview	Updated (UTC)
aatuvai/guided-steps	25434aa	24	❌FAILED	aatuvai-guided-steps	2025-12-02 10:39:54

[aatuvai]

Preview on this page

[aatuvai]

Revert before merge

[ptgott]

Is there a way to split this one up?

For example, it seems like we could review and merge the Checkpoint component separately from the side-by-side layout component.

[aatuvai]

Is there a way to split this one up?

For example, it seems like we could review and merge the Checkpoint component separately from the side-by-side layout component.

@ptgott Yeah I think you are right, it makes sense to review the Checkpoint in a separate PR. Thanks