From 35a24e000c3f05f7824016f48b5778d922a74ac8 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Fri, 17 Aug 2018 12:06:51 +0300
Subject: [PATCH] feat(visual): add actionLinks to wizard step one
---
.../component-faraday-ui/src/ActionLink.js | 13 ++++++--
packages/component-faraday-ui/src/Text.js | 1 +
packages/component-faraday-ui/src/index.js | 2 ++
.../src/components/StepOne.js | 30 ++++++++++++-------
.../src/components/StepTwo.js | 3 ++
5 files changed, 36 insertions(+), 13 deletions(-)
diff --git a/packages/component-faraday-ui/src/ActionLink.js b/packages/component-faraday-ui/src/ActionLink.js
index ef0f8fb1a..2a42c9c6c 100644
--- a/packages/component-faraday-ui/src/ActionLink.js
+++ b/packages/component-faraday-ui/src/ActionLink.js
@@ -3,6 +3,8 @@ import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { Action, Icon } from '@pubsweet/ui'
+import { paddingHelper } from './styledHelpers'
+
const ActionLink = ({
to,
icon,
@@ -10,8 +12,9 @@ const ActionLink = ({
children,
iconSize = 2,
iconPosition = 'left',
+ ...rest
}) => (
- <Root>
+ <Root {...rest} to={to}>
{icon &&
iconPosition === 'left' && (
<Icon secondary={to} size={iconSize} warning={!to}>
@@ -40,7 +43,7 @@ export default ActionLink
const ExternalLink = styled.a`
color: ${th('colorSecondary')};
font-family: ${th('fontReading')};
- text-decoration: none;
+ text-decoration: underline;
&:hover {
color: ${th('colorSecondary')};
@@ -51,6 +54,10 @@ const ExternalLink = styled.a`
const Root = styled.div`
align-items: center;
- display: flex;
+ display: ${props => (props.to ? 'inline-flex' : 'flex')};
+ ${paddingHelper};
+
+ height: max-content;
+ width: max-content;
`
// #endregion
diff --git a/packages/component-faraday-ui/src/Text.js b/packages/component-faraday-ui/src/Text.js
index 590a35c06..a20e14240 100644
--- a/packages/component-faraday-ui/src/Text.js
+++ b/packages/component-faraday-ui/src/Text.js
@@ -37,6 +37,7 @@ const fontSize = css`
`
export default styled.span`
+ display: inline-block;
text-align: ${props => props.align || 'start'};
${fontSize};
${textHelper};
diff --git a/packages/component-faraday-ui/src/index.js b/packages/component-faraday-ui/src/index.js
index 638da0a07..e8d7558d1 100644
--- a/packages/component-faraday-ui/src/index.js
+++ b/packages/component-faraday-ui/src/index.js
@@ -1,3 +1,4 @@
+export { default as ActionLink } from './ActionLink'
export { default as AppBar } from './AppBar'
export { default as AppBarMenu } from './AppBarMenu'
export { default as AuthorCard } from './AuthorCard'
@@ -5,6 +6,7 @@ export { default as AuthorTag } from './AuthorTag'
export { default as AuthorTagList } from './AuthorTagList'
export { default as AutosaveIndicator } from './AutosaveIndicator'
export { default as ContextualBox } from './ContextualBox'
+export { default as DragHandle } from './DragHandle'
export { default as File } from './File'
export { default as IconButton } from './IconButton'
export { default as Label } from './Label'
diff --git a/packages/component-wizard/src/components/StepOne.js b/packages/component-wizard/src/components/StepOne.js
index df7d40655..b6cc33b1c 100644
--- a/packages/component-wizard/src/components/StepOne.js
+++ b/packages/component-wizard/src/components/StepOne.js
@@ -1,8 +1,8 @@
import React, { Fragment } from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
-import { Row, Text } from 'pubsweet-component-faraday-ui'
-import { Checkbox, ValidatedField, H2, Action } from '@pubsweet/ui'
+import { Checkbox, ValidatedField, H2 } from '@pubsweet/ui'
+import { ActionLink, Text, Row } from 'pubsweet-component-faraday-ui'
const StepOne = () => (
<Fragment>
@@ -15,8 +15,10 @@ const StepOne = () => (
</Row>
<Row justify="flex-start" mb={1}>
<Text>
- I am aware that accepted manuscripts are subject to an{' '}
- <Action>Article Processing Charge of $1,250.</Action>
+ 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.
+ </ActionLink>
</Text>
</Row>
<Row justify="flex-start" mb={1}>
@@ -44,16 +46,24 @@ const StepOne = () => (
</Row>
<Row justify="flex-start" mb={1}>
<Text>
- I am aware that an <Action>ORCID</Action> is required for the
- corresponding author before the article can be published (if accepted).
- The ORCID should be added via your user account.
+ I am aware that an
+ <ActionLink pl={1 / 2} pr={1 / 2} to="https://orcid.org/">
+ ORCID
+ </ActionLink>
+ is required for the corresponding author before the article can be
+ published (if accepted). The ORCID should be added via your user
+ account.
</Text>
</Row>
<Row justify="flex-start" mb={1}>
<Text>
- I am aware that an <Action>institutional membership</Action> is required
- for the corresponding author before the article can be published (if
- accepted). The ORCID should be added via your user account.
+ I am aware that an
+ <ActionLink pl={1 / 2} pr={1 / 2} to="https://www.hindawi.com/members/">
+ institutional membership
+ </ActionLink>
+ is required for the corresponding author before the article can be
+ published (if accepted). The ORCID should be added via your user
+ account.
</Text>
</Row>
<Row justify="center" mb={6} mt={1}>
diff --git a/packages/component-wizard/src/components/StepTwo.js b/packages/component-wizard/src/components/StepTwo.js
index ef42d0432..f0cdacf13 100644
--- a/packages/component-wizard/src/components/StepTwo.js
+++ b/packages/component-wizard/src/components/StepTwo.js
@@ -36,6 +36,7 @@ const StepTwo = ({
authors
</Text>
</Row>
+
<Row mb={1}>
<Item data-test="submission-title" flex={3} vertical withRightMargin>
<Label required>MANUSCRIPT TITLE</Label>
@@ -54,6 +55,7 @@ const StepTwo = ({
/>
</Item>
</Row>
+
<Row mb={1}>
<Item data-test="submission-abstract" vertical>
<Label required>ABSTRACT</Label>
@@ -64,6 +66,7 @@ const StepTwo = ({
/>
</Item>
</Row>
+
<Row mb={1}>
<Item vertical>
<Label justify="space-between" required>
--
GitLab