feat(rich horizontal list): Rich horizontal list pattern

[jmuzina]

Done

• Implements rich horizontal list pattern / HOC per spec and design
• Drive-by: Fixed some language inconsistencies in the rich vertical list docs (such as interchangeably referring to it as "vertical rich list" and "rich vertical list", and referencing the Hero in the import instructions)

Fixes WD-17706

QA

• Open combined rich horizontal list example and compare it against Figma
  • Be sure to check at every breakpoint.
• Review rich horizontal list docs
  • Make sure you switch the example code snippets from Jinja mode to HTML mode, and verify that there is no excess whitespace in the markup.
• Review 4.21.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]

@lyubomir-popov I've completed an initial draft of this pattern's implementation.

Per a discussion we had a few days ago, I want to draw your attention to one difference from the Figma design. We built the horizontal section component with intrinsic container queries to demo those. These container queries are not (nor should they be) aligned with the screen-level responsive breakpoints, so the horizontal section list changes column counts at different breakpoints than the rest of the pattern. This results in a small range where there are four list columns but the CTA has been moved to the first column due to reaching tablet size

Screencast.from.2025-01-23.16-31-04.webm

Also, the logo section breaks out of the 50/50 split on tablet size, before the column counts have changed:

Screencast.from.2025-01-23.16-32-16.webm

I would add that this isn't really a "bug", rather it is a feature of intrinsic sizing as components are sized independently from eachother based on their contents. It is just a bit interesting to see this behavior when we combine elements built with container and media queries.

Is this acceptable? If not, we can make an adjustment to the horizontal section so that it uses the responsive grid instead of container queries.

[lyubomir-popov]

Is this acceptable?

Absolutely. That's the beauty of container queries. Nice work!

[lyubomir-popov]

Left one comment on figma, the h2 needs a p-section--shallow wrapper. all good apart from that, nice work!

[jmuzina]

A code reviewer from the sites team is being assigned, per @petesfrench

[jmuzina]

Thanks for the reviews @britneywwc ! I've addressed all of your comments, could you have another look please?

[britneywwc]

Thanks for making the changes @jmuzina, looks great! :)