feat(ElectionResults): enhance results display extended info #226
Conversation
There was a problem hiding this comment.
Pull request overview
This PR enhances the election results display by adding support for extended choice information, including descriptions and images. The changes enable a richer presentation of voting options in the results view.
Key Changes
- Added new theme anatomy parts for choice body, description, image wrapper, and image elements
- Refactored Results component to display choice descriptions (via Markdown) and images when available
- Restructured the choice rendering layout to accommodate the new visual elements with responsive sizing
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/chakra-components/src/theme/results.ts | Extends theme anatomy with new parts and adds styling for choice descriptions and images |
| packages/chakra-components/src/components/Election/Results.tsx | Updates Results component to render descriptions and images from choice metadata |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const meta = c.meta ?? {} | ||
| const description = meta.description as string | undefined | ||
| const imageSrc = meta.image?.default as string | undefined |
There was a problem hiding this comment.
The metadata extraction logic is repeated for each choice in the map function. Consider extracting this into a helper function or defining a proper type for the metadata structure to improve type safety and maintainability.
There was a problem hiding this comment.
Actually, @AlexanderArce, you can use a helper method in the SDK named dotobject() which allows you to extract parts of an object using dot notation. We actually have it as a helper for the election class (via election.get()), but I think it does not work for the fields you're trying out here... I think it was implemented only for the custom meta field (which is actually metadata.meta, what you're searching lies under metadata too, so probably won't work the election helper method, but you can still use the underlying dotobject() one for these things).
|
|
||
| {hasImage && ( | ||
| <Box sx={styles.choiceImageWrapper}> | ||
| <Image src={imageSrc} alt={c.title.default} sx={styles.choiceImage} loading='lazy' /> |
There was a problem hiding this comment.
The alt text uses the choice title directly. Consider providing more descriptive alt text that explains what the image represents, such as 'Image for {title}' or extracting alt text from the metadata if available.
| <Image src={imageSrc} alt={c.title.default} sx={styles.choiceImage} loading='lazy' /> | |
| <Image src={imageSrc} alt={`Image for ${c.title.default}`} sx={styles.choiceImage} loading='lazy' /> |
There was a problem hiding this comment.
+1
we should ideally use translations here
elboletaire
left a comment
elboletaire
left a comment
There was a problem hiding this comment.
Other than the minor comment about using dot notation, please add a prop to the results component to make this rendering optional. A simple boolean prop like extended would be enough.
closes #225
closes vocdoni/ui-scaffold#1419