Closed jstrothman closed 2 months ago
If this enhancement is done, it should be implemented across all guides.
@cantsin how large of a task is this? Low priority but if low effort then perhaps we pick it up
Ooh if we do this, https://guides.18f.gov/engineering/tools/project-setup/ might be a good test page. it looks like USWDS uses javascript to add usa-current
class attributes to the sidenav. That code might be here: https://github.com/uswds/uswds/blob/develop/packages/usa-in-page-navigation/src/index.js -- assuming that our guides are up to date wrt USWDS versions (and we seem to be on 3.8.0
compared to the latest version 3.8.1
) I think this could be potentially a minor lift. But. I'm not sure why this isn't enabled by default.
Maybe we can have an engineer pair with a designer on this one?
That would be great to have a pairing ticket :) - moving this to candidate for prioritization
If we discover a bug - consider an upstream bug fix :)
I would stick with the bold active link style used in the example/screenshot above. I'm hesitant to suggest a new link style not already in the design system, in response to the issue's comment "Should we do something a bit more visible than the default darker gray/bold treatment for the active link" @caleywoods @bpdesigns (thoughts?)
I agree unless there is a reason existing styles won't work
@a-chappelear @bpdesigns @cantsin
James, the USWDS GitHub link you listed is for the in-page navigation component which differs from the sidenav component. I dug into the USDS site and they have a setCurrentLink
within app.js
. It seems reasonable that we could duplicate this code in our own JavaScript and get it to work with some tweaking.
https://sprint.usds.gov/assets/js/app.js - The odd bit here is I don't see this in their codebase (the file or the code) after spending a few minutes looking.
Edit: Here's the code in app.js
I was looking for, different repo: https://github.com/usds/discovery-sprint-guide/blob/main/assets/js/app.js#L10
If we discover a bug - consider an upstream bug fix :)
No upstream bugfix here, the out of the box navigation highlight code works for the in page navigation component but the navigation component being used for the guides site (and most 11ty sites based on the original template used) is the side navigation component which doesn't support the highlighting out of the box.
Background The USDS Discovery Sprint Guide, which also uses the Federalist template with sidenav, highlights the active sidenav section as you scroll. This would help our readers, particularly on our very long pages. Should we do something a bit more visible than the default darker gray/bold treatment for the active link?![Screen Shot 2021-01-04 at 4 44 27 PM](https://user-images.githubusercontent.com/1080991/103582590-26f71300-4eac-11eb-973b-5d1613bb1bb1.png)
Acceptance criteria
Tasks
Definition of done