Merge branch 'develop' into feat/DES-666-add-date-input

.github/dependabot.yml

@@ -13,7 +13,7 @@ updates:
   - package-ecosystem: "npm"
     directory: "/"
     schedule:
-      interval: "daily"
+      interval: "weekly"
     versioning-strategy: "increase-if-necessary"
     open-pull-requests-limit: 20
     commit-message:

package.json

@@ -23,34 +23,34 @@
     "./storybook"
   ],
   "devDependencies": {
-    "@lerna-lite/cli": "3.3.1",
-    "@lerna-lite/run": "3.3.1",
-    "@types/node": "20.11.30",
-    "@typescript-eslint/eslint-plugin": "7.3.1",
-    "@typescript-eslint/parser": "7.3.1",
+    "@lerna-lite/cli": "3.3.2",
+    "@lerna-lite/run": "3.3.2",
+    "@types/node": "20.12.7",
+    "@typescript-eslint/eslint-plugin": "7.6.0",
+    "@typescript-eslint/parser": "7.6.0",
     "conventional-changelog-conventionalcommits": "7.0.2",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jest": "27.9.0",
+    "eslint-plugin-jest": "28.2.0",
     "eslint-plugin-json": "3.1.0",
     "eslint-plugin-mdx": "3.1.5",
     "eslint-plugin-react": "7.34.1",
-    "html-validate": "8.17.0",
+    "html-validate": "8.18.1",
     "husky": "9.0.11",
     "lint-staged": "15.2.2",
     "markdownlint-cli": "0.39.0",
-    "npm-check-updates": "16.14.17",
+    "npm-check-updates": "16.14.18",
     "npm-package-json-lint": "7.1.0",
     "npm-run-all": "4.1.5",
     "plop": "4.0.1",
-    "postcss": "8.4.37",
+    "postcss": "8.4.38",
     "prettier": "3.2.5",
     "rimraf": "5.0.5",
-    "stylelint": "16.2.1",
-    "stylelint-config-standard-scss": "13.0.0",
+    "stylelint": "16.3.1",
+    "stylelint-config-standard-scss": "13.1.0",
     "stylelint-order": "6.0.4",
-    "typescript": "5.4.2",
+    "typescript": "5.4.4",
     "wait-on": "7.2.0"
   },
   "scripts": {

packages/css/package.json

@@ -20,9 +20,6 @@
   },
   "devDependencies": {
     "@amsterdam/design-system-tokens": "workspace:*",
-    "sass": "1.72.0"
-  },
-  "dependencies": {
-    "@utrecht/components": "3.0.0"
+    "sass": "1.74.1"
   }
 }

packages/react/documentation/coding-conventions.md

@@ -44,6 +44,6 @@ Do not use `aria-label`. Tools for automatic translation often [do not translate
 
 Some of our components can render different HTML tags; they are polymorphic.
 Spotlight and Grid Cell are examples.
-We’ve decided to use polymorphism only for HTML tags that support global attributes (e.g., `div`, `section`, `footer`, etc.).
+We’ve decided to use polymorphism solely for HTML tags that only support global attributes (e.g., `div`, `section`, `footer`, etc.).
 This is because other HTML tags require more complicated typing, and it is often simpler to separate the components.
 We type the refs as `any` to make React refs work with polymorphic components.

packages/react/package.json

@@ -36,39 +36,39 @@
     "clsx": "2.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.24.1",
-    "@babel/plugin-transform-runtime": "7.24.1",
-    "@babel/preset-env": "7.24.1",
+    "@babel/core": "7.24.4",
+    "@babel/plugin-transform-runtime": "7.24.3",
+    "@babel/preset-env": "7.24.4",
     "@babel/preset-react": "7.24.1",
-    "@babel/runtime": "7.24.1",
+    "@babel/runtime": "7.24.4",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "25.0.7",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/pluginutils": "5.1.0",
     "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "14.2.2",
+    "@testing-library/react": "14.3.0",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.12",
     "@types/lodash": "4.17.0",
-    "@types/react": "18.2.67",
+    "@types/react": "18.2.75",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "lodash": "4.17.21",
     "next": "14.1.4",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.37",
+    "postcss": "8.4.38",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rollup": "4.13.0",
+    "rollup": "4.14.1",
     "rollup-plugin-delete": "2.0.0",
     "rollup-plugin-dts": "6.1.0",
     "rollup-plugin-filesize": "10.0.0",
-    "rollup-plugin-node-externals": "7.0.1",
+    "rollup-plugin-node-externals": "7.1.1",
     "rollup-plugin-node-polyfills": "0.2.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.72.0",
+    "sass": "1.74.1",
     "tslib": "2.6.2"
   },
   "peerDependencies": {

packages/react/src/Switch/Switch.test.tsx

@@ -91,10 +91,10 @@ describe('Switch', () => {
 
   it('is able to pass a React ref', () => {
     const ref = createRef<HTMLInputElement>()
-    const { container } = render(<Switch ref={ref} />)
+    render(<Switch ref={ref} />)
 
-    const switchToggle = container.querySelector('input[type="checkbox"]')
+    const switchElement = screen.getByRole('switch')
 
-    expect(ref.current).toBe(switchToggle)
+    expect(ref.current).toBe(switchElement)
   })
 })

packages/react/src/Tabs/Tabs.test.tsx

@@ -32,9 +32,9 @@ describe('Tabs', () => {
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
 
-    const { container } = render(<Tabs ref={ref} />)
+    render(<Tabs ref={ref} />)
 
-    const component = container.querySelector(':only-child')
+    const component = screen.getByRole('tabs')
 
     expect(ref.current).toBe(component)
   })

packages/react/src/Tabs/TabsList.test.tsx

@@ -31,10 +31,10 @@ describe('Tabs list', () => {
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
 
-    const { container } = render(<TabsList ref={ref} />)
+    render(<TabsList ref={ref} />)
 
-    const tabsList = container.querySelector('.ams-tabs__list')
+    const component = screen.getByRole('tablist')
 
-    expect(ref.current).toBe(tabsList)
+    expect(ref.current).toBe(component)
   })
 })

