feat(author-tooltip): add tooltip for manuscript authors

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'
+
+const AuthorTooltip = ({
+  authorName,
+  email,
+  affiliation,
+  isSubmitting,
+  isCorresponding,
+}) => (
+  <ThemeProvider theme={theme}>
+    <TooltipRoot>
+      <TooltipRow>
+        <AuthorName>{authorName}</AuthorName>
+        {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 TooltipComponent = ({ children, ...rest }) => (
+  <Tooltip arrow html={<AuthorTooltip {...rest} />} position="bottom">
+    {children}
+  </Tooltip>
+)
+
+export default TooltipComponent
+
+// #region styled-components
+const TooltipRoot = styled.div`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 10px 15px;
+`
+
+const TooltipRow = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  margin: 3px 0;
+`
+
+const AuthorName = 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: 5px;
+  padding: 0 5px;
+`
+
+// #endregion

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

@@ -11,7 +11,7 @@ import {
 
 import ZipFiles from './ZipFiles'
 import { parseVersion, parseJournalIssue, mapStatusToLabel } from './../utils'
-import { EditorInChiefActions, HandlingEditorActions } from './'
+import { EditorInChiefActions, HandlingEditorActions, AuthorTooltip } from './'
 import { InviteReviewers } from '../Reviewers/'
 
 const DashboardCard = ({
@@ -113,6 +113,7 @@ const DashboardCard = ({
               {version.authors.map(
                 (
                   {
+                    affiliation,
                     firstName,
                     lastName,
                     middleName,
@@ -123,14 +124,23 @@ const DashboardCard = ({
                   index,
                   arr,
                 ) => (
-                  <Author key={email}>
-                    <AuthorName>
-                      {firstName} {middleName} {lastName}
-                    </AuthorName>
-                    {isSubmitting && <AuthorStatus>SA</AuthorStatus>}
-                    {isCorresponding && <AuthorStatus>CA</AuthorStatus>}
-                    {arr.length - 1 === index ? '' : ','}
-                  </Author>
+                  <AuthorTooltip
+                    affiliation={affiliation}
+                    authorName={`${firstName} ${lastName}`}
+                    email={email}
+                    isCorresponding={isCorresponding}
+                    isSubmitting={isSubmitting}
+                    key={email}
+                  >
+                    <Author>
+                      <AuthorName>
+                        {firstName} {middleName} {lastName}
+                      </AuthorName>
+                      {isSubmitting && <AuthorStatus>SA</AuthorStatus>}
+                      {isCorresponding && <AuthorStatus>CA</AuthorStatus>}
+                      {arr.length - 1 === index ? '' : ','}
+                    </Author>
+                  </AuthorTooltip>
                 ),
               )}
             </AuthorList>

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

 import DashboardPage from './DashboardPage'
 
+export { default as AuthorTooltip } from './AuthorTooltip'
 export { default as EditorInChiefActions } from './EditorInChiefActions'
 export { default as HandlingEditorActions } from './HandlingEditorActions'
 

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'