Add collection label next to search results (#1068)

* add collection name next to title

Co-authored-by: Mike Romani <29218846+MichaelRomani@users.noreply.github.com>

* only show collection name when entries are searched

Co-authored-by: Mike Romani <29218846+MichaelRomani@users.noreply.github.com>

* add simple design to collection label

Co-authored-by: Mike Romani <29218846+MichaelRomani@users.noreply.github.com>

* remove  from higher components. Add props passing down directly from EntryListing

* fix design of collection label to top left corner

* update collection label styling to match workflow

src/components/Collection/Entries/EntryCard.css

@@ -56,6 +56,12 @@
   margin-bottom: 0;
 }
 
+.nc-entryListing-listCard-collection-label {
+  font-size: 12px;
+  color: var(--colorTextLead);
+  text-transform: uppercase;
+}
+
 .nc-entryListing-cardBody-full {
   height: 100%;
 }

src/components/Collection/Entries/EntryCard.js

@@ -7,11 +7,15 @@ import history from 'Routing/history';
 import { resolvePath } from 'Lib/pathHelper';
 import { VIEW_STYLE_LIST, VIEW_STYLE_GRID } from 'Constants/collectionViews';
 
+const CollectionLabel = ({ label }) =>
+  <h2 className="nc-entryListing-listCard-collection-label">{label}</h2>;
+
 const EntryCard = ({
   collection,
   entry,
   inferedFields,
   publicFolder,
+  collectionLabel,
   viewStyle = VIEW_STYLE_LIST,
 }) => {
   const label = entry.get('label');
@@ -26,7 +30,8 @@ const EntryCard = ({
   if (viewStyle === VIEW_STYLE_LIST) {
     return (
       <Link to={path} className="nc-entryListing-listCard">
-        <h2 className="nc-entryListing-listCard-title">{title}</h2>
+        { collectionLabel ? <CollectionLabel label={collectionLabel}/> : null }
+        <h2 className="nc-entryListing-listCard-title">{ title }</h2>
       </Link>
     );
   }
@@ -35,6 +40,7 @@ const EntryCard = ({
     return (
       <Link to={path} className="nc-entryListing-gridCard">
         <div className={c('nc-entryListing-cardBody', { 'nc-entryListing-cardBody-full': !image })}>
+          { collectionLabel ? <CollectionLabel label={collectionLabel}/> : null }
           <h2 className="nc-entryListing-cardHeading">{title}</h2>
         </div>
         {

src/components/Collection/Entries/EntryListing.js

@@ -45,8 +45,9 @@ export default class EntryListing extends React.Component {
     return entries.map((entry, idx) => {
       const collectionName = entry.get('collection');
       const collection = collections.find(coll => coll.get('name') === collectionName);
+      const collectionLabel = collection.get('label');
       const inferedFields = this.inferFields(collection);
-      const entryCardProps = { collection, entry, inferedFields, publicFolder, key: idx };
+      const entryCardProps = { collection, entry, inferedFields, publicFolder, key: idx, collectionLabel };
       return <EntryCard {...entryCardProps}/>;
     });
   };

src/components/Workflow/WorkflowCard.css

@@ -15,7 +15,6 @@
 
 .nc-workflow-card-collection {
   font-size: 14px;
-  font-weight: 16px;
   color: var(--colorTextLead);
   text-transform: uppercase;
   margin-top: 12px;