Change search form to have a searchbox

Author: RoyalIcing

lib/components_guide_web/templates/accessibility_first/_nav.html.eex

@@ -7,6 +7,7 @@
     <li><%= link("Forms", to: '/accessibility-first/forms') %>
     <li><%= link("All Roles", to: '/accessibility-first/roles') %>
     <li><%= link("Accessible Name", to: '/accessibility-first/accessible-name') %>
+    <li><%= link("Snapshots", to: '/accessibility-first/accessibility-tree-snapshots') %>
     <li><%= link("Properties", to: '/accessibility-first/properties-cheatsheet') %>
     <li><%= link("Widgets", to: '/accessibility-first/widgets-cheatsheet') %>
   </ul>

lib/components_guide_web/templates/layout/_banner.html.eex renamed to lib/components_guide_web/templates/layout/_banner.html.heex

@@ -1,4 +1,4 @@
-<header role=banner class="bg-gray-900 text-white">
+<header role="banner" class="bg-gray-900 text-white">
   <nav role="navigation" aria-label="Primary" class="w-full flex items-center lg:px-16 text-base text-center">
     <details class="relative" data-links="block p-3 underline-on-hover">
       <summary class="block w-48 text-left pl-6 text-base uppercase font-bold tracking-wider">
@@ -23,7 +23,7 @@
     <hr class="mx-auto">
 
     <div class="w-48 pr-6">
-      <%= search_form() %>
+      <.search_form></.search_form>
     </div>
   </nav>
 </header>

lib/components_guide_web/views/layout_view.ex

@@ -14,25 +14,26 @@ defmodule ComponentsGuideWeb.LayoutView do
     # {"About", to: "/about"}
   ]
 
-  def search_form do
-    ~E"""
-    <form role=search action="/research" class="flex h-full px-2 items-center">
-      <input type=text name=q placeholder="Search…" class="w-full py-1 px-4 text-sm bg-gray-800 text-white rounded-full border border-gray-600">
+  def search_form(assigns) do
+    ~H"""
+    <form role="search" action="/research" class="flex h-full px-2 items-center">
+      <input type="search" name="q" placeholder="Search…" class="w-full py-1 px-4 text-sm bg-gray-800 text-white rounded-full border border-gray-600">
     </form>
     """
   end
 
-  def search_form_item do
-    ~E"""
-    <li class=row-span-3>
-      <%= search_form() %>
+  def search_form_item(assigns) do
+    ~H"""
+    <li class="row-span-3">
+      <%= search_form([]) %>
+    </li>
     """
   end
 
   def nav_items(path_info) do
     [
       Enum.map(@nav_links, fn
-        {:search} -> search_form_item()
+        {:search} -> search_form_item([])
         {title, to: to} -> nav_link_item(title: title, to: to, path_info: path_info)
       end)
     ]