Add suru component

[bartaz]

Done

Adds new suru component, for the new style of suru.
Deprecates the use of old suru strip.

Fixes WD-5196

QA

• Open demo
• Review suru examples:
  • https://vanilla-framework-4849.demos.haus/docs/examples/patterns/suru/dark
  • https://vanilla-framework-4849.demos.haus/docs/examples/patterns/suru/default
• Review updated documentation:
  • https://vanilla-framework-4849.demos.haus/docs/patterns/suru
  • https://vanilla-framework-4849.demos.haus/docs/patterns/strip#suru-strip

Check if PR is ready for release

If this PR contains Vanilla SCSS 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 CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

[if relevant, include a screenshot or screen capture]

[webteam-app]

Demo starting at https://vanilla-framework-4849.demos.haus

[ClementChaumel]

LGTM, just some comments

[ClementChaumel]

Suggested change

	.p-suru {
	aspect-ratio: 5.1775700934579; // exact aspect ration of the image
	background-image: url('#{$assets-path}7f34ade9-website_suru_25.jpg');
	background-size: contain;
	display: none; // only show suru on large screens
	margin: 0 auto;
	max-width: $grid-max-width;
	@media (min-width: $breakpoint-large) {
	display: block;
	}
	.p-suru {
	display: none;
	@media (min-width: $breakpoint-large) {
	display: block;
	aspect-ratio: 5.1775700934579; // exact aspect ration of the image
	background-image: url('#{$assets-path}7f34ade9-website_suru_25.jpg');
	background-size: contain;
	margin: 0 auto;
	max-width: $grid-max-width;
	}

I would personally move all the display rules in the media query like so
But idk if it's a pattern we use elsewhere

[bartaz]

I find it a bit cleaner this way, and in the end I don't think it really matters too much.

[ClementChaumel]

It can indeed be put anywhere!

(not that it's necessarily a good idea to do so)

[bartaz]

It can indeed be put anywhere!

Good that Lyubo is on holidays or you would give him a heart attack!