Merged in feat/SW-2241-country-map (pull request #2808)

Feat/SW-2241 country map

Approved-by: Erik Tiekstra
Approved-by: Chuma Mcphoy (We Ahead)

packages/design-system/lib/components/Badge/Badge.tsx

@@ -0,0 +1,35 @@
+import { config } from './variants'
+
+import { VariantProps } from 'class-variance-authority'
+import { Typography } from '../Typography'
+import { TypographyProps } from '../Typography/types'
+
+interface BadgeProps extends VariantProps<typeof config> {
+  number: number
+}
+
+export function Badge({ number, color, size }: BadgeProps) {
+  const classNames = config({
+    color,
+    size,
+  })
+
+  return (
+    <Typography variant={getTypography(size)}>
+      <span className={classNames}>{number}</span>
+    </Typography>
+  )
+}
+
+function getTypography(size: BadgeProps['size']): TypographyProps['variant'] {
+  switch (size) {
+    case '36':
+    case '32':
+      return 'Body/Paragraph/mdBold'
+    case '28':
+    case '24':
+      return 'Body/Supporting text (caption)/smBold'
+    case '20':
+      return 'Label/xsRegular'
+  }
+}