feat: Add Badge component

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

@@ -0,0 +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

@@ -0,0 +1,68 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2024 Gemeente Amsterdam
+ */
+
+.amsterdam-badge {
+  display: inline-block;
+  font-family: var(--amsterdam-badge-font-family);
+  font-size: var(--amsterdam-badge-spacious-font-size);
+  font-weight: var(--amsterdam-badge-font-weight);
+  line-height: var(--amsterdam-badge-spacious-line-height);
+  padding-inline: var(--amsterdam-badge-padding-inline);
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-badge-compact-font-size);
+    line-height: var(--amsterdam-badge-compact-line-height);
+  }
+}
+
+.amsterdam-badge--blue {
+  background-color: var(--amsterdam-badge-blue-background-color);
+  color: var(--amsterdam-badge-blue-color);
+}
+
+.amsterdam-badge--dark-blue {
+  background-color: var(--amsterdam-badge-dark-blue-background-color);
+  color: var(--amsterdam-badge-dark-blue-color);
+}
+
+.amsterdam-badge--green {
+  background-color: var(--amsterdam-badge-green-background-color);
+  color: var(--amsterdam-badge-green-color);
+}
+
+.amsterdam-badge--dark-green {
+  background-color: var(--amsterdam-badge-dark-green-background-color);
+  color: var(--amsterdam-badge-dark-green-color);
+}
+
+.amsterdam-badge--orange {
+  background-color: var(--amsterdam-badge-orange-background-color);
+  color: var(--amsterdam-badge-orange-color);
+}
+
+.amsterdam-badge--magenta {
+  background-color: var(--amsterdam-badge-magenta-background-color);
+  color: var(--amsterdam-badge-magenta-color);
+}
+
+.amsterdam-badge--purple {
+  background-color: var(--amsterdam-badge-purple-background-color);
+  color: var(--amsterdam-badge-purple-color);
+}
+
+.amsterdam-badge--yellow {
+  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/css/src/components/index.scss

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+@import "./badge/badge";
 @import "./table/table";
 @import "./mega-menu/mega-menu";
 @import "./icon-button/icon-button";

packages/react/src/Badge/Badge.test.tsx

@@ -0,0 +1,139 @@
+import { render } from '@testing-library/react'
+import { createRef } from 'react'
+import { Badge } from './Badge'
+import '@testing-library/jest-dom'
+
+describe('Badge', () => {
+  it('renders', () => {
+    const { container } = render(<Badge label="test" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    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 label="test" className="extra" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-badge extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLElement>()
+
+    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 label="test" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-badge--dark-green')
+  })
+
+  it('renders blue color', () => {
+    const { container } = render(<Badge label="test" color="blue" />)
+
+    const component = container.querySelector(':only-child')
+
+    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')
+  })
+})

packages/react/src/Badge/Badge.tsx

@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2024 Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes } from 'react'
+
+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(
+  ({ label, className, color = 'dark-green', ...restProps }: BadgeProps, ref: ForwardedRef<HTMLElement>) => (
+    <span {...restProps} ref={ref} className={clsx('amsterdam-badge', `amsterdam-badge--${color}`, className)}>
+      {label}
+    </span>
+  ),
+)
+
+Badge.displayName = 'Badge'

packages/react/src/Badge/README.md

@@ -0,0 +1,3 @@
+# React Badge component
+
+[Badge documentation](../../../css/src/badge/README.md)

packages/react/src/Badge/index.ts

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

packages/react/src/index.ts

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+export * from './Badge'
 export * from './Table'
 export * from './MegaMenu'
 export * from './IconButton'

proprietary/tokens/src/components/amsterdam/badge.tokens.json

@@ -0,0 +1,57 @@
+{
+  "amsterdam": {
+    "badge": {
+      "font-family": { "value": "{amsterdam.typography.font-family}" },
+      "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
+      "padding-inline": { "value": "0.5rem" },
+      "spacious": {
+        "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
+      },
+      "compact": {
+        "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
+      },
+      "dark-blue": {
+        "background-color": { "value": "{amsterdam.color.dark-blue}" },
+        "color": { "value": "{amsterdam.color.primary-white}" }
+      },
+      "blue": {
+        "background-color": { "value": "{amsterdam.color.blue}" },
+        "color": { "value": "{amsterdam.color.primary-white}" }
+      },
+      "green": {
+        "background-color": { "value": "{amsterdam.color.green}" },
+        "color": { "value": "{amsterdam.color.primary-black}" }
+      },
+      "dark-green": {
+        "background-color": { "value": "{amsterdam.color.dark-green}" },
+        "color": { "value": "{amsterdam.color.primary-white}" }
+      },
+      "orange": {
+        "background-color": { "value": "{amsterdam.color.orange}" },
+        "color": { "value": "{amsterdam.color.primary-black}" }
+      },
+      "magenta": {
+        "background-color": { "value": "{amsterdam.color.magenta}" },
+        "color": { "value": "{amsterdam.color.primary-white}" }
+      },
+      "purple": {
+        "background-color": { "value": "{amsterdam.color.purple}" },
+        "color": { "value": "{amsterdam.color.primary-white}" }
+      },
+      "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

@@ -0,0 +1,15 @@
+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";
+
+<Meta of={BadgeStories} />
+
+<Markdown>{README}</Markdown>
+
+## Stories
+
+### Default
+
+<Primary />
+
+<Controls />

storybook/storybook-react/src/Badge/Badge.stories.tsx

@@ -0,0 +1,30 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2024 Gemeente Amsterdam
+ */
+
+import { Badge } from '@amsterdam/design-system-react'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta = {
+  title: 'Feedback/Badge',
+  component: Badge,
+  args: {
+    label: 'Tip',
+  },
+  argTypes: {
+    color: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['blue', 'dark-blue', 'green', 'dark-green', 'orange', 'magenta', 'purple', 'yellow', 'black', 'white'],
+      selected: 'dark-green',
+    },
+  },
+} satisfies Meta<typeof Badge>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}