From d070582fbe3c5268b687caf76767134a04901a02 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Wed, 15 Aug 2018 10:18:06 +0300
Subject: [PATCH] feat(styleguide): add dashboard card and other supporting
components
---
.../component-faraday-ui/src/AuthorCard.js | 2 +-
.../component-faraday-ui/src/AuthorTag.js | 30 +++++
.../component-faraday-ui/src/AuthorTag.md | 26 ++++
.../component-faraday-ui/src/AuthorTagList.js | 25 ++++
.../component-faraday-ui/src/AuthorTagList.md | 52 ++++++++
.../component-faraday-ui/src/IconButton.js | 2 -
.../src/ManuscriptCard.js | 112 ++++++++++++++++++
.../src/ManuscriptCard.md | 110 +++++++++++++++++
packages/component-faraday-ui/src/Tag.js | 3 +-
packages/component-faraday-ui/src/Tag.md | 6 +
packages/component-faraday-ui/src/Text.js | 23 +++-
packages/component-faraday-ui/src/Text.md | 6 +
packages/hindawi-theme/src/index.js | 9 +-
13 files changed, 398 insertions(+), 8 deletions(-)
create mode 100644 packages/component-faraday-ui/src/AuthorTag.js
create mode 100644 packages/component-faraday-ui/src/AuthorTag.md
create mode 100644 packages/component-faraday-ui/src/AuthorTagList.js
create mode 100644 packages/component-faraday-ui/src/AuthorTagList.md
create mode 100644 packages/component-faraday-ui/src/ManuscriptCard.js
create mode 100644 packages/component-faraday-ui/src/ManuscriptCard.md
diff --git a/packages/component-faraday-ui/src/AuthorCard.js b/packages/component-faraday-ui/src/AuthorCard.js
index 60d324ef3..1c4307d34 100644
--- a/packages/component-faraday-ui/src/AuthorCard.js
+++ b/packages/component-faraday-ui/src/AuthorCard.js
@@ -133,7 +133,7 @@ const AuthorEdit = ({
const EnhancedAuthorEdit = compose(
reduxForm({
form: 'author-edit',
- onSubmit: values => console.log('on surmit -> ', values),
+ onSubmit: values => {},
}),
)(AuthorEdit)
diff --git a/packages/component-faraday-ui/src/AuthorTag.js b/packages/component-faraday-ui/src/AuthorTag.js
new file mode 100644
index 000000000..ab46aabc5
--- /dev/null
+++ b/packages/component-faraday-ui/src/AuthorTag.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+
+import Tag from './Tag'
+import Text from './Text'
+
+const AuthorTag = ({
+ author: { firstName, lastName, isCorresponding, isSubmitting },
+}) => (
+ <Root>
+ <Text>{`${firstName} ${lastName}`}</Text>
+ {isSubmitting && <Tag>SA</Tag>}
+ {isCorresponding && <Tag>CA</Tag>}
+ </Root>
+)
+
+export default AuthorTag
+
+// #region styles
+const Root = styled.div`
+ align-items: center;
+ display: flex;
+ height: calc(${th('gridUnit')} * 3);
+
+ ${Tag} {
+ margin-left: calc(${th('gridUnit')} / 2);
+ }
+`
+// #endregion
diff --git a/packages/component-faraday-ui/src/AuthorTag.md b/packages/component-faraday-ui/src/AuthorTag.md
new file mode 100644
index 000000000..9e6a5cdad
--- /dev/null
+++ b/packages/component-faraday-ui/src/AuthorTag.md
@@ -0,0 +1,26 @@
+An author tag.
+
+```js
+const authors = [
+ {
+ email: 'john.doe@gmail.com',
+ firstName: 'John',
+ lastName: 'Doe',
+ isSubmitting: true,
+ },
+ {
+ email: 'michael.felps@gmail.com',
+ firstName: 'Michael',
+ lastName: 'Felps',
+ isSubmitting: true,
+ isCorresponding: true,
+ },
+ {
+ email: 'barrack.obama@gmail.com',
+ firstName: 'Barrack',
+ lastName: 'Obama',
+ },
+];
+
+<div style={{display: 'flex'}}>{authors.map(a => <AuthorTag key={a.email} author={a} />)}</div>
+```
diff --git a/packages/component-faraday-ui/src/AuthorTagList.js b/packages/component-faraday-ui/src/AuthorTagList.js
new file mode 100644
index 000000000..4c65fb7cf
--- /dev/null
+++ b/packages/component-faraday-ui/src/AuthorTagList.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+
+import AuthorTag from './AuthorTag'
+
+const AuthorTagList = ({ authors, authorKey = 'email', separator = ',' }) => (
+ <Root>
+ {authors
+ .map(a => <AuthorTag author={a} key={a[authorKey]} />)
+ .reduce((prev, curr) => [prev, separator, <span> </span>, curr])}
+ </Root>
+)
+
+export default AuthorTagList
+
+// #region styles
+const Root = styled.div`
+ align-items: center;
+ display: flex;
+ flex-flow: row wrap;
+
+ font-family: ${th('fontReading')};
+`
+// #endregion
diff --git a/packages/component-faraday-ui/src/AuthorTagList.md b/packages/component-faraday-ui/src/AuthorTagList.md
new file mode 100644
index 000000000..cbd7729f4
--- /dev/null
+++ b/packages/component-faraday-ui/src/AuthorTagList.md
@@ -0,0 +1,52 @@
+A list of author tags. Used on manuscript card and details.
+
+```js
+const authors = [
+ {
+ email: 'john.doe@gmail.com',
+ firstName: 'John',
+ lastName: 'Doe',
+ isSubmitting: true,
+ },
+ {
+ email: 'michael.felps@gmail.com',
+ firstName: 'Michael',
+ lastName: 'Felps',
+ isSubmitting: true,
+ isCorresponding: true,
+ },
+ {
+ email: 'barrack.obama@gmail.com',
+ firstName: 'Barrack',
+ lastName: 'Obama',
+ },
+]
+
+;<AuthorTagList authors={authors} />
+```
+
+Use a different separator and key for mapping the authors.
+
+```js
+const authors = [
+ {
+ email: 'john.doe@gmail.com',
+ firstName: 'John',
+ lastName: 'Doe',
+ isSubmitting: true,
+ },
+ {
+ email: 'michael.felps@gmail.com',
+ firstName: 'Michael',
+ lastName: 'Felps',
+ isSubmitting: true,
+ isCorresponding: true,
+ },
+ {
+ email: 'barrack.obama@gmail.com',
+ firstName: 'Barrack',
+ lastName: 'Obama',
+ },
+];
+<AuthorTagList separator="* * *" authors={authors} authorKey="firstName" />
+```
diff --git a/packages/component-faraday-ui/src/IconButton.js b/packages/component-faraday-ui/src/IconButton.js
index b426dc6ce..03762d2eb 100644
--- a/packages/component-faraday-ui/src/IconButton.js
+++ b/packages/component-faraday-ui/src/IconButton.js
@@ -2,7 +2,6 @@ import React from 'react'
import { has, get } from 'lodash'
import { Icon } from '@pubsweet/ui'
import styled, { css } from 'styled-components'
-import { th } from '@pubsweet/ui-toolkit'
const positionHelper = css`
position: ${props =>
@@ -20,7 +19,6 @@ const IconButton = styled.div`
cursor: pointer;
display: flex;
justify-content: center;
- margin: 0 ${th('gridUnit')};
&:hover {
opacity: 0.7;
}
diff --git a/packages/component-faraday-ui/src/ManuscriptCard.js b/packages/component-faraday-ui/src/ManuscriptCard.js
new file mode 100644
index 000000000..e1c351f4e
--- /dev/null
+++ b/packages/component-faraday-ui/src/ManuscriptCard.js
@@ -0,0 +1,112 @@
+import React from 'react'
+import { H3, H4 } from '@pubsweet/ui'
+import styled from 'styled-components'
+import { th, darken } from '@pubsweet/ui-toolkit'
+
+import Tag from './Tag'
+import Text from './Text'
+import Row from './gridItems/Row'
+import IconButton from './IconButton'
+import AuthorTagList from './AuthorTagList'
+
+const ManuscriptCard = ({
+ fragment: { authors = [], metadata: { title, journal, type } },
+ collection: { visibleStatus = 'Draft', handlingEditor, customId },
+}) => (
+ <Root>
+ <MainContainer>
+ <Row alignItems="center" justify="space-between">
+ <H3>{title}</H3>
+ <Tag status>{visibleStatus}</Tag>
+ </Row>
+ <Row alignItems="center" justify="flex-start">
+ <AuthorTagList authors={authors} />
+ </Row>
+ <Row alignItems="center" justify="flex-start">
+ <Text customId>{`ID ${customId}`}</Text>
+ <Text secondary>Submitted on 03.07.2018</Text>
+ <H4>{type}</H4>
+ <Text secondary>{journal}</Text>
+ </Row>
+ <Row alignItems="center" justify="flex-start">
+ <H4>Handling editor</H4>
+ <Text>{handlingEditor.name}</Text>
+ <H4>Reviewer Reports</H4>
+ <Text>0 invited</Text>
+ </Row>
+ </MainContainer>
+ <SideNavigation>
+ <IconButton icon="chevron-right" iconSize={2} />
+ </SideNavigation>
+ </Root>
+)
+
+export default ManuscriptCard
+
+// #region styles
+const MainContainer = styled.div`
+ justify-content: flex-start;
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ padding: calc(${th('gridUnit')} * 2);
+ padding-bottom: ${th('gridUnit')};
+
+ ${Row} {
+ margin-bottom: ${th('gridUnit')};
+
+ &:nth-child(3) {
+ ${Text} {
+ margin-right: ${th('gridUnit')};
+ }
+
+ ${H4} {
+ margin-right: ${th('gridUnit')};
+ }
+ }
+
+ &:last-child {
+ ${H4} {
+ margin-right: ${th('gridUnit')};
+ }
+
+ ${Text} {
+ margin-right: calc(${th('gridUnit')} * 5);
+ }
+ }
+ }
+`
+
+const SideNavigation = styled.div`
+ align-items: center;
+ background-color: ${th('colorBackgroundHue')};
+ border-top-right-radius: ${th('borderRadius')};
+ border-bottom-right-radius: ${th('borderRadius')};
+ cursor: pointer;
+ display: flex;
+ width: calc(${th('gridUnit')} * 5 / 2);
+
+ &:hover {
+ background-color: ${darken('colorBackgroundHue', 0.05)};
+ }
+`
+
+const Root = styled.div`
+ border-radius: ${th('borderRadius')};
+ box-shadow: ${th('boxShadow')};
+ display: flex;
+
+ &:hover {
+ box-shadow: ${th('dashboardCard.hoverShadow')};
+ }
+
+ ${H3} {
+ margin: 0;
+ margin-bottom: ${th('gridUnit')};
+ }
+
+ ${H4} {
+ margin: 0;
+ }
+`
+// #endregion
diff --git a/packages/component-faraday-ui/src/ManuscriptCard.md b/packages/component-faraday-ui/src/ManuscriptCard.md
new file mode 100644
index 000000000..26c57cd9b
--- /dev/null
+++ b/packages/component-faraday-ui/src/ManuscriptCard.md
@@ -0,0 +1,110 @@
+A manuscript card.
+
+```js
+const authors = [
+ {
+ email: 'john.doe@gmail.com',
+ firstName: 'John',
+ lastName: 'Doe',
+ isSubmitting: true,
+ },
+ {
+ email: 'michael.felps@gmail.com',
+ firstName: 'Michael',
+ lastName: 'Felps',
+ isSubmitting: true,
+ isCorresponding: true,
+ },
+ {
+ email: 'barrack.obama@gmail.com',
+ firstName: 'Barrack',
+ lastName: 'Obama',
+ },
+ {
+ email: 'barrack.obama@gmail1.com',
+ firstName: 'Barrack 1',
+ lastName: 'Obama',
+ },
+ {
+ email: 'barrack.obama@gmail2.com',
+ firstName: 'Barrack 2',
+ lastName: 'Obama',
+ },
+ {
+ email: 'barrack.obama@gmail3.com',
+ firstName: 'Barrack 3',
+ lastName: 'Obama',
+ },
+ {
+ email: 'barrack.obama@gmail4.com',
+ firstName: 'Barrack 4',
+ lastName: 'Obama',
+ },
+ {
+ email: 'barrack.obama@gmail5.com',
+ firstName: 'Barrack 5',
+ lastName: 'Obama',
+ },
+ {
+ email: 'barrack.obama@gmail6.com',
+ firstName: 'Barrack 6',
+ lastName: 'Obama',
+ },
+ {
+ email: 'barrack.obama@gmail7.com',
+ firstName: 'Barrack 7',
+ lastName: 'Obama',
+ },
+ {
+ email: 'barrack.obama@gmail8.com',
+ firstName: 'Barrack 8',
+ lastName: 'Obama',
+ },
+ {
+ email: 'barrack.obama@gmail9.com',
+ firstName: 'Barrack 9',
+ lastName: 'Obama',
+ },
+ {
+ email: 'barrack.obama@gmail10.com',
+ firstName: 'Barrack 10',
+ lastName: 'Obama',
+ },
+ {
+ email: 'barrack.obama@gmail11.com',
+ firstName: 'Barrack 11',
+ lastName: 'Obama',
+ },
+ {
+ email: 'barrack.obama@gmail12.com',
+ firstName: 'Barrack 12',
+ lastName: 'Obama',
+ },
+];
+
+const collection = {
+ customId: '55113358',
+ visibleStatus: 'Pending Approval',
+ handlingEditor: {
+ id: 'he-1',
+ name: 'Handlington Ignashevici'
+ },
+}
+
+const fragment = {
+ authors,
+ created: new Date(),
+ metadata: {
+ journal: 'Awesomeness',
+ title: 'A very ok title with many authors',
+ type: 'Research article',
+ },
+};
+
+
+<ManuscriptCard
+ collection={collection}
+ fragment={fragment}
+ authors={authors}
+ />
+```
\ No newline at end of file
diff --git a/packages/component-faraday-ui/src/Tag.js b/packages/component-faraday-ui/src/Tag.js
index 1c2d90d25..2093a3fc8 100644
--- a/packages/component-faraday-ui/src/Tag.js
+++ b/packages/component-faraday-ui/src/Tag.js
@@ -3,7 +3,8 @@ import { th } from '@pubsweet/ui-toolkit'
// #region styles
export default styled.div`
- background-color: ${th('tag.backgroundColor')};
+ background-color: ${props =>
+ props.status ? th('tag.statusBackgroundColor') : th('tag.backgroundColor')};
border-radius: ${th('borderRadius')};
color: ${th('tag.color')};
font-family: ${th('fontInterface')};
diff --git a/packages/component-faraday-ui/src/Tag.md b/packages/component-faraday-ui/src/Tag.md
index 94185b96c..ae4a171c9 100644
--- a/packages/component-faraday-ui/src/Tag.md
+++ b/packages/component-faraday-ui/src/Tag.md
@@ -9,3 +9,9 @@ An editor in chief.
```js
<Tag>EiC</Tag>
```
+
+A tag used for a manuscript status.
+
+```js
+<Tag status>Pending Approval</Tag>
+```
diff --git a/packages/component-faraday-ui/src/Text.js b/packages/component-faraday-ui/src/Text.js
index 313d90e6b..ef6dc62e4 100644
--- a/packages/component-faraday-ui/src/Text.js
+++ b/packages/component-faraday-ui/src/Text.js
@@ -1,8 +1,27 @@
+import { has } from 'lodash'
import { th } from '@pubsweet/ui-toolkit'
import styled, { css } from 'styled-components'
+const textHelper = props => {
+ if (has(props, 'secondary')) {
+ return css`
+ color: ${th('colorSecondary')};
+ font-family: ${th('fontReading')};
+ `
+ }
+ if (has(props, 'customId')) {
+ return css`
+ color: ${th('colorPrimary')};
+ font-family: ${th('fontInterface')};
+ `
+ }
+ return css`
+ color: ${th('colorText')};
+ font-family: ${th('fontReading')};
+ `
+}
+
const fontSize = css`
- color: ${props => (props.secondary ? th('colorSecondary') : th('colorText'))};
font-size: ${props =>
props.small ? th('fontSizeBaseSmall') : th('fontSizeBase')};
line-height: ${props =>
@@ -10,8 +29,8 @@ const fontSize = css`
`
const Text = styled.span`
- font-family: ${th('fontReading')};
${fontSize};
+ ${textHelper};
`
export default Text
diff --git a/packages/component-faraday-ui/src/Text.md b/packages/component-faraday-ui/src/Text.md
index 5290ec35f..d309e3b36 100644
--- a/packages/component-faraday-ui/src/Text.md
+++ b/packages/component-faraday-ui/src/Text.md
@@ -10,6 +10,12 @@ A secondary text. (Body 2)
<Text secondary>my boy is amazing</Text>
```
+A text used for manuscript custom IDs.
+
+```js
+<Text customId>ID 444222</Text>
+```
+
A small text.
```js
diff --git a/packages/hindawi-theme/src/index.js b/packages/hindawi-theme/src/index.js
index e61163e1d..e3e98ed82 100644
--- a/packages/hindawi-theme/src/index.js
+++ b/packages/hindawi-theme/src/index.js
@@ -85,9 +85,14 @@ const hindawiTheme = {
tag: {
color: '#ffffff',
- backgroundColor: '#586971',
fontSize: '12px',
fontWeight: 'bold',
+ backgroundColor: '#586971',
+ statusBackgroundColor: '#dbafc1',
+ },
+
+ dashboardCard: {
+ hoverShadow: '0 1px 2px 1px #939393',
},
/* Text variables */
@@ -128,7 +133,7 @@ const hindawiTheme = {
borderStyle: 'solid',
/* Shadow (for tooltip) */
- boxShadow: '0 2px 4px 0 rgba(51, 51, 51, 0.3)',
+ boxShadow: '0 1px 2px 1px #dbdbdb',
/* Transition */
transitionDuration: '0.2s', // TODO -- julien: not 0.05s
--
GitLab