Refactor search component to use native <form> elements

[conorsexton]

User story

As an end-user, I should be interact with Lunchin’s search feature like other forms on the web, so that I can use conventional keyboard shortcuts and browser form features.

Tasks

• Replace non-standard div and other elements with proper form elements
• Update id attributes with clear, professional values
• Update search form’s style to match other parts of the app

[conorsexton]

Here’s the mockup for search:

Unfocused (initial state)

Focused and ready to submit

Notes to help

Style values

• Font stack: Avenir Next', 'Avenir', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
• Light border color: #F1ECE6
• Darker border color: #A69E91
• Inset box shadow: box-shadow: inset 0 0 5px 1px rgba(51,48,44,0.15);

Basic strategy

Check out the Form for an refactoring example. Basic idea is to update state using hooks on input change, and only let the form submit with valid inputs. I’m thinking we can style the form itself (for the border, etc.) and then create new styled components for the inputs and button (so that inputs are basically invisible and the button is the search icon).

Search icon SVG

<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Search-Icon" fill="#A69E91" fill-rule="nonzero">
            <g id="search">
                <path d="M8.28257507,7.91683864e-06 C11.4118232,-0.00430987469 14.2755649,1.75784236 15.6821772,4.55322064 C17.0887895,7.34859892 16.797389,10.6984926 14.9292293,13.2089873 L19.4003335,16.9908714 C19.8892999,17.4081645 20.1027575,18.064547 19.9527783,18.6896401 C19.8027992,19.3147331 19.3147544,19.802793 18.6896808,19.9527768 C18.0646072,20.1027607 17.4082451,19.8892964 16.990965,19.4003149 L13.2082829,14.9297692 C10.3188338,17.0713459 6.37724321,17.1022455 3.45457601,15.0062323 C0.531908818,12.9102191 -0.703117614,9.1668688 0.398427573,5.74308307 C1.49997276,2.31929735 4.68605182,-0.00154856159 8.28257507,7.91683864e-06 L8.28257507,7.91683864e-06 Z M8.28257507,14.8211823 C11.8937166,14.8211823 14.8211253,11.8936827 14.8211253,8.28242889 C14.8211253,4.67117511 11.8937166,1.74367549 8.28257507,1.74367549 C4.67143351,1.74367549 1.74402487,4.67117511 1.74402487,8.28242889 C1.74404894,11.8936657 4.67145053,14.8211387 8.28257507,14.8211387 L8.28257507,14.8211823 Z" id="Shape"></path>
            </g>
        </g>
    </g>
</svg>