Merge pull request #507 from mlibrary/LIBSEARCH-1042-update-articles-…

…catalog-medium-view

[LIBSEARCH-1042] Update Articles & Catalog medium view

src/modules/records/components/Description/index.js

@@ -0,0 +1,82 @@
+import { Anchor, Icon } from '../../../reusable';
+import { BrowseLink } from '../../../browse';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { stringifySearch } from '../../../search';
+import { TrimString } from '../../../core';
+
+const Description = ({ activeDatastore, data, datastores, institution, viewType }) => {
+  if (Array.isArray(data)) {
+    return (
+      <ol className='list__unstyled'>
+        {data.map((datum, index) => {
+          return (
+            <li key={index}>
+              {index > 0 && <Icon icon='navigate_next' className='text-grey__light' />}
+              <Description {...{ activeDatastore, data: datum, datastores, institution, viewType }} />
+            </li>
+          );
+        })}
+      </ol>
+    );
+  }
+
+  const { browse, href, icon, search, text } = data;
+  const searchScope = search?.scope || {};
+  const anchorAttributes = search
+    ? (
+        () => {
+          const { slug, uid } = datastores.find((datastore) => {
+            return datastore.uid === activeDatastore;
+          });
+          const { scope, type, value } = search;
+          return {
+            to: `/${slug}?${stringifySearch({
+              filter: type === 'filtered' ? { [scope]: value } : {},
+              library: uid === 'mirlyn' ? institution : '',
+              query: type === 'fielded' ? `${scope}:${value}` : value
+            })}`
+          };
+        }
+      )()
+    : { href };
+
+  const { text: browseText, type, value } = browse || {};
+
+  const child = (
+    <>
+      {icon && <Icon icon={icon} size={19} className='margin-right__2xs text-grey__light' />}
+      { ['Preview', 'Medium'].includes(viewType) ? <TrimString {...{ string: text, trimLength: searchScope === 'author' ? 64 : 240 }} /> : text }
+    </>
+  );
+
+  return (
+    <>
+      {(href || search) ? <Anchor {...anchorAttributes}>{child}</Anchor> : child}
+      {browseText && (
+        <>
+          <span className='text-grey font-small margin-x__2xs'>|</span>
+          <BrowseLink
+            className='text-grey font-small underline underline__hover-thick'
+            {...{ type, value }}
+          >
+            {browseText}
+          </BrowseLink>
+        </>
+      )}
+    </>
+  );
+};
+
+Description.propTypes = {
+  activeDatastore: PropTypes.string,
+  data: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.object
+  ]),
+  datastores: PropTypes.array,
+  institution: PropTypes.string,
+  viewType: PropTypes.string
+};
+
+export default Description;

src/modules/records/components/Metadata/index.js

@@ -0,0 +1,74 @@
+import './styles.css';
+import {
+  ContextProvider,
+  Expandable,
+  ExpandableButton,
+  ExpandableChildren
+} from '../../../reusable';
+import Description from '../Description';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+const Metadata = ({ metadata = {} }) => {
+  const { active: activeInstitution, defaultInstitution } = useSelector((state) => {
+    return state.institution;
+  });
+  const { active: activeDatastore, datastores } = useSelector((state) => {
+    return state.datastores;
+  });
+
+  if (!metadata || Object.keys(metadata).length === 0) {
+    return null;
+  }
+
+  const institution = activeInstitution || defaultInstitution;
+
+  const metadataView = {
+    Full: metadata.full,
+    Medium: metadata.medium,
+    Preview: metadata.preview
+  };
+
+  return (
+    <ContextProvider
+      render={({ viewType }) => {
+        return (
+          <dl className='flex__responsive metadata-list'>
+            {(metadataView[viewType] || metadata.full).map(({ description, term, termPlural }, index) => {
+              if (!description) {
+                return null;
+              }
+
+              return (
+                <div className={viewType === 'Preview' ? '' : 'metadata-list-item'} key={index}>
+                  <Expandable>
+                    <dt className={viewType === 'Preview' ? 'visually-hidden' : ''}>
+                      {term}
+                    </dt>
+                    <ExpandableChildren>
+                      {description.map((data, dataIndex) => {
+                        return (
+                          <dd key={dataIndex}>
+                            <Description {...{ activeDatastore, data, datastores, institution, viewType }} />
+                          </dd>
+                        );
+                      })}
+                    </ExpandableChildren>
+                    {description.length > 3 && <dd className='margin-top__2xs'><ExpandableButton name={termPlural || term} count={description.length} /></dd>}
+                  </Expandable>
+                </div>
+              );
+            })}
+          </dl>
+        );
+      }}
+    />
+  );
+};
+
+Metadata.propTypes = {
+  metadata: PropTypes.object
+};
+
+export default Metadata;

