Changes from feedback in code-review

src/components/MetadataDisplay/MetadataDisplay.js

@@ -15,7 +15,9 @@ const MetadataDisplay = ({
   displayOnlyCanvasMetadata = false,
   displayAllMetadata = false,
   displayTitle = true,
-  showHeading = true
+  showHeading = true,
+  itemHeading = 'Item Details',
+  sectionHeaading = 'Section Details',
 }) => {
   const { manifest, canvasIndex } = useManifestState();
 
@@ -81,7 +83,7 @@ const MetadataDisplay = ({
   const setCanvasMetadataInState = () => {
     let canvasData = canvasesMetadataRef.current
       .filter((m) => m.canvasindex === canvasIndex)[0].metadata;
-    if (!displayTitle && displayOnlyCanvasMetadata) {
+    if (!displayTitle) {
       canvasData = canvasData.filter(md => md.label.toLowerCase() != 'title');
     }
     setCanvasMetadata(canvasData);
@@ -107,7 +109,7 @@ const MetadataDisplay = ({
         <div className="ramp--metadata-display-content">
           {showManifestMetadata && manifestMetadata?.length > 0 && (
             <React.Fragment>
-              {displayAllMetadata && <p>Manifest Details</p>}
+              {displayAllMetadata && <p>{itemHeading}</p>}
               {manifestMetadata.map((md, index) => {
                 return (
                   <React.Fragment key={index}>
@@ -120,7 +122,7 @@ const MetadataDisplay = ({
           )}
           {showCanvasMetadata && canvasMetadata?.length > 0 && (
             <React.Fragment>
-              {displayAllMetadata && <p>Canvas Details</p>}
+              {displayAllMetadata && <p>{sectionHeaading}</p>}
               {canvasMetadata.map((md, index) => {
                 return (
                   <React.Fragment key={index}>
@@ -153,6 +155,8 @@ MetadataDisplay.propTypes = {
   displayAllMetadata: PropTypes.bool,
   displayTitle: PropTypes.bool,
   showHeading: PropTypes.bool,
+  itemHeading: PropTypes.string,
+  sectionHeaading: PropTypes.string,
 };
 
 export default MetadataDisplay;

src/components/MetadataDisplay/MetadataDisplay.md

@@ -1,10 +1,12 @@
-MetadataDisplay component, renders any available metadata in a given IIIF manifest. By default it displays metadata relevant to the Manifest, and can be customized to show Canvas level metadata using the following props. This component reads manifest data from central state management provided by Contexts. Thus it should be wrapped by context providers using `IIIFPlayer` which is the component in Ramp providing these out of the box.
+MetadataDisplay component, renders any available metadata in a given IIIF manifest. By default it displays metadata relevant to the Manifest, and can be customized to show Canvas level metadata using the following props. Any changes to `displayTitle` prop is applied to both Manifest and Canvas metadata. This component reads manifest data from central state management provided by Contexts. Thus it should be wrapped by context providers using `IIIFPlayer` which is the component in Ramp providing these out of the box.
 
 `MetadataDisplay` component allows the following props;
 - `displayTitle`: accepts a Boolean value, which has a default value of `true` and is _not required_. This allows to hide the title in the `MetadataDisplay` component if it's included in the metadata of the IIIF manifest. In some use-cases where the title is already visible in some other part of the page, this can  be used to avoid displaying the title in multiple places.
 - `showHeading`: accepts a Boolean value, which has a default value of `true` and is _not required_. This enables to hide the `Details` heading on top of the component allowing to customize the user interface.
 - `displayOnlyCanvasMetadata`: accepts a Boolean value, which has a default value of `false` and is _not required_. Setting this to `true` indicates Ramp to read and display metadata for the current Canvas  instead of Manifest.
 - `displayAllMetadata`: accepts a Boolean value, which has a default value of `false` and is _not required_. Setting this to `true` indicates Ramp to read and display metadata relevant for both current Canvas and Manifest.
+- `itemHeading`: accepts a String value, which has a default value of '`Item Details`' and is _not required_. This allows to customize the title for the Manifest level metadata list in the component.
+- `sectionHeading`: accepts a String value, which has a default value of '`Section Details`' and is _not required_. This allows to customize the title for the Canvas level metadata list in the component
 
 To import this component from the library;
 

src/components/MetadataDisplay/MetadataDisplay.test.js

@@ -151,7 +151,7 @@ describe('MetadataDisplay component', () => {
         expect(console.log).toBeCalledTimes(2);
       });
 
-      it('set to true with displayTitle set to false displays only title in Canvas metadata', () => {
+      it('set to true with displayTitle set to false hides title in all metadata', () => {
         const MetadataDisp = withManifestProvider(MetadataDisplay, {
           initialState: { manifest: playlistManifest, canvasIndex: 0 },
           displayAllMetadata: true,
@@ -162,9 +162,9 @@ describe('MetadataDisplay component', () => {
         expect(screen.queryByTestId('metadata-display-title')).toBeInTheDocument();
 
         // Has one title fields for only Canvas metadata
-        expect(screen.queryAllByText('Title')).toHaveLength(1);
+        expect(screen.queryAllByText('Title')).toHaveLength(0);
         expect(screen.queryByText('Playlist Manifest [Playlist]')).not.toBeInTheDocument();
-        expect(screen.queryByText('First Playlist Item')).toBeInTheDocument();
+        expect(screen.queryByText('First Playlist Item')).not.toBeInTheDocument();
 
         // console.log is called twice for the 2 canvases without metadata
         expect(console.log).toBeCalledTimes(2);