Merge pull request #2574 from fecgov/feature/update-boolean-search-box

Update boolean search box and add tooltips for AO,MUR, Statutes

fec/fec/static/js/legal/Filters.js

@@ -53,6 +53,13 @@ function Filters(props) {
             handleChange={props.setQuery}
             getResults={props.getResults}
             keywordModal={true}
+            TooltipHelp={{
+              addTooltip: true,
+              message:
+                'Refine a keyword search by using AND, OR, “ ”, -, to expand or limit results.',
+              verticalPosition: 'above',
+              horizontalPosition: 'left'
+            }}
           />
           <CheckboxFilter
             key="ao_is_pending"

fec/fec/static/js/legal/filters/TextFilter.js

@@ -1,5 +1,6 @@
 const React = require('react');
 const PropTypes = require('prop-types');
+const TooltipHelp = require('./TooltipHelp');
 
 function TextFilter(props) {
   function handleKeydown(e) {
@@ -9,48 +10,63 @@ function TextFilter(props) {
   }
 
   return (
-    <div className="filter">
-      <label className="label" htmlFor={props.name + '-filter'}>
-        {props.label}
-      </label>
-      <div className="combo combo--search--mini">
-        <input
-          id={props.name + '-filter'}
-          type="text"
-          name={props.name}
-          className="combo__input"
-          value={props.value || ''}
-          onChange={props.handleChange}
-          onKeyDown={handleKeydown}
-        />
-        <button
-          className="combo__button button--search button--standard"
-          onClick={props.getResults}
+    <div>
+      <div className="filter">
+        <label
+          className="label t-inline-block"
+          htmlFor={props.name + '-filter'}
         >
-          <span className="u-visually-hidden">Search</span>
-        </button>
+          {props.label}
+        </label>
+        {props.TooltipHelp.addTooltip && (
+          <TooltipHelp
+            message={props.TooltipHelp.message}
+            verticalPosition={props.TooltipHelp.verticalPosition}
+            horizontalPosition={props.TooltipHelp.horizontalPosition}
+          />
+        )}
+        <div className="combo combo--search--mini">
+          <input
+            id={props.name + '-filter'}
+            type="text"
+            name={props.name}
+            className="combo__input"
+            value={props.value || ''}
+            onChange={props.handleChange}
+            onKeyDown={handleKeydown}
+          />
+          <button
+            className="combo__button button--search button--standard"
+            onClick={props.getResults}
+          >
+            <span className="u-visually-hidden">Search</span>
+          </button>
+        </div>
+        {props.keywordModal && (
+          <button
+            className="button--keywords"
+            aria-controls="keyword-modal"
+            data-a11y-dialog-show="keyword-modal"
+          >
+            More keyword options
+          </button>
+        )}
+        {props.helpText && (
+          <span className="t-note t-sans search__example">
+            {props.helpText}
+          </span>
+        )}
       </div>
-      {props.keywordModal && (
-        <button
-          className="button--keywords"
-          aria-controls="keyword-modal"
-          data-a11y-dialog-show="keyword-modal"
-        >
-          More keyword options
-        </button>
-      )}
-      {props.helpText && (
-        <span className="t-note t-sans search__example">{props.helpText}</span>
-      )}
     </div>
   );
 }
 
 TextFilter.defaultProps = {
   getResults: function() {},
   handleChange: function() {},
-  helpText: 'help',
+  helpText: '',
   keywordModal: true,
+  TooltipHelp: {},
   name: 'name',
   value: ''
 };
@@ -60,6 +76,7 @@ TextFilter.propTypes = {
   handleChange: PropTypes.func,
   helpText: PropTypes.string,
   keywordModal: PropTypes.bool,
+  TooltipHelp: PropTypes.object,
   name: PropTypes.string,
   value: PropTypes.string
 };

fec/fec/static/js/legal/filters/TooltipHelp.js

@@ -0,0 +1,25 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+
+class TooltipHelp extends React.Component {
+  render() {
+    return (
+      <div className="tooltip__container">
+        <button className="tooltip__trigger">
+          <span className="u-visually-hidden">Learn more</span>
+        </button>
+        <div
+          className={`tooltip tooltip--${
+            this.props.verticalPosition
+          } tooltip--${this.props.horizontalPosition}`}
+        >
+          <p className="tooltip__content tooltip__content">
+            {this.props.message}
+          </p>
+        </div>
+      </div>
+    );
+  }
+}
+
+module.exports = TooltipHelp;

fec/fec/static/scss/components/_modals.scss

@@ -34,6 +34,7 @@
   @include media($lg) {
     margin-left: u(-40rem);
     width: u(80rem);
+    max-height:650px;
   }
 }
 
@@ -52,3 +53,11 @@
   @include shift(1);
   padding-top: u(1rem);
 }
+
+.keyword-modal {
+  .simple-table{
+    border-width: 0 0;
+  }
+
+}
+

fec/fec/static/scss/components/_search-controls.scss

@@ -1,6 +1,9 @@
 // Search Controls
 //
-// Used at the top of election lookup page
+// Used on:
+// election lookup page
+// embedded searches (MUR, AUDIT)
+// keyword modals
 //
 
 .search-controls__row {
@@ -87,6 +90,7 @@
   background: $gray-lightest;
 }
 
+//For data/election search boxes
 .election-search {
 
   .search--container {
@@ -122,6 +126,23 @@
   }
 }
 
+ //for keyword-options modals on AO, MUR, Statues searches
+.keyword-modal{
+  .modal__tips, modal__form {
+    display:table-row;
+    width:100%;
+  }
+  .modal__tips {
+    margin-left:0;
+  }
+
+  .search-controls__or--vertical {
+  width: 100%;
+  display:inline-grid;
+  }
+}
+
+
 @include media($med) {
   .search-controls__row {
     padding: u(2rem 0);
@@ -225,6 +246,35 @@
     }
   }
 
+  //for keyword-options modals on AO, MUR, Statues searches
+.keyword-modal{
+  .modal__tips, .modal__form {
+    display:table-cell;
+    width:44%;
+  }
+  .modal__tips {
+    margin-left: u(1rem);
+    padding-top: 0;
+  }
+  .search-controls__or--vertical {
+    margin: u(22.5rem 0);
+    width: u(3.5rem);
+    display:table-cell;
+
+    &::before,
+    &::after {
+      height: u(22.5rem);
+    }
+    &::before {
+      top: u(-22.5rem);
+    }
+
+    &::after {
+      top: auto;
+      bottom: u(-22.5rem);
+    }
+  }
+}
 
 }/*end MED breakpoint*/