refactor(manuscript): add more details to manuscript header

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

@@ -8,10 +8,10 @@ const defaultText = css`
 `
 const Root = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   margin: auto;
-  max-width: 60em;
 `
+
 const Title = styled.div`
   ${defaultText};
   font-size: ${th('fontSizeBase')};
@@ -20,6 +20,17 @@ const Title = styled.div`
   text-align: left;
 `
 
+const Container = styled.div`
+  flex: ${({ flex }) => flex || 1};
+  padding: 0 ${th('subGridUnit')};
+`
+
+const SideBar = styled.div`
+  flex: ${({ flex }) => flex || 1};
+  background-color: ${th('colorBackground')};
+  padding: 0 ${th('subGridUnit')};
+`
+
 const Header = styled.div`
   align-items: center;
   display: flex;
@@ -57,4 +68,51 @@ const ManuscriptId = styled.div`
   white-space: nowrap;
 `
 
-export { Root, BreadCrumbs, Header, Title, ManuscriptId }
+const LeftDetails = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  flex: ${({ flex }) => flex || 1};
+  max-width: 75%;
+`
+
+const RightDetails = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  flex: ${({ flex }) => flex || 1};
+  max-width: 75%;
+`
+
+const StatusLabel = styled.div`
+  border: ${th('borderDefault')};
+  ${defaultText};
+  font-weight: bold;
+  padding: 0 0.5em;
+  text-align: left;
+  text-transform: capitalize;
+  line-height: 1.5;
+  color: ${th('colorPrimary')};
+`
+
+const DateField = styled.span`
+  ${defaultText};
+  margin: 0 ${th('subGridUnit')};
+  text-align: left;
+`
+
+export {
+  Root,
+  BreadCrumbs,
+  Header,
+  Title,
+  ManuscriptId,
+  Container,
+  SideBar,
+  LeftDetails,
+  RightDetails,
+  StatusLabel,
+  DateField,
+}

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

+import React, { Fragment } from 'react'
+// import { AuthorsWithTooltip } from '@pubsweet/ui'
+
+import { Title } from '../atoms'
+
+import AuthorsWithTooltip from '../molecules/AuthorsWithTooltip'
+
+const ManuscriptDetails = ({ version, project }) => (
+  <Fragment>
+    <Title dangerouslySetInnerHTML={{ __html: version.metadata.title }} />
+    <AuthorsWithTooltip authors={project.authors} />
+  </Fragment>
+)
+
+export default ManuscriptDetails

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

 import React from 'react'
 
-import { Root, BreadCrumbs, Title, Header, ManuscriptId } from '../atoms'
+import ManuscriptDetails from './ManuscriptDetails'
+import {
+  Root,
+  BreadCrumbs,
+  Header,
+  ManuscriptId,
+  Container,
+  SideBar,
+} from '../atoms'
 
 const ManuscriptLayout = ({
   currentUser,
@@ -9,14 +17,17 @@ const ManuscriptLayout = ({
   version,
 }) => (
   <Root>
-    <Header>
-      <BreadCrumbs>
-        <span>Dashboard</span>
-        <span>Manuscript Details</span>
-      </BreadCrumbs>
-      <ManuscriptId>{`- ID ${project.customId}`}</ManuscriptId>
-    </Header>
-    <Title dangerouslySetInnerHTML={{ __html: version.metadata.title }} />
+    <Container flex={3}>
+      <Header>
+        <BreadCrumbs>
+          <span>Dashboard</span>
+          <span>Manuscript Details</span>
+        </BreadCrumbs>
+        <ManuscriptId>{`- ID ${project.customId}`}</ManuscriptId>
+      </Header>
+      <ManuscriptDetails project={project} version={version} />
+    </Container>
+    <SideBar flex={1}>Sidebar</SideBar>
   </Root>
 )
 

packages/component-manuscript/src/molecules/AuthorsWithTooltip.js

+import React from 'react'
+import { th } from '@pubsweet/ui'
+import 'react-tippy/dist/tippy.css'
+import { Tooltip } from 'react-tippy'
+import styled, { ThemeProvider, withTheme, css } from 'styled-components'
+
+const DefaultTooltip = ({
+  authorName,
+  email,
+  affiliation,
+  isSubmitting,
+  isCorresponding,
+  theme,
+}) => (
+  <ThemeProvider theme={theme}>
+    <TooltipRoot>
+      <TooltipRow>
+        <Name>{authorName}</Name>
+        {isSubmitting && <SpecialAuthor>Submitting Author</SpecialAuthor>}
+        {isCorresponding &&
+          !isSubmitting && <SpecialAuthor>Corresponding Author</SpecialAuthor>}
+      </TooltipRow>
+      <TooltipRow>
+        <AuthorDetails>{email}</AuthorDetails>
+      </TooltipRow>
+      <TooltipRow>
+        <AuthorDetails>{affiliation}</AuthorDetails>
+      </TooltipRow>
+    </TooltipRoot>
+  </ThemeProvider>
+)
+
+const DefaultLabel = ({
+  firstName,
+  lastName,
+  isSubmitting,
+  isCorresponding,
+  arr,
+  index,
+}) => (
+  <Author>
+    <AuthorName>{`${firstName} ${lastName}`}</AuthorName>
+    {isSubmitting && <AuthorStatus>SA</AuthorStatus>}
+    {isCorresponding && <AuthorStatus>CA</AuthorStatus>}
+    {arr.length - 1 === index ? '' : ','}
+  </Author>
+)
+
+const TooltipComponent = ({ children, component: Component, ...rest }) => (
+  <Tooltip arrow html={<Component {...rest} />} position="bottom">
+    {children}
+  </Tooltip>
+)
+
+const AuthorTooltip = withTheme(TooltipComponent)
+
+const AuthorsWithTooltip = ({
+  authors = [],
+  theme,
+  tooltipComponent = DefaultTooltip,
+  labelComponent: DefaultComponent = DefaultLabel,
+}) => (
+  <AuthorList>
+    {authors.map(
+      (
+        {
+          affiliation = '',
+          firstName = '',
+          lastName = '',
+          email = '',
+          userId,
+          isSubmitting,
+          isCorresponding,
+          ...rest
+        },
+        index,
+        arr,
+      ) => (
+        <AuthorTooltip
+          affiliation={affiliation}
+          authorName={`${firstName} ${lastName}`}
+          component={tooltipComponent}
+          email={email}
+          isCorresponding={isCorresponding}
+          isSubmitting={isSubmitting}
+          key={userId}
+        >
+          <DefaultComponent
+            arr={arr}
+            firstName={firstName}
+            index={index}
+            isCorresponding={isCorresponding}
+            isSubmitting={isSubmitting}
+            lastName={lastName}
+          />
+        </AuthorTooltip>
+      ),
+    )}
+  </AuthorList>
+)
+
+export default AuthorsWithTooltip
+
+// #region styled-components
+const defaultText = css`
+  font-family: ${th('fontReading')};
+  font-size: ${th('fontSizeBaseSmall')};
+`
+
+const AuthorList = styled.span`
+  ${defaultText};
+  text-align: left;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+`
+
+const AuthorName = styled.span`
+  text-decoration: underline;
+  padding-left: 2px;
+  cursor: default;
+`
+const Author = styled.div`
+  padding-right: ${th('subGridUnit')};
+`
+
+const AuthorStatus = styled.span`
+  border: ${th('borderDefault')};
+  ${defaultText};
+  text-align: center;
+  text-transform: uppercase;
+  padding: 0 2px;
+  margin-left: 4px;
+`
+
+const TooltipRoot = styled.div`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: calc(${th('subGridUnit')}*2);
+`
+
+const TooltipRow = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  margin: ${th('subGridUnit')} 0;
+`
+
+const Name = styled.span`
+  color: ${th('colorSecondary')};
+  font-family: ${th('fontHeading')};
+  font-size: ${th('fontSizeBase')};
+`
+
+const AuthorDetails = styled.span`
+  color: ${th('colorSecondary')};
+  font-family: ${th('fontReading')};
+  font-size: ${th('fontSizeBaseSmall')};
+`
+
+const SpecialAuthor = styled.span`
+  background-color: ${th('colorBackground')};
+  color: ${th('colorTextPlaceholder')};
+  font-family: ${th('fontInterface')};
+  font-size: ${th('fontSizeBaseSmall')};
+  font-weight: bold;
+  margin-left: ${th('subGridUnit')};
+  padding: 0 ${th('subGridUnit')};
+`
+// #endregion

