feat(styleguide): add row and item helper elements, add person info component

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

@@ -21,5 +21,9 @@ const Required = styled.span`
 const Root = styled.div`
   align-items: center;
   display: flex;
+
+  ${H4} {
+    margin: 0;
+  }
 `
 // #endregion

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

 import React from 'react'
-import styled from 'styled-components'
-import { th } from '@pubsweet/ui-toolkit'
-import { Box } from 'grid-styled'
+import PropTypes from 'prop-types'
 
 import Text from './Text'
 import Label from './Label'
+import Row from './gridItems/Row'
+import Item from './gridItems/Item'
 
-const PersonInfo = () => (
-  <Box>
-    <Label>Email</Label>
-    <Text>alexandru.munt@gmail.com</Text>
-  </Box>
+const defaultPerson = {
+  email: '',
+  firstName: '',
+  lastName: '',
+  affiliation: '',
+}
+
+const PersonInfo = ({
+  person: { email, firstName, lastName, affiliation } = defaultPerson,
+}) => (
+  <Row>
+    <Item vertical withRightMargin>
+      <Label>Email</Label>
+      <Text>{email}</Text>
+    </Item>
+    <Item vertical withRightMargin>
+      <Label>First name</Label>
+      <Text>{firstName}</Text>
+    </Item>
+    <Item vertical withRightMargin>
+      <Label>Last name</Label>
+      <Text>{lastName}</Text>
+    </Item>
+    <Item vertical>
+      <Label>Affiliation</Label>
+      <Text>{affiliation}</Text>
+    </Item>
+  </Row>
 )
 
+PersonInfo.proTypes = {
+  person: PropTypes.shape({
+    email: PropTypes.string,
+    firstName: PropTypes.string,
+    lastName: PropTypes.string,
+    affiliation: PropTypes.string,
+  }),
+}
+
 export default PersonInfo
 
 // #region styles

packages/component-faraday-ui/src/PersonInfo.md

 Details of a person.
 
 ```js
-<PersonInfo />
+const anAuthor = {
+  email: 'author.manuscriptovici@gmail.com',
+  firstName: 'Author',
+  lastName: 'Manuscriptovici',
+  affiliation: 'PSD',
+};
+<PersonInfo person={anAuthor} />
 ```

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

 import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
 
-export default styled.div`
-  background-color: red;
+export default styled.div.attrs({
+  'data-test-id': props => props['data-test-id'] || 'item',
+})`
+  display: flex;
+  flex: ${({ flex }) => flex || 1};
+  flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
+  justify-content: ${({ centered }) => (centered ? 'center' : 'initial')};
+  margin-right: ${({ withRightMargin }) =>
+    withRightMargin ? th('gridUnit') : 0};
 `

packages/component-faraday-ui/src/gridItems/Item.md

-An item.
+An item. By default the content is displayed in a row.
 
 ```js
-<Item>wai nebun</Item>
+<Item>
+  <span>I am on the left side</span>
+  <span>I am on the right side</span>
+</Item>
+```
+
+Displayed in a column.
+
+```js
+<Item vertical>
+  <span>I am on top</span>
+  <span>I am at the bottom</span>
+</Item>
 ```

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

+import { get } from 'lodash'
+import styled, { css } from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+
+export default styled.div.attrs({
+  'data-test-id': props => props['data-test-id'] || 'row',
+})`
+  align-items: ${props => get(props, 'alignItems', 'flex-start')};
+  display: flex;
+  flex-direction: row;
+  justify-content: ${({ justify }) => justify || 'space-evenly'};
+  margin: ${({ noMargin }) =>
+    noMargin ? 0 : css`calc(${th('subGridUnit')} * 2) 0`};
+  width: 100%;
+`

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

+A row of items.
+
+```js
+<Row>
+ <Item>Item 1</Item>
+ <Item>Item 2</Item>
+ <div>Item 3</div>
+</Row>
+```
\ No newline at end of file