From f9e21afbf09e6870fdbc1057a2b484bd72db9548 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Tue, 13 Feb 2024 14:22:04 +0100
Subject: [PATCH 1/3] fix: Use correct Mega menu list category class

---
 packages/react/src/MegaMenu/MegaMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/MegaMenu/MegaMenu.tsx b/packages/react/src/MegaMenu/MegaMenu.tsx
index 0c8e46139d..bc0b0e1449 100644
--- a/packages/react/src/MegaMenu/MegaMenu.tsx
+++ b/packages/react/src/MegaMenu/MegaMenu.tsx
@@ -26,7 +26,7 @@ const MegaMenuListCategory = forwardRef(
     { children, className, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLDivElement>>,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
-    <div {...restProps} ref={ref} className={clsx('amsterdam-mega-menu__list-wrapper', className)}>
+    <div {...restProps} ref={ref} className={clsx('amsterdam-mega-menu__list-category', className)}>
       {children}
     </div>
   ),

From f0c08ea35b7bfde8e9c2e4b3f2b89592239721ea Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Tue, 13 Feb 2024 14:48:14 +0100
Subject: [PATCH 2/3] Refactor MegaMenu

---
 packages/react/src/MegaMenu/MegaMenu.test.tsx |  4 +-
 packages/react/src/MegaMenu/MegaMenu.tsx      | 13 +-----
 .../MegaMenu/MegaMenuListCategory.test.tsx    | 41 +++++++++++++++++++
 .../src/MegaMenu/MegaMenuListCategory.tsx     | 19 +++++++++
 packages/react/src/MegaMenu/index.ts          |  1 +
 5 files changed, 63 insertions(+), 15 deletions(-)
 create mode 100644 packages/react/src/MegaMenu/MegaMenuListCategory.test.tsx
 create mode 100644 packages/react/src/MegaMenu/MegaMenuListCategory.tsx

diff --git a/packages/react/src/MegaMenu/MegaMenu.test.tsx b/packages/react/src/MegaMenu/MegaMenu.test.tsx
index 5ea79d167e..ec3ec798d1 100644
--- a/packages/react/src/MegaMenu/MegaMenu.test.tsx
+++ b/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', () => {
diff --git a/packages/react/src/MegaMenu/MegaMenu.tsx b/packages/react/src/MegaMenu/MegaMenu.tsx
index bc0b0e1449..37926f2140 100644
--- a/packages/react/src/MegaMenu/MegaMenu.tsx
+++ b/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-category', className)}>
-      {children}
-    </div>
-  ),
-)
-
 MegaMenu.displayName = 'MegaMenu'
-MegaMenuListCategory.displayName = 'MegaMenu.ListCategory'
 MegaMenu.ListCategory = MegaMenuListCategory
