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.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { Badge } from './Badge.tsx'
+
+const meta: Meta<typeof Badge> = {
+  title: 'Components/Badge',
+  component: Badge,
+}
+
+export default meta
+
+type Story = StoryObj<typeof Badge>
+
+export const Default: Story = {}
+
+export const XS: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <Badge number={3} color="primary" size="20" />
+      <Badge number={3} color="green" size="20" />
+    </div>
+  ),
+}
+
+export const Small: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <Badge number={3} color="primary" size="24" />
+      <Badge number={3} color="green" size="24" />
+    </div>
+  ),
+}
+export const Medium: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <Badge number={3} color="primary" size="28" />
+      <Badge number={3} color="green" size="28" />
+    </div>
+  ),
+}
+export const Large: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <Badge number={3} color="primary" size="32" />
+      <Badge number={3} color="green" size="32" />
+    </div>
+  ),
+}
+
+export const XL: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <Badge number={3} color="primary" size="36" />
+      <Badge number={3} color="green" size="36" />
+    </div>
+  ),
+}

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'
+  }
+}

packages/design-system/lib/components/Badge/badge.module.css

@@ -0,0 +1,42 @@
+.badge {
+  border-radius: var(--Corner-radius-xl);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--Space-x025);
+}
+
+.primary {
+  background-color: var(--Surface-Brand-Primary-2-Default);
+  color: var(--Text-Inverted);
+}
+
+.green {
+  background-color: var(--Surface-Feedback-Succes);
+  color: var(--Text-Feedback-Succes-Accent);
+}
+
+._36 {
+  width: 36px;
+  height: 36px;
+}
+
+._32 {
+  width: 32px;
+  height: 32px;
+}
+
+._28 {
+  width: 28px;
+  height: 28px;
+}
+
+._24 {
+  width: 24px;
+  height: 24px;
+}
+
+._20 {
+  width: 20px;
+  height: 20px;
+}

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

@@ -0,0 +1 @@
+export { Badge } from './Badge'

packages/design-system/lib/components/Badge/variants.ts

@@ -0,0 +1,23 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './badge.module.css'
+
+export const config = cva(styles.badge, {
+  variants: {
+    color: {
+      primary: styles.primary,
+      green: styles.green,
+    },
+    size: {
+      '36': styles._36,
+      '32': styles._32,
+      '28': styles._28,
+      '24': styles._24,
+      '20': styles._20,
+    },
+  },
+  defaultVariants: {
+    color: 'primary',
+    size: '28',
+  },
+})