Add multiselect projects field to state calculator #21
Conversation
## Description
This implements most of the spec'd design. There are some significant
pieces still missing. They're tracked in Asana, but just as a summary:
- Multiple selection of projects.
- Adding authority logos to the bottom of the page.
- Handling the case of entering a location outside RI.
- Adding an optional email field for people to join the mailing list.
In addition, there are some more pieces missing before this frontend
is ready to replace the existing IRA calculator wholesale:
- Spanish localization
- Analytics
- Appearance customizability via CSS
### Guide to new code
- New .html page for the RI calculator, which pretty much just has the
embed. It's included in the Parcel targets, which means it will be
built and deployed. It's not ready for the public yet, so it uses a
meta tag to disable search engine indexing.
- `state-calculator.ts` is the custom HTML element. This contains all
the state management.
- `state-incentive-details.ts` is the view layer.
- A couple of sub-parts are factored out: `utility-selector.ts` and
`icon-tab-bar.ts`.
- `calculator-types-v1.ts` corresponds to the shape of the API
responses. This is manually maintained right now, not generated
from the API in any way; eventually it'd be good to change that.
- `projects.ts` has icons and labels for the various projects.
## Test Plan
- Enter a RI zip code. 02807 for Block Island, 02861 for Providence
(RI Energy only), 02814 for Pascoag (RIE and PUD available).
- Fill in the rest of the form, click Calculate. Look at results. In
the 02814 case, switch to the other utility and make sure the
incentives reload.
- Click the pill buttons to switch projects.
- Click the "Learn more" / "Visit site" buttons.
Resize the window to look at the three possible layouts. (1, 2, or 3
columns of incentive cards.)
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
I noticed that the select stays focused if I hit tab, even though the next field appears to be focused if I hit enter then one of the multiselect items gets toggled. I can't reproduce this on the shoelace docs. It could be something to do with our zip code field? Or it could be a missing event handler? 
|
@RandomEtc I have fixed this behavior so that if you hit tab on the open multiselect, it closes the dropdown but stays focused on the select and if you hit tab again it moves on to the next box (the zip). |
@oyamauchi Did a rebase, please take a look again! |
Nice! Looks good to me. |
Yeah, I asked the Shoelace creator about it and he said that the default behavior should be what I've corrected it to. I suspect there might be some tricky nuance in how shoelace elements interact with native html elements. |
Added a multiselect option for the interested projects field in the state calculator, leveraging shoelace (https://shoelace.style/components/select).