diff --git a/packages/component-faraday-ui/src/ActionLink.js b/packages/component-faraday-ui/src/ActionLink.js
index 2a42c9c6cba868c85a0972c818a79b630cc062dd..53d0fe42696f9a099e3496cf055ec3200b8c98a7 100644
--- a/packages/component-faraday-ui/src/ActionLink.js
+++ b/packages/component-faraday-ui/src/ActionLink.js
@@ -8,6 +8,8 @@ import { paddingHelper } from './styledHelpers'
const ActionLink = ({
to,
icon,
+ size,
+ onClick,
disabled,
children,
iconSize = 2,
@@ -26,7 +28,9 @@ const ActionLink = ({
{children}
</ExternalLink>
) : (
- <Action disabled={disabled}>{children}</Action>
+ <Action disabled={disabled} onClick={onClick} size={size}>
+ {children}
+ </Action>
)}
{icon &&
iconPosition === 'right' && (
diff --git a/packages/component-faraday-ui/src/ActionLink.md b/packages/component-faraday-ui/src/ActionLink.md
index bae37c162f073ebfd69b3734f5f135d7df2ff5f7..0cd8d6bd08b1b05eb671aea9fac370142a1d8866 100644
--- a/packages/component-faraday-ui/src/ActionLink.md
+++ b/packages/component-faraday-ui/src/ActionLink.md
@@ -1,7 +1,7 @@
A clickable text button.
```js
-<ActionLink>Default action</ActionLink>
+<ActionLink onClick={() => console.log('I am clicked.')}>Default action</ActionLink>
```
A disabled text buton.
diff --git a/packages/component-faraday-ui/src/File.js b/packages/component-faraday-ui/src/File.js
index 7645d73ff4cfbc703eabaee9b8adfa560770d42d..a0f04d2d92dec5e7556868bc7b2f3a29010682c9 100644
--- a/packages/component-faraday-ui/src/File.js
+++ b/packages/component-faraday-ui/src/File.js
@@ -7,9 +7,8 @@ import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { withProps, withHandlers, compose } from 'recompose'
-import Text from './Text'
-import Label from './Label'
-import IconButton from './IconButton'
+import { Label, IconButton, Text } from './'
+import { marginHelper } from './styledHelpers'
const parseFileSize = size => {
const kbSize = size / 1000
@@ -27,7 +26,7 @@ const parseFileSize = size => {
}
const hasPreview = (name = '') => {
- const extension = last(name.split('.'))
+ const extension = last(name.split('.')).toLocaleLowerCase()
return ['pdf', 'png', 'jpg'].includes(extension)
}
@@ -39,8 +38,9 @@ const FileItem = ({
hasPreview,
onDownload,
dragHandle = null,
+ ...rest
}) => (
- <Root data-test-id={`file-${file.id}`}>
+ <Root data-test-id={`file-${file.id}`} {...rest}>
{typeof dragHandle === 'function' ? dragHandle() : dragHandle}
<FileInfo>
<Text secondary>{file.name}</Text>
@@ -100,11 +100,14 @@ export default compose(
// #region styles
const Root = styled.div`
align-items: center;
+ background-color: ${th('colorBackgroundHue')};
border: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
+ box-shadow: ${th('boxShadow')};
border-radius: ${th('borderRadius')};
display: flex;
height: calc(${th('gridUnit')} * 5);
- margin: ${th('gridUnit')};
+
+ ${marginHelper};
`
const FileInfo = styled.div`
diff --git a/packages/component-faraday-ui/src/FileSection.js b/packages/component-faraday-ui/src/FileSection.js
index 2c7af8f04bb5f51a12a5817e287709be7fbd3221..63ca11924b0f65f1c481709f84bc38d31ee5cfc5 100644
--- a/packages/component-faraday-ui/src/FileSection.js
+++ b/packages/component-faraday-ui/src/FileSection.js
@@ -1,12 +1,98 @@
import React from 'react'
-import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+import styled, { css } from 'styled-components'
+import { compose, withProps } from 'recompose'
-const FileSection = () => <Root>file section here</Root>
+import { Label, ActionLink, Text, Row, Item, FileItem, DragHandle } from './'
-export default FileSection
+const EXTENSIONS = {
+ pdf: 'PDF',
+ doc: 'Doc',
+ docx: 'DocX',
+ png: 'PNG',
+}
+
+const FileSection = ({
+ title,
+ isLast,
+ isFirst,
+ required,
+ supportedFormats,
+}) => (
+ <Root isFirst={isFirst} isLast={isLast}>
+ <Row alignItems="center">
+ <Item>
+ <Label required={required}>{title}</Label>
+ <ActionLink icon="plus" size="small">
+ UPLOAD FILE
+ </ActionLink>
+ </Item>
+ {supportedFormats && (
+ <Item justify="flex-end">
+ <Text fontStyle="italic" secondary>
+ Supported file formats: {supportedFormats}
+ </Text>
+ </Item>
+ )}
+ </Row>
+ <FileItem
+ dragHandle={DragHandle}
+ file={{
+ id: 'file1',
+ name: 'myfile.docx',
+ size: 51312,
+ }}
+ mb={1}
+ />
+ <FileItem
+ dragHandle={DragHandle}
+ file={{
+ id: 'file1',
+ name: 'myfile.docx',
+ size: 51312,
+ }}
+ mb={1}
+ />
+ </Root>
+)
+
+export default compose(
+ withProps(({ allowedFileExtensions = [] }) => ({
+ supportedFormats: allowedFileExtensions
+ .map(ext => EXTENSIONS[ext.toLowerCase()])
+ .join(', '),
+ })),
+)(FileSection)
// #region styles
+const radiusHelpers = props => {
+ const marginTop = props.isFirst
+ ? css`
+ border-top-left-radius: ${th('borderRadius')};
+ border-top-right-radius: ${th('borderRadius')};
+ `
+ : css``
+
+ const marginBottom = props.isLast
+ ? css`
+ border-bottom-left-radius: ${th('borderRadius')};
+ border-bottom-right-radius: ${th('borderRadius')};
+ `
+ : css``
+
+ return css`
+ border-radius: none;
+ ${marginTop};
+ ${marginBottom};
+ `
+}
+
const Root = styled.div`
- background: lavenderblush;
+ background: ${th('colorBackground')};
+ min-height: calc(${th('gridUnit')} * 22);
+ padding: 0 ${th('gridUnit')};
+
+ ${radiusHelpers};
+ border-bottom: ${props => (!props.isLast ? '1px dashed #dbdbdb' : 'none')};
`
// #endregion
diff --git a/packages/component-faraday-ui/src/FileSection.md b/packages/component-faraday-ui/src/FileSection.md
index 0ac715efcda4eda97cdb0094be4c4964834d450b..d9dd000a978cb801f3217df1cf7f4f2cf0f49891 100644
--- a/packages/component-faraday-ui/src/FileSection.md
+++ b/packages/component-faraday-ui/src/FileSection.md
@@ -1,4 +1,28 @@
-A section that shows FileItems. Drang and drop support.
+A section that shows FileItems. Drag and drop support.
```js
-```
\ No newline at end of file
+<FileSection
+ title="Main Manuscript"
+ required
+ allowedFileExtensions={['pdf', 'doc', 'docx']}
+/>
+```
+
+Multiple sections on top of each other.
+
+```js
+<div style={{ display: 'flex', flexDirection: 'column' }}>
+ <FileSection
+ title="Main Manuscript"
+ isFirst
+ required
+ allowedFileExtensions={['pdf', 'doc', 'docx']}
+ />
+ <FileSection
+ title="Cover Letter"
+ required
+ allowedFileExtensions={['pdf', 'doc', 'docx']}
+ />
+ <FileSection title="Supplimental Files" required isLast />
+</div>
+```
diff --git a/packages/component-faraday-ui/src/ManuscriptCard.js b/packages/component-faraday-ui/src/ManuscriptCard.js
index 427f49b415096d426aae8d887b36bbce94603416..8090c87170cd556126d4269f6e3bbc5ceb69177c 100644
--- a/packages/component-faraday-ui/src/ManuscriptCard.js
+++ b/packages/component-faraday-ui/src/ManuscriptCard.js
@@ -28,7 +28,7 @@ const ManuscriptCard = ({
{visibleStatus}
</Tag>
</Row>
- {authors && (
+ {authors.length > 0 && (
<Row alignItems="center" justify="flex-start" mb={1}>
<AuthorTagList authors={authors} />
</Row>
diff --git a/packages/component-faraday-ui/src/ManuscriptCard.md b/packages/component-faraday-ui/src/ManuscriptCard.md
index 26c57cd9b4c9adc71b13cade3c6273f92abd02f8..aa5588a2194f8354b8a8c2bfd6a3bc7eaff86f45 100644
--- a/packages/component-faraday-ui/src/ManuscriptCard.md
+++ b/packages/component-faraday-ui/src/ManuscriptCard.md
@@ -92,7 +92,7 @@ const collection = {
}
const fragment = {
- authors,
+ authors: [],
created: new Date(),
metadata: {
journal: 'Awesomeness',
@@ -105,6 +105,5 @@ const fragment = {
<ManuscriptCard
collection={collection}
fragment={fragment}
- authors={authors}
/>
```
\ No newline at end of file
diff --git a/packages/component-faraday-ui/src/Text.js b/packages/component-faraday-ui/src/Text.js
index a20e14240b4b57b5fd483c9784a2d91bd9701cb8..f3663495b31f777d7621a0709ef7048e79d51bec 100644
--- a/packages/component-faraday-ui/src/Text.js
+++ b/packages/component-faraday-ui/src/Text.js
@@ -38,6 +38,7 @@ const fontSize = css`
export default styled.span`
display: inline-block;
+ font-style: ${props => props.fontStyle || 'normal'};
text-align: ${props => props.align || 'start'};
${fontSize};
${textHelper};
diff --git a/packages/component-faraday-ui/src/gridItems/Item.js b/packages/component-faraday-ui/src/gridItems/Item.js
index 77368ae96a1d06c961a6bc16267b889fffcb4a45..500bd409f5bb28fbd6957bc1ed1669cb4cae14e4 100644
--- a/packages/component-faraday-ui/src/gridItems/Item.js
+++ b/packages/component-faraday-ui/src/gridItems/Item.js
@@ -8,7 +8,7 @@ export default styled.div.attrs({
display: flex;
flex: ${({ flex }) => (isNumber(flex) ? flex : 1)};
flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
- justify-content: ${({ centered }) => (centered ? 'center' : 'initial')};
+ justify-content: ${({ justify }) => justify || 'initial'};
margin-right: ${({ withRightMargin }) =>
withRightMargin ? th('gridUnit') : 0};
`
diff --git a/packages/component-faraday-ui/src/gridItems/Row.js b/packages/component-faraday-ui/src/gridItems/Row.js
index 0f5eb2f175029f2aea401ef6c749ca88512288f7..60fedfa89f628da9227c5021934e026dd89c35cc 100644
--- a/packages/component-faraday-ui/src/gridItems/Row.js
+++ b/packages/component-faraday-ui/src/gridItems/Row.js
@@ -11,6 +11,7 @@ export default styled.div.attrs({
display: flex;
flex-direction: row;
justify-content: ${({ justify }) => justify || 'space-evenly'};
+
width: 100%;
${marginHelper};
diff --git a/packages/component-faraday-ui/src/index.js b/packages/component-faraday-ui/src/index.js
index e8d7558d16339ef24fee4df7ae9c8d50c2711995..22efa382a9483bf47c55f2faf1ff0df4e2a3c7a7 100644
--- a/packages/component-faraday-ui/src/index.js
+++ b/packages/component-faraday-ui/src/index.js
@@ -7,7 +7,7 @@ export { default as AuthorTagList } from './AuthorTagList'
export { default as AutosaveIndicator } from './AutosaveIndicator'
export { default as ContextualBox } from './ContextualBox'
export { default as DragHandle } from './DragHandle'
-export { default as File } from './File'
+export { default as FileItem } from './File'
export { default as IconButton } from './IconButton'
export { default as Label } from './Label'
export { default as Logo } from './Logo'
diff --git a/packages/component-wizard/src/components/StepOne.js b/packages/component-wizard/src/components/StepOne.js
index b6cc33b1cdefcbd2734f6f96dc1640dbb10cbd9b..59f383db4ce3638622fe296234965bdb5d1dea91 100644
--- a/packages/component-wizard/src/components/StepOne.js
+++ b/packages/component-wizard/src/components/StepOne.js
@@ -13,7 +13,7 @@ const StepOne = () => (
prepared and have reviewed the items on the list below:
</Text>
</Row>
- <Row justify="flex-start" mb={1}>
+ <Row alignItems="center" justify="flex-start" mb={1}>
<Text>
I am aware that accepted manuscripts are subject to an
<ActionLink pl={1 / 2} pr={1 / 2} to="https://www.hindawi.com/apc/">
@@ -21,30 +21,30 @@ const StepOne = () => (
</ActionLink>
</Text>
</Row>
- <Row justify="flex-start" mb={1}>
+ <Row alignItems="center" justify="flex-start" mb={1}>
<Text>
All co-authors have read and agreed on the current version of this
manuscript.
</Text>
</Row>
- <Row justify="flex-start" mb={1}>
+ <Row alignItems="center" justify="flex-start" mb={1}>
<Text>
I have the email addresses of all co-authors of the manuscript.
</Text>
</Row>
- <Row justify="flex-start" mb={1}>
+ <Row alignItems="center" justify="flex-start" mb={1}>
<Text>
I confirm the main manuscript file is in Microsoft Word or Adobe PDF
format with the tables and figures integrated in the manuscript body.
</Text>
</Row>
- <Row justify="flex-start" mb={1}>
+ <Row alignItems="center" justify="flex-start" mb={1}>
<Text>
I have all additional electronic files of supplementary materials (e.g.
Datasets, images, audio, video) ready.
</Text>
</Row>
- <Row justify="flex-start" mb={1}>
+ <Row alignItems="center" justify="flex-start" mb={1}>
<Text>
I am aware that an
<ActionLink pl={1 / 2} pr={1 / 2} to="https://orcid.org/">
@@ -55,7 +55,7 @@ const StepOne = () => (
account.
</Text>
</Row>
- <Row justify="flex-start" mb={1}>
+ <Row alignItems="center" justify="flex-start" mb={1}>
<Text>
I am aware that an
<ActionLink pl={1 / 2} pr={1 / 2} to="https://www.hindawi.com/members/">
@@ -66,7 +66,7 @@ const StepOne = () => (
account.
</Text>
</Row>
- <Row justify="center" mb={6} mt={1}>
+ <Row alignItems="center" justify="center" mb={6} mt={1}>
<ValidatedField component={CustomCheckbox} name="declarations.agree" />
</Row>
</Fragment>
diff --git a/packages/hindawi-theme/src/elements/Action.js b/packages/hindawi-theme/src/elements/Action.js
index 7a1262f1455544d86d8e697604efa5212cb852da..44244ab21a5cb3d611a066b63f4264c269d6e0b7 100644
--- a/packages/hindawi-theme/src/elements/Action.js
+++ b/packages/hindawi-theme/src/elements/Action.js
@@ -9,7 +9,8 @@ export default css`
text-decoration: none;
}
- &:active {
+ &:active,
+ &:focus {
color: ${th('action.colorActive')};
text-decoration: none;
}
diff --git a/packages/hindawi-theme/src/elements/Icon.js b/packages/hindawi-theme/src/elements/Icon.js
index 2251412c6f3c7bec436831ee1cf7deb76ce1c2d7..1eeadbf2c930c231cf3a24cd105d5461586eea6c 100644
--- a/packages/hindawi-theme/src/elements/Icon.js
+++ b/packages/hindawi-theme/src/elements/Icon.js
@@ -11,5 +11,4 @@ export default css`
}
}
display: initial;
- padding-top: 6px;
`
diff --git a/packages/hindawi-theme/src/index.js b/packages/hindawi-theme/src/index.js
index 54d4087ae9998fda8708249e39a9aab7301c0c0c..9654adbf9c513417a76cc6f079cfe4852e4e206a 100644
--- a/packages/hindawi-theme/src/index.js
+++ b/packages/hindawi-theme/src/index.js
@@ -32,7 +32,7 @@ const hindawiTheme = {
colorSecondary: '#586971',
colorFurniture: '#DBDBDB',
colorBorder: '#DBDBDB',
- colorBackgroundHue: '#F1F1F1',
+ colorBackgroundHue: '#FFFFFF',
colorSuccess: '#63A945',
colorError: '#FC6A4B',
colorText: '#242424',