Add X button to clear the challenge search.

Author: narekcat

src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx

@@ -57,11 +57,17 @@ export default function ChallengeFilters({
     setFilterState(filterObj);
   };
 
+  const clearSearch = () => {
+    setFilterState(Filter.setText(filterState, ''));
+    setSearchText('');
+  };
+
   return (
     <div styleName="challenge-filters">
       <div styleName="filter-header">
         <ChallengeSearchBar
           onSearch={text => setFilterState(Filter.setText(filterState, text))}
+          onClearSearch={() => clearSearch()}
           label={isReviewOpportunitiesBucket ? 'Search Review Opportunities:' : 'Search Challenges:'}
           placeholder={isReviewOpportunitiesBucket ? 'Search Review Opportunities' : 'Type the challenge name here'}
           query={searchText}

src/shared/components/challenge-listing/Filters/ChallengeSearchBar/index.jsx

@@ -19,6 +19,7 @@ import ZoomIcon from './ui-zoom.svg';
 
 export default function ChallengeSearchBar({
   onSearch,
+  onClearSearch,
   placeholder,
   query,
   setQuery,
@@ -35,6 +36,13 @@ export default function ChallengeSearchBar({
           type="text"
           value={query}
         />
+        <span
+          styleName={`ClearButton ${query ? 'active' : ''}`}
+          onClick={() => onClearSearch()}
+          onKeyPress={() => onClearSearch()}
+        >
+          &#10799;
+        </span>
         <span
           styleName={`SearchButton ${query ? 'active' : ''}`}
           onClick={() => onSearch(query.trim())}
@@ -56,6 +64,7 @@ ChallengeSearchBar.defaultProps = {
 
 ChallengeSearchBar.propTypes = {
   onSearch: PT.func.isRequired,
+  onClearSearch: PT.func.isRequired,
   label: PT.string,
   placeholder: PT.string,
   query: PT.string.isRequired,

src/shared/components/challenge-listing/Filters/ChallengeSearchBar/style.scss

@@ -4,6 +4,7 @@ $challenge-space-15: $base-unit * 3;
 $challenge-space-20: $base-unit * 4;
 $challenge-space-30: $base-unit * 6;
 $challenge-space-40: $base-unit * 8;
+$challenge-space-60: $base-unit * 12;
 $challenge-radius-1: $corner-radius / 2;
 $challenge-radius-4: $corner-radius * 2;
 
@@ -77,4 +78,24 @@ $search-input-width: '100% - 56px';
       width: 16px;
     }
   }
+
+  .ClearButton {
+    display: none;
+    cursor: pointer;
+    position: absolute;
+    right: $challenge-space-60 - 4;
+    padding: $base-unit;
+    border-radius: 0 $challenge-radius-4 $challenge-radius-4 0;
+    vertical-align: middle;
+    height: 40px;
+    font-size: 25px;
+
+    &.active {
+      display: inline-block;
+    }
+
+    &:hover {
+      color: $tc-red-110;
+    }
+  }
 }