Merge branch 'develop' of https://github.com/Amsterdam/design-system …

…into feature/DES-330-header-component

package.json

@@ -24,8 +24,8 @@
     "@lerna-lite/run": "3.1.0",
     "@lerna-lite/version": "3.1.0",
     "@types/node": "20.10.5",
-    "@typescript-eslint/eslint-plugin": "6.14.0",
-    "@typescript-eslint/parser": "6.14.0",
+    "@typescript-eslint/eslint-plugin": "6.15.0",
+    "@typescript-eslint/parser": "6.15.0",
     "conventional-changelog-conventionalcommits": "7.0.2",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",

packages/css/package.json

@@ -23,6 +23,6 @@
     "sass": "1.69.5"
   },
   "dependencies": {
-    "@utrecht/components": "2.0.0"
+    "@utrecht/components": "3.0.0"
   }
 }

packages/react/package.json

@@ -33,9 +33,8 @@
   ],
   "dependencies": {
     "@amsterdam/design-system-react-icons": "workspace:*",
-    "@utrecht/component-library-react": "2.0.0",
-    "clsx": "2.0.0",
-    "date-fns": "2.30.0"
+    "@utrecht/component-library-react": "3.0.0",
+    "clsx": "2.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.23.6",
@@ -51,7 +50,6 @@
     "@testing-library/jest-dom": "6.1.5",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.1",
-    "@types/date-fns": "2.6.0",
     "@types/jest": "29.5.11",
     "@types/lodash": "4.14.202",
     "@types/react": "18.2.45",

packages/react/src/Grid/GridCell.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { createRef } from 'react'
 import { Grid } from './Grid'
 import '@testing-library/jest-dom'
@@ -82,9 +82,15 @@ describe('Grid.Cell', () => {
     )
   })
 
-  it('renders the correct class name for the "all" value of span', () => {
+  it('renders the correct class name for the “all” value of span', () => {
     const { container } = render(<Grid.Cell span="all" />)
     const component = container.querySelector(':only-child')
     expect(component).toHaveClass('amsterdam-grid__cell--span-all')
   })
+
+  it('renders a custom tag', () => {
+    render(<Grid.Cell as="article" />)
+    const cell = screen.getByRole('article')
+    expect(cell).toBeInTheDocument()
+  })
 })

packages/react/src/Grid/GridCell.tsx

@@ -20,14 +20,19 @@ type GridCellSpanAndStartProps = {
   start?: GridColumnNumber | GridColumnNumbers
 }
 
-export type GridCellProps = (GridCellSpanAllProp | GridCellSpanAndStartProps) &
+export type GridCellProps = {
+  as?: 'article' | 'div' | 'section'
+} & (GridCellSpanAllProp | GridCellSpanAndStartProps) &
   PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 export const GridCell = forwardRef(
-  ({ children, className, span, start, ...restProps }: GridCellProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <div {...restProps} ref={ref} className={clsx('amsterdam-grid__cell', gridCellClasses(span, start), className)}>
+  (
+    { as: Tag = 'div', children, className, span, start, ...restProps }: GridCellProps,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => (
+    <Tag {...restProps} ref={ref} className={clsx('amsterdam-grid__cell', gridCellClasses(span, start), className)}>
       {children}
-    </div>
+    </Tag>
   ),
 )
 

packages/react/src/Spotlight/Spotlight.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { createRef } from 'react'
 import { Spotlight } from './Spotlight'
 import '@testing-library/jest-dom'
@@ -48,4 +48,10 @@ describe('Spotlight', () => {
 
     expect(component).toHaveClass('amsterdam-spotlight--green')
   })
+
+  it('renders a custom tag', () => {
+    render(<Spotlight as="article" />)
+    const cell = screen.getByRole('article')
+    expect(cell).toBeInTheDocument()
+  })
 })

packages/react/src/Spotlight/Spotlight.tsx

@@ -12,19 +12,11 @@ export interface SpotlightProps extends PropsWithChildren<HTMLAttributes<HTMLEle
 }
 
 export const Spotlight = forwardRef<HTMLDivElement, SpotlightProps>(
-  ({ children, className, as = 'div', color = 'blue', ...restProps }: SpotlightProps, ref) => {
-    const Component = as
-
-    return (
-      <Component
-        {...restProps}
-        ref={ref}
-        className={clsx('amsterdam-spotlight', `amsterdam-spotlight--${color}`, className)}
-      >
-        {children}
-      </Component>
-    )
-  },
+  ({ children, className, as: Tag = 'div', color = 'blue', ...restProps }: SpotlightProps, ref) => (
+    <Tag {...restProps} ref={ref} className={clsx('amsterdam-spotlight', `amsterdam-spotlight--${color}`, className)}>
+      {children}
+    </Tag>
+  ),
 )
 
 Spotlight.displayName = 'Spotlight'

packages/react/src/TextInput/TextInput.tsx

@@ -6,9 +6,7 @@
 import clsx from 'clsx'
 import { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react'
 
-export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
-  label?: string
-}
+export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {}
 
 export const TextInput = forwardRef(
   ({ className, ...restProps }: TextInputProps, ref: ForwardedRef<HTMLInputElement>) => (