diff --git a/__test__/fixtures/testAggregations.js b/__test__/fixtures/testAggregations.js index f76108e37..d1d2fd211 100644 --- 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 index e97d4a26e..0b55c10ae 100644 --- 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,6 +27,10 @@ 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) => { @@ -31,6 +38,7 @@ const ItemFilterContainer = ({ itemAggs }: ItemFilterContainerProps) => { 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 ( -