51/draft/capital project detail

[TangoYankee]

Background

@pratishta I think there is some overlap between #14 and #51. This is a ticket specifically to update the Capital Projects Detail panel to match the latest designs. However, I added some features that might come up while working on #14. I integrated as many changes from that working branch as practical to make future branch integration easier. Also, I added you as a co-author because code from your working branch is in here. I am cleaning up the code and adding some tests. But, I wanted to show the draft and start getting feedback. Some of the features are:

Features

• The "MobilePanelSizeControl" is split into its own component, meaning it can be reused from the list of projects panel
• The overlay has its padding changed, to allow for a "full width effect" on mobile
• Added support for "exit" and "back" variations of the navigation button
• Added support for if the user clicks a project directly on the map, while they have filtered projects by a district
  • In an in-person discussion, I think we said "navigation should just pop the history stack". However, on further consideration, navigation should conditionally point to a route. For example, we should go back specifically to the list of projects in a district. Otherwise, users who are clicking projects while filtering by district might keep going back to another project when we want really want them to go back to the list of projects.

Update Aug 16 2024

The code is updated to use the "collapse" chakra transition. It is wrapped around a filler component. This simulates how the commitments are planned to fit into the capital project panel.

The PR will remain a draft until PR #64 is on main and those changes can be integrated smoothly into these changes.

[TangoYankee]

Are you thinking of users who, after they choose a district to filter by, are clicking on those filtered projects on the map?

Yes, my interpretation of the designs is that the navigation icon is an indicator of which panel the user will be sent to. When it's a "close" icon, the user returns the "root" route and all of the content panels are closed. When its a "back arrow" icon, the user will return to the previous panel. This would be the content panel with the list of projects within the active district.

If the user wants to consecutively select multiple projects directly from the map and then scrub through the literal browser history of projects they looked at, then they can use the native browser history buttons.

@TylerMatteo, do you have thoughts?

[TangoYankee]

Closing in favor of #76