vanilla-framework
vanilla-framework copied to clipboard
wip: feat(Tiered List): add media (images/videos) to the Tiered List pattern
Done
- Added support for rendering images and videos inside the tiered list pattern.
- First example of variable content ordering in one of our patterns: the media can be displayed before or after the description.
Fixes #5549 Fixes WD-22925
QA
- Navigate to the combined Tiered list examples and verify they appear as expected. The new examples are at the end of the list of examples, and all include "image" or "video" in their titles.
- Things to pay attention to:
- Full-width description examples with default width images cause the media to be displayed beneath/after the description, in the same row as the description.
- Full width media examples always render the media in a separate row, after the title and description. Media should never precede the title, even if
media_placement="before_description"is used. - Media uses the proper aspect ratios for requested media size. Full-width = 2.4:1, default-width = 16:9.
- Videos are always rendered with 16:9 aspect ratio.
- The rest of the pattern (list & cta) has not been changed at all.
- Be sure to check at small, medium, and large breakpoints.
- Things to pay attention to:
- Review the tiered list with media docs
- Review 4.25.0 release notes
Check if PR is ready for release
If this PR contains Vanilla SCSS or macro code changes, it should contain the following changes to make sure it's ready for the release:
- [x] PR should have one of the following labels to automatically categorise it in release notes:
Feature 🎁,Breaking Change 💣,Bug 🐛,Documentation 📝,Maintenance 🔨.
- [x] Vanilla version in
package.jsonshould be updated relative to the most recent release, following semver convention- if existing APIs (CSS classes & macro APIs) are not changed it can be a bugfix release (x.x.X)
- if existing APIs (CSS classes & macro APIs) are changed/added/removed it should be a minor version (x.X.0)
- see the wiki for more details
- [x] Any changes to component class names (new patterns, variants, removed or added features) or macros should be listed on the what's new page.
Screenshots