allow label-value-metadata joiner to be set in the config

Author: dnoneill

__tests__/src/components/LabelValueMetadata.test.js

@@ -15,7 +15,7 @@ describe('LabelValueMetadata', () => {
         },
         {
           label: 'Label 2',
-          values: ['Value 2'],
+          values: ['Value 2', 'Value 3'],
         },
       ];
       wrapper = render(
@@ -36,7 +36,7 @@ describe('LabelValueMetadata', () => {
 
     it('renders SanitizedHtml component in dd for each value', () => {
       expect(screen.getByText('Value 1')).toBeInTheDocument();
-      expect(screen.getByText('Value 2')).toBeInTheDocument();
+      expect(screen.getByText('Value 2, Value 3')).toBeInTheDocument();
     });
   });
 
@@ -53,6 +53,34 @@ describe('LabelValueMetadata', () => {
     });
   });
 
+  describe('when the labelValuePair has content and labelValueJoiner is set to a custom variable', () => {
+    beforeEach(() => {
+      labelValuePair = [
+        {
+          label: 'Label 1',
+          values: ['Value 1', 'Value 2'],
+        },
+      ];
+      wrapper = render(
+        <LabelValueMetadata labelValuePairs={labelValuePair} labelValueJoiner="*" />,
+      );
+    });
+
+    it('renders a dt/dd for each label/value pair', () => {
+      expect(wrapper.container.querySelector('dl')).toBeInTheDocument();
+      expect(wrapper.container.querySelectorAll('dt').length).toEqual(1);
+      expect(wrapper.container.querySelectorAll('dd').length).toEqual(1);
+    });
+
+    it('renders correct label in dt', () => {
+      expect(screen.getByText('Label 1')).toBeInTheDocument();
+    });
+
+    it('renders SanitizedHtml component in dd for each value with correct joiner', () => {
+      expect(screen.getByText('Value 1*Value 2')).toBeInTheDocument();
+    });
+  });
+
   describe('when the labelValuePair has a default label', () => {
     beforeEach(() => {
       labelValuePair = [

src/components/AttributionPanel.jsx

@@ -28,6 +28,7 @@ export function AttributionPanel({
   rights = null,
   windowId,
   id,
+  labelValueJoiner,
 }) {
   const { t } = useTranslation();
 
@@ -42,7 +43,7 @@ export function AttributionPanel({
     >
       <CompanionWindowSection>
         { requiredStatement && (
-        <LabelValueMetadata labelValuePairs={requiredStatement} defaultLabel={t('attribution')} />
+        <LabelValueMetadata labelValuePairs={requiredStatement} labelValueJoiner={labelValueJoiner} defaultLabel={t('attribution')} />
         )}
         {
             rights && rights.length > 0 && (
@@ -87,4 +88,5 @@ AttributionPanel.propTypes = {
   })),
   rights: PropTypes.arrayOf(PropTypes.string),
   windowId: PropTypes.string.isRequired,
+  labelValueJoiner: PropTypes.string,
 };

src/components/CanvasInfo.jsx

@@ -16,6 +16,7 @@ export function CanvasInfo({
   canvasMetadata = [],
   index = 1,
   totalSize = 1,
+  labelValueJoiner,
 }) {
   const { t } = useTranslation();
   const id = useId();
@@ -47,7 +48,7 @@ export function CanvasInfo({
       )}
 
       {canvasMetadata && canvasMetadata.length > 0 && (
-        <LabelValueMetadata labelValuePairs={canvasMetadata} />
+        <LabelValueMetadata labelValuePairs={canvasMetadata} labelValueJoiner={labelValueJoiner} />
       )}
       <PluginHook targetName="CanvasInfo" {...pluginProps} />
     </CollapsibleSection>
@@ -60,4 +61,5 @@ CanvasInfo.propTypes = {
   canvasMetadata: PropTypes.array, // eslint-disable-line react/forbid-prop-types
   index: PropTypes.number,
   totalSize: PropTypes.number,
+  labelValueJoiner: PropTypes.string,
 };

src/components/CollectionDialog.jsx

@@ -67,7 +67,7 @@ Placeholder.propTypes = {
  */
 export function CollectionDialog({
   addWindow, collection = null, dialogCollectionPath = [], error = null, hideCollectionDialog,
-  isMultipart = false, manifest, manifestId, ready = false,
+  isMultipart = false, manifest, manifestId, ready = false, labelValueJoiner,
   setWorkspaceAddVisibility, showCollectionDialog, updateWindow, windowId = null,
 }) {
   const container = useContext(WorkspaceContext);
@@ -161,7 +161,7 @@ export function CollectionDialog({
             label={t('attributionTitle')}
           >
             { requiredStatement && (
-              <LabelValueMetadata labelValuePairs={requiredStatement} defaultLabel={t('attribution')} />
+              <LabelValueMetadata labelValuePairs={requiredStatement} labelValueJoiner={labelValueJoiner} defaultLabel={t('attribution')} />
             )}
             {
               rights && rights.length > 0 && (
@@ -241,4 +241,5 @@ CollectionDialog.propTypes = {
   showCollectionDialog: PropTypes.func.isRequired,
   updateWindow: PropTypes.func.isRequired,
   windowId: PropTypes.string,
+  labelValueJoiner: PropTypes.string,
 };

src/components/LabelValueMetadata.jsx

@@ -7,7 +7,7 @@ import ns from '../config/css-ns';
  * Renders label/value pair metadata in a dl
  * @prop {object} labelValuePair
  */
-export function LabelValueMetadata({ defaultLabel = undefined, labelValuePairs }) {
+export function LabelValueMetadata({ defaultLabel = undefined, labelValuePairs, labelValueJoiner = ', '}) {
   if (labelValuePairs.length === 0) {
     return null;
   }
@@ -21,7 +21,7 @@ export function LabelValueMetadata({ defaultLabel = undefined, labelValuePairs }
       {labelValuePairs.reduce((acc, labelValuePair, i) => acc.concat([
         <Typography component="dt" key={`label-${i}`} variant="subtitle2">{labelValuePair.label || defaultLabel}</Typography>,
         <Typography style={{ marginBottom: '.5em', marginLeft: '0px' }} component="dd" key={`value-${i}`} variant="body1">
-          <SanitizedHtml htmlString={labelValuePair.values.join(', ')} ruleSet="iiif" />
+          <SanitizedHtml htmlString={labelValuePair.values.join(labelValueJoiner)} ruleSet="iiif" />
         </Typography>,
       ]), [])}
     </dl>
@@ -33,5 +33,6 @@ LabelValueMetadata.propTypes = {
   labelValuePairs: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
     values: PropTypes.arrayOf(PropTypes.string),
+    labelValueJoiner: PropTypes.string
   })).isRequired,
 };

src/components/ManifestInfo.jsx

@@ -12,6 +12,7 @@ import { PluginHook } from './PluginHook';
  */
 export function ManifestInfo({
   manifestDescription = null, manifestLabel = null, manifestMetadata = [], manifestSummary = null,
+  labelValueJoiner,
   ...rest
 }) {
   const { t } = useTranslation();
@@ -49,7 +50,7 @@ export function ManifestInfo({
       )}
 
       {manifestMetadata.length > 0 && (
-        <LabelValueMetadata labelValuePairs={manifestMetadata} />
+        <LabelValueMetadata labelValuePairs={manifestMetadata} labelValueJoiner={labelValueJoiner} />
       )}
 
       <PluginHook targetName="ManifestInfo" {...pluginProps} />
@@ -62,4 +63,5 @@ ManifestInfo.propTypes = {
   manifestLabel: PropTypes.string,
   manifestMetadata: PropTypes.array, // eslint-disable-line react/forbid-prop-types
   manifestSummary: PropTypes.string,
+  labelValueJoiner: PropTypes.string
 };

src/config/settings.js

@@ -581,5 +581,6 @@ export default {
       { profile: 'http://iiif.io/api/auth/0/clickthrough' },
       { profile: 'http://iiif.io/api/auth/0/login' }
     ]
-  }
+  },
+  labelValueJoiner: ", "
 };

src/containers/AttributionPanel.js

@@ -4,6 +4,7 @@ import {
   getManifestLogo,
   getRequiredStatement,
   getRights,
+  getConfig,
 } from '../state/selectors';
 import { withPlugins } from '../extend/withPlugins';
 import { AttributionPanel } from '../components/AttributionPanel';
@@ -14,6 +15,7 @@ import { AttributionPanel } from '../components/AttributionPanel';
  * @private
  */
 const mapStateToProps = (state, { id, windowId }) => ({
+  labelValueJoiner: getConfig(state).labelValueJoiner,
   manifestLogo: getManifestLogo(state, { windowId }),
   requiredStatement: getRequiredStatement(state, { windowId }),
   rights: getRights(state, { windowId }),

src/containers/CanvasInfo.js

@@ -6,6 +6,7 @@ import {
   getCanvas,
   getCanvasLabel,
   getCanvasDescription,
+  getConfig,
 } from '../state/selectors';
 import { CanvasInfo } from '../components/CanvasInfo';
 
@@ -20,6 +21,7 @@ const mapStateToProps = (state, { canvasId, companionWindowId, windowId }) => ({
   canvasMetadata: getDestructuredMetadata(
     getCanvas(state, { canvasId, companionWindowId, windowId }),
   ),
+  labelValueJoiner: getConfig(state).labelValueJoiner,
 });
 
 const enhance = compose(

src/containers/CollectionDialog.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import {
-  getManifest, getManifestoInstance, getSequenceBehaviors, getWindow,
+  getManifest, getManifestoInstance, getSequenceBehaviors, getWindow, getConfig,
 } from '../state/selectors';
 import { CollectionDialog } from '../components/CollectionDialog';
 
@@ -37,6 +37,7 @@ const mapStateToProps = (state, { windowId }) => {
     dialogCollectionPath,
     error: manifest && manifest.error,
     isMultipart: getSequenceBehaviors(state, { manifestId }).includes('multi-part'),
+    labelValueJoiner: getConfig(state).labelValueJoiner,
     manifest: manifest && getManifestoInstance(state, { manifestId }),
     manifestId,
     open: state.workspace.collectionDialogOn,