@defra/interactive-map 0.0.40-alpha → 0.0.42-alpha

package/plugins/{datasets/src/components/LayersMenu/LayersMenuRadio.test.jsx → menu/src/components/Menu/MenuRadio.test.jsx}

@@ -1,43 +1,43 @@
 import { render, screen, act } from '@testing-library/react'
 import { isVisibleWhen } from '../../registry/isVisibleWhen.js'
-import { LayersMenuRadio } from './LayersMenuRadio.jsx'
+import { MenuRadio } from './MenuRadio.jsx'
 
 jest.mock('../../registry/isVisibleWhen.js', () => ({
   isVisibleWhen: jest.fn()
 }))
 
 const onChange = jest.fn()
-const baseItem = { id: 'radio-1', label: 'Option One' }
+const baseItem = { id: 'option-1', label: 'Option One' }
 
 beforeEach(() => {
   isVisibleWhen.mockReturnValue(true)
   onChange.mockReset()
 })
 
-describe('LayersMenuRadio', () => {
+describe('MenuRadio', () => {
   describe('visibility', () => {
     it('renders when visibleWhen is not set', () => {
       const { container } = render(
-        <LayersMenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
+        <MenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
       )
       expect(container.querySelector('input[type="radio"]')).toBeTruthy()
     })
 
     it('does not call isVisibleWhen when visibleWhen is not set', () => {
-      render(<LayersMenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />)
+      render(<MenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />)
       expect(isVisibleWhen).not.toHaveBeenCalled()
     })
 
     it('calls isVisibleWhen with the visibleWhen value', () => {
       const visibleWhen = { menu: ['someValue'] }
-      render(<LayersMenuRadio menuGroupItem={{ ...baseItem, visibleWhen }} name='group' checked={false} onChange={onChange} />)
+      render(<MenuRadio menuGroupItem={{ ...baseItem, visibleWhen }} name='group' checked={false} onChange={onChange} />)
       expect(isVisibleWhen).toHaveBeenCalledWith(visibleWhen)
     })
 
     it('returns null when isVisibleWhen resolves to false', () => {
       isVisibleWhen.mockReturnValue(false)
       const { container } = render(
-        <LayersMenuRadio menuGroupItem={{ ...baseItem, visibleWhen: {} }} name='group' checked={false} onChange={onChange} />
+        <MenuRadio menuGroupItem={{ ...baseItem, visibleWhen: {} }} name='group' checked={false} onChange={onChange} />
       )
       expect(container.firstChild).toBeNull()
     })
@@ -45,7 +45,7 @@ describe('LayersMenuRadio', () => {
     it('renders when isVisibleWhen resolves to true', () => {
       isVisibleWhen.mockReturnValue(true)
       const { container } = render(
-        <LayersMenuRadio menuGroupItem={{ ...baseItem, visibleWhen: {} }} name='group' checked={false} onChange={onChange} />
+        <MenuRadio menuGroupItem={{ ...baseItem, visibleWhen: {} }} name='group' checked={false} onChange={onChange} />
       )
       expect(container.querySelector('input[type="radio"]')).toBeTruthy()
     })
@@ -53,52 +53,52 @@ describe('LayersMenuRadio', () => {
 
   describe('rendered output', () => {
     it('renders the item label text', () => {
-      render(<LayersMenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />)
+      render(<MenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />)
       expect(screen.getByText('Option One')).toBeTruthy()
     })
 
     it('sets the name attribute on the input', () => {
       const { container } = render(
-        <LayersMenuRadio menuGroupItem={baseItem} name='my-radio-group' checked={false} onChange={onChange} />
+        <MenuRadio menuGroupItem={baseItem} name='my-radio-group' checked={false} onChange={onChange} />
       )
       expect(container.querySelector('input').name).toBe('my-radio-group')
     })
 
     it('sets checked to true when checked prop is true', () => {
       const { container } = render(
-        <LayersMenuRadio menuGroupItem={baseItem} name='group' checked onChange={onChange} />
+        <MenuRadio menuGroupItem={baseItem} name='group' checked onChange={onChange} />
       )
       expect(container.querySelector('input').checked).toBe(true)
     })
 
     it('sets checked to false when checked prop is false', () => {
       const { container } = render(
-        <LayersMenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
+        <MenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
       )
       expect(container.querySelector('input').checked).toBe(false)
     })
 
     it('sets the input value to the item id', () => {
       const { container } = render(
-        <LayersMenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
+        <MenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
       )
-      expect(container.querySelector('input').value).toBe('radio-1')
+      expect(container.querySelector('input').value).toBe('option-1')
     })
 
     it('associates the label with the input via htmlFor', () => {
       const { container } = render(
-        <LayersMenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
+        <MenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
       )
-      expect(container.querySelector('label').htmlFor).toBe('radio-1')
+      expect(container.querySelector('label').htmlFor).toBe('map-menu-radio-option-1')
     })
 
     it('calls onChange when the radio input changes', () => {
       const { container } = render(
-        <LayersMenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
+        <MenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
       )
       const input = container.querySelector('input')
       const propsKey = Object.keys(input).find(k => k.startsWith('__reactProps'))
-      act(() => { input[propsKey].onChange({ target: { value: 'radio-1' } }) })
+      act(() => { input[propsKey].onChange({ target: { value: 'option-1' } }) })
       expect(onChange).toHaveBeenCalledTimes(1)
     })
   })

package/plugins/menu/src/components/Menu/RadioGroupWrapper.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { isVisibleWhen } from '../../registry/isVisibleWhen.js'
+import { MenuRadio } from './MenuRadio.jsx'
+import { GroupLegend } from './GroupLegend.jsx'
+export const RadioGroupWrapper = ({ menuState, dispatch, menuGroup }) => {
+  const { id, items, visibleWhen } = menuGroup
+  const visible = visibleWhen ? isVisibleWhen(visibleWhen) : true
+  if (!visible) {
+    return null
+  }
+
+  const value = menuState[id]
+  const handleChange = (event) => {
+    dispatch({ type: 'UPDATE_MENU_STATE', payload: { [id]: event.target.value } })
+  }
+
+  return (
+    <GroupLegend menuGroup={menuGroup}>
+      <div className='govuk-radios govuk-radios--small' data-module='govuk-radios'>
+        {items.map((menuGroupItem) =>
+          <MenuRadio
+            key={menuGroupItem.id}
+            menuGroupItem={menuGroupItem}
+            name={id}
+            checked={menuGroupItem.id === value}
+            onChange={handleChange}
+          />
+        )}
+      </div>
+    </GroupLegend>
+  )
+}

package/plugins/{datasets/src/components/LayersMenu/LayersRadioGroupWrapper.test.jsx → menu/src/components/Menu/RadioGroupWrapper.test.jsx}

@@ -1,6 +1,6 @@
 import { render, screen, act } from '@testing-library/react'
 import { isVisibleWhen } from '../../registry/isVisibleWhen.js'
-import { LayersRadioGroupWrapper } from './LayersRadioGroupWrapper.jsx'
+import { RadioGroupWrapper } from './RadioGroupWrapper.jsx'
 
 jest.mock('../../registry/isVisibleWhen.js', () => ({
   isVisibleWhen: jest.fn()
@@ -8,8 +8,8 @@ jest.mock('../../registry/isVisibleWhen.js', () => ({
 
 let capturedOnChange = null
 
-jest.mock('./LayersMenuRadio.jsx', () => ({
-  LayersMenuRadio: ({ menuGroupItem, checked, name, onChange }) => {
+jest.mock('./MenuRadio.jsx', () => ({
+  MenuRadio: ({ menuGroupItem, checked, name, onChange }) => {
     capturedOnChange = onChange
     return (
       <div
@@ -22,7 +22,7 @@ jest.mock('./LayersMenuRadio.jsx', () => ({
   }
 }))
 
-const makePluginState = (menuState = {}) => ({
+const makeProps = (menuState = {}) => ({
   menuState,
   dispatch: jest.fn()
 })
@@ -39,51 +39,51 @@ beforeEach(() => {
   capturedOnChange = null
 })
 
-describe('LayersRadioGroupWrapper', () => {
+describe('RadioGroupWrapper', () => {
   describe('visibility', () => {
     it('returns null when isVisibleWhen resolves to false', () => {
       isVisibleWhen.mockReturnValue(false)
       const { container } = render(
-        <LayersRadioGroupWrapper pluginState={makePluginState()} menuGroup={{ ...baseGroup, visibleWhen: {} }} />
+        <RadioGroupWrapper {...makeProps()} menuGroup={{ ...baseGroup, visibleWhen: {} }} />
       )
       expect(container.firstChild).toBeNull()
     })
 
     it('renders when visibleWhen is not set', () => {
       const { container } = render(
-        <LayersRadioGroupWrapper pluginState={makePluginState()} menuGroup={baseGroup} />
+        <RadioGroupWrapper {...makeProps()} menuGroup={baseGroup} />
       )
       expect(container.querySelector('.govuk-form-group')).toBeTruthy()
     })
 
     it('does not call isVisibleWhen when visibleWhen is not set', () => {
-      render(<LayersRadioGroupWrapper pluginState={makePluginState()} menuGroup={baseGroup} />)
+      render(<RadioGroupWrapper {...makeProps()} menuGroup={baseGroup} />)
       expect(isVisibleWhen).not.toHaveBeenCalled()
     })
 
     it('calls isVisibleWhen with the visibleWhen value', () => {
       const visibleWhen = { menu: ['someValue'] }
-      render(<LayersRadioGroupWrapper pluginState={makePluginState()} menuGroup={{ ...baseGroup, visibleWhen }} />)
+      render(<RadioGroupWrapper {...makeProps()} menuGroup={{ ...baseGroup, visibleWhen }} />)
       expect(isVisibleWhen).toHaveBeenCalledWith(visibleWhen)
     })
   })
 
   describe('rendered output', () => {
     it('renders the group label as the legend', () => {
-      render(<LayersRadioGroupWrapper pluginState={makePluginState()} menuGroup={baseGroup} />)
+      render(<RadioGroupWrapper {...makeProps()} menuGroup={baseGroup} />)
       expect(screen.getByText('My Group')).toBeTruthy()
     })
 
-    it('renders a LayersMenuRadio for each item', () => {
+    it('renders a MenuRadio for each item', () => {
       const { getAllByTestId } = render(
-        <LayersRadioGroupWrapper pluginState={makePluginState()} menuGroup={baseGroup} />
+        <RadioGroupWrapper {...makeProps()} menuGroup={baseGroup} />
       )
       expect(getAllByTestId('layers-menu-radio')).toHaveLength(2)
     })
 
     it('passes the group id as the name to each radio item', () => {
       const { getAllByTestId } = render(
-        <LayersRadioGroupWrapper pluginState={makePluginState()} menuGroup={baseGroup} />
+        <RadioGroupWrapper {...makeProps()} menuGroup={baseGroup} />
       )
       getAllByTestId('layers-menu-radio').forEach(radio => {
         expect(radio.dataset.name).toBe('group-1')
@@ -94,7 +94,7 @@ describe('LayersRadioGroupWrapper', () => {
   describe('checked state', () => {
     it('marks the item matching menuState as checked', () => {
       const { getAllByTestId } = render(
-        <LayersRadioGroupWrapper pluginState={makePluginState({ 'group-1': 'opt-a' })} menuGroup={baseGroup} />
+        <RadioGroupWrapper {...makeProps({ 'group-1': 'opt-a' })} menuGroup={baseGroup} />
       )
       const radios = getAllByTestId('layers-menu-radio')
       expect(radios[0].dataset.checked).toBe('true')
@@ -103,7 +103,7 @@ describe('LayersRadioGroupWrapper', () => {
 
     it('marks no item as checked when menuState has no value for the group', () => {
       const { getAllByTestId } = render(
-        <LayersRadioGroupWrapper pluginState={makePluginState({})} menuGroup={baseGroup} />
+        <RadioGroupWrapper {...makeProps({})} menuGroup={baseGroup} />
       )
       getAllByTestId('layers-menu-radio').forEach(radio => {
         expect(radio.dataset.checked).toBe('false')
@@ -113,10 +113,10 @@ describe('LayersRadioGroupWrapper', () => {
 
   describe('handleChange', () => {
     it('dispatches UPDATE_MENU_STATE with the selected item id', () => {
-      const pluginState = makePluginState({ 'group-1': 'opt-a' })
-      render(<LayersRadioGroupWrapper pluginState={pluginState} menuGroup={baseGroup} />)
+      const props = makeProps({ 'group-1': 'opt-a' })
+      render(<RadioGroupWrapper {...props} menuGroup={baseGroup} />)
       act(() => { capturedOnChange({ target: { value: 'opt-b' } }) })
-      expect(pluginState.dispatch).toHaveBeenCalledWith({
+      expect(props.dispatch).toHaveBeenCalledWith({
         type: 'UPDATE_MENU_STATE',
         payload: { 'group-1': 'opt-b' }
       })
@@ -124,10 +124,10 @@ describe('LayersRadioGroupWrapper', () => {
 
     it('dispatches using the group id as the payload key', () => {
       const group = { ...baseGroup, id: 'another-group' }
-      const pluginState = makePluginState({ 'another-group': 'opt-a' })
-      render(<LayersRadioGroupWrapper pluginState={pluginState} menuGroup={group} />)
+      const props = makeProps({ 'another-group': 'opt-a' })
+      render(<RadioGroupWrapper {...props} menuGroup={group} />)
       act(() => { capturedOnChange({ target: { value: 'opt-b' } }) })
-      expect(pluginState.dispatch).toHaveBeenCalledWith({
+      expect(props.dispatch).toHaveBeenCalledWith({
         type: 'UPDATE_MENU_STATE',
         payload: { 'another-group': 'opt-b' }
       })

package/plugins/menu/src/components/Menu/useIdPrefix.jsx

@@ -0,0 +1,4 @@
+import { createContext, useContext } from 'react'
+
+export const IdPrefixContext = createContext('map-menu')
+export const useIdPrefix = (suffix) => `${useContext(IdPrefixContext)}-${suffix}`

package/plugins/menu/src/index.js

@@ -0,0 +1,13 @@
+import './menu.scss'
+
+export default function createPlugin (options = {}) {
+  return {
+    noKeyItemText: 'No features displayed',
+    ...options,
+    id: 'menu',
+    load: async () => {
+      const module = (await import(/* webpackChunkName: "im-menu-plugin" */ './manifest.js')).manifest
+      return module
+    }
+  }
+}

package/plugins/menu/src/index.test.js

@@ -0,0 +1,31 @@
+import createPlugin from './index.js'
+
+jest.mock('./menu.scss', () => {})
+jest.mock('./manifest.js', () => ({ manifest: { InitComponent: 'MenuInit', panels: [] } }))
+
+describe('createPlugin', () => {
+  it('returns the menu id', () => {
+    expect(createPlugin().id).toBe('menu')
+  })
+
+  it('id cannot be overridden by options', () => {
+    expect(createPlugin({ id: 'other' }).id).toBe('menu')
+  })
+
+  it('returns the default noKeyItemText', () => {
+    expect(createPlugin().noKeyItemText).toBe('No features displayed')
+  })
+
+  it('allows noKeyItemText to be overridden', () => {
+    expect(createPlugin({ noKeyItemText: 'Nothing here' }).noKeyItemText).toBe('Nothing here')
+  })
+
+  it('merges additional options into the returned object', () => {
+    expect(createPlugin({ custom: true }).custom).toBe(true)
+  })
+
+  it('load() resolves to the manifest', async () => {
+    const result = await createPlugin().load()
+    expect(result).toEqual({ InitComponent: 'MenuInit', panels: [] })
+  })
+})

package/plugins/menu/src/initialise/MenuInit.jsx

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react'
+import { createMenu } from './createMenu.js'
+import { attachPluginStateRef } from '../registry/isVisibleWhen.js'
+
+// additional possible params here are: appState, mapProvider,
+export function MenuInit ({ pluginConfig, pluginState, mapState, services }) {
+  const { dispatch } = pluginState
+  const { eventBus } = services
+
+  const pluginStateRef = useRef(pluginState)
+  pluginStateRef.current = pluginState
+
+  useEffect(() => {
+    if (!mapState.isMapReady) {
+      return () => {}
+    }
+    attachPluginStateRef(pluginStateRef)
+    const { menu } = pluginConfig
+    return createMenu({ menu, eventBus, dispatch, pluginStateRef })
+  }, [mapState.isMapReady])
+
+  // Notify any plugins, that are listening, to the menu's state change
+  useEffect(() => eventBus.emit('menu:changed', pluginState.menuState), [pluginState.menuState])
+}

package/plugins/menu/src/initialise/MenuInit.test.jsx

@@ -0,0 +1,50 @@
+import { render } from '@testing-library/react'
+import { MenuInit } from './MenuInit.jsx'
+import { createMenu } from './createMenu.js'
+
+jest.mock('./createMenu.js', () => ({
+  createMenu: jest.fn()
+}))
+
+const mockRemove = jest.fn()
+const mockDispatch = jest.fn()
+const eventBus = { on: jest.fn(), off: jest.fn(), emit: jest.fn(), emitWhenRequested: jest.fn() }
+const services = { eventBus }
+const pluginState = { dispatch: mockDispatch, menuState: null }
+const pluginConfig = { menu: [] }
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  createMenu.mockReturnValue(mockRemove)
+})
+
+describe('MenuInit', () => {
+  it('does not call createMenu when map is not ready', () => {
+    render(<MenuInit mapState={{ isMapReady: false }} services={services} pluginState={pluginState} pluginConfig={pluginConfig} />)
+    expect(createMenu).not.toHaveBeenCalled()
+  })
+
+  it('calls createMenu with eventBus when map is ready', () => {
+    render(<MenuInit mapState={{ isMapReady: true }} services={services} pluginState={pluginState} pluginConfig={pluginConfig} />)
+    expect(createMenu).toHaveBeenCalledWith(expect.objectContaining({ eventBus }))
+  })
+
+  it('calls remove on unmount when map was ready', () => {
+    const { unmount } = render(<MenuInit mapState={{ isMapReady: true }} services={services} pluginState={pluginState} pluginConfig={pluginConfig} />)
+    unmount()
+    expect(mockRemove).toHaveBeenCalled()
+  })
+
+  it('does not call remove on unmount when map was not ready', () => {
+    const { unmount } = render(<MenuInit mapState={{ isMapReady: false }} services={services} pluginState={pluginState} pluginConfig={pluginConfig} />)
+    unmount()
+    expect(mockRemove).not.toHaveBeenCalled()
+  })
+
+  it('calls createMenu again when isMapReady changes to true', () => {
+    const { rerender } = render(<MenuInit mapState={{ isMapReady: false }} services={services} pluginState={pluginState} pluginConfig={pluginConfig} />)
+    expect(createMenu).not.toHaveBeenCalled()
+    rerender(<MenuInit mapState={{ isMapReady: true }} services={services} pluginState={pluginState} pluginConfig={pluginConfig} />)
+    expect(createMenu).toHaveBeenCalledTimes(1)
+  })
+})

package/plugins/menu/src/initialise/createMenu.js

@@ -0,0 +1,10 @@
+import { setDatasetRegistry } from '../registry/getDatasetRegistry.js'
+
+export const createMenu = ({ menu, eventBus, dispatch, pluginStateRef }) => {
+  dispatch({ type: 'SET_MENU', payload: { menu } })
+  // Request a handle on the datasetsRegistry singleton, so that the menu plugin can access it when needed
+  eventBus.requestOnce('datasets:registry', setDatasetRegistry)
+  // add a listener for the menu:state event, which will be emitted whenever requested by other plugins,
+  // e.g. the datasets plugin, so they can access the menu state.
+  return eventBus.emitWhenRequested('menu:state', pluginStateRef)
+}

package/plugins/menu/src/initialise/createMenu.test.js

@@ -0,0 +1,37 @@
+import { createMenu } from './createMenu.js'
+import { setDatasetRegistry } from '../registry/getDatasetRegistry.js'
+
+jest.mock('../registry/getDatasetRegistry.js', () => ({
+  setDatasetRegistry: jest.fn()
+}))
+
+const makeEventBus = () => ({
+  on: jest.fn(),
+  off: jest.fn(),
+  emit: jest.fn(),
+  requestOnce: jest.fn(),
+  emitWhenRequested: jest.fn()
+})
+
+describe('createMenu', () => {
+  it('dispatches SET_MENU with the menu', () => {
+    const eventBus = makeEventBus()
+    const dispatch = jest.fn()
+    const menu = [{ id: 'layer1' }]
+    createMenu({ menu, eventBus, dispatch, pluginStateRef: {} })
+    expect(dispatch).toHaveBeenCalledWith({ type: 'SET_MENU', payload: { menu } })
+  })
+
+  it('calls requestOnce for the datasets registry', () => {
+    const eventBus = makeEventBus()
+    createMenu({ eventBus, dispatch: jest.fn(), pluginStateRef: {} })
+    expect(eventBus.requestOnce).toHaveBeenCalledWith('datasets:registry', setDatasetRegistry)
+  })
+
+  it('calls emitWhenRequested for menu:state', () => {
+    const eventBus = makeEventBus()
+    const pluginStateRef = { current: {} }
+    createMenu({ eventBus, dispatch: jest.fn(), pluginStateRef })
+    expect(eventBus.emitWhenRequested).toHaveBeenCalledWith('menu:state', pluginStateRef)
+  })
+})

package/plugins/menu/src/manifest.js

@@ -0,0 +1,35 @@
+import { Menu } from './components/Menu/Menu.jsx'
+import './registry/getDatasetRegistry.js'
+import { MenuInit } from './initialise/MenuInit.jsx'
+import { initialState, actions } from './reducers/pluginState.js'
+
+export const manifest = {
+  InitComponent: MenuInit,
+  reducer: {
+    initialState,
+    actions
+  },
+  panels: [
+    {
+      id: 'menu',
+      label: 'Layers',
+      mobile: { slot: 'drawer', modal: true, dismissible: true },
+      tablet: { slot: 'left-top', dismissible: true, exclusive: true, width: '260px' },
+      desktop: { slot: 'left-top', modal: false, dismissible: true, exclusive: true, width: '280px' },
+      render: Menu
+    }],
+  buttons: [{
+    id: 'menuButton',
+    label: 'Layers',
+    panelId: 'menu',
+    iconId: 'layersMenu',
+    mobile: { slot: 'top-left', showLabel: true },
+    tablet: { slot: 'top-left', showLabel: true },
+    desktop: { slot: 'top-left', showLabel: true }
+  }],
+
+  icons: [{
+    id: 'layersMenu',
+    svgContent: '<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path>'
+  }]
+}

package/plugins/menu/src/manifest.test.js

@@ -0,0 +1,63 @@
+import { manifest } from './manifest.js'
+import { Menu } from './components/Menu/Menu.jsx'
+import { MenuInit } from './initialise/MenuInit.jsx'
+
+jest.mock('./components/Menu/Menu.jsx', () => ({ Menu: jest.fn() }))
+jest.mock('./initialise/MenuInit.jsx', () => ({ MenuInit: jest.fn() }))
+jest.mock('./registry/getDatasetRegistry.js', () => ({}))
+
+describe('manifest', () => {
+  it('sets InitComponent to MenuInit', () => {
+    expect(manifest.InitComponent).toBe(MenuInit)
+  })
+
+  describe('panels', () => {
+    it('defines one panel', () => {
+      expect(manifest.panels).toHaveLength(1)
+    })
+
+    it('panel has id menu', () => {
+      expect(manifest.panels[0].id).toBe('menu')
+    })
+
+    it('panel render is Menu', () => {
+      expect(manifest.panels[0].render).toBe(Menu)
+    })
+
+    it('panel defines mobile, tablet and desktop slots', () => {
+      const { mobile, tablet, desktop } = manifest.panels[0]
+      expect(mobile.slot).toBe('drawer')
+      expect(tablet.slot).toBe('left-top')
+      expect(desktop.slot).toBe('left-top')
+    })
+  })
+
+  describe('buttons', () => {
+    it('defines one button', () => {
+      expect(manifest.buttons).toHaveLength(1)
+    })
+
+    it('button has id menuButton and links to the menu panel', () => {
+      expect(manifest.buttons[0].id).toBe('menuButton')
+      expect(manifest.buttons[0].panelId).toBe('menu')
+    })
+
+    it('button references the layersMenu icon', () => {
+      expect(manifest.buttons[0].iconId).toBe('layersMenu')
+    })
+  })
+
+  describe('icons', () => {
+    it('defines one icon', () => {
+      expect(manifest.icons).toHaveLength(1)
+    })
+
+    it('icon id is layersMenu', () => {
+      expect(manifest.icons[0].id).toBe('layersMenu')
+    })
+
+    it('icon has svgContent', () => {
+      expect(manifest.icons[0].svgContent).toBeTruthy()
+    })
+  })
+})

package/plugins/menu/src/menu.scss

@@ -0,0 +1,4 @@
+// ===================================================
+// Component: Menu
+// ===================================================
+@use './components/Menu/Menu.module';

package/plugins/menu/src/reducers/menuStateReducer.test.js

@@ -0,0 +1,38 @@
+import { buildMenuState } from './menuStateReducer.js'
+
+describe('buildMenuState', () => {
+  it('returns an empty object for an empty menu', () => {
+    expect(buildMenuState([])).toEqual({})
+  })
+
+  it('ignores non-radio menu groups', () => {
+    const menu = [{ id: 'layer', type: 'checkbox', value: 'a' }]
+    expect(buildMenuState(menu)).toEqual({})
+  })
+
+  it('uses the explicit value when set', () => {
+    const menu = [{ id: 'datasets', type: 'radio', value: 'floodZones', items: [{ value: 'other' }] }]
+    expect(buildMenuState(menu)).toEqual({ datasets: 'floodZones' })
+  })
+
+  it('falls back to the first item value when no value is set', () => {
+    const menu = [{ id: 'datasets', type: 'radio', items: [{ value: 'floodZones' }, { value: 'other' }] }]
+    expect(buildMenuState(menu)).toEqual({ datasets: 'floodZones' })
+  })
+
+  it('handles multiple radio groups', () => {
+    const menu = [
+      { id: 'datasets', type: 'radio', value: 'floodZones' },
+      { id: 'timeframe', type: 'radio', items: [{ value: 'presentDay' }] }
+    ]
+    expect(buildMenuState(menu)).toEqual({ datasets: 'floodZones', timeframe: 'presentDay' })
+  })
+
+  it('mixes radio and non-radio groups, only including radios', () => {
+    const menu = [
+      { id: 'layer', type: 'checkbox', value: 'a' },
+      { id: 'datasets', type: 'radio', value: 'floodZones' }
+    ]
+    expect(buildMenuState(menu)).toEqual({ datasets: 'floodZones' })
+  })
+})

package/plugins/menu/src/reducers/pluginState.js

@@ -0,0 +1,35 @@
+import { buildMenuState } from './menuStateReducer.js'
+
+const initialState = {
+  actionsArray: [],
+  menu: [],
+  menuState: {}
+}
+
+const updateMenuState = (state, payload) => {
+  return {
+    ...state,
+    menuState: { ...state.menuState, ...payload }
+  }
+}
+
+const setMenu = (state, payload) => {
+  const { menu } = payload
+  // build the initial menuState for radios from the menu
+  const menuState = buildMenuState(menu)
+  return {
+    ...state,
+    menu,
+    menuState
+  }
+}
+
+const actions = {
+  SET_MENU: setMenu,
+  UPDATE_MENU_STATE: updateMenuState
+}
+
+export {
+  initialState,
+  actions
+}