Added officer tile component to Sabb pages #520
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This pull request introduces a new "Officer Page" feature and improves the display of contact information in officer-related components. The main additions include a new
OfficerTilecomponent for presenting officer details, a new officer profile page with sample content, and updates to ensure contact details are more readable. Storybook stories and component registration files are also added for both the new page and tile components.New Officer Page and Tile Components:
OfficerTilecomponent to display officer information, including name, image, position, and social/contact links, with a built-in officers directory for lookup (officer-tile.ce.vue).OfficerPagecomponent to serve as a profile page for each officer, featuring a header, officer details (viaOfficerTile), and placeholder content for biography and manifesto (officer-page.ce.vue).officer-tile.component.js,officer-page.component.js). [1] [2]OfficerTileandOfficerPage, allowing for easy preview and testing with different officer data (officer-tile.stories.js,officer-page.stories.js). [1] [2]Contact Information Display Improvements:
ActivitiesContactscomponent to use thebreak-allCSS class for all contact fields, ensuring that long email addresses and social handles wrap and display correctly (activitiescontacts.ce.vue). [1] [2] [3] [4] [5] [6] [7]Checklist
main).