Change UI for structured nav to include collapse all button (#686)

* Change UI for structured nav to include collapse all button * Add prop to customize the 'Sections' text on top of structures
samvera-labs · Oct 28, 2024 · 386a585 · 386a585
1 parent 5d3df62
commit 386a585
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 30 deletions.
diff --git a/src/components/StructuredNavigation/StructuredNavigation.js b/src/components/StructuredNavigation/StructuredNavigation.js
@@ -19,7 +19,7 @@ import CollapseExpandButton from './NavUtils/CollapseExpandButton';
  * @param {Object} props
  * @param {String} props.showAllSectionsButton
  */
-const StructuredNavigation = ({ showAllSectionsButton = false }) => {
+const StructuredNavigation = ({ showAllSectionsButton = false, sectionsHeading = 'Sections' }) => {
   const manifestDispatch = useManifestDispatch();
   const playerDispatch = usePlayerDispatch();
 
@@ -214,7 +214,10 @@ const StructuredNavigation = ({ showAllSectionsButton = false }) => {
       hasCollapsibleStructRef.current ? ' display' : ''
     )}>
       {hasCollapsibleStructRef.current &&
-        <CollapseExpandButton numberOfSections={structureItemsRef.current?.length} />
+        <div className='ramp--structured-nav__sections'>
+          <span className='ramp--structured-nav__sections-text'>{sectionsHeading}</span>
+          <CollapseExpandButton numberOfSections={structureItemsRef.current?.length} />
+        </div>
       }
       <div className="ramp--structured-nav__border">
         <div

diff --git a/src/components/StructuredNavigation/StructuredNavigation.md b/src/components/StructuredNavigation/StructuredNavigation.md
@@ -2,6 +2,7 @@ StructuredNavigation component, renders any available structural properties in a
 
 `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.
+- `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;
 

diff --git a/src/components/StructuredNavigation/StructuredNavigation.scss b/src/components/StructuredNavigation/StructuredNavigation.scss
@@ -3,41 +3,55 @@
 .ramp--structured-nav.display {
   display: flow-root;
 
-  .ramp--structured-nav__collapse-all-btn {
-    float: right;
-    width: fit-content;
-
-    background-color: $primaryGreenDark;
-    color: $primaryLightest;
-    padding: 0.5em 0.75em;
-    border: none;
-    border-radius: 0.3em;
-    cursor: pointer;
-    margin-bottom: 0.5rem;
-
-    .arrow {
-      border: solid $primaryLightest;
-      border-width: 0 0.1em 0.1em 0;
-      display: inline-block;
-      padding: 0.25em;
-      margin-left: 0.5em;
+  .ramp--structured-nav__sections {
+    margin-top: 1em;
+    display: flex;
+    justify-content: space-between;
+    padding: 0.5em 0.5em 0;
+    background-color: $primaryLightest;
+    border: 1px solid $primaryLight;
+    border-radius: 0.25em 0.25em 0 0;
+    border-bottom: none;
+
+    .ramp--structured-nav__sections-text {
+      font-weight: bold;
+      font-size: 1.25em;
     }
 
-    .up {
-      transform: rotate(-135deg);
-      -webkit-transform: rotate(-135deg);
-      transition: transform .35s ease-in-out;
-    }
+    .ramp--structured-nav__collapse-all-btn {
+      background-color: $primaryGreenDark;
+      color: $primaryLightest;
+      padding: 0.5em 0.75em;
+      border: none;
+      border-radius: 0.3em;
+      cursor: pointer;
+      margin-bottom: 0.5rem;
+
+      .arrow {
+        border: solid $primaryLightest;
+        border-width: 0 0.1em 0.1em 0;
+        display: inline-block;
+        padding: 0.25em;
+        margin-left: 0.5em;
+      }
 
-    .down {
-      transform: rotate(45deg);
-      -webkit-transform: rotate(45deg);
-      transition: transform .35s ease-in-out;
+      .up {
+        transform: rotate(-135deg);
+        -webkit-transform: rotate(-135deg);
+        transition: transform .35s ease-in-out;
+      }
+
+      .down {
+        transform: rotate(45deg);
+        -webkit-transform: rotate(45deg);
+        transition: transform .35s ease-in-out;
+      }
     }
   }
 
   .ramp--structured-nav__border {
-    margin-top: 2.5em;
+    margin-top: 0 !important;
+    border-radius: 0 0 0.25em 0.25em;
     width: 100%;
   }
 }