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