== Background goal
Now that we've implemented the [[ https://doc.wikimedia.org/codex/main/components/demos/button.html#guidelines | component guidelines ]] for each component in the Codex site, we need to make them more maintainable for both designers and developers since:
- These guidelines are illustrated using `SVG images`, so every time we update a component or we fix an error in the Figma component, we need to update the images design, export them as SVG and update them in the Codex site. This requires both design and development work.
- There are often errors in the exports of these SVG images, making them harder to maintain as we need to update them frequently.
Given that the component guidelines in Codex should be the source of truth for users to understand how a component behaves and its different use cases, we should make them easier to maintain.
=== Possible solutions
1. Replace the images in the components guidelines with coded demos (as we do in the "Demos" section). This will ensure that the component examples are automatically updated when we update them in code.
2. Replace images with embedded Figma links
3. Avoid using images to illustrate the guidelines as much as possible, using them just when they are really needed.
=== Open questions
-
=== Acceptance criteria
[x] Explore possible solutions to make the components guidelines more maintainable in the Codex site
[] Discuss solutions with the DST and decide which ones we want to prototype and test with users
---
==== Future tasks
- {T357714}