+ {/* SEARCH TIP CODE
+
+
+
+ {"Search tip: "}
+ {searchTip}
+
+ */}
{
onChange: (e) => handleChange(e, setSearchScope),
labelText: "Select a category",
name: "search_scope",
- optionsData: [
- { text: "All fields", value: "all" },
- { text: "Title", value: "title" },
- { text: "Journal Title", value: "journal_title" },
- { text: "Author/Contributor", value: "contributor" },
- { text: "Standard Numbers", value: "standard_number" },
- { text: "Subject", value: "subject" },
- ],
+ optionsData: searchFormSelectOptions,
}}
textInputProps={{
isClearable: true,
onChange: (e) => handleChange(e, setSearchTerm),
isClearableCallback: () => setSearchTerm(""),
value: searchTerm,
- labelText:
- "Search by keyword, title, journal title, or author/contributor",
name: "q",
+ // SEARCH TIP CODE
+ //labelText: searchTip,
+ //placeholder
+ labelText: "Keyword, title, journal title, or author/contributor",
placeholder: "Keyword, title, journal title, or author/contributor",
}}
sx={{
diff --git a/src/components/SearchResults/ElectronicResourcesLink.test.tsx b/src/components/SearchResults/ElectronicResourcesLink.test.tsx
index 3f69a5141..4f29ebda9 100644
--- a/src/components/SearchResults/ElectronicResourcesLink.test.tsx
+++ b/src/components/SearchResults/ElectronicResourcesLink.test.tsx
@@ -20,7 +20,7 @@ describe("Electronic Resources Link with a single resource", () => {
})
it("renders the correct heading", async () => {
- expect(screen.getByText("Available Online")).toBeInTheDocument()
+ expect(screen.getByText("Available online")).toBeInTheDocument()
})
it("renders the correct link with the label as the text when only one electronic resource is available", async () => {
const link = screen.getByRole("link", {
diff --git a/src/components/SearchResults/ElectronicResourcesLink.tsx b/src/components/SearchResults/ElectronicResourcesLink.tsx
index 2370378b3..e99714455 100644
--- a/src/components/SearchResults/ElectronicResourcesLink.tsx
+++ b/src/components/SearchResults/ElectronicResourcesLink.tsx
@@ -30,7 +30,7 @@ const ElectronicResourcesLink = ({
fontSize={{ base: "mobile.body.body1", md: "desktop.body.body1" }}
fontWeight="bold"
>
- Available Online
+ Available online
{electronicResources.length === 1 ? (
{
screen.getByText("Material")
screen.getByText("New York, Abelard-Schuman [1955]")
screen.getByText("1955")
- screen.getByText("2 Items")
+ screen.getByText("2 items")
})
})
@@ -41,7 +41,7 @@ describe("SearchResult with Many Physical Items", () => {
it("renders a link to the bib page with the correct text when there are more than the set limit of items per search result", async () => {
const resultTitleLink = screen.getByRole("link", {
- name: "View All 4 Items",
+ name: "View all 4 items",
})
expect(resultTitleLink).toHaveAttribute(
"href",
@@ -54,6 +54,6 @@ describe("SearchResult with Electronic Resources", () => {
it("renders the correct item message for bib with electronic resources", async () => {
const bib = new SearchResultsBib(searchResultElectronicResources)
render()
- screen.getByText("1 Resource")
+ screen.getByText("1 resource")
})
})
diff --git a/src/components/SearchResults/SearchResult.tsx b/src/components/SearchResults/SearchResult.tsx
index 03cfd23c4..e90da6387 100644
--- a/src/components/SearchResults/SearchResult.tsx
+++ b/src/components/SearchResults/SearchResult.tsx
@@ -34,7 +34,7 @@ const SearchResult = ({ bib }: SearchResultProps) => {
size="heading5"
sx={{ a: { textDecoration: "none" } }}
>
- {bib.title}
+ {bib.titleDisplay}
{
key={`search-results-item-${itemTableData.items[0].id}`}
/>
))}
- {bib.showViewAllItemsLink && (
+ {bib.showViewAllItemsLink() && (
{
fontWeight="medium"
type="standalone"
>
- {`View All ${bib.getNumItemsMessage()} `}
+ {`View all ${bib.getNumItemsMessage()} `}
)}
diff --git a/src/config/constants.ts b/src/config/constants.ts
index 2c82115e0..f14f2fe27 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -6,6 +6,7 @@ export const RESULTS_PER_PAGE = 50
export const DRB_RESULTS_PER_PAGE = 3
export const ITEMS_PER_SEARCH_RESULT = 3
export const ITEM_PAGINATION_BATCH_SIZE = 20
+// TODO: Remove this when view_all endpoint in discovery supports query params
export const ITEM_VIEW_ALL_BATCH_SIZE = 150
export const ELECTRONIC_RESOURCES_PER_BIB_PAGE = 3
export const SHEP_HTTP_TIMEOUT = 4000
@@ -32,6 +33,13 @@ export const DRB_API_SEARCH_ROUTE = "/api/drb"
// Query params
export const SOURCE_PARAM = "?source=catalog"
+export const ITEM_FILTER_PARAMS = [
+ "item_location",
+ "item_format",
+ "item_status",
+ "item_date",
+]
+
// External URLs
export const DRB_BASE_URL =
appConfig.apiEndpoints.drbFrontEnd[appConfig.environment]
@@ -68,3 +76,48 @@ export const DAYS = {
export const ERROR_MESSAGES = {
ITEM_REFETCH_ABORT_REASON: "New Bib item fetch initiated",
}
+
+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"',
+ },
+ 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"',
+ },
+ 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",
+ },
+ // 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",
+ searchTip:
+ "Enter a control number or identifier. Examples include ISSN / ISBN / OCLC / LCCN numbers, barcodes, etc.",
+ placeholder: "ex. 1558584536 or 95008433",
+ },
+ subject: {
+ text: "Subject",
+ searchTip: "Enter a subject name or phrase. Learn more about searching.",
+ placeholder: "ex. ornithology or Greek architecture",
+ },
+}
diff --git a/src/models/Bib.ts b/src/models/Bib.ts
index fe91142eb..82bae98d8 100644
--- a/src/models/Bib.ts
+++ b/src/models/Bib.ts
@@ -1,4 +1,8 @@
-import type { DiscoveryBibResult, ElectronicResource } from "../types/bibTypes"
+import type {
+ DiscoveryBibResult,
+ ElectronicResource,
+ SubjectHeading,
+} from "../types/bibTypes"
import type { JSONLDValue } from "../types/itemTypes"
import type { Aggregation } from "../types/filterTypes"
import Item from "../models/Item"
@@ -16,6 +20,7 @@ import ItemTableData from "./ItemTableData"
export default class Bib {
id: string
title: string
+ titleDisplay: string
electronicResources?: ElectronicResource[]
numPhysicalItems: number
numItemsMatched: number
@@ -23,10 +28,13 @@ export default class Bib {
issuance?: JSONLDValue[]
items?: Item[]
itemAggregations?: Aggregation[]
+ hasItemDates?: boolean
+ subjectHeadings?: SubjectHeading[]
constructor(result: DiscoveryBibResult) {
this.id = result["@id"] ? result["@id"].substring(4) : ""
- this.title = this.getTitleFromResult(result)
+ this.title = result.title[0] || ""
+ this.titleDisplay = this.getTitleDisplayFromResult(result)
this.electronicResources = result.electronicResources || null
this.numPhysicalItems = result.numItemsTotal || 0
this.numItemsMatched = result.numItemsMatched || 0
@@ -35,6 +43,8 @@ export default class Bib {
this.issuance = (result.issuance?.length && result.issuance) || null
this.items = this.getItemsFromResult(result)
this.itemAggregations = result.itemAggregations || null
+ this.hasItemDates = result.hasItemDates || false
+ this.subjectHeadings = result.subjectHeadings || null
}
get url() {
@@ -45,12 +55,6 @@ export default class Bib {
return this.electronicResources?.length || 0
}
- get numItems() {
- return this.hasPhysicalItems
- ? this.numPhysicalItems
- : this.numElectronicResources
- }
-
get hasPhysicalItems() {
return this.numPhysicalItems > 0
}
@@ -76,10 +80,6 @@ export default class Bib {
)
}
- get showViewAllItemsLink() {
- return this.numItemsMatched > ITEM_PAGINATION_BATCH_SIZE
- }
-
get resourceType() {
return this.hasPhysicalItems ? "Item" : "Resource"
}
@@ -92,11 +92,19 @@ export default class Bib {
)
}
+ numItems(filtersAreApplied = false) {
+ return filtersAreApplied ? this.numItemsMatched : this.numPhysicalItems
+ }
+
+ showViewAllItemsLink(filtersAreApplied = false) {
+ return this.numItems(filtersAreApplied) > ITEM_PAGINATION_BATCH_SIZE
+ }
+
getNumItemsMessage(filtersAreApplied = false) {
- const totalItems = filtersAreApplied ? this.numItemsMatched : this.numItems
- return `${totalItems} ${filtersAreApplied ? "matching " : ""}${
- this.resourceType
- }${totalItems !== 1 ? "s" : ""}`
+ const totalItems = this.numItems(filtersAreApplied)
+ return `${totalItems} ${
+ filtersAreApplied ? "matching " : ""
+ }${this.resourceType.toLowerCase()}${totalItems !== 1 ? "s" : ""}`
}
getItemsViewAllLoadingMessage(filtersAreApplied = false) {
@@ -106,7 +114,7 @@ export default class Bib {
} items. This may take a few moments...`
}
- getTitleFromResult(result: DiscoveryBibResult) {
+ getTitleDisplayFromResult(result: DiscoveryBibResult) {
if (!result.titleDisplay || !result.titleDisplay.length) {
const author =
result.creatorLiteral && result.creatorLiteral.length
diff --git a/src/models/BibDetails.ts b/src/models/BibDetails.ts
index a5c6e5226..8c4975d9c 100644
--- a/src/models/BibDetails.ts
+++ b/src/models/BibDetails.ts
@@ -9,6 +9,7 @@ import type {
AnnotatedMarc,
AnyBibDetail,
} from "../types/bibDetailsTypes"
+import { convertToSentenceCase } from "../utils/appUtils"
export default class BibDetails {
bib: DiscoveryBibResult
@@ -30,7 +31,9 @@ export default class BibDetails {
this.supplementaryContent = this.buildSupplementaryContent()
this.groupedNotes = this.buildGroupedNotes()
this.extent = this.buildExtent()
- this.subjectHeadings = this.buildSubjectHeadings()
+ // If we can't retreive subject headings from the SHEP API, we'll use the subjectLiteral
+ this.subjectHeadings =
+ this.buildSubjectHeadings() || this.buildSubjectLiterals()
// these are the actual arrays of details that will be displayed
this.annotatedMarcDetails = this.buildAnnotatedMarcDetails(
annotatedMarc?.fields
@@ -65,8 +68,8 @@ export default class BibDetails {
return [
{ label: "Location", field: "location" },
{ label: "Format", field: "format" },
- { label: "Call Number", field: "shelfMark" },
- { label: "Library Has", field: "holdingStatement" },
+ { label: "Call number", field: "shelfMark" },
+ { label: "Library has", field: "holdingStatement" },
{ label: "Notes", field: "notes" },
]
.map((fieldMapping) => this.buildHoldingDetail(holding, fieldMapping))
@@ -78,9 +81,9 @@ export default class BibDetails {
buildTopDetails(): AnyBibDetail[] {
return [
{ field: "titleDisplay", label: "Title" },
- { field: "publicationStatement", label: "Published By" },
+ { field: "publicationStatement", label: "Published by" },
// external link
- { field: "supplementaryContent", label: "Supplementary Content" },
+ { field: "supplementaryContent", label: "Supplementary content" },
// internal link
{ field: "creatorLiteral", label: "Author" },
]
@@ -95,25 +98,25 @@ export default class BibDetails {
}
buildBottomDetails(): AnyBibDetail[] {
const resourceFields = [
- { field: "contributorLiteral", label: "Additional Authors" },
- { field: "partOf", label: "Found In" },
- { field: "serialPublicationDates", label: "Publication Date" },
+ { field: "contributorLiteral", label: "Additional authors" },
+ { field: "partOf", label: "Found in" },
+ { field: "serialPublicationDates", label: "Publication date" },
{ field: "extent", label: "Description" },
{ field: "description", label: "Summary" },
{ field: "donor", label: "Donor/Sponsor" },
- { field: "seriesStatement", label: "Series Statement" },
- { field: "uniformTitle", label: "Uniform Title" },
- { field: "titleAlt", label: "Alternative Title" },
- { field: "formerTitle", label: "Former Title" },
+ { field: "seriesStatement", label: "Series statement" },
+ { field: "uniformTitle", label: "Uniform title" },
+ { field: "titleAlt", label: "Alternative title" },
+ { field: "formerTitle", label: "Former title" },
{ field: "subjectLiteral", label: "Subject" },
{ field: "genreForm", label: "Genre/Form" },
{ field: "tableOfContents", label: "Contents" },
- { field: "shelfMark", label: "Call Number" },
+ { field: "shelfMark", label: "Call number" },
{ field: "isbn", label: "ISBN" },
{ field: "issn", label: "ISSN" },
{ field: "oclc", label: "OCLC" },
{ field: "lccn", label: "LCCN" },
- { field: "owner", label: "Owning Institution" },
+ { field: "owner", label: "Owning institution" },
]
.map((fieldMapping: FieldMapping): AnyBibDetail => {
let detail: AnyBibDetail
@@ -124,7 +127,7 @@ export default class BibDetails {
else if (fieldMapping.field === "extent") detail = this.extent
else if (fieldMapping.field === "owner")
detail = this.bib.owner && {
- label: fieldMapping.label,
+ label: convertToSentenceCase(fieldMapping.label),
value: [this.bib.owner?.prefLabel],
}
else detail = this.buildStandardDetail(fieldMapping)
@@ -163,17 +166,27 @@ export default class BibDetails {
// Getting the first object in the array.
[holding[fieldMapping.field][0].label]
: holding[fieldMapping.field]
- return this.buildDetail(fieldMapping.label, bibFieldValue)
+ return this.buildDetail(
+ convertToSentenceCase(fieldMapping.label),
+ bibFieldValue
+ )
}
buildStandardDetail(fieldMapping: FieldMapping) {
const bibFieldValue = this.bib[fieldMapping.field]
- return this.buildDetail(fieldMapping.label, bibFieldValue)
+ return this.buildDetail(
+ convertToSentenceCase(fieldMapping.label),
+ bibFieldValue
+ )
}
buildDetail(label: string, value: string[]): BibDetail {
if (!value?.length) return null
- return { label, value }
+
+ return {
+ label: convertToSentenceCase(label),
+ value,
+ }
}
buildInternalLinkedDetail(fieldMapping: {
@@ -184,7 +197,7 @@ export default class BibDetails {
if (!value?.length) return null
return {
link: "internal",
- label: fieldMapping.label,
+ label: convertToSentenceCase(fieldMapping.label),
value: value.map((v: string) => {
const internalUrl = `/search?filters[${
fieldMapping.field
@@ -196,7 +209,11 @@ export default class BibDetails {
buildExternalLinkedDetail(label: string, values: Url[]): LinkedBibDetail {
if (!values.length) return null
- return { link: "external", value: values, label }
+ return {
+ link: "external",
+ value: values,
+ label: convertToSentenceCase(label),
+ }
}
addNotes(details: AnyBibDetail[]) {
@@ -221,7 +238,10 @@ export default class BibDetails {
}, {})
const notesAsDetails = []
Object.keys(notesGroupedByNoteType).forEach((key: string) => {
- notesAsDetails.push({ label: key, value: notesGroupedByNoteType[key] })
+ notesAsDetails.push({
+ label: convertToSentenceCase(key),
+ value: notesGroupedByNoteType[key],
+ })
})
return notesAsDetails
}
@@ -333,17 +353,47 @@ export default class BibDetails {
) {
return null
}
- const label = "Supplementary Content"
+ const label = "Supplementary content"
const values = this.bib.supplementaryContent.map((sc) => {
return {
url: sc.url,
urlLabel: sc.label,
}
})
- return this.buildExternalLinkedDetail(label, values)
+ return this.buildExternalLinkedDetail(convertToSentenceCase(label), values)
}
buildSubjectHeadings(): SubjectHeadingDetail {
+ if (!this.bib.subjectHeadings) return
+ const subjectHeadingsUrls = this.bib.subjectHeadings.map(
+ ({ label, uuid }) => {
+ if (!label || !uuid) return
+ const subject = label.replace(/\.$/, "")
+ // stackedSubjectHeadings: ["a", "a -- b", "a -- b -- c"]
+ const stackedSubjectHeadings =
+ this.constructSubjectHeadingsArray(subject)
+ const shepUrl = `/subject_headings/${uuid}`
+ // splitSubjectHeadings: ["a", "b", "c"]
+ const splitSubjectHeadings = subject.split(" -- ")
+
+ return splitSubjectHeadings.map((heading, index) => {
+ const urlWithLabelParam = `${shepUrl}?label=${encodeURI(
+ stackedSubjectHeadings[index]
+ )}`
+ return {
+ url: urlWithLabelParam,
+ urlLabel: heading,
+ }
+ })
+ }
+ )
+ return {
+ label: "Subject",
+ value: subjectHeadingsUrls,
+ }
+ }
+
+ buildSubjectLiterals(): SubjectHeadingDetail {
if (!this.bib.subjectLiteral) return
const subjectLiteralUrls = this.bib.subjectLiteral.map(
(subject: string) => {
diff --git a/src/models/Item.ts b/src/models/Item.ts
index 9d2021c5f..436ee500a 100644
--- a/src/models/Item.ts
+++ b/src/models/Item.ts
@@ -56,7 +56,7 @@ export default class Item {
this.dueDate = item.dueDate?.length ? item.dueDate[0] : null
this.isPhysicallyRequestable = item.physRequestable
this.isEDDRequestable = item.eddRequestable
- this.bibTitle = bib.title
+ this.bibTitle = bib.titleDisplay
}
// Item availability is determined by the existence of status id in the availability ids list
diff --git a/src/models/ItemTableData.ts b/src/models/ItemTableData.ts
index 112363110..2c6f5cc71 100644
--- a/src/models/ItemTableData.ts
+++ b/src/models/ItemTableData.ts
@@ -3,6 +3,7 @@ import type { ReactElement } from "react"
import type Item from "./Item"
import type { ItemTableParams } from "../types/itemTypes"
import StatusLinks from "../components/ItemTable/StatusLinks"
+import ItemTableCell from "../components/ItemTable/ItemTableCell"
/**
* The ItemTable class converts a Bib's item data to the format
@@ -35,20 +36,24 @@ export default class ItemTableData {
...(this.showVolumeColumn() ? [this.volumeColumnHeading()] : []),
"Format",
...(this.showAccessColumn() ? ["Access"] : []),
- "Call Number",
- "Item Location",
+ "Call number",
+ "Item location",
]
}
- get tableData(): (string | ReactElement)[][] {
+ get tableData(): ReactElement[][] {
return this.items?.map((item) => {
return [
...(this.showStatusColumn() ? [StatusLinks({ item })] : []),
- ...(this.showVolumeColumn() ? [item.volume] : []),
- item.format,
- ...(this.showAccessColumn() ? [item.accessMessage] : []),
- item.callNumber,
- item.location.prefLabel,
+ ...(this.showVolumeColumn()
+ ? [ItemTableCell({ children: item.volume })]
+ : []),
+ ItemTableCell({ children: item.format }),
+ ...(this.showAccessColumn()
+ ? [ItemTableCell({ children: item.accessMessage })]
+ : []),
+ ItemTableCell({ children: item.callNumber }),
+ ItemTableCell({ children: item.location.prefLabel }),
]
})
}
@@ -66,6 +71,6 @@ export default class ItemTableData {
}
volumeColumnHeading(): string {
- return this.isArchiveCollection ? "Container" : "Vol/Date"
+ return this.isArchiveCollection ? "Container" : "Vol/date"
}
}
diff --git a/src/models/SearchResultsBib.ts b/src/models/SearchResultsBib.ts
index 0b7d61bfc..9863e09e1 100644
--- a/src/models/SearchResultsBib.ts
+++ b/src/models/SearchResultsBib.ts
@@ -26,7 +26,7 @@ export default class SearchResultsBib extends Bib {
: null
}
- get showViewAllItemsLink() {
+ showViewAllItemsLink() {
return this.numPhysicalItems > ITEMS_PER_SEARCH_RESULT
}
@@ -43,6 +43,12 @@ export default class SearchResultsBib extends Bib {
: null
}
+ numItems() {
+ return this.hasPhysicalItems
+ ? this.numPhysicalItems
+ : this.numElectronicResources
+ }
+
getYearFromResult(result: DiscoveryBibResult) {
const { dateStartYear, dateEndYear } = result
diff --git a/src/models/modelTests/Bib.test.ts b/src/models/modelTests/Bib.test.ts
index cad03380d..592572f40 100644
--- a/src/models/modelTests/Bib.test.ts
+++ b/src/models/modelTests/Bib.test.ts
@@ -14,10 +14,14 @@ describe("Bib model", () => {
expect(bib.id).toBe("b15080796")
})
- it("initializes the title as titleDisplay field when present", () => {
+ it("initializes the title when present", () => {
expect(bib.title).toBe("Urban spaghetti.")
})
+ it("initializes the titleDisplay field when present", () => {
+ expect(bib.titleDisplay).toBe("Urban spaghetti.")
+ })
+
it("initializes the electronicResources as empty array when missing from bib result", () => {
expect(bib.electronicResources).toStrictEqual([])
})
@@ -41,5 +45,9 @@ describe("Bib model", () => {
expect(typeof bib.items[0]).toBe("object")
expect(bib.items[0] instanceof Item).toBe(true)
})
+
+ it("initializes the hasItemDates field when present", () => {
+ expect(bib.hasItemDates).toBe(true)
+ })
})
})
diff --git a/src/models/modelTests/BibDetails.test.ts b/src/models/modelTests/BibDetails.test.ts
index 89ebdf595..69fe697cb 100644
--- a/src/models/modelTests/BibDetails.test.ts
+++ b/src/models/modelTests/BibDetails.test.ts
@@ -3,6 +3,7 @@ import {
noParallels,
parallelsBib,
yiddishBib,
+ bibWithSubjectHeadings,
} from "../../../__test__/fixtures/bibFixtures"
import type { LinkedBibDetail } from "../../types/bibDetailsTypes"
import BibDetailsModel from "../BibDetails"
@@ -25,6 +26,11 @@ describe("Bib model", () => {
yiddishBib.resource,
yiddishBib.annotatedMarc
)
+
+ const bibWithSubjectHeadingsModel = new BibDetailsModel(
+ bibWithSubjectHeadings.resource,
+ bibWithSubjectHeadings.annotatedMarc
+ )
describe("note", () => {
it("groups notes into an array of {label, value} details", () => {
const model = bibWithParallelsModel
@@ -35,42 +41,82 @@ describe("Bib model", () => {
},
{ label: "Language (note)", value: ["Serbian;"] },
{
- label: "Issued By (note)",
+ label: "Issued by (note)",
value: ["Issued by: Narodna biblioteka Kraljevo."],
},
{
- label: "Linking Entry (note)",
+ label: "Linking entry (note)",
value: [
"Has supplement, <2005-> : Preporučeno, ISSN 1452-3531",
"Has supplement, <2006-> : Види чуда, ISSN 1452-7316",
"Has supplement, <2006-> : Vidi čuda, ISSN 1452-7316",
],
},
- { label: "Source of Description (note)", value: ["G. 46, 3 (2016)."] },
+ { label: "Source of description (note)", value: ["G. 46, 3 (2016)."] },
])
})
})
describe("subjectHeadings", () => {
- it("maps single subjects to compound heading url", () => {
- const filterQueryForSubjectHeading = "/search?filters[subjectLiteral]="
+ it("correctly formats the subjectHeading urls when the subjectHeadings are present in the bib result", () => {
+ const subjectHeadingsObject = {
+ label: "Subject",
+ value: [
+ [
+ {
+ url: "/subject_headings/74746d11-638b-4cfb-a72a-9a2bd296e6fd?label=Cortanze,%20G%C3%A9rard%20de",
+ urlLabel: "Cortanze, Gérard de",
+ },
+ {
+ url: "/subject_headings/74746d11-638b-4cfb-a72a-9a2bd296e6fd?label=Cortanze,%20G%C3%A9rard%20de%20--%20Childhood%20and%20youth",
+ urlLabel: "Childhood and youth",
+ },
+ ],
+ [
+ {
+ url: "/subject_headings/9391bc26-e44c-44ac-98cc-e3800da51926?label=Authors,%20French",
+ urlLabel: "Authors, French",
+ },
+ {
+ url: "/subject_headings/9391bc26-e44c-44ac-98cc-e3800da51926?label=Authors,%20French%20--%2020th%20century",
+ urlLabel: "20th century",
+ },
+ {
+ url: "/subject_headings/9391bc26-e44c-44ac-98cc-e3800da51926?label=Authors,%20French%20--%2020th%20century%20--%20Biography",
+ urlLabel: "Biography",
+ },
+ ],
+ [
+ {
+ url: "/subject_headings/3a779ed6-8a07-4d27-80ef-e0c2b10fe78e?label=Autobiographical%20Narrative",
+ urlLabel: "Autobiographical Narrative",
+ },
+ ],
+ ],
+ }
+ expect(bibWithSubjectHeadingsModel.subjectHeadings).toMatchObject(
+ subjectHeadingsObject
+ )
+ })
+ it("falls back to subject literals when subject headings are absent in the bib and correctly formats the urls", () => {
+ const filterQueryForSubjectLiteral = "/search?filters[subjectLiteral]="
const subjectHeadingsObject = {
label: "Subject",
value: [
[
{
- url: `${filterQueryForSubjectHeading}${encodeURI(
+ url: `${filterQueryForSubjectLiteral}${encodeURI(
"Authors, French"
)}`,
urlLabel: "Authors, French",
},
{
- url: `${filterQueryForSubjectHeading}${encodeURI(
+ url: `${filterQueryForSubjectLiteral}${encodeURI(
"Authors, French -- 20th century"
)}`,
urlLabel: "20th century",
},
{
- url: `${filterQueryForSubjectHeading}${encodeURI(
+ url: `${filterQueryForSubjectLiteral}${encodeURI(
"Authors, French -- 20th century -- Biography"
)}`,
urlLabel: "Biography",
@@ -78,7 +124,7 @@ describe("Bib model", () => {
],
[
{
- url: `${filterQueryForSubjectHeading}${encodeURI(
+ url: `${filterQueryForSubjectLiteral}${encodeURI(
"Autobiographical Narrative"
)}`,
urlLabel: "Autobiographical Narrative",
@@ -86,13 +132,13 @@ describe("Bib model", () => {
],
[
{
- url: `${filterQueryForSubjectHeading}${encodeURI(
+ url: `${filterQueryForSubjectLiteral}${encodeURI(
"Cortanze, Gérard de"
)}`,
urlLabel: "Cortanze, Gérard de",
},
{
- url: `${filterQueryForSubjectHeading}${encodeURI(
+ url: `${filterQueryForSubjectLiteral}${encodeURI(
"Cortanze, Gérard de -- Childhood and youth"
)}`,
urlLabel: "Childhood and youth",
@@ -158,7 +204,7 @@ describe("Bib model", () => {
it("can handle missing field", () => {
expect(
bibWithSupContentModel.bottomDetails.find(
- (detail) => detail.label === "Call Number"
+ (detail) => detail.label === "Call number"
)
).not.toBeDefined()
})
@@ -189,7 +235,7 @@ describe("Bib model", () => {
it("includes url in the field", () => {
expect(bibWithSupContentModel.supplementaryContent).toStrictEqual({
link: "external",
- label: "Supplementary Content",
+ label: "Supplementary content",
value: [
{
urlLabel: "Image",
@@ -207,7 +253,7 @@ describe("Bib model", () => {
})
expect(
bogusBib.topDetails.find(
- (detail) => detail.label === "Additional Author"
+ (detail) => detail.label === "Additional author"
)
).not.toBeDefined()
})
diff --git a/src/models/modelTests/SearchResultsBib.test.ts b/src/models/modelTests/SearchResultsBib.test.ts
index 9f9e0cdc5..ee21222f5 100644
--- a/src/models/modelTests/SearchResultsBib.test.ts
+++ b/src/models/modelTests/SearchResultsBib.test.ts
@@ -38,23 +38,23 @@ describe("SearchResultsBib model", () => {
describe("showViewAllItemsLink", () => {
it("returns true if the number of physical items is greater than ITEMS_PER_SEARCH_RESULT", () => {
- expect(searchResultsBib.showViewAllItemsLink).toBe(true)
+ expect(searchResultsBib.showViewAllItemsLink()).toBe(true)
})
})
describe("getNumItemsMessage", () => {
it("returns a message populated with the correct resource type and pluralization", () => {
- expect(searchResultsBib.getNumItemsMessage()).toBe("4 Items")
+ expect(searchResultsBib.getNumItemsMessage()).toBe("4 items")
})
it("works for single eResource", () => {
const bibOneElectronicResource = new SearchResultsBib(
bibWithOneElectronicResource.resource
)
- expect(bibOneElectronicResource.getNumItemsMessage()).toBe("1 Resource")
+ expect(bibOneElectronicResource.getNumItemsMessage()).toBe("1 resource")
})
it("works for a bib with no items", () => {
const bibWithNoItems = new SearchResultsBib(bibNoItems.resource)
- expect(bibWithNoItems.getNumItemsMessage()).toBe("0 Resources")
+ expect(bibWithNoItems.getNumItemsMessage()).toBe("0 resources")
})
})
diff --git a/src/server/api/bib.ts b/src/server/api/bib.ts
index 3e9e9a9a7..0a0e67fa0 100644
--- a/src/server/api/bib.ts
+++ b/src/server/api/bib.ts
@@ -3,6 +3,7 @@ import {
isNyplBibID,
getBibQueryString,
standardizeBibId,
+ itemFiltersActive,
} from "../../utils/bibUtils"
import nyplApiClient from "../nyplApiClient"
import {
@@ -27,6 +28,7 @@ export async function fetchBib(
redirectUrl: `/bib/${standardizedId}`,
}
}
+
const client = await nyplApiClient({ apiName: DISCOVERY_API_NAME })
const [bibResponse, annotatedMarcResponse] = await Promise.allSettled([
await client.get(
@@ -91,9 +93,11 @@ export async function fetchBib(
status: 404,
}
}
- // Populate bib's items with all the items if View All is enabled
- if (bibQuery?.view_all_items) {
- discoveryBibResult.items = await fetchAllBibItems(
+
+ // Only call the batched fetch when some of the filters are active
+ // TODO: Remove this when view_all endpoint in discovery supports query params
+ if (bibQuery?.all_items && itemFiltersActive(bibQuery)) {
+ discoveryBibResult.items = await fetchAllBibItemsWithQuery(
bibQuery,
discoveryBibResult.numItemsMatched,
// allow control of batch size in query param for testing
@@ -137,33 +141,37 @@ async function fetchBibSubjectHeadings(bibId: string) {
}
}
-async function fetchAllBibItems(
+// TODO: Remove this when view_all endpoint in discovery supports query params
+async function fetchAllBibItemsWithQuery(
bibQuery: BibQueryParams,
numItems: number,
batchSize: number
): Promise {
const items: DiscoveryItemResult[] = []
const client = await nyplApiClient({ apiName: DISCOVERY_API_NAME })
- for (
- let batchNum = 1;
- batchNum <= Math.ceil(numItems / batchSize);
- batchNum++
- ) {
- const pageQueryString = getBibQueryString(
- {
- ...bibQuery,
- item_page: batchNum,
- },
- false,
- true
- )
- const bibPage = await client.get(
- `${DISCOVERY_API_SEARCH_ROUTE}/${bibQuery.id}${pageQueryString}`
- )
- if (bibPage?.items?.length) {
- items.push(...bibPage.items)
- } else {
- throw new Error("There was en error fetching items in one of the batches")
+ const totalBatchNum = Math.ceil(numItems / batchSize)
+
+ for (let batchNum = 1; batchNum <= totalBatchNum; batchNum++) {
+ try {
+ const pageQueryString = getBibQueryString(
+ {
+ ...bibQuery,
+ item_page: batchNum,
+ },
+ false
+ )
+ const bibPage = await client.get(
+ `${DISCOVERY_API_SEARCH_ROUTE}/${bibQuery.id}${pageQueryString}`
+ )
+ if (bibPage?.items?.length) {
+ items.push(...bibPage.items)
+ } else {
+ throw new Error(
+ "There was en error fetching items in one of the batches"
+ )
+ }
+ } catch (error) {
+ logger.error(error.message)
}
}
return items
diff --git a/src/server/api/tests/bib.test.ts b/src/server/api/tests/bib.test.ts
index d459f9e43..52b502cc4 100644
--- a/src/server/api/tests/bib.test.ts
+++ b/src/server/api/tests/bib.test.ts
@@ -192,21 +192,4 @@ describe("fetchBib", () => {
async () => (await fetchBib("b17418167")) as BibResponse
).rejects.toThrow("Bad API URL")
})
-
- it("should load all the items in batches if view_all_items query param is true", async () => {
- const bibResponse = (await fetchBib("b17418167", {
- view_all_items: true,
- batch_size: 20,
- })) as BibResponse
- expect(bibResponse.status).toEqual(200)
- expect(bibResponse.discoveryBibResult.items.length).toEqual(25)
- })
-
- it("should throw an error on view all if one of the batched fetches fails", async () => {
- const bibResponse = (await fetchBib("b17418167", {
- view_all_items: true,
- batch_size: 20,
- })) as BibResponse
- expect(bibResponse.status).toEqual(404)
- })
})
diff --git a/src/types/bibTypes.ts b/src/types/bibTypes.ts
index 9e527f245..8ff0297ca 100644
--- a/src/types/bibTypes.ts
+++ b/src/types/bibTypes.ts
@@ -31,6 +31,7 @@ export interface DiscoveryBibResult {
holdings?: object
owner?: { "@id": string; prefLabel: string }
subjectHeadings?: SubjectHeading[]
+ hasItemDates?: boolean
}
// export interface Holding {
@@ -87,13 +88,13 @@ export interface BibQueryParams extends ItemFilterQueryParams {
item_page?: number
items_size?: number
items_from?: number
- view_all_items?: boolean
+ all_items?: boolean
batch_size?: number
}
-type SubjectHeading = {
+export type SubjectHeading = {
label?: string
uuid?: string
- bib_count?: 10
- desc_count?: 0
+ bib_count?: number
+ desc_count?: number
}
diff --git a/src/utils/appUtils.ts b/src/utils/appUtils.ts
index c51703ef9..67a1f8dbb 100644
--- a/src/utils/appUtils.ts
+++ b/src/utils/appUtils.ts
@@ -131,3 +131,12 @@ export function getPaginationOffsetStrings(
*/
export const encodeHTML = (str: string) =>
str.replace(/&/g, "&").replace(/
+ str.split(" ").length > 1
+ ? str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
+ : str
diff --git a/src/utils/bibUtils.ts b/src/utils/bibUtils.ts
index 1ea10edd4..17174cd5a 100644
--- a/src/utils/bibUtils.ts
+++ b/src/utils/bibUtils.ts
@@ -1,6 +1,7 @@
import {
ITEM_PAGINATION_BATCH_SIZE,
ITEM_VIEW_ALL_BATCH_SIZE,
+ ITEM_FILTER_PARAMS,
} from "../config/constants"
import type { BibQueryParams } from "../types/bibTypes"
import { getPaginationOffsetStrings } from "./appUtils"
@@ -76,40 +77,46 @@ export function isNyplBibID(id: string) {
return /^b/.test(id)
}
+// Check if any of the item filters in the bib query params are active
+export const itemFiltersActive = (bibQuery: BibQueryParams) =>
+ ITEM_FILTER_PARAMS.some((param) => bibQuery[param]?.length)
+
/**
* Given a BibQueryParams object and an includeAnnotatedMarc boolean, return a query string for the Bib fetch API call.
*/
export function getBibQueryString(
bibQuery: BibQueryParams,
- includeAnnotatedMarc = false,
- viewAllItems = false
+ includeAnnotatedMarc = false
): string {
- const batchSize = viewAllItems
+ const allItems = bibQuery?.all_items
+
+ // TODO: Remove this and set batch size to ITEM_PAGINATION_BATCH_SIZE when view_all endpoint in discovery supports query params
+ const batchSize = allItems
? ITEM_VIEW_ALL_BATCH_SIZE
: ITEM_PAGINATION_BATCH_SIZE
+
const itemPage = bibQuery?.item_page || 1
const itemsFrom = (itemPage - 1) * batchSize || 0
- const FILTER_QUERIES = [
- "item_location",
- "item_format",
- "item_status",
- "item_date",
- ]
-
const itemFilterQuery = bibQuery
? Object.keys(bibQuery)
- .filter((key) => FILTER_QUERIES.includes(key))
+ .filter((key) => ITEM_FILTER_PARAMS.includes(key))
.map((key) => `&${key}=${bibQuery[key]}`)
.join("")
: ""
- const paginationQuery = `items_size=${batchSize}&items_from=${itemsFrom}&item_page=${itemPage}`
+ // TODO: Remove the filtersActive check and the bibQuery?.all_items check in the second part of the ternary
+ // when view_all endpoint in discovery supports query params
+ const paginationOrAllQuery =
+ allItems && !itemFiltersActive(bibQuery)
+ ? "all_items=true"
+ : `items_size=${batchSize}&items_from=${itemsFrom}&item_page=${itemPage}${
+ allItems ? "&all_items=true" : ""
+ }`
const mergeCheckinQuery = !includeAnnotatedMarc
? "&merge_checkin_card_items=true"
: ""
- const viewAllQuery = viewAllItems ? "&view_all_items=true" : ""
- return `?${paginationQuery}${itemFilterQuery}${viewAllQuery}${mergeCheckinQuery}`
+ return `?${paginationOrAllQuery}${itemFilterQuery}${mergeCheckinQuery}`
}
diff --git a/src/utils/searchUtils.ts b/src/utils/searchUtils.ts
index d3c6431d6..1f2605b98 100644
--- a/src/utils/searchUtils.ts
+++ b/src/utils/searchUtils.ts
@@ -10,10 +10,16 @@ import type {
SearchResultsResponse,
} from "../types/searchTypes"
import SearchResultsBib from "../models/SearchResultsBib"
-import { RESULTS_PER_PAGE } from "../config/constants"
+import { RESULTS_PER_PAGE, SEARCH_FORM_OPTIONS } from "../config/constants"
import { collapseMultiValueQueryParams } from "./refineSearchUtils"
import { getPaginationOffsetStrings } from "./appUtils"
+export const searchFormSelectOptions = Object.keys(SEARCH_FORM_OPTIONS).map(
+ (key) => ({
+ text: SEARCH_FORM_OPTIONS[key].text,
+ value: key,
+ })
+)
/**
* determineFreshSortByQuery
* Returns true only if the last update to the query was a sort by change.
@@ -55,9 +61,10 @@ export function getSearchResultsHeading(
totalResults > RESULTS_PER_PAGE
? `${resultsStart}-${resultsEnd}`
: totalResults.toLocaleString()
- } of ${totalResults.toLocaleString()} results ${queryDisplayString}`
+ } of ${totalResults.toLocaleString()} results${queryDisplayString}`
}
+// Shows the final part of the search query string (e.g. "for keyword 'cats'")
function buildQueryDisplayString(searchParams: SearchParams): string {
const searchFields = advSearchFields
// Lowercase the adv search field labels:
@@ -70,6 +77,7 @@ function buildQueryDisplayString(searchParams: SearchParams): string {
{ name: "isbn", label: "ISBN" },
{ name: "issn", label: "ISSN" },
{ name: "lccn", label: "LCCN" },
+ { name: "callnumber", label: "call number" },
])
const paramsStringCollection = {}
const searchParamsObject = {
@@ -103,11 +111,9 @@ function buildQueryDisplayString(searchParams: SearchParams): string {
const displayStringArray = Object.values(paramsStringCollection)
- return `for ${
- displayStringArray.length > 1
- ? displayStringArray.join(" and ")
- : displayStringArray[0]
- }`
+ return displayStringArray.length
+ ? ` for ${displayStringArray.join(" and ")}`
+ : ""
}
/**
diff --git a/src/utils/utilsTests/appUtils.test.ts b/src/utils/utilsTests/appUtils.test.ts
index d1fdedfde..e9e56524a 100644
--- a/src/utils/utilsTests/appUtils.test.ts
+++ b/src/utils/utilsTests/appUtils.test.ts
@@ -2,6 +2,7 @@ import {
adobeAnalyticsRouteToPageName,
encodeHTML,
getPaginationOffsetStrings,
+ convertToSentenceCase,
} from "../appUtils"
import {
ADOBE_ANALYTICS_RC_PREFIX,
@@ -92,4 +93,19 @@ describe("appUtils", () => {
expect(end).toEqual("1,195")
})
})
+ describe("convertToSentenceCase", () => {
+ it("converts a capitalized string to sentence case", () => {
+ expect(convertToSentenceCase("Convert This Sentence.")).toEqual(
+ "Convert this sentence."
+ )
+ })
+ it("converts a fully uppercase string to sentence case", () => {
+ expect(convertToSentenceCase("CONVERT THIS SENTENCE.")).toEqual(
+ "Convert this sentence."
+ )
+ })
+ it("returns the string that is passed in if it's a single word, to avoid sentence-casing acronyms", () => {
+ expect(convertToSentenceCase("ISSN")).toEqual("ISSN")
+ })
+ })
})
diff --git a/src/utils/utilsTests/bibUtils.test.ts b/src/utils/utilsTests/bibUtils.test.ts
index fe21a2605..decfd561e 100644
--- a/src/utils/utilsTests/bibUtils.test.ts
+++ b/src/utils/utilsTests/bibUtils.test.ts
@@ -3,6 +3,7 @@ import {
isNyplBibID,
getBibQueryString,
buildItemTableDisplayingString,
+ itemFiltersActive,
} from "../bibUtils"
describe("bibUtils", () => {
@@ -41,6 +42,30 @@ describe("bibUtils", () => {
expect(isNyplBibID("hb10000202040400")).toBe(false)
})
})
+ describe("itemFiltersActive", () => {
+ it("returns true when any of the filter params are populated in the bib query string", () => {
+ expect(itemFiltersActive({ item_location: "location" })).toBe(true)
+ expect(itemFiltersActive({ item_format: "format" })).toBe(true)
+ expect(itemFiltersActive({ item_status: "status" })).toBe(true)
+ expect(itemFiltersActive({ item_date: "date" })).toBe(true)
+ })
+ it("returns false when item filter params are absent in the bib query or if they defined as empty strings", () => {
+ expect(
+ itemFiltersActive({
+ id: "b12082323",
+ item_page: 5,
+ })
+ ).toBe(false)
+ expect(
+ itemFiltersActive({
+ item_location: "",
+ item_status: "",
+ item_format: "",
+ item_date: "",
+ })
+ ).toBe(false)
+ })
+ })
describe("getBibQueryString", () => {
it("returns the correct query string with a bib ID and no bib params", () => {
expect(getBibQueryString({ id: "b12082323" })).toBe(
@@ -52,6 +77,55 @@ describe("bibUtils", () => {
"?items_size=20&items_from=80&item_page=5&merge_checkin_card_items=true"
)
})
+ // TODO: Uncomment when view_all endpoint in discovery supports query params
+ // it("replaces pagination query params with all_items when all_items is true", () => {
+ // expect(
+ // getBibQueryString({ id: "b12082323", item_page: 5, all_items: true })
+ // ).toBe("?all_items=true&merge_checkin_card_items=true")
+ // })
+ // it("does not replace pagination query params when all_items is present and false", () => {
+ // expect(
+ // getBibQueryString({
+ // id: "b12082323",
+ // item_page: 5,
+ // all_items: false,
+ // })
+ // ).toBe(
+ // "?items_size=20&items_from=80&item_page=5&merge_checkin_card_items=true"
+ // )
+ // })
+
+ // TODO: Remove this test when view_all endpoint in discovery supports query params
+ it("replaces pagination query params with all_items when all_items is true unless filters are applied", () => {
+ expect(
+ getBibQueryString({ id: "b12082323", item_page: 5, all_items: true })
+ ).toBe("?all_items=true&merge_checkin_card_items=true")
+ })
+ // TODO: Remove this test when view_all endpoint in discovery supports query params
+ it("does not replace pagination query params when all_items is present and false", () => {
+ expect(
+ getBibQueryString({
+ id: "b12082323",
+ item_page: 5,
+ all_items: false,
+ })
+ ).toBe(
+ "?items_size=20&items_from=80&item_page=5&merge_checkin_card_items=true"
+ )
+ })
+ // TODO: Remove this test when view_all endpoint in discovery supports query params
+ it("preserves pagination when filters are applied and all_items is true", () => {
+ expect(
+ getBibQueryString({
+ id: "b12082323",
+ item_page: 5,
+ all_items: true,
+ item_location: "location",
+ })
+ ).toBe(
+ "?items_size=150&items_from=600&item_page=5&all_items=true&item_location=location&merge_checkin_card_items=true"
+ )
+ })
})
describe("buildItemTableDisplayingString", () => {
it("returns the correct item table heading when there is one item", () => {
diff --git a/src/utils/utilsTests/searchUtils.test.ts b/src/utils/utilsTests/searchUtils.test.ts
index 79723ef2d..f185499b9 100644
--- a/src/utils/utilsTests/searchUtils.test.ts
+++ b/src/utils/utilsTests/searchUtils.test.ts
@@ -239,6 +239,10 @@ describe("searchUtils", () => {
'Displaying 201-250 of 1,200 results for keyword "cats"'
)
})
+ it("doesn't display the 'for' part of the display text when the q param is absent", () => {
+ const heading = getSearchResultsHeading({ page: 5 }, 1200)
+ expect(heading).toEqual("Displaying 201-250 of 1,200 results")
+ })
describe("identifier searches", () => {
it("returns the correct heading string for OCLC searches", () => {
diff --git a/styles/components/BibDetails.module.scss b/styles/components/BibDetails.module.scss
index 7223c6126..9c850f441 100644
--- a/styles/components/BibDetails.module.scss
+++ b/styles/components/BibDetails.module.scss
@@ -1,10 +1,18 @@
.bibDetails {
margin-top: var(--nypl-space-xl) !important;
+ font-size: var(--nypl-fontSizes-desktop-body-body2);
h3 {
border: none;
margin-bottom: var(--nypl-space-m);
}
+
+ dt {
+ @media (max-width: 600px) {
+ margin-bottom: var(--nypl-space-xs);
+ }
+ }
+
dl dt,
dl dd {
padding-top: 0;
diff --git a/styles/components/ItemTable.module.scss b/styles/components/ItemTable.module.scss
index 544ce5afe..acf9a7663 100644
--- a/styles/components/ItemTable.module.scss
+++ b/styles/components/ItemTable.module.scss
@@ -1,40 +1,25 @@
.itemTable {
margin-top: var(--nypl-space-m);
margin-bottom: var(--nypl-space-s);
- width: unset !important;
-
- thead {
- margin-bottom: var(--nypl-space-xs);
- }
tr {
- th,
- td,
td:first-of-type,
th:first-of-type {
- padding: var(--nypl-space-s) 0;
-
- // These min-widths are here temporarily to fix an issue with the table that causes the Format and Call Number columns to appear to narrow
- // TODO: These can be removed if the issue is addressed in the DS or during VQA.
- @media screen and (min-width: 600px) {
- min-width: 80px;
- }
+ padding-left: 0;
+ }
- @media screen and (min-width: 900px) {
- min-width: 130px;
+ td:last-of-type,
+ th:last-of-type {
+ padding-right: 0;
+ }
- &:first-child {
- min-width: 370px;
- }
- }
+ td {
+ font-size: var(--nypl-fontSizes-desktop-body-body2);
+ line-height: var(--nypl-lineHeights-body-body2);
+ }
- // Fix for extra whitespace added by non-table cell styling on span coming from DS
- // TODO: Bring this issue up with DS team and potentially fix there
- > span + span {
- @media screen and (min-width: 600px) {
- display: table-cell;
- }
- }
+ span {
+ vertical-align: top;
}
}
diff --git a/styles/components/Search.module.scss b/styles/components/Search.module.scss
index 37b80128f..48ac87eaf 100644
--- a/styles/components/Search.module.scss
+++ b/styles/components/Search.module.scss
@@ -21,6 +21,19 @@
@include maxWidth;
}
+.searchTip {
+ display: flex;
+ align-items: flex-start;
+ span {
+ font-weight: bold;
+ text-wrap: nowrap;
+ }
+ gap: var(--nypl-space-xxs);
+ svg {
+ margin-top: var(--nypl-space-xxxs);
+ }
+}
+
.auxSearchContainer {
display: flex;
flex-direction: column;