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

package/plugins/search/src/components/Form/Form.test.jsx

@@ -7,13 +7,13 @@ import { Form } from './Form'
 jest.mock('../Suggestions/Suggestions', () => ({
   Suggestions: ({ handleSuggestionClick, id }) => (
     <button
-      data-testid="suggestion"
+      data-testid='suggestion'
       onClick={() => handleSuggestionClick('clicked-suggestion')}
       id={`${id}-search-suggestions`}
     >
       Suggestion
     </button>
-  ),
+  )
 }))
 
 describe('Form', () => {
@@ -28,15 +28,15 @@ describe('Form', () => {
       hasFetchedSuggestions: false,
       suggestions: [],
       selectedIndex: -1,
-      hasKeyboardFocusWithin: false,
+      hasKeyboardFocusWithin: false
     },
     pluginConfig: {
       expanded: false,
-      width: '400px',
+      width: '400px'
     },
     appState: {
       breakpoint: 'desktop',
-      interfaceType: 'keyboard',
+      interfaceType: 'keyboard'
     },
     events: {
       handleSubmit: jest.fn(),
@@ -45,11 +45,11 @@ describe('Form', () => {
       handleInputFocus: jest.fn(),
       handleInputBlur: jest.fn(),
       handleInputKeyDown: jest.fn(),
-      handleSuggestionClick: jest.fn(),
+      handleSuggestionClick: jest.fn()
     },
     services: {
-      announce: jest.fn(),
-    },
+      announce: jest.fn()
+    }
   }
 
   beforeEach(() => {
@@ -98,7 +98,7 @@ describe('Form', () => {
         pluginState={{
           ...baseProps.pluginState,
           suggestionsVisible: true,
-          selectedIndex: 2,
+          selectedIndex: 2
         }}
       />
     )
@@ -148,7 +148,7 @@ describe('Form', () => {
   it('renders children passed into the input container (e.g., CloseButton)', () => {
     render(
       <Form {...baseProps}>
-        <div data-testid="close-button" />
+        <div data-testid='close-button' />
       </Form>
     )
     expect(screen.getByTestId('close-button')).toBeInTheDocument()
@@ -252,4 +252,4 @@ describe('Form', () => {
       expect(baseProps.services.announce).not.toHaveBeenCalled()
     })
   })
-})
+})

package/plugins/search/src/components/OpenButton/OpenButton.jsx

@@ -1,9 +1,9 @@
 // src/plugins/search/OpenButton.jsx
-export const OpenButton = ({ id, isExpanded, onClick, buttonRef, searchIcon }) => {
+export const OpenButton = ({ id, isExpanded, onClick, buttonRef, searchIcon, showLabel }) => {
   return (
     <button
-      aria-label="Open search"
-      className="im-c-map-button"
+      aria-label='Open search'
+      className='im-c-map-button'
       onClick={onClick}
       aria-controls={`${id}-search-form`}
       ref={buttonRef}
@@ -11,20 +11,21 @@ export const OpenButton = ({ id, isExpanded, onClick, buttonRef, searchIcon }) =
     >
       {searchIcon && (
         <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true"
-          focusable="false"
+          xmlns='http://www.w3.org/2000/svg'
+          width='24'
+          height='24'
+          viewBox='0 0 24 24'
+          fill='none'
+          stroke='currentColor'
+          strokeWidth='2'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+          aria-hidden='true'
+          focusable='false'
           dangerouslySetInnerHTML={{ __html: searchIcon }}
-          />
+        />
       )}
+      {showLabel && <span>Search</span>}
     </button>
   )
 }

package/plugins/search/src/components/OpenButton/OpenButton.test.jsx

@@ -9,7 +9,7 @@ describe('OpenButton', () => {
     isExpanded: false,
     onClick: jest.fn(),
     buttonRef: { current: null },
-    searchIcon: null,
+    searchIcon: null
   }
 
   beforeEach(() => {
@@ -44,4 +44,8 @@ describe('OpenButton', () => {
     const { container } = render(<OpenButton {...baseProps} />)
     expect(container.querySelector('svg')).toBeNull()
   })
-})
+  it('should show a label if showLabel is true', () => {
+    const { container } = render(<OpenButton {...baseProps} showLabel />)
+    expect(container.querySelector('span').innerHTML).toContain('Search')
+  })
+})

package/plugins/search/src/components/SubmitButton/SubmitButton.jsx

@@ -2,26 +2,26 @@
 export const SubmitButton = ({ defaultExpanded, submitIcon }) => {
   return (
     <button
-      aria-label="Search"
-      className="im-c-map-button im-c-search-submit-button"
-      type="submit"
+      aria-label='Search'
+      className='im-c-map-button im-c-search-submit-button'
+      type='submit'
       style={defaultExpanded ? undefined : { display: 'none' }}
     >
       {submitIcon && (
         <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true"
-          focusable="false"
+          xmlns='http://www.w3.org/2000/svg'
+          width='24'
+          height='24'
+          viewBox='0 0 24 24'
+          fill='none'
+          stroke='currentColor'
+          strokeWidth='2'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+          aria-hidden='true'
+          focusable='false'
           dangerouslySetInnerHTML={{ __html: submitIcon }}
-          />
+        />
       )}
     </button>
   )

package/plugins/search/src/components/Suggestions/Suggestions.jsx

@@ -3,23 +3,23 @@ export const Suggestions = ({ id, pluginState, handleSuggestionClick }) => {
   return (
     <ul // NOSONAR
       id={`${id}-search-suggestions`}
-      role="listbox" // NOSONAR
+      role='listbox' // NOSONAR
       aria-labelledby={`${id}-search`} // Option A: label from input
-      className="im-c-search-suggestions"
-      style={!pluginState.areSuggestionsVisible || !pluginState.suggestions.length ? { display: 'none' } : undefined }
+      className='im-c-search-suggestions'
+      style={!pluginState.areSuggestionsVisible || !pluginState.suggestions.length ? { display: 'none' } : undefined}
     >
       {pluginState.suggestions.map((suggestion, i) => (
         <li // NOSONAR
           key={suggestion.id}
           id={`${id}-search-suggestion-${i}`}
-          className="im-c-search-suggestions__item"
-          role="option" // NOSONAR
+          className='im-c-search-suggestions__item'
+          role='option' // NOSONAR
           aria-selected={pluginState.selectedIndex === i}
           aria-setsize={pluginState.suggestions.length}
           aria-posinset={i + 1}
           onClick={() => handleSuggestionClick(suggestion)} // NOSONAR
         >
-          <span className="im-c-search-suggestions__label" dangerouslySetInnerHTML={{ __html: suggestion.marked }} />
+          <span className='im-c-search-suggestions__label' dangerouslySetInnerHTML={{ __html: suggestion.marked }} />
         </li>
       ))}
     </ul>

package/plugins/search/src/components/Suggestions/Suggestions.test.jsx

@@ -10,11 +10,11 @@ describe('Suggestions', () => {
       areSuggestionsVisible: true,
       suggestions: [
         { id: '1', marked: 'First' },
-        { id: '2', marked: 'Second' },
+        { id: '2', marked: 'Second' }
       ],
-      selectedIndex: 0,
+      selectedIndex: 0
     },
-    handleSuggestionClick: jest.fn(),
+    handleSuggestionClick: jest.fn()
   }
 
   beforeEach(() => {
@@ -76,4 +76,4 @@ describe('Suggestions', () => {
       baseProps.pluginState.suggestions[1]
     )
   })
-})
+})

package/plugins/search/src/datasets.js

@@ -1,19 +1,18 @@
 // src/plugins/search/datasets.js
 import { parseOsNamesResults } from './utils/parseOsNamesResults.js'
 
-export function createDatasets({ customDatasets = [], osNamesURL, crs, regions = ['england', 'scotland', 'wales'] }) {
+export function createDatasets ({ customDatasets = [], osNamesURL, crs, regions = ['england', 'scotland', 'wales'] }) {
+  if (!osNamesURL) {
+    return customDatasets
+  }
 
-    if (!osNamesURL) {
-      return customDatasets
-    }
+  const defaultDatasets = [{
+    name: 'osNames',
+    urlTemplate: osNamesURL,
+    parseResults: (json, query) => parseOsNamesResults(json, query, regions, crs),
+    includeRegex: /[a-zA-Z0-9]/,
+    excludeRegex: /^(?:[a-z]{2}\s*(?:\d{3}\s*\d{3}|\d{4}\s*\d{4}|\d{5}\s*\d{5})|\d+\s*,?\s*\d+)$/i // NOSONAR - complexity unavoidable for gridref/coordinate matching
+  }]
 
-    const defaultDatasets = [{
-      name: 'osNames',
-      urlTemplate: osNamesURL,
-      parseResults: (json, query) => parseOsNamesResults(json, query, regions, crs),
-      includeRegex: /[a-zA-Z0-9]/,
-      excludeRegex: /^(?:[a-z]{2}\s*(?:\d{3}\s*\d{3}|\d{4}\s*\d{4}|\d{5}\s*\d{5})|\d+\s*,?\s*\d+)$/i // NOSONAR - complexity unavoidable for gridref/coordinate matching
-    }]
-
-    return [...defaultDatasets, ...customDatasets]
+  return [...defaultDatasets, ...customDatasets]
 }

package/plugins/search/src/datasets.test.js

@@ -58,4 +58,4 @@ describe('createDatasets', () => {
     expect(result).toBe('parsed')
     parseMock.mockRestore()
   })
-})
+})

package/plugins/search/src/defaults.js

@@ -1,3 +1,3 @@
 export const DEFAULTS = {
   minSearchLength: 3
-}
+}

