Implement welcome panel

Desktop: create an accordian welcome panel
Mobile: create a drawer welcome panel

closes #6

app/components/FilterMenu.tsx

@@ -11,7 +11,8 @@ import {
 export const FilterMenu = ({ children, defaultIndex }: FilterMenuProps) => (
   <Accordion
     allowToggle
-    borderRadius={"base"}
+    borderTopRadius={"base"}
+    borderBottomRadius={{ base: "base", lg: "none" }}
     padding={{ base: 3, lg: 4 }}
     background={"white"}
     width={{ base: "full", lg: "21.25rem" }}

app/components/WelcomePanel/WelcomeContent.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from "@testing-library/react";
+import { WelcomeContent } from "./WelcomeContent";
+
+describe("WelcomeContent", () => {
+  it("should have a database section", () => {
+    render(<WelcomeContent />);
+
+    expect(screen.getAllByText(/Capital Projects Database/)[0]).toBeVisible();
+    expect(screen.getByText(/ongoing capital projects/)).toBeVisible();
+  });
+
+  it("should have a how to section", () => {
+    render(<WelcomeContent />);
+
+    expect(screen.getByText(/How to Use/)).toBeVisible();
+    expect(screen.getByText(/Select a project/)).toBeVisible();
+  });
+
+  it("should have a more information section with links", () => {
+    render(<WelcomeContent />);
+
+    expect(screen.getByText(/More information/)).toBeVisible();
+    expect(screen.getByText(/To learn more/)).toBeVisible();
+
+    expect(
+      screen.getByRole("link", {
+        name: "The Mayor's Office of Management and Budget",
+      }),
+    ).toHaveAttribute(
+      "href",
+      "https://www.nyc.gov/site/omb/publications/publications.page",
+    );
+    expect(
+      screen.getByRole("link", { name: "Bytes of the Big Apple" }),
+    ).toHaveAttribute(
+      "href",
+      "https://www.nyc.gov/site/planning/data-maps/open-data/dwn-capital-planning-database.page",
+    );
+  });
+});

app/components/WelcomePanel/WelcomeContent.tsx

@@ -0,0 +1,90 @@
+import { Box, Heading, Link, Text } from "@nycplanning/streetscape";
+
+export function WelcomeContent() {
+  return (
+    <>
+      <Box paddingBottom={2}>
+        <Box
+          borderBottomStyle={"solid"}
+          borderBottomColor={"gray.200"}
+          borderBottomWidth={"1px"}
+          marginBottom={3}
+        >
+          <Heading fontSize="medium" fontWeight="medium" lineHeight={"32px"}>
+            Capital Projects Database
+          </Heading>
+        </Box>
+        <Text fontSize={"small"}>
+          The Capital Projects Database includes information on New York City’s
+          potential, planned, and ongoing capital projects. To better help you
+          understand New York City’s capital project portfolio within and across
+          major agencies, we have organized mapped projects in this portal.
+          Unmapped projects, such as the purchase of vehicles or digital
+          infrastructure, are not included in this tool.
+        </Text>
+      </Box>
+      <Box>
+        <Box
+          borderBottomStyle={"solid"}
+          borderBottomColor={"gray.200"}
+          borderBottomWidth={"1px"}
+          marginBottom={3}
+        >
+          <Heading fontSize="medium" fontWeight="medium" lineHeight={"32px"}>
+            How to Use This Tool
+          </Heading>
+        </Box>
+        <Text fontSize={"small"}>
+          Select a project on the map to learn more about the relevant agencies
+          and capital commitments, or filter by specific geographies to see all
+          projects in that area.
+          {/* TODO: add this line when export feature is added */}
+          {/* You can also export your selection as a CSV table
+        or ESRI Shapefile. */}
+        </Text>
+      </Box>
+      <Box>
+        <Box
+          borderBottomStyle={"solid"}
+          borderBottomColor={"gray.200"}
+          borderBottomWidth={"1px"}
+          marginBottom={3}
+        >
+          <Heading
+            fontSize={"medium"}
+            fontWeight={"medium"}
+            lineHeight={"32px"}
+          >
+            More information
+          </Heading>
+        </Box>
+        <Text fontSize={"small"}>
+          To learn more about the Capital Projects Database and how New York
+          City invests in building a better future, go to{" "}
+          <Link
+            color={"primary.500"}
+            _hover={{
+              textDecoration: "underline",
+            }}
+            href="https://www.nyc.gov/site/omb/publications/publications.page"
+            isExternal
+          >
+            The Mayor&apos;s Office of Management and Budget
+          </Link>
+          . If you would like to download the complete database, including
+          unmapped projects, you can find it at{" "}
+          <Link
+            color={"primary.500"}
+            _hover={{
+              textDecoration: "underline",
+            }}
+            href="https://www.nyc.gov/site/planning/data-maps/open-data/dwn-capital-planning-database.page"
+            isExternal
+          >
+            Bytes of the Big Apple
+          </Link>
+        </Text>
+      </Box>
+    </>
+  );
+}

app/components/WelcomePanel/WelcomeHeader.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from "@testing-library/react";
+import { WelcomeHeader } from "./WelcomeHeader";
+
+describe("WelcomeHeader", () => {
+  it("should have a heading", () => {
+    render(<WelcomeHeader />);
+    expect(screen.getByText(/Capital Projects Portal/)).toBeVisible();
+  });
+});

app/components/WelcomePanel/WelcomeHeader.tsx

@@ -0,0 +1,15 @@
+import { Heading } from "@nycplanning/streetscape";
+
+export function WelcomeHeader() {
+  return (
+    <Heading
+      flex="1"
+      textAlign={"left"}
+      fontSize="large"
+      fontWeight="medium"
+      lineHeight={"32px"}
+    >
+      Capital Projects Portal
+    </Heading>
+  );
+}

app/components/WelcomePanel/WelcomePanel.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+import { WelcomePanel } from "./WelcomePanel";
+
+describe("WelcomePanel", () => {
+  it("should contain a welcome heading", () => {
+    render(<WelcomePanel />);
+
+    expect(screen.getByText(/Capital Projects Portal/)).toBeVisible();
+  });
+
+  it("should contain welcome content", () => {
+    render(<WelcomePanel />);
+
+    expect(screen.getAllByText(/Capital Projects Database/)[0]).toBeVisible();
+    expect(screen.getByText(/ongoing capital projects/)).toBeVisible();
+  });
+});

app/components/WelcomePanel/WelcomePanel.tsx

@@ -0,0 +1,93 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Drawer,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerOverlay,
+  Flex,
+  Hide,
+  IconButton,
+  Show,
+} from "@nycplanning/streetscape";
+import { WelcomeContent, WelcomeHeader } from ".";
+import { InfoIcon } from "@chakra-ui/icons";
+import { useState } from "react";
+
+export function WelcomePanel() {
+  const [isMobileExpanded, setIsMobileExpanded] = useState(true);
+
+  const toggleMobileExpanded = () =>
+    setIsMobileExpanded((isMobileExpanded) => !isMobileExpanded);
+  return (
+    <>
+      <Show above="lg">
+        <Accordion
+          allowToggle
+          borderBottomRadius={"base"}
+          padding={{ base: 3, lg: 4 }}
+          background={"white"}
+          width={{ base: "full", lg: "21.25rem" }}
+          maxW={{ base: "21.25rem", lg: "unset" }}
+          boxShadow={"0px 8px 4px 0px rgba(0, 0, 0, 0.08)"}
+          borderTopWidth={"1px"}
+          borderTopColor={"gray.50"}
+          defaultIndex={0}
+        >
+          <AccordionItem border="none">
+            <AccordionButton aria-label="Toggle welcome panel" px={0}>
+              <WelcomeHeader />
+              <AccordionIcon />
+            </AccordionButton>
+            <AccordionPanel pb={0} px={0}>
+              <WelcomeContent />
+            </AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      </Show>
+      <Hide above="lg">
+        <Box width={"21.25rem"} paddingTop={3}>
+          <IconButton
+            aria-label="information about the capital planning portal"
+            icon={<InfoIcon boxSize={5} />}
+            borderColor={"white"}
+            borderStyle="solid"
+            borderWidth="5px"
+            borderRadius={"100%"}
+            color="black"
+            minHeight="auto"
+            minWidth="auto"
+            height="fit-content"
+            width="fit-content"
+            backgroundColor={"white"}
+            _hover={{
+              border: "none",
+              backgroundColor: "blackAlpha.100",
+            }}
+            onClick={toggleMobileExpanded}
+          />
+          <Drawer
+            placement="bottom"
+            isOpen={isMobileExpanded}
+            onClose={toggleMobileExpanded}
+          >
+            <DrawerOverlay />
+            <DrawerContent overflowY="auto" borderTopRadius={"12px"}>
+              <Box paddingX={3} paddingY={4}>
+                <Flex paddingBottom={3}>
+                  <WelcomeHeader />
+                  <DrawerCloseButton position={"static"} />
+                </Flex>
+                <WelcomeContent />
+              </Box>
+            </DrawerContent>
+          </Drawer>
+        </Box>
+      </Hide>
+    </>
+  );
+}

app/components/WelcomePanel/index.tsx

@@ -0,0 +1,3 @@
+export { WelcomePanel } from "./WelcomePanel";
+export { WelcomeContent } from "./WelcomeContent";
+export { WelcomeHeader } from "./WelcomeHeader";