From fad40923f2a880a7e686c6173659cb918836d3f8 Mon Sep 17 00:00:00 2001 From: bianca-laube <135655735+bianca-laube@users.noreply.github.com> Date: Tue, 11 Jul 2023 16:17:59 -0400 Subject: [PATCH] Dop 3788 (#850) Co-authored-by: Seung Park --- package-lock.json | 115 ++++++++++++++++++ src/components/SearchResults/SearchResult.js | 5 +- src/components/SearchResults/SearchResults.js | 53 +++++--- src/components/Tag.js | 8 ++ .../__snapshots__/SearchResults.test.js.snap | 16 +-- 5 files changed, 174 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9ba89bc72..127b1cad6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26335,6 +26335,121 @@ "version": "1.1.8", "requires": { "@leafygreen-ui/tokens": "^2.0.0" + }, + "dependencies": { + "@leafygreen-ui/tokens": { + "version": "2.0.0", + "requires": { + "@leafygreen-ui/palette": "^3.4.7" + } + } + } + }, + "@leafygreen-ui/search-input": { + "version": "2.0.8", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/search-input/-/search-input-2.0.8.tgz", + "integrity": "sha512-ijMpZgyUpOQM1fOnUs1XavIYAcD9P5PNRWp2hprgWMJZp8FrcopsslMJJIDaM00Sdj0MjSDAti9+aXeo+2ZgSw==", + "requires": { + "@leafygreen-ui/a11y": "^1.4.3", + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/hooks": "^7.7.5", + "@leafygreen-ui/icon": "^11.17.0", + "@leafygreen-ui/icon-button": "^15.0.12", + "@leafygreen-ui/input-option": "^1.0.5", + "@leafygreen-ui/lib": "^10.4.0", + "@leafygreen-ui/palette": "^4.0.4", + "@leafygreen-ui/polymorphic": "^1.3.2", + "@leafygreen-ui/popover": "^11.0.12", + "@leafygreen-ui/tokens": "^2.1.1", + "@leafygreen-ui/typography": "^16.5.1", + "lodash": "^4.17.21", + "polished": "^4.2.2" + }, + "dependencies": { + "@leafygreen-ui/hooks": { + "version": "7.7.5", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-7.7.5.tgz", + "integrity": "sha512-Spk36yndhplGfCdLl14RWuoDPGYfEgA6AwqbaI4T45i+A2QtDTvdSFyMUkNmDK5vzk5cWmR/SmkRS/o5T9zgMA==", + "requires": { + "lodash": "^4.17.21" + } + }, + "@leafygreen-ui/icon-button": { + "version": "15.0.12", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon-button/-/icon-button-15.0.12.tgz", + "integrity": "sha512-19tXprK4/jIZq19o6Y2OnPw5ifuLIhpxAJ4/gs/lIFk/4A5PZJOnZzy6ABdiMaFk/1miSjoDQ5B+lncvgAx1gA==", + "requires": { + "@leafygreen-ui/a11y": "^1.4.2", + "@leafygreen-ui/box": "^3.1.4", + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/icon": "^11.17.0", + "@leafygreen-ui/lib": "^10.4.0", + "@leafygreen-ui/palette": "^4.0.4", + "@leafygreen-ui/tokens": "^2.1.1" + } + }, + "@leafygreen-ui/lib": { + "version": "10.4.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-10.4.0.tgz", + "integrity": "sha512-gGZBJ0Mjo2/hHfECbERGJbx1nPFNDqkge7L1K5y5LwBjpiOYjUNa1OsyBRwc9pr+zucdAF2FHSo+EdoT83Mbtg==", + "requires": { + "@storybook/csf": "^0.1.0", + "lodash": "^4.17.21", + "prop-types": "^15.7.2" + } + }, + "@leafygreen-ui/palette": { + "version": "4.0.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/palette/-/palette-4.0.4.tgz", + "integrity": "sha512-nuZy2RtKHAGpIKrDduqC8P8PvajJRT1hQURoisYMiB32NmEEHGEhtHw4MlS+Kv92HFA0jxgMdZUHKTXq83BhjA==" + }, + "@leafygreen-ui/popover": { + "version": "11.0.12", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/popover/-/popover-11.0.12.tgz", + "integrity": "sha512-zF8axGB+RhpoG0xgb4K/p8ydS5JAEXpwqdLrcrY9r7cAYzxX0F4mhIpYg+oyK2K5TIbgGR/fsFPbhKYsmreuMA==", + "requires": { + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/hooks": "^7.7.5", + "@leafygreen-ui/lib": "^10.4.0", + "@leafygreen-ui/portal": "^4.1.4", + "@leafygreen-ui/tokens": "^2.1.1", + "react-transition-group": "^4.4.1" + } + }, + "@leafygreen-ui/tokens": { + "version": "2.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tokens/-/tokens-2.1.1.tgz", + "integrity": "sha512-5mpyxRhp+8aY6eX6UYacDV6PLl3OieWG061ceAn2ThYaanIP64AMbodWifrF/IFMItJPFkwAtfPtJqugOFVb7Q==", + "requires": { + "@leafygreen-ui/palette": "^4.0.4" + } + }, + "@leafygreen-ui/typography": { + "version": "16.5.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-16.5.1.tgz", + "integrity": "sha512-5dentOt4LubXxmkwVVy6ZlUvGsebJsHhZZ9LAlplUz13VkyvS458Bhnog4cqNqvnJjdlWLdO+ZO0/JyYUIIuXw==", + "requires": { + "@leafygreen-ui/emotion": "^4.0.4", + "@leafygreen-ui/icon": "^11.17.0", + "@leafygreen-ui/lib": "^10.4.0", + "@leafygreen-ui/palette": "^4.0.4", + "@leafygreen-ui/polymorphic": "^1.3.2", + "@leafygreen-ui/tokens": "^2.1.1" + } + }, + "@storybook/csf": { + "version": "0.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@storybook/csf/-/csf-0.1.1.tgz", + "integrity": "sha512-4hE3AlNVxR60Wc5KSC68ASYzUobjPqtSKyhV6G+ge0FIXU55N5nTY7dXGRZHQGDBPq+XqchMkIdlkHPRs8nTHg==", + "requires": { + "type-fest": "^2.19.0" + } + }, + "type-fest": { + "version": "2.19.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==" + } } }, "@leafygreen-ui/search-input": { diff --git a/src/components/SearchResults/SearchResult.js b/src/components/SearchResults/SearchResult.js index 26a8b1875..faecfe468 100644 --- 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 index 6c476cf8d..647c53db6 100644 --- 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); }} /> + + + {searchResults?.length ? searchResults.length : '0'} RESULTS + + {!!searchFilter && ( + + {selectedCategory && ( + + {selectedCategory} + + + )} + {selectedVersion && {selectedVersion}} + + )} + ) : ( - Search results for "{searchTerm}" - )} - {!!searchFilter && ( - - {selectedCategory && ( - - {selectedCategory} - - + <> + Search results for "{searchTerm}" + {!!searchFilter && ( + + {selectedCategory && ( + + {selectedCategory} + + + )} + {selectedVersion && {selectedVersion}} + )} - {selectedVersion && {selectedVersion}} - + )}