feat(WD-37057): add media (image, video) support to Tiered list pattern - #5817

Demo

Jenkins

demos.haus

Thank you @muhammad-ali-pk for the updates to this pattern!

Comments:

Review release notes

• LGTM!

Review Tiered list docs

Default width image

• I'm not sure about this piece of advice, "Use an image with an aspect ratio of approximately 16:9 to avoid using too much vertical space." – we typically use 3:2 aspect ratios for images, and 16:9 for videos. If anything, we should probably stick to these, for consistency.

Full width image

• LGTM

Variable media placement

• LGTM. For future reference, I think it would be interesting to investigate if having the media after the CTA block could work too – but this would be a discussion at a later time.

Video

• LGTM, but I'm not sure if we want to offer the option to use full-width videos. We don't really do this anywhere on our pages, so I'm a little cautious about this. Since you've already done the work, I think we can maintain it, but our implementation of videos should be investigated a lil (cc: @Sophie-32 @eliman11)

Review following specific new examples

full width image before description

• LGTM. Just a quick question – more general, but do we allow for the option to drop images at smaller breakpoints? I ask because some images can look good at a smaller scale, but others not so much, so having that option would be good.

full width image after description

• The image is wrapped twice I think? Could we remove one of the shallows please?

Default width image before description

• LGTM

Default width image after description

• LGTM

full width video before description

• Mostly LGTM, with the caveat mentioned in the docs above
• Like the full-width image variant, could you also drop the double wrapping here too please

full width video after description

• As above

Media within list items

• LGTM, but could we also add in the 50/50 option for tablet? There could be a lot of scrolling if we've got a lot of items, each with an image. No worries if not, though! This is mor of a nice-to-have and we can approach it at a later time.

Review combined examples

• LGTM

@mattea-turic Thank you for the thorough review! I have addressed your comments, please have another look.

I'm not sure about this piece of advice, "Use an image with an aspect ratio of approximately 16:9 to avoid using too much vertical space." – we typically use 3:2 aspect ratios for images, and 16:9 for videos. If anything, we should probably stick to these, for consistency.

✅ I've now added support for custom aspect_ratio param. It will be 3-2 by default, but users can also provide 16-9 if they wish to do so. Docs

LGTM. For future reference, I think it would be interesting to investigate if having the media after the CTA block could work too – but this would be a discussion at a later time.

✅ I've added another after_cta mode for media_placement param. Now we can render media at the top of section using before_description, or under title/description using after_description, or under description/cta using after_cta. Added example default width image after cta

do we allow for the option to drop images at smaller breakpoints? I ask because some images can look good at a smaller scale, but others not so much, so having that option would be good.

✅ I've now added boolean params hide_medium and hide_small, to make the media disappear on medium and small screens respectively. Added example full width media hidden on small and medium breakpoints

The image is wrapped twice I think? Could we remove one of the shallows please?
Like the full-width image variant, could you also drop the double wrapping here too please

✅ Fixed! Good catch for the edge cases

LGTM, but could we also add in the 50/50 option for tablet? There could be a lot of scrolling if we've got a lot of items, each with an image. No worries if not, though! This is mor of a nice-to-have and we can approach it at a later time.

✅ Done! Example 50-50-with-media-on-tablet

@muhammad-ali-pk Tysm for all the updates! +1ing :)

I've now added support for custom aspect_ratio param. It will be 3-2 by default, but users can also provide 16-9 if they wish to do so. Docs

Perfect!

I've added another after_cta mode for media_placement param [...] Added example default width image after cta

Appreciate you taking the time to add this – looks good!

I've now added boolean params hide_medium and hide_small [...] Added example full width media hidden on small and medium breakpoints

Thanks!

Fixed! Good catch for the edge cases

Ty!

Done! Example 50-50-with-media-on-tablet

Looks great!