feat(details): add Manuscript header

packages/component-faraday-ui/src/ManuscriptHeader.js

+import React, { Fragment } from 'react'
+import { get } from 'lodash'
+import { H2, H4, DateParser } from '@pubsweet/ui'
+import { compose, withProps } from 'recompose'
+
+import { Tag, Text, Row, AuthorTagList } from './'
+
+const ManuscriptHeader = ({
+  fragment = {},
+  editorInChief = 'Unassigned',
+  manuscriptType = {},
+  collection: { visibleStatus = 'Draft', handlingEditor, customId },
+}) => {
+  const { authors = [], metadata = {}, submitted = null } = fragment
+  const { title = 'No title', journal = '', type = '' } = metadata
+  return (
+    <Fragment>
+      <Row alignItems="baseline" justify="space-between">
+        <H2 mb={1}>{title}</H2>
+        <Tag data-test-id="fragment-status" status>
+          {visibleStatus}
+        </Tag>
+      </Row>
+      {authors.length > 0 && (
+        <Row alignItems="center" justify="flex-start" mb={1}>
+          <AuthorTagList authors={authors} tooltip />
+        </Row>
+      )}
+      <Row alignItems="center" justify="flex-start" mb={1}>
+        <Text customId mr={1}>{`ID ${customId}`}</Text>
+        {submitted && (
+          <DateParser durationThreshold={0} timestamp={submitted}>
+            {timestamp => (
+              <Text mr={3} secondary>
+                Submitted on {timestamp}
+              </Text>
+            )}
+          </DateParser>
+        )}
+        <H4>{manuscriptType.label || type}</H4>
+        <Text ml={1} secondary>
+          {journal}
+        </Text>
+      </Row>
+      <Row alignItems="center" justify="flex-start" mb={1}>
+        <H4>Editor in Chief</H4>
+        <Text ml={1} mr={3}>
+          {editorInChief}
+        </Text>
+        <H4>Handling editor</H4>
+        <Text ml={1} mr={3}>
+          {get(handlingEditor, 'name', 'Unassigned')}
+        </Text>
+      </Row>
+    </Fragment>
+  )
+}
+
+export default compose(
+  withProps(({ fragment: { metadata }, journal = {} }) => ({
+    manuscriptType: get(journal, 'manuscriptTypes', []).find(
+      t => t.value === get(metadata, 'type', ''),
+    ),
+  })),
+)(ManuscriptHeader)

packages/component-faraday-ui/src/ManuscriptHeader.md

+Manuscript header
+
+```js
+const authors = [
+  {
+    email: 'john.doe@gmail.com',
+    firstName: 'John',
+    lastName: 'Doe',
+    isSubmitting: true,
+  },
+  {
+    email: 'michael.felps@gmail.com',
+    firstName: 'Michael',
+    lastName: 'Felps',
+    isSubmitting: true,
+    isCorresponding: true,
+  },
+  {
+    email: 'barrack.obama@gmail.com',
+    firstName: 'Barrack',
+    lastName: 'Obama',
+  },
+  {
+    email: 'barrack.obama@gmail1.com',
+    firstName: 'Barrack 1',
+    lastName: 'Obama',
+  },
+  {
+    email: 'barrack.obama@gmail2.com',
+    firstName: 'Barrack 2',
+    lastName: 'Obama',
+  },
+]
+
+const collection = {
+  customId: '55113358',
+  visibleStatus: 'Pending Approval',
+  handlingEditor: {
+    id: 'he-1',
+    name: 'Handlington Ignashevici',
+  },
+}
+
+const fragment = {
+  authors,
+  created: Date.now(),
+  submitted: Date.now(),
+  metadata: {
+    journal: 'Awesomeness',
+    title: 'A very ok title with many authors',
+    type: 'research',
+  },
+}
+
+const journal = {
+  manuscriptTypes: [
+    {
+      label: 'Research',
+      value: 'research',
+      author: true,
+      peerReview: true,
+      abstractRequired: true,
+    },
+    {
+      label: 'Review',
+      value: 'review',
+      author: true,
+      peerReview: true,
+      abstractRequired: true,
+    },
+  ],
+}
+
+;<ManuscriptHeader
+  collection={collection}
+  fragment={fragment}
+  journal={journal}
+/>
+```

packages/component-faraday-ui/src/ReviewerBreakdown.js

@@ -20,7 +20,6 @@ const reviewerReduce = (acc, r) => ({
   submitted: submittedFilter(r) ? acc.submitted + 1 : acc.submitted,
 })
 