packages/components-faraday/src/components/Dashboard/AuthorTooltip.js

 import React from 'react'
 import { th } from '@pubsweet/ui'
 import { Tooltip } from 'react-tippy'
-import styled, { ThemeProvider } from 'styled-components'
-
-import theme from '../../../../xpub-faraday/app/theme'
+import styled, { ThemeProvider, withTheme } from 'styled-components'
 
 const AuthorTooltip = ({
   authorName,
@@ -11,6 +9,7 @@ const AuthorTooltip = ({
   affiliation,
   isSubmitting,
   isCorresponding,
+  theme,
 }) => (
   <ThemeProvider theme={theme}>
     <TooltipRoot>
@@ -36,7 +35,7 @@ const TooltipComponent = ({ children, ...rest }) => (
   </Tooltip>
 )
 
-export default TooltipComponent
+export default withTheme(TooltipComponent)
 
 // #region styled-components
 const TooltipRoot = styled.div`
@@ -44,14 +43,14 @@ const TooltipRoot = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 10px 15px;
+  padding: calc(${th('subGridUnit')}*2);
 `
 
 const TooltipRow = styled.div`
   align-items: center;
   display: flex;
   justify-content: flex-start;
-  margin: 3px 0;
+  margin: ${th('subGridUnit')} 0;
 `
 
 const AuthorName = styled.span`
@@ -72,8 +71,8 @@ const SpecialAuthor = styled.span`
   font-family: ${th('fontInterface')};
   font-size: ${th('fontSizeBaseSmall')};
   font-weight: bold;
-  margin-left: 5px;
-  padding: 0 5px;
+  margin-left: ${th('subGridUnit')};
+  padding: 0 ${th('subGridUnit')};
 `
 
 // #endregion

packages/xpub-faraday/app/app.js

 import React from 'react'
 import ReactDOM from 'react-dom'
-import 'react-tippy/dist/tippy.css'
 import { AppContainer } from 'react-hot-loader'
 import createHistory from 'history/createBrowserHistory'