Tabs for sections v1

3 files changed, 45 insertions, 11 deletions

diff --git a/core/search-component/src/main/js/search/app-root.js b/core/search-component/src/main/js/search/app-root.js
index 25a374a5..5d650581 100644
--- a/core/search-component/src/main/js/search/app-root.js
+++ b/core/search-component/src/main/js/search/app-root.js
@@ -1,13 +1,47 @@
-import React, {Component} from 'react';
+import React, {useRef, useState, useEffect} from 'react';
 import {WithFuzzySearchFilter} from './search';
 import './app.css';
 
-export default class AppRoot extends Component {
-  render() {
-    return (
-        <div className="search-content">
-          <WithFuzzySearchFilter/>
-        </div>
-    );
-  }
+function useComponentVisible(initialIsVisible) {
+    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
+    const ref = useRef(null);
+
+    const handleHideDropdown = (event) => {
+        if (event.key === "Escape") {
+            setIsComponentVisible(false);
+        }
+    };
+
+    const handleClickOutside = event => {
+        if (ref.current && !ref.current.contains(event.target)) {
+            setIsComponentVisible(false);
+        }
+    };
+
+    useEffect(() => {
+        document.addEventListener("keydown", handleHideDropdown, true);
+        document.addEventListener("click", handleClickOutside, true);
+        return () => {
+            document.removeEventListener("keydown", handleHideDropdown, true);
+            document.removeEventListener("click", handleClickOutside, true);
+        };
+    });
+
+    return { ref, isComponentVisible, setIsComponentVisible };
+}
+
+export const AppRoot = () => {
+  const {
+      ref,
+      isComponentVisible,
+      setIsComponentVisible
+  } = useComponentVisible(false);
+
+  return <div ref={ref} className="search-content">
+      {isComponentVisible && (<WithFuzzySearchFilter/>)}
+      {!isComponentVisible && (
+          <span onClick={() => setIsComponentVisible(true)}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M19.64 18.36l-6.24-6.24a7.52 7.52 0 1 0-1.28 1.28l6.24 6.24zM7.5 13.4a5.9 5.9 0 1 1 5.9-5.9 5.91 5.91 0 0 1-5.9 5.9z"/></svg>
+          </span>)}
+  </div>
 }
\ No newline at end of file
diff --git a/core/search-component/src/main/js/search/app.css b/core/search-component/src/main/js/search/app.css
index 933237e0..c51d3fe1 100644
--- a/core/search-component/src/main/js/search/app.css
+++ b/core/search-component/src/main/js/search/app.css
@@ -17,5 +17,5 @@ html,
 }
 
 .search-content {
-  margin: calc(var(--ring-unit) * 4);
+  padding: 24px 41px;
 }
diff --git a/core/search-component/src/main/js/search/app.js b/core/search-component/src/main/js/search/app.js
index 64091607..bceffa48 100644
--- a/core/search-component/src/main/js/search/app.js
+++ b/core/search-component/src/main/js/search/app.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {render} from 'react-dom';
 import RedBox from 'redbox-react';
 
-import AppRoot from './app-root';
+import {AppRoot} from './app-root';
 import './app.css';
 
 const appEl = document.getElementById('searchBar');