feat(assign-he): create assign he contextual box content

packages/component-faraday-ui/src/contextualBoxes/AssignHE.js

+import React from 'react'
+import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+import { Button, TextField } from '@pubsweet/ui'
+import { compose, withProps, withHandlers, withStateHandlers } from 'recompose'
+
+import {
+  Row,
+  Item,
+  Text,
+  Label,
+  OpenModal,
+  IconButton,
+  paddingHelper,
+} from '../'
+
+const AssignHE = ({
+  clearSearch,
+  searchValue,
+  changeSearch,
+  handlingEditors,
+  inviteHandlingEditor,
+}) => (
+  <Root pb={2}>
+    <TextContainer>
+      <TextField onChange={changeSearch} value={searchValue} />
+      <IconButton
+        icon="x-circle"
+        iconSize={2}
+        onClick={clearSearch}
+        right={8}
+        top={12}
+      />
+    </TextContainer>
+    <Row alignItems="center" height={4} pl={1}>
+      <Item flex={1}>
+        <Label>Name</Label>
+      </Item>
+      <Item flex={2}>
+        <Label>Email</Label>
+      </Item>
+      <Item flex={1} />
+    </Row>
+    {handlingEditors.map((he, index) => (
+      <CustomRow
+        alignItems="center"
+        height={4}
+        isFirst={index === 0}
+        key={he.id}
+        pl={1}
+      >
+        <Item flex={1}>
+          <Text secondary>{he.name}</Text>
+        </Item>
+        <Item flex={2}>
+          <Text secondary>{he.email}</Text>
+        </Item>
+        <Item flex={1}>
+          <OpenModal
+            onConfirm={inviteHandlingEditor(he)}
+            title="Are you sure you want to invite this HE?"
+          >
+            {showModal => (
+              <CustomButton onClick={showModal} size="small">
+                INVITE
+              </CustomButton>
+            )}
+          </OpenModal>
+        </Item>
+      </CustomRow>
+    ))}
+  </Root>
+)
+
+export default compose(
+  withStateHandlers(
+    { searchValue: '' },
+    {
+      changeSearch: ({ searchValue }) => e => ({
+        searchValue: e.target.value.toLowerCase(),
+      }),
+      clearSearch: () => () => ({
+        searchValue: '',
+      }),
+    },
+  ),
+  withProps(({ searchValue, handlingEditors = [] }) => ({
+    handlingEditors: handlingEditors.filter(he =>
+      he.name.toLowerCase().startsWith(searchValue),
+    ),
+  })),
+  withHandlers({
+    inviteHandlingEditor: ({ inviteHandlingEditor }) => he => () => {
+      inviteHandlingEditor(he)
+    },
+  }),
+)(AssignHE)
+
+// #region styles
+const Root = styled.div`
+  background-color: ${th('colorBackgroundHue2')};
+
+  ${paddingHelper};
+`
+
+const TextContainer = styled.div`
+  padding: ${th('gridUnit')};
+  position: relative;
+  width: calc(${th('gridUnit')} * 40);
+`
+
+const CustomButton = styled(Button)`
+  opacity: 0;
+`
+
+const CustomRow = styled(Row)`
+  border-top: ${props => props.isFirst && '1px solid #e7e7e7'};
+  border-bottom: 1px solid #e7e7e7;
+  &:hover {
+    background-color: #eee;
+
+    ${CustomButton} {
+      opacity: 1;
+    }
+  }
+`
+// #endregion

packages/component-faraday-ui/src/contextualBoxes/AssignHE.md

+Assign Handling Editor contextual box.
+
+```js
+const handlingEditors = [
+  { id: '1', name: 'Handling Edi', email: 'handling@edi.com' },
+  { id: '2', name: 'Aurel Vlaicu', email: 'aurel@vlaicu.com' },
+  { id: '3', name: 'Gheorghe Hagi', email: 'gica@hagi.com' },
+];
+
+<ContextualBox label="Assign Handling Editor">
+  <AssignHE
+    handlingEditors={handlingEditors}
+    inviteHandlingEditor={he => console.log('inviting: ', he)}
+  />
+</ContextualBox>
+```

packages/component-faraday-ui/src/contextualBoxes/index.js

+export { default as AssignHE } from './AssignHE'

packages/component-faraday-ui/src/gridItems/Row.js

 import { get } from 'lodash'
 import styled from 'styled-components'
 
