diff --git a/packages/component-faraday-ui/src/AuthorCard.js b/packages/component-faraday-ui/src/AuthorCard.js
index 1c4307d34948b8bc69ca8af9fe4bc40a2abc92c6..f99341d555750e85380dbaba4019142a5b2ffdfa 100644
--- a/packages/component-faraday-ui/src/AuthorCard.js
+++ b/packages/component-faraday-ui/src/AuthorCard.js
@@ -7,12 +7,7 @@ import { required } from 'xpub-validators'
import { H3, ValidatedField, TextField, Checkbox } from '@pubsweet/ui'
import { compose, setDisplayName, withStateHandlers } from 'recompose'
-import Tag from './Tag'
-import Label from './Label'
-import Row from './gridItems/Row'
-import Item from './gridItems/Item'
-import PersonInfo from './PersonInfo'
-import IconButton from './IconButton'
+import { Tag, Label, Row, Item, PersonInfo, IconButton } from './'
// #region AuthorTitle
const AuthorTitle = ({
@@ -83,7 +78,7 @@ const AuthorEdit = ({
handleSubmit,
toggleEditMode,
}) => (
- <Fragment>
+ <AuthorContainer>
<AuthorTitle
editMode={editMode}
isCorresponding={author.isCorresponding}
@@ -126,7 +121,7 @@ const AuthorEdit = ({
/>
</Item>
</Row>
- </Fragment>
+ </AuthorContainer>
)
// #endregion
@@ -138,7 +133,7 @@ const EnhancedAuthorEdit = compose(
)(AuthorEdit)
const Author = ({ author, listIndex, toggleEditMode }) => (
- <Fragment>
+ <AuthorContainer>
<AuthorTitle
isCorresponding={author.isCorresponding}
isSubmitting={author.isSubmitting}
@@ -146,11 +141,19 @@ const Author = ({ author, listIndex, toggleEditMode }) => (
toggleEditMode={toggleEditMode}
/>
<PersonInfo person={author} />
- </Fragment>
+ </AuthorContainer>
)
-const AuthorCard = ({ editMode, toggleEditMode, listIndex = null, author }) => (
+const AuthorCard = ({
+ author,
+ editMode,
+ dragHandle,
+ toggleEditMode,
+ listIndex = null,
+}) => (
<Root>
+ {!editMode &&
+ (typeof dragHandle === 'function' ? dragHandle() : dragHandle)}
{editMode ? (
<EnhancedAuthorEdit
author={author}
@@ -174,7 +177,7 @@ export default compose(
{ editMode: false },
{
toggleEditMode: ({ editMode }, { onEdit }) => () => {
- onEdit()
+ typeof onEdit === 'function' && onEdit()
return {
editMode: !editMode,
}
@@ -194,10 +197,19 @@ const AuthorTags = styled.div`
}
`
+const AuthorContainer = styled.div`
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ padding: ${th('gridUnit')};
+`
+
const Root = styled.div`
+ align-items: center;
border-radius: ${th('borderRadius')};
box-shadow: ${th('boxShadow')};
- padding: calc(${th('gridUnit')} * 2);
+ display: flex;
+ justify-content: flex-start;
margin-bottom: ${th('gridUnit')};
position: relative;
diff --git a/packages/component-faraday-ui/src/AuthorCard.md b/packages/component-faraday-ui/src/AuthorCard.md
index 6b65a60681df3d41c1ce26d90812ff4d00e49ef1..7b9aa3c8609027cc60a929d0a30ba39dd8e5bf02 100644
--- a/packages/component-faraday-ui/src/AuthorCard.md
+++ b/packages/component-faraday-ui/src/AuthorCard.md
@@ -20,3 +20,18 @@ const author = {
<AuthorCard onEdit={() => console.log('s-a dat click pe edit')} listIndex={2} author={author} />
</div>
```
+
+Author card with drag handle (used for sortable lists).
+
+```js
+const author = {
+ email: 'author.here@gmail.com',
+ firstName: 'Sebastian',
+ lastName: 'Teodorescu',
+ affiliation: 'PSD',
+ isSubmitting: true,
+ isCorresponding: true,
+};
+
+<AuthorCard author={author} dragHandle={DragHandle} />
+```
diff --git a/packages/component-faraday-ui/src/DragHandle.js b/packages/component-faraday-ui/src/DragHandle.js
index ed000999f768e8a186731d4989464d61a35c8e1c..1964082471d1bf6fcc4770f6eda306bf6e078004 100644
--- a/packages/component-faraday-ui/src/DragHandle.js
+++ b/packages/component-faraday-ui/src/DragHandle.js
@@ -21,6 +21,7 @@ export default DragHandle
// #region styles
const Handle = styled.div`
+ align-self: stretch;
align-items: center;
background-color: transparent;
border-right: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
@@ -29,7 +30,6 @@ const Handle = styled.div`
flex-direction: column;
justify-content: center;
- height: 100%;
width: calc(${th('gridUnit')} * 4);
span {
diff --git a/packages/component-faraday-ui/src/FileSection.js b/packages/component-faraday-ui/src/FileSection.js
index 63ca11924b0f65f1c481709f84bc38d31ee5cfc5..b5aaa042184c2795ff663ed8a8dd85c65118d1b4 100644
--- a/packages/component-faraday-ui/src/FileSection.js
+++ b/packages/component-faraday-ui/src/FileSection.js
@@ -1,5 +1,6 @@
import React from 'react'
import { th } from '@pubsweet/ui-toolkit'
+import { FilePicker } from '@pubsweet/ui'
import styled, { css } from 'styled-components'
import { compose, withProps } from 'recompose'
@@ -18,14 +19,20 @@ const FileSection = ({
isFirst,
required,
supportedFormats,
+ allowedFileExtensions,
}) => (
<Root isFirst={isFirst} isLast={isLast}>
<Row alignItems="center">
<Item>
<Label required={required}>{title}</Label>
- <ActionLink icon="plus" size="small">
- UPLOAD FILE
- </ActionLink>
+ <FilePicker
+ allowedFileExtensions={allowedFileExtensions}
+ onUpload={file => console.log('uploaded ', file)}
+ >
+ <ActionLink icon="plus" size="small">
+ UPLOAD FILE
+ </ActionLink>
+ </FilePicker>
</Item>
{supportedFormats && (
<Item justify="flex-end">
diff --git a/packages/component-faraday-ui/src/ManuscriptCard.md b/packages/component-faraday-ui/src/ManuscriptCard.md
index aa5588a2194f8354b8a8c2bfd6a3bc7eaff86f45..5be191d9d51a1e74905c95513e93eef6f6859ce9 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',
diff --git a/packages/component-faraday-ui/src/SortableList.js b/packages/component-faraday-ui/src/SortableList.js
new file mode 100644
index 0000000000000000000000000000000000000000..294df130b7bd4159f36df4b9ac969cec926e44fd
--- /dev/null
+++ b/packages/component-faraday-ui/src/SortableList.js
@@ -0,0 +1,5 @@
+import React from 'react'
+
+const SortableList = () => <div>sortable items inside</div>
+
+export default SortableList
diff --git a/packages/component-faraday-ui/src/SortableList.md b/packages/component-faraday-ui/src/SortableList.md
new file mode 100644
index 0000000000000000000000000000000000000000..3302a88e0c13e18de6552e2fe75ba187dfda05cd
--- /dev/null
+++ b/packages/component-faraday-ui/src/SortableList.md
@@ -0,0 +1,5 @@
+A list with drag and drop support.
+
+```js
+<SortableList />
+```
\ No newline at end of file
diff --git a/packages/hindawi-theme/src/elements/Menu.js b/packages/hindawi-theme/src/elements/Menu.js
index 248513efdc31e92289787eae6a1b67ccbb43cb57..101824db4f87b97bc0f89821e6698e6960fbfc9b 100644
--- a/packages/hindawi-theme/src/elements/Menu.js
+++ b/packages/hindawi-theme/src/elements/Menu.js
@@ -3,6 +3,7 @@ import { th } from '@pubsweet/ui-toolkit'
export default {
Main: css`
+ background: ${th('colorBackgroundHue')};
height: calc(${th('gridUnit')} * 4);
min-width: 120px;
`,
diff --git a/packages/hindawi-theme/src/elements/TextField.js b/packages/hindawi-theme/src/elements/TextField.js
index 80169c53944dad3bd69bb9074b35798efff1bd71..05d04a5b49d6b52674885328d017297d16b93668 100644
--- a/packages/hindawi-theme/src/elements/TextField.js
+++ b/packages/hindawi-theme/src/elements/TextField.js
@@ -10,15 +10,14 @@ const textColor = ({ theme, validationStatus = 'default' }) =>
}[validationStatus])
export default {
- Root: css`
- height: 30px;
- `,
Input: css`
border: ${th('borderWidth')} ${th('borderStyle')} ${validationColor};
+ color: ${textColor};
+
font-family: ${th('fontReading')};
font-size: ${th('fontSizeBase')};
line-height: ${th('lineHeightBase')};
- color: ${textColor};
+ height: calc(${th('gridUnit')} * 4);
&:active,
&:focus {
diff --git a/packages/styleguide/styleguide.config.js b/packages/styleguide/styleguide.config.js
index 9d38e49c48d10b34138250998e70f8d2f0d7756b..74f9330bd1ca8fc95a63df4c196a8883be2b201f 100644
--- a/packages/styleguide/styleguide.config.js
+++ b/packages/styleguide/styleguide.config.js
@@ -4,15 +4,15 @@ module.exports = {
sections: [
{
name: 'Hinadwi UI',
- components: ['../component-faraday-ui/src/*.js'],
+ components: ['../component-faraday-ui/src/[A-Z]*.js'],
},
{
name: 'Modals',
- components: ['../component-faraday-ui/src/modals/*.js'],
+ components: ['../component-faraday-ui/src/modals/[A-Z]*.js'],
},
{
name: 'Grid Items',
- components: ['../component-faraday-ui/src/gridItems/*.js'],
+ components: ['../component-faraday-ui/src/gridItems/[A-Z]*.js'],
},
],
styleguideComponents: {