USE-521: Add a clear search button to the search field

app/assets/stylesheets/partials/_search.scss

@@ -65,6 +65,36 @@
         border: none;
         width: 100%;
         padding-left: 46px;
+        padding-right: 48px;
+      }
+
+      #clear-search {
+        display: none;
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        height: 32px;
+        width: 32px;        
+        background: none;
+        color: $color-icon-primary;
+        font-size: 0;
+        padding: 2px;
+        border-radius: 100%;
+        border: 1px solid $color-border-default;
+        cursor: pointer;
+
+        &:hover {
+          background-color: $color-blue-25;
+          color: $color-blue-500;
+          border-color: $color-blue-500;
+          outline: none;
+        }
+
+        &::before {
+          content: '\f00d';
+          font-family: FontAwesome;
+          font-size: 16px;
+        }
       }
     } 
 
@@ -73,6 +103,10 @@
       border: none;
     }
 
+    @media (max-width: $bp-screen-xs) {
+      flex-direction: column;
+    }
+
   }
 
   .form-links {

app/assets/stylesheets/partials/_variables.scss

@@ -59,8 +59,10 @@ $color-text-oncolor: $color-white;
 
 // ICONS
 $color-icon-primary: $color-gray-950;
+$color-icon-secondary: $color-gray-700;
 $color-icon-success: $color-green-800;
 $color-icon-danger: $color-red-500;
+$color-icon-oncolor: $color-white;
 
 // BACKGROUNDS
 $color-bg-default: $color-white;

app/javascript/search_form.js

@@ -3,6 +3,7 @@ var advancedPanel = document.getElementById('advanced-search-panel');
 var geoboxPanel = document.getElementById('geobox-search-panel');
 var geodistancePanel = document.getElementById('geodistance-search-panel');
 var allPanels = document.getElementsByClassName('form-panel');
+var clearSearchButton = document.getElementById('clear-search');
 
 function togglePanelState(currentPanel) {
   // Only the geoboxPanel and geodistancePanel inputs need to be required. Advanced search inputs do not.
@@ -57,6 +58,15 @@ function updateKeywordPlaceholder() {
   }
 }
 
+// Toggle visibility of clear search button based on whether the input has text.
+function toggleClearButtonVisibility() {
+  if (keywordField.value.trim() === '') {
+    clearSearchButton.style.display = 'none';
+  } else {
+    clearSearchButton.style.display = 'inline';
+  }
+}
+
 // Add event listeners for all panels in the DOM. For GeoData, this is currently both geospatial panels and the advanced
 // panel. In all other TIMDEX UI apps, it's just the advanced panel.
 if (Array.from(allPanels).includes(geoboxPanel && geodistancePanel)) {
@@ -77,4 +87,17 @@ if (Array.from(allPanels).includes(geoboxPanel && geodistancePanel)) {
   });
 }
 
+// Add event listener to show/hide clear button when typing.
+keywordField.addEventListener('input', toggleClearButtonVisibility);
+
+// Add event listener to clear input when button is clicked.
+clearSearchButton.addEventListener('click', () => {
+  keywordField.value = '';
+  toggleClearButtonVisibility();
+  keywordField.focus();
+});
+
+// Initialize clear button visibility on page load to handle pre-populated search values.
+toggleClearButtonVisibility();
+
 console.log('search_form.js loaded');

app/views/search/_form.html.erb

@@ -4,6 +4,7 @@
     <div class="search-input-wrapper">
       <i class="fa-regular fa-magnifying-glass"></i>
       <input id="basic-search-main" type="search" class="field field-text basic-search-input" name="q" title="Keyword anywhere" value="<%= params[:q] %>" required>
+      <button title="Clear search" aria-label="Clear search" type="button" id="clear-search">Clear search</button>
     </div>
     <input id="tab-to-target" type="hidden" name="tab" value="<%= @active_tab %>">
     <button type="submit" class="btn button-primary">Search</button>