Label cards in editorial workflow

src/components/UI/theme.css

@@ -2,12 +2,14 @@
   --defaultColor: #333;
   --defaultColorLight: #eee;
   --backgroundColor: #fff;
+  --backgroundColorShaded: #eee;
   --shadowColor: rgba(0, 0, 0, .25);
   --infoColor: #69c;
   --successColor: #1c7;
   --warningColor: #fa0;
   --errorColor: #f52;
   --borderRadius: 2px;
+  --borderRadiusLarge: 10px;
   --topmostZindex: 99999;
   --foregroundAltColor: #fff;
   --backgroundAltColor: #272e30;

src/components/UnpublishedListing/UnpublishedListing.js

@@ -3,8 +3,11 @@ import { DragSource, DropTarget, HTML5DragDrop } from 'react-simple-dnd';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Link } from 'react-router';
 import moment from 'moment';
+import pluralize from 'pluralize';
+import { capitalize } from 'lodash'
 import { Card, CardTitle, CardText, CardActions } from 'react-toolbox/lib/card';
 import Button from 'react-toolbox/lib/button';
+import UnpublishedListingCardMeta from './UnpublishedListingCardMeta.js';
 import { status, statusDescriptions } from '../../constants/publishModes';
 import styles from './UnpublishedListing.css';
 
@@ -68,6 +71,7 @@ class UnpublishedListing extends React.Component {
             const slug = entry.get('slug');
             const ownStatus = entry.getIn(['metaData', 'status']);
             const collection = entry.getIn(['metaData', 'collection']);
+            const isModification = entry.get('isModification');
             return (
               <DragSource
                 key={slug}
@@ -77,6 +81,10 @@ class UnpublishedListing extends React.Component {
               >
                 <div className={styles.draggable}>
                   <Card className={styles.card}>
+                    <UnpublishedListingCardMeta
+                      meta={capitalize(pluralize(collection))}
+                      label={isModification ? "" : "New"}
+                    />
                     <CardTitle
                       title={entry.getIn(['data', 'title'])}
                       subtitle={`by ${ author }`}

src/components/UnpublishedListing/UnpublishedListingCardMeta.css

@@ -0,0 +1,25 @@
+@import '../UI/theme.css';
+
+.cardMeta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  height: 34px;
+  padding: 0 16px;
+  margin-bottom: -6px;
+
+  font-size: .75em;
+  text-transform: uppercase;
+
+  background: var(--backgroundColorShaded);
+}
+
+.meta {}
+.label {
+  padding: 5px 8px 4px 8px;
+  border-radius: var(--borderRadiusLarge);
+
+  background: var(--backgroundAltColor);
+  color: var(--defaultColorLight)
+}

src/components/UnpublishedListing/UnpublishedListingCardMeta.js

@@ -0,0 +1,17 @@
+import React, { PropTypes } from 'react';
+import styles from './UnpublishedListingCardMeta.css';
+
+const UnpublishedListingCardMeta = ({ meta, label }) =>
+  <div className={styles.cardMeta}>
+    <span className={styles.meta}>{meta}</span>
+    {(label && label.length > 0)
+      ? <span className={styles.label}>{label}</span>
+      : ""}
+  </div>;
+
+UnpublishedListingCardMeta.propTypes = {
+  meta: PropTypes.string.isRequired,
+  label: PropTypes.string,
+};
+
+export default UnpublishedListingCardMeta;