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

package/plugins/menu/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@defra/menu-plugin",
+  "version": "1.0.0-alpha.1",
+  "main": "dist/umd/index.js",
+  "module": "dist/esm/index.js",
+  "exports": {
+    "import": "./dist/esm/index.js",
+    "require": "./dist/umd/index.js"
+  },
+  "type": "module",
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "preact": "^10.27.0"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true },
+    "react-dom": { "optional": true }
+  },
+  "scripts": {
+    "build:umd": "webpack --config ../../../webpack.umd.js --mode production",
+    "build:esm": "webpack --config ../../../webpack.esm.mjs --mode production",
+    "build": "npm run build:umd && npm run build:esm",
+    "clean": "rm -rf dist"
+  },
+  "devDependencies": {},
+  "dependencies": {}
+}

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

@@ -0,0 +1,21 @@
+import React from 'react'
+import { MenuCheckbox } from './MenuCheckbox.jsx'
+import { GroupLegend } from './GroupLegend.jsx'
+
+export const CheckboxGroupWrapper = ({ dispatch, menuGroup, menuState }) => {
+  return (
+    <GroupLegend menuGroup={menuGroup}> {
+      // Each menuGroupItem
+      menuGroup.items.map(menuGroupItem => (
+        <MenuCheckbox
+          key={menuGroupItem.id}
+          dispatch={dispatch}
+          menuGroupItem={menuGroupItem}
+          checked={menuState[menuGroupItem.id]}
+          onChange={menuGroupItem.handleOnChange}
+        />)
+      )
+    }
+    </GroupLegend>
+  )
+}

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

@@ -0,0 +1,17 @@
+export const GroupLegend = ({ menuGroup, children }) => {
+  const label = menuGroup.groupLabel || menuGroup.label
+  if (!label) {
+    return <>{children}</>
+  }
+  const wrapperClass = 'govuk-form-group im-c-menu-group'
+  return (
+    <div key={menuGroup.id} className={wrapperClass}>
+      <fieldset className='im-c-menu-group__fieldset'>
+        <legend className='im-c-menu-group__legend'>
+          <h3> {label} </h3>
+        </legend>
+        {children}
+      </fieldset>
+    </div>
+  )
+}

package/plugins/menu/src/components/Menu/GroupLegend.test.jsx

@@ -0,0 +1,68 @@
+import { render, screen } from '@testing-library/react'
+import { GroupLegend } from './GroupLegend.jsx'
+
+const child = <span data-testid='child'>Child content</span>
+
+describe('GroupLegend', () => {
+  describe('without a groupLabel', () => {
+    it('renders children directly without a wrapping div', () => {
+      const { getByTestId, container } = render(
+        <GroupLegend menuGroup={{ id: 'g1' }}>{child}</GroupLegend>
+      )
+      expect(getByTestId('child')).toBeTruthy()
+      expect(container.querySelector('.govuk-form-group')).toBeNull()
+    })
+
+    it('does not render a fieldset when groupLabel is absent', () => {
+      const { container } = render(
+        <GroupLegend menuGroup={{ id: 'g1' }}>{child}</GroupLegend>
+      )
+      expect(container.querySelector('fieldset')).toBeNull()
+    })
+
+    it('does not render a fieldset when groupLabel is an empty string', () => {
+      const { container } = render(
+        <GroupLegend menuGroup={{ id: 'g1', groupLabel: '' }}>{child}</GroupLegend>
+      )
+      expect(container.querySelector('fieldset')).toBeNull()
+    })
+  })
+
+  describe('with a groupLabel', () => {
+    it('renders the outer wrapper with the correct classes', () => {
+      const { container } = render(
+        <GroupLegend menuGroup={{ id: 'g1', groupLabel: 'My Group' }}>{child}</GroupLegend>
+      )
+      const wrapper = container.querySelector('.govuk-form-group.im-c-menu-group')
+      expect(wrapper).toBeTruthy()
+    })
+
+    it('renders a fieldset with the correct class', () => {
+      const { container } = render(
+        <GroupLegend menuGroup={{ id: 'g1', groupLabel: 'My Group' }}>{child}</GroupLegend>
+      )
+      expect(container.querySelector('fieldset.im-c-menu-group__fieldset')).toBeTruthy()
+    })
+
+    it('renders the groupLabel as the legend text', () => {
+      render(
+        <GroupLegend menuGroup={{ id: 'g1', groupLabel: 'My Group' }}>{child}</GroupLegend>
+      )
+      expect(screen.getByText('My Group')).toBeTruthy()
+    })
+
+    it('renders the legend with the correct class', () => {
+      const { container } = render(
+        <GroupLegend menuGroup={{ id: 'g1', groupLabel: 'My Group' }}>{child}</GroupLegend>
+      )
+      expect(container.querySelector('legend.im-c-menu-group__legend')).toBeTruthy()
+    })
+
+    it('renders children inside the fieldset', () => {
+      const { getByTestId } = render(
+        <GroupLegend menuGroup={{ id: 'g1', groupLabel: 'My Group' }}>{child}</GroupLegend>
+      )
+      expect(getByTestId('child')).toBeTruthy()
+    })
+  })
+})

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

