move button around, fix date filter

src/components/Filters/DateFilter.js

@@ -159,29 +159,33 @@ export const DateFilter = () => {
             >
               From
             </label>
-            <div className="m-btn-inside-input">
-              <input
-                id={`${fieldName}-from`}
-                className={inputFromClassName}
-                onBlur={handleDateChange}
-                onChange={(evt) => setFromDate(evt.target.value)}
-                onKeyDown={handleKeyDownFromDate}
-                min={minDate}
-                max={maxDate}
-                ref={fromRef}
-                placeholder={DATE_VALIDATION_FORMAT}
-                type="date"
-                value={fromDate}
-              />
-              <button
-                className="a-btn a-btn--link"
-                onClick={() => handleClear('from')}
-              >
-                {getIcon('delete')}
-                <span className="u-visually-hidden">
-                  Clear date received from filter
-                </span>
-              </button>
+            <div className="o-search-input">
+              <div className="o-search-input__input">
+                <input
+                  id={`${fieldName}-from`}
+                  className={inputFromClassName}
+                  onBlur={handleDateChange}
+                  onChange={(evt) => setFromDate(evt.target.value)}
+                  onKeyDown={handleKeyDownFromDate}
+                  min={minDate}
+                  max={maxDate}
+                  ref={fromRef}
+                  placeholder={DATE_VALIDATION_FORMAT}
+                  type="date"
+                  value={fromDate}
+                />
+                <button
+                  type="reset"
+                  onClick={() => handleClear('from')}
+                  aria-label="Clear from date"
+                  title="Clear from date"
+                >
+                  {getIcon('delete')}
+                  <span className="u-visually-hidden">
+                    Clear date received from filter
+                  </span>
+                </button>
+              </div>
             </div>
           </li>
           <li>
@@ -191,29 +195,33 @@ export const DateFilter = () => {
             >
               Through
             </label>
-            <div className="m-btn-inside-input">
-              <input
-                id={`${fieldName}-through`}
-                className={inputThroughClassName}
-                onBlur={handleDateChange}
-                onChange={(evt) => setThroughDate(evt.target.value)}
-                onKeyDown={handleKeyDownThroughDate}
-                min={minDate}
-                max={maxDate}
-                placeholder={DATE_VALIDATION_FORMAT}
-                ref={throughRef}
-                type="date"
-                value={throughDate}
-              />
-              <button
-                className="a-btn a-btn--link"
-                onClick={() => handleClear('through')}
-              >
-                {getIcon('delete')}
-                <span className="u-visually-hidden">
-                  Clear date received through filter
-                </span>
-              </button>
+            <div className="o-search-input">
+              <div className="o-search-input__input">
+                <input
+                  id={`${fieldName}-through`}
+                  className={inputThroughClassName}
+                  onBlur={handleDateChange}
+                  onChange={(evt) => setThroughDate(evt.target.value)}
+                  onKeyDown={handleKeyDownThroughDate}
+                  min={minDate}
+                  max={maxDate}
+                  placeholder={DATE_VALIDATION_FORMAT}
+                  ref={throughRef}
+                  type="date"
+                  value={throughDate}
+                />
+                <button
+                  type="reset"
+                  onClick={() => handleClear('through')}
+                  aria-label="Clear through date"
+                  title="Clear through date"
+                >
+                  {getIcon('delete')}
+                  <span className="u-visually-hidden">
+                    Clear date received through filter
+                  </span>
+                </button>
+              </div>
             </div>
           </li>
         </ul>

src/components/Filters/DateFilter.less

@@ -16,13 +16,12 @@
         margin-right: @gutter-normal;
       }
 
-      .m-btn-inside-input {
-        .a-text-input {
-          padding-right: @grid_gutter-width;
-        }
-        .a-btn {
-          color: var(--gray);
-        }
+      input {
+        width:100%;
+        padding-right:@grid_gutter-width;
+      }
+      button {
+        padding-right: 5px;
       }
     }
   }

src/components/Search/SearchBar.js

