Merge branch 'develop' into feature/DES-610-inverse-color-lists

.github/workflows/feature-branch-cleanup.yml

@@ -29,8 +29,9 @@ jobs:
 
       - name: Delete folder
         run: |
+          git config --global user.name GitHub Action
+          git config --global user.email [email protected]
           git rm demo-${{ env.BRANCH_NAME }} -r
-          git config user.name ${{ github.actor }}
           git add .
           git commit -m "Remove feature branch folder"
           git push

.release-please-manifest.json

@@ -3,5 +3,5 @@
   "packages/react": "0.5.0",
   "proprietary/assets": "0.1.7",
   "proprietary/react-icons": "0.1.12",
-  "proprietary/tokens": "0.5.0"
+  "proprietary/tokens": "0.5.1"
 }

package.json

@@ -19,29 +19,29 @@
     "./storybook/*"
   ],
   "devDependencies": {
-    "@lerna-lite/cli": "3.2.1",
-    "@lerna-lite/run": "3.2.1",
-    "@types/node": "20.11.7",
-    "@typescript-eslint/eslint-plugin": "6.19.1",
-    "@typescript-eslint/parser": "6.19.1",
+    "@lerna-lite/cli": "3.3.0",
+    "@lerna-lite/run": "3.3.0",
+    "@types/node": "20.11.17",
+    "@typescript-eslint/eslint-plugin": "6.21.0",
+    "@typescript-eslint/parser": "6.21.0",
     "conventional-changelog-conventionalcommits": "7.0.2",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jest": "27.6.3",
+    "eslint-plugin-jest": "27.8.0",
     "eslint-plugin-json": "3.1.0",
     "eslint-plugin-mdx": "3.1.5",
     "eslint-plugin-react": "7.33.2",
     "html-validate": "8.9.1",
     "husky": "8.0.3",
-    "lint-staged": "15.2.0",
-    "markdownlint-cli": "0.38.0",
-    "npm-check-updates": "16.14.13",
+    "lint-staged": "15.2.2",
+    "markdownlint-cli": "0.39.0",
+    "npm-check-updates": "16.14.15",
     "npm-package-json-lint": "7.1.0",
     "npm-run-all": "4.1.5",
     "plop": "4.0.1",
-    "postcss": "8.4.33",
-    "prettier": "3.2.4",
+    "postcss": "8.4.35",
+    "prettier": "3.2.5",
     "rimraf": "5.0.5",
     "stylelint": "15.11.0",
     "stylelint-config-standard-scss": "11.1.0",

packages/css/src/components/button/button.scss

@@ -3,42 +3,94 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../../node_modules/@utrecht/components/button/css";
-
 @mixin reset {
   -webkit-text-size-adjust: 100%;
 }
 
 .amsterdam-button {
+  border: none;
+  cursor: var(--amsterdam-button-cursor);
+  display: inline-flex;
+  font-family: var(--amsterdam-button-font-family);
   font-size: var(--amsterdam-button-font-size);
+  gap: var(--amsterdam-button-gap);
   line-height: var(--amsterdam-button-line-height);
+  outline-offset: var(--amsterdam-button-outline-offset);
+  padding-block-end: var(--amsterdam-button-padding-block-end);
+  padding-block-start: var(--amsterdam-button-padding-block-start);
+  padding-inline-end: var(--amsterdam-button-padding-inline-end);
+  padding-inline-start: var(--amsterdam-button-padding-inline-start);
+  touch-action: manipulation;
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    cursor: var(--amsterdam-button-disabled-cursor);
+  }
 
   @include reset;
 }
 
+@mixin amsterdam-button-forced-color-mode {
+  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    border: 2px solid ButtonBorder; // add border because forced colors changes box-shadow to none
+  }
+}
+
+.amsterdam-button--busy {
+  cursor: var(--amsterdam-button-busy-cursor);
+}
+
+.amsterdam-button--primary {
+  background-color: var(--amsterdam-button-primary-background-color);
+  box-shadow: var(--amsterdam-button-primary-box-shadow);
+  color: var(--amsterdam-button-primary-color);
+
+  &:disabled,
+  [aria-disabled="true"] {
+    background-color: var(--amsterdam-button-primary-disabled-background-color);
+    box-shadow: var(--amsterdam-button-primary-disabled-box-shadow);
+  }
+
+  &:hover:not(:disabled, [aria-disabled="true"]) {
+    background-color: var(--amsterdam-button-primary-hover-background-color);
+    box-shadow: var(--amsterdam-button-primary-hover-box-shadow);
+  }
+
+  @include amsterdam-button-forced-color-mode;
+}
+
 .amsterdam-button--secondary {
+  background-color: var(--amsterdam-button-secondary-background-color);
   box-shadow: var(--amsterdam-button-secondary-box-shadow);
+  color: var(--amsterdam-button-secondary-color);
 
   &:disabled,
   [aria-disabled="true"] {
+    background-color: var(--amsterdam-button-secondary-disabled-background-color);
     box-shadow: var(--amsterdam-button-secondary-disabled-box-shadow);
+    color: var(--amsterdam-button-secondary-disabled-color);
   }
 
   &:hover:not(:disabled, [aria-disabled="true"]) {
     box-shadow: var(--amsterdam-button-secondary-hover-box-shadow);
+    color: var(--amsterdam-button-secondary-hover-color);
   }
-}
 