src/modules/reusable/components/Metadata/styles.css → src/modules/records/components/Metadata/styles.css

@@ -20,10 +20,6 @@
   }
 }
 
-.metadata-list-item > dd > img {
-  max-width: 16rem;
-}
-
 .metadata-list-item > dd > ol.list__unstyled > li {
   display: inline-block;
 }

src/modules/records/components/Record/index.js

@@ -1,7 +1,7 @@
 import { AddToListButton, isInList } from '../../../lists';
 import { Anchor, Icon } from '../../../reusable';
 import { getField, getFieldValue } from '../../utilities';
-import { RecommendedResource, RecordMetadata } from '../../../records';
+import { Metadata, RecommendedResource } from '../../../records';
 import { getDatastoreSlugByUid } from '../../../pride';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -85,7 +85,7 @@ const Record = ({ datastoreUid, list, record }) => {
           <AddToListButton item={record} />
         </div>
         <Zotero {...{ fields: record.fields }} />
-        <RecordMetadata {...{ metadata: record.metadata }} />
+        <Metadata {...{ metadata: record.metadata }} />
       </div>
 
       <div className='record-holders-container'>

src/modules/records/components/RecordFull/index.js

@@ -8,10 +8,10 @@ import {
 import { Anchor, Breadcrumb, H1 } from '../../../reusable';
 import {
   FullRecordPlaceholder,
+  Metadata,
   RecommendedResource,
   RecordDescription,
   RecordFullFormats,
-  RecordMetadata,
   ViewMARC,
   Zotero
 } from '../../../records';
@@ -158,7 +158,7 @@ const FullRecord = () => {
           <RecordDescription record={record} />
           <Zotero fields={record.fields} />
           <h2 className='full-record__record-info'>Record info:</h2>
-          <RecordMetadata metadata={record.metadata} />
+          <Metadata metadata={record.metadata} />
           {inDatastore && (
             <p>
               The University of Michigan Library aims to describe its collections in a way that respects the people and communities who create, use, and are represented in them. We encourage you to

src/modules/records/components/RecordPreview/index.js

@@ -1,6 +1,6 @@
 import { Anchor, Icon } from '../../../reusable';
 import { getField, getFieldValue } from '../../utilities';
-import { RecommendedResource, RecordMetadata, Zotero } from '../../../records';
+import { Metadata, RecommendedResource, Zotero } from '../../../records';
 import { getDatastoreSlugByUid } from '../../../pride';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -109,7 +109,7 @@ const RecordPreview = ({ datastoreUid, record, searchQuery }) => {
   return (
     <article className='record-preview'>
       <Header {...{ datastoreUid, record, searchQuery }} />
-      <RecordMetadata {...{ metadata: record.metadata }} />
+      <Metadata {...{ metadata: record.metadata }} />
       <Zotero {...{ fields: record.fields }} />
       <Footer {...{ record, searchQuery }} />
     </article>

src/modules/records/index.js

@@ -15,14 +15,14 @@ import FullRecordPlaceholder from './components/FullRecordPlaceholder';
 import ILLRequestMessage from './components/ILLRequestMessage';
 import KeywordSwitch from './components/KeywordSwitch';
 import MARCTable from './components/MARCTable';
+import Metadata from './components/Metadata';
 import Pagination from './components/Pagination';
 import RecommendedResource from './components/RecommendedResource';
 import Record from './components/Record';
 import RecordDescription from './components/RecordDescription';
 import RecordFull from './components/RecordFull';
 import RecordFullFormats from './components/RecordFullFormats';
 import RecordList from './components/RecordList';
-import RecordMetadata from './components/RecordMetadata';
 import recordsReducer from './reducer';
 import Results from './components/Results';
 import ViewMARC from './components/ViewMARC';
@@ -41,14 +41,14 @@ export {
   loadingHoldings,
   loadingRecords,
   MARCTable,
+  Metadata,
   Pagination,
   RecommendedResource,
   Record,
   RecordDescription,
   RecordFull,
   RecordFullFormats,
   RecordList,
-  RecordMetadata,
   recordsReducer,
   Results,
   setRecord,