From ff951f97a7ca57c3a86612780134ec9967a65db9 Mon Sep 17 00:00:00 2001 From: Bogdan Cochior <bogdan.cochior@thinslices.com> Date: Fri, 24 Aug 2018 10:30:28 +0300 Subject: [PATCH] feat(file-list): add manuscript file list --- packages/component-faraday-ui/package.json | 2 +- packages/component-faraday-ui/src/File.js | 15 ++++-- .../src/ManuscriptFileList.js | 42 ++++++++++++++++ .../src/ManuscriptFileList.md | 46 +++++++++++++++++ .../src/ManuscriptHeader.js | 2 +- .../src/ManuscriptMetadata.js | 50 +++++++++++++++++++ .../src/ManuscriptMetadata.md | 37 ++++++++++++++ packages/component-faraday-ui/src/Text.js | 14 ++++++ packages/component-faraday-ui/src/index.js | 2 + packages/component-wizard/package.json | 2 +- packages/components-faraday/package.json | 2 +- .../hindawi-theme/src/elements/Accordion.js | 1 + packages/hindawi-theme/src/index.js | 1 + packages/styleguide/package.json | 2 +- packages/xpub-faraday/package.json | 2 +- yarn.lock | 24 +++++++++ 16 files changed, 235 insertions(+), 9 deletions(-) create mode 100644 packages/component-faraday-ui/src/ManuscriptFileList.js create mode 100644 packages/component-faraday-ui/src/ManuscriptFileList.md create mode 100644 packages/component-faraday-ui/src/ManuscriptMetadata.js create mode 100644 packages/component-faraday-ui/src/ManuscriptMetadata.md diff --git a/packages/component-faraday-ui/package.json b/packages/component-faraday-ui/package.json index 4ace0cbd7..523ce8803 100644 --- a/packages/component-faraday-ui/package.json +++ b/packages/component-faraday-ui/package.json @@ -4,7 +4,7 @@ "main": "src", "license": "MIT", "dependencies": { - "@pubsweet/ui": "^8.3.0", + "@pubsweet/ui": "^8.5.0", "@pubsweet/ui-toolkit": "^1.2.0", "grid-styled": "5.0.2", "prop-types": "^15.6.2", diff --git a/packages/component-faraday-ui/src/File.js b/packages/component-faraday-ui/src/File.js index 5b870944b..4d8d80bc5 100644 --- a/packages/component-faraday-ui/src/File.js +++ b/packages/component-faraday-ui/src/File.js @@ -34,8 +34,8 @@ const FileItem = ({ fileSize, onPreview, item: file, - removeFile, hasPreview, + hasDelete, onDownload, onDelete, dragHandle = null, @@ -65,7 +65,15 @@ const FileItem = ({ onClick={onDownload} secondary /> - <IconButton icon="trash" iconSize={2} mr={1} onClick={onDelete} secondary /> + {hasDelete && ( + <IconButton + icon="trash" + iconSize={2} + mr={1} + onClick={onDelete} + secondary + /> + )} </Root> ) @@ -87,8 +95,9 @@ FileItem.propTypes = { } export default compose( - withProps(({ name, size }) => ({ + withProps(({ item: { name, size }, onDelete }) => ({ hasPreview: hasPreview(name), + hasDelete: !!onDelete, fileSize: parseFileSize(size), })), withHandlers({ diff --git a/packages/component-faraday-ui/src/ManuscriptFileList.js b/packages/component-faraday-ui/src/ManuscriptFileList.js new file mode 100644 index 000000000..db577bca3 --- /dev/null +++ b/packages/component-faraday-ui/src/ManuscriptFileList.js @@ -0,0 +1,42 @@ +import React, { Fragment } from 'react' +import { Text, FileItem } from 'pubsweet-component-faraday-ui' + +const ManuscriptFileList = ({ + files: { manuscripts = [], coverLetter = [], supplementary = [] }, + ...rest +}) => ( + <Fragment> + {!!manuscripts.length && ( + <Fragment> + <Text labelLine mb={1} mt={3}> + MAIN MANUSCRIPT + </Text> + {manuscripts.map(file => ( + <FileItem item={file} key={file.id} {...rest} mb={1} /> + ))} + </Fragment> + )} + {!!supplementary.length && ( + <Fragment> + <Text labelLine mb={1} mt={2}> + SUPPLEMENTARY FILES + </Text> + {supplementary.map(file => ( + <FileItem item={file} key={file.id} {...rest} mb={1} /> + ))} + </Fragment> + )} + {!!coverLetter.length && ( + <Fragment> + <Text labelLine mb={1} mt={2}> + COVER LETTER + </Text> + {coverLetter.map(file => ( + <FileItem item={file} key={file.id} {...rest} mb={1} /> + ))} + </Fragment> + )} + </Fragment> +) + +export default ManuscriptFileList diff --git a/packages/component-faraday-ui/src/ManuscriptFileList.md b/packages/component-faraday-ui/src/ManuscriptFileList.md new file mode 100644 index 000000000..01bf0e32a --- /dev/null +++ b/packages/component-faraday-ui/src/ManuscriptFileList.md @@ -0,0 +1,46 @@ +Manuscript file list + +```js +const files = { + coverLetter: [ + { + id: + '8dca903a-05b9-45ab-89b9-9cb99a9a29c6/02db6c5e-2938-45ac-a5ee-67ae63919bb2', + name: 'Cover letter.docx', + size: 59621, + originalName: 'Cover letter.docx', + }, + ], + manuscripts: [ + { + id: + '8dca903a-05b9-45ab-89b9-9cb99a9a29c6/5e69e3d9-7f9d-4e8d-b649-6e6a45658d75', + name: 'Main manuscript.pdf', + size: 476862, + originalName: 'Main manuscript.pdf', + }, + ], + supplementary: [ + { + id: + '8dca903a-05b9-45ab-89b9-9cb99a9a29c6/02db6c5e-2938-45ac-a5ee-67ae63919bb2', + name: 'Supplementary File 1.jpg', + size: 59621, + originalName: 'Supplementary File 1.jpg', + }, + { + id: + '8dca903a-05b9-45ab-89b9-9cb99a9a29c6/5e69e3d9-7f9d-4e8d-b649-6e6a45658d75', + name: 'Supplementary File 2.docx', + size: 476862, + originalName: 'Supplementary File 2.docx', + }, + ], +} +;<ManuscriptFileList + files={files} + onDelete={() => alert('delete')} + onDownload={() => alert('downloading')} + onPreview={() => alert('No preview')} +/> +``` diff --git a/packages/component-faraday-ui/src/ManuscriptHeader.js b/packages/component-faraday-ui/src/ManuscriptHeader.js index 3d8c19b58..63c356d95 100644 --- a/packages/component-faraday-ui/src/ManuscriptHeader.js +++ b/packages/component-faraday-ui/src/ManuscriptHeader.js @@ -3,7 +3,7 @@ import { get } from 'lodash' import { H2, H4, DateParser } from '@pubsweet/ui' import { compose, withProps } from 'recompose' -import { Tag, Text, Row, AuthorTagList } from './' +import { Tag, Text, Row, AuthorTagList } from 'pubsweet-component-faraday-ui' const ManuscriptHeader = ({ fragment = {}, diff --git a/packages/component-faraday-ui/src/ManuscriptMetadata.js b/packages/component-faraday-ui/src/ManuscriptMetadata.js new file mode 100644 index 000000000..4dbbdacb7 --- /dev/null +++ b/packages/component-faraday-ui/src/ManuscriptMetadata.js @@ -0,0 +1,50 @@ +import React, { Fragment } from 'react' +import { isEmpty, get } from 'lodash' + +// import { Accordion } from '@pubsweet/ui' +import Accordion from 'pubsweet-component-faraday-ui/src/pending/Accordion' +import { Text, Item } from 'pubsweet-component-faraday-ui' + +const ManuscriptMetadata = ({ + fragment: { + files = {}, + authors = [], + conflicts = {}, + metadata: { abstract = '' }, + }, +}) => ( + <Fragment> + {!!abstract && ( + <Item mb={1}> + <Accordion label="Abstract" transparent> + <Text dangerouslySetInnerHTML={{ __html: abstract }} mb={1} mt={1} /> + </Accordion> + </Item> + )} + {conflicts.hasConflicts === 'yes' && ( + <Item mb={1}> + <Accordion label="Conflict of Interest" transparent> + <Text + dangerouslySetInnerHTML={{ __html: get(conflicts, 'message', '') }} + mb={1} + mt={1} + /> + </Accordion> + </Item> + )} + {!isEmpty(files) && ( + <Item mb={1}> + <Accordion + label={`Files (${files.coverLetter.length + + files.manuscripts.length + + files.supplementary.length})`} + transparent + > + Fisiere aici + </Accordion> + </Item> + )} + </Fragment> +) + +export default ManuscriptMetadata diff --git a/packages/component-faraday-ui/src/ManuscriptMetadata.md b/packages/component-faraday-ui/src/ManuscriptMetadata.md new file mode 100644 index 000000000..432cebaf3 --- /dev/null +++ b/packages/component-faraday-ui/src/ManuscriptMetadata.md @@ -0,0 +1,37 @@ +Manuscript details and metadata: abstract, conflict of interest, files + +```js +const fragment = { + metadata: { + abstract: + 'In sinus, invariably you have the headache, but every headache is not sinus! Sinus and nasal passage problems are the cause of headache, mostly! It is not that you have pain in the sinus area and you need to conclude that you have a sinus disorder. When the nasal passage and sinus are inflamed, it can result in a severe headache. In acute chronic sinus, the intensity of headache varies with the severity of the sinus. Sinus patients complain about many other problems. ', + }, + conflicts: { + message: + 'Prevention is better than cure.Well said and we…ou have a sinus disorder. When the nasal passage ', + hasConflicts: 'yes', + }, + files: { + coverLetter: [ + { + id: + '8dca903a-05b9-45ab-89b9-9cb99a9a29c6/02db6c5e-2938-45ac-a5ee-67ae63919bb2', + name: 'Rocketbook-A4-DotGrid.pdf', + size: 59621, + originalName: 'Rocketbook-A4-DotGrid.pdf', + }, + ], + manuscripts: [ + { + id: + '8dca903a-05b9-45ab-89b9-9cb99a9a29c6/5e69e3d9-7f9d-4e8d-b649-6e6a45658d75', + name: 'manuscript.pdf', + size: 476862, + originalName: 'manuscript.pdf', + }, + ], + supplementary: [], + }, +} +;<ManuscriptMetadata fragment={fragment} /> +``` diff --git a/packages/component-faraday-ui/src/Text.js b/packages/component-faraday-ui/src/Text.js index f4d928232..efd11e43e 100644 --- a/packages/component-faraday-ui/src/Text.js +++ b/packages/component-faraday-ui/src/Text.js @@ -23,6 +23,20 @@ const textHelper = props => { font-family: ${th('fontInterface')}; ` } + if (has(props, 'labelLine')) { + return css` + color: ${th('colorFurnitureHue')}; + font-family: ${th('fontInterface')}; + display: flex; + &:after { + display: block; + content: ' '; + border-bottom: 1px solid ${th('colorBorder')}; + flex: 1 1 auto; + margin-left: calc(${th('gridUnit')} * 2); + } + ` + } return css` color: ${th('colorText')}; font-family: ${th('fontReading')}; diff --git a/packages/component-faraday-ui/src/index.js b/packages/component-faraday-ui/src/index.js index 796e99d98..a7b1716c4 100644 --- a/packages/component-faraday-ui/src/index.js +++ b/packages/component-faraday-ui/src/index.js @@ -25,6 +25,8 @@ export { default as PreviewFile } from './PreviewFile' export { default as DownloadZipFiles } from './DownloadZipFiles' export { default as ManuscriptVersion } from './ManuscriptVersion' export { default as ManuscriptHeader } from './ManuscriptHeader' +export { default as ManuscriptMetadata } from './ManuscriptMetadata' +export { default as ManuscriptFileList } from './ManuscriptFileList' // Manuscript Details export * from './manuscriptDetails' diff --git a/packages/component-wizard/package.json b/packages/component-wizard/package.json index a2e54a93f..a7009aece 100644 --- a/packages/component-wizard/package.json +++ b/packages/component-wizard/package.json @@ -9,7 +9,7 @@ "dist" ], "dependencies": { - "@pubsweet/ui": "^8.3.0", + "@pubsweet/ui": "^8.5.0", "@pubsweet/styleguide": "3.1.4", "@pubsweet/ui-toolkit": "latest", "moment": "^2.20.1", diff --git a/packages/components-faraday/package.json b/packages/components-faraday/package.json index 2322a6398..ec6304020 100644 --- a/packages/components-faraday/package.json +++ b/packages/components-faraday/package.json @@ -4,7 +4,7 @@ "main": "src", "license": "MIT", "dependencies": { - "@pubsweet/ui": "^8.3.0", + "@pubsweet/ui": "^8.5.0", "@pubsweet/ui-toolkit": "latest", "@pubsweet/styleguide": "3.1.4", "moment": "^2.22.1", diff --git a/packages/hindawi-theme/src/elements/Accordion.js b/packages/hindawi-theme/src/elements/Accordion.js index 12da34b3a..649315076 100644 --- a/packages/hindawi-theme/src/elements/Accordion.js +++ b/packages/hindawi-theme/src/elements/Accordion.js @@ -8,6 +8,7 @@ export default { border-radius: ${th('borderRadius')}; box-shadow: ${props => props.transparent ? 'transparent' : th('boxShadow')}; + flex: 1; `, Header: { Root: css` diff --git a/packages/hindawi-theme/src/index.js b/packages/hindawi-theme/src/index.js index e3311faf2..1bccea7aa 100644 --- a/packages/hindawi-theme/src/index.js +++ b/packages/hindawi-theme/src/index.js @@ -34,6 +34,7 @@ const hindawiTheme = { colorPrimary: '#63A945', colorSecondary: '#586971', colorFurniture: '#DBDBDB', + colorFurnitureHue: '#939393', colorBorder: '#DBDBDB', colorBackgroundHue: '#FFFFFF', colorBackgroundHue2: '#F6F6F6', diff --git a/packages/styleguide/package.json b/packages/styleguide/package.json index ecf81552a..db36aa578 100644 --- a/packages/styleguide/package.json +++ b/packages/styleguide/package.json @@ -19,7 +19,7 @@ "webpack-node-externals": "^1.6.0" }, "dependencies": { - "@pubsweet/ui": "^8.3.0", + "@pubsweet/ui": "^8.5.0", "@pubsweet/ui-toolkit": "^1.2.0", "hindawi-theme": "^1.0.1", "react": "^16.4.2", diff --git a/packages/xpub-faraday/package.json b/packages/xpub-faraday/package.json index 20715cf44..7a97da9f2 100644 --- a/packages/xpub-faraday/package.json +++ b/packages/xpub-faraday/package.json @@ -8,7 +8,7 @@ "url": "https://gitlab.coko.foundation/xpub/xpub-faraday" }, "dependencies": { - "@pubsweet/ui": "^8.3.0", + "@pubsweet/ui": "^8.5.0", "@pubsweet/styleguide": "3.1.4", "@pubsweet/ui-toolkit": "latest", "@pubsweet/component-aws-s3": "^1.2.0", diff --git a/yarn.lock b/yarn.lock index 0c4966c24..6404587a1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -207,6 +207,30 @@ redux-form "^7.0.3" styled-components "^3.2.5" +"@pubsweet/ui@^8.5.0": + version "8.5.0" + resolved "https://registry.yarnpkg.com/@pubsweet/ui/-/ui-8.5.0.tgz#91dd438e320431ca8e60b0f41d49cd46e1ccb66a" + dependencies: + "@pubsweet/ui-toolkit" "^1.2.0" + babel-jest "^21.2.0" + classnames "^2.2.5" + enzyme "^3.2.0" + enzyme-adapter-react-16 "^1.1.1" + invariant "^2.2.3" + lodash "^4.17.4" + moment "^2.22.1" + prop-types "^15.5.10" + react "^16.2.0" + react-dom "^16.2.0" + react-feather "^1.0.8" + react-redux "^5.0.2" + react-router-dom "^4.2.2" + react-tag-autocomplete "^5.5.0" + recompose "^0.26.0" + redux "^3.6.0" + redux-form "^7.0.3" + styled-components "^3.2.5" + "@types/async@2.0.49": version "2.0.49" resolved "https://registry.yarnpkg.com/@types/async/-/async-2.0.49.tgz#92e33d13f74c895cb9a7f38ba97db8431ed14bc0" -- GitLab