-.amsterdam-button--secondary:focus:not(:hover, [aria-disabled="true"]) {
-  box-shadow: var(--amsterdam-button-secondary-focus-box-shadow);
+  @include amsterdam-button-forced-color-mode;
 }
 
 .amsterdam-button--tertiary {
+  background-color: var(--amsterdam-button-tertiary-background-color);
+  color: var(--amsterdam-button-tertiary-color);
+
+  &:disabled,
+  [aria-disabled="true"] {
+    background-color: var(--amsterdam-button-tertiary-disabled-background-color);
+    color: var(--amsterdam-button-tertiary-disabled-color);
+  }
+
   &:hover:not(:disabled, [aria-disabled="true"]) {
     box-shadow: var(--amsterdam-button-tertiary-hover-box-shadow);
+    color: var(--amsterdam-button-tertiary-hover-color);
   }
 }
-
-.amsterdam-button--tertiary:focus:not(:hover, [aria-disabled="true"]) {
-  box-shadow: none;
-}

packages/react/package.json

@@ -33,7 +33,6 @@
   ],
   "dependencies": {
     "@amsterdam/design-system-react-icons": "workspace:*",
-    "@utrecht/component-library-react": "3.0.0",
     "clsx": "2.1.0"
   },
   "devDependencies": {
@@ -47,21 +46,21 @@
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/pluginutils": "5.1.0",
     "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "6.3.0",
-    "@testing-library/react": "14.1.2",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/react": "14.2.1",
     "@testing-library/user-event": "14.5.2",
-    "@types/jest": "29.5.11",
+    "@types/jest": "29.5.12",
     "@types/lodash": "4.14.202",
-    "@types/react": "18.2.48",
+    "@types/react": "18.2.55",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "lodash": "4.17.21",
     "next": "14.1.0",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.33",
+    "postcss": "8.4.35",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rollup": "4.9.6",
+    "rollup": "4.10.0",
     "rollup-plugin-delete": "2.0.0",
     "rollup-plugin-dts": "6.1.0",
     "rollup-plugin-filesize": "10.0.0",

packages/react/src/Accordion/AccordionSection.test.tsx

@@ -3,7 +3,7 @@ import { createRef } from 'react'
 import { Accordion } from './Accordion'
 import '@testing-library/jest-dom'
 
-describe('Accordion', () => {
+describe('Accordion section', () => {
   const testLabel = 'Test title'
   const testContent = 'Test content'
 

packages/react/src/Accordion/useFocusWithArrow.test.tsx → packages/react/src/Accordion/useFocusWithArrows.test.tsx

@@ -2,7 +2,7 @@ import { fireEvent, render } from '@testing-library/react'
 import { useRef } from 'react'
 import useFocusWithArrows, { KeyboardKeys } from './useFocusWithArrows'
 
-describe('useFocusWithArrows', () => {
+describe('use focus with arrows', () => {
   const onFocusOneMock = jest.fn()
   const onFocusTwoMock = jest.fn()
   const onFocusThreeMock = jest.fn()

packages/react/src/Breadcrumb/BreadcrumbItem.test.tsx

@@ -3,7 +3,7 @@ import { createRef } from 'react'
 import { BreadcrumbItem } from './BreadcrumbItem'
 import '@testing-library/jest-dom'
 
-describe('BreadcrumbItem', () => {
+describe('Breadcrumb item', () => {
   it('renders', () => {
     render(<BreadcrumbItem href="/" />)
     const component = screen.getByRole('listitem')

packages/react/src/Button/Button.test.tsx

@@ -24,7 +24,7 @@ describe('Button', () => {
 
     expect(button).toBeInTheDocument()
     expect(button).toHaveAttribute('type', 'button')
-    expect(button).toHaveClass('utrecht-button--primary-action')
+    expect(button).toHaveClass('amsterdam-button--primary')
   })
 
   it('renders a button with a specified variant', () => {
@@ -49,11 +49,11 @@ describe('Button', () => {
     })
 
     expect(buttonPrimary).toBeInTheDocument()
-    expect(buttonPrimary).toHaveClass('utrecht-button--primary-action')
+    expect(buttonPrimary).toHaveClass('amsterdam-button--primary')
     expect(buttonSecondary).toBeInTheDocument()
-    expect(buttonSecondary).toHaveClass('utrecht-button--secondary-action')
+    expect(buttonSecondary).toHaveClass('amsterdam-button--secondary')
     expect(buttonTertiary).toBeInTheDocument()
-    expect(buttonTertiary).toHaveClass('utrecht-button--subtle')
+    expect(buttonTertiary).toHaveClass('amsterdam-button--tertiary')
   })
 
   it('renders a disabled button with a specified variant', () => {

packages/react/src/Button/Button.tsx

@@ -1,47 +1,34 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright (c) 2024 Gemeente Amsterdam
  */
 
-import { Button as CommunityButton } from '@utrecht/component-library-react'
 import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ButtonHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 
 export type ButtonProps = {
   variant?: 'primary' | 'secondary' | 'tertiary'
+  /** Render the button in a busy state to indicate something has to finish loading */
+  busy?: boolean
 } & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>
 
-type CommunityButtonAppearance = 'primary-action-button' | 'secondary-action-button' | 'subtle-button'
-
-function getAppearance(variant: ButtonProps['variant']): CommunityButtonAppearance {
-  switch (variant) {
-    case 'secondary':
-      return 'secondary-action-button'
-    case 'tertiary':
-      return 'subtle-button'
-    default:
-      return 'primary-action-button'
-  }
-}
-
 export const Button = forwardRef(
-  ({ children, disabled, variant = 'primary', ...restProps }: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
+  (
+    { children, type, disabled, busy, variant = 'primary', ...restProps }: ButtonProps,
+    ref: ForwardedRef<HTMLButtonElement>,
+  ) => {
     return (
-      <CommunityButton
+      <button
         {...restProps}
-        appearance={getAppearance(variant)}
         ref={ref}
         disabled={disabled}
-        className={clsx(
-          'amsterdam-button',
-          variant === 'secondary' && 'amsterdam-button--secondary',
-          variant === 'tertiary' && 'amsterdam-button--tertiary',
-        )}
+        className={clsx('amsterdam-button', busy === true && 'amsterdam-button--busy', `amsterdam-button--${variant}`)}
+        type={type || 'button'}
+        aria-busy={busy || undefined}
       >
         {children}
-      </CommunityButton>
+      </button>
     )
   },
 )

packages/react/src/Card/CardHeadingGroup.test.tsx

@@ -3,7 +3,7 @@ import { createRef } from 'react'
 import { CardHeadingGroup } from './CardHeadingGroup'
 import '@testing-library/jest-dom'
 
-describe('CardHeadingGroup', () => {
+describe('Card heading group', () => {
   it('renders', () => {
     const { container } = render(<CardHeadingGroup tagline="test" />)
 

packages/react/src/Card/CardLink.test.tsx

@@ -3,7 +3,7 @@ import { createRef } from 'react'
 import { CardLink } from './CardLink'
 import '@testing-library/jest-dom'
 
-describe('CardLink', () => {
+describe('Card link', () => {
   it('renders', () => {
     render(<CardLink href="/" />)
 

packages/react/src/Footer/FooterBottom.test.tsx

@@ -3,7 +3,7 @@ import { createRef } from 'react'
 import { FooterBottom } from './FooterBottom'
 import '@testing-library/jest-dom'
 
-describe('Footer', () => {
+describe('Footer bottom', () => {
   it('renders', () => {
     const { container } = render(<FooterBottom />)
 

packages/react/src/Footer/FooterTop.test.tsx

@@ -3,7 +3,7 @@ import { createRef } from 'react'
 import { FooterTop } from './FooterTop'
 import '@testing-library/jest-dom'
 
-describe('Footer', () => {
+describe('Footer top', () => {
   it('renders', () => {
     const { container } = render(<FooterTop />)
 

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

@@ -3,7 +3,7 @@ import { createRef } from 'react'
 import { Grid } from './Grid'
 import '@testing-library/jest-dom'
 
-describe('Grid.Cell', () => {
+describe('Grid cell', () => {
   it('renders', () => {
     const { container } = render(<Grid.Cell />)
     const component = container.querySelector(':only-child')

packages/react/src/MegaMenu/MegaMenu.test.tsx

@@ -26,9 +26,7 @@ describe('Mega menu', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('extra')
-
-    expect(component).toHaveClass('amsterdam-mega-menu')
+    expect(component).toHaveClass('amsterdam-mega-menu extra')
   })
 
   it('supports ForwardRef in React', () => {

packages/react/src/MegaMenu/MegaMenu.tsx

@@ -6,6 +6,7 @@
 import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
+import { MegaMenuListCategory } from './MegaMenuListCategory'
 
 export type MegaMenuProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
@@ -21,17 +22,5 @@ export const MegaMenu = forwardRef(
   ),
 ) as MegaMenuComponent
 
-const MegaMenuListCategory = forwardRef(
-  (
-    { children, className, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLDivElement>>,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => (
-    <div {...restProps} ref={ref} className={clsx('amsterdam-mega-menu__list-wrapper', className)}>
-      {children}
-    </div>
-  ),
-)
-
 MegaMenu.displayName = 'MegaMenu'
-MegaMenuListCategory.displayName = 'MegaMenu.ListCategory'
 MegaMenu.ListCategory = MegaMenuListCategory