From 7aaf67198c95367da7e9029eab5efb9693ab0f24 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <vincent@smedinga.nl>
Date: Mon, 22 Jan 2024 10:40:23 +0100
Subject: [PATCH 1/4] Add initial documentation

---
 packages/css/src/components/badge/README.md   | 13 ++++++++++
 .../storybook-react/src/Badge/Badge.docs.mdx  | 12 +++++++--
 .../src/Badge/Badge.stories.tsx               | 25 ++++++++++++++++++-
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/packages/css/src/components/badge/README.md b/packages/css/src/components/badge/README.md
index 6510ccd5e0..560cb01cec 100644
--- a/packages/css/src/components/badge/README.md
+++ b/packages/css/src/components/badge/README.md
@@ -1 +1,14 @@
 # Badge
+
+A prominently colored box containing 1 or 2 words to guide the user in taking a specific action.
+
+## Design
+
+The text in the Badge is of the same size as the surrounding text.
+Its color is either white or black, depending on the background colour.
+The box aligns to the left with the running text.
+
+## Guidelines
+
+The default background colour is green.
+Suggestions when to use the other colours will follow soon.
diff --git a/storybook/storybook-react/src/Badge/Badge.docs.mdx b/storybook/storybook-react/src/Badge/Badge.docs.mdx
index badcc7e173..873144e5ff 100644
--- a/storybook/storybook-react/src/Badge/Badge.docs.mdx
+++ b/storybook/storybook-react/src/Badge/Badge.docs.mdx
@@ -1,4 +1,4 @@
-import { Controls, Markdown, Meta, Primary } from "@storybook/blocks";
+import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks";
 import * as BadgeStories from "./Badge.stories.tsx";
 import README from "../../../../packages/css/src/components/badge/README.md?raw";
 
@@ -6,6 +6,14 @@ import README from "../../../../packages/css/src/components/badge/README.md?raw"
 
 <Markdown>{README}</Markdown>
 
+## Voorbeelden
+
+### Default
+
 <Primary />
 
-<Controls />
+### In a list
+
+A tip can be used in a list.
+
+<Canvas of={BadgeStories.InList} />
diff --git a/storybook/storybook-react/src/Badge/Badge.stories.tsx b/storybook/storybook-react/src/Badge/Badge.stories.tsx
index 8e41f00f37..ce4607a5c7 100644
--- a/storybook/storybook-react/src/Badge/Badge.stories.tsx
+++ b/storybook/storybook-react/src/Badge/Badge.stories.tsx
@@ -3,7 +3,7 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-import { Badge } from '@amsterdam/design-system-react'
+import { Badge, Heading, OrderedList } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
@@ -28,3 +28,26 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
+
+export const InList: Story = {
+  decorators: [
+    (Story) => (
+      <div>
+        <Heading level={4}>Verwerkingstijd en data</Heading>
+        <OrderedList>
+          <OrderedList.Item>Binnen Amsterdam op werkdagen binnen 24 uur.</OrderedList.Item>
+          <OrderedList.Item>
+            Vanuit een andere gemeente ongeveer 5 werkdagen.
+            <br />
+            <Story /> Geeft u uw verhuizing vantevoren door, dan wordt uw melding bewaard tot de verhuisdatum. Dan pas
+            begint de termijn van 24 uur of 5 werkdagen.
+          </OrderedList.Item>
+          <OrderedList.Item>
+            Een verhuizing doorgeven kan 4 weken van tevoren en maximaal 5 dagen erna. Geeft u het later door? Dan wordt
+            de dag van doorgeven de verhuisdatum.
+          </OrderedList.Item>
+        </OrderedList>
+      </div>
+    ),
+  ],
+}

From f99de0577571e1e1ac7f7e1fb890c93f1387dc82 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <vincent@smedinga.nl>
Date: Mon, 22 Jan 2024 10:42:45 +0100
Subject: [PATCH 2/4] Correct copyright year

---
 packages/css/src/components/badge/badge.scss          | 2 +-
 packages/react/src/Badge/Badge.tsx                    | 2 +-
 storybook/storybook-react/src/Badge/Badge.stories.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss
index dd00df4ee8..5c40e53a99 100644
--- a/packages/css/src/components/badge/badge.scss
+++ b/packages/css/src/components/badge/badge.scss
@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright (c) 2024 Gemeente Amsterdam
  */
 
 .amsterdam-badge {
diff --git a/packages/react/src/Badge/Badge.tsx b/packages/react/src/Badge/Badge.tsx
index 0697c3fbd6..fb51164a61 100644
--- a/packages/react/src/Badge/Badge.tsx
+++ b/packages/react/src/Badge/Badge.tsx
@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright (c) 2024 Gemeente Amsterdam
  */
 
 import clsx from 'clsx'
diff --git a/storybook/storybook-react/src/Badge/Badge.stories.tsx b/storybook/storybook-react/src/Badge/Badge.stories.tsx
index ce4607a5c7..95590f2bec 100644
--- a/storybook/storybook-react/src/Badge/Badge.stories.tsx
+++ b/storybook/storybook-react/src/Badge/Badge.stories.tsx
@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright (c) 2024 Gemeente Amsterdam
  */
 
 import { Badge, Heading, OrderedList } from '@amsterdam/design-system-react'

From 308b1e8f7133c4c44ca680c14b80d4c9301627c1 Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Tue, 23 Jan 2024 09:51:28 +0100
Subject: [PATCH 3/4] Requested changes

---
 packages/css/src/components/badge/README.md   |  4 +-
 packages/css/src/components/badge/badge.scss  | 10 ++
 packages/react/src/Badge/Badge.test.tsx       | 98 +++++++++++++++++--
 packages/react/src/Badge/Badge.tsx            | 11 ++-
 .../components/amsterdam/badge.tokens.json    |  8 ++
 .../storybook-react/src/Badge/Badge.docs.mdx  | 10 +-
 .../src/Badge/Badge.stories.tsx               | 29 +-----
 7 files changed, 120 insertions(+), 50 deletions(-)

diff --git a/packages/css/src/components/badge/README.md b/packages/css/src/components/badge/README.md
index 560cb01cec..2711b51f80 100644
--- a/packages/css/src/components/badge/README.md
+++ b/packages/css/src/components/badge/README.md
@@ -4,9 +4,7 @@ A prominently colored box containing 1 or 2 words to guide the user in taking a
 
 ## Design
 
-The text in the Badge is of the same size as the surrounding text.
-Its color is either white or black, depending on the background colour.
-The box aligns to the left with the running text.
+The badge can contain a string of text or a number.
 
 ## Guidelines
 
diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss
index 5c40e53a99..653cc0d97b 100644
--- a/packages/css/src/components/badge/badge.scss
+++ b/packages/css/src/components/badge/badge.scss
@@ -56,3 +56,13 @@
   background-color: var(--amsterdam-badge-yellow-background-color);
   color: var(--amsterdam-badge-yellow-color);
 }
