fix: add search to documentation website (#404)

* navsearch component created

* swap parent to child

* added case insensitivity to navsearch

* navsearch demoted to stateless component, added jennas merge-fix of change and search handler

* searchbar now sandwiched between Getting Started and Components sections

* sfix for search: it now does real-time filtering when backspacing as well

* items with sortorder 1 no longer disappear during search

* navsearch replaced with fundamental-react inputgroup search - includes icon

* finished search, refactored - cleaner

* search feature functionality -- extraneous additions removed.

* removed white diffs

* fixed: no results found notice is no longer a header.

* fixed: removed routedItems since everything is going through state

* fixed css on input group so that it works on chrome and ff per greg

* in-progress: map function for futureproofing map for navItems -- hardcode and splice removed

* fixed: error where adding a category would remove another category from navbar

* resolved hard-coded search results check

* switched from sandwich search to top search

* search bar moved to under title, above all headers

* Added RouteNotFound back

* Removed omitSearch from sections

* Removed 'no results found' logic

Author: leannerivera

src/_playground/App.scss

@@ -29,7 +29,6 @@ $fd-fonts-path: '../../node_modules/fiori-fundamentals/dist/fonts/';
                     color: inherit;
                 }
             }
-
             .frDocs-Nav {
                 border-top: 2px solid #dbe7f3;
                 height: 90%;
@@ -66,6 +65,9 @@ $fd-fonts-path: '../../node_modules/fiori-fundamentals/dist/fonts/';
                     padding-left: 34px;
                 }
             }
