Search Results page updates (#34498)

components/rest/RestOperation.tsx

@@ -7,12 +7,13 @@ import { LinkIconHeading } from 'components/article/LinkIconHeading'
 import { Link } from 'components/Link'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { RestPreviewNotice } from './RestPreviewNotice'
-import styles from './RestOperation.module.scss'
 import { ParameterTable } from 'components/parameter-table/ParameterTable'
 import { RestCodeSamples } from './RestCodeSamples'
 import { RestStatusCodes } from './RestStatusCodes'
 import { Operation } from './types'
 
+import styles from './RestOperation.module.scss'
+
 type Props = {
   operation: Operation
 }

components/search/SearchResults.module.scss

@@ -0,0 +1,8 @@
+.search_result {
+  mark {
+    background-color: transparent;
+    font-weight: bold;
+  }
+
+  word-wrap: break-word;
+}

components/search/SearchResults.tsx

@@ -1,6 +1,7 @@
 import { Box, Pagination, Text } from '@primer/react'
 import { SearchIcon } from '@primer/octicons-react'
 import { useRouter } from 'next/router'
+import cx from 'classnames'
 
 import type { SearchResultsT, SearchResultHitT } from './types'
 import { useTranslation } from 'components/hooks/useTranslation'
@@ -8,6 +9,8 @@ import { Link } from 'components/Link'
 import { useQuery } from 'components/hooks/useQuery'
 import { sendEvent, EventType } from 'components/lib/events'
 
+import styles from './SearchResults.module.scss'
+
 type Props = {
   results: SearchResultsT
   query: string
@@ -22,8 +25,8 @@ export function SearchResults({ results, query }: Props) {
     <div>
       <Text>
         {results.meta.found.value === 1
-          ? t('one_result_found')
-          : t('found_results').replace('{n}', results.meta.found.value.toLocaleString())}
+          ? t('one_result')
+          : t('n_results').replace('{n}', results.meta.found.value.toLocaleString())}
       </Text>
       <br />
       <SearchResultHits hits={results.hits} query={query} />
@@ -57,7 +60,7 @@ function NoSearchResults() {
     <div className="d-flex flex-items-center flex-column my-6 border rounded-2">
       <div className="d-flex flex-items-center flex-column p-4">
         <SearchIcon size={24} />
-        <Text className="f2 mt-3">{t('found_results').replace('{n}', 0)}</Text>
+        <Text className="f2 mt-3">{t('n_results').replace('{n}', 0)}</Text>
       </div>
     </div>
   )
@@ -80,7 +83,7 @@ function SearchResultHit({
     hit.highlights.title && hit.highlights.title.length > 0 ? hit.highlights.title[0] : hit.title
 
   return (
-    <div className="my-6" data-testid="search-result">
+    <div className={cx('my-6', styles.search_result)} data-testid="search-result">
       <p className="text-normal f5 color-fg-muted" style={{ wordSpacing: 2 }}>
         {hit.breadcrumbs.length > 1 && (
           <>

data/ui.yml

@@ -29,7 +29,6 @@ release_notes:
 search:
   need_help: Need help?
   placeholder: Search GitHub Docs
-  no_results: No results found
   search_results_for: Search results for
   no_content: No content
   matches_found: Results found
@@ -37,8 +36,8 @@ search:
   search_error: An error occurred trying to perform the search.
   description: Enter a search term to find it in the GitHub Documentation.
   label: Search GitHub Docs
-  found_results: Found {n} results
-  one_result_found: Found 1 result
+  n_results: '{n} results'
+  one_result: 1 result
 homepage:
   explore_by_product: Explore by product
   version_picker: Version

tests/fixtures/data/ui.yml

@@ -29,7 +29,6 @@ release_notes:
 search:
   need_help: Need help?
   placeholder: Search GitHub Docs
-  no_results: No results found
   search_results_for: Search results for
   no_content: No content
   matches_found: Results found
@@ -37,8 +36,8 @@ search:
   search_error: An error occurred trying to perform the search.
   description: Enter a search term to find it in the GitHub Documentation.
   label: Search GitHub Docs
-  found_results: Found {n} results
-  one_result_found: Found 1 result
+  n_results: '{n} results'
+  one_result: 1 result
 homepage:
   explore_by_product: Explore by product
   version_picker: Version