feat(styleguide): modify the default draghandle, add draghandle to author card

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;
 

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} />
+```

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 {

packages/component-faraday-ui/src/FileSection.js

 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">

packages/component-faraday-ui/src/ManuscriptCard.md

@@ -92,7 +92,7 @@ const collection = {
 }
 
 const fragment = {
-  authors: [],
+  authors,
   created: new Date(),
   metadata: {
     journal: 'Awesomeness',

packages/component-faraday-ui/src/SortableList.js

+import React from 'react'
+
+const SortableList = () => <div>sortable items inside</div>
+
+export default SortableList

packages/component-faraday-ui/src/SortableList.md

+A list with drag and drop support.
+
+```js
+<SortableList />
+```
\ No newline at end of file

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;
   `,

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 {

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: {