style(report-card): add show more/less for comment contents

packages/component-manuscript/src/components/ReviewReportCard.js

@@ -7,61 +7,68 @@ import { withJournal } from 'xpub-journal'
 import styled, { css } from 'styled-components'
 import { FileItem } from 'pubsweet-components-faraday/src/components/Files'
 
-const ReviewReportCard = ({ report = {}, journal: { recommendations } }) => (
-  <Root>
-    <Row>
-      <Label>Recommendation</Label>
-      {report.submittedOn && (
-        <Text>
-          Submitted on: {moment(report.submittedOn).format('DD.MM.YYYY')}
-        </Text>
-      )}
-    </Row>
-    <Row>
-      <Text>
-        {recommendations.find(r => report.recommendation === r.value).label}
-      </Text>
-    </Row>
-    {get(report, 'comments[0].content') && (
-      <Fragment>
-        <Spacing />
-        <Row left>
-          <Label>Report Text</Label>
-        </Row>
-        <Row>
-          <Text>{report.comments[0].content}</Text>
-        </Row>
-      </Fragment>
-    )}
+import ShowMore from './ShowMore'
+
+const ReviewReportCard = ({ report = {}, journal: { recommendations } }) => {
+  const { submittedOn, comments } = report
+  const submittedDate = moment(submittedOn).format('DD.MM.YYYY')
+  const publicComment = comments.find(c => c.public)
+  const privateComment = comments.find(c => !c.public)
+  const recommendationLabel = get(
+    recommendations.find(r => report.recommendation === r.value),
+    'label',
+  )
 
-    {get(report, 'comments[0].files') &&
-      !!report.comments[0].files.length && (
+  return (
+    <Root>
+      <Row>
+        <Label>Recommendation</Label>
+        {submittedDate && <Text>{submittedDate}</Text>}
+      </Row>
+      <Row>
+        <Text>{recommendationLabel}</Text>
+      </Row>
+      {publicComment.content && (
         <Fragment>
           <Spacing />
           <Row left>
-            <Label>Files</Label>
+            <Label>Report Text</Label>
           </Row>
-          <Row left>
-            {report.comments[0].files.map(file => (
-              <FileItem compact id={file.id} key={file.id} {...file} />
-            ))}
+          <Row>
+            <ShowMore content={publicComment.content} />
           </Row>
         </Fragment>
       )}
 
-    {get(report, 'comments[1].content') && (
-      <Fragment>
-        <Spacing />
-        <Row left>
-          <Label>Confidential Note</Label>
-        </Row>
-        <Row>
-          <Text>{report.comments[1].content}</Text>
-        </Row>
-      </Fragment>
-    )}
-  </Root>
-)
+      {publicComment.files &&
+        !!publicComment.files.length && (
+          <Fragment>
+            <Spacing />
+            <Row left>
+              <Label>Files</Label>
+            </Row>
+            <Row left>
+              {publicComment.files.map(file => (
+                <FileItem compact id={file.id} key={file.id} {...file} />
+              ))}
+            </Row>
+          </Fragment>
+        )}
+
+      {privateComment.content && (
+        <Fragment>
+          <Spacing />
+          <Row left>
+            <Label>Confidential Note</Label>
+          </Row>
+          <Row>
+            <ShowMore content={privateComment.content} />
+          </Row>
+        </Fragment>
+      )}
+    </Root>
+  )
+}
 
 export default compose(withJournal)(ReviewReportCard)
 
@@ -106,4 +113,5 @@ const Row = styled.div`
   justify-content: ${({ left }) => (left ? 'left' : 'space-between')};
   ${defaultText};
 `
+
 // #endregion

packages/component-manuscript/src/components/ShowMore.js

+import React, { Fragment } from 'react'
+import { Icon } from '@pubsweet/ui'
+import styled from 'styled-components'
+
+const ShowMore = ({ content = '', words = 50 }) => {
+  const contentSize = content.split(' ').length
+  return (
+    <Root>
+      {contentSize > words && (
+        <Fragment>
+          <Input id="read-more-target" role="button" type="checkbox" />
+          <Control htmlFor="read-more-target">
+            <div>
+              <Icon primary>chevron-down</Icon> Show All
+            </div>
+            <div>
+              <Icon primary>chevron-up</Icon> Show Less
+            </div>
+          </Control>
+        </Fragment>
+      )}
+      <Container bigger={contentSize > words}>{content}</Container>
+    </Root>
+  )
+}
+
+export default ShowMore
+
+// #region styled-components
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+const Container = styled.section`
+  height: ${({ bigger }) => (bigger ? '100px' : 'initial')};
+  overflow: hidden;
+  order: -1;
+`
+
+const Input = styled.input`
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+
+  &:checked {
+    ~ section {
+      height: initial;
+      overflow: unset;
+    }
+    ~ label {
+      div:first-of-type {
+        display: none;
+      }
+      div:last-of-type {
+        display: inline-block;
+      }
+    }
+  }
+  ~ label {
+    div:first-of-type {
+      display: inline-block;
+    }
+    div:last-of-type {
+      display: none;
+    }
+  }
+`
+
+const Control = styled.label`
+  cursor: pointer;
+  div {
+    text-decoration: underline;
+    text-transform: uppercase;
+    > span {
+      vertical-align: sub;
+      padding-left: 0;
+    }
+  }
+  &:hover {
+    opacity: 0.7;
+  }
+`
+
+// #endregion