== Component design
=== Background/Goal
The SimpleSearch component needs to be designed and specified before its implementation as one of the building blocks of the Codex TypeaheadSearch component.
{F34939795}
| [[ https://www.figma.com/file/kOaSodWqN6dAFrLkaVWiHP/Component_TypeaheadSearch?node-id=414%3A3254 | This Figma frame]] contains the work in progress designs and specifications for this component. |
==== User stories
As a designer and developer, I need to be able to reuse a system-compliant SimpleSearch, in order to provide users with an input they can use to submit a search query.
==== Considerations
The SimpleSearch component has two variants:
- A simple version that only presents a single search input
- A version that also includes a 'Search' button (Normal neutral, with text or IconOnly) that accompanies the input by default
===== Development considerations
The SimpleSearch component is composed either by a single search input (i.e. an Input with `type=searcch`) or a search input + Normal Neutral Button.
=== Acceptance criteria (or Done)
[] All the interactive states and behavior of the SimpleSearch are documented.
[] All the visual properties of the SimpleSearch are fully specified using design system tokens
[] Keyboard navigation support is defined
---
== Component implementation
=== Background
The existing version of TypeaheadSearch within Codex has a UI similar to that of SimpleSearch, and should use the SimpleSearch component once it exists.
=== Acceptance criteria
[] CdxSimpleSearch can be used within TypeaheadSearch, while providing a reusable interface for other search implementations
[] CdxSimpleSearch follows the design spec
[] CdxSimpleSearch is properly documented on the Codex docs site