diff --git a/packages/component-faraday-ui/src/AuthorTag.md b/packages/component-faraday-ui/src/AuthorTag.md index 9e6a5cdaddff1e0541536fe11bf012b94275c5c2..2678e9dc98b9bcfd11f5c390936b22a557a8c625 100644 --- a/packages/component-faraday-ui/src/AuthorTag.md +++ b/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' }, ]; diff --git a/packages/component-faraday-ui/src/AuthorTagList.js b/packages/component-faraday-ui/src/AuthorTagList.js index 20e5a3bf489d5623676ba60471e1146f275b71bd..1792cd7b3023ed597f3e9e78cef3d6c56a4b2342 100644 --- a/packages/component-faraday-ui/src/AuthorTagList.js +++ b/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 diff --git a/packages/component-faraday-ui/src/AuthorTagList.md b/packages/component-faraday-ui/src/AuthorTagList.md index cbd7729f47ca072e5b33a732f2bf291d3b392e5b..f948cc048963e23861808937e68a0a7d09c91304 100644 --- a/packages/component-faraday-ui/src/AuthorTagList.md +++ b/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 diff --git a/packages/component-faraday-ui/src/AuthorWithTooltip.js b/packages/component-faraday-ui/src/AuthorWithTooltip.js new file mode 100644 index 0000000000000000000000000000000000000000..2d273d506c6b98ce20f8f7b48cf80f06f563c7b7 --- /dev/null +++ b/packages/component-faraday-ui/src/AuthorWithTooltip.js @@ -0,0 +1,34 @@ +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) diff --git a/packages/component-faraday-ui/src/ManuscriptCard.js b/packages/component-faraday-ui/src/ManuscriptCard.js index c0c9117eb40519fbe89598ac1778d3760766bb40..74c9f3e4b45b7b7fd6c473c3f143aabdfa4f004f 100644 --- a/packages/component-faraday-ui/src/ManuscriptCard.js +++ b/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}> diff --git a/packages/component-faraday-ui/src/WizardAuthors.js b/packages/component-faraday-ui/src/WizardAuthors.js index b7a6a4d0a005b0b8e395d8203f16da73d892ed48..c5cb13fe3581d2543a0ed58404c3eb6d98fbaf33 100644 --- a/packages/component-faraday-ui/src/WizardAuthors.js +++ b/packages/component-faraday-ui/src/WizardAuthors.js @@ -15,7 +15,7 @@ import { } from './' const WizardAuthors = ({ - authors, + authors = [], moveAuthor, addNewAuthor, setAuthorEdit, diff --git a/packages/component-faraday-ui/src/index.js b/packages/component-faraday-ui/src/index.js index 1d7348d285e38ec23c03fbe4fbf9aea71ea62fb7..d07117a3554b72384abdbf49fe6e6143b2aff927 100644 --- a/packages/component-faraday-ui/src/index.js +++ b/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'