Merge pull request #692 from samvera-labs/sections-ui

Fix sections UI for non-collapsible structures

src/components/StructuredNavigation/StructuredNavigation.js

@@ -211,12 +211,15 @@ const StructuredNavigation = ({ showAllSectionsButton = false, sectionsHeading =
   return (
     <div className={cx(
       'ramp--structured-nav',
-      hasCollapsibleStructRef.current ? ' display' : ''
+      showAllSectionsButton && !playlist.isPlaylist ? ' display' : ''
     )}>
-      {hasCollapsibleStructRef.current &&
+      {showAllSectionsButton && !playlist.isPlaylist &&
         <div className='ramp--structured-nav__sections'>
-          <span className='ramp--structured-nav__sections-text'>{sectionsHeading}</span>
-          <CollapseExpandButton numberOfSections={structureItemsRef.current?.length} />
+          <span className={cx(
+            'ramp--structured-nav__sections-text',
+            hasRootRangeRef.current && 'hidden' // hide 'Sections' text when a root Range exists
+          )}>{sectionsHeading}</span>
+          {hasCollapsibleStructRef.current && <CollapseExpandButton numberOfSections={structureItemsRef.current?.length} />}
         </div>
       }
       <div className="ramp--structured-nav__border">

src/components/StructuredNavigation/StructuredNavigation.md

@@ -1,7 +1,7 @@
 StructuredNavigation component, renders any available structural properties in a given IIIF manifest. This component reads data from state provided through Contexts, therefore it should be wrapped by the context providers (both Manifest and Player as seen below).
 
 `StructuredNavigation` component has the following prop;
-- `showAllSectionsButton`: accepts a Boolean value, which has a default value of `false` and is _not required_. This allows to display the collapse/expand all sections button above the structure for manifests with collapsible structures.
+- `showAllSectionsButton`: accepts a Boolean value, which has a default value of `false` and is _not required_. This allows to display the collapse/expand all sections button with a text heading (given as the value for the `sectionsHeading` prop) above structures. Collapse/expand all sections button is displayed only for manifests with collapsible structures even when this prop is turned on.
 - `sectionsHeading`: accepts a String value, which has a default value of `Sections` and is _not required_. This allows to customize the text that is shown next to collapse/expand all sections button at the top of collapsible structures.
 
 To import this component from the library;

src/components/StructuredNavigation/StructuredNavigation.scss

@@ -7,7 +7,7 @@
     margin-top: 1em;
     display: flex;
     justify-content: space-between;
-    padding: 0.5em 0.5em 0;
+    padding: 0.5em;
     background-color: $primaryLightest;
     border: 1px solid $primaryLight;
     border-radius: 0.25em 0.25em 0 0;
@@ -16,6 +16,9 @@
     .ramp--structured-nav__sections-text {
       font-weight: bold;
       font-size: 1.25em;
+      &.hidden {
+        visibility: hidden;
+      }
     }
 
     .ramp--structured-nav__collapse-all-btn {
@@ -25,7 +28,7 @@
       border: none;
       border-radius: 0.3em;
       cursor: pointer;
-      margin-bottom: 0.5rem;
+      align-items: flex-end;
 
       .arrow {
         border: solid $primaryLightest;