docs(docusaurus): search guidelines

website/docs/5-Components/24-Search/0-Filters.mdx

@@ -0,0 +1,12 @@
+---
+title: Filters
+description: EEA Filters Component
+hide_table_of_contents: true
+---
+
+import EEATabs from '../../md_components/tab_component.mdx';
+import Usage from '../../md_components/filters_components/usage_markdown.md';
+
+
+<EEATabs usage={<Usage />} showcase={<Showcase />} ></EEATabs>
+

website/docs/5-Components/24-Search/1-Suggestions.mdx

@@ -0,0 +1,11 @@
+---
+title: Suggestions
+description: EEA Suggestions Component
+hide_table_of_contents: true
+---
+
+import EEATabs from '../../md_components/tab_component.mdx';
+import Usage from '../../md_components/suggestions_components/usage_markdown.md';
+
+
+<EEATabs usage={<Usage />} showcase={<Showcase />} ></EEATabs>

website/docs/5-Components/24-Search/2-Searchbox.mdx

@@ -0,0 +1,11 @@
+---
+title: Searchbox
+description: EEA Searchbox Component
+hide_table_of_contents: true
+---
+
+import EEATabs from '../../md_components/tab_component.mdx';
+import Usage from '../../md_components/searchbox_components/usage_markdown.md';
+
+
+<EEATabs usage={<Usage />} showcase={<Showcase />} ></EEATabs>

website/docs/md_components/filters_components/usage_markdown.md

@@ -0,0 +1,39 @@
+The filter options must cover the most important aspects of whatever users will be filtering, based on relevance to users’ needs. 
+
+To design a filter that serves our users, we need to answer the following questions: 
+
+- Which characteristics are most influential to users in making their choice? 
+- What words do users use to describe these characteristics? 
+- Do users understand our labels, or do they look like jargon to them? 
+- Which filter values are the most popular or most used? 
+
+ ## How to use Search filters 
+
+- **Make sure users can find the search filters:**
+
+    - on desktop, users tend to find and use them easily when they are placed to the top and top left area of the page  
+    - on mobile where usually they are behind a button or drawer Keep them at the top and don’t rely on just an icon. Remove any ambiguity by adding a label to the icon or removing the icon altogether and just have text
+
+- **Ensure the options are relevant to users.** When it comes to filters, matching the user’s mental model of how they would choose something in the physical world, is important in helping them choose something on a website
+
+- **Clearly display the selections to users.** Feedback is an important heuristic for the usability of a website. So, once users have found the filters, understood the options they have, and made their selections – it’s important to let them know their choices have been applied to the list of products
+
+- **Allow a combination of filters.** A big part of filters’ effectiveness will come down to using a number of them at the same time, letting the filters interact to produce the best results 
+
+- **Live filtering updates.** Live update for filtering UIs is great because the user gets to immediately see the changed results they are getting
+
+- **Include a ‘Clear all’ interaction.** Let the users clear all applied filters with one click to action
+
+- **Show the number of results.** Another key element in communicating feedback is to display the number of results. This provides users with feedback as to how effective their input was to reduce the result list and save time
+
+- **Make Important filters easily found.** Users often do not reach useful filters because they are hidden at the bottom of a long menu. Filters at the top of the menu are the most used ones
+
+### Don’ts 
+
+Do not use live filtering updates   
+
+- **on mobile devices.** Their screens are simply too small to pack the results, filters, and the live update feedback, without a visual overload
+
+- **When handling a lot of data.** For users doing a lot of research, having to wait for the results to update after each individual filter would be simply unbearable
+
+In this case let the user batch their filters and click on an apply button before any actual updating takes place. 

website/docs/md_components/searchbox_components/usage_markdown.md

@@ -0,0 +1,15 @@
+Search lets users assert independence from websites' attempt to direct how they use it. Therefore, many users go straight to the homepage search function. 
+
+Search is also users' escape hatch when they are stuck in navigation. When they cannot find a reasonable place to go next, they often turn to the site's search function. This is why you should make search available from every page on the site; you cannot predict where users will be when they decide they are lost. 
+
+### Do's 
+
+- **Use placeholder text.** Placeholder text provides context as to what can be searched and describes the action of the input. 
+
+- **Use a magnifying glass icon.** The magnifying glass is universally recognized as a symbol for search and one which users can easily identify. 
+
+- **Provide a button to submit search queries.** Inputs should be accessible. Ensure users can return results using their keyboard as well as clicking a button or the magnifying glass icon 
+
+- **Consider the search icon position.** In most cases, it is beneficial to place the Icon to the right of placeholder text. This allows the Icon to act as the submit button and makes more sense hierarchically as queries are entered first, and results returned after. 
+
+- **Use input widths which are appropriate for the typical query length.** The width of the Input field should be wide enough to contain the typical search query. If an Input field is too narrow, it results in scrolling and decreases usability. It is recommended to use a minimum width of 27 characters. 

website/docs/md_components/suggestions_components/usage_markdown.md

@@ -0,0 +1,13 @@
+Auto-suggestion is a powerful tool that reduces data input. Typical users are very poor at query formulation: if they don’t get good results on the first try, later search attempts rarely succeed. When autocomplete suggestions work well, they help the user articulate better search queries. 
+
+### Usage 
+
+- Ensure that auto-suggestions are useful. Poorly designed auto-suggestions can confuse and distract users. Thus, use spelling auto-corrections, recognition of root words, and predictive text in order to improve the tool. 
+
+- Present less than 10 items in the list of suggestions (and without a scrollbar) so the information doesn’t become overwhelming. 
+
+- Allow for keyboard navigation for the list of suggestions. Once a user scrolls down past the last item, they should return to the top of the list. The Esc key should allow users to exit the list. 
+
+- Highlight differences between the inputted information and suggested information. For example, the input text might have a standard weight, while suggested terms are bolded. 
+
+