diff --git a/src/components/StructuredNavigation/StructuredNavigation.js b/src/components/StructuredNavigation/StructuredNavigation.js index 1bf582e3..b00b26b7 100644 --- a/src/components/StructuredNavigation/StructuredNavigation.js +++ b/src/components/StructuredNavigation/StructuredNavigation.js @@ -211,12 +211,15 @@ const StructuredNavigation = ({ showAllSectionsButton = false, sectionsHeading = return (
- {hasCollapsibleStructRef.current && + {showAllSectionsButton && !playlist.isPlaylist &&
- {sectionsHeading} - + {sectionsHeading} + {hasCollapsibleStructRef.current && }
}
diff --git a/src/components/StructuredNavigation/StructuredNavigation.md b/src/components/StructuredNavigation/StructuredNavigation.md index 8cf382ea..3232f65b 100644 --- a/src/components/StructuredNavigation/StructuredNavigation.md +++ b/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; diff --git a/src/components/StructuredNavigation/StructuredNavigation.scss b/src/components/StructuredNavigation/StructuredNavigation.scss index b9274106..f9bcb3fc 100644 --- a/src/components/StructuredNavigation/StructuredNavigation.scss +++ b/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;