feat(dashboard): allow authorsList to show tooltip

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

@@ -3,12 +3,14 @@ An author tag.
 ```js
 const authors = [
   {
+    id: 1,
     email: 'john.doe@gmail.com',
     firstName: 'John',
     lastName: 'Doe',
     isSubmitting: true,
   },
   {
+    id: 2,
     email: 'michael.felps@gmail.com',
     firstName: 'Michael',
     lastName: 'Felps',
@@ -16,9 +18,11 @@ const authors = [
     isCorresponding: true,
   },
   {
+    id: 3,
     email: 'barrack.obama@gmail.com',
     firstName: 'Barrack',
     lastName: 'Obama',
+    affiliation: 'US Presidency'
   },
 ];
 

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

@@ -2,16 +2,24 @@ import React from 'react'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 
-import AuthorTag from './AuthorTag'
+import { AuthorTag, AuthorWithTooltip } from 'pubsweet-component-faraday-ui'
 
 const AuthorTagList = ({
   authors = [],
+  tooltip = false,
   separator = ',',
   authorKey = 'email',
 }) => (
   <Root>
     {authors
-      .map(a => <AuthorTag author={a} key={a[authorKey]} />)
+      .map(
+        a =>
+          tooltip ? (
+            <AuthorWithTooltip author={a} key={a[authorKey]} />
+          ) : (
+            <AuthorTag author={a} key={a[authorKey]} />
+          ),
+      )
       .reduce(
         (prev, curr, index) =>
           index === 0

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

@@ -3,12 +3,14 @@ A list of author tags. Used on manuscript card and details.
 ```js
 const authors = [
   {
+    id: 1,
     email: 'john.doe@gmail.com',
     firstName: 'John',
     lastName: 'Doe',
     isSubmitting: true,
   },
   {
+    id: 2,
     email: 'michael.felps@gmail.com',
     firstName: 'Michael',
     lastName: 'Felps',
@@ -16,15 +18,44 @@ const authors = [
     isCorresponding: true,
   },
   {
+    id: 3,
     email: 'barrack.obama@gmail.com',
     firstName: 'Barrack',
     lastName: 'Obama',
+    affiliation: 'US Presidency'
   },
 ]
 
 ;<AuthorTagList authors={authors} />
 ```
 
+A list of author tags with tooltip
+
+```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',
+  },
+]
+
+;<AuthorTagList authors={authors} tooltip />
+```
+
 Use a different separator and key for mapping the authors.
 
 ```js

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

+import React, { Fragment } from 'react'
+import 'react-tippy/dist/tippy.css'
+import { Tooltip } from 'react-tippy'
+import { ThemeProvider, withTheme } from 'styled-components'
+import { Text, Row, AuthorTag } from 'pubsweet-component-faraday-ui'
+
+const AuthorTooltip = ({ author = {}, key, theme }) => (
+  <ThemeProvider theme={theme}>
+    <Fragment>
+      <Row mt={1}>
+        <AuthorTag author={author} key={key} />
+      </Row>
+      <Row>
+        <Text>{author.email}</Text>
+      </Row>
+      <Row>
+        <Text>{author.affiliation}</Text>
+      </Row>
+    </Fragment>
+  </ThemeProvider>
+)
+
+const AuthorWithTooltip = ({ theme, ...rest }) => (
+  <Tooltip
+    arrow
+    html={<AuthorTooltip theme={theme} {...rest} />}
+    position="bottom"
+    theme="light"
+  >
+    <AuthorTag {...rest} />
+  </Tooltip>
+)
+
+export default withTheme(AuthorWithTooltip)

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

@@ -38,7 +38,7 @@ const ManuscriptCard = ({
       </Row>
       {authors.length > 0 && (
         <Row alignItems="center" justify="flex-start" mb={1}>
-          <AuthorTagList authors={authors} />
+          <AuthorTagList authors={authors} tooltip />
         </Row>
       )}
       <Row alignItems="center" justify="flex-start" mb={1}>

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

@@ -15,7 +15,7 @@ import {
 } from './'
 
 const WizardAuthors = ({
-  authors,
+  authors = [],
   moveAuthor,
   addNewAuthor,
   setAuthorEdit,

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

@@ -19,6 +19,7 @@ export { default as SortableList } from './SortableList'
 export { default as Tag } from './Tag'
 export { default as Text } from './Text'
 export { default as WizardAuthors } from './WizardAuthors'
+export { default as AuthorWithTooltip } from './AuthorWithTooltip'
 
 export * from './styledHelpers'