Direct section links and navigation enhancements

[macfarlandian]

Description of the change

Implements the following behaviors as seen in the mocks:

• hovering over the narrative progress bar reveals individual segments corresponding to sections
• hovering over one of the segments changes its color and reveals a label
• clicking one of the segments scrolls the page directly to that section
• previous/next buttons change color on hover

For more consistent interactions, the segments are always the same size, meaning the overall height of the progress bar now depends on how many sections the narrative contains. Other than that, the existing visual treatment of the progress bar should remain unchanged.

Type of change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Configuration change (adjusts configuration to achieve some end related to functionality, development, performance, or security)

Related issues

Closes #276

Checklists

Development

These boxes should be checked by the submitter prior to merging:

• Manual testing against realistic data has been performed locally

Code review

These boxes should be checked by reviewers prior to merging:

• This pull request has a descriptive title and information useful to a reviewer
• This pull request has been moved out of a Draft state, has no "Work In Progress" label, and has assigned reviewers
• Potential security implications or infrastructural changes have been considered, if relevant

[coveralls]

Pull Request Test Coverage Report for Build 486474528

• 57 of 73 (78.08%) changed or added relevant lines in 6 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.1%) to 64.758%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
spotlight-client/src/NarrativeNavigation/AdvanceLink.tsx	10	14	71.43%
spotlight-client/src/NarrativeNavigation/SectionLinks.tsx	25	37	67.57%

Totals
Change from base Build 481444652:	0.1%
Covered Lines:	1444
Relevant Lines:	2175

---

💛 - Coveralls

[jovergaag]

This looks awesome. Much easier to navigate through the page.

My only feedback is that the SectionNavigation has become quite large, I found myself getting lost in it. Not critical but it might be easier to work with if it is broken up a bit.

[macfarlandian]

@jovergaag yeah ... I tend to agree, though I went back and forth a bit about how to organize that component. Just pushed up a refactor, do you find that more readable?

[jovergaag]

@jovergaag yeah ... I tend to agree, though I went back and forth a bit about how to organize that component. Just pushed up a refactor, do you find that more readable?

Yes! Much more readable. Its more code but I find it much easier to grok. 👍