-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Restructure project selection #171
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Still TODO:
Figure out whether the empty state is still possible; delete the code if nottechnically possible, though practically not. Leaving the code there until I implement the "no project selected" state.Save selected project to local storagedone
// We're filtering out IRA rebates in favor of state-specific handling. | ||
const allEligible = response.incentives | ||
// Forward compatibility for when only eligible incentives are returned from | ||
// the API, with no eligible flag. | ||
.filter(i => i.eligible === true || i.eligible === undefined) | ||
.filter(i => !isIRARebate(i)); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This filtering is all being done in the backend now; we're not losing any functionality here.
## Description The idea here is to move project selection out of the main form, and have the user select a project after submitting. The headline of the results section is now dynamic. The row-of-pills selector is gone; it's now a dropdown menu on all layouts. There's one major element of the new design that's not implemented here yet: a no-project-selected state. (This implementation automatically selects the alphabetically-first project that has incentives available, which is usually battery storage.) The no-selection state is pretty easily separated from the rest of the work, so I'd rather do that to keep this PR from getting too big. There are no multiple-selection dropdowns anywhere anymore, so I removed that code, but I did it in a separate commit for ease of reviewing. Some design questions: - I changed the down-arrow on the right of the dropdown to purple, as the design says, but is that meant to apply to the dropdowns in the form as well? (I made it do so.) - To implement this, I made it so that the selected item in single-select dropdowns gets a checkmark to the left. (Previously, only multi-select dropdowns got that treatment.) This affects the dropdowns in the form as well. I actually prefer it this way --- better visual indication of which item is selected --- but wanted to make sure that's intentional. - In part of the Figma, the rows in the dropdown have light grey lines separating them, and in another part they don't. I haven't added the lines, but I can if they're supposed to be there. - The background color of the number badge (purple-100) is the same as the color of the active (i.e. hovered) row in the dropdown, which makes the badge just a free-floating number in the active row. Just want to make sure that's intentional. ## Test Plan In all of browsers [Chrome, Safari, Firefox, MobileSafari]: - View the component on all layout widths; make sure it looks nice - Interact with the component with the keyboard. (Nothing about its interaction has changed substantially, but just to make sure.) - Interact with the component with VoiceOver, to make sure the number badge gets announced in an understandable way. (It'll say like `project, battery storage, 1 result` when you're on the main button.)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍🏼
Description
The idea here is to move project selection out of the main form, and
have the user select a project after submitting. The headline of the
results section is now dynamic. The row-of-pills selector is gone;
it's now a dropdown menu on all layouts.
There's one major element of the new design that's not implemented
here yet: a no-project-selected state. (This implementation
automatically selects the alphabetically-first project that has
incentives available, which is usually battery storage.) The
no-selection state is pretty easily separated from the rest of the
work, so I'd rather do that anyway to keep this PR from getting too big.
There are no multiple-selection dropdowns anywhere anymore, so I
removed that code, but I did it in a separate commit for ease of
reviewing.
Some design notes:
I changed the down-arrow on the right of the dropdown to purple, as
the design says. This applies to the dropdowns in the form as well.
To implement this, I made it so that the selected item in
single-select dropdowns gets a checkmark to the left. (Previously,
only multi-select dropdowns got that treatment.) This affects the
dropdowns in the form as well. I actually prefer it this way ---
better visual indication of which item is selected.
The background color of the number badge (purple-100) is the same as
the color of the active (i.e. hovered) row in the dropdown, so
there's a gray border around the badge in the hovered/active state.
Test Plan
Submit the form, select a project other than the first one. Reload
the page, submit the form again, make sure the previously selected
project is restored.
Put in a low income and submit the form. Select "cooking", which
usually has only the IRA rebate card. Put in a high income and submit
again. Make sure "cooking" is not selected (because it has zero
incentives), and the first project that has nonzero incentives is
selected.
In all of browsers [Chrome, Safari, Firefox, MobileSafari]:
View the component on all layout widths; make sure it looks nice
Interact with the component with the keyboard. (Nothing about its
interaction has changed substantially, but just to make sure.)
Interact with the component with VoiceOver, to make sure the number
badge gets announced in an understandable way. (It'll say like
project, battery storage, 1 result
when you're on the main button.)