Merge branch 'hindawi-theme' of https://gitlab.coko.foundation/xpub/xpub-faraday into hindawi-theme

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

@@ -10,27 +10,27 @@ import {
   Tag,
   Text,
   Row,
-  // Item,
+  Item,
   IconButton,
-  // ActionLink,
+  ActionLink,
   AuthorTagList,
   ReviewerBreakdown,
 } from './'
 
-// import { OpenModal } from './modals'
+import { OpenModal } from './modals'
 
 const ManuscriptCard = ({
-  onCardClick,
   onDelete,
   canDelete,
+  onCardClick,
   fragment = {},
   manuscriptType = {},
   collection: { visibleStatus = 'Draft', handlingEditor, customId },
 }) => {
   const {
     authors = [],
-    id: fragmentId,
     metadata = {},
+    id: fragmentId,
     submitted = null,
   } = fragment
   const { title = 'No title', journal = '', type = '' } = metadata
@@ -72,7 +72,7 @@ const ManuscriptCard = ({
           {handlingEditor && (
             <ReviewerBreakdown fragment={fragment} label="Reviewer Reports" />
           )}
-          {/* {canDelete && (
+          {canDelete && (
             <Item justify="flex-end" onClick={e => e.stopPropagation()}>
               <OpenModal
                 confirmAction={onDelete}
@@ -87,7 +87,7 @@ const ManuscriptCard = ({
                 )}
               </OpenModal>
             </Item>
-          )} */}
+          )}
         </Row>
       </MainContainer>
       <SideNavigation>

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

@@ -93,16 +93,16 @@ const collection = {
 
 const fragment = {
   authors,
-  created: new Date(),
-  submitted: new Date(),
+  created: Date.now(),
+  submitted: Date.now(),
   metadata: {
     journal: 'Awesomeness',
     title: 'A very ok title with many authors',
     type: 'Research article',
   },
-}
+};
 
-;<ManuscriptCard
+<ManuscriptCard
   collection={collection}
   fragment={fragment}
   onDelete={() => alert('Deleted')}

packages/component-faraday-ui/src/modals/OpenModal.js

@@ -4,7 +4,7 @@ import { withModal } from 'pubsweet-component-modal/src/components'
 
 import { MultiAction } from './'
 
-const OpenModal = ({ onClickEvent, children }) => children(onClickEvent)
+const OpenModal = ({ showModal, children }) => children(showModal)
 
 export default compose(
   withModal(() => ({
@@ -21,11 +21,11 @@ export default compose(
     },
   }),
   withHandlers({
-    onClickEvent: ({
+    showModal: ({
       showModal,
       hideModal,
-      setModalError,
       handleError,
+      setModalError,
       confirmAction,
       ...rest
     }) => e => {

packages/component-faraday-ui/src/modals/OpenModal.md

@@ -5,12 +5,30 @@ Open a confirmation modal by clicking on an element
   confirmAction={() => alert('Confirm')}
   title="Are you sure?"
   confirmText="Delete"
-  modalKey="1"
+  modalKey="123"
 >
-  {onClickEvent => (
-    <ActionLink icon="trash" onClick={onClickEvent}>
+  {showModal => (
+    <ActionLink icon="trash" onClick={showModal}>
       Delete
     </ActionLink>
   )}
 </OpenModal>
 ```
+
+Pass a custon component as the modal content.
+
+```js
+const Custom = () => <div>inside the modal</div>;
+
+<OpenModal
+  confirmAction={() => alert('Confirm')}
+  title="Are you sure?"
+  confirmText="Delete"
+  content={Custom}
+  modalKey="123"
+>
+  {showModal => (
+    <Tag onClick={showModal}>CUSTOM</Tag>
+  )}
+</OpenModal>
+```

packages/component-modal/src/components/withModal.js

@@ -7,7 +7,7 @@ import Modal from './Modal'
 import { showModal, hideModal, setModalError } from '../redux/modal'
 
 const mapState = state => ({
-  modalsVisibility: omit(state.modal, 'props'),
+  modalVisibility: omit(state.modal, ['props', 'error']),
   modalProps: state.modal.props,
   modalError: state.modal.error,
 })
@@ -30,12 +30,12 @@ const withModal = mapperFn => BaseComponent =>
       modalError,
       isFetching,
       setModalError,
-      modalsVisibility,
+      modalVisibility,
       ...rest
     } = baseProps
     return (
       <React.Fragment>
-        {modalsVisibility[modalKey] && (
+        {modalVisibility[modalKey] && (
           <Modal
             {...modalProps}
             component={Component}

packages/styleguide/src/Wrapper.js

@@ -3,24 +3,20 @@ import React, { Component } from 'react'
 import { reducer } from 'redux-form'
 import { Provider } from 'react-redux'
 import hindawiTheme from 'hindawi-theme'
+import { createLogger } from 'redux-logger'
 import { ThemeProvider } from 'styled-components'
-import { createStore, combineReducers } from 'redux'
+import { client } from 'pubsweet-component-modal'
+import { createStore, combineReducers, applyMiddleware } from 'redux'
 
 import withDragDropContext from './withDragDropContext'
 
-const modalReducer = (
-  state = {
-    error: null,
-    props: {},
-  },
-  action,
-) => state
-
+const logger = createLogger()
 const store = createStore(
   combineReducers({
     form: reducer,
-    modal: modalReducer,
+    modal: client.reducers.modal(),
   }),
+  applyMiddleware(logger),
 )
 
 class Wrapper extends Component {