From f203e704afb43f1a7078b942b2df5a1e6a514e9b Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Tue, 14 Aug 2018 11:06:56 +0300
Subject: [PATCH] feat(styleguide): add row and item helper elements, add
person info component
---
packages/component-faraday-ui/src/Label.js | 4 ++
.../component-faraday-ui/src/PersonInfo.js | 48 +++++++++++++++----
.../component-faraday-ui/src/PersonInfo.md | 8 +++-
.../src/gridItems/Item.js | 12 ++++-
.../src/gridItems/Item.md | 16 ++++++-
.../component-faraday-ui/src/gridItems/Row.js | 15 ++++++
.../component-faraday-ui/src/gridItems/Row.md | 9 ++++
7 files changed, 99 insertions(+), 13 deletions(-)
create mode 100644 packages/component-faraday-ui/src/gridItems/Row.js
create mode 100644 packages/component-faraday-ui/src/gridItems/Row.md
diff --git a/packages/component-faraday-ui/src/Label.js b/packages/component-faraday-ui/src/Label.js
index ad71e206b..7b7a63c2b 100644
--- a/packages/component-faraday-ui/src/Label.js
+++ b/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
diff --git a/packages/component-faraday-ui/src/PersonInfo.js b/packages/component-faraday-ui/src/PersonInfo.js
index 5b1585c20..c3fb7835d 100644
--- a/packages/component-faraday-ui/src/PersonInfo.js
+++ b/packages/component-faraday-ui/src/PersonInfo.js
@@ -1,18 +1,50 @@
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
diff --git a/packages/component-faraday-ui/src/PersonInfo.md b/packages/component-faraday-ui/src/PersonInfo.md
index 891b4445a..acc1a2c4b 100644
--- a/packages/component-faraday-ui/src/PersonInfo.md
+++ b/packages/component-faraday-ui/src/PersonInfo.md
@@ -1,5 +1,11 @@
Details of a person.
```js
-<PersonInfo />
+const anAuthor = {
+ email: 'author.manuscriptovici@gmail.com',
+ firstName: 'Author',
+ lastName: 'Manuscriptovici',
+ affiliation: 'PSD',
+};
+<PersonInfo person={anAuthor} />
```
diff --git a/packages/component-faraday-ui/src/gridItems/Item.js b/packages/component-faraday-ui/src/gridItems/Item.js
index 6c3e74574..e978c8c14 100644
--- a/packages/component-faraday-ui/src/gridItems/Item.js
+++ b/packages/component-faraday-ui/src/gridItems/Item.js
@@ -1,5 +1,13 @@
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};
`
diff --git a/packages/component-faraday-ui/src/gridItems/Item.md b/packages/component-faraday-ui/src/gridItems/Item.md
index bc3a2f4c6..f6f91b4d3 100644
--- a/packages/component-faraday-ui/src/gridItems/Item.md
+++ b/packages/component-faraday-ui/src/gridItems/Item.md
@@ -1,5 +1,17 @@
-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>
```
diff --git a/packages/component-faraday-ui/src/gridItems/Row.js b/packages/component-faraday-ui/src/gridItems/Row.js
new file mode 100644
index 000000000..3df71dbf7
--- /dev/null
+++ b/packages/component-faraday-ui/src/gridItems/Row.js
@@ -0,0 +1,15 @@
+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%;
+`
diff --git a/packages/component-faraday-ui/src/gridItems/Row.md b/packages/component-faraday-ui/src/gridItems/Row.md
new file mode 100644
index 000000000..77bcd1717
--- /dev/null
+++ b/packages/component-faraday-ui/src/gridItems/Row.md
@@ -0,0 +1,9 @@
+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
--
GitLab