diff --git a/src/components/SearchResults/SearchResult.js b/src/components/SearchResults/SearchResult.js index faecfe468..da661f973 100644 --- a/src/components/SearchResults/SearchResult.js +++ b/src/components/SearchResults/SearchResult.js @@ -10,16 +10,15 @@ 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 SEARCH_MATCH_STYLE = newSearchInput + ? `background-color: ${palette.green.light2} ; border-radius: 3px; padding-left: 2px; padding-right: 2px;` + : `background-color: ${palette.yellow.light2};`; const largeResultTitle = css` font-size: ${theme.size.default}; line-height: ${theme.size.medium}; - /* Only add bold on larger devices */ - @media ${theme.screenSize.smallAndUp} { - font-weight: 600; - } + font-weight: 600; `; // Truncates text to a maximum number of lines @@ -45,10 +44,21 @@ const LearnMoreLink = styled('a')` const SearchResultContainer = styled('div')` height: 100%; +`; + +const StyledResultTitle = styled('p')` + font-family: 'Euclid Circular A'; + ${newSearchInput ? `color: #016bf8;` : ``} + font-size: ${theme.fontSize.small}; + line-height: ${theme.size.medium}; + letter-spacing: 0.5px; + height: ${theme.size.medium}; + margin-bottom: ${theme.size.small}; + margin-top: 0; + ${truncate(1)}; + ${({ useLargeTitle }) => useLargeTitle && largeResultTitle}; @media ${theme.screenSize.upToSmall} { - display: flex; - flex-direction: column; - height: 100%; + ${largeResultTitle}; } position: relative; `; @@ -67,6 +77,9 @@ const SearchResultLink = styled('a')` transition: background-color 150ms ease-in; } } + :visited { + ${newSearchInput ? `${StyledResultTitle} {color: #5e0c9e;}` : ``} + } `; const StyledPreviewText = styled(Body)` @@ -78,21 +91,6 @@ const StyledPreviewText = styled(Body)` min-height: 20px; `; -const StyledResultTitle = styled('p')` - font-family: 'Euclid Circular A'; - font-size: ${theme.fontSize.small}; - line-height: ${theme.size.medium}; - letter-spacing: 0.5px; - height: ${theme.size.medium}; - margin-bottom: ${theme.size.small}; - margin-top: 0; - ${truncate(1)}; - ${({ useLargeTitle }) => useLargeTitle && largeResultTitle}; - @media ${theme.screenSize.upToSmall} { - ${largeResultTitle}; - } -`; - const StyledTag = styled(Tag)` ${newSearchInput ? searchTagStyleFeature : searchTagStyle} `; @@ -110,12 +108,23 @@ const highlightSearchTerm = (text, searchTerm) => (result) => `${result}` ); +const spanAllowedStyles = newSearchInput + ? { + 'background-color': [new RegExp(`^${palette.green.light2}$`, 'i')], + 'border-radius': [new RegExp(`^3px$`)], + 'padding-left': [new RegExp(`^2px$`)], + 'padding-right': [new RegExp(`^2px$`)], + } + : { 'background-color': [new RegExp(`^${palette.yellow.light2}$`, 'i')] }; + // since we are using dangerouslySetInnerHTML, this helper sanitizes input to be safe const sanitizePreviewHtml = (text) => sanitizeHtml(text, { allowedTags: ['span'], allowedAttributes: { span: ['style'] }, - allowedStyles: { span: { 'background-color': [new RegExp(`^${palette.yellow.light2}$`, 'i')] } }, + allowedStyles: { + span: spanAllowedStyles, + }, }); const SearchResult = React.memo( @@ -142,7 +151,7 @@ const SearchResult = React.memo( diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js index 647c53db6..656c57e80 100644 --- a/src/components/SearchResults/SearchResults.js +++ b/src/components/SearchResults/SearchResults.js @@ -132,15 +132,20 @@ const StyledSearchFilters = styled(SearchFilters)` `; const searchResultStyling = css` + ${newSearchInput + ? ` + box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1); + border-radius: 45px; + ` + : `box-shadow: 0 0 ${theme.size.tiny} 0 rgba(231, 238, 236, 0.4);`} background-color: #fff; - box-shadow: 0 0 ${theme.size.tiny} 0 rgba(231, 238, 236, 0.4); height: ${SEARCH_RESULT_HEIGHT}; position: relative; /* place-self adds both align-self and justify-self for flexbox */ place-self: center; width: 100%; > div { - padding: ${theme.size.medium}; + ${newSearchInput ? `padding: 20px; padding-left: 30px;` : `padding: ${theme.size.medium};`} } :hover, :focus { @@ -198,10 +203,11 @@ const StyledSearchResults = styled('div')` /* Create the opaque effect on hover by opaquing everything but a hovered result */ :hover { > ${StyledSearchResult} { - opacity: 0.2; - transition: opacity 150ms ease-in; + ${!newSearchInput && `opacity: 0.2; transition: opacity 150ms ease-in;`} + :hover { opacity: 1; + ${newSearchInput && `box-shadow: 0px 0px 5px 1px rgba(58, 63, 60, 0.15);`} } } } @@ -311,7 +317,7 @@ const SearchResults = () => { diff --git a/tests/unit/__snapshots__/SearchResults.test.js.snap b/tests/unit/__snapshots__/SearchResults.test.js.snap index d002064c2..c7d6e2b63 100644 --- a/tests/unit/__snapshots__/SearchResults.test.js.snap +++ b/tests/unit/__snapshots__/SearchResults.test.js.snap @@ -230,8 +230,8 @@ exports[`Search Results Page considers a given search filter query param and dis -webkit-text-decoration: none; text-decoration: none; border-radius: 24px; - background-color: #fff; box-shadow: 0 0 4px 0 rgba(231, 238, 236, 0.4); + background-color: #fff; height: 152px; position: relative; place-self: center; @@ -280,20 +280,6 @@ exports[`Search Results Page considers a given search filter query param and dis .emotion-23 { height: 100%; - position: relative; -} - -@media only screen and (max-width: 480px) { - .emotion-23 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - height: 100%; - } } .emotion-25 { @@ -310,24 +296,15 @@ exports[`Search Results Page considers a given search filter query param and dis overflow: hidden; font-size: 16px; line-height: 24px; -} - -@media not all and (max-width: 480px) { - .emotion-25 { - font-weight: 600; - } + font-weight: 600; + position: relative; } @media only screen and (max-width: 480px) { .emotion-25 { font-size: 16px; line-height: 24px; - } - - @media not all and (max-width: 480px) { - .emotion-25 { - font-weight: 600; - } + font-weight: 600; } } @@ -2374,8 +2351,8 @@ exports[`Search Results Page renders loading images before returning no results } .emotion-14 { - background-color: #fff; box-shadow: 0 0 4px 0 rgba(231, 238, 236, 0.4); + background-color: #fff; height: 152px; position: relative; place-self: center; @@ -3162,8 +3139,8 @@ exports[`Search Results Page renders loading images before returning nonempty re } .emotion-14 { - background-color: #fff; box-shadow: 0 0 4px 0 rgba(231, 238, 236, 0.4); + background-color: #fff; height: 152px; position: relative; place-self: center; @@ -3955,8 +3932,8 @@ exports[`Search Results Page renders results from a given search term query para -webkit-text-decoration: none; text-decoration: none; border-radius: 24px; - background-color: #fff; box-shadow: 0 0 4px 0 rgba(231, 238, 236, 0.4); + background-color: #fff; height: 152px; position: relative; place-self: center; @@ -4005,20 +3982,6 @@ exports[`Search Results Page renders results from a given search term query para .emotion-17 { height: 100%; - position: relative; -} - -@media only screen and (max-width: 480px) { - .emotion-17 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - height: 100%; - } } .emotion-19 { @@ -4035,24 +3998,15 @@ exports[`Search Results Page renders results from a given search term query para overflow: hidden; font-size: 16px; line-height: 24px; -} - -@media not all and (max-width: 480px) { - .emotion-19 { - font-weight: 600; - } + font-weight: 600; + position: relative; } @media only screen and (max-width: 480px) { .emotion-19 { font-size: 16px; line-height: 24px; - } - - @media not all and (max-width: 480px) { - .emotion-19 { - font-weight: 600; - } + font-weight: 600; } }