feat(Badge)!: Remove some colour options (#1826)

Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com>

Author: VincentSmedinga

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

@@ -8,5 +8,5 @@ Guides the user in taking a specific action or describes its surrounding content
 ## Design
 
 The badge can contain a short text or a number.
-The default background colour is dark green.
-Suggestions on when to use the other colours will follow soon.
+Any colour from the ‘highlight’ and ‘feedback’ groups can be used as a background colour.
+The default is dark green.

packages/css/src/components/badge/badge.scss

@@ -4,6 +4,8 @@
  */
 
 .ams-badge {
+  background-color: var(--ams-badge-background-color);
+  color: var(--ams-badge-color);
   display: inline-block;
   font-family: var(--ams-badge-font-family);
   font-size: var(--ams-badge-font-size);
@@ -12,41 +14,11 @@
   padding-inline: var(--ams-badge-padding-inline);
 }
 
-.ams-badge--black {
-  background-color: var(--ams-badge-black-background-color);
-  color: var(--ams-badge-black-color);
-}
-
-.ams-badge--blue {
-  background-color: var(--ams-badge-blue-background-color);
-  color: var(--ams-badge-blue-color);
-}
-
-.ams-badge--dark-green {
-  background-color: var(--ams-badge-dark-green-background-color);
-  color: var(--ams-badge-dark-green-color);
-}
-
 .ams-badge--green {
   background-color: var(--ams-badge-green-background-color);
   color: var(--ams-badge-green-color);
 }
 
-.ams-badge--grey-1 {
-  background-color: var(--ams-badge-grey-1-background-color);
-  color: var(--ams-badge-grey-1-color);
-}
-
-.ams-badge--grey-2 {
-  background-color: var(--ams-badge-grey-2-background-color);
-  color: var(--ams-badge-grey-2-color);
-}
-
-.ams-badge--grey-3 {
-  background-color: var(--ams-badge-grey-3-background-color);
-  color: var(--ams-badge-grey-3-color);
-}
-
 .ams-badge--light-blue {
   background-color: var(--ams-badge-light-blue-background-color);
   color: var(--ams-badge-light-blue-color);
@@ -72,11 +44,6 @@
   color: var(--ams-badge-red-color);
 }
 
-.ams-badge--white {
-  background-color: var(--ams-badge-white-background-color);
-  color: var(--ams-badge-white-color);
-}
-
 .ams-badge--yellow {
   background-color: var(--ams-badge-yellow-background-color);
   color: var(--ams-badge-yellow-color);

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

@@ -47,14 +47,6 @@ describe('Badge', () => {
     expect(component).toHaveTextContent('1')
   })
 
-  it('renders with default color', () => {
-    const { container } = render(<Badge label="test" />)
-
-    const component = container.querySelector(':only-child')
-
-    expect(component).toHaveClass('ams-badge--dark-green')
-  })
-
   badgeColors.map((color) =>
     it(`renders with ${color} color`, () => {
       const { container } = render(<Badge label="test" color={color} />)

packages/react/src/Badge/Badge.tsx

@@ -7,22 +7,7 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes } from 'react'
 
-export const badgeColors = [
-  'black',
-  'blue',
-  'dark-green',
-  'green',
-  'grey-1',
-  'grey-2',
-  'grey-3',
-  'light-blue',
-  'magenta',
-  'orange',
-  'purple',
-  'red',
-  'white',
-  'yellow',
-] as const
+export const badgeColors = ['green', 'light-blue', 'magenta', 'orange', 'purple', 'red', 'yellow'] as const
 
 type BadgeColor = (typeof badgeColors)[number]
 
@@ -34,8 +19,8 @@ export type BadgeProps = {
 } & HTMLAttributes<HTMLElement>
 
 export const Badge = forwardRef(
-  ({ label, className, color = 'dark-green', ...restProps }: BadgeProps, ref: ForwardedRef<HTMLElement>) => (
-    <span {...restProps} ref={ref} className={clsx('ams-badge', `ams-badge--${color}`, className)}>
+  ({ label, className, color, ...restProps }: BadgeProps, ref: ForwardedRef<HTMLElement>) => (
+    <span {...restProps} ref={ref} className={clsx('ams-badge', color && `ams-badge--${color}`, className)}>
       {label}
     </span>
   ),

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

@@ -1,39 +1,17 @@
 {
   "ams": {
     "badge": {
+      "background-color": { "value": "{ams.color.dark-green}" },
+      "color": { "value": "{ams.color.primary-white}" },
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.5.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.bold}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "padding-inline": { "value": "{ams.space.xs}" },
-      "black": {
-        "background-color": { "value": "{ams.color.primary-black}" },
-        "color": { "value": "{ams.color.primary-white}" }
-      },
-      "blue": {
-        "background-color": { "value": "{ams.color.primary-blue}" },
-        "color": { "value": "{ams.color.primary-white}" }
-      },
-      "dark-green": {
-        "background-color": { "value": "{ams.color.dark-green}" },
-        "color": { "value": "{ams.color.primary-white}" }
-      },
       "green": {
         "background-color": { "value": "{ams.color.green}" },
         "color": { "value": "{ams.color.primary-black}" }
       },
-      "grey-1": {
-        "background-color": { "value": "{ams.color.neutral-grey1}" },
-        "color": { "value": "{ams.color.primary-black}" }
-      },
-      "grey-2": {
-        "background-color": { "value": "{ams.color.neutral-grey2}" },
-        "color": { "value": "{ams.color.primary-black}" }
-      },
-      "grey-3": {
-        "background-color": { "value": "{ams.color.neutral-grey3}" },
-        "color": { "value": "{ams.color.primary-white}" }
-      },
       "light-blue": {
         "background-color": { "value": "{ams.color.blue}" },
         "color": { "value": "{ams.color.primary-black}" }
@@ -54,10 +32,6 @@
         "background-color": { "value": "{ams.color.primary-red}" },
         "color": { "value": "{ams.color.primary-white}" }
       },
-      "white": {
-        "background-color": { "value": "{ams.color.primary-white}" },
-        "color": { "value": "{ams.color.primary-black}" }
-      },
       "yellow": {
         "background-color": { "value": "{ams.color.yellow}" },
         "color": { "value": "{ams.color.primary-black}" }

storybook/src/components/Badge/Badge.stories.tsx

@@ -4,6 +4,7 @@
  */
 
 import { Badge } from '@amsterdam/design-system-react/src'
+import { badgeColors } from '@amsterdam/design-system-react/src/Badge/Badge'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
@@ -12,6 +13,14 @@ const meta = {
   args: {
     label: 'Tip',
   },
+  argTypes: {
+    color: {
+      control: {
+        labels: { undefined: 'dark-green (default)' },
+      },
+      options: [undefined, ...badgeColors],
+    },
+  },
 } satisfies Meta<typeof Badge>
 
 export default meta