feat(PublonsTable):front-end

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

+import React from 'react'
+import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+import { DateParser, Button } from '@pubsweet/ui'
+import { get, isEqual, orderBy } from 'lodash'
+import { compose, shouldUpdate, withHandlers, withProps } from 'recompose'
+
+import { Label, PersonInvitation, Text } from '../'
+
+const PublonsTable = ({
+  reviewers,
+  onInviteReviewer,
+  renderAcceptedLabel,
+  onResendReviewerInvite,
+  onRevokeReviewerInvite,
+}) =>
+  reviewers.length > 0 && (
+    <Table>
+      <thead>
+        <tr>
+          <th>
+            <Label>Full Name</Label>
+          </th>
+          <th>
+            <Label>Affiliation</Label>
+          </th>
+          <th>
+            <Label>No. of Reviews</Label>
+          </th>
+          <th>&nbsp;</th>
+        </tr>
+      </thead>
+      <tbody>
+        {reviewers.map(reviewer => (
+          <TableRow key={reviewer.id}>
+            <td>
+              <Text>{`${get(reviewer, 'publishingName', '')}`}</Text>
+            </td>
+            <td>
+              <Text>{`${get(reviewer, 'recentOrganizations.name', '')}`}</Text>
+            </td>
+            <td>{`${get(reviewer, 'numVerifiedReviews', '')}`}</td>
+            <HiddenCell>
+              <Button secondary size="small" onClick={onInviteReviewer}>
+                SEND
+              </Button>
+            </HiddenCell>
+          </TableRow>
+        ))}
+      </tbody>
+    </Table>
+  )
+
+export default withHandlers({
+  onInviteReviewer: props => reviewer => {
+    console.log(reviewer)
+  },
+})(PublonsTable)
+
+// #region styles
+const Table = styled.table`
+  border-collapse: collapse;
+
+  & thead {
+    border-bottom: 1px solid ${th('colorBorder')};
+    background-color: ${th('colorBackgroundHue2')};
+  }
+
+  & th,
+  & td {
+    border: none;
+    padding-left: calc(${th('gridUnit')} * 2);
+    text-align: start;
+    vertical-align: middle;
+
+    height: calc(${th('gridUnit')} * 5);
+    min-width: calc(${th('gridUnit')} * 12);
+  }
+`
+
+const HiddenCell = styled.td`
+  opacity: 0;
+  padding-top: ${th('gridUnit')};
+`
+
+const HidableCell = styled.td`
+  opacity: 1;
+  padding-top: ${th('gridUnit')};
+`
+
+const CustomCell = styled.td`
+  &:hover {
+    ${Button} {
+      display: block;
+    }
+    ${Text} {
+      display: none;
+    }
+  }
+
+  ${Button} {
+    display: none;
+  }
+  ${Text} {
+    display: inline-block;
+  }
+`
+
+const TableRow = styled.tr`
+  background-color: ${th('colorBackgroundHue2')};
+  border-bottom: 1px solid ${th('colorBorder')};
+
+  & td:first-child {
+    min-width: calc(${th('gridUnit')} * 30);
+  }
+
+  &:hover {
+    background-color: ${th('colorBackgroundHue3')};
+
+    ${HiddenCell} {
+      opacity: 1;
+    }
+    ${HidableCell} {
+      opacity: 0;
+    }
+  }
+`
+// #endregion

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

+A list of publon reviewers.
+
+```js
+const reviewers = [
+  {
+    publishingName: 'Vlad Corduneanu',
+    recentOrganizations: {
+      name: 'Facultatea Tehnica Iasi'
+    },
+    numVerifiedReviews: '123'
+  },
+  {
+    publishingName: 'Dani Mocanu',
+    recentOrganizations: {
+      name: 'UAIC'
+    },
+    numVerifiedReviews: '222'
+  },
+  {
+    publishingName: 'Gica Hagi',
+    recentOrganizations: {
+      name: 'Pixar'
+    },
+    numVerifiedReviews: '100'
+  },
+];
+
+<PublonsTable reviewers={reviewers}/>
+```