Dop 3788 (#850)

Co-authored-by: Seung Park <[email protected]>
mongodb · Jul 11, 2023 · fad4092 · fad4092
1 parent 440d22b
commit fad4092
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/SearchResults/SearchResult.js b/src/components/SearchResults/SearchResult.js
@@ -5,12 +5,13 @@ import styled from '@emotion/styled';
 import { palette } from '@leafygreen-ui/palette';
 import { Body } from '@leafygreen-ui/typography';
 import { theme } from '../../theme/docsTheme';
-import Tag, { searchTagStyle } from '../Tag';
+import Tag, { searchTagStyle, searchTagStyleFeature } from '../Tag';
 import SearchContext from './SearchContext';
 
 const LINK_COLOR = '#494747';
 // Use string for match styles due to replace/innerHTML
 const SEARCH_MATCH_STYLE = `background-color: ${palette.yellow.light2};`;
+const newSearchInput = process.env.GATSBY_TEST_SEARCH_UI === 'true';
 
 const largeResultTitle = css`
   font-size: ${theme.size.default};
@@ -93,7 +94,7 @@ const StyledResultTitle = styled('p')`
 `;
 
 const StyledTag = styled(Tag)`
-  ${searchTagStyle}
+  ${newSearchInput ? searchTagStyleFeature : searchTagStyle}
 `;
 
 const StylingTagContainer = styled('div')`

diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js
@@ -7,7 +7,7 @@ import Button from '@leafygreen-ui/button';
 import Icon from '@leafygreen-ui/icon';
 import { SearchInput } from '@leafygreen-ui/search-input';
 import { palette } from '@leafygreen-ui/palette';
-import { H1 } from '@leafygreen-ui/typography';
+import { H1, Overline } from '@leafygreen-ui/typography';
 import queryString from 'query-string';
 import useScreenSize from '../../hooks/useScreenSize';
 import { theme } from '../../theme/docsTheme';
@@ -16,7 +16,7 @@ import { getSearchbarResultsFromJSON } from '../../utils/get-searchbar-results-f
 import { escapeHtml } from '../../utils/escape-reserved-html-characters';
 import { searchParamsToURL } from '../../utils/search-params-to-url';
 import { useMarianManifests } from '../../hooks/use-marian-manifests';
-import Tag, { searchTagStyle } from '../Tag';
+import Tag, { searchTagStyle, searchTagStyleFeature } from '../Tag';
 import SearchContext from './SearchContext';
 import SearchFilters from './SearchFilters';
 import SearchResult from './SearchResult';
@@ -31,6 +31,7 @@ const LANDING_PAGE_MARGIN = '40px';
 const ROW_GAP = theme.size.default;
 const SKELETON_BORDER_RADIUS = '12px';
 const SEARCH_RESULT_HEIGHT = '152px';
+const newSearchInput = process.env.GATSBY_TEST_SEARCH_UI === 'true';
 
 const CALC_MARGIN = `calc(50vh - ${LANDING_MODULE_MARGIN} - ${LANDING_PAGE_MARGIN} - ${EMPTY_STATE_HEIGHT} / 2)`;
 
@@ -169,6 +170,7 @@ const StyledSearchResult = styled(SearchResult)`
 const StyledLoadingSkeletonContainer = styled('div')`
   ${searchResultStyling}
   box-shadow: 0 0 ${theme.size.tiny} 0 rgba(231, 238, 236, 1) !important;
+  color: red;
 
   /* inner div padding */
   box-sizing: border-box;
@@ -221,7 +223,12 @@ const FilterBadgesWrapper = styled('div')`
 `;
 
 const StyledTag = styled(Tag)`
-  ${searchTagStyle}
+  ${newSearchInput ? searchTagStyleFeature : searchTagStyle}
+`;
+
+const ResultTag = styled('div')`
+  display: flex;
+  flex-direction: row;
 `;
 
 const MobileSearchButtonWrapper = styled('div')`
@@ -342,20 +349,38 @@ const SearchResults = () => {
                       setSearchField(e.target.value);
                     }}
                   />
+                  <ResultTag style={{ paddingTop: '10px' }}>
+                    <Overline style={{ paddingTop: '11px', paddingRight: '8px' }}>
+                      {searchResults?.length ? searchResults.length : '0'} RESULTS
+                    </Overline>
+                    {!!searchFilter && (
+                      <FilterBadgesWrapper>
+                        {selectedCategory && (
+                          <StyledTag variant="green" onClick={resetFilters}>
+                            {selectedCategory}
+                            <Icon style={{ marginLeft: '8px', marginRight: '-2px' }} glyph="X" />
+                          </StyledTag>
+                        )}
+                        {selectedVersion && <StyledTag variant="blue">{selectedVersion}</StyledTag>}
+                      </FilterBadgesWrapper>
+                    )}
+                  </ResultTag>
                 </>
               ) : (
-                <HeaderText>Search results for "{searchTerm}"</HeaderText>
-              )}
-              {!!searchFilter && (
-                <FilterBadgesWrapper>
-                  {selectedCategory && (
-                    <StyledTag variant="green" onClick={resetFilters}>
-                      {selectedCategory}
-                      <Icon glyph="X" />
-                    </StyledTag>
+                <>
+                  <HeaderText>Search results for "{searchTerm}"</HeaderText>
+                  {!!searchFilter && (
+                    <FilterBadgesWrapper>
+                      {selectedCategory && (
+                        <StyledTag variant="green" onClick={resetFilters}>
+                          {selectedCategory}
+                          <Icon glyph="X" />
+                        </StyledTag>
+                      )}
+                      {selectedVersion && <StyledTag variant="blue">{selectedVersion}</StyledTag>}
+                    </FilterBadgesWrapper>
                   )}
-                  {selectedVersion && <StyledTag variant="blue">{selectedVersion}</StyledTag>}
-                </FilterBadgesWrapper>
+                </>
               )}
               <MobileSearchButtonWrapper>
                 <Button leftGlyph={<Icon glyph={mobileFilterButton.glyph} />} onClick={mobileFilterButton.onClick}>

diff --git a/src/components/Tag.js b/src/components/Tag.js
@@ -18,6 +18,14 @@ export const searchTagStyle = css`
   margin-right: ${theme.size.small};
 `;
 
+export const searchTagStyleFeature = css`
+  cursor: pointer;
+  height: 26px;
+  padding: 4px 11px 4px 11px;
+  border-radius: 12px;
+  font-size: ${theme.fontSize.tiny};
+  margin-right: ${theme.size.small};
+`;
 const VARIANTS = {
   blue: css`
     background-color: ${palette.blue.light3};

diff --git a/tests/unit/__snapshots__/SearchResults.test.js.snap b/tests/unit/__snapshots__/SearchResults.test.js.snap
@@ -883,7 +883,7 @@ exports[`Search Results Page considers a given search filter query param and dis
       </a>
     </div>
     <div
-      class="emotion-36 emotion-80"
+      class="emotion-36 emotion-37"
     >
       <h2
         class="emotion-38 emotion-39"
@@ -2357,17 +2357,17 @@ exports[`Search Results Page renders loading images before returning no results
   width: 100%;
 }
 
-.emotion-12:hover>.e1yoi6mj6 {
+.emotion-12:hover>.e1yoi6mj7 {
   opacity: 0.2;
   -webkit-transition: opacity 150ms ease-in;
   transition: opacity 150ms ease-in;
 }
 
-.emotion-12:hover>.e1yoi6mj6:hover {
+.emotion-12:hover>.e1yoi6mj7:hover {
   opacity: 1;
 }
 
-.emotion-12:not(:hover)>.e1yoi6mj6 {
+.emotion-12:not(:hover)>.e1yoi6mj7 {
   opacity: 1;
   -webkit-transition: opacity 150ms ease-in;
   transition: opacity 150ms ease-in;
@@ -2381,6 +2381,7 @@ exports[`Search Results Page renders loading images before returning no results
   place-self: center;
   width: 100%;
   box-shadow: 0 0 4px 0 rgba(231, 238, 236, 1)!important;
+  color: red;
   box-sizing: border-box;
   padding: 15px;
   display: grid;
@@ -3144,17 +3145,17 @@ exports[`Search Results Page renders loading images before returning nonempty re
   width: 100%;
 }
 
-.emotion-12:hover>.e1yoi6mj6 {
+.emotion-12:hover>.e1yoi6mj7 {
   opacity: 0.2;
   -webkit-transition: opacity 150ms ease-in;
   transition: opacity 150ms ease-in;
 }
 
-.emotion-12:hover>.e1yoi6mj6:hover {
+.emotion-12:hover>.e1yoi6mj7:hover {
   opacity: 1;
 }
 
-.emotion-12:not(:hover)>.e1yoi6mj6 {
+.emotion-12:not(:hover)>.e1yoi6mj7 {
   opacity: 1;
   -webkit-transition: opacity 150ms ease-in;
   transition: opacity 150ms ease-in;
@@ -3168,6 +3169,7 @@ exports[`Search Results Page renders loading images before returning nonempty re
   place-self: center;
   width: 100%;
   box-shadow: 0 0 4px 0 rgba(231, 238, 236, 1)!important;
+  color: red;
   box-sizing: border-box;
   padding: 15px;
   display: grid;