diff --git a/packages/component-faraday-ui/src/Text.js b/packages/component-faraday-ui/src/Text.js
index efd11e43e4a1ce4d407ad3c47622fde75d59a2c5..a6a03710767096dd8d5d2b052eae7d1a04870a3c 100644
--- a/packages/component-faraday-ui/src/Text.js
+++ b/packages/component-faraday-ui/src/Text.js
@@ -1,3 +1,4 @@
+import React from 'react'
import { has, get } from 'lodash'
import { th } from '@pubsweet/ui-toolkit'
import styled, { css } from 'styled-components'
@@ -50,14 +51,38 @@ const fontSize = css`
props.small ? th('lineHeightBaseSmall') : th('lineHeightBase')};
`
-/** @component */
-export default styled.span`
+const StyledText = styled.span`
align-items: center;
display: ${props => get(props, 'display', 'inline-block')};
- font-style: ${props => props.fontStyle || 'normal'};
- text-align: ${props => props.align || 'start'};
+ font-style: ${props => get(props, 'fontStyle', 'normal')};
+ text-align: ${props => get(props, 'align', 'start')};
+
${fontSize};
${textHelper};
${marginHelper};
${paddingHelper};
`
+
+const Bullet = styled.span`
+ color: ${th('colorWarning')};
+ font-size: ${th('fontSizeHeading2')};
+ line-height: 0;
+ margin-right: ${th('gridUnit')};
+ padding-top: ${th('gridUnit')};
+ vertical-align: middle;
+`
+
+const Root = styled.div`
+ align-items: flex-start;
+ display: flex;
+`
+
+export default ({ bullet, children, ...rest }) =>
+ bullet ? (
+ <Root>
+ <Bullet>{'\u2022'}</Bullet>
+ <StyledText {...rest}>{children}</StyledText>
+ </Root>
+ ) : (
+ <StyledText {...rest}>{children}</StyledText>
+ )
diff --git a/packages/component-faraday-ui/src/Text.md b/packages/component-faraday-ui/src/Text.md
index d309e3b3675069839c361408d7cac655eab47d74..a99cff36c791742b9c407ace98d9b794b34edf6c 100644
--- a/packages/component-faraday-ui/src/Text.md
+++ b/packages/component-faraday-ui/src/Text.md
@@ -4,6 +4,15 @@ A piece of text. (Body 1)
<Text>my boy is amazing</Text>
```
+A piece of text with a bullet.
+
+```js
+<Text bullet>
+ I am like a list item{' '}
+ <ActionLink to="https://www.google.com">google</ActionLink>
+</Text>
+```
+
A secondary text. (Body 2)
```js
@@ -25,5 +34,13 @@ A small text.
A small secondary text.
```js
-<Text small secondary>my boy is amazing</Text>
+<Text small secondary>
+ my boy is amazing
+</Text>
+```
+
+Text used as a label line.
+
+```js
+<Text labelLine>SUPPLEMENTARY FILES</Text>
```
diff --git a/packages/component-faraday-ui/src/contextualBoxes/AssignHE.js b/packages/component-faraday-ui/src/contextualBoxes/AssignHE.js
new file mode 100644
index 0000000000000000000000000000000000000000..c6a288adb7ba74fb10353db4fcb466c013cef986
--- /dev/null
+++ b/packages/component-faraday-ui/src/contextualBoxes/AssignHE.js
@@ -0,0 +1,127 @@
+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
diff --git a/packages/component-faraday-ui/src/contextualBoxes/AssignHE.md b/packages/component-faraday-ui/src/contextualBoxes/AssignHE.md
new file mode 100644
index 0000000000000000000000000000000000000000..afb5179bdb3cc399ebf0e287c177d7a8ed4fc620
--- /dev/null
+++ b/packages/component-faraday-ui/src/contextualBoxes/AssignHE.md
@@ -0,0 +1,16 @@
+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>
+```
diff --git a/packages/component-faraday-ui/src/contextualBoxes/index.js b/packages/component-faraday-ui/src/contextualBoxes/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..671406c817a82b42d530a58972edea909458800f
--- /dev/null
+++ b/packages/component-faraday-ui/src/contextualBoxes/index.js
@@ -0,0 +1 @@
+export { default as AssignHE } from './AssignHE'
diff --git a/packages/component-faraday-ui/src/gridItems/Row.js b/packages/component-faraday-ui/src/gridItems/Row.js
index bfcb56cda9351cef32fd77a5ea0cbe1f9d398b93..abbbfba5c4ef473e3bea17562faa3d12def03c38 100644
--- a/packages/component-faraday-ui/src/gridItems/Row.js
+++ b/packages/component-faraday-ui/src/gridItems/Row.js
@@ -1,7 +1,7 @@
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};
`
diff --git a/packages/component-faraday-ui/src/modals/MultiAction.js b/packages/component-faraday-ui/src/modals/MultiAction.js
index 8438d5a1a57b24d81cfdbdc553eaff4d2c43b63d..46df86453f8b2b8c006544afa71d313f82a2bfe8 100644
--- a/packages/component-faraday-ui/src/modals/MultiAction.js
+++ b/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
diff --git a/packages/component-faraday-ui/src/modals/OpenModal.js b/packages/component-faraday-ui/src/modals/OpenModal.js
index dbe53b0eee4bdd030ed01547775381bd35e6ca51..2c4161fb3065bafa27cdec01d4ddc4a55b4f79b6 100644
--- a/packages/component-faraday-ui/src/modals/OpenModal.js
+++ b/packages/component-faraday-ui/src/modals/OpenModal.js
@@ -1,43 +1,24 @@
-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),
})
},
}),
diff --git a/packages/component-faraday-ui/src/modals/OpenModal.md b/packages/component-faraday-ui/src/modals/OpenModal.md
index e74bf89557588e289248f13a51bdb1457378bd97..617fcdf2544de263f0b7c2bfd0931b089b455f5b 100644
--- a/packages/component-faraday-ui/src/modals/OpenModal.md
+++ b/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>
```
diff --git a/packages/component-faraday-ui/src/modals/SingleActionModal.js b/packages/component-faraday-ui/src/modals/SingleActionModal.js
index 6e32efa32153c2f4cdf71b9a61f9f92d0d41e1a0..49a9ec10906007ff593dcb0b087be7016f76b89d 100644
--- a/packages/component-faraday-ui/src/modals/SingleActionModal.js
+++ b/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;
diff --git a/packages/component-faraday-ui/src/styledHelpers.js b/packages/component-faraday-ui/src/styledHelpers.js
index 5d1f75bbc7e4eb67862b365eb8a3d291713f4315..71d08c16dde4442e6022d44a41990cc45d6a8782 100644
--- a/packages/component-faraday-ui/src/styledHelpers.js
+++ b/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;
+ `
diff --git a/packages/component-wizard/src/components/StepOne.js b/packages/component-wizard/src/components/StepOne.js
index dccbbe93d33967933e138706017a2e14556e092b..a251ed95af09f883b2f2101e47d524d9b3f431be 100644
--- a/packages/component-wizard/src/components/StepOne.js
+++ b/packages/component-wizard/src/components/StepOne.js
@@ -14,7 +14,7 @@ const StepOne = () => (
</Text>
</Row>
<Row alignItems="center" justify="flex-start" mb={1}>
- <Text>
+ <Text bullet>
I am aware that accepted manuscripts are subject to an
<ActionLink pl={1 / 2} pr={1 / 2} to="https://www.hindawi.com/apc/">
Article Processing Charge of $1,250.
@@ -22,30 +22,30 @@ const StepOne = () => (
</Text>
</Row>
<Row alignItems="center" justify="flex-start" mb={1}>
- <Text>
+ <Text bullet>
All co-authors have read and agreed on the current version of this
manuscript.
</Text>
</Row>
<Row alignItems="center" justify="flex-start" mb={1}>
- <Text>
+ <Text bullet>
I have the email addresses of all co-authors of the manuscript.
</Text>
</Row>
<Row alignItems="center" justify="flex-start" mb={1}>
- <Text>
+ <Text bullet>
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 alignItems="center" justify="flex-start" mb={1}>
- <Text>
+ <Text bullet>
I have all additional electronic files of supplementary materials (e.g.
Datasets, images, audio, video) ready.
</Text>
</Row>
<Row alignItems="center" justify="flex-start" mb={1}>
- <Text>
+ <Text bullet>
I am aware that an
<ActionLink pl={1 / 2} pr={1 / 2} to="https://orcid.org/">
ORCID
@@ -56,7 +56,7 @@ const StepOne = () => (
</Text>
</Row>
<Row alignItems="center" justify="flex-start" mb={1}>
- <Text>
+ <Text bullet>
I am aware that an
<ActionLink pl={1 / 2} pr={1 / 2} to="https://www.hindawi.com/members/">
institutional membership
diff --git a/packages/styleguide/styleguide.config.js b/packages/styleguide/styleguide.config.js
index 859cc8debcf6bf80d6ba3f96ab1f523c633d4452..7c48e7d9adad544331b6ca1cc101fed64e1aea62 100644
--- a/packages/styleguide/styleguide.config.js
+++ b/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,