Merge branch 'feature/DES-331-Badge' of https://github.com/Amsterdam/…

…design-system into feature/DES-544-Tip

packages/css/src/components/badge/README.md

@@ -1 +1,12 @@
 # Badge
+
+A prominently colored box containing 1 or 2 words to guide the user in taking a specific action.
+
+## Design
+
+The badge can contain a string of text or a number.
+
+## Guidelines
+
+The default background colour is green.
+Suggestions when to use the other colours will follow soon.

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 {
@@ -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);
+}

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,15 +14,15 @@ 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')
 
     expect(component).toHaveClass('amsterdam-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,106 @@ 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')
   })
+
+  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')
+  })
 })

packages/react/src/Badge/Badge.tsx

@@ -1,20 +1,21 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright (c) 2024 Gemeente Amsterdam
  */
 
 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>
   ),
 )

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}" }
       }
     }
   }

storybook/storybook-react/src/Badge/Badge.docs.mdx

@@ -6,6 +6,10 @@ import README from "../../../../packages/css/src/components/badge/README.md?raw"
 
 <Markdown>{README}</Markdown>
 
+## Stories
+
+### Default
+
 <Primary />
 
 <Controls />

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 } from '@amsterdam/design-system-react'
@@ -10,14 +10,14 @@ 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',
     },
   },