Implement Expand/Close button in StructuredNav Component

[Dananji]

Description

With the on-going state management refactor using custom hooks (#630), we are able to implement expand/close functionality for each section in the structured navigation in Ramp.
We were not able to do this before due re-rendering in StructuredNavigation component, therefore this functionality was implemented in Avalon code.

Done Looks Like

• Implement expand/close sections button in StructuredNavigation component
• Use a prop that goes into StructuredNavigation component to turn on/off the display of this button
• Document props in styleguidist docs and GitHub wiki
• Test functionality in all supported platforms
• Removed related code in Avalon when this is brought into Avalon

Related work

#644
This work is based off of state management refactor. So if this work is re-purposed when working on this issue it needs to be rebased off main branch.

[abankhele]

1. Click on https://avalon-dev.dlib.indiana.edu/media_objects/3j3332278
2. Observe that the button displays "Close 2 sections."
3. Collapse one of the sections (e.g., Lunchroom Manners). Despite closing the only section that has structure (so everything is actually closed), the button still reads "Close 2 sections."
4. Click the "Close 2 sections" button. It then updates to "Expand 2 sections."

Screen.Recording.2024-11-08.at.11.13.41.AM.mov

[elynema]

In my testing, across all platforms I have observed that the button text does not update if all sections are manually opened or closed:

1. Click button to close all sections
2. Expand all sections individually
3. Button still says 'Expand [x] sections"
4. Click button to expand all sections
5. Manually close all sections individually.
6. Button still says "Close [x] sections" even though all sections are closed.

This happens even if there is only 1 section.

Also across all platforms, if the user loads page and clicks "Close [x] sections" button, then starts playback, the first section does not pop open when playback starts (the second one does).

Private Zenhub Video

[elynema]

Note that aside from these minor issues, the new button is working wonderfully!! I asked Dananji to take a look at the last issue reported here (the first section does not open when playback begins if all sections are closed prior to playback).

@joncameron Do you think we should create new issues for either of the other minor issues above?

[joncameron]

I created issues for both of these: #731 and #732.

[joncameron]

Tested and closed #731 and #732; closing this issue as well. Working great!