@@ -0,0 +1,19 @@
+import React from 'react'
+import { MenuGroup } from './MenuGroup.jsx'
+import { IdPrefixContext } from './useIdPrefix.jsx'
+
+export const Menu = ({ pluginState, appConfig }) => {
+  const { menu = [], dispatch, menuState } = pluginState
+  const appId = appConfig?.id || 'map'
+  const hasGroups = menu.some(item => item.groupLabel)
+  const containerClass = `im-c-menu${hasGroups ? ' im-c-menu--has-groups' : ''}`
+  return (
+    <IdPrefixContext value={`${appId}-menu`}>
+      <div className={containerClass}> {
+          menu.map(menuGroup =>
+            <MenuGroup key={menuGroup.id} menuGroup={menuGroup} dispatch={dispatch} menuState={menuState} />)
+      }
+      </div>
+    </IdPrefixContext>
+  )
+}

package/plugins/menu/src/components/Menu/Menu.module.scss

@@ -0,0 +1,90 @@
+// When groups are present, every direct child except the first gets a border-top
+
+.im-c-menu--has-groups > *:not(:first-child) {
+  border-top: 1px solid var(--button-hover-color);
+}
+
+.im-c-menu > *:first-child {
+  padding-top: 5px;
+}
+
+.im-c-menu > *:last-child {
+  margin-bottom: -5px;
+}
+
+.im-c-menu-group:not(:last-child) {
+  padding-bottom: 5px;
+}
+
+.im-c-menu__item {
+  padding-bottom: 5px;
+
+  &:first-child {
+    padding-top: 0;
+  }
+
+  .im-c-menu--has-groups > &:not(:first-child) {
+    padding-top: 5px;
+  }
+
+  // Items inside a group have no individual padding or spacing between them
+  .im-c-menu-group & {
+    padding-top: 0;
+    padding-bottom: 0;
+
+    &:not(:last-child) {
+      margin-bottom: 0;
+    }
+  }
+
+  .im-c-menu__item-label {
+    width: 100%;
+    max-width: none;
+    align-items: start;
+    padding-top: 12px;
+    padding-bottom: 10px;
+    align-self: auto;
+    font-size: 1rem;
+    line-height: 1.2;
+
+    color: var(--foreground-color);
+  }
+}
+
+// GovUK style overide
+.im-c-menu__item .govuk-checkboxes__item,
+.im-c-menu__item .govuk-radios__item {
+  flex-wrap: nowrap;
+
+  .govuk-checkboxes__input, .govuk-radios__input {
+    margin-left: -3px;
+  }
+}
+
+.im-c-menu-group__fieldset {
+  // Reset browser fieldset defaults
+  border: none;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+}
+
+.im-c-menu-group__legend {
+  padding-top: 15px;
+  padding-bottom: 10px;
+  padding-inline: 0;
+  font-size: 1rem;
+  font-weight: bold;
+  color: var(--foreground-color);
+  h3 {
+    font-size: inherit;
+  }
+}
+
+.im-c-menu-group:first-child .im-c-menu-group__legend {
+  padding-top: 0;
+}
+
+.im-c-menu .govuk-checkboxes__input[aria-disabled="true"] + .govuk-checkboxes__label {
+  opacity: 0.5;
+}

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

