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>
+  ),
+}