Extract reusable variable for badge colors

Source: https://jaketrent.com/post/loop-typescript-union-type/

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

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 import { createRef } from 'react'
-import { Badge } from './Badge'
+import { Badge, badgeColors } from './Badge'
 import '@testing-library/jest-dom'
 
 describe('Badge', () => {
@@ -55,83 +55,13 @@ describe('Badge', () => {
     expect(component).toHaveClass('amsterdam-badge--dark-green')
   })
 
-  it('renders with black color', () => {
-    const { container } = render(<Badge label="test" color="black" />)
+  badgeColors.map((color) =>
+    it(`renders with ${color} color`, () => {
+      const { container } = render(<Badge label="test" color={color} />)
 
-    const component = container.querySelector(':only-child')
-
-    expect(component).toHaveClass('amsterdam-badge--black')
-  })
-
-  it('renders with blue color', () => {
-    const { container } = render(<Badge label="test" color="blue" />)
-
-    const component = container.querySelector(':only-child')
-
-    expect(component).toHaveClass('amsterdam-badge--blue')
-  })
-
-  it('renders with 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 with 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 with green color', () => {
-    const { container } = render(<Badge label="test" color="green" />)
-
-    const component = container.querySelector(':only-child')
-
-    expect(component).toHaveClass('amsterdam-badge--green')
-  })
+      const component = container.querySelector(':only-child')
 
-  it('renders with magenta color', () => {
-    const { container } = render(<Badge label="test" color="magenta" />)
-
-    const component = container.querySelector(':only-child')
-
-    expect(component).toHaveClass('amsterdam-badge--magenta')
-  })
-
-  it('renders with orange color', () => {
-    const { container } = render(<Badge label="test" color="orange" />)
-
-    const component = container.querySelector(':only-child')
-
-    expect(component).toHaveClass('amsterdam-badge--orange')
-  })
-
-  it('renders with purple color', () => {
-    const { container } = render(<Badge label="test" color="purple" />)
-
-    const component = container.querySelector(':only-child')
-
-    expect(component).toHaveClass('amsterdam-badge--purple')
-  })
-
-  it('renders with white color', () => {
-    const { container } = render(<Badge label="test" color="white" />)
-
-    const component = container.querySelector(':only-child')
-
-    expect(component).toHaveClass('amsterdam-badge--white')
-  })
-
-  it('renders with yellow color', () => {
-    const { container } = render(<Badge label="test" color="yellow" />)
-
-    const component = container.querySelector(':only-child')
-
-    expect(component).toHaveClass('amsterdam-badge--yellow')
-  })
+      expect(component).toHaveClass(`amsterdam-badge--${color}`)
+    }),
+  )
 })

packages/react/src/Badge/Badge.tsx

@@ -7,8 +7,23 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes } from 'react'
 
+export const badgeColors = [
+  'black',
+  'blue',
+  'dark-blue',
+  'dark-green',
+  'green',
+  'magenta',
+  'orange',
+  'purple',
+  'white',
+  'yellow',
+] as const
+
+type BadgeColor = (typeof badgeColors)[number]
+
 export interface BadgeProps extends HTMLAttributes<HTMLElement> {
-  color?: 'black' | 'blue' | 'dark-blue' | 'dark-green' | 'green' | 'magenta' | 'orange' | 'purple' | 'white' | 'yellow'
+  color?: BadgeColor
   label: string | number
 }