Updated FilterMenu component to match new designs.

NYCPlanning · Aug 8, 2024 · 121f055 · 121f055
1 parent 158580e
commit 121f055
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 134 deletions.
diff --git a/app/components/AdminDropdown/index.tsx b/app/components/AdminDropdown/index.tsx
@@ -26,7 +26,9 @@ export function AdminDropdown({
 }: AdminDropdownProps) {
   return (
     <FormControl id={formId}>
-      <FormLabel onClick={onFormLabelClick}>{formLabel}</FormLabel>
+      <FormLabel onClick={onFormLabelClick} pb={0}>
+        {formLabel}
+      </FormLabel>
       <Select
         isDisabled={isSelectDisabled}
         placeholder="-Select-"

diff --git a/app/components/FilterMenu.tsx b/app/components/FilterMenu.tsx
@@ -1,59 +1,55 @@
 import { ReactNode } from "react";
-import { Button, Flex, Heading, Show, Hide } from "@nycplanning/streetscape";
-import { ChevronDownIcon } from "@chakra-ui/icons";
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Button,
+  Box,
+} from "@nycplanning/streetscape";
 
-export const FilterMenu = ({
-  onClose = () => {
-    return;
-  },
-  children,
-}: FilterMenuProps) => {
-  return (
-    <Flex
-      borderRadius={"base"}
-      padding={{ base: 3, lg: 4 }}
-      background={"white"}
-      direction={"column"}
-      width={{ base: "full", lg: "21.25rem" }}
-      maxW={{ base: "21.25rem", lg: "unset" }}
-      boxShadow={"0px 8px 4px 0px rgba(0, 0, 0, 0.08)"}
+export const FilterMenu = ({ children, defaultIndex }: FilterMenuProps) => (
+  <Accordion
+    allowToggle
+    allowMultiple
+    borderRadius={"base"}
+    padding={{ base: 3, lg: 4 }}
+    background={"white"}
+    direction={"column"}
+    width={{ base: "full", lg: "21.25rem" }}
+    maxW={{ base: "21.25rem", lg: "unset" }}
+    boxShadow={"0px 8px 4px 0px rgba(0, 0, 0, 0.08)"}
+    defaultIndex={defaultIndex}
+  >
+    <AccordionItem
+      borderTopWidth="0"
+      borderBottomWidth="0 !important"
+      value="1"
     >
-      <Hide above="lg">
-        <ChevronDownIcon
-          onClick={() => {
-            onClose();
-          }}
-          role={"button"}
-          width={"full"}
-          height={8}
-          color={"gray.300"}
-          aria-label="Close geography filter menu"
-        />
-      </Hide>
-      <Flex gap={4} direction={"column"}>
-        <Show above="lg">
-          <Heading
-            fontSize={"lg"}
-            textAlign={"left"}
-            fontWeight={"medium"}
-            width={"full"}
-            borderBottomStyle={"dotted"}
-            borderBottomWidth={"1px"}
-            borderBottomColor={"gray.400"}
-          >
-            Filter by District
-          </Heading>
-        </Show>
+      <AccordionButton aria-label="Close geography filter menu" px={0}>
+        <Box
+          as="span"
+          flex="1"
+          textAlign="left"
+          fontSize="large"
+          fontWeight="medium"
+        >
+          Filter by District
+        </Box>
+        <AccordionIcon />
+      </AccordionButton>
+      <AccordionPanel pb={0} borderTopWidth="1px" borderColor="gray.200" px={0}>
         {children}
-        <Button width="full" isDisabled={true}>
+        <Button width="full" isDisabled={true} mt={4}>
           Go to Selected District
         </Button>
-      </Flex>
-    </Flex>
-  );
-};
+      </AccordionPanel>
+    </AccordionItem>
+  </Accordion>
+);
 
 export interface FilterMenuProps {
-  onClose?: () => void;
   children: ReactNode;
+  defaultIndex?: number;
 }
diff --git a/app/components/Overlay.tsx b/app/components/Overlay.tsx
@@ -13,7 +13,7 @@ export const Overlay = ({ children }: OverlayProps) => {
       height={"100vh"}
       width={"100vw"}
       direction={{ base: "column", lg: "row" }}
-      justify={{ base: "flex-end", lg: "space-between" }}
+      justify={{ base: "flex-start", lg: "space-between" }}
       align={{ base: "center", lg: "flex-start" }}
       pointerEvents={"none"}
       sx={{

diff --git a/app/components/atlas.client.tsx b/app/components/atlas.client.tsx
@@ -75,30 +75,12 @@ export function Atlas() {
         }
         return isHovering ? "pointer" : "grab";
       }}
-      widgets={[ZoomControls, CompassControls]}
+      widgets={isMobile ? [] : [ZoomControls, CompassControls]}
     >
       <Map
         mapStyle={"https://tiles.planninglabs.nyc/styles/positron/style.json"}
+        attributionControl={isMobile ? false : true}
       ></Map>
-      <img
-        style={
-          isMobile
-            ? {
-                position: "absolute",
-                top: "0.5rem",
-                left: "0.5rem",
-                height: "2rem",
-              }
-            : {
-                position: "absolute",
-                bottom: "2.5rem",
-                right: "1rem",
-                height: "2rem",
-              }
-        }
-        alt="NYC Planning"
-        src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png"
-      />
     </DeckGL>
   );
 }