packages/react/src/Tabs/TabsPanel.test.tsx

@@ -47,10 +47,10 @@ describe('Tabs panel', () => {
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
 
-    const { container } = render(<TabsPanel tab={0} ref={ref} />)
+    render(<TabsPanel tab={0} ref={ref} />)
 
-    const tabsPanel = container.querySelector('.ams-tabs__panel')
+    const component = screen.getByRole('tabpanel')
 
-    expect(ref.current).toBe(tabsPanel)
+    expect(ref.current).toBe(component)
   })
 })

packages/react/src/TextArea/TextArea.test.tsx

@@ -97,9 +97,9 @@ describe('Text area', () => {
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLTextAreaElement>()
 
-    const { container } = render(<TextArea ref={ref} />)
+    render(<TextArea ref={ref} />)
 
-    const component = container.querySelector(':only-child')
+    const component = screen.getByRole('textbox')
 
     expect(ref.current).toBe(component)
   })

plop-templates/react.test.tsx.hbs

@@ -1,40 +1,60 @@
+{{#if role}}
+import { render, screen } from '@testing-library/react'
+{{else}}
 import { render } from '@testing-library/react'
+{{/if}}
 import { createRef } from 'react'
 import { {{pascalCase name}} } from './{{pascalCase name}}'
 import '@testing-library/jest-dom'
 
 describe('{{sentenceCase name}}', () => {
   it('renders', () => {
+    {{#if role}}
+    render(<{{pascalCase name}} />)
+    const component = screen.getByRole('{{role}}')
+    {{else}}
     const { container } = render(<{{pascalCase name}} />)
-
     const component = container.querySelector(':only-child')
+    {{/if}}
 
     expect(component).toBeInTheDocument()
     expect(component).toBeVisible()
   })
 
   it('renders a design system BEM class name', () => {
+    {{#if role}}
+    render(<{{pascalCase name}} />)
+    const component = screen.getByRole('{{role}}')
+    {{else}}
     const { container } = render(<{{pascalCase name}} />)
-
     const component = container.querySelector(':only-child')
+    {{/if}}
 
     expect(component).toHaveClass('ams-{{kebabCase name}}')
   })
 
   it('renders an additional class name', () => {
+    {{#if role}}
+    render(<{{pascalCase name}} className="extra" />)
+    const component = screen.getByRole('{{role}}')
+    {{else}}
     const { container } = render(<{{pascalCase name}} className="extra" />)
-
     const component = container.querySelector(':only-child')
+    {{/if}}
 
     expect(component).toHaveClass('ams-{{kebabCase name}} extra')
   })
 
   it('supports ForwardRef in React', () => {
-    const ref = createRef<HTMLElement>()
+    const ref = createRef<{{ type }}>()
 
+    {{#if role}}
+    render(<{{pascalCase name}} ref={ref} />)
+    const component = screen.getByRole('{{role}}')
+    {{else}}
     const { container } = render(<{{pascalCase name}} ref={ref} />)
-
     const component = container.querySelector(':only-child')
+    {{/if}}
 
     expect(ref.current).toBe(component)
   })

plop-templates/react.tsx.hbs

@@ -5,15 +5,15 @@
 
 import clsx from 'clsx'
 import { forwardRef } from 'react'
-import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
+import type { ForwardedRef, {{ attributes }}, PropsWithChildren } from 'react'
 
-export type {{pascalCase name}}Props = PropsWithChildren<HTMLAttributes<HTMLElement>>
+export type {{pascalCase name}}Props = PropsWithChildren<{{ attributes }}<{{ type }}>>
 
 export const {{pascalCase name}} = forwardRef(
-  ({ children, className, ...restProps }: {{pascalCase name}}Props, ref: ForwardedRef<HTMLElement>) => (
-    <span {...restProps} ref={ref} className={clsx('ams-{{kebabCase name}}', className)}>
+  ({ children, className, ...restProps }: {{pascalCase name}}Props, ref: ForwardedRef<{{ type }}>) => (
+    <{{ tag }} {...restProps} ref={ref} className={clsx('ams-{{kebabCase name}}', className)}>
       {children}
-    </span>
+    </{{ tag }}>
   ),
 )
 

plopfile.mjs

@@ -8,6 +8,29 @@ export default function (plop) {
         name: 'name',
         message: "component's name",
       },
+      {
+        type: 'input',
+        name: 'tag',
+        message: 'Tag name: ',
+        default: 'span',
+      },
+      {
+        type: 'input',
+        name: 'attributes',
+        message: 'DOM API Attributes: ',
+        default: 'HTMLAttributes',
+      },
+      {
+        type: 'input',
+        name: 'type',
+        message: 'DOM API Type: ',
+        default: 'HTMLElement',
+      },
+      {
+        type: 'input',
+        name: 'role',
+        message: 'Aria Role: ',
+      },
     ],
     actions: [
       {