Merge pull request #515 from 18F/514-homepage-search

Replace homepage search w/ full text

ui/.eslintrc

@@ -17,6 +17,7 @@
     /* TODO: These rules should be packaged */
     "no-unsafe-innerhtml/no-unsafe-innerhtml" : 2,
     "react/jsx-filename-extension": [1, {"extensions": [".js", ".jsx"]}],
+    "import/no-named-as-default": 0,
     "scanjs-rules/assign_to_hostname" : 2,
     "scanjs-rules/assign_to_href" : 2,
     "scanjs-rules/assign_to_location" : 2,

ui/__tests__/components/search/search.test.js

@@ -3,6 +3,9 @@ import React from 'react';
 
 import { Search } from '../../../components/search/search';
 
+const blankRouter = { pathname: '', query: {} };
+
+
 describe('<Search />', () => {
   describe('actionPath()', () => {
     it('returns /requirements/ by default', () => {
@@ -99,4 +102,37 @@ describe('<Search />', () => {
       });
     });
   });
+
+  describe('buttonContent prop', () => {
+    it('can be a React.Component', () => {
+      const params = {
+        buttonContent: <div className="content-here">Content!</div>,
+        router: blankRouter,
+      };
+      const rendered = shallow(<Search {...params} />);
+      expect(rendered.find('button .content-here')).toHaveLength(1);
+      const content = rendered.find('button .content-here').first();
+      expect(content.text()).toEqual('Content!');
+      expect(content.name()).toEqual('div');
+    });
+
+    it('can be plain text', () => {
+      const params = { buttonContent: 'I am a button', router: blankRouter };
+      const button = shallow(<Search {...params} />).find('button').first();
+      expect(button.text()).toEqual('I am a button');
+    });
+  });
+
+  describe('placeholder prop', () => {
+    it('has a sane default', () => {
+      const input = shallow(<Search router={blankRouter} />)
+        .find('[type="text"]').first();
+      expect(input.prop('placeholder')).toEqual('Search');
+    });
+    it('can be configured', () => {
+      const input = shallow(<Search placeholder="Hiya!" router={blankRouter} />)
+        .find('[type="text"]').first();
+      expect(input.prop('placeholder')).toEqual('Hiya!');
+    });
+  });
 });

ui/components/navbar.js

@@ -1,15 +1,21 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import SearchContainer from './search/search';
+import Search from './search/search';
 import { Link } from '../routes';
 
 export default function Navbar({ showSearch }) {
   let searchContainer;
   if (showSearch) {
-    searchContainer = <SearchContainer />;
+    const buttonContent = (
+      <img alt="Submit search" src="/static/img/search-icon.svg" />
+    );
+    searchContainer = (
+      <div className="header-search-form">
+        <Search buttonContent={buttonContent} placeholder="Search" />
+      </div>
+    );
   }
-
   return (
     <div className="overflow-auto">
       <div className="flex items-center navbar">

ui/components/search/search.js

@@ -52,36 +52,39 @@ export class Search extends React.Component {
 
   render() {
     return (
-      <div className="search-form pr2 no-print">
-        <form
-          method="GET"
-          action={this.actionPath()}
-          className="mb0 flex items-center"
-          onSubmit={this.handleSubmit}
-        >
-          <input
-            aria-label="Search term"
-            name={this.inputName()}
-            type="text"
-            placeholder="Search"
-            className="search-input p1 gray-border"
-            onChange={this.handleChange}
-            value={this.state.term}
-          />
-          {this.hiddenFields()}
-          <button type="submit" className="search-submit p1 gray-border">
-            <img alt="Submit search" src="/static/img/search-icon.svg" />
-          </button>
-        </form>
-      </div>
+      <form
+        method="GET"
+        action={this.actionPath()}
+        onSubmit={this.handleSubmit}
+      >
+        <input
+          aria-label="Search term"
+          name={this.inputName()}
+          type="text"
+          placeholder={this.props.placeholder}
+          className="search-input"
+          onChange={this.handleChange}
+          value={this.state.term}
+        />
+        {this.hiddenFields()}
+        <button type="submit" className="search-submit">
+          {this.props.buttonContent}
+        </button>
+      </form>
     );
   }
 }
 Search.propTypes = {
+  buttonContent: PropTypes.node,
+  placeholder: PropTypes.string,
   router: PropTypes.shape({
     pathname: PropTypes.string.isRequired,
     query: PropTypes.shape({}).isRequired,
   }).isRequired,
 };
+Search.defaultProps = {
+  buttonContent: null,
+  placeholder: 'Search',
+};
 
 export default withRouter(Search);

ui/css/_button-like.scss

@@ -5,4 +5,5 @@
 
   color: $color-white;
   background-color: $color-primary;
+  border-color: $color-white;
 }

ui/css/_header.scss

@@ -48,3 +48,52 @@
     padding-left: 1rem;
   }
 }
