Refactor MegaMenu

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