-/** @component */
 export default compose(
   withProps(({ fragment }) => ({
     invitations: get(fragment, 'invitations', []),

packages/component-faraday-ui/src/Tag.js

@@ -18,6 +18,7 @@ export default styled.div`
   text-align: center;
   vertical-align: baseline;
   width: fit-content;
+  white-space: nowrap;
 
   ${marginHelper};
 `

packages/component-faraday-ui/src/index.js

@@ -24,6 +24,7 @@ export { default as WizardFiles } from './WizardFiles'
 export { default as PreviewFile } from './PreviewFile'
 export { default as DownloadZipFiles } from './DownloadZipFiles'
 export { default as ManuscriptVersion } from './ManuscriptVersion'
+export { default as ManuscriptHeader } from './ManuscriptHeader'
 
 // Manuscript Details
 export * from './manuscriptDetails'

packages/component-manuscript/src/components/ManuscriptHeader.js

-import React from 'react'
-import { get } from 'lodash'
-import { DateParser } from 'pubsweet-components-faraday/src/components'
-
-import {
-  Row,
-  Title,
-  DateField,
-  LeftDetails,
-  StatusLabel,
-  RightDetails,
-  ManuscriptType,
-  ManuscriptHeader,
-} from '../atoms'
-
-import AuthorsWithTooltip from '../molecules/AuthorsWithTooltip'
-import { parseVersion, parseJournalIssue, mapStatusToLabel } from './utils'
-
-const ManuscriptDetails = ({ version, project, journal }) => {
-  const { title, type } = parseVersion(version)
-  const metadata = get(version, 'metadata')
-  const journalIssueType = parseJournalIssue(journal, metadata)
-  const manuscriptMeta = `${type} - ${
-    journalIssueType ? journalIssueType.label : 'N/A'
-  }`
-  return (
-    <ManuscriptHeader>
-      <Title dangerouslySetInnerHTML={{ __html: title }} />
-      <Row>
-        <LeftDetails flex={3}>
-          <StatusLabel>{mapStatusToLabel(project)}</StatusLabel>
-          <DateParser
-            durationThreshold={0}
-            timestamp={get(version, 'submitted')}
-          >
-            {(timestamp, days) => (
-              <DateField>
-                {timestamp} ({days} ago)
-              </DateField>
-            )}
-          </DateParser>
-        </LeftDetails>
-        <RightDetails flex={4}>
-          <ManuscriptType title={manuscriptMeta}>
-            {manuscriptMeta}
-          </ManuscriptType>
-        </RightDetails>
-      </Row>
-      <AuthorsWithTooltip authors={project.authors} />
-    </ManuscriptHeader>
-  )
-}
-
-export default ManuscriptDetails

packages/component-manuscript/src/components/ManuscriptLayout.js

 import React, { Fragment } from 'react'
 import { isEmpty } from 'lodash'
 import styled from 'styled-components'
-import { Text, ManuscriptDetailsTop, Row } from 'pubsweet-component-faraday-ui'
+import {
+  Text,
+  ManuscriptHeader,
+  ManuscriptDetailsTop,
+} from 'pubsweet-component-faraday-ui'
 
 const ManuscriptLayout = ({
-  journal,
   history,
   getSignedUrl,
   currentUser,
@@ -12,6 +15,7 @@ const ManuscriptLayout = ({
   canMakeRevision,
   editorialRecommendations,
   hasResponseToReviewers,
+  journal = {},
   project = {},
   version = {},
 }) => (
@@ -24,7 +28,12 @@ const ManuscriptLayout = ({
           getSignedUrl={getSignedUrl}
           history={history}
         />
-        <Row justify="flex-start">Aici header</Row>
+        <ManuscriptHeader
+          collection={project}
+          editorInChief={editorInChief}
+          fragment={version}
+          journal={journal}
+        />
       </Fragment>
     ) : (
       <Text>Loading...</Text>

packages/component-manuscript/src/components/ManuscriptLayout.old.js

@@ -15,7 +15,6 @@ import {
   SideBarRoles,
   SideBarActions,
   SubmitRevision,
-  ManuscriptHeader,
   ReviewsAndReports,
   ManuscriptDetails,
   ManuscriptVersion,
@@ -50,11 +49,6 @@ const ManuscriptLayout = ({
               <ManuscriptVersion project={project} version={version} />
             </RightDetails>
           </Header>
-          <ManuscriptHeader
-            journal={journal}
-            project={project}
-            version={version}
-          />
           <ManuscriptDetails
             fragment={version}
             startExpanded={isEmpty(version.revision)}

packages/component-manuscript/src/components/index.js

@@ -5,7 +5,6 @@ export { default as ManuscriptPage } from './ManuscriptPage'
 export { default as SubmitRevision } from './SubmitRevision'
 export { default as EditorialComment } from './EditorialComment'
 export { default as ReviewReportCard } from './ReviewReportCard'
-export { default as ManuscriptHeader } from './ManuscriptHeader'
 export { default as ManuscriptLayout } from './ManuscriptLayout'
 export { default as ManuscriptDetails } from './ManuscriptDetails'
 export { default as ManuscriptVersion } from './ManuscriptVersion'