+
+.header-search-form {
+  @extend .pr2;
+  @extend .no-print;
+  position: absolute;
+  right: 0;
+
+  form {
+    @extend .mb0;
+    @extend .flex;
+    @extend .items-center;
+  }
+
+  .search-input {
+    @extend .gray-border;
+    @include font-source-sans-pro();
+    border: 1px solid;
+    border-right: 0;
+    border-bottom-left-radius: 5px;
+    border-top-left-radius: 5px;
+    font-size: 0.75rem;
+    padding: 0.54rem;
+    width: 20rem;
+  }
+
+  .search-submit {
+    @extend .gray-border;
+    background-color: $color-white;
+    border: 1px solid;
+    border-left: 0;
+    border-bottom-right-radius: 5px;
+    border-top-right-radius: 5px;
+    padding: 0.54rem;
+  }
+}
+
+@media (max-width: 52em) {
+  .header-search-form {
+    position: relative;
+
+    .search-input {
+      padding: 0.56rem;
+    }
+
+    .search-submit {
+      padding: 0.57rem;
+    }
+  }
+}

ui/css/_homepage.scss

@@ -27,6 +27,18 @@
     border-top: 1px solid $color-gray-light;
     border-bottom: 1px solid $color-gray-light;
   }
+
+  .search-input {
+    @extend .p1;
+    @extend .col-3;
+    @extend .mr1;
+  }
+
+  .search-submit {
+    @extend .button-like;
+    @extend .border;
+    @extend .h5;
+  }
 }
 
 @media (max-width: 52em) {

ui/css/main.scss

@@ -30,4 +30,3 @@
 @import 'policies';
 @import 'homepage';
 @import 'loading-indicator';
-@import 'search';

ui/pages/index.js

@@ -2,43 +2,20 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import wrapPage from '../components/app-wrapper';
-import ConditionalRender from '../components/conditional-render';
-import FallbackView from '../components/filters/fallback-view';
-import TopicAutocomplete from '../components/homepage/topic-autocomplete';
 import NewPolicyView from '../components/homepage/new-policy-view';
+import Search from '../components/search/search';
 import { homepageData } from '../queries';
 
 
 export function Homepage({ recentPolicies }) {
   return (
     <div className="homepage">
       <section className="filter-form py2 center">
-        <div className="sm-col-12 md-col-6 mx-auto center">
+        <div className="sm-col-12 md-col-8 mx-auto center">
           <h2 className="h1">Find policies and requirements that apply to your agency.</h2>
-          <div className="filter px4">
-            <h3 className="h3" id="topics_label">What topics are you interested in?</h3>
-            <ConditionalRender>
-              <div className="form-field">
-                <FallbackView
-                  aria-labelledby="topics_label"
-                  insertParam="topics__id__in"
-                  lookup="topics"
-                  route="requirements"
-                />
-              </div>
-              <form method="GET" action="/requirements">
-                <div className="form-field">
-                  <TopicAutocomplete aria-labelledby="topics_label" />
-                </div>
-                <div className="form-field">
-                  <input
-                    className="filter-form-submit mt2 h4 py1 px4 rounded"
-                    value="Search"
-                    type="submit"
-                  />
-                </div>
-              </form>
-            </ConditionalRender>
+          <div className="filter px4 mb4">
+            <h3 className="h3" id="topics_label">What are you interested in finding?</h3>
+            <Search buttonContent="Search" placeholder="Search Keywords" />
           </div>
         </div>
       </section>