wip: feat(Tiered List): add media (images/videos) to the Tiered List pattern

[muhammad-ali-pk]

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.
• 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:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should 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
• 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

[webteam-app]

Demo

Jenkins

demos.haus

[jmuzina]

Thanks for the contribution. Holding off on final review until we have some opinions from design, but I've left some initial comments below.

[lyubomir-popov]

hi, great additon - thanks for suggesting it @muhammad-ali-pk. A few small things to polish:

• The edge of the image must extend to cover the same number of columns as the text underneath (columns 3-8)
  

• On desktop, the image is really large when it spans all 8 columns. I would limit aspect ratios to 2.4:1 (cinematic, as we call it). Within that, the image must fill 100% of the width. Otherwise it creates misalignments.

• should we add examples that cover just the last 4 columns? Might be useful for videos, where we don't want a 16:9 rectangle spanning 8 columns, it would be better to fit that in 4 - people can still go full-screen if they want to.

[jmuzina]

I also need this for https://warthogs.atlassian.net/browse/WD-20400. @muhammad-ali-pk I hope you don't mind if I take this PR over :)

[muhammad-ali-pk]

@jmuzina Heyy, sorry I haven't been able to get back to it due to other high priority tasks :')
Please feel free to take over the PR.

[jmuzina]

@lyubomir-popov Wonder if I can have your thoughts on this design, which has as tiered list with an image, but it has two differences from the approach @muhammad-ali-pk took here:

1. The description is beneath the image, rather than above it
2. The image is 16:9, rather than cinematic. Maybe the image should be cinematic 2.4:1 when it is set to "full-width", and 16:9 otherwise.

If we can form solid opinions that this pattern should take on image positioning and sizing, this PR can move forward.

[muhammad-ali-pk]

@jmuzina My use-case required an image between the description and the list.
Would it be too much effort to also pass an optional prop for the position of the image?

[jmuzina]

@jmuzina Would it be too much effort to also pass an optional prop for the position of the image?

@muhammad-ali-pk It's not a matter of "effort", it's moreso that when we are creating an upstreamed pattern like this we try to land on a single approach in order to have a more consistent appearance between pages that use this pattern, and to simplify the appearance. But we can easily pass a prop for image position as well.

[jmuzina]

Discussed aspect ratio with @lyubomir-popov .

When the image is full-width, it should generally use cinematic aspect ratio rather than 16:9 in order to avoid creating an extremely tall image.

However, there is a possible use case for using 16:9 full width images: video embeds.

[petesfrench]

There are a few examples that appear to be visually identical, such as:
docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image-before-description.html and
[docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image.html](https://vanilla-framework-5503.demos.haus/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image.html)
docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image-before-description.html and
docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image.html

[jmuzina]

this was closed unintentionally by GitHub automation

image template 1.6.0 has released - updating this now to clean up how the images are generated.

[jmuzina]

Updated image template is working like a charm - much happier with this API. Left to do:

• Cleanup examples that have duplicate appearances. Many of them are edge case examples that show that "invalid" API inputs cause safe results, but this complicates the QA and makes the diff very large
• Update all of the remaining tiered list with image examples to use image_attrs rather than the image slot
• Update the tiered list pattern docs to show how to use the image_attrs and video_attrs params. We should probably also include a note for how to use the image template with the attrs output mode to make things more seamless for sites devs.

My capacity is quite low at the moment - so I'll take this once #5560 , #5555 , #5529 , #5598 close

[jmuzina]

This PR ended up getting stuck in backlog priority for me and I've had very little capacity to address it - as I'm switching teams I'm un-assigning myself and leaving it open for others to address, using this comment as a rough checklist for remaining tasks.