@@ -0,0 +1,161 @@
+import { render } from '@testing-library/react'
+import { Menu } from './Menu.jsx'
+
+let capturedOnChange = null
+
+jest.mock('./MenuCheckbox.jsx', () => ({
+  MenuCheckbox: ({ menuGroupItem, onChange }) => {
+    capturedOnChange = onChange
+    return (
+      <div
+        data-testid='layers-menu-checkbox'
+        data-item-id={menuGroupItem.id}
+      />
+    )
+  }
+}))
+
+jest.mock('./RadioGroupWrapper.jsx', () => ({
+  RadioGroupWrapper: ({ menuGroup }) => (
+    <div data-testid='layers-radio-group-wrapper' data-group-id={menuGroup.id} />
+  )
+}))
+
+jest.mock('./GroupLegend.jsx', () => ({
+  GroupLegend: ({ menuGroup, children }) => (
+    <div data-testid='layers-menu-group-wrapper' data-group-id={menuGroup.id}>
+      {children}
+    </div>
+  )
+}))
+
+const makePluginState = (menu = [], extra = {}) => ({
+  menu,
+  menuState: {},
+  dispatch: jest.fn(),
+  ...extra
+})
+
+const appConfig = {
+  id: 'map'
+}
+
+describe('Menu', () => {
+  describe('container class', () => {
+    it('renders the base container class when no groups have a groupLabel', () => {
+      const pluginState = makePluginState([{ id: 'g1', type: 'checkbox', items: [] }])
+      const { container } = render(<Menu pluginState={pluginState} appConfig={appConfig} />)
+      const div = container.firstChild
+      expect(div.className).toBe('im-c-menu')
+    })
+
+    it('adds the --has-groups modifier when at least one group has a groupLabel', () => {
+      const pluginState = makePluginState([{ id: 'g1', type: 'checkbox', groupLabel: 'My Group', items: [] }])
+      const { container } = render(<Menu pluginState={pluginState} />)
+      const div = container.firstChild
+      expect(div.className).toBe('im-c-menu im-c-menu--has-groups')
+    })
+  })
+
+  describe('empty menu', () => {
+    it('renders the container with no children when menu is empty', () => {
+      const pluginState = makePluginState([])
+      const { container } = render(<Menu pluginState={pluginState} />)
+      expect(container.firstChild.children).toHaveLength(0)
+    })
+
+    it('uses an empty array when menu is not provided', () => {
+      const { container } = render(<Menu pluginState={{}} />)
+      expect(container.firstChild.children).toHaveLength(0)
+    })
+  })
+
+  describe('checkbox groups', () => {
+    it('renders a GroupLegend for each checkbox group', () => {
+      const pluginState = makePluginState([
+        { id: 'g1', type: 'checkbox', items: [] },
+        { id: 'g2', type: 'checkbox', items: [] }
+      ])
+      const { getAllByTestId } = render(<Menu pluginState={pluginState} />)
+      expect(getAllByTestId('layers-menu-group-wrapper')).toHaveLength(2)
+    })
+
+    it('renders a MenuCheckbox for each item in a checkbox group', () => {
+      const pluginState = makePluginState([
+        { id: 'g1', type: 'checkbox', items: [{ id: 'item-a' }, { id: 'item-b' }] }
+      ])
+      const { getAllByTestId } = render(<Menu pluginState={pluginState} />)
+      expect(getAllByTestId('layers-menu-checkbox')).toHaveLength(2)
+    })
+
+    it('passes the correct group to GroupLegend', () => {
+      const group = { id: 'group-x', type: 'checkbox', items: [] }
+      const pluginState = makePluginState([group])
+      const { getByTestId } = render(<Menu pluginState={pluginState} />)
+      expect(getByTestId('layers-menu-group-wrapper').dataset.groupId).toBe('group-x')
+    })
+
+    it('passes the correct item to MenuCheckbox', () => {
+      const pluginState = makePluginState([
+        { id: 'g1', type: 'checkbox', items: [{ id: 'item-1' }] }
+      ])
+      const { getByTestId } = render(<Menu pluginState={pluginState} />)
+      expect(getByTestId('layers-menu-checkbox').dataset.itemId).toBe('item-1')
+    })
+  })
+
+  describe('radio groups', () => {
+    it('renders a RadioGroupWrapper for non-checkbox groups', () => {
+      const pluginState = makePluginState([
+        { id: 'r1', type: 'radio', items: [{ id: 'opt1' }, { id: 'opt2' }] }
+      ])
+      const { getAllByTestId } = render(<Menu pluginState={pluginState} />)
+      expect(getAllByTestId('layers-radio-group-wrapper')).toHaveLength(1)
+    })
+
+    it('passes the correct group to RadioGroupWrapper', () => {
+      const pluginState = makePluginState([
+        { id: 'radio-group-1', type: 'radio', items: [] }
+      ])
+      const { getByTestId } = render(<Menu pluginState={pluginState} />)
+      expect(getByTestId('layers-radio-group-wrapper').dataset.groupId).toBe('radio-group-1')
+    })
+
+    it('does not render a GroupLegend for radio groups', () => {
+      const pluginState = makePluginState([{ id: 'r1', type: 'radio', items: [] }])
+      const { queryByTestId } = render(<Menu pluginState={pluginState} />)
+      expect(queryByTestId('layers-menu-group-wrapper')).toBeNull()
+    })
+  })
+
+  describe('mixed groups', () => {
+    it('renders both checkbox and radio wrappers when both types are present', () => {
+      const pluginState = makePluginState([
+        { id: 'c1', type: 'checkbox', items: [] },
+        { id: 'r1', type: 'radio', items: [] }
+      ])
+      const { getByTestId } = render(<Menu pluginState={pluginState} />)
+      expect(getByTestId('layers-menu-group-wrapper')).toBeTruthy()
+      expect(getByTestId('layers-radio-group-wrapper')).toBeTruthy()
+    })
+  })
+
+  describe('handleDatasetChange', () => {
+    it('passes handleOnChange from the config item as onChange', () => {
+      const handleOnChange = jest.fn()
+      const pluginState = makePluginState([
+        { id: 'g1', type: 'checkbox', items: [{ id: 'dataset-abc', handleOnChange }] }
+      ])
+      render(<Menu pluginState={pluginState} />)
+      expect(capturedOnChange).toBe(handleOnChange)
+    })
+
+    it('onChange is undefined when the config item has no handleOnChange', () => {
+      const pluginState = makePluginState([
+        { id: 'g1', type: 'checkbox', items: [{ id: 'dataset-abc' }] }
+      ])
+      render(<Menu pluginState={pluginState} />)
+      expect(capturedOnChange).toBeUndefined()
+    })
+  })
+})

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

