diff --git a/packages/component-faraday-ui/src/ManuscriptHeader.js b/packages/component-faraday-ui/src/ManuscriptHeader.js
new file mode 100644
index 0000000000000000000000000000000000000000..3d8c19b585d7cce960a245d6612a8e5c1626438f
--- /dev/null
+++ b/packages/component-faraday-ui/src/ManuscriptHeader.js
@@ -0,0 +1,65 @@
+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)
diff --git a/packages/component-faraday-ui/src/ManuscriptHeader.md b/packages/component-faraday-ui/src/ManuscriptHeader.md
new file mode 100644
index 0000000000000000000000000000000000000000..7122002cd093fe7e23acaf86db687f94389796e3
--- /dev/null
+++ b/packages/component-faraday-ui/src/ManuscriptHeader.md
@@ -0,0 +1,79 @@
+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}
+/>
+```
diff --git a/packages/component-faraday-ui/src/ReviewerBreakdown.js b/packages/component-faraday-ui/src/ReviewerBreakdown.js
index a1e37f53fe81ab0ef330155d7d4941c4af324cb8..5c0d5a9e52864acd01cf5f48c01e50cfd96fbd6c 100644
--- a/packages/component-faraday-ui/src/ReviewerBreakdown.js
+++ b/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', []),
diff --git a/packages/component-faraday-ui/src/Tag.js b/packages/component-faraday-ui/src/Tag.js
index 689cdb7f25fe8ac967a7d1c50c036367374d0373..b5426d4eb27dc626a61ed0b9400f8ffa99d6eb0b 100644
--- a/packages/component-faraday-ui/src/Tag.js
+++ b/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};
`
diff --git a/packages/component-faraday-ui/src/index.js b/packages/component-faraday-ui/src/index.js
index e2c492c80004fe712913042d4e91c7a4a84fd282..796e99d984d51187575abf6f5aeac2fbd207f3ae 100644
--- a/packages/component-faraday-ui/src/index.js
+++ b/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'
diff --git a/packages/component-manuscript/src/components/ManuscriptHeader.js b/packages/component-manuscript/src/components/ManuscriptHeader.js
deleted file mode 100644
index 10d9c9f0bb862cdf940e45fb75c525ef29429e4d..0000000000000000000000000000000000000000
--- a/packages/component-manuscript/src/components/ManuscriptHeader.js
+++ /dev/null
@@ -1,54 +0,0 @@
-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
diff --git a/packages/component-manuscript/src/components/ManuscriptLayout.js b/packages/component-manuscript/src/components/ManuscriptLayout.js
index b35e7a4a187840f55b9a8102e9753d182266fbc7..02f391c2d6fffc547f50901a81aed7d9bce58aa5 100644
--- a/packages/component-manuscript/src/components/ManuscriptLayout.js
+++ b/packages/component-manuscript/src/components/ManuscriptLayout.js
@@ -1,10 +1,13 @@
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>
diff --git a/packages/component-manuscript/src/components/ManuscriptLayout.old.js b/packages/component-manuscript/src/components/ManuscriptLayout.old.js
index c0ed8a1f1635315f2e1f5aa3ea048fec535ab306..4ace31406e1aba24104b87e37f1858c30eab6052 100644
--- a/packages/component-manuscript/src/components/ManuscriptLayout.old.js
+++ b/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)}
diff --git a/packages/component-manuscript/src/components/index.js b/packages/component-manuscript/src/components/index.js
index 6d827b3a8ef4c4fb9b338cc9b53557572ec14c03..20c25f9849bf92529b51351502a9e8beb4c250ba 100644
--- a/packages/component-manuscript/src/components/index.js
+++ b/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'