Merge pull request #376 from NYPL/qa

ES Search bar updates
NYPL · Oct 23, 2024 · d63f4b0 · d63f4b0
2 parents 9e2f30f + 5d4c6bb
commit d63f4b0
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 95 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 1.3.5 2024-10-23
+
+### Updated
+
+- Create banner container in Layout component and add EDS link to that container (SCC-4260)
+- Sentence case and rearrange search options (SCC-4260)
+- Call number search scope to search dropdown options [(SCC-4260)](https://newyorkpubliclibrary.atlassian.net/browse/SCC-4260)
+- Search tip per search scope [(SCC-4263)](https://newyorkpubliclibrary.atlassian.net/browse/SCC-4263)
+
+### Fixed
 ### [1.3.4] Hotfix 2024-10-17
 
 - Fix 500 error caused by assumption in buildHoldingDetails that location field will be present in the bib holdings returned from discovery (SCC-4314)
@@ -51,12 +61,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update error message in Item Filter Year to include new error message prefix from the DS.
 - Integrate view_all query param on client side and remove batched fetch (SCC-4287)
 - Replaced travis with github actions (SCC-4218)
-- Sentence case and rearrange search options (SCC-4260)
-
-Added the following, but commented out for later release:
-
-- Call number search scope to search dropdown options [(SCC-4260)](https://newyorkpubliclibrary.atlassian.net/browse/SCC-4260)
-- Search tip per search scope [(SCC-4263)](https://newyorkpubliclibrary.atlassian.net/browse/SCC-4263)
 
 ## [1.2.4] 2024-08-29
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/EDSBanner.tsx b/src/components/EDSBanner.tsx
@@ -0,0 +1,34 @@
+import { Banner } from "@nypl/design-system-react-components"
+import ExternalLink from "./Links/ExternalLink/ExternalLink"
+import React from "react"
+
+import styles from "../../styles/components/Layout.module.scss"
+
+/**
+ * Renders EDS announcement in a DS banner.
+ */
+const EDSBanner = () => {
+  return (
+    <Banner
+      className={styles.banner}
+      type="informative"
+      content={
+        <>
+          <span style={{ color: "var(--nypl-colors-ui-success-primary)" }}>
+            New!
+          </span>{" "}
+          Try our{" "}
+          <ExternalLink href="https://discovery.ebsco.com/c/tvrejk?acr_values=guest">
+            <b style={{ color: "var(--nypl-colors-ui-link-primary" }}>
+              Article Search
+            </b>
+          </ExternalLink>{" "}
+          to discover online journals, books, and more from home with your
+          library card.
+        </>
+      }
+    />
+  )
+}
+
+export default EDSBanner
diff --git a/src/components/EDSLink.tsx b/src/components/EDSLink.tsx
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
@@ -1,5 +1,6 @@
 import { type ReactElement, type PropsWithChildren } from "react"
 import {
+  Flex,
   Box,
   TemplateAppContainer,
   Breadcrumbs,
@@ -15,6 +16,7 @@ import SearchForm from "../SearchForm/SearchForm"
 import { BASE_URL } from "../../config/constants"
 import FeedbackForm from "../FeedbackForm/FeedbackForm"
 import type { Aggregation } from "../../types/filterTypes"
+import EDSBanner from "../EDSBanner"
 
 interface LayoutProps {
   sidebar?: ReactElement
@@ -78,15 +80,23 @@ const Layout = ({
                 />
                 {showSearch && <SearchForm aggregations={searchAggregations} />}
               </div>
-              {showNotification && bannerNotification && (
-                <Box sx={{ display: "flex", justifyContent: "center" }}>
+              <Flex
+                gap="l"
+                align="center"
+                direction="column"
+                sx={{
+                  padding: "2em 2em .5em 2em",
+                }}
+              >
+                <EDSBanner />
+                {showNotification && bannerNotification && (
                   <Banner
-                    sx={{ maxWidth: "1248px", margin: "2em 2em .5em 2em" }}
+                    className={styles.banner}
                     heading="New Service Announcement"
                     content={bannerNotification}
                   />
-                </Box>
-              )}
+                )}
+              </Flex>
             </>
           )
         }

diff --git a/src/components/SearchForm/SearchForm.test.tsx b/src/components/SearchForm/SearchForm.test.tsx
@@ -50,18 +50,17 @@ describe("SearchForm", () => {
     const input = screen.getByDisplayValue("spaghetti")
     expect(input).toBeTruthy()
   })
-  // SEARCH TIP CODE
-  // describe("search scope options", () => {
-  //   it("updates the search tip when search scope is updated", async () => {
-  //     render(<SearchForm aggregations={normalAggs} />)
-  //     const searchScopeSelect = screen.getByLabelText("Select a category")
-  //     await userEvent.selectOptions(searchScopeSelect, "journal_title")
-  //     let searchTip = screen.getByText(
-  //       SEARCH_FORM_OPTIONS.journal_title.searchTip
-  //     )
-  //     await userEvent.selectOptions(searchScopeSelect, "all")
-  //     searchTip = screen.getByText(SEARCH_FORM_OPTIONS.all.searchTip)
-  //     expect(searchTip).toBeInTheDocument()
-  //   })
-  // })
+  describe("search scope options", () => {
+    it("updates the search tip when search scope is updated", async () => {
+      render(<SearchForm aggregations={normalAggs} />)
+      const searchScopeSelect = screen.getByLabelText("Select a category")
+      await userEvent.selectOptions(searchScopeSelect, "journal_title")
+      let searchTip = screen.getByText(
+        SEARCH_FORM_OPTIONS.journal_title.searchTip
+      )
+      await userEvent.selectOptions(searchScopeSelect, "all")
+      searchTip = screen.getByText(SEARCH_FORM_OPTIONS.all.searchTip)
+      expect(searchTip).toBeInTheDocument()
+    })
+  })
 })
diff --git a/src/components/SearchForm/SearchForm.tsx b/src/components/SearchForm/SearchForm.tsx
@@ -15,7 +15,6 @@ import {
   searchFormSelectOptions,
 } from "../../utils/searchUtils"
 import { BASE_URL, PATHS, SEARCH_FORM_OPTIONS } from "../../config/constants"
-import EDSLink from "../EDSLink"
 import useLoading from "../../hooks/useLoading"
 import RefineSearch from "../RefineSearch/RefineSearch"
 import type { Aggregation } from "../../types/filterTypes"
@@ -36,9 +35,8 @@ const SearchForm = ({ aggregations }: { aggregations?: Aggregation[] }) => {
   const [appliedFilters, setAppliedFilters] = useState(
     collapseMultiValueQueryParams(router.query)
   )
-  // SEARCH TIP CODE
-  // const searchTip = SEARCH_FORM_OPTIONS[searchScope].searchTip
-  // const placeholder = SEARCH_FORM_OPTIONS[searchScope].placeholder
+  const searchTip = SEARCH_FORM_OPTIONS[searchScope].searchTip
+  const placeholder = SEARCH_FORM_OPTIONS[searchScope].placeholder
 
   const isLoading = useLoading()
 
@@ -82,14 +80,13 @@ const SearchForm = ({ aggregations }: { aggregations?: Aggregation[] }) => {
   return (
     <div className={styles.searchContainer}>
       <div className={styles.searchContainerInner}>
-        {/* SEARCH TIP CODE
         <Text size="body2" className={styles.searchTip}>
           <Icon size="medium" name="errorOutline" />
           <Box as="span" className={styles.searchTipText}>
-            <span>{"Search tip: "}</span>
+            <span className={styles.searchTipTitle}>{"Search tip: "}</span>
             {searchTip}
           </Box>
-        </Text> */}
+        </Text>
         <SearchBar
           id="mainContent"
           action={`${BASE_URL}/search`}
@@ -110,11 +107,8 @@ const SearchForm = ({ aggregations }: { aggregations?: Aggregation[] }) => {
             isClearableCallback: () => setSearchTerm(""),
             value: searchTerm,
             name: "q",
-            // SEARCH TIP CODE
-            //labelText: searchTip,
-            //placeholder
-            labelText: "Keyword, title, journal title, or author/contributor",
-            placeholder: "Keyword, title, journal title, or author/contributor",
+            labelText: searchTip,
+            placeholder,
           }}
           sx={{
             ".chakra-select__icon-wrapper": { "z-index": "999 !important" },
@@ -137,7 +131,6 @@ const SearchForm = ({ aggregations }: { aggregations?: Aggregation[] }) => {
             />
           )}
         </Box>
-        <EDSLink />
       </div>
     </div>
   )

diff --git a/src/config/constants.ts b/src/config/constants.ts
@@ -77,47 +77,45 @@ export const ERROR_MESSAGES = {
   ITEM_REFETCH_ABORT_REASON: "New Bib item fetch initiated",
 }
 
+const useQuotes = "Use quotation marks to search for an exact phrase."
+const example = "Example: "
+
 export const SEARCH_FORM_OPTIONS = {
   all: {
-    text: "All fields",
-    searchTip:
-      "Enter one or more keywords, or use quotes to search for an exact phrase.",
-    placeholder: 'ex. climate change or "The New York Times"',
+    text: "Keyword",
+    searchTip: `Enter one or more keywords. ${useQuotes}`,
+    placeholder: `${example} Brooklyn Bridge or “New York City”`,
   },
   title: {
     text: "Title",
-    searchTip: "Enter a title, or use quotes to search for an exact phrase.",
-    placeholder: 'ex. David Copperfield or "The Jewish Press That Was"',
-  },
-  journal_title: {
-    text: "Journal title",
-    searchTip:
-      "Enter a journal or serial title, or use quotes to search for an exact phrase.",
-    placeholder:
-      'ex. The New York Times or "The Journal of Clinical Investigation"',
+    searchTip: `Enter a full title or part of a title. ${useQuotes}`,
+    placeholder: `${example} Middlemarch or “A Chorus Line”`,
   },
   contributor: {
     text: "Author/contributor",
     searchTip:
-      "Enter the name of an author, contributor, or organization. Use Last Name, First Name for more accurate results.",
-    placeholder: "ex. Dickens, Charles or American Law Association",
+      "Enter the name of an author, contributor, or organization. Use Last Name, First Name for more precise results.",
+    placeholder: `${example} Hurston, Zora Neale or New York City Ballet`,
+  },
+  journal_title: {
+    text: "Journal title",
+    searchTip: `Enter a journal, newspaper, or other serial title. ${useQuotes}`,
+    placeholder: `${example} Amsterdam News or “Paris Review”`,
+  },
+  callnumber: {
+    text: "Call number",
+    searchTip: "Enter a call number or the beginning of a call number.",
+    placeholder: `${example} JFD 93-1962 or "**P (Ms. Heb"."`,
   },
-  // SEARCH TIP CODE
-  // callnumber: {
-  //   text: "Call number",
-  //   searchTip:
-  //     "Enter a call number, or the first few letters and numbers of a call number. ",
-  //   placeholder: "ex. JFD 99-6057 or *ZAN-3174",
-  // },
   standard_number: {
-    text: "Standard number",
+    text: "Unique identifier",
     searchTip:
-      "Enter a control number or identifier. Examples include ISSN / ISBN / OCLC / LCCN numbers, barcodes, etc.",
-    placeholder: "ex. 1558584536 or 95008433",
+      "Enter a control number or identifier (ISBN, ISSN, LCCN, OCLC number, barcode, etc.).",
+    placeholder: `${example} 9780889229600 or 82048999`,
   },
   subject: {
     text: "Subject",
-    searchTip: "Enter a subject name or phrase. Learn more about searching.",
-    placeholder: "ex. ornithology or Greek architecture",
+    searchTip: "Enter a subject keyword or phrase.",
+    placeholder: `${example} Ornithology or Greek Architecture`,
   },
 }
diff --git a/styles/components/Layout.module.scss b/styles/components/Layout.module.scss
@@ -9,3 +9,7 @@
     color: var(--nypl-colors-ui-white);
   }
 }
+
+.banner {
+  max-width: 1248px;
+}
diff --git a/styles/components/Search.module.scss b/styles/components/Search.module.scss
@@ -24,9 +24,8 @@
 .searchTip {
   display: flex;
   align-items: flex-start;
-  span {
+  .searchTipTitle {
     font-weight: bold;
-    text-wrap: nowrap;
   }
   gap: var(--nypl-space-xxs);
   svg {
@@ -39,8 +38,6 @@
   flex-direction: column;
   justify-content: space-between;
   margin-top: var(--nypl-space-xs);
-  margin-bottom: var(--nypl-space-s);
-
   @media screen and (min-width: 600px) {
     flex-direction: row-reverse;
   }