@@ -0,0 +1,35 @@
+import { useIdPrefix } from './useIdPrefix.jsx'
+
+export const MenuCheckbox = ({ dispatch, menuGroupItem, onChange, checked }) => {
+  const itemClass = `im-c-menu__item govuk-checkboxes govuk-checkboxes--small${checked ? '' : ' im-c-menu__item--checked'}`
+  const itemId = useIdPrefix(`checkbox-${menuGroupItem.id}`)
+
+  const handleOnChange = event => {
+    const _checked = Boolean(event.target?.checked)
+    if (onChange) {
+      // The menu config can optionally pass handleOnChange, which is passed in as onChange
+      // and called here
+      onChange(_checked)
+    }
+    // Also update the menu state, so any visibleWhen implementations can also handle it
+    dispatch({ type: 'UPDATE_MENU_STATE', payload: { [menuGroupItem.id]: _checked } })
+  }
+
+  return (
+    <div key={itemId} className={itemClass} data-module='govuk-checkboxes'>
+      <div className='govuk-checkboxes__item'>
+        <input
+          className='govuk-checkboxes__input'
+          id={itemId}
+          name={itemId}
+          type='checkbox'
+          checked={checked}
+          onChange={handleOnChange}
+        />
+        <label className='im-c-menu__item-label govuk-label govuk-checkboxes__label' htmlFor={itemId}>
+          {menuGroupItem.label}
+        </label>
+      </div>
+    </div>
+  )
+}

package/plugins/menu/src/components/Menu/MenuCheckbox.test.jsx