+            .frDocs-Nav__inputGroup {
+                padding: 5px 20px;
+            }
         }
 
         .frDocs-Content {

src/_playground/Routes.js

@@ -16,6 +16,7 @@ import { IconComponent } from '../Icon/Icon.Component';
 import { IdentifierComponent } from '../Identifier/Identifier.Component';
 import { ImageComponent } from '../Image/Image.Component';
 import { InlineHelpComponent } from '../InlineHelp/InlineHelp.Component';
+import { InputGroup } from '../InputGroup/InputGroup';
 import { InputGroupComponent } from '../InputGroup/InputGroup.Component';
 import { ListGroupComponent } from '../ListGroup/ListGroup.Component';
 import { LocalizationEditorComponent } from '../LocalizationEditor/LocalizationEditor.Component';
@@ -25,7 +26,6 @@ import { MultiInputComponent } from '../MultiInput/MultiInput.Component';
 import { PaginationComponent } from '../Pagination/Pagination.Component';
 import { PanelComponent } from '../Panel/Panel.Component';
 import { PopoverComponent } from '../Popover/Popover.Component';
-import React from 'react';
 import { SearchInputComponent } from '../SearchInput/SearchInput.Component';
 import { ShellbarComponent } from '../Shellbar/Shellbar.Component';
 import { SideNavigationComponent } from '../SideNavigation/SideNavigation.Component';
@@ -39,6 +39,7 @@ import { ToggleComponent } from '../Toggle/Toggle.Component';
 import { TokenComponent } from '../Token/Token.Component';
 import { TreeViewComponent } from '../TreeView/TreeView.Component';
 import { BrowserRouter, Link, NavLink, Redirect, Route, Switch } from 'react-router-dom';
+import React, { Component } from 'react';
 
 const sections = [
     {
@@ -57,7 +58,8 @@ const routes = [
         name: 'Home',
         component: Home,
         section: 'Getting Started',
-        sortOrder: 1 // this one should always come first
+        sortOrder: 1, // this one should always come first
+        omitSearch: true //should not be filtered for search
     },
     {
         url: '/actionBar',
@@ -278,60 +280,88 @@ const RouteNotFound = () => (
     </div>
 );
 
-export const Routes = () => {
-    let sectionRoutes;
-    const groupedRoutes = groupArray(routes, 'section');
+export class Routes extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            query: '',
+            filteredItems: routes
+        };
+    }
 
-    const navItems = sections.sort(sortBy('sortOrder', 'name')).map(section => {
-        if (!groupedRoutes[section.name]) {
-            return;
-        }
+    onChangeHandler = (event) => {
+        let searchResults = routes.filter((navItem) => {
+            return navItem.omitSearch ? navItem : navItem.name.toLowerCase().includes(event.target.value.toLowerCase());
+        });
+        this.setState({
+            query: event.target.value,
+            filteredItems: [...searchResults]
+        });
+    };
 
-        sectionRoutes = groupedRoutes[section.name].sort(sortBy('sortOrder', 'name'));
-        return (
-            <ul className='frDocs-Nav__list' key={section.name}>
-                <li className='frDocs-Nav__headers'>{section.name}</li>
-                {sectionRoutes.map(route => (
-                    <li key={route.name}>
-                        <NavLink
-                            activeClassName='frDocs-Nav__item--active'
-                            className='frDocs-Nav__item'
-                            key={route.url}
-                            to={{ pathname: route.url }}>
-                            {route.name}
-                        </NavLink>
-                    </li>
-                ))}
-            </ul>
-        );
-    });
+    render() {
+        let sectionRoutes;
+        const groupedRoutes = groupArray(this.state.filteredItems, 'section');
 
-    return (
-        <BrowserRouter basename={process.env.PUBLIC_URL}>
-            <div className='frDocs-Container'>
-                <div className='frDocs-Sidebar'>
-                    <h1 className='frDocs-Logo'>FUNDAMENTAL REACT</h1>
-                    <nav className='frDocs-Nav'>
-                        {navItems}
-                    </nav>
-                </div>
-                <div className='frDocs-Content'>
-                    <Switch>
-                        {routes.map(route => {
-                            return (
-                                <Route
-                                    component={route.component}
-                                    exact
-                                    key={route.url}
-                                    path={route.url} />
-                            );
-                        })}
-                        <Redirect exact from=''
-                            to='/home' />
-                        <Route component={RouteNotFound} />
-                    </Switch>
+        let navItems = sections.sort(sortBy('sortOrder', 'name')).map(section => {
+            if (!groupedRoutes[section.name]) {
+                return;
+            }
+
+            sectionRoutes = groupedRoutes[section.name].sort(sortBy('sortOrder', 'name'));
+            return (
+                <ul className='frDocs-Nav__list' key={section.name}>
+                    <li className='frDocs-Nav__headers'>{section.name}</li>
+                    {sectionRoutes.map(route => (
+                        <li key={route.name}>
+                            <NavLink
+                                activeClassName='frDocs-Nav__item--active'
+                                className='frDocs-Nav__item'
+                                key={route.url}
+                                to={{ pathname: route.url }}>
+                                {route.name}
+                            </NavLink>
+                        </li>
+                    ))}
+                </ul>
+            );
+        });
+
+        return (
+            <BrowserRouter basename={process.env.PUBLIC_URL}>
+                <div className='frDocs-Container'>
+                    <div className='frDocs-Sidebar'>
+                        <h1 className='frDocs-Logo'>FUNDAMENTAL REACT</h1>
+                        <nav className='frDocs-Nav'>
+                            <div className='frDocs-Nav__inputGroup'>
+                                <InputGroup
+                                    inputId='frDocs-Nav__search'
+                                    inputPlaceholder='Search'
+                                    inputType='search'
+                                    inputValue={this.state.query}
+                                    onChange={this.onChangeHandler} />
+                            </div>
+                            {navItems}
+                        </nav>
+                    </div>
+                    <div className='frDocs-Content'>
+                        <Switch>
+                            {routes.map(route => {
+                                return (
+                                    <Route
+                                        component={route.component}
+                                        exact
+                                        key={route.url}
+                                        path={route.url} />
+                                );
+                            })}
+                            <Redirect exact from=''
+                                to='/home' />
+                            <Route component={RouteNotFound} />
+                        </Switch>
+                    </div>
                 </div>
-            </div>
-        </BrowserRouter>
-    );
-};
+            </BrowserRouter>
+        );
+    }
+}