Merge pull request #388 from NYPL/main

Locations filter vqa/qa 2
NYPL · Nov 1, 2024 · a04e9c6 · a04e9c6
2 parents 356af6b + e4545ec
commit a04e9c6
Show file tree

Hide file tree

Showing 20 changed files with 191 additions and 139 deletions.
diff --git 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
@@ -80,7 +80,7 @@ describe("Advanced Search Form", () => {
   it("can check location checkboxes", async () => {
     render(<AdvancedSearch isAuthenticated={true} />)
     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
@@ -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(
         <SearchResults
@@ -79,12 +79,12 @@ 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 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(
         <SearchResults
@@ -93,7 +93,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 cancel = screen.getByText("Cancel")
       await userEvent.click(cancel)

diff --git 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<TextInputRefType>()
   const notificationRef = useRef<HTMLDivElement>()
@@ -153,7 +153,7 @@ export default function AdvancedSearch({
         <Box tabIndex={-1} ref={notificationRef}>
           {alert && <Banner type="negative" content={errorMessage} mb="s" />}
         </Box>
-        <Heading level="h2">Advanced Search</Heading>
+        <Heading level="h2">Advanced search</Heading>
         <Form
           id="advancedSearchForm"
           // We are using a post request on advanced search when JS is disabled
@@ -164,7 +164,7 @@ export default function AdvancedSearch({
           onSubmit={handleSubmit}
         >
           <Flex flexDirection={{ base: "column", md: "row" }}>
-            <Box id="advancedSearchLeft" gap="grid.s">
+            <Flex id="advancedSearchLeft" gap="s" direction="column">
               {textInputFields.map(({ name, label }) => {
                 return (
                   <FormField key={name}>
@@ -200,16 +200,17 @@ export default function AdvancedSearch({
                 </Select>
               </FormField>
               <FormField>{<DateForm {...dateFormProps} />}</FormField>
-            </Box>
+            </Flex>
             <Flex direction="column" gap="l">
               <SearchFilterCheckboxField
                 options={searchAggregations.buildingLocation}
                 name="location"
-                label="Location"
+                label="Item location"
                 handleCheckboxChange={(e) =>
                   handleCheckboxChange("buildingLocation", e)
                 }
                 searchFormState={searchFormState["filters"].buildingLocation}
+                gridOptions={{ min: 1, max: 1 }}
               />
               <SearchFilterCheckboxField
                 options={materialTypeOptions}

diff --git a/src/components/ItemFilters/ActiveFilters.tsx b/src/components/ItemFilters/ActiveFilters.tsx
@@ -0,0 +1,27 @@
+import { Box, TagSet, Text } from "@nypl/design-system-react-components"
+
+const ActiveFilters = ({ filterName, onClick, tagSetData }) => {
+  return (
+    <Box display="flex" flexDirection={{ base: "column", md: "row" }} mb="l">
+      <Text
+        display="block"
+        fontSize="desktop.body.body2"
+        fontWeight="bold"
+        mr={{ base: "0", md: "s" }}
+        mb={{ base: "xxs", md: 0 }}
+        lineHeight="--nypl-lineHeights-taller"
+      >
+        Active filters
+      </Text>
+      <TagSet
+        id={`${filterName}-applied-filters`}
+        isDismissible
+        type="filter"
+        onClick={onClick}
+        tagSetData={tagSetData}
+      />
+    </Box>
+  )
+}
+
+export default ActiveFilters
diff --git a/src/components/ItemFilters/ItemFilters.tsx b/src/components/ItemFilters/ItemFilters.tsx
@@ -6,9 +6,7 @@ import {
   MultiSelect,
   SearchBar,
   Box,
-  Text,
   Label,
-  TagSet,
   type TagSetFilterDataProps,
 } from "@nypl/design-system-react-components"
 import type {
@@ -22,6 +20,7 @@ import {
   buildItemFilterQuery,
   removeValueFromFilters,
 } from "../../utils/itemFilterUtils"
+import ActiveFilters from "./ActiveFilters"
 
 interface ItemFilterContainerProps {
   itemAggregations: Aggregation[]
@@ -200,31 +199,13 @@ const ItemFilters = ({
         />
       </Box>
       {filtersAreApplied ? (
-        <Box
-          display="flex"
-          flexDirection={{ base: "column", md: "row" }}
-          mb="m"
-        >
-          <Text
-            display="block"
-            fontSize="desktop.body.body2"
-            fontWeight="bold"
-            mr={{ base: "0", md: "s" }}
-            mb={{ base: "xxs", md: 0 }}
-            lineHeight={2}
-          >
-            Active filters
-          </Text>
-          <TagSet
-            id="bib-details-applied-filters"
-            isDismissible
-            type="filter"
-            onClick={async (filterToRemove: TagSetFilterDataProps) => {
-              await handleRemoveFilter(filterToRemove.id)
-            }}
-            tagSetData={appliedFiltersTagSetData}
-          />
-        </Box>
+        <ActiveFilters
+          filterName="bib-details"
+          onClick={async (filterToRemove: TagSetFilterDataProps) => {
+            await handleRemoveFilter(filterToRemove.id)
+          }}
+          tagSetData={appliedFiltersTagSetData}
+        />
       ) : null}
     </>
   )

diff --git a/src/components/RefineSearch/CancelSubmitButtonGroup.tsx b/src/components/RefineSearch/CancelSubmitButtonGroup.tsx
@@ -20,7 +20,18 @@ const CancelSubmitButtonGroup = ({
     ? "actionSearch"
     : "check"
   return (
-    <ButtonGroup id={`${formName}-buttons`}>
+    // @ts-ignore
+    <ButtonGroup mb={0} id={`${formName}-buttons`} layout="row-reverse">
+      <Button
+        data-testid={`submit-${formName}-button`}
+        id={`submit-${formName}`}
+        type="submit"
+        buttonType="primary"
+        isDisabled={disableSubmit}
+      >
+        <Icon name={submitIcon} align="left" size="large" />
+        {submitLabel}
+      </Button>
       <Button
         data-testid={`clear-${formName}-button`}
         onClick={cancelHandler}
@@ -32,16 +43,6 @@ const CancelSubmitButtonGroup = ({
         <Icon name="actionDelete" align="left" size="large" />
         {cancelLabel}
       </Button>
-      <Button
-        data-testid={`submit-${formName}-button`}
-        id={`submit-${formName}`}
-        type="submit"
-        buttonType="primary"
-        isDisabled={disableSubmit}
-      >
-        <Icon name={submitIcon} align="left" size="large" />
-        {submitLabel}
-      </Button>
     </ButtonGroup>
   )
 }

diff --git a/src/components/RefineSearch/RefineSearch.test.tsx b/src/components/RefineSearch/RefineSearch.test.tsx
@@ -12,7 +12,7 @@ import {
 jest.mock("next/router", () => jest.requireActual("next-router-mock"))
 
 const openRefineSearch = async () => {
-  const refineButton = screen.getByText("Refine Search")
+  const refineButton = screen.getByText("Filter results")
   await userEvent.click(refineButton)
 }
 const apply = async () => {

diff --git a/src/components/RefineSearch/RefineSearch.tsx b/src/components/RefineSearch/RefineSearch.tsx
@@ -1,5 +1,6 @@
 import type { TextInputRefType } from "@nypl/design-system-react-components"
 import {
+  Flex,
   Box,
   Button,
   HorizontalRule,
@@ -27,7 +28,7 @@ import CancelSubmitButtonGroup from "./CancelSubmitButtonGroup"
 import SearchFilterCheckboxField from "./SearchFilterCheckboxField"
 
 const fields = [
-  { value: "buildingLocation", label: "Location" },
+  { value: "buildingLocation", label: "Item location" },
   { value: "materialType", label: "Format" },
   { value: "language", label: "Language" },
   { value: "dateAfter", label: "Start Year" },
@@ -143,27 +144,33 @@ const RefineSearch = ({
   }
 
   return (
-    <Box className={styles.refineSearchContainer}>
+    <Box
+      mt={{ md: refineSearchClosed ? "-4" : 0, base: 0 }}
+      width={{ md: "fit-content" }}
+      alignSelf="left"
+      className={styles.refineSearchContainer}
+    >
       {refineSearchClosed ? (
         <Button
+          width="100%"
           ref={refineOrCancelRef}
           onClick={toggleRefine}
           id="refine-search"
           buttonType="secondary"
           backgroundColor="ui.white"
-          className={styles.refineSearchButton}
         >
-          Refine Search
+          <Icon />
+          Filter results
         </Button>
       ) : (
-        <Form
-          className={styles.refineSearchInner}
-          id="refine-search"
-          onSubmit={handleSubmit}
-        >
-          <HorizontalRule mb={0} />
-          <Box className={styles.refineButtons}>
+        <Form id="refine-search" onSubmit={handleSubmit}>
+          <HorizontalRule mb={0} mt="s" />
+          <Flex
+            flexDirection={{ base: "column-reverse", md: "row" }}
+            justifyContent={{ md: "space-between", base: "center" }}
+          >
             <Button
+              margin={0}
               onClick={toggleRefine}
               id="cancel-refine"
               buttonType="secondary"
@@ -179,7 +186,7 @@ const RefineSearch = ({
               submitLabel="Apply filters"
               cancelLabel="Clear filters"
             />
-          </Box>
+          </Flex>
           <HorizontalRule m={0} />
           {filters}
         </Form>

diff --git 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 (
       <Checkbox
         id={value}
         key={value}
         value={value}
-        labelText={`${label} ${count ? `(${count})` : ""}`}
+        labelText={
+          <>
+            {label}
+            {labelCount}
+          </>
+        }
       />
     )
   })