@@ -0,0 +1,93 @@
+import { render, screen, act } from '@testing-library/react'
+import { MenuCheckbox } from './MenuCheckbox.jsx'
+
+const onChange = jest.fn()
+const dispatch = jest.fn()
+const menuGroupItem = { id: 'dataset-1', label: 'Dataset One' }
+
+beforeEach(() => {
+  onChange.mockReset()
+  dispatch.mockReset()
+})
+
+const renderCheckbox = (props = {}) =>
+  render(<MenuCheckbox menuGroupItem={menuGroupItem} onChange={onChange} dispatch={dispatch} checked {...props} />)
+
+describe('MenuCheckbox', () => {
+  describe('rendered output', () => {
+    it('renders a checkbox input', () => {
+      const { container } = renderCheckbox()
+      expect(container.querySelector('input[type="checkbox"]')).toBeTruthy()
+    })
+
+    it('renders the menuGroupItem label', () => {
+      renderCheckbox()
+      expect(screen.getByText('Dataset One')).toBeTruthy()
+    })
+
+    it('associates the label with the input via htmlFor', () => {
+      const { container } = renderCheckbox()
+      const label = container.querySelector('label')
+      const input = container.querySelector('input')
+      expect(label.htmlFor).toBe(input.id)
+    })
+  })
+
+  describe('checked state', () => {
+    it('is checked when checked prop is true', () => {
+      const { container } = renderCheckbox({ checked: true })
+      expect(container.querySelector('input').checked).toBe(true)
+    })
+
+    it('is unchecked when checked prop is false', () => {
+      const { container } = renderCheckbox({ checked: false })
+      expect(container.querySelector('input').checked).toBe(false)
+    })
+  })
+
+  describe('item class', () => {
+    it('does not include the --checked modifier when checked is true', () => {
+      const { container } = renderCheckbox({ checked: true })
+      expect(container.firstChild.className).not.toContain('im-c-menu__item--checked')
+    })
+
+    it('includes the --checked modifier when checked is false', () => {
+      const { container } = renderCheckbox({ checked: false })
+      expect(container.firstChild.className).toContain('im-c-menu__item--checked')
+    })
+  })
+
+  describe('handleOnChange', () => {
+    const triggerChange = (container, checked) => {
+      const input = container.querySelector('input')
+      const propsKey = Object.keys(input).find(k => k.startsWith('__reactProps'))
+      act(() => { input[propsKey].onChange({ target: { checked, value: input.value } }) })
+    }
+
+    it('calls onChange with true when the checkbox is checked', () => {
+      const { container } = renderCheckbox()
+      triggerChange(container, true)
+      expect(onChange).toHaveBeenCalledWith(true)
+    })
+
+    it('calls onChange with false when the checkbox is unchecked', () => {
+      const { container } = renderCheckbox()
+      triggerChange(container, false)
+      expect(onChange).toHaveBeenCalledWith(false)
+    })
+
+    it('dispatches UPDATE_MENU_STATE with the item id and checked value', () => {
+      const { container } = renderCheckbox()
+      triggerChange(container, true)
+      expect(dispatch).toHaveBeenCalledWith({
+        type: 'UPDATE_MENU_STATE',
+        payload: { 'dataset-1': true }
+      })
+    })
+
+    it('does not throw when onChange is not provided', () => {
+      const { container } = renderCheckbox({ onChange: undefined })
+      expect(() => triggerChange(container, true)).not.toThrow()
+    })
+  })
+})

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

@@ -0,0 +1,11 @@
+import React from 'react'
+import { RadioGroupWrapper } from './RadioGroupWrapper.jsx'
+import { CheckboxGroupWrapper } from './CheckboxGroupWrapper.jsx'
+
+export const MenuGroup = ({ menuGroup, dispatch, menuState }) => {
+  if (menuGroup.type === 'checkbox') {
+    return (<CheckboxGroupWrapper menuGroup={menuGroup} dispatch={dispatch} menuState={menuState} />)
+  } else {
+    return (<RadioGroupWrapper menuGroup={menuGroup} dispatch={dispatch} menuState={menuState} />)
+  }
+}

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

@@ -1,7 +1,9 @@
 import { isVisibleWhen } from '../../registry/isVisibleWhen.js'
+import { useIdPrefix } from './useIdPrefix.jsx'
 
-export const LayersMenuRadio = ({ menuGroupItem, name, checked, onChange }) => {
-  const itemClass = 'im-c-datasets-layers__item govuk-radios govuk-radios--small"'
+export const MenuRadio = ({ menuGroupItem, name, checked, onChange }) => {
+  const itemClass = 'im-c-menu__item govuk-radios govuk-radios--small"'
+  const itemId = useIdPrefix(`radio-${menuGroupItem.id}`)
   const { visibleWhen } = menuGroupItem
   const visible = visibleWhen ? isVisibleWhen(visibleWhen) : true
   if (!visible) {
@@ -11,7 +13,7 @@ export const LayersMenuRadio = ({ menuGroupItem, name, checked, onChange }) => {
     <div className={itemClass} data-module='govuk-radios'>
       <div className='govuk-radios__item'>
         <input
-          id={menuGroupItem.id}
+          id={itemId}
           className='govuk-radios__input'
           type='radio'
           name={name}
@@ -19,7 +21,7 @@ export const LayersMenuRadio = ({ menuGroupItem, name, checked, onChange }) => {
           checked={checked}
           onChange={onChange}
         />
-        <label className='im-c-datasets-layers__item-label govuk-label govuk-radios__label' htmlFor={menuGroupItem.id}>
+        <label className='im-c-menu__item-label govuk-label govuk-radios__label' htmlFor={itemId}>
           {menuGroupItem.label}
         </label>
       </div>