Steps
EuiSteps presents procedural content in a numbered outline format. It is best used when presenting instructional
content that must be conducted in a particular order. It requires a title and children to be present
and will automatically increment the step number based on the initial firstStepNumber.
Complex steps
If you need to call out a set of substeps that are not lines of code, most likely a <ol/>,
wrap the block in a <EuiSubSteps/>.
Heading elements
To aid with accessibility and hierarchical headings, you can and should pass in a heading element
to use for each step title. The example below shows that the logical heading element should be an h2 and
therefore adds headingElement="h2" to the EuiSteps component.
The style of the title will not be affected.
Steps status
Steps can optionally include status prop that will alter the look of the number prefix.
The options are incomplete, complete, warning, danger, disabled and loading.
This is used mostly as a final step when you need to make some sort of final check.
Custom title sizes
You can set a different title size using titleSize. If titleSize is set in both EuiSteps and EuiStep,
the latter value will override the former. Additionally, the title size xs will automatically
generate smaller steps circles.
Horizontal steps
For use when forms/setup instructions can and should be split into multiple pages.
Each step should correspond to an individual page of form elements, using the status key to denote
the user's progress.
For horizontal steps, the status key defaults to "incomplete" and the default filled styling is reserved
for indicating "current" status.
Use the size property to generate smaller step circles.