WIP: Search form in header bar

js/components/Header.js

@@ -1,34 +1,68 @@
 import React from 'react';
+import classNames from 'classnames';
 import Branding from './Branding';
 import Link from './Link';
 import LogoLink from './LogoLink';
+import Search from './Search';
 import { getItemPageNames } from '../../common/config';
 
-export default function Header({ pageName }) {
+class Header extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      searchOpen: false,
+    };
+  }
 
-  const smallLogo = pageName !== 'index';
+  openSearch = () => {
+    this.setState({
+      searchOpen: true,
+    });
+  }
 
-  return (
-    <Branding
-      logoContent={<LogoLink small={smallLogo} />}
-    >
-      <div className="nav">
-        <div className="nav__item">
-          <Link pageName="help" className="icon-link">
-            <span className="icon icon--question icon-link__icon"></span>How to Use Technology Radar?
-          </Link>
+  closeSearch = () => {
+    this.setState({
+      searchOpen: false,
+    });
+  }
+
+  handleOpenClick = (e) => {
+    e.preventDefault();
+    this.openSearch();
+  }
+
+  render() {
+    const { pageName } = this.props;
+    const { searchOpen } = this.state;
+    const smallLogo = pageName !== 'index';
+
+    return (
+      <Branding
+        logoContent={<LogoLink small={smallLogo} />}
+      >
+        <div className="nav">
+          <div className="nav__item">
+            <Link pageName="help" className="icon-link">
+              <span className="icon icon--question icon-link__icon"></span>How to Use Technology Radar?
+            </Link>
+          </div>
+          <div className="nav__item">
+            <Link pageName="overview" className="icon-link">
+              <span className="icon icon--overview icon-link__icon"></span>Technologies Overview
+            </Link>
+          </div>
+          <div className="nav__item">
+            <a className="icon-link" href="#" onClick={this.handleOpenClick}>
+              <span className="icon icon--search icon-link__icon"></span>Search
+            </a>
+            <div className={classNames('nav__search', { 'is-open': searchOpen })}>
+              <Search onClose={this.closeSearch} open={searchOpen} />
+            </div>
+          </div>
         </div>
-        <div className="nav__item">
-          <Link pageName="overview" className="icon-link">
-            <span className="icon icon--overview icon-link__icon"></span>Technologies Overview
-          </Link>
-        </div>
-        <div className="nav__item">
-          <a className="icon-link" href="#todo">
-            <span className="icon icon--search icon-link__icon"></span>Search
-          </a>
-        </div>
-      </div>
-    </Branding>
-  );
+      </Branding>
+    );
+  }
 }
+
+export default Header;

js/components/PageOverview.js

@@ -30,7 +30,6 @@ class PageOverview extends React.Component {
     e.preventDefault();
 
     this.setState({
-      ...this.state,
       ring,
     });
   }
@@ -66,7 +65,6 @@ class PageOverview extends React.Component {
 
   handleSearchTermChange = (value) => {
     this.setState({
-      ...this.state,
       search: value,
     });
   };

js/components/Search.js

@@ -1,14 +1,21 @@
 import React from 'react';
 import classNames from 'classnames';
 
-export default function Search({ value, onChange, onSubmit = () => {} }) {
+export default function Search({ value, onChange, onClose, open = false, onSubmit = () => {} }) {
+  const closable = typeof onClose === 'function';
+
   const handleSubmit = (e) => {
     e.preventDefault();
     onSubmit();
   };
 
+  const handleClose = (e) => {
+    e.preventDefault();
+    onClose();
+  }
+
   return (
-    <form className="search" onSubmit={handleSubmit}>
+    <form className={classNames('search', { 'search--closable': closable })} onSubmit={handleSubmit}>
       <input
         value={value}
         type="text"
@@ -16,12 +23,19 @@ export default function Search({ value, onChange, onSubmit = () => {} }) {
         className="search__field"
         placeholder="What are you looking for?"
       />
-      <span className="search__button">
+      <span className={classNames('search__button', { 'is-open': open })}>
         <button type="submit" className="button">
           <span className="icon icon--search button__icon" />
           Search
         </button>
       </span>
+      {
+        closable && (
+          <a href="#" className={classNames('search__close', { 'is-open': open })} onClick={handleClose}>
+            <span className="icon icon--close" />
+          </a>
+        )
+      }
     </form>
   );
 }