Dop 3789

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) => `<span style="${SEARCH_MATCH_STYLE}">${result}</span>`
   );
 
+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(
         <SearchResultContainer>
           <StyledResultTitle
             dangerouslySetInnerHTML={{
-              __html: sanitizePreviewHtml(highlightedTitle),
+              __html: sanitizePreviewHtml(newSearchInput ? title : highlightedTitle),
             }}
             useLargeTitle={useLargeTitle}
           />

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 = () => {
       <Global
         styles={css`
           body {
-            background-color: #f9fbfa !important;
+            ${newSearchInput ? `background-color: #ffffff !important;` : ` background-color: #f9fbfa !important;`}
           }
         `}
       />

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;
   }
 }