Enforce consistent component documentation page structure #1431
Description
Problem
The structure of our component documentation pages is inconsistent.
- Some pages are missing component descriptions, source links, statuses
- Headings are named inconsistently (e.g.
Component propsvsPropsvsAvatarStack Component props) - Headings are ordered inconsistently (e.g. sometimes props appear before examples and vice versa)
Examples
| Box | AvatarStack | Details |
|---|---|---|
 |
 |
 |
This inconsistency stems from a lack of guidelines and tooling around component documentation pages.
Why is this important?
A prerequisite to moving a component to stable is that the documentation for the component is "complete." However, we don't have any guidelines or tooling that document what "complete" documentation looks like for a Primer React component. We need those guidelines before we can consider components "stable."
Tasks
- Decide on a structure for component documentation pages
- See Radix Primitives, Braid, Spectrum, Primer ViewComponents, etc. for inspiration
- Chat with folks working with Primer React and Primer ViewComponents
- Document the structure for component documentation pages
- Enforce documentation structure (maybe using a linter?)