IM-174 Added the ability to override the label/placeholder on the search plugin

demo/js/planning.js

@@ -80,8 +80,9 @@ const interactiveMap = new InteractiveMap('map', {
 		}),
 		searchPlugin({
 			transformRequest: transformGeocodeRequest,
+			label: 'Search for a place in England',
 			osNamesURL: process.env.OS_NAMES_URL,
-			regions: ['england', 'wales'],
+			regions: ['england'],
 			customDatasets: [gridRefSearchOSGB36],
 			width: '300px',
 			showMarker: true,

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

@@ -12,7 +12,7 @@ const getResultMessage = (count) => {
 
 const getFormStyle = (pluginConfig, pluginState, appState) => ({
   display: pluginConfig.expanded || pluginState.isExpanded ? 'flex' : undefined,
-  ...(appState.breakpoint !== 'mobile' && pluginConfig?.width && { width: pluginConfig.width }),
+  ...(appState.breakpoint !== 'mobile' && pluginConfig?.width && { width: pluginConfig.width })
 })
 
 export const Form = ({
@@ -23,7 +23,7 @@ export const Form = ({
   inputRef,
   events,
   services,
-  children, // For SearchClose
+  children // For SearchClose
 }) => {
   const { areSuggestionsVisible, hasFetchedSuggestions, suggestions = [] } = pluginState
 
@@ -47,34 +47,34 @@ export const Form = ({
   return (
     <form
       id={`${id}-search-form`}
-      role="search"
+      role='search'
       className={classNames}
       style={getFormStyle(pluginConfig, pluginState, appState)}
       aria-controls={`${id}-viewport`}
       onSubmit={(e) => events.handleSubmit(e, appState, pluginState)}
     >
       {/* Hidden submit button - required for Enter key to trigger form submission */}
-      <button type="submit" style={{ display: 'none' }} aria-hidden="true" tabIndex={-1}>
+      <button type='submit' style={{ display: 'none' }} aria-hidden='true' tabIndex={-1}>
         Submit
       </button>
 
       <div className={`im-c-search__input-container${pluginState.hasKeyboardFocusWithin ? ' im-c-search__input-container--keyboard-focus-within' : ''}`}>
-        <label htmlFor={`${id}-search`} className="im-u-visually-hidden">Search</label>
+        <label htmlFor={`${id}-search`} className='im-u-visually-hidden'>{pluginConfig.label}</label>
         <input
           id={`${id}-search`}
-          className="im-c-search__input"
-          type="search"
-          role="combobox"
+          className='im-c-search__input'
+          type='search'
+          role='combobox'
           aria-expanded={pluginState.suggestionsVisible}
           aria-controls={`${id}-search-suggestions`}
           aria-activedescendant={pluginState.selectedIndex >= 0 ? `${id}-search-suggestion-${pluginState.selectedIndex}` : undefined}
           aria-describedby={pluginState.value ? undefined : `${id}-search-hint`}
-          aria-autocomplete="list"
-          autoComplete="off"
-          placeholder="Search"
+          aria-autocomplete='list'
+          autoComplete='off'
+          placeholder={pluginConfig.label}
           name={`${id}-search`}
           spellCheck={false}
-          enterKeyHint="search"
+          enterKeyHint='search'
           value={pluginState.value}
           onClick={events.handleInputClick}
           onChange={events.handleInputChange}
@@ -83,14 +83,14 @@ export const Form = ({
           onKeyDown={(e) => events.handleInputKeyDown(e, pluginState)}
           ref={inputRef}
         />
-        <span id={`${id}-search-hint`} className="im-c-search__hint">
+        <span id={`${id}-search-hint`} className='im-c-search__hint'>
           When search results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.
         </span>
         {/* Close button passed as child */}
         {children}
       </div>
       {showNoResults && (
-        <div className="im-c-search__status" aria-hidden="true">
+        <div className='im-c-search__status' aria-hidden='true'>
           No results available
         </div>
       )}

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,
+    label: 'Search',
     ...options,
     id: 'search',
     load: async () => {

plugins/search/src/manifest.js

@@ -10,7 +10,6 @@ export const manifest = {
 
   controls: [{
     id: 'search',
-    label: 'Search',
     mobile: {
       slot: 'top-right'
     },