-import { marginHelper, paddingHelper } from '../styledHelpers'
+import { heightHelper, marginHelper, paddingHelper } from '../styledHelpers'
 
 /** @component */
 export default styled.div.attrs({
@@ -12,9 +12,11 @@ export default styled.div.attrs({
   display: flex;
   flex-direction: row;
   justify-content: ${({ justify }) => justify || 'space-evenly'};
+  height: ${props => get(props, 'height', 'auto')};
 
   width: 100%;
 
+  ${heightHelper};
   ${marginHelper};
   ${paddingHelper};
 `

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

@@ -40,12 +40,17 @@ const MultiAction = ({
 
 export default compose(
   withHandlers({
+    onConfirm: ({ onConfirm, hideModal }) => () => {
+      if (onConfirm && typeof onConfirm === 'function') {
+        onConfirm()
+      }
+      hideModal()
+    },
     onClose: ({ onCancel, hideModal }) => () => {
       if (onCancel && typeof onCancel === 'function') {
         onCancel()
-      } else {
-        hideModal()
       }
+      hideModal()
     },
     renderContent: ({ content }) => () => {
       if (!content) return null

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

-import { get } from 'lodash'
 import { compose, withHandlers } from 'recompose'
 import { withModal } from 'pubsweet-component-modal/src/components'
 
-import { MultiAction } from './'
+import { MultiAction, SingleActionModal } from './'
 
 const OpenModal = ({ showModal, children }) => children(showModal)
 
 export default compose(
-  withModal(() => ({
-    modalComponent: MultiAction,
+  withModal(({ single }) => ({
+    modalComponent: single ? SingleActionModal : MultiAction,
   })),
-  withHandlers({
-    handleError: () => (fn, err) => e => {
-      if (e.error) {
-        fn(get(e, 'error.message', 'Oops! Something went wrong!'))
-      }
-      if (err) {
-        fn(get(JSON.parse(e.response), 'error', 'Oops! Something went wrong!'))
-      }
-    },
-  }),
   withHandlers({
     showModal: ({
-      showModal,
-      hideModal,
-      handleError,
-      setModalError,
-      confirmAction,
+      onConfirm = () => {},
+      onCancel = () => {},
       ...rest
-    }) => e => {
-      e.stopPropagation()
-      showModal({
-        onConfirm: () => {
-          confirmAction().then(
-            handleError(setModalError),
-            handleError(setModalError, true),
-          )
-        },
+    }) => () => {
+      rest.showModal({
         ...rest,
+        onConfirm: () => onConfirm(rest),
+        onCancel: () => onCancel(rest),
       })
     },
   }),

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

@@ -2,7 +2,8 @@ Open a confirmation modal by clicking on an element
 
 ```js
 <OpenModal
-  confirmAction={() => alert('Confirm')}
+  onConfirm={props => console.log('confirm', props)}
+  onCancel={props => console.log('cancel', props)}
   title="Are you sure?"
   confirmText="Delete"
   modalKey="123"
@@ -21,14 +22,31 @@ Pass a custon component as the modal content.
 const Custom = () => <div>inside the modal</div>;
 
 <OpenModal
-  confirmAction={() => alert('Confirm')}
+  onConfirm={props => console.log('confirm', props)}
+  onCancel={props => console.log('cancel', props)}
   title="Are you sure?"
   confirmText="Delete"
   content={Custom}
   modalKey="123"
+>
+  {showModal => <Tag onClick={showModal}>CUSTOM</Tag>}
+</OpenModal>
+```
+
+Open a single action modal.
+
+```js
+<OpenModal
+  onConfirm={console.log}
+  title="Are you sure?"
+  confirmText="I am pretty sure"
+  modalKey="1234"
+  single
 >
   {showModal => (
-    <Tag onClick={showModal}>CUSTOM</Tag>
+    <ActionLink icon="eye" onClick={showModal}>
+      See the truth
+    </ActionLink>
   )}
 </OpenModal>
 ```

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

@@ -29,7 +29,11 @@ const SingleActionModal = ({
 
 export default compose(
   withHandlers({
-    onClick: ({ onCancel, onConfirm }) => onCancel || onConfirm,
+    onClick: ({ onCancel, onConfirm, hideModal }) => {
+      typeof onCancel === 'function' && onCancel()
+      typeof onConfirm === 'function' && onConfirm()
+      hideModal()
+    },
   }),
   setDisplayName('SingleActionModal'),
 )(SingleActionModal)
@@ -39,6 +43,7 @@ const Root = styled.div`
   align-items: center;
   border: ${th('borderWidth')} ${th('borderStyle')} transparent;
   border-radius: ${th('borderRadius')};
+  background: ${th('colorBackground')};
   box-shadow: ${th('boxShadow')};
   display: flex;
   flex-direction: column;

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

@@ -86,3 +86,12 @@ export const radiusHelpers = props => {
     ${borderBottom};
   `
 }
+
+export const heightHelper = props =>
+  has(props, 'height')
+    ? css`
+        height: calc(${th('gridUnit')} * ${get(props, 'height', 2)});
+      `
+    : css`
+        height: auto;
+      `

packages/styleguide/styleguide.config.js

@@ -13,14 +13,19 @@ module.exports = {
       components: ['../component-faraday-ui/src/modals/[A-Z]*.js'],
     },
     {
-      name: 'Grid Items',
+      name: 'Manuscript Details',
       sectionDepth: 1,
-      components: ['../component-faraday-ui/src/gridItems/[A-Z]*.js'],
+      components: ['../component-faraday-ui/src/manuscriptDetails/[A-Z]*.js'],
     },
     {
-      name: 'Manuscript Details',
+      name: 'Contextual Boxes',
       sectionDepth: 1,
-      components: ['../component-faraday-ui/src/manuscriptDetails/[A-Z]*.js'],
+      components: ['../component-faraday-ui/src/contextualBoxes/[A-Z]*.js'],
+    },
+    {
+      name: 'Grid Items',
+      sectionDepth: 1,
+      components: ['../component-faraday-ui/src/gridItems/[A-Z]*.js'],
     },
   ],
   skipComponentsWithoutExample: true,