fix: Refactor Mega menu, use correct list category class

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/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

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 category', () => {
+  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)
+  })
+})

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'

packages/react/src/MegaMenu/index.ts

@@ -1,2 +1,3 @@
 export { MegaMenu } from './MegaMenu'
 export type { MegaMenuProps } from './MegaMenu'
+export type { MegaMenuListCategoryProps } from './MegaMenuListCategory'

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')

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 />)
 

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>)
 

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>)
 

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="/" />)
 

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')

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 />)