diff --git a/app/root.tsx b/app/root.tsx
@@ -2,8 +2,10 @@ import {
   StreetscapeProvider,
   Box,
   Heading,
+  VStack,
   Show,
-  HStack,
+  Hide,
+  Flex,
 } from "@nycplanning/streetscape";
 import {
   Links,
@@ -145,35 +147,32 @@ export default function App() {
   ) => setSearchParams(nextSearchParams, { replace: true });
 
   const AdminDropdowns = () => (
-    <>
+    <VStack>
       <DistrictTypeDropdown
         selectValue={districtType}
         updateSearchParams={updateSearchParams}
       />
-      <HStack spacing={2} width={"full"}>
-        {districtType !== "ccd" ? (
-          <>
-            <BoroughDropdown
-              selectValue={boroughId}
-              updateSearchParams={updateSearchParams}
-              boroughs={loaderData.boroughs}
-            />
-            <CommunityDistrictDropdown
-              boroughId={boroughId}
-              selectValue={districtId}
-              communityDistricts={loaderData.communityDistricts}
-              updateSearchParams={updateSearchParams}
-            />
-          </>
-        ) : (
-          <CityCouncilDistrictDropdown
-            selectValue={districtId}
-            cityCouncilDistricts={loaderData.cityCouncilDistricts}
-            updateSearchParams={updateSearchParams}
-          />
-        )}
-      </HStack>
-    </>
+      <BoroughDropdown
+        selectValue={boroughId}
+        updateSearchParams={updateSearchParams}
+        boroughs={loaderData.boroughs}
+      />
+
+      {districtType !== "ccd" ? (
+        <CommunityDistrictDropdown
+          boroughId={boroughId}
+          selectValue={districtId}
+          communityDistricts={loaderData.communityDistricts}
+          updateSearchParams={updateSearchParams}
+        />
+      ) : (
+        <CityCouncilDistrictDropdown
+          selectValue={districtId}
+          cityCouncilDistricts={loaderData.cityCouncilDistricts}
+          updateSearchParams={updateSearchParams}
+        />
+      )}
+    </VStack>
   );
 
   return (
@@ -185,15 +184,33 @@ export default function App() {
               <Atlas />{" "}
               <Overlay>
                 <Show above="lg">
-                  <FilterMenu>
+                  <FilterMenu defaultIndex={0}>
                     <AdminDropdowns />
                   </FilterMenu>
                 </Show>
-                <Outlet
-                  context={{
-                    children: AdminDropdowns(),
-                  }}
-                />
+                <Hide above="lg">
+                  <FilterMenu>
+                    <AdminDropdowns />
+                  </FilterMenu>
+                </Hide>
+                <Flex
+                  direction={{ base: "column-reverse", lg: "column" }}
+                  justify={{ base: "flex-start", lg: "space-between" }}
+                  align={"flex-end"}
+                  height={"full"}
+                  width={"full"}
+                  gap={3}
+                  pointerEvents={"none"}
+                >
+                  <Outlet />
+                  <Box>
+                    <img
+                      style={{ height: "1.5rem" }}
+                      alt="NYC Planning"
+                      src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png"
+                    />
+                  </Box>
+                </Flex>
               </Overlay>
             </>
           )}

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx