[416] Added Teams Leaders Table widget#118
Conversation
📝 WalkthroughWalkthroughA new leadership team widget module, its template, styles, and related configuration are added. The widget displays team members with images, bios, and links, and integrates new SCSS styles and animations. Several existing styles are modified or removed to accommodate the new component. The team-members module updates include simplifying the bio field and making experience and LinkedIn fields required. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ApostropheCMS
participant LeadershipTeamWidget
participant TeamMembers
User->>ApostropheCMS: Request page with leadership team widget
ApostropheCMS->>LeadershipTeamWidget: Render widget
LeadershipTeamWidget->>TeamMembers: Retrieve selected team leader data
LeadershipTeamWidget-->>ApostropheCMS: Return rendered HTML with team data
ApostropheCMS-->>User: Serve page with leadership team section
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (4)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (4)
website/modules/asset/ui/src/scss/_carousel.scss (1)
240-275: Remove legacy commented carousel styles
The commented-out.sf-leadershipcarousel styles are no longer needed and can be removed to reduce clutter.Apply this diff to clean up the file:
@@ 239,6 +239,6 @@ // Leadership team -// .sf-leadership { -// .sf-person__photo { -// @include transition(opacity); -// img { -// width: 87px; -// height: 87px; -// @include breakpoint-medium { -// width: 225px; -// height: 225px; -// } -// } -// } -// @include breakpoint-medium { -// .swiper-slide-active { -// .sf-leadership-header__bio { -// @include border(border-left); -// } -// } -// .sf-person { -// &:hover { -// .sf-person__vita { -// opacity: 1; -// } -// .sf-person__photo { -// opacity: 0; -// } -// } -// } -// .sf-person-wrapper { -// border-top: 0; -// } -// .sf-person__footer { -// margin-top: 0; -// } -// } -//}website/modules/leadership-team-widget/views/widget.html (1)
13-23: Render leader headshots with proper fallbacks
The nested checks ensure only valid attachments render. For performance, consider addingloading="lazy"to the<img>tag.Example diff:
<img srcset="{{ apos.image.srcset(attachment) }}" src="{{ apos.attachment.url(attachment, { size: data.options.size or 'full' }) }}" alt="{{ attachment._alt or leader.title }}" + loading="lazy" {% if apos.attachment.hasFocalPoint(attachment) %}style="object-position: {{ apos.attachment.focalPointToObjectPosition(attachment) }}"{% endif %} >website/modules/asset/ui/src/scss/_leadership-team.scss (1)
94-111: Animation performance could be optimized.The vita section uses multiple transitions (max-height, opacity, transform) which could impact performance. Consider using
transformandopacityonly, as these properties don't trigger layout recalculations.Consider this optimization:
.sf-leader__vita { - max-height: 0; + transform: scaleY(0); + transform-origin: top; opacity: 0; overflow: hidden; transition: all 0.3s ease; padding: 0; background-color: #f9f9f9; p { margin-top: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: $gray-500; - transform: translateY(100%); + transform: translateY(20px); transition: transform 0.6s ease; padding: 20px 40px; }Then in the hover state:
.sf-leader__vita { opacity: 1; - max-height: 120px; + transform: scaleY(1); padding: 10px 40px 20px; margin-top: 50px; @include breakpoint-medium { margin-top: 80px; - max-height: 140px; } p { transform: translateY(0); } }website/modules/leadership-team-widget/index.js (1)
1-84: Remove commented-out code.The large block of commented code appears to be a previous implementation using an array-based approach. Since the current implementation uses a relationship field (which is a better approach), this commented code should be removed to keep the codebase clean.
-/* - * Const headingToolbar = require('../../lib/headingToolbar'); - * const linkSchema = require('../../lib/linkSchema'); - */ - -/* - * Module.exports = { - * extend: '@apostrophecms/widget-type', - * options: { - * label: 'Leadership Team Carousel', - * icon: 'binoculars-icon', - * }, - * fields: { - * add: { - * intro: { - * label: 'Intro', - * type: 'area', - * options: { - * widgets: { - * '@apostrophecms/rich-text': { - * ...headingToolbar, - * }, - * }, - * }, - * }, - * cards: { - * label: 'Team members', - * type: 'array', - * titleField: 'title', - * min: 1, - * fields: { - * add: { - * cardTitle: { - * label: 'Name', - * type: 'string', - * required: true, - * }, - * position: { - * label: 'Position', - * type: 'string', - * required: true, - * }, - * yearsOfExperience: { - * label: 'Years of Experience', - * type: 'integer', - * min: 1, - * required: false, - * }, - * headshot: { - * label: 'Headshot', - * type: 'area', - * required: true, - * options: { - * max: 1, - * min: 1, - * help: '1:1 is recommended', - * widgets: { - * '@apostrophecms/image': { - * aspectRatio: [1, 1], - * }, - * }, - * }, - * }, - * bio: { - * label: 'Bio', - * type: 'area', - * required: true, - * options: { - * widgets: { - * '@apostrophecms/rich-text': { - * ...headingToolbar, - * }, - * }, - * }, - * }, - * ...linkSchema.fields.add, - * }, - * }, - * }, - * }, - * }, - * }; - */ -
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
website/app.js(1 hunks)website/lib/mainWidgets.js(1 hunks)website/modules/asset/ui/src/index.scss(1 hunks)website/modules/asset/ui/src/scss/_carousel.scss(1 hunks)website/modules/asset/ui/src/scss/_leadership-team.scss(1 hunks)website/modules/leadership-team-widget/index.js(1 hunks)website/modules/leadership-team-widget/views/widget.html(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
website/modules/leadership-team-widget/index.js (1)
website/lib/mainWidgets.js (1)
headingToolbar(1-1)
🔇 Additional comments (10)
website/modules/asset/ui/src/index.scss (1)
23-23: Import leadership team styles
The new partial_leadership-team.scssis correctly imported alongside other component styles, ensuring the leadership team widget’s CSS is bundled.website/app.js (1)
122-122: Register the leadership-team-widget module
The'leadership-team-widget': {}entry is properly added to the ApostropheCMS modules list to enable the new widget.website/lib/mainWidgets.js (1)
35-35: Expose the leadership-team widget in the layout group
Adding'leadership-team': {}integrates the new widget into the “Specialty” layout widgets.website/modules/leadership-team-widget/views/widget.html (5)
1-4: Wrap widget in semantic section and render intro area
Using a<section>withdata-leadership-team-widgetand anareafor the intro is well structured and follows ApostropheCMS conventions.
5-8: Row grouping logic for responsive grid
Theloop.index0 % 3 == 0 and loop.index0 > 0check correctly breaks rows after every three items. Readability is clear.
29-31: Titles and positions rendered clearly
Using<h4>and<h5>for title and position is semantic and aids accessibility.
33-35: Render bio via rich-text area
Embedding thebioarea ensures editors can manage rich content. This follows best practices for content areas.
49-54: Skip markup closing tags
These lines simply close previously opened containers; no action needed.website/modules/asset/ui/src/scss/_leadership-team.scss (1)
178-190: Well-structured responsive grid implementation.The mobile-first approach with flexbox grid is well implemented. The transition from single-column to three-column layout is clean and follows best practices.
website/modules/leadership-team-widget/index.js (1)
87-128: Well-structured widget configuration.The widget implementation follows ApostropheCMS best practices:
- Proper extension: Correctly extends
@apostrophecms/widget-type- Good field structure: The relationship field approach is better than the commented array approach
- Builder projection: Properly configured to retrieve only needed fields from team-members
- Field validation: Required fields are appropriately marked
The relationship field configuration is particularly well done, allowing reuse of team member data across the site while maintaining order control in this widget.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
website/modules/team-members/index.js (2)
1-1: Remove unused import.The
headingToolbarimport is no longer needed since thebiofield has been changed from a rich-text area to a plain string textarea.-const headingToolbar = require('../../lib/headingToolbar');
56-62: Consider adding URL validation for LinkedIn field.While making the LinkedIn field required is good for data consistency, consider adding URL validation to ensure proper LinkedIn profile URLs are entered.
linkedin: { label: 'LinkedIn', type: 'string', help: 'Site url without http protocol.', placeholder: 'linkedin.com/in/your-profile', + pattern: '^linkedin\\.com\\/in\\/[a-zA-Z0-9-]+$', required: true, },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
website/app.js(1 hunks)website/lib/mainWidgets.js(1 hunks)website/modules/asset/ui/src/index.scss(1 hunks)website/modules/asset/ui/src/scss/_carousel.scss(1 hunks)website/modules/asset/ui/src/scss/_leadership-team.scss(1 hunks)website/modules/leadership-team-widget/views/widget.html(1 hunks)website/modules/team-members/index.js(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- website/modules/asset/ui/src/index.scss
- website/app.js
🚧 Files skipped from review as they are similar to previous changes (4)
- website/modules/leadership-team-widget/views/widget.html
- website/lib/mainWidgets.js
- website/modules/asset/ui/src/scss/_carousel.scss
- website/modules/asset/ui/src/scss/_leadership-team.scss
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: e2e-tests
- GitHub Check: lint
- GitHub Check: unit-tests
- GitHub Check: security-scan
🔇 Additional comments (1)
website/modules/team-members/index.js (1)
54-54: Good change: Making experience required.Making the experience field required ensures consistent data for the leadership team widget display.
🔍 Vulnerabilities of
|
| digest | sha256:b35709ec63a09eaa3d49847f04f7de71928f7e3373bcf3969823d49c02fb8e66 |
| vulnerabilities |     |
| platform | linux/amd64 |
| size | 284 MB |
| packages | 935 |
📦 Base Image node:23-alpine
| also known as |
|
| digest | sha256:169ee1b69bd3f5c7c8508a9919e8b367bba9dc7fa9a03097ec9f85d2e8179631 |
| vulnerabilities |  |
Description
| ||||||||||||
Description
| ||||||||||||
Description
|
yuramax
changed the title
yuramax
dismissed stale reviews from IhorMasechko, coderabbitai[bot], and themself
via
89d57d7
|
5 participants
Added new Team Leaders table widget