diff --git a/packages/react/src/MegaMenu/MegaMenuListCategory.test.tsx b/packages/react/src/MegaMenu/MegaMenuListCategory.test.tsx
new file mode 100644
index 0000000000..6970b227cc
--- /dev/null
+++ b/packages/react/src/MegaMenu/MegaMenuListCategory.test.tsx
@@ -0,0 +1,41 @@
+import { render } from '@testing-library/react'
+import { createRef } from 'react'
+import { MegaMenuListCategory } from './MegaMenuListCategory'
+import '@testing-library/jest-dom'
+
+describe('Mega menu', () => {
+  it('renders', () => {
+    const { container } = render(<MegaMenuListCategory />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    const { container } = render(<MegaMenuListCategory />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-mega-menu__list-category')
+  })
+
+  it('renders an additional class name', () => {
+    const { container } = render(<MegaMenuListCategory className="extra" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-mega-menu__list-category extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLDivElement>()
+
+    const { container } = render(<MegaMenuListCategory ref={ref} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(ref.current).toBe(component)
+  })
+})
diff --git a/packages/react/src/MegaMenu/MegaMenuListCategory.tsx b/packages/react/src/MegaMenu/MegaMenuListCategory.tsx
new file mode 100644
index 0000000000..e142e4754c
--- /dev/null
+++ b/packages/react/src/MegaMenu/MegaMenuListCategory.tsx
@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2024 Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
+
+export type MegaMenuListCategoryProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
+
+export const MegaMenuListCategory = forwardRef(
+  ({ children, className, ...restProps }: MegaMenuListCategoryProps, ref: ForwardedRef<HTMLDivElement>) => (
+    <div {...restProps} ref={ref} className={clsx('amsterdam-mega-menu__list-category', className)}>
+      {children}
+    </div>
+  ),
+)
+
+MegaMenuListCategory.displayName = 'MegaMenu.ListCategory'
diff --git a/packages/react/src/MegaMenu/index.ts b/packages/react/src/MegaMenu/index.ts
index b9f9086abb..88efe67cae 100644
--- a/packages/react/src/MegaMenu/index.ts
+++ b/packages/react/src/MegaMenu/index.ts
@@ -1,2 +1,3 @@
 export { MegaMenu } from './MegaMenu'
 export type { MegaMenuProps } from './MegaMenu'
+export type { MegaMenuListCategoryProps } from './MegaMenuListCategory'

From ee3cd4b94aaf6f8b1b2f65956f4f877bff4b19a9 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 13 Feb 2024 15:20:45 +0100
Subject: [PATCH 3/3] Make all test names consistent

---
 packages/react/src/Accordion/AccordionSection.test.tsx          | 2 +-
 .../{useFocusWithArrow.test.tsx => useFocusWithArrows.test.tsx} | 2 +-
 packages/react/src/Breadcrumb/BreadcrumbItem.test.tsx           | 2 +-
 packages/react/src/Card/CardHeadingGroup.test.tsx               | 2 +-
 packages/react/src/Card/CardLink.test.tsx                       | 2 +-
 packages/react/src/Footer/FooterBottom.test.tsx                 | 2 +-
 packages/react/src/Footer/FooterTop.test.tsx                    | 2 +-
 packages/react/src/Grid/GridCell.test.tsx                       | 2 +-
 packages/react/src/MegaMenu/MegaMenuListCategory.test.tsx       | 2 +-
 packages/react/src/OrderedList/OrderedList.test.tsx             | 2 +-
 packages/react/src/OrderedList/OrderedListItem.test.tsx         | 2 +-
 packages/react/src/PageHeading/PageHeading.test.tsx             | 2 +-
 packages/react/src/PageMenu/PageMenuLink.test.tsx               | 2 +-
 packages/react/src/SkipLink/SkipLink.test.tsx                   | 2 +-
 packages/react/src/UnorderedList/UnorderedList.test.tsx         | 2 +-
 packages/react/src/UnorderedList/UnorderedListItem.test.tsx     | 2 +-
 16 files changed, 16 insertions(+), 16 deletions(-)
 rename packages/react/src/Accordion/{useFocusWithArrow.test.tsx => useFocusWithArrows.test.tsx} (98%)

diff --git a/packages/react/src/Accordion/AccordionSection.test.tsx b/packages/react/src/Accordion/AccordionSection.test.tsx
index ad20012d1a..994decfb46 100644
--- a/packages/react/src/Accordion/AccordionSection.test.tsx
+++ b/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'
 
diff --git a/packages/react/src/Accordion/useFocusWithArrow.test.tsx b/packages/react/src/Accordion/useFocusWithArrows.test.tsx
similarity index 98%
rename from packages/react/src/Accordion/useFocusWithArrow.test.tsx
rename to packages/react/src/Accordion/useFocusWithArrows.test.tsx
index 4fab3b691c..b56a83a34b 100644
--- a/packages/react/src/Accordion/useFocusWithArrow.test.tsx
+++ b/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()
diff --git a/packages/react/src/Breadcrumb/BreadcrumbItem.test.tsx b/packages/react/src/Breadcrumb/BreadcrumbItem.test.tsx
index fb79350423..d809248871 100644
--- a/packages/react/src/Breadcrumb/BreadcrumbItem.test.tsx
+++ b/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')
diff --git a/packages/react/src/Card/CardHeadingGroup.test.tsx b/packages/react/src/Card/CardHeadingGroup.test.tsx
index f32a476c45..c31adb0b42 100644
--- a/packages/react/src/Card/CardHeadingGroup.test.tsx
+++ b/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" />)
 
diff --git a/packages/react/src/Card/CardLink.test.tsx b/packages/react/src/Card/CardLink.test.tsx
index 77fe610cf0..bc865e41a2 100644
--- a/packages/react/src/Card/CardLink.test.tsx
+++ b/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="/" />)
 
diff --git a/packages/react/src/Footer/FooterBottom.test.tsx b/packages/react/src/Footer/FooterBottom.test.tsx
index 28e79a2ff8..56c136cdb9 100644
--- a/packages/react/src/Footer/FooterBottom.test.tsx
+++ b/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 />)
 
diff --git a/packages/react/src/Footer/FooterTop.test.tsx b/packages/react/src/Footer/FooterTop.test.tsx
index 57efd153b9..e03389be10 100644
--- a/packages/react/src/Footer/FooterTop.test.tsx
+++ b/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 />)
 
diff --git a/packages/react/src/Grid/GridCell.test.tsx b/packages/react/src/Grid/GridCell.test.tsx
index e7bf169ae3..ccaf0b9972 100644
--- a/packages/react/src/Grid/GridCell.test.tsx
+++ b/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')
diff --git a/packages/react/src/MegaMenu/MegaMenuListCategory.test.tsx b/packages/react/src/MegaMenu/MegaMenuListCategory.test.tsx
index 6970b227cc..cf225be4db 100644
--- a/packages/react/src/MegaMenu/MegaMenuListCategory.test.tsx
+++ b/packages/react/src/MegaMenu/MegaMenuListCategory.test.tsx
@@ -3,7 +3,7 @@ import { createRef } from 'react'
 import { MegaMenuListCategory } from './MegaMenuListCategory'
 import '@testing-library/jest-dom'
 
-describe('Mega menu', () => {
+describe('Mega menu category', () => {
   it('renders', () => {
     const { container } = render(<MegaMenuListCategory />)
 
diff --git a/packages/react/src/OrderedList/OrderedList.test.tsx b/packages/react/src/OrderedList/OrderedList.test.tsx
index b4c22cd773..b6f58a0767 100644
--- a/packages/react/src/OrderedList/OrderedList.test.tsx
+++ b/packages/react/src/OrderedList/OrderedList.test.tsx
@@ -3,7 +3,7 @@ import { createRef } from 'react'
 import { OrderedList } from './OrderedList'
 import '@testing-library/jest-dom'
 
-describe('Ordered List', () => {
+describe('Ordered list', () => {
   it('renders an HTML ol element', () => {
     const { container } = render(<OrderedList />)
     const list = container.querySelector('ol:only-child')
diff --git a/packages/react/src/OrderedList/OrderedListItem.test.tsx b/packages/react/src/OrderedList/OrderedListItem.test.tsx
index 119c058360..8cba3e354a 100644
--- a/packages/react/src/OrderedList/OrderedListItem.test.tsx
+++ b/packages/react/src/OrderedList/OrderedListItem.test.tsx
@@ -3,7 +3,7 @@ import { createRef } from 'react'
 import { OrderedListItem } from './OrderedListItem'
 import '@testing-library/jest-dom'
 
-describe('Ordered List Item', () => {
+describe('Ordered list item', () => {
   it('renders', () => {
     render(<OrderedListItem />)
 
diff --git a/packages/react/src/PageHeading/PageHeading.test.tsx b/packages/react/src/PageHeading/PageHeading.test.tsx
index b18c15d0d6..6b1a316dee 100644
--- a/packages/react/src/PageHeading/PageHeading.test.tsx
+++ b/packages/react/src/PageHeading/PageHeading.test.tsx
@@ -3,7 +3,7 @@ import { createRef } from 'react'
 import { PageHeading } from './PageHeading'
 import '@testing-library/jest-dom'
 
-describe('PageHeading', () => {
+describe('Page heading', () => {
   it('renders a heading role element', () => {
     render(<PageHeading>Breaking news</PageHeading>)
 
diff --git a/packages/react/src/PageMenu/PageMenuLink.test.tsx b/packages/react/src/PageMenu/PageMenuLink.test.tsx
index b5911620dd..de11bbe6a4 100644
--- a/packages/react/src/PageMenu/PageMenuLink.test.tsx
+++ b/packages/react/src/PageMenu/PageMenuLink.test.tsx
@@ -4,7 +4,7 @@ import { createRef } from 'react'
 import { PageMenuLink } from './PageMenuLink'
 import '@testing-library/jest-dom'
 
-describe('PageMenuLink', () => {
+describe('Page menu link', () => {
   it('renders with href attribute', () => {
     render(<PageMenuLink href="#">Link</PageMenuLink>)
 
diff --git a/packages/react/src/SkipLink/SkipLink.test.tsx b/packages/react/src/SkipLink/SkipLink.test.tsx
index 7472d8d022..10a358c90c 100644
--- a/packages/react/src/SkipLink/SkipLink.test.tsx
+++ b/packages/react/src/SkipLink/SkipLink.test.tsx
@@ -3,7 +3,7 @@ import { createRef } from 'react'
 import { SkipLink } from './SkipLink'
 import '@testing-library/jest-dom'
 
-describe('Skip Link', () => {
+describe('Skip link', () => {
   it('renders', () => {
     render(<SkipLink href="/" />)
 
diff --git a/packages/react/src/UnorderedList/UnorderedList.test.tsx b/packages/react/src/UnorderedList/UnorderedList.test.tsx
index 004ccd36ae..52c96178b4 100644
--- a/packages/react/src/UnorderedList/UnorderedList.test.tsx
+++ b/packages/react/src/UnorderedList/UnorderedList.test.tsx
@@ -3,7 +3,7 @@ import { createRef } from 'react'
 import { UnorderedList } from './UnorderedList'
 import '@testing-library/jest-dom'
 
-describe('Unordered List', () => {
+describe('Unordered list', () => {
   it('renders an HTML ul element', () => {
     const { container } = render(<UnorderedList />)
     const list = container.querySelector('ul:only-child')
diff --git a/packages/react/src/UnorderedList/UnorderedListItem.test.tsx b/packages/react/src/UnorderedList/UnorderedListItem.test.tsx
index 7e3e8f7542..bdb22c902d 100644
--- a/packages/react/src/UnorderedList/UnorderedListItem.test.tsx
+++ b/packages/react/src/UnorderedList/UnorderedListItem.test.tsx
@@ -3,7 +3,7 @@ import { createRef } from 'react'
 import { UnorderedListItem } from './UnorderedListItem'
 import '@testing-library/jest-dom'
 
-describe('Ordered List Item', () => {
+describe('Ordered list item', () => {
   it('renders', () => {
     render(<UnorderedListItem />)