Skip to content
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

Implement Wayfinder 2.1 #565

Merged
merged 5 commits into from
Jun 2, 2022
Merged

Implement Wayfinder 2.1 #565

merged 5 commits into from
Jun 2, 2022

Conversation

nasaownsky
Copy link
Collaborator

Description of the change

Added new Wayfinder as requested in Issue, and removed scrolljacking.

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 #515
Closes #523

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
Copy link

coveralls commented May 6, 2022

Pull Request Test Coverage Report for Build 2346506247

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

Details

  • 58 of 75 (77.33%) changed or added relevant lines in 6 files are covered.
  • 6 unchanged lines in 2 files lost coverage.
  • Overall coverage decreased (-0.5%) to 83.81%

Changes Missing Coverage Covered Lines Changed/Added Lines %
spotlight-client/src/NarrativeLayout/NarrativeNavigation/AdvanceLink.tsx 9 11 81.82%
spotlight-client/src/NarrativeLayout/NarrativeNavigation/SectionLinks.tsx 6 8 75.0%
spotlight-client/src/NarrativeLayout/NarrativeNavigation/ProgressBar.tsx 11 16 68.75%
spotlight-client/src/NarrativeLayout/NarrativeNavigation/Wayfinder.tsx 30 38 78.95%
Files with Coverage Reduction New Missed Lines %
spotlight-client/src/NarrativeLayout/NarrativeNavigation/AdvanceLink.tsx 1 73.08%
spotlight-client/src/UiLibrary/Chevron.tsx 5 8.33%
Totals Coverage Status
Change from base Build 2303844491: -0.5%
Covered Lines: 2064
Relevant Lines: 2330

💛 - Coveralls

Copy link
Contributor

@terryttsai terryttsai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a small question otherwise it looks great!


return (
<Container>
<Bar scrolled={percent || scrolledPercent} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When do we use scrolledPercent instead of percent?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personally I like the smoothly-updating progress bar with scrolledPercent rather than the percent we're passing in that's active section / total sections.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldCloseOnOverlayClick={false}
>
<ModalHeading>
Introducing <strong>Wayfinder 2.1</strong>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we want to tell our users "Introducing Wayfinder 2.1"? What is Wayfinder, should users know about this?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's more like a placeholder. Final copy is up to @hobuobi

Copy link

@hobuobi hobuobi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apologies for the late review, but this is generally looks great; thank you so much for the detailed work! A few comments:

  • Would make the entire bar clickable to open and close the Table of Contents, not just the pill to the left.
  • After clicking a section in the Table of Contents, the bar should close.
  • Arrow-blinking should only happen for the first section of the page, and should start 3 seconds after landing there.
  • For now, we can get rid of the introduction modal ("Introducing Wayfinder 2.2").
  • Now that we aren't automatically adjusting the position of the page, the user can sometimes find themselves in a large whitespace between sections. We should consider reducing the amount of space between sections to minimize this effect. (EDIT: You can ignore this one; looking at some of the live Spotlight pages, I think the visualizations take up enough space to avoid this problem.)
  • The Racial Disparities is completely broken for me on all states. This might just be due to a data issue that I'm debugging on my side though, so if it's still working for others, it's probably just because of that.

@nasaownsky
Copy link
Collaborator Author

@hobuobi a few comments about requested changes:

  1. Making the entire bar clickable would result next/previous buttons working incorrectly, triggering the bar after clicking on them.
  2. The Racial Disparities works perfectly in demo mode, so I assume this problem is on your side.

@terryttsai
Copy link
Contributor

Making the entire bar clickable would result next/previous buttons working incorrectly, triggering the bar after clicking on them.

What if you try adding in event.stopPropagation() when handling the next/prev button events? Then that should prevent the bar from being triggered.

@nasaownsky
Copy link
Collaborator Author

nasaownsky commented May 19, 2022

What if you try adding in event.stopPropagation() when handling the next/prev button events? Then that should prevent the bar from being triggered.

Thanks, it worked! Also, after adding Maine there's some strange test errors appeared. Could you take a look?

@terryttsai
Copy link
Contributor

@nasaownsky are you talking about test errors that you're getting locally? It looks like all tests passed in your PR.

@nasaownsky
Copy link
Collaborator Author

@terryttsai Hm, strange. I think it's good to go then.

@nasaownsky
Copy link
Collaborator Author

What's your thoughts, @hobuobi?

Copy link

@hobuobi hobuobi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of this looks good to me!! Thank you so much @nasaownsky :)

@terryttsai terryttsai merged commit 6408abc into main Jun 2, 2022
@terryttsai terryttsai deleted the nasaownsky/523-new-wayfinder branch June 2, 2022 19:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement Wayfinder 2.1 Fix (or remove) scrolljacking
4 participants