@defra/interactive-map 0.0.15-alpha → 0.0.17-alpha

package/src/App/store/appDispatchMiddleware.test.js

@@ -10,227 +10,255 @@ const run = (action, state, panelConfig = {}) =>
 
 const flushMicrotasks = () => new Promise(queueMicrotask)
 
-describe('appDispatchMiddleware', () => {
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
-
-  describe('CLOSE_PANEL', () => {
-    it('emits panel closed event', async () => {
-      run(
-        { type: 'CLOSE_PANEL', payload: 'testPanel' },
-        { openPanels: {} }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_CLOSED,
-        { panelId: 'testPanel' }
-      )
-    })
-  })
-
-  describe('CLOSE_ALL_PANELS', () => {
-    it('emits closed event for each panel', async () => {
-      run(
-        { type: 'CLOSE_ALL_PANELS' },
-        { openPanels: { panel1: {}, panel2: {} } }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).toHaveBeenCalledTimes(2)
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_CLOSED,
-        { panelId: 'panel1' }
-      )
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_CLOSED,
-        { panelId: 'panel2' }
-      )
-    })
-  })
-
-  describe('OPEN_PANEL', () => {
-    it('emits panel opened event for regular panel', async () => {
-      run(
-        {
-          type: 'OPEN_PANEL',
-          payload: { panelId: 'newPanel', props: { foo: 'bar' } }
-        },
-        { openPanels: {}, breakpoint: 'md' },
-        { newPanel: { md: { exclusive: false, modal: false } } }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_OPENED,
-        { panelId: 'newPanel', props: { foo: 'bar' } }
-      )
-    })
-
-    it('closes all non-exclusive panels when opening exclusive non-modal panel', async () => {
-      run(
-        {
-          type: 'OPEN_PANEL',
-          payload: { panelId: 'exclusivePanel', props: {} }
-        },
-        {
-          openPanels: {
-            regularPanel1: {},
-            regularPanel2: {},
-            exclusivePanel2: {}
-          },
-          breakpoint: 'md'
-        },
-        {
-          exclusivePanel: { md: { exclusive: true, modal: false } },
-          regularPanel1: { md: { exclusive: false, modal: false } },
-          regularPanel2: { md: { exclusive: false, modal: false } },
-          exclusivePanel2: { md: { exclusive: true, modal: false } }
-        }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).toHaveBeenCalledTimes(3)
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_CLOSED,
-        { panelId: 'regularPanel1' }
-      )
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_CLOSED,
-        { panelId: 'regularPanel2' }
-      )
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_OPENED,
-        { panelId: 'exclusivePanel', props: {} }
-      )
-    })
-
-    it('closes all exclusive non-modal panels when opening regular panel', async () => {
-      run(
-        {
-          type: 'OPEN_PANEL',
-          payload: { panelId: 'regularPanel', props: {} }
-        },
-        {
-          openPanels: {
-            exclusivePanel1: {},
-            exclusivePanel2: {},
-            exclusiveModalPanel: {},
-            regularPanel2: {}
-          },
-          breakpoint: 'md'
-        },
-        {
-          regularPanel: { md: { exclusive: false, modal: false } },
-          exclusivePanel1: { md: { exclusive: true, modal: false } },
-          exclusivePanel2: { md: { exclusive: true, modal: false } },
-          exclusiveModalPanel: { md: { exclusive: true, modal: true } },
-          regularPanel2: { md: { exclusive: false, modal: false } }
-        }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).toHaveBeenCalledTimes(3)
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_CLOSED,
-        { panelId: 'exclusivePanel1' }
-      )
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_CLOSED,
-        { panelId: 'exclusivePanel2' }
-      )
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_OPENED,
-        { panelId: 'regularPanel', props: {} }
-      )
-    })
-
-    it('does not close any panels when opening modal', async () => {
-      run(
-        {
-          type: 'OPEN_PANEL',
-          payload: { panelId: 'modalPanel', props: {} }
-        },
-        {
-          openPanels: { regularPanel: {}, exclusivePanel: {} },
-          breakpoint: 'md'
-        },
-        {
-          modalPanel: { md: { modal: true } },
-          regularPanel: { md: { exclusive: false, modal: false } },
-          exclusivePanel: { md: { exclusive: true, modal: false } }
-        }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).toHaveBeenCalledTimes(1)
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_OPENED,
-        { panelId: 'modalPanel', props: {} }
-      )
-    })
-  })
-
-  describe('ADD_PANEL', () => {
-    it('emits APP_PANEL_OPENED with slot when panel opens by default', async () => {
-      run(
-        { type: 'ADD_PANEL', payload: { id: 'newPanel', config: {} } },
-        { breakpoint: 'desktop' }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_OPENED,
-        { panelId: 'newPanel', slot: 'left-top' }
-      )
-    })
-
-    it('emits APP_PANEL_OPENED with visibleGeometry when provided in config', async () => {
-      const visibleGeometry = { type: 'Feature', geometry: { type: 'Point', coordinates: [1, 2] }, properties: {} }
-      run(
-        { type: 'ADD_PANEL', payload: { id: 'geoPanel', config: { visibleGeometry } } },
-        { breakpoint: 'desktop' }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_OPENED,
-        { panelId: 'geoPanel', slot: 'left-top', visibleGeometry }
-      )
-    })
-
-    it('does not emit APP_PANEL_OPENED when breakpoint config sets open: false', async () => {
-      run(
-        { type: 'ADD_PANEL', payload: { id: 'hiddenPanel', config: { desktop: { open: false } } } },
-        { breakpoint: 'desktop' }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).not.toHaveBeenCalled()
-    })
-
-    it('emits APP_PANEL_OPENED with slot for mobile breakpoint', async () => {
-      run(
-        { type: 'ADD_PANEL', payload: { id: 'mobilePanel', config: {} } },
-        { breakpoint: 'mobile' }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_OPENED,
-        { panelId: 'mobilePanel', slot: 'bottom' }
-      )
-    })
+const INVALID_SLOT = 'invalid-slot'
+const LOG_PREFIX = '[interactive-map]'
+
+beforeEach(() => {
+  jest.clearAllMocks()
+})
+
+describe('CLOSE_PANEL', () => {
+  it('emits panel closed event', async () => {
+    run(
+      { type: 'CLOSE_PANEL', payload: 'testPanel' },
+      { openPanels: {} }
+    )
+
+    await flushMicrotasks()
+
+    expect(eventBus.emit).toHaveBeenCalledWith(
+      events.APP_PANEL_CLOSED,
+      { panelId: 'testPanel' }
+    )
+  })
+})
+
+describe('CLOSE_ALL_PANELS', () => {
+  it('emits closed event for each panel', async () => {
+    run(
+      { type: 'CLOSE_ALL_PANELS' },
+      { openPanels: { panel1: {}, panel2: {} } }
+    )
+
+    await flushMicrotasks()
+
+    expect(eventBus.emit).toHaveBeenCalledTimes(2)
+    expect(eventBus.emit).toHaveBeenCalledWith(
+      events.APP_PANEL_CLOSED,
+      { panelId: 'panel1' }
+    )
+    expect(eventBus.emit).toHaveBeenCalledWith(
+      events.APP_PANEL_CLOSED,
+      { panelId: 'panel2' }
+    )
+  })
+})
+
+describe('OPEN_PANEL — regular panel', () => {
+  it('emits panel opened event', async () => {
+    run(
+      {
+        type: 'OPEN_PANEL',
+        payload: { panelId: 'newPanel', props: { foo: 'bar' } }
+      },
+      { openPanels: {}, breakpoint: 'md' },
+      { newPanel: { md: { exclusive: false, modal: false } } }
+    )
+
+    await flushMicrotasks()
+
+    expect(eventBus.emit).toHaveBeenCalledWith(
+      events.APP_PANEL_OPENED,
+      { panelId: 'newPanel', props: { foo: 'bar' } }
+    )
+  })
+})
+
+const CLOSED_PLUS_OPENED = 3
+
+describe('OPEN_PANEL — opening exclusive closes non-exclusive', () => {
+  it('closes all non-exclusive panels', async () => {
+    run(
+      { type: 'OPEN_PANEL', payload: { panelId: 'exclusivePanel', props: {} } },
+      { openPanels: { regularPanel1: {}, regularPanel2: {}, exclusivePanel2: {} }, breakpoint: 'md' },
+      {
+        exclusivePanel: { md: { exclusive: true, modal: false } },
+        regularPanel1: { md: { exclusive: false, modal: false } },
+        regularPanel2: { md: { exclusive: false, modal: false } },
+        exclusivePanel2: { md: { exclusive: true, modal: false } }
+      }
+    )
+    await flushMicrotasks()
+    expect(eventBus.emit).toHaveBeenCalledTimes(CLOSED_PLUS_OPENED)
+    expect(eventBus.emit).toHaveBeenCalledWith(events.APP_PANEL_CLOSED, { panelId: 'regularPanel1' })
+    expect(eventBus.emit).toHaveBeenCalledWith(events.APP_PANEL_CLOSED, { panelId: 'regularPanel2' })
+    expect(eventBus.emit).toHaveBeenCalledWith(events.APP_PANEL_OPENED, { panelId: 'exclusivePanel', props: {} })
+  })
+})
+
+describe('OPEN_PANEL — opening regular closes exclusive non-modal', () => {
+  it('closes all exclusive non-modal panels', async () => {
+    run(
+      { type: 'OPEN_PANEL', payload: { panelId: 'regularPanel', props: {} } },
+      { openPanels: { exclusivePanel1: {}, exclusivePanel2: {}, exclusiveModalPanel: {}, regularPanel2: {} }, breakpoint: 'md' },
+      {
+        regularPanel: { md: { exclusive: false, modal: false } },
+        exclusivePanel1: { md: { exclusive: true, modal: false } },
+        exclusivePanel2: { md: { exclusive: true, modal: false } },
+        exclusiveModalPanel: { md: { exclusive: true, modal: true } },
+        regularPanel2: { md: { exclusive: false, modal: false } }
+      }
+    )
+    await flushMicrotasks()
+    expect(eventBus.emit).toHaveBeenCalledTimes(CLOSED_PLUS_OPENED)
+    expect(eventBus.emit).toHaveBeenCalledWith(events.APP_PANEL_CLOSED, { panelId: 'exclusivePanel1' })
+    expect(eventBus.emit).toHaveBeenCalledWith(events.APP_PANEL_CLOSED, { panelId: 'exclusivePanel2' })
+    expect(eventBus.emit).toHaveBeenCalledWith(events.APP_PANEL_OPENED, { panelId: 'regularPanel', props: {} })
+  })
+})
+
+describe('OPEN_PANEL — modal panel', () => {
+  it('does not close any panels when opening modal', async () => {
+    run(
+      {
+        type: 'OPEN_PANEL',
+        payload: { panelId: 'modalPanel', props: {} }
+      },
+      {
+        openPanels: { regularPanel: {}, exclusivePanel: {} },
+        breakpoint: 'md'
+      },
+      {
+        modalPanel: { md: { modal: true } },
+        regularPanel: { md: { exclusive: false, modal: false } },
+        exclusivePanel: { md: { exclusive: true, modal: false } }
+      }
+    )
+
+    await flushMicrotasks()
+
+    expect(eventBus.emit).toHaveBeenCalledTimes(1)
+    expect(eventBus.emit).toHaveBeenCalledWith(
+      events.APP_PANEL_OPENED,
+      { panelId: 'modalPanel', props: {} }
+    )
+  })
+})
+
+describe('ADD_BUTTON', () => {
+  beforeEach(() => jest.spyOn(console, 'warn').mockImplementation(() => {}))
+  afterEach(() => jest.restoreAllMocks())
+
+  it('warns when button has an invalid slot', () => {
+    run(
+      { type: 'ADD_BUTTON', payload: { id: 'myBtn', config: { desktop: { slot: INVALID_SLOT } } } },
+      { breakpoint: 'desktop' }
+    )
+    expect(console.warn).toHaveBeenCalledWith(LOG_PREFIX, expect.stringContaining(INVALID_SLOT))
+  })
+
+  it('does not warn when button has a valid slot', () => {
+    run(
+      { type: 'ADD_BUTTON', payload: { id: 'myBtn', config: { mobile: { slot: 'top-left' }, tablet: { slot: 'top-left' }, desktop: { slot: 'top-left' } } } },
+      { breakpoint: 'desktop' }
+    )
+    expect(console.warn).not.toHaveBeenCalled()
+  })
+})
+
+describe('ADD_CONTROL', () => {
+  beforeEach(() => jest.spyOn(console, 'warn').mockImplementation(() => {}))
+  afterEach(() => jest.restoreAllMocks())
+
+  it('warns when control has an invalid slot', () => {
+    run(
+      { type: 'ADD_CONTROL', payload: { id: 'myCtrl', config: { desktop: { slot: INVALID_SLOT } } } },
+      { breakpoint: 'desktop' }
+    )
+    expect(console.warn).toHaveBeenCalledWith(LOG_PREFIX, expect.stringContaining(INVALID_SLOT))
+  })
+
+  it('does not warn when control has a valid slot', () => {
+    run(
+      { type: 'ADD_CONTROL', payload: { id: 'myCtrl', config: { mobile: { slot: 'drawer' }, tablet: { slot: 'top-left' }, desktop: { slot: 'top-left' } } } },
+      { breakpoint: 'desktop' }
+    )
+    expect(console.warn).not.toHaveBeenCalled()
+  })
+})
+
+describe('ADD_PANEL', () => {
+  it('emits APP_PANEL_OPENED with slot when panel opens by default', async () => {
+    run(
+      { type: 'ADD_PANEL', payload: { id: 'newPanel', config: {} } },
+      { breakpoint: 'desktop' }
+    )
+
+    await flushMicrotasks()
+
+    expect(eventBus.emit).toHaveBeenCalledWith(
+      events.APP_PANEL_OPENED,
+      { panelId: 'newPanel', slot: 'left-top' }
+    )
+  })
+
+  it('emits APP_PANEL_OPENED with visibleGeometry when provided in config', async () => {
+    const visibleGeometry = { type: 'Feature', geometry: { type: 'Point', coordinates: [1, 2] }, properties: {} }
+    run(
+      { type: 'ADD_PANEL', payload: { id: 'geoPanel', config: { visibleGeometry } } },
+      { breakpoint: 'desktop' }
+    )
+
+    await flushMicrotasks()
+
+    expect(eventBus.emit).toHaveBeenCalledWith(
+      events.APP_PANEL_OPENED,
+      { panelId: 'geoPanel', slot: 'left-top', visibleGeometry }
+    )
+  })
+
+  it('does not emit APP_PANEL_OPENED when breakpoint config sets open: false', async () => {
+    run(
+      { type: 'ADD_PANEL', payload: { id: 'hiddenPanel', config: { desktop: { open: false } } } },
+      { breakpoint: 'desktop' }
+    )
+
+    await flushMicrotasks()
+
+    expect(eventBus.emit).not.toHaveBeenCalled()
+  })
+
+  it('emits APP_PANEL_OPENED with slot for mobile breakpoint', async () => {
+    run(
+      { type: 'ADD_PANEL', payload: { id: 'mobilePanel', config: {} } },
+      { breakpoint: 'mobile' }
+    )
+
+    await flushMicrotasks()
+
+    expect(eventBus.emit).toHaveBeenCalledWith(
+      events.APP_PANEL_OPENED,
+      { panelId: 'mobilePanel', slot: 'drawer' }
+    )
+  })
+
+  it('warns when panel has an invalid slot', () => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+    run(
+      { type: 'ADD_PANEL', payload: { id: 'badPanel', config: { desktop: { slot: INVALID_SLOT, open: false } } } },
+      { breakpoint: 'desktop' }
+    )
+    expect(console.warn).toHaveBeenCalledWith(LOG_PREFIX, expect.stringContaining(INVALID_SLOT))
+    jest.restoreAllMocks()
+  })
+
+  it('does not warn for a panel with a button-adjacent slot', () => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+    run(
+      { type: 'ADD_PANEL', payload: { id: 'btnPanel', config: { desktop: { slot: 'left-top-button', open: false } } } },
+      { breakpoint: 'desktop' }
+    )
+    expect(console.warn).not.toHaveBeenCalled()
+    jest.restoreAllMocks()
   })
 })

