diff --git a/__test__/fixtures/searchResultsManyBibs.ts b/__test__/fixtures/searchResultsManyBibs.ts
index 4ce692ab9..3dd9b598c 100644
--- a/__test__/fixtures/searchResultsManyBibs.ts
+++ b/__test__/fixtures/searchResultsManyBibs.ts
@@ -9072,6 +9072,34 @@ export const aggregationsResults = {
"http://discovery-api-production.us-east-1.elasticbeanstalk.com/api/v0.1/discovery/context_all.jsonld",
"@type": "itemList",
itemListElement: [
+ {
+ "@type": "nypl:Aggregation",
+ "@id": "res:buildingLocation",
+ id: "buildingLocation",
+ field: "buildingLocation",
+ values: [
+ {
+ value: "sc",
+ count: 26,
+ label: "Not the label you should see - sc",
+ },
+ {
+ value: "rc",
+ count: 26,
+ label: "Not the lable you should see - rc",
+ },
+ {
+ value: "pa",
+ count: 2,
+ label: "Not the label you should see - pa",
+ },
+ {
+ value: "ma",
+ count: 1,
+ label: "Not the label you should see - ma",
+ },
+ ],
+ },
{
"@type": "nypl:Aggregation",
"@id": "res:materialType",
diff --git a/__test__/pages/search/advancedSearchForm.test.tsx b/__test__/pages/search/advancedSearchForm.test.tsx
index ef1ff4242..b07ec4842 100644
--- a/__test__/pages/search/advancedSearchForm.test.tsx
+++ b/__test__/pages/search/advancedSearchForm.test.tsx
@@ -80,7 +80,7 @@ describe("Advanced Search Form", () => {
it("can check location checkboxes", async () => {
render()
const location = searchAggregations.buildingLocation[0]
- await userEvent.click(screen.getByLabelText(location.label))
+ await userEvent.click(screen.getByLabelText(location.label as string))
submit()
expect(mockRouter.asPath).toBe(
`/search?q=&filters%5BbuildingLocation%5D%5B0%5D=${location.value}`
@@ -93,10 +93,13 @@ describe("Advanced Search Form", () => {
await userEvent.click(notatedMusic)
const cartographic = screen.getByLabelText("Cartographic")
await userEvent.click(cartographic)
- await userEvent.selectOptions(
- screen.getByLabelText("Language"),
- "Azerbaijani"
- )
+ const selector = screen.getByLabelText("Language")
+ await userEvent.selectOptions(selector, "Azerbaijani")
+ const schomburg = screen.getByLabelText("Schomburg Center for", {
+ exact: false,
+ })
+
+ await userEvent.click(schomburg)
const keywordInput = screen.getByLabelText("Keyword")
const titleInput = screen.getByLabelText("Title")
const contributorInput = screen.getByLabelText("Author")
@@ -107,7 +110,15 @@ describe("Advanced Search Form", () => {
await userEvent.type(subjectInput, "italian food")
await userEvent.click(screen.getByText("Clear fields"))
- expect(notatedMusic).not.toBeChecked()
+ ;[notatedMusic, cartographic, schomburg].forEach((input) =>
+ expect(input).not.toBeChecked()
+ )
+ expect(selector).not.toHaveDisplayValue("Azerbaijani")
+ ;[subjectInput, keywordInput, titleInput, contributorInput].forEach(
+ (input) => {
+ expect(input).toBeEmptyDOMElement()
+ }
+ )
submit()
// presence of alert means the form was cleared before hitting submit
diff --git a/__test__/pages/search/searchResults.test.tsx b/__test__/pages/search/searchResults.test.tsx
index 1ffb06295..b121f48b2 100644
--- a/__test__/pages/search/searchResults.test.tsx
+++ b/__test__/pages/search/searchResults.test.tsx
@@ -25,7 +25,7 @@ describe("Search Results page", () => {
results={{ results, aggregations: aggregationsResults }}
/>
)
- const refine = screen.getByText("Refine Search")
+ const refine = screen.getByText("Filter results")
await userEvent.click(refine)
const field = screen.getByLabelText("Greek, Modern (1453-present)", {
exact: false,
@@ -70,7 +70,7 @@ describe("Search Results page", () => {
await userEvent.selectOptions(desktopSortBy, "Title (A - Z)")
expect(desktopSortBy).toHaveFocus()
})
- it("focuses on cancel after clicking refine search", async () => {
+ it("focuses on cancel after clicking Filter results", async () => {
mockRouter.push(`/search?q=${query}`)
render(
{
results={{ results, aggregations: aggregationsResults }}
/>
)
- const refine = screen.getByText("Refine Search")
+ const refine = screen.getByText("Filter results")
await userEvent.click(refine)
const cancel = screen.getByText("Cancel")
expect(cancel).toHaveFocus
})
- it("focuses on refine search after clicking cancel", async () => {
+ it("focuses on Filter results after clicking cancel", async () => {
mockRouter.push(`/search?q=${query}`)
render(
{
results={{ results, aggregations: aggregationsResults }}
/>
)
- const refine = screen.getByText("Refine Search")
+ const refine = screen.getByText("Filter results")
await userEvent.click(refine)
const cancel = screen.getByText("Cancel")
await userEvent.click(cancel)
diff --git a/pages/search/advanced.tsx b/pages/search/advanced.tsx
index 6530c57cb..d1d4130aa 100644
--- a/pages/search/advanced.tsx
+++ b/pages/search/advanced.tsx
@@ -55,7 +55,7 @@ export default function AdvancedSearch({
isAuthenticated,
goBackHref,
}: AdvancedSearchPropTypes) {
- const metadataTitle = `Advanced Search | ${SITE_NAME}`
+ const metadataTitle = `Advanced search | ${SITE_NAME}`
const router = useRouter()
const inputRef = useRef()
const notificationRef = useRef()
@@ -153,7 +153,7 @@ export default function AdvancedSearch({
{alert && }
- Advanced Search
+ Advanced search
diff --git a/src/components/RefineSearch/SearchFilterCheckboxField.tsx b/src/components/RefineSearch/SearchFilterCheckboxField.tsx
index d77e118b0..f28b0c10b 100644
--- a/src/components/RefineSearch/SearchFilterCheckboxField.tsx
+++ b/src/components/RefineSearch/SearchFilterCheckboxField.tsx
@@ -38,12 +38,19 @@ const SearchFilterCheckboxField = ({
}
const checkboxes = options.map(({ value, label, count }) => {
+ const labelCount = count ? ` (${count})` : ""
+
return (
+ {label}
+ {labelCount}
+ >
+ }
/>
)
})
diff --git a/src/components/SearchFilters/AppliedFilters.tsx b/src/components/SearchFilters/AppliedFilters.tsx
index bf23874df..a16b1ca70 100644
--- a/src/components/SearchFilters/AppliedFilters.tsx
+++ b/src/components/SearchFilters/AppliedFilters.tsx
@@ -1,10 +1,6 @@
import { useRouter } from "next/router"
-import {
- TagSet,
- type TagSetFilterDataProps,
-} from "@nypl/design-system-react-components"
+import { type TagSetFilterDataProps } from "@nypl/design-system-react-components"
-import styles from "../../../styles/components/Search.module.scss"
import {
getQueryWithoutFilters,
buildFilterQuery,
@@ -16,6 +12,7 @@ import {
addLabelPropAndParseFilters,
} from "./appliedFilterUtils"
import type { Aggregation } from "../../types/filterTypes"
+import ActiveFilters from "../ItemFilters/ActiveFilters"
const AppliedFilters = ({ aggregations }: { aggregations: Aggregation[] }) => {
const router = useRouter()
@@ -25,7 +22,13 @@ const AppliedFilters = ({ aggregations }: { aggregations: Aggregation[] }) => {
appliedFilters
)
- const tagSetData = buildTagsetData(appliedFiltersWithLabels)
+ // this type cast is happening because Option type had to be updated to
+ // account for Offsite's Element label. That label does
+ // not pass thru this part of the code, but this is to placate the
+ // compiler.
+ const tagSetData = buildTagsetData(
+ appliedFiltersWithLabels
+ ) as TagSetFilterDataProps[]
const handleRemove = (tag: TagSetFilterDataProps) => {
if (tag.label === "Clear filters") {
router.push({
@@ -50,12 +53,10 @@ const AppliedFilters = ({ aggregations }: { aggregations: Aggregation[] }) => {
if (!tagSetData.length) return null
return (
-
)
}
diff --git a/src/components/SearchFilters/DateForm.tsx b/src/components/SearchFilters/DateForm.tsx
index e5d6b9756..41baebbd5 100644
--- a/src/components/SearchFilters/DateForm.tsx
+++ b/src/components/SearchFilters/DateForm.tsx
@@ -3,6 +3,7 @@ import {
Fieldset,
TextInput,
Notification,
+ Flex,
} from "@nypl/design-system-react-components"
import type { DateFormHookPropsType } from "../../hooks/useDateForm"
@@ -37,11 +38,7 @@ const DateForm = ({
)}
>
)
diff --git a/src/components/SearchForm/SearchForm.tsx b/src/components/SearchForm/SearchForm.tsx
index 4e79b3754..3993ecd19 100644
--- a/src/components/SearchForm/SearchForm.tsx
+++ b/src/components/SearchForm/SearchForm.tsx
@@ -1,5 +1,6 @@
import {
Box,
+ Flex,
Icon,
SearchBar,
Text,
@@ -114,14 +115,14 @@ const SearchForm = ({ aggregations }: { aggregations?: Aggregation[] }) => {
".chakra-select__icon-wrapper": { "z-index": "999 !important" },
}}
/>
-
+
- Advanced Search
+ Advanced search
{displayRefineResults && (
{
aggregations={aggregations}
/>
)}
-
+
)
diff --git a/src/config/aggregations.ts b/src/config/aggregations.tsx
similarity index 93%
rename from src/config/aggregations.ts
rename to src/config/aggregations.tsx
index efdf0c562..4746bb921 100644
--- a/src/config/aggregations.ts
+++ b/src/config/aggregations.tsx
@@ -1,18 +1,25 @@
export const searchAggregations = {
buildingLocation: [
- {
- value: "sc",
- label: "Schomburg Center - Research and Reference Division",
- },
{
value: "ma",
label: "Stephen A. Schwarzman Building",
},
+ {
+ value: "pa",
+ label: "The New York Public Library for the Performing Arts",
+ },
+ {
+ value: "sc",
+ label: "Schomburg Center for Research in Black Culture",
+ },
{
value: "rc",
- label: "Offsite (Deliverable to NYPL research libraries)",
+ label: (
+ <>
+ Off-site - Deliverable to all NYPL Research Libraries
+ >
+ ),
},
- { value: "pa", label: "Performing Arts Library at Lincoln Center" },
],
materialType: [
{
diff --git a/src/models/SearchResultsFilters.ts b/src/models/SearchResultsFilters.ts
index 8519c83b9..3f1a8fe1a 100644
--- a/src/models/SearchResultsFilters.ts
+++ b/src/models/SearchResultsFilters.ts
@@ -12,18 +12,23 @@ class SearchResultsFilters {
constructor(aggregationsResults: Aggregation[], field: Option) {
this.labelTransformations = {
"Greek, Modern (1453- )": "Greek, Modern (1453-present)",
- Offsite: searchAggregations.buildingLocation.find(
- (loc) => loc.value === "rc"
- ).label,
}
+
this.options = aggregationsResults
.find((f) => f.id === field.value)
?.values.map((option) => ({
...option,
- label: this.labelTransformations[option.label] || option.label,
+ label: this.getLabel(option, field),
}))
this.field = field.value
}
+ getLabel(option, field) {
+ if (field.value === "buildingLocation") {
+ return searchAggregations.buildingLocation.find(
+ (loc) => loc.value === option.value
+ ).label
+ } else return this.labelTransformations[option.label] || option.label
+ }
}
export default SearchResultsFilters
diff --git a/src/models/modelTests/SearchResultsFilters.test.ts b/src/models/modelTests/SearchResultsFilters.test.ts
new file mode 100644
index 000000000..5812e4b79
--- /dev/null
+++ b/src/models/modelTests/SearchResultsFilters.test.ts
@@ -0,0 +1,16 @@
+import { aggregationsResults } from "../../../__test__/fixtures/searchResultsManyBibs"
+import type { Aggregation } from "../../types/filterTypes"
+import SearchResultsFilters from "../SearchResultsFilters"
+
+describe("SearchResultsFilter model", () => {
+ it("adds proper label to building location options", () => {
+ const filters = new SearchResultsFilters(
+ aggregationsResults.itemListElement as Aggregation[],
+ {
+ value: "buildingLocation",
+ label: "Item location",
+ }
+ )
+ // filters.options.map((f) => console.log(f.label))
+ })
+})
diff --git a/src/types/filterTypes.ts b/src/types/filterTypes.ts
index 7cd5d5914..d6ee3ffc7 100644
--- a/src/types/filterTypes.ts
+++ b/src/types/filterTypes.ts
@@ -41,7 +41,7 @@ export interface Aggregation {
export type Option = {
value: string
- label: string
+ label: string | JSX.Element
count?: number
field?: string
}
diff --git a/src/types/searchTypes.ts b/src/types/searchTypes.ts
index 156556a7f..2cf22674e 100644
--- a/src/types/searchTypes.ts
+++ b/src/types/searchTypes.ts
@@ -8,6 +8,7 @@ type ContributorLiteral = string
type CreatorLiteral = string
type Issuance = string
type MaterialTypeFilter = string
+type BuildingLocationFilter = string
export interface SearchFilters {
materialType?: MaterialTypeFilter | MaterialTypeFilter[]
@@ -18,6 +19,7 @@ export interface SearchFilters {
issuance?: Issuance | Issuance[]
dateAfter?: string
dateBefore?: string
+ buildingLocation?: BuildingLocationFilter | BuildingLocationFilter[]
}
export interface Identifiers {
diff --git a/src/utils/advancedSearchUtils.ts b/src/utils/advancedSearchUtils.ts
index 81d7f4743..0ab01474e 100644
--- a/src/utils/advancedSearchUtils.ts
+++ b/src/utils/advancedSearchUtils.ts
@@ -19,6 +19,7 @@ export const initialSearchFormState: SearchParams = {
dateBefore: "",
dateAfter: "",
materialType: [],
+ buildingLocation: [],
},
}
diff --git a/styles/components/Search.module.scss b/styles/components/Search.module.scss
index 879373a4c..343be251c 100644
--- a/styles/components/Search.module.scss
+++ b/styles/components/Search.module.scss
@@ -1,13 +1,5 @@
@import "../utils/mixins";
-.filterTags {
- margin-bottom: var(--nypl-space-xs);
-
- button[id^="ts-filter-clear-all"] {
- color: var(--nypl-colors-ui-link-primary);
- text-decoration: underline;
- }
-}
.searchContainer {
background-color: var(--nypl-colors-ui-bg-default);
padding: var(--nypl-space-s) 0;
@@ -33,16 +25,6 @@
}
}
-.auxSearchContainer {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- margin-top: var(--nypl-space-xs);
- @media screen and (min-width: 600px) {
- flex-direction: row-reverse;
- }
-}
-
.advancedSearch {
align-self: flex-start;
min-width: 127px;
@@ -53,29 +35,6 @@
}
}
-.refineSearchButton {
- width: 100%;
-
- @media screen and (min-width: 600px) {
- width: auto;
- margin-top: var(--nypl-space-xs);
- }
-}
-
-.refineButtons {
- display: flex;
- justify-content: space-between;
-}
-
-.refineCheckboxGroup {
- display: flex;
- flex-wrap: wrap;
-}
-
.refineSearchContainer {
background-color: var(--nypl-colors-ui-bg-default);
}
-.refineSearchInner {
- @include maxWidth;
- padding-bottom: var(--nypl-space-l);
-}