Issue 2162: ZUI Badge initial creation

[KraftKatten]

Description

This PR adds the ZUI Badge as defined in the Figma. There's two main variants, one with a number and one without. It also takes the status.

Screenshots

Changes

• Adds the ZUIBadge component, with two main variants:
• Adds Dot variant: Small dot with no number, in the colour of the status.
• Adds Badge variant: Slightly bigger with a number. Can handle negative numbers, and shortens numbers to 99+ if larger than 99. Does not handle very large (or small? 😅) negative numbers well, for example:
  

Notes to reviewer

The sizes of the circles are slightly bigger than in design, but the numbers didn't really fit otherwise. I also took liberties in allowing negative numbers, but I don't really expect it to happen, so I think it's alright that we don't really handle very large negative numbers. The "99+" functionality was approved by a designer, but I'm not completely sure it's the best solution. perhaps we could just do a "..." or something. Not sure how often it would happen. Finally, not completely sure if the font is correct compared to design either 😅

Related issues

Resolves #2162

[ziggabyte]

Awesome job! I think it looks great so far :D Agree that we will probably not need to handle very large negative numbers, so not fitting for that is fine.

I'm going to approve and merge it, and I'll look at the font size/badge size issue and talk with the designer if needed :) Thank you so much for this!