Skip to content

Commit fad4092

Browse files
bianca-laubeseungpark
bianca-laube
and
seungpark
authored
Dop 3788 (#850)
Co-authored-by: Seung Park <[email protected]>
1 parent 440d22b commit fad4092

File tree

5 files changed

+174
-23
lines changed

5 files changed

+174
-23
lines changed

‎package-lock.json‎

Lines changed: 115 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/SearchResults/SearchResult.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@ import styled from '@emotion/styled';
55
import { palette } from '@leafygreen-ui/palette';
66
import { Body } from '@leafygreen-ui/typography';
77
import { theme } from '../../theme/docsTheme';
8-
import Tag, { searchTagStyle } from '../Tag';
8+
import Tag, { searchTagStyle, searchTagStyleFeature } from '../Tag';
99
import SearchContext from './SearchContext';
1010

1111
const LINK_COLOR = '#494747';
1212
// Use string for match styles due to replace/innerHTML
1313
const SEARCH_MATCH_STYLE = `background-color: ${palette.yellow.light2};`;
14+
const newSearchInput = process.env.GATSBY_TEST_SEARCH_UI === 'true';
1415

1516
const largeResultTitle = css`
1617
font-size: ${theme.size.default};
@@ -93,7 +94,7 @@ const StyledResultTitle = styled('p')`
9394
`;
9495

9596
const StyledTag = styled(Tag)`
96-
${searchTagStyle}
97+
${newSearchInput ? searchTagStyleFeature : searchTagStyle}
9798
`;
9899

99100
const StylingTagContainer = styled('div')`

‎src/components/SearchResults/SearchResults.js‎

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Button from '@leafygreen-ui/button';
77
import Icon from '@leafygreen-ui/icon';
88
import { SearchInput } from '@leafygreen-ui/search-input';
99
import { palette } from '@leafygreen-ui/palette';
10-
import { H1 } from '@leafygreen-ui/typography';
10+
import { H1, Overline } from '@leafygreen-ui/typography';
1111
import queryString from 'query-string';
1212
import useScreenSize from '../../hooks/useScreenSize';
1313
import { theme } from '../../theme/docsTheme';
@@ -16,7 +16,7 @@ import { getSearchbarResultsFromJSON } from '../../utils/get-searchbar-results-f
1616
import { escapeHtml } from '../../utils/escape-reserved-html-characters';
1717
import { searchParamsToURL } from '../../utils/search-params-to-url';
1818
import { useMarianManifests } from '../../hooks/use-marian-manifests';
19-
import Tag, { searchTagStyle } from '../Tag';
19+
import Tag, { searchTagStyle, searchTagStyleFeature } from '../Tag';
2020
import SearchContext from './SearchContext';
2121
import SearchFilters from './SearchFilters';
2222
import SearchResult from './SearchResult';
@@ -31,6 +31,7 @@ const LANDING_PAGE_MARGIN = '40px';
3131
const ROW_GAP = theme.size.default;
3232
const SKELETON_BORDER_RADIUS = '12px';
3333
const SEARCH_RESULT_HEIGHT = '152px';
34+
const newSearchInput = process.env.GATSBY_TEST_SEARCH_UI === 'true';
3435

3536
const CALC_MARGIN = `calc(50vh - ${LANDING_MODULE_MARGIN} - ${LANDING_PAGE_MARGIN} - ${EMPTY_STATE_HEIGHT} / 2)`;
3637

@@ -169,6 +170,7 @@ const StyledSearchResult = styled(SearchResult)`
169170
const StyledLoadingSkeletonContainer = styled('div')`
170171
${searchResultStyling}
171172
box-shadow: 0 0 ${theme.size.tiny} 0 rgba(231, 238, 236, 1) !important;
173+
color: red;
172174
173175
/* inner div padding */
174176
box-sizing: border-box;
@@ -221,7 +223,12 @@ const FilterBadgesWrapper = styled('div')`
221223
`;
222224

223225
const StyledTag = styled(Tag)`
224-
${searchTagStyle}
226+
${newSearchInput ? searchTagStyleFeature : searchTagStyle}
227+
`;
228+
229+
const ResultTag = styled('div')`
230+
display: flex;
231+
flex-direction: row;
225232
`;
226233

227234
const MobileSearchButtonWrapper = styled('div')`
@@ -342,20 +349,38 @@ const SearchResults = () => {
342349
setSearchField(e.target.value);
343350
}}
344351
/>
352+
<ResultTag style={{ paddingTop: '10px' }}>
353+
<Overline style={{ paddingTop: '11px', paddingRight: '8px' }}>
354+
{searchResults?.length ? searchResults.length : '0'} RESULTS
355+
</Overline>
356+
{!!searchFilter && (
357+
<FilterBadgesWrapper>
358+
{selectedCategory && (
359+
<StyledTag variant="green" onClick={resetFilters}>
360+
{selectedCategory}
361+
<Icon style={{ marginLeft: '8px', marginRight: '-2px' }} glyph="X" />
362+
</StyledTag>
363+
)}
364+
{selectedVersion && <StyledTag variant="blue">{selectedVersion}</StyledTag>}
365+
</FilterBadgesWrapper>
366+
)}
367+
</ResultTag>
345368
</>
346369
) : (
347-
<HeaderText>Search results for "{searchTerm}"</HeaderText>
348-
)}
349-
{!!searchFilter && (
350-
<FilterBadgesWrapper>
351-
{selectedCategory && (
352-
<StyledTag variant="green" onClick={resetFilters}>
353-
{selectedCategory}
354-
<Icon glyph="X" />
355-
</StyledTag>
370+
<>
371+
<HeaderText>Search results for "{searchTerm}"</HeaderText>
372+
{!!searchFilter && (
373+
<FilterBadgesWrapper>
374+
{selectedCategory && (
375+
<StyledTag variant="green" onClick={resetFilters}>
376+
{selectedCategory}
377+
<Icon glyph="X" />
378+
</StyledTag>
379+
)}
380+
{selectedVersion && <StyledTag variant="blue">{selectedVersion}</StyledTag>}
381+
</FilterBadgesWrapper>
356382
)}
357-
{selectedVersion && <StyledTag variant="blue">{selectedVersion}</StyledTag>}
358-
</FilterBadgesWrapper>
383+
</>
359384
)}
360385
<MobileSearchButtonWrapper>
361386
<Button leftGlyph={<Icon glyph={mobileFilterButton.glyph} />} onClick={mobileFilterButton.onClick}>

‎src/components/Tag.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,14 @@ export const searchTagStyle = css`
1818
margin-right: ${theme.size.small};
1919
`;
2020

21+
export const searchTagStyleFeature = css`
22+
cursor: pointer;
23+
height: 26px;
24+
padding: 4px 11px 4px 11px;
25+
border-radius: 12px;
26+
font-size: ${theme.fontSize.tiny};
27+
margin-right: ${theme.size.small};
28+
`;
2129
const VARIANTS = {
2230
blue: css`
2331
background-color: ${palette.blue.light3};

‎tests/unit/__snapshots__/SearchResults.test.js.snap‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -883,7 +883,7 @@ exports[`Search Results Page considers a given search filter query param and dis
883883
</a>
884884
</div>
885885
<div
886-
class="emotion-36 emotion-80"
886+
class="emotion-36 emotion-37"
887887
>
888888
<h2
889889
class="emotion-38 emotion-39"
@@ -2357,17 +2357,17 @@ exports[`Search Results Page renders loading images before returning no results
23572357
width: 100%;
23582358
}
23592359
2360-
.emotion-12:hover>.e1yoi6mj6 {
2360+
.emotion-12:hover>.e1yoi6mj7 {
23612361
opacity: 0.2;
23622362
-webkit-transition: opacity 150ms ease-in;
23632363
transition: opacity 150ms ease-in;
23642364
}
23652365
2366-
.emotion-12:hover>.e1yoi6mj6:hover {
2366+
.emotion-12:hover>.e1yoi6mj7:hover {
23672367
opacity: 1;
23682368
}
23692369
2370-
.emotion-12:not(:hover)>.e1yoi6mj6 {
2370+
.emotion-12:not(:hover)>.e1yoi6mj7 {
23712371
opacity: 1;
23722372
-webkit-transition: opacity 150ms ease-in;
23732373
transition: opacity 150ms ease-in;
@@ -2381,6 +2381,7 @@ exports[`Search Results Page renders loading images before returning no results
23812381
place-self: center;
23822382
width: 100%;
23832383
box-shadow: 0 0 4px 0 rgba(231, 238, 236, 1)!important;
2384+
color: red;
23842385
box-sizing: border-box;
23852386
padding: 15px;
23862387
display: grid;
@@ -3144,17 +3145,17 @@ exports[`Search Results Page renders loading images before returning nonempty re
31443145
width: 100%;
31453146
}
31463147
3147-
.emotion-12:hover>.e1yoi6mj6 {
3148+
.emotion-12:hover>.e1yoi6mj7 {
31483149
opacity: 0.2;
31493150
-webkit-transition: opacity 150ms ease-in;
31503151
transition: opacity 150ms ease-in;
31513152
}
31523153
3153-
.emotion-12:hover>.e1yoi6mj6:hover {
3154+
.emotion-12:hover>.e1yoi6mj7:hover {
31543155
opacity: 1;
31553156
}
31563157
3157-
.emotion-12:not(:hover)>.e1yoi6mj6 {
3158+
.emotion-12:not(:hover)>.e1yoi6mj7 {
31583159
opacity: 1;
31593160
-webkit-transition: opacity 150ms ease-in;
31603161
transition: opacity 150ms ease-in;
@@ -3168,6 +3169,7 @@ exports[`Search Results Page renders loading images before returning nonempty re
31683169
place-self: center;
31693170
width: 100%;
31703171
box-shadow: 0 0 4px 0 rgba(231, 238, 236, 1)!important;
3172+
color: red;
31713173
box-sizing: border-box;
31723174
padding: 15px;
31733175
display: grid;

0 commit comments

Comments
 (0)