diff --git a/CHANGELOG b/CHANGELOG index 4c12f9202..635dc2c4f 100644 --- 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 index 27bf0b5ab..fdf1c279c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "research-catalog", - "version": "1.2.1", + "version": "1.3.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "research-catalog", - "version": "1.2.1", + "version": "1.3.2", "dependencies": { "@nypl/design-system-react-components": "3.4.0", "@nypl/nypl-data-api-client": "1.0.5", diff --git a/src/components/EDSBanner.tsx b/src/components/EDSBanner.tsx new file mode 100644 index 000000000..8f41e1efe --- /dev/null +++ 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 ( + + + New! + {" "} + Try our{" "} + + + Article Search + + {" "} + 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 deleted file mode 100644 index 9df6530ba..000000000 --- a/src/components/EDSLink.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Text } from "@nypl/design-system-react-components" -import ExternalLink from "./Links/ExternalLink/ExternalLink" -import React from "react" - -/** - * Renders an EDS link. - */ -const EDSLink = () => { - return ( - - - New! - {" "} - Try our{" "} - - Article Search - {" "} - to discover online journals, books, and more from home with your library - card. - - ) -} - -export default EDSLink diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index 03d1f0bf8..06dc44e35 100644 --- 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 && } - {showNotification && bannerNotification && ( - + + + {showNotification && bannerNotification && ( - - )} + )} + ) } diff --git a/src/components/SearchForm/SearchForm.test.tsx b/src/components/SearchForm/SearchForm.test.tsx index f4e521ff9..f6e05e9ec 100644 --- 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() - // 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() + 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 index fffe25c30..081325d2b 100644 --- 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 (
- {/* SEARCH TIP CODE - {"Search tip: "} + {"Search tip: "} {searchTip} - */} + { 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[] }) => { /> )} -
) diff --git a/src/config/constants.ts b/src/config/constants.ts index f14f2fe27..8d4b8638b 100644 --- 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 index fd938baab..2dc289e06 100644 --- 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 index 48ac87eaf..879373a4c 100644 --- 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; }