Vanilla docs - Configuring component page
On the Vanilla docs, there are now tabs on each component page to switch between content. The tabs are only visible if there is more than one page to show. The tab menu items include:
- Implementation: Describing the implementation of a component
- Accessibility: Describing the accessibility considerations of a component
- Design guidelines: Describing the design guidelines of a component
To add tabs to a component documentation page, the first thing you need is the content.
Content
Accessibility and Implementation content are stored in .md files inside the vanilla-framework repo. Create a folder for the component, inside create an accessibility.md file for the Accessibility content and an index.md file for the Implementation content.
Technical tips:
- The naming of the file is important, as the template finder relies on the file name to define the path (f.x. folder
/docs/patterns/button/index.mdwill be the url/docs/patterns/buttonand/docs/patterns/button/accessibility.mdwill be the url/docs/patterns/button/accessibility) - Files will not need any
<h1>headlines, as the title metadata will be used for it. This was a compromise because we wanted the menu to show up under the title.
Design guidelines content is pulled from Discourse. Start by creating a new Discourse post with the design guidelines content of the component. Once done, add a new table entry inside the Navigation table at the bottom of this post, pointing to the new design guidelines post you created.
Once the content is done. Next step is updating the component_tabs.yaml file in the Vanilla framework repo.
Component tabs config
We have a .yaml file that defines the tab menu for each component.
patterns/button: # unique identifier of the component
accessibility: True
design_guidelines: True
If the component is missing from the file it will show no tab menu. The accessibility and design_guidelines properties reveal or hide the corresponding menu items.
Navigation
The new Vanilla design system website fetches design guidelines from this category, based on the entries in the table below.
Navigation
| Level | Path | Navlink |
|---|---|---|
| 0 | patterns/how | Heading |
| 1 | patterns/segmented-control | Segmented control |
| 1 | patterns/contextual-menu | Contextual menu |
| 1 | patterns/matrix | [component] Matrix |
| 1 | patterns/slider | [component] Slider |
| 1 | patterns/buttons | [component] Buttons |
| 1 | patterns/badge | [component] Badge |
| 1 | patterns/chip | [component] Chip |
| 1 | patterns/switch | [component] Switch |