POC not using a modal for mobile view

NYPL · Nov 20, 2023 · f15c6d0 · f15c6d0
1 parent 254a2d5
commit f15c6d0
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/__test__/fixtures/testAggregations.js b/__test__/fixtures/testAggregations.js
@@ -39,14 +39,9 @@ export const normalAggs = [
         label: "Text",
       },
       {
-        value: "AUG. 23, 2021-CURRENT",
+        value: "E-BOOK",
         count: 109,
-        label: "AUG. 23, 2021-CURRENT",
-      },
-      {
-        value: "FEB. 15/22, 2021 - AUG. 16, 2021",
-        count: 24,
-        label: "FEB. 15/22, 2021 - AUG. 16, 2021",
+        label: "E-BOOK",
       },
     ],
   },

diff --git a/src/components/ItemFilters/FiltersContainer.tsx b/src/components/ItemFilters/FiltersContainer.tsx
@@ -2,9 +2,12 @@ import { useMemo, useRef, useState } from "react"
 import { useRouter } from "next/router"
 import React from "react"
 import {
+  SimpleGrid,
+  Box,
   Heading,
   Text,
   useCloseDropDown,
+  useNYPLBreakpoints,
 } from "@nypl/design-system-react-components"
 
 import styles from "../../../styles/components/ItemFilters.module.scss"
@@ -24,13 +27,18 @@ interface ItemFilterContainerProps {
 
 const ItemFilterContainer = ({ itemAggs }: ItemFilterContainerProps) => {
   const router = useRouter()
+  const { isLargerThanMedium } = useNYPLBreakpoints()
+  const filterClassName = isLargerThanMedium
+    ? styles.filterGroup
+    : styles.filterGroupMobile
 
   const filterData = useRef(
     itemAggs.map((agg: ItemAggregation) => {
       if (agg.field === "location") return new LocationFilterData(agg)
       else return new ItemFilterData(agg)
     })
   ).current
+
   const parsedParams = parseItemFilterQueryParams(router.query)
   const [appliedFilters, setAppliedFilters] = useState(parsedParams)
   const appliedFiltersDisplay = buildAppliedFiltersString(
@@ -41,7 +49,6 @@ const ItemFilterContainer = ({ itemAggs }: ItemFilterContainerProps) => {
   useCloseDropDown(() => setWhichFilterIsOpen(""), ref)
 
   const [whichFilterIsOpen, setWhichFilterIsOpen] = useState("")
-
   const [itemsMatched] = useState(buildItemsString(router.query))
 
   const submitFilters = (selection: string[], field: string) => {
@@ -66,11 +73,11 @@ const ItemFilterContainer = ({ itemAggs }: ItemFilterContainerProps) => {
   }, [router.query])
 
   return (
-    <div className={styles.filtersContainer}>
+    <Box className={styles.filtersContainer}>
       <Text data-testid="filter-text" size="body2" isBold={true}>
         Filter by
       </Text>
-      <div className={styles.filterGroup} ref={ref}>
+      <div className={filterClassName} ref={ref}>
         {filterData.map((field: ItemFilterData) => (
           <ItemFilter
             isOpen={whichFilterIsOpen === field.field}
@@ -82,9 +89,11 @@ const ItemFilterContainer = ({ itemAggs }: ItemFilterContainerProps) => {
           />
         ))}
       </div>
-      <Heading level="h3">{itemsMatched}</Heading>
+      <Heading level="h3" size="heading6">
+        {itemsMatched}
+      </Heading>
       <Text>{appliedFiltersDisplay}</Text>
-    </div>
+    </Box>
   )
 }
 

diff --git a/styles/components/ItemFilters.module.scss b/styles/components/ItemFilters.module.scss
@@ -5,7 +5,7 @@
   word-wrap: break-word;
   z-index: 1;
   background-color: white;
-  width: 230px;
+  width: 200px;
   padding: 10px;
   border: 1px solid var(--nypl-colors-ui-gray-medium);
 }
@@ -19,12 +19,25 @@
 
 .filterGroup {
   display: flex;
+  // flex-wrap: wrap;
   width: fit-content;
 }
 
+.filterGroupMobile {
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  & .itemFilterOptionsContainer {
+    position: relative;
+  }
+  & .itemFilter {
+    margin-bottom: var(--nypl-space-xs);
+  }
+}
+
 .itemFilter {
   background-color: white;
-  width: 230px;
+  width: 200px;
   display: inline-block;
   margin-right: var(--nypl-space-s);
 }