Create badge component

[ClementChaumel]

Done

Create badge component and a few examples

Fixes #1394 #1395 #1396 #1397 #1398

QA

• Open demo
• [Add QA steps]
• Review updated documentation:
  • [List any updated documentation for review]

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.
• Documentation side navigation should be updated with the relevant labels.

Screenshots

Default:

Tabs:

Chips:

Colors:

Side Navigation:

[webteam-app]

Demo starting at https://vanilla-framework-4497.demos.haus/docs/examples/patterns/badge/default

[lyubomir-popov]

@ClementChaumel which design are you using for reference? These seem a bit different from the figma components https://www.figma.com/file/H6MSsN3taoXXOJCPUbIImQ/Design-System-Library?node-id=1310%3A9183

[ClementChaumel]

@ClementChaumel which design are you using for reference? These seem a bit different from the figma components https://www.figma.com/file/H6MSsN3taoXXOJCPUbIImQ/Design-System-Library?node-id=1310%3A9183

What are the font sizes, colours and spacing we should use?

[ClementChaumel]

Udpated, PTAL @lyubomir-popov

[lyubomir-popov]

a couple of small comments in the code

[bartaz]

There is no "medium" in horizontal spacing, use $sph--small or $sph--large in this case (I guess small should be enough?)

https://vanillaframework.io/docs/settings/spacing-settings#horizontal-spacing

[lyubomir-popov]

or maybe just use a n-space in a pseudo element? This shouldn't really be aligned with any spacing as it is a specific scenario between text and a rounded element, which we don't have in other places.

Was addressed

[bartaz]

Small fix in accessibility docs, but LGTM. Thanks!