@@ -12,9 +12,8 @@ import {
 } from '../../reducers/query/selectors';
 import { selectViewHasAdvancedSearchTips } from '../../reducers/view/selectors';
 import { AsyncTypeahead } from '../Typeahead/AsyncTypeahead/AsyncTypeahead';
-// import { Input } from '../Typeahead/Input/Input';
+import { Input } from '../Typeahead/Input/Input';
 import { handleFetchSearch } from '../Typeahead/utils';
-import { Input } from '../Input/Input';
 
 const searchFields = {
   all: 'All data',
@@ -121,6 +120,7 @@ export const SearchBar = ({ debounceWait }) => {
                   handleClear={onTypeaheadClear}
                   handleSearch={onSearchChange}
                   hasClearButton={true}
+                  hasSearchButton={true}
                   options={dropdownOptions}
                   placeholder="Enter your search term(s)"
                 />
@@ -135,13 +135,6 @@ export const SearchBar = ({ debounceWait }) => {
                 />
               )}
             </div>
-            {searchField === 'company' ? (
-              <button type="submit" className="a-btn">
-                Search
-              </button>
-            ) : (
-              ''
-            )}
             <a className="u-visually-hidden" href="#search-summary">
               Skip to Results
             </a>

src/components/Typeahead/ClearButton/ClearButton.js

@@ -4,11 +4,12 @@ import getIcon from '../../iconMap';
 export const ClearButton = ({ onClear }) => {
   return (
     <button
-      className="a-btn a-btn--link"
+      type="reset"
+      title="Clear search"
       onClick={onClear}
       aria-label="clear search"
     >
-      <div>{getIcon('delete')} Clear</div>
+      <div>{getIcon('delete')}</div>
     </button>
   );
 };

src/components/Typeahead/Input/Input.js

@@ -1,59 +1,62 @@
-import '../Typeahead.less';
-import React from 'react';
 import PropTypes from 'prop-types';
 import getIcon from '../../iconMap';
 import { ClearButton } from '../ClearButton/ClearButton';
 
 export const Input = ({
   ariaLabel,
-  // className,
+  className,
   htmlId,
   isDisabled,
   handleChange,
   handleClear,
   handlePressEnter,
-  isClearVisible,
   placeholder,
   value,
 }) => {
   return (
     <div className="o-search-input">
       <div className="o-search-input__input">
-        <label aria-label={ariaLabel} htmlFor={htmlId}>
+        <label
+          htmlFor={htmlId}
+          className="o-search-input__input-label"
+          aria-label={ariaLabel}
+        >
           {getIcon('search')}
         </label>
-
         <input
           type="search"
-          className="a-text-input a-text-input__full"
-          disabled={isDisabled}
           id={htmlId}
+          disabled={isDisabled}
+          value={value}
           onChange={handleChange}
           onKeyDown={handlePressEnter}
+          className={'a-text-input a-text-input__full ' + className}
           placeholder={placeholder}
-          value={value}
-          maxLength={200}
+          title={placeholder}
+          autoComplete="off"
+          maxLength="75"
         />
-        {!!isClearVisible && <ClearButton onClear={handleClear} />}
+        <ClearButton onClear={handleClear} />
       </div>
+      <button type="submit" className="a-btn">
+        Search
+      </button>
     </div>
   );
 };
 Input.propTypes = {
   ariaLabel: PropTypes.string.isRequired,
-  // className: PropTypes.string,
+  className: PropTypes.string,
   isDisabled: PropTypes.bool.isRequired,
   handleChange: PropTypes.func.isRequired,
   handleClear: PropTypes.func,
   handlePressEnter: PropTypes.func,
   htmlId: PropTypes.string.isRequired,
-  isClearVisible: PropTypes.bool,
   placeholder: PropTypes.string,
   value: PropTypes.string.isRequired,
 };
 
 Input.defaultProps = {
-  isClearVisible: false,
   isDisabled: false,
   placeholder: 'Enter your search text',
 };

src/components/Typeahead/Typeahead.less

@@ -10,8 +10,6 @@
     width: 100%;
     position: relative;
 
-    // z-index: 99;
-
     ul {
       padding-left: 0;
       border: solid 2px var(--pacific);