UI updates for How-To page

[subaha-cob]

Currently, How-To pages use a tabs, located below the header, to differentiate between sections. UX research has demonstrated that users often miss these tabs as they scroll down the page. To address this issue, the tabs should be replaced by series of drawers, as shown in the wireframe below:

The current UI is shown below for reference:

Complete specs can be found here: https://www.boston.gov/sites/default/files/embed/a/annotated_wireframes.pdf

The "carrot" indicating the state (open/closed) of the drawers has also been shown to be confusing for users, and should be replaced by a +/- symbol indicating open/closed state, respectively. The content of the new drawers is identical to the content previously housed in each tab.

This looks different from the wireframes now. With the $charles-blue and $optimistic-blue-dark colors instead for hover and open states.

[subaha-cob]

Can test the single tab auto-open and mobile styles at: https://d8-ci.boston.gov/departments/neighborhood-development/boston-home-center/get-financial-help-remove-lead-your-home

https://d8-ci.boston.gov/departments/parking-clerk/how-get-resident-parking-permit

[subaha-cob]

There are 3 states: Open, close and hover states:

[subaha-cob]

@carolyn-wang you have had this task for a while now. Where are we at with this task?

[phillipbentonkelly]

I pulled down the branch and from what I see it still needs work, not all 3 states are there. We can discuss/assists later, but preferably separate from the 1pm meetings

[carolyn-wang]

Branch #582 is outdated for this task, do not use. I created a new branch (#583) so that the how-to tabs would be separate from the group of links