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 ( -
+ Filter by -
+
{filterData.map((field: ItemFilterData) => ( { /> ))}
- {itemsMatched} + + {itemsMatched} + {appliedFiltersDisplay} -
+
) } diff --git a/styles/components/ItemFilters.module.scss b/styles/components/ItemFilters.module.scss index f12efc064..3047c3a52 100644 --- 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); }