+
+.amsterdam-badge--black {
+  background-color: var(--amsterdam-badge-black-background-color);
+  color: var(--amsterdam-badge-black-color);
+}
+
+.amsterdam-badge--white {
+  background-color: var(--amsterdam-badge-white-background-color);
+  color: var(--amsterdam-badge-white-color);
+}
diff --git a/packages/react/src/Badge/Badge.test.tsx b/packages/react/src/Badge/Badge.test.tsx
index 4372b4bc20..11dfb2097e 100644
--- a/packages/react/src/Badge/Badge.test.tsx
+++ b/packages/react/src/Badge/Badge.test.tsx
@@ -5,7 +5,7 @@ import '@testing-library/jest-dom'
 
 describe('Badge', () => {
   it('renders', () => {
-    const { container } = render(<Badge />)
+    const { container } = render(<Badge label="test" />)
 
     const component = container.querySelector(':only-child')
 
@@ -14,7 +14,7 @@ describe('Badge', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    const { container } = render(<Badge />)
+    const { container } = render(<Badge label="test" />)
 
     const component = container.querySelector(':only-child')
 
@@ -22,7 +22,7 @@ describe('Badge', () => {
   })
 
   it('renders an additional class name', () => {
-    const { container } = render(<Badge className="extra" />)
+    const { container } = render(<Badge label="test" className="extra" />)
 
     const component = container.querySelector(':only-child')
 
@@ -32,28 +32,108 @@ describe('Badge', () => {
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLElement>()
 
-    const { container } = render(<Badge ref={ref} />)
+    const { container } = render(<Badge label="test" ref={ref} />)
 
     const component = container.querySelector(':only-child')
 
     expect(ref.current).toBe(component)
   })
 
+  it('renders with a number label', () => {
+    const { container } = render(<Badge label={1} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveTextContent('1')
+  })
+
   it('renders with default color', () => {
-    const { container } = render(<Badge />)
+    const { container } = render(<Badge label="test" />)
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-badge')
     expect(component).toHaveClass('amsterdam-badge--dark-green')
   })
 
-  it('renders with specified color', () => {
-    const { container } = render(<Badge color="blue" />)
+  it('renders blue color', () => {
+    const { container } = render(<Badge label="test" color="blue" />)
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-badge')
     expect(component).toHaveClass('amsterdam-badge--blue')
   })
+
+  // 'blue' | 'dark-blue' | 'green' | 'dark-green' | 'orange' | 'magenta' | 'purple' | 'yellow' | 'black' | 'white'
+
+  it('renders dark-blue color', () => {
+    const { container } = render(<Badge label="test" color="dark-blue" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-badge--dark-blue')
+  })
+
+  it('renders green color', () => {
+    const { container } = render(<Badge label="test" color="green" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-badge--green')
+  })
+
+  it('renders dark-green color', () => {
+    const { container } = render(<Badge label="test" color="dark-green" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-badge--dark-green')
+  })
+
+  it('renders orange color', () => {
+    const { container } = render(<Badge label="test" color="orange" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-badge--orange')
+  })
+
+  it('renders magenta color', () => {
+    const { container } = render(<Badge label="test" color="magenta" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-badge--magenta')
+  })
+
+  it('renders purple color', () => {
+    const { container } = render(<Badge label="test" color="purple" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-badge--purple')
+  })
+
+  it('renders yellow color', () => {
+    const { container } = render(<Badge label="test" color="yellow" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-badge--yellow')
+  })
+
+  it('renders black color', () => {
+    const { container } = render(<Badge label="test" color="black" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-badge--black')
+  })
+
+  it('renders white color', () => {
+    const { container } = render(<Badge label="test" color="white" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-badge--white')
+  })
 })
diff --git a/packages/react/src/Badge/Badge.tsx b/packages/react/src/Badge/Badge.tsx
index fb51164a61..87e270ad79 100644
--- a/packages/react/src/Badge/Badge.tsx
+++ b/packages/react/src/Badge/Badge.tsx
@@ -5,16 +5,17 @@
 
 import clsx from 'clsx'
 import { forwardRef } from 'react'
-import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
+import type { ForwardedRef, HTMLAttributes } from 'react'
 
-export interface BadgeProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
-  color?: 'blue' | 'dark-blue' | 'green' | 'dark-green' | 'orange' | 'magenta' | 'purple' | 'yellow'
+export interface BadgeProps extends HTMLAttributes<HTMLElement> {
+  label: string | number
+  color?: 'blue' | 'dark-blue' | 'green' | 'dark-green' | 'orange' | 'magenta' | 'purple' | 'yellow' | 'black' | 'white'
 }
 
 export const Badge = forwardRef(
-  ({ children, className, color = 'dark-green', ...restProps }: BadgeProps, ref: ForwardedRef<HTMLElement>) => (
+  ({ label, className, color = 'dark-green', ...restProps }: BadgeProps, ref: ForwardedRef<HTMLElement>) => (
     <span {...restProps} ref={ref} className={clsx('amsterdam-badge', `amsterdam-badge--${color}`, className)}>
-      {children}
+      {label}
     </span>
   ),
 )
diff --git a/proprietary/tokens/src/components/amsterdam/badge.tokens.json b/proprietary/tokens/src/components/amsterdam/badge.tokens.json
index 810f4f0034..4a25f7b224 100644
--- a/proprietary/tokens/src/components/amsterdam/badge.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/badge.tokens.json
@@ -43,6 +43,14 @@
       "yellow": {
         "background-color": { "value": "{amsterdam.color.yellow}" },
         "color": { "value": "{amsterdam.color.primary-black}" }
+      },
+      "black": {
+        "background-color": { "value": "{amsterdam.color.primary-black}" },
+        "color": { "value": "{amsterdam.color.primary-white}" }
+      },
+      "white": {
+        "background-color": { "value": "{amsterdam.color.primary-white}" },
+        "color": { "value": "{amsterdam.color.primary-black}" }
       }
     }
   }
diff --git a/storybook/storybook-react/src/Badge/Badge.docs.mdx b/storybook/storybook-react/src/Badge/Badge.docs.mdx
index 873144e5ff..2a21267d46 100644
--- a/storybook/storybook-react/src/Badge/Badge.docs.mdx
+++ b/storybook/storybook-react/src/Badge/Badge.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks";
+import { Controls, Markdown, Meta, Primary } from "@storybook/blocks";
 import * as BadgeStories from "./Badge.stories.tsx";
 import README from "../../../../packages/css/src/components/badge/README.md?raw";
 
@@ -6,14 +6,10 @@ import README from "../../../../packages/css/src/components/badge/README.md?raw"
 
 <Markdown>{README}</Markdown>
 
-## Voorbeelden
+## Stories
 
 ### Default
 
 <Primary />
 
-### In a list
-
-A tip can be used in a list.
-
-<Canvas of={BadgeStories.InList} />
+<Controls />
diff --git a/storybook/storybook-react/src/Badge/Badge.stories.tsx b/storybook/storybook-react/src/Badge/Badge.stories.tsx
index 95590f2bec..17aad77445 100644
--- a/storybook/storybook-react/src/Badge/Badge.stories.tsx
+++ b/storybook/storybook-react/src/Badge/Badge.stories.tsx
@@ -3,21 +3,21 @@
  * Copyright (c) 2024 Gemeente Amsterdam
  */
 
-import { Badge, Heading, OrderedList } from '@amsterdam/design-system-react'
+import { Badge } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
   title: 'Feedback/Badge',
   component: Badge,
   args: {
-    children: 'Tip',
+    label: 'Tip',
   },
   argTypes: {
     color: {
       control: {
         type: 'inline-radio',
       },
-      options: ['blue', 'dark-blue', 'green', 'dark-green', 'orange', 'magenta', 'purple', 'yellow'],
+      options: ['blue', 'dark-blue', 'green', 'dark-green', 'orange', 'magenta', 'purple', 'yellow', 'black', 'white'],
       selected: 'dark-green',
     },
   },
@@ -28,26 +28,3 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
-
-export const InList: Story = {
-  decorators: [
-    (Story) => (
-      <div>
-        <Heading level={4}>Verwerkingstijd en data</Heading>
-        <OrderedList>
-          <OrderedList.Item>Binnen Amsterdam op werkdagen binnen 24 uur.</OrderedList.Item>
-          <OrderedList.Item>
-            Vanuit een andere gemeente ongeveer 5 werkdagen.
-            <br />
-            <Story /> Geeft u uw verhuizing vantevoren door, dan wordt uw melding bewaard tot de verhuisdatum. Dan pas
-            begint de termijn van 24 uur of 5 werkdagen.
-          </OrderedList.Item>
-          <OrderedList.Item>
-            Een verhuizing doorgeven kan 4 weken van tevoren en maximaal 5 dagen erna. Geeft u het later door? Dan wordt
-            de dag van doorgeven de verhuisdatum.
-          </OrderedList.Item>
-        </OrderedList>
-      </div>
-    ),
-  ],
-}

From 3820afca1a452698c007915ebc7b87b9e82ce84b Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Tue, 23 Jan 2024 12:41:10 +0100
Subject: [PATCH 4/4] Removed commented line

---
 packages/react/src/Badge/Badge.test.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react/src/Badge/Badge.test.tsx b/packages/react/src/Badge/Badge.test.tsx
index 11dfb2097e..50c53b4e3a 100644
--- a/packages/react/src/Badge/Badge.test.tsx
+++ b/packages/react/src/Badge/Badge.test.tsx
@@ -63,8 +63,6 @@ describe('Badge', () => {
     expect(component).toHaveClass('amsterdam-badge--blue')
   })
 
-  // 'blue' | 'dark-blue' | 'green' | 'dark-green' | 'orange' | 'magenta' | 'purple' | 'yellow' | 'black' | 'white'
-
   it('renders dark-blue color', () => {
     const { container } = render(<Badge label="test" color="dark-blue" />)