From 781d7b31d57a1ac1805d5a73d2201b04fdc806c3 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Fri, 17 Aug 2018 14:57:54 +0300
Subject: [PATCH] feat(styleguide): add file section (without drag and drop
funcionality)
---
.../component-faraday-ui/src/ActionLink.js | 6 +-
.../component-faraday-ui/src/ActionLink.md | 2 +-
packages/component-faraday-ui/src/File.js | 15 +--
.../component-faraday-ui/src/FileSection.js | 94 ++++++++++++++++++-
.../component-faraday-ui/src/FileSection.md | 28 +++++-
.../src/ManuscriptCard.js | 2 +-
.../src/ManuscriptCard.md | 3 +-
packages/component-faraday-ui/src/Text.js | 1 +
.../src/gridItems/Item.js | 2 +-
.../component-faraday-ui/src/gridItems/Row.js | 1 +
packages/component-faraday-ui/src/index.js | 2 +-
.../src/components/StepOne.js | 16 ++--
packages/hindawi-theme/src/elements/Action.js | 3 +-
packages/hindawi-theme/src/elements/Icon.js | 1 -
packages/hindawi-theme/src/index.js | 2 +-
15 files changed, 148 insertions(+), 30 deletions(-)
diff --git a/packages/component-faraday-ui/src/ActionLink.js b/packages/component-faraday-ui/src/ActionLink.js
index 2a42c9c6c..53d0fe426 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 bae37c162..0cd8d6bd0 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 7645d73ff..a0f04d2d9 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 2c7af8f04..63ca11924 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 0ac715efc..d9dd000a9 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 427f49b41..8090c8717 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 26c57cd9b..aa5588a21 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 a20e14240..f3663495b 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 77368ae96..500bd409f 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 0f5eb2f17..60fedfa89 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 e8d7558d1..22efa382a 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 b6cc33b1c..59f383db4 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 7a1262f14..44244ab21 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 2251412c6..1eeadbf2c 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 54d4087ae..9654adbf9 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',
--
GitLab