[#749] Update badge components

[planktonic]

Fixes #749

Changes

• Badges are now more configurable — each color variant has its color & background-color specified explicitly in configuration instead of automatically. Defaults to grayscale.
• Badges now have size variants (base and small in default config), and always display as small on small screens
• Moves stories for Badge component into a .js file, and includes them into the mdx file
• Adds a component file for Badge — outputs a simple HTML element, mimicing how a component in e.g. React, web-components would work.
• Reactivates the controls plugin for storybook

📸

How to QA Visual changes

• git checkout main
• git pull
• git checkout feature/749-update-badge-components
• yarn
• yarn storybook
• navigate to Badge component

Check:

• [ ] The appearance matches the zeplin designs
• [ ] The documentation for this component is correct, understandable, and up-to-date.

How to QA code changes

• [ ] The documentation for this component is correct, understandable, and up-to-date.
• [ ] The component makes good use of CSS custom properties to simplify creating variants (or doesn’t have variants).
• [ ] Everything that should be a variable, is.

Preflight checks

PR author to check, and delete if not applicable:

• [x] Storybook documentation has been updated
• [x] Fixtures in test/scss/ have been updated
• [x] Your changes have been added to the unreleased section of CHANGELOG.md

[planktonic]

@ed-eva

Thanks! I’ll work through this & update 👍

All (at least most) Shadows have an opacity of 0.075, it should be 0.2

Yes, this is related to the way we build shadows — default CSS box-shadows are flat and basic-looking, so we use multiple shadows on top of each other to build something a little prettier, a little more natural-looking. The result is that each layer of shadow needs to be a lower opacity, so they add up to a similar opacity all together.

Small badge-buttons are same size as regular badge-buttons (designs from my side needed here?)

Yes exactly – right now we have no design for these :) I updated the ticket for badges: https://bitcrowd.atlassian.net/browse/ID-158