package/plugins/search/src/events/fetchSuggestions.js

@@ -27,7 +27,7 @@ const getRequestConfig = async (ds, query, transformRequest) => {
 const fetchDatasetResults = async (ds, request, query) => {
   try {
     const response = await fetch(request)
-    
+
     if (!response.ok) {
       console.error(`Fetch error for ${ds.label || 'dataset'}: ${response.status}`)
       return null
@@ -68,9 +68,9 @@ export const fetchSuggestions = async (value, datasets, dispatch, transformReque
   }
 
   dispatch({ type: 'UPDATE_SUGGESTIONS', payload: finalResults })
-  
+
   return {
     results: finalResults,
     sanitisedValue
   }
-}
+}

package/plugins/search/src/events/fetchSuggestions.test.js

@@ -209,4 +209,4 @@ describe('fetchSuggestions', () => {
     expect(fetch).toHaveBeenCalledWith({ url: '/default?q=hi', options: { method: 'GET' } })
     expect(result.results).toEqual(['ok'])
   })
-})
+})

package/plugins/search/src/events/formHandlers.js

@@ -16,12 +16,12 @@ export const createFormHandlers = ({
   let lastFetchedValue = ''
 
   return {
-    handleOpenClick() {
+    handleOpenClick () {
       dispatch({ type: 'TOGGLE_EXPANDED', payload: true })
       services.eventBus.emit('search:open')
     },
 
-    handleCloseClick(_e, buttonRef) {
+    handleCloseClick (_e, buttonRef) {
       dispatch({ type: 'TOGGLE_EXPANDED', payload: false })
       dispatch({ type: 'UPDATE_SUGGESTIONS', payload: [] })
       dispatch({ type: 'SET_VALUE', payload: '' })
@@ -31,7 +31,7 @@ export const createFormHandlers = ({
       services.eventBus.emit('search:close')
     },
 
-    async handleSubmit(e, appState, pluginState) {
+    async handleSubmit (e, appState, pluginState) {
       e.preventDefault()
       const { suggestions, selectedIndex, value } = pluginState
       const trimmedValue = value?.trim()

package/plugins/search/src/events/formHandlers.test.js

@@ -229,4 +229,4 @@ describe('createFormHandlers', () => {
 
     expect(fetchSuggestions).toHaveBeenCalledTimes(1)
   })
-})
+})

package/plugins/search/src/events/index.js

@@ -6,7 +6,7 @@ import { createSuggestionHandlers } from './suggestionHandlers.js'
 
 const DEBOUNCE_FETCH_TIME = 350
 
-export function attachEvents(args) {
+export function attachEvents (args) {
   const { dispatch, searchContainerRef } = args
 
   // Debounce data fetching
@@ -26,7 +26,7 @@ export function attachEvents(args) {
     ...inputHandlers,
     ...suggestionHandlers,
 
-    handleOutside(e) {
+    handleOutside (e) {
       if (searchContainerRef.current.contains(e.target)) {
         return
       }

package/plugins/search/src/events/index.test.js

@@ -69,7 +69,7 @@ describe('attachEvents', () => {
   })
 
   test('debouncedFetchSuggestions calls fetchSuggestions with correct args', () => {
-    const handlers = attachEvents(args)
+    attachEvents(args)
 
     // grab the debounced function passed to input handlers
     const { debouncedFetchSuggestions } =
@@ -115,4 +115,4 @@ describe('attachEvents', () => {
 
     expect(services.eventBus.emit).toHaveBeenCalledWith('search:close')
   })
-})
+})

package/plugins/search/src/events/inputHandlers.js

@@ -1,19 +1,19 @@
 import { DEFAULTS } from '../defaults.js'
 
 export const createInputHandlers = ({ dispatch, debouncedFetchSuggestions }) => ({
-  handleInputClick() {
+  handleInputClick () {
     dispatch({ type: 'SHOW_SUGGESTIONS' })
   },
 
-  handleInputFocus(interfaceType) {
+  handleInputFocus (interfaceType) {
     dispatch({ type: 'SET_KEYBOARD_FOCUS_WITHIN', payload: interfaceType === 'keyboard' })
   },
 
-  handleInputBlur(interfaceType) {
+  handleInputBlur (interfaceType) {
     dispatch({ type: 'INPUT_BLUR', payload: interfaceType })
   },
 
-  handleInputChange(e) {
+  handleInputChange (e) {
     const value = e.target.value
     dispatch({ type: 'SET_VALUE', payload: value })
 

package/plugins/search/src/events/inputHandlers.test.js

@@ -101,4 +101,4 @@ describe('createInputHandlers', () => {
     expect(debouncedFetchSuggestions).toHaveBeenCalledWith(value)
     expect(debouncedFetchSuggestions.cancel).not.toHaveBeenCalled()
   })
-})
+})

package/plugins/search/src/events/suggestionHandlers.js

@@ -7,7 +7,7 @@ export const createSuggestionHandlers = ({ dispatch, services, mapProvider, mark
       : `${suggestions.length} suggestions available`
 
   return {
-    handleSuggestionClick(suggestion, appState) {
+    handleSuggestionClick (suggestion, appState) {
       dispatch({ type: 'SET_VALUE', payload: suggestion.text })
       dispatch({ type: 'HIDE_SUGGESTIONS' })
       dispatch({ type: 'SET_SELECTED', payload: -1 })
@@ -21,7 +21,7 @@ export const createSuggestionHandlers = ({ dispatch, services, mapProvider, mark
       services.eventBus.emit('search:match', { query: suggestion.text, ...suggestion })
     },
 
-    handleInputKeyDown(e, pluginState) {
+    handleInputKeyDown (e, pluginState) {
       const { suggestions, selectedIndex } = pluginState
 
       switch (e.key) {

package/plugins/search/src/events/suggestionHandlers.test.js

@@ -163,4 +163,4 @@ describe('createSuggestionHandlers', () => {
     expect(dispatch).not.toHaveBeenCalled()
     expect(services.announce).not.toHaveBeenCalled()
   })
-})
+})

package/plugins/search/src/index.js

@@ -4,11 +4,12 @@ import './search.scss'
 export default function createPlugin (options = {}) {
   // If search is open then we need to overirde the mobile slot
   if (options.expanded) {
-    options.manifest = {controls: [{ id: 'search', mobile: { slot: 'banner' }}]}
+    options.manifest = { controls: [{ id: 'search', mobile: { slot: 'banner' } }] }
   }
 
   return {
     showMarker: true,
+    placeholder: 'Search',
     ...options,
     id: 'search',
     load: async () => {

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

@@ -1,10 +1,10 @@
 // /plugins/search/index.test.js
 
 // Mock SCSS import so Jest can run without parsing errors
-jest.mock('./search.scss', () => {})
-
 import createPlugin from './index'
 
+jest.mock('./search.scss', () => {})
+
 describe('createPlugin', () => {
   beforeEach(() => {
     jest.resetModules()
@@ -44,4 +44,4 @@ describe('createPlugin', () => {
     const result = await plugin.load()
     expect(result).toEqual(manifestMock)
   })
-})
+})

package/plugins/search/src/manifest.js

@@ -10,15 +10,17 @@ export const manifest = {
 
   controls: [{
     id: 'search',
-    label: 'Search',
     mobile: {
-      slot: 'top-right'
+      slot: 'top-right',
+      showLabel: false
     },
     tablet: {
-      slot: 'top-left'
+      slot: 'top-left',
+      showLabel: false
     },
     desktop: {
-      slot: 'top-left'
+      slot: 'top-left',
+      showLabel: false
     },
     render: Search
   }],

package/plugins/search/src/reducer.js

@@ -8,7 +8,6 @@ const initialState = {
   selectedIndex: -1
 }
 
-
 const toggleExpanded = (state, payload) => {
   return {
     ...state,
@@ -31,7 +30,7 @@ const inputBlur = (state, payload) => {
     ...state,
     hasKeyboardFocusWithin: false,
     areSuggestionsVisible: state.areSuggestionsVisible && payload !== 'keyboard',
-    selectedIndex: -1,
+    selectedIndex: -1
   }
 }
 

package/plugins/search/src/reducer.test.js

@@ -73,7 +73,7 @@ describe('search state actions', () => {
 
   it('SET_SELECTED updates selectedIndex and visibility', () => {
     const state = { ...initialState, areSuggestionsVisible: false }
-    
+
     const selected = actions.SET_SELECTED(state, 1)
     expect(selected.selectedIndex).toBe(1)
     expect(selected.areSuggestionsVisible).toBe(true)
@@ -82,4 +82,4 @@ describe('search state actions', () => {
     expect(deselected.selectedIndex).toBe(-1)
     expect(deselected.areSuggestionsVisible).toBe(false)
   })
-})
+})

package/plugins/search/src/search.scss

@@ -50,14 +50,21 @@
   }
 }
 
-.im-c-search__input {
+// Input reset (extra specificity to reset govuk)
+.im-o-app .im-c-search__input {
   width: 100%;
-  border: 0;
-  padding: var(--divider-gap) calc(var(--divider-gap) + 2px);
   color: var(--foreground-color);
   background-color: transparent;
+  font-size: 1rem;
+  border: 0;
+  padding: var(--divider-gap) calc(var(--divider-gap) + 2px);
   outline: 0;
 
+  &:focus {
+    outline: 3px solid transparent;
+    box-shadow: none;
+  }
+
   &::placeholder {
     color: var(--foreground-color);
   }

package/plugins/search/src/utils/parseOsNamesResults.js

@@ -6,7 +6,7 @@ const MAX_RESULTS = 8
 
 const isPostcode = (value) => {
   value = value.replace(/\s/g, '')
-  const regex = /^(([A-Z]{1,2}\d[A-Z\d]?|ASCN|STHL|TDCU|BBND|[BFS]IQQ|PCRN|TKCA) ?\d[A-Z]{2}|BFPO ?\d{1,4}|(KY\d|MSR|VG|AI)[ -]?\d{4}|[A-Z]{2} ?\d{2}|GE ?CX|GIR ?0A{2}|SAN ?TA1)$/i //NOSONAR
+  const regex = /^(([A-Z]{1,2}\d[A-Z\d]?|ASCN|STHL|TDCU|BBND|[BFS]IQQ|PCRN|TKCA) ?\d[A-Z]{2}|BFPO ?\d{1,4}|(KY\d|MSR|VG|AI)[ -]?\d{4}|[A-Z]{2} ?\d{2}|GE ?CX|GIR ?0A{2}|SAN ?TA1)$/i // NOSONAR
   return regex.test(value)
 }
 
@@ -77,7 +77,6 @@ const bounds = (crs, { MBR_XMIN, MBR_YMIN, MBR_XMAX, MBR_YMAX, GEOMETRY_X, GEOME
 }
 
 const point = (crs, { GEOMETRY_X, GEOMETRY_Y }) => {
-
   // EPSG:27700 → return raw OSGB grid coordinates (meters)
   if (crs === 'EPSG:27700') {
     return [GEOMETRY_X, GEOMETRY_Y]

package/plugins/search/src/utils/parseOsNamesResults.test.js

@@ -134,13 +134,13 @@ describe('osNamesUtils', () => {
    */
 
   test('uses NAME2 when NAME2_LANG is eng', () => {
-    const entry = { GAZETTEER_ENTRY: { ...sampleEntry.GAZETTEER_ENTRY, NAME1: 'Caerdydd', NAME2: 'Cardiff', NAME2_LANG: 'eng' }}
+    const entry = { GAZETTEER_ENTRY: { ...sampleEntry.GAZETTEER_ENTRY, NAME1: 'Caerdydd', NAME2: 'Cardiff', NAME2_LANG: 'eng' } }
     const output = parseOsNamesResults({ results: [entry] }, 'Cardiff', regions, 'EPSG:27700')
     expect(output[0].text).toContain('Cardiff')
   })
 
   test('falls back to NAME1 when NAME2_LANG is not eng', () => {
-    const entry = { GAZETTEER_ENTRY: { ...sampleEntry.GAZETTEER_ENTRY, NAME1: 'London', NAME2: 'Londres', NAME2_LANG: 'fra' }}
+    const entry = { GAZETTEER_ENTRY: { ...sampleEntry.GAZETTEER_ENTRY, NAME1: 'London', NAME2: 'Londres', NAME2_LANG: 'fra' } }
     const output = parseOsNamesResults({ results: [entry] }, 'London', regions, 'EPSG:27700')
     expect(output[0].text).toContain('London')
   })

package/plugins/search/src/utils/updateMap.js

@@ -10,7 +10,7 @@
  * @param {boolean} showMarker - Whether to display a marker
  * @param {boolean} showMarker - Marker colour
  */
-export function updateMap({ mapProvider, bounds, point, markers, showMarker, markerColor }) {
+export function updateMap ({ mapProvider, bounds, point, markers, showMarker, markerColor }) {
   mapProvider.fitToBounds(bounds)
   if (showMarker) {
     markers.add('search', point, { color: markerColor })

package/plugins/search/src/utils/updateMap.test.js

@@ -10,11 +10,11 @@ describe('updateMap', () => {
 
   beforeEach(() => {
     mapProvider = {
-      fitToBounds: jest.fn(),
+      fitToBounds: jest.fn()
     }
 
     markers = {
-      add: jest.fn(),
+      add: jest.fn()
     }
   })
 
@@ -25,7 +25,7 @@ describe('updateMap', () => {
       point,
       markers,
       showMarker: true,
-      markerColor: 'red',
+      markerColor: 'red'
     })
 
     expect(mapProvider.fitToBounds).toHaveBeenCalledWith(bounds)
@@ -43,10 +43,10 @@ describe('updateMap', () => {
       point,
       markers,
       showMarker: false,
-      markerColor: 'blue',
+      markerColor: 'blue'
     })
 
     expect(mapProvider.fitToBounds).toHaveBeenCalledWith(bounds)
     expect(markers.add).not.toHaveBeenCalled()
   })
-})
+})