feat(WD-37393): Product card pattern

[muhammad-ali-pk]

Done

• Added a new pattern - Product card
• Implements figma

Fixes WD-37393

QA

• Review release notes
• Review Product card docs
• Review example

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

[if relevant, include a screenshot or screen capture]

[webteam-app]

Demo

Jenkins

demos.haus

[eliman11]

Thanks so much @muhammad-ali-pk! The animation and card interaction itself LGTM! Just had a couple other qs -

Where will this live within Vanilla documentation? I can't seem to find it in the side navigation.

Additionally, the card should only occupy 2 columns. Could we see what the card looks like on the article page to see how it resizes and behaves on the page? Also there are quite a few copy updates that need to be made to the card content. Is there a separate PR for this or will it be handled here too?

[mattea-turic]

Thank you @muhammad-ali-pk !

The design LGTM :)

No comments in addition to Elaine's

[muhammad-ali-pk]

@eliman11

Where will this live within Vanilla documentation? I can't seem to find it in the side navigation.

It should live under "patterns" now in the side nav.

Could we see what the card looks like on the article page to see how it resizes and behaves on the page?

Sure, I set up a demo here

Also there are quite a few copy updates that need to be made to the card content. Is there a separate PR for this or will it be handled here too?

This PR only handles upstreaming product card pattern to vanilla repo. The card content still lives on relevant repos (canonical/ubuntu) and should be updated there.