package/src/App/store/appReducer.js

@@ -29,7 +29,9 @@ export const initialState = (config) => {
   const openPanels = getInitialOpenPanels(panelConfig, initialBreakpoint)
 
   return {
+    appVisible: null,
     isLayoutReady: false,
+    arePluginsEvaluated: false,
     breakpoint: initialBreakpoint,
     interfaceType: initialInterfaceType,
     preferredColorScheme: autoColorScheme ? preferredColorScheme : appColorScheme,

package/src/InteractiveMap/InteractiveMap.js

@@ -245,6 +245,8 @@ export default class InteractiveMap {
     if (parts.length > 1) {
       document.title = parts[parts.length - 1]
     }
+
+    this.eventBus.emit(events.APP_HIDDEN)
   }
 
   /**
@@ -262,6 +264,8 @@ export default class InteractiveMap {
     }
 
     updateDOMState(this)
+
+    this.eventBus.emit(events.APP_VISIBLE)
   }
 
   /**

package/src/config/appConfig.js

@@ -93,6 +93,9 @@ export const defaultAppConfig = {
   }, {
     id: 'minus',
     svgContent: '<path d="M5 12h14"/>'
+  }, {
+    id: 'chevron',
+    svgContent: '<path d="m6 9 6 6 6-6"/>'
   }]
 }
 
@@ -113,7 +116,7 @@ export const defaultButtonConfig = {
 export const defaultPanelConfig = {
   label: 'Panel',
   mobile: {
-    slot: 'bottom',
+    slot: 'drawer',
     open: true,
     dismissible: true,
     modal: false,
@@ -141,13 +144,13 @@ export const defaultPanelConfig = {
 export const defaultControlConfig = {
   label: 'Control',
   mobile: {
-    slot: 'bottom'
+    slot: 'drawer'
   },
   tablet: {
-    slot: 'left-top'
+    slot: 'top-left'
   },
   desktop: {
-    slot: 'left-top'
+    slot: 'top-left'
   }
 }
 

package/src/config/events.js

@@ -61,6 +61,34 @@ export const EVENTS = {
    */
   APP_READY: 'app:ready',
 
+  /**
+   * Emitted when the map application becomes visible after being hidden.
+   *
+   * This can occur in 'hybrid behaviour' responsive scenarios where the map is already initialized
+   * (e.g. initialized inline on desktop) but was hidden and then shown again
+   * (e.g. resizing to mobile and opening the map).
+   *
+   * @remarks
+   * - Only emitted when transitioning from hidden → visible.
+   * - Not fired on initial open.
+   * - The existing map state may be preserved depending on configuration.
+   */
+  APP_VISIBLE: 'app:visible',
+
+  /**
+   * Emitted when the map application becomes hidden.
+   *
+   * This can occur in 'hybrid behaviour' responsive scenarios where the map was initialized inline
+   * (e.g. visible on desktop) but then becomes hidden
+   * (e.g. resizing to mobile or closing the map view).
+   *
+   * @remarks
+   * - Only emitted when transitioning from visible → hidden.
+   * - Not fired on initial load if the map starts hidden.
+   * - The map state may be preserved depending on configuration.
+   */
+  APP_HIDDEN: 'app:hidden',
+
   /**
    * Emitted when a panel is opened.
    * Payload: { panelId: string }

package/src/scss/main.scss

@@ -19,6 +19,7 @@
 @use '../App/components/KeyboardHelp/KeyboardHelp.module';
 @use '../App/components/MapButton/MapButton.module';
 @use '../App/components/Panel/Panel.module';
+@use '../App/components/Icon/Icon.module';
 @use '../App/components/Viewport/Viewport.module';
 @use '../App/components/Tooltip/Tooltip.module';
 @use '../App/components/PopupMenu/PopupMenu.module';

package/src/scss/settings/_dimensions.scss

@@ -9,7 +9,6 @@
     --button-padding: 8px;
     --button-icon-label-offset: 7px;
     --label-button-padding: 10px;
-    --touch-button-size: 50px;
 
     // Borders and focus
     --app-border-width: 1px;

package/src/services/logger.js

@@ -0,0 +1,6 @@
+const PREFIX = '[interactive-map]'
+
+export const logger = {
+  warn: (...args) => console.warn(PREFIX, ...args),
+  error: (...args) => console.error(PREFIX, ...args)
+}

package/src/services/logger.test.js

@@ -0,0 +1,32 @@
+import { logger } from './logger.js'
+
+beforeEach(() => {
+  jest.spyOn(console, 'warn').mockImplementation(() => {})
+  jest.spyOn(console, 'error').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  jest.restoreAllMocks()
+})
+
+describe('logger', () => {
+  it('logger.warn calls console.warn with the [interactive-map] prefix', () => {
+    logger.warn('something went wrong')
+    expect(console.warn).toHaveBeenCalledWith('[interactive-map]', 'something went wrong')
+  })
+
+  it('logger.error calls console.error with the [interactive-map] prefix', () => {
+    logger.error('critical failure')
+    expect(console.error).toHaveBeenCalledWith('[interactive-map]', 'critical failure')
+  })
+
+  it('logger.warn forwards multiple arguments', () => {
+    logger.warn('slot', 'invalid', { detail: true })
+    expect(console.warn).toHaveBeenCalledWith('[interactive-map]', 'slot', 'invalid', { detail: true })
+  })
+
+  it('logger.error forwards multiple arguments', () => {
+    logger.error('code', 42, null)
+    expect(console.error).toHaveBeenCalledWith('[interactive-map]', 'code', 42, null)
+  })
+})