Fixed duplicate search code

documentation/components/inputs.md

@@ -248,31 +248,6 @@ Refers to enabling or disabling options.
         onfocusout="removeBlueFromSearchIcon('search-icon')" class="w-52" placeholder="Search for content">
 </div>
 
-<script>
-    function addBlueToSearchIcon(id) {
-        let searchIcon = document.getElementById(id);
-        searchIcon.classList.add("text-gnome-blue-500");
-    }
-    function removeBlueFromSearchIcon(id) {
-        let searchIcon = document.getElementById(id);
-        searchIcon.classList.remove("text-gnome-blue-500");
-    }
-</script>
-~~~html
-<div id="search" class="search">
-     <svg id="search-icon-input" class="search-input-icon feather feather-search"  
-        xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-        stroke-linejoin="round">
-        <circle cx="11" cy="11" r="8"></circle>
-        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-     </svg>
-     <input type="search" class="static w-50"
-        onfocus="addBlueToSearchIcon('search-icon-input')"
-        onfocusout="removeBlueFromSearchIcon('search-icon-input')"  
-        placeholder="Search for content">    
-</div>
-
 <script>
     function addBlueToSearchIcon(id) {
         let searchIcon = document.getElementById(id);
@@ -298,7 +273,7 @@ Refers to enabling or disabling options.
     </span>
     <input type="search" id="collapsable-search" onfocus="addBlueToCollapsableSearchIcon('collapsable-search-icon')"
         onfocusout="removeBlueFromCollapsableSearchIcon('collapsable-search-icon')" class="w-52"
-        placeholder="Search for content">
+        placeholder="Search for content" style="display: none;">
 </div>
 
 <script>
@@ -344,6 +319,7 @@ Refers to enabling or disabling options.
 </script>
 <br>
 ~~~html
+<h3 class="mt-8 mb-4">Collapsable Search</h3>
 <div id="search" class="search mr-6 mb-2">
     <span class="absolute inset-y-1 left-0 flex items-center px-1">
         <svg class="search-icon cursor-pointer" id="collapsable-search-icon"
@@ -356,61 +332,37 @@ Refers to enabling or disabling options.
     </span>
     <input type="search" id="collapsable-search" onfocus="addBlueToCollapsableSearchIcon('collapsable-search-icon')"
         onfocusout="removeBlueFromCollapsableSearchIcon('collapsable-search-icon')" class="w-52"
-        placeholder="Search for content">
+        placeholder="Search for content" style="display: none;">
 </div>
 
 <script>
-    function addBlueToCollapsableSearchIcon(id) {
-        let searchIcon = document.getElementById(id);
-        searchIcon.classList.add("text-gnome-blue-500");
-    }
-    function removeBlueFromCollapsableSearchIcon(id) {
-        let searchIcon = document.getElementById(id);
-        searchIcon.classList.remove("text-gnome-blue-500");
-    }
-    function toggleSearchInputOpacity(id) {
+    function toggleSearchInputDisplay(id) {
         let collapsableSearch = document.getElementById(id);
-        if (collapsableSearch.style.opacity == 1) {
-            collapsableSearch.disabled = true;
-            collapsableSearch.style.opacity = 0;
+        console.log(collapsableSearch.style.display);
+        if (collapsableSearch.style.display === "block") {
+            hideSearchInput(id);
         } else {
-            collapsableSearch.disabled = false;
-            collapsableSearch.style.opacity = 1;
+            console.log("displaying");
+            collapsableSearch.style.display = "block";
             collapsableSearch.focus();
+            addBlueToCollapsableSearchIcon(id + "-icon");
         }
     }
-</script>
-~~~html
-<div id="search" class="search">
-    <svg id="collapsable-search-icon" class="feather feather-search search-input-icon cursor-pointer z-10"
-        onclick="toggleSearchInputOpacity('collapsable-search-input')"  
-        xmlns="http://www.w3.org/2000/svg" 
-        width="24" height="24"
-        viewBox="0 0 24 24" 
-        fill="none" 
-        stroke="currentColor" 
-        stroke-width="2" 
-        stroke-linecap="round"
-        stroke-linejoin="round">
-        <circle cx="11" cy="11" r="8"></circle>
-        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-    </svg>
-    <input type="search" id="collapsable-search-input" class="static w-50"
-        disabled="true"
-        onfocus="addBlueToCollapsableSearchIcon('collapsable-search-icon')"
-        onfocusout="removeBlueFromCollapsableSearchIcon('collapsable-search-icon')" 
-        placeholder="Search for content">
-</div>
-<script>
-    function toggleSearchInputOpacity(id) {
+
+    function hideSearchInput(id) {
         let collapsableSearch = document.getElementById(id);
-        if (collapsableSearch.style.opacity == 1) {
-            collapsableSearch.disabled = true;
-            collapsableSearch.style.opacity = 0;
+        removeBlueFromCollapsableSearchIcon(id + "-icon");
+        if (!collapsableSearch.value) {
+            collapsableSearch.style.display = "none";
+        }
+    }
+
+    function toggleSearchIconColor(id) {
+        let searchIcon = document.getElementById(id);
+        if (searchIcon.classList.contains("text-gnome-blue-500")) {
+            removeBlueFromCollapsableSearchIcon(id);
         } else {
-            collapsableSearch.disabled = false;
-            collapsableSearch.style.opacity = 1;
-            collapsableSearch.focus();
+            addBlueToCollapsableSearchIcon(id);
         }
     }
 
@@ -424,4 +376,4 @@ Refers to enabling or disabling options.
         searchIcon.classList.remove("text-gnome-blue-500");
     }
 </script>
-~~~
+~~~
\ No newline at end of file