feat(text): add bullet prop

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

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

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

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