fix(components): html parse, styled components

packages/components/xpub-review/src/components/DecisionPage.js

@@ -15,6 +15,15 @@ import uploadFile from 'xpub-upload'
 import DecisionLayout from './decision/DecisionLayout'
 import AssignEditorContainer from '../components/assignEditors/AssignEditorContainer'
 
+// TODO: this is only here because prosemirror would save the title in the
+// metadata as html instead of plain text. we need to maybe find a better
+// position than here to perform this operation
+const stripHtml = htmlString => {
+  const temp = document.createElement('span')
+  temp.innerHTML = htmlString
+  return temp.textContent
+}
+
 const onSubmit = (values, dispatch, { project, version, history }) => {
   version.decision = {
     ...version.decision,
@@ -36,6 +45,7 @@ const onSubmit = (values, dispatch, { project, version, history }) => {
 }
 
 const onChange = (values, dispatch, { project, version }) => {
+  values.note.content = stripHtml(values.note.content) // see TODO above
   version.decision = {
     ...version.decision,
     ...values,

packages/components/xpub-review/src/components/ReviewPage.js

@@ -17,6 +17,15 @@ import {
 import uploadFile from 'xpub-upload'
 import ReviewLayout from './review/ReviewLayout'
 
+// TODO: this is only here because prosemirror would save the title in the
+// metadata as html instead of plain text. we need to maybe find a better
+// position than here to perform this operation
+const stripHtml = htmlString => {
+  const temp = document.createElement('span')
+  temp.innerHTML = htmlString
+  return temp.textContent
+}
+
 const onSubmit = (
   values,
   dispatch,
@@ -47,6 +56,7 @@ const onSubmit = (
 }
 
 const onChange = (values, dispatch, { project, version, reviewer }) => {
+  values.note.content = stripHtml(values.note.content) // see TODO above
   Object.assign(reviewer, {
     // submitted: new Date(),
     ...values,

packages/components/xpub-submit/src/components/SubmittedVersion.js

@@ -16,14 +16,6 @@ const Wrapper = styled.div`
   overflow: ${({ confirming }) => confirming && 'hidden'};
 `
 
-// const hoverStyles = css`
-//   background-image: linear-gradient(to right, #666 50%, white 0%);
-//   background-position: 0 90%;
-//   background-repeat: repeat-x;
-//   background-size: 6px 1px;
-//   position: relative;
-// `
-
 const Intro = styled.div`
   font-style: italic;
   line-height: 1.4;
@@ -40,15 +32,15 @@ const SubLegend = Legend.extend`
   margin-top: ${th('gridUnit')};
 `
 
-// &:hover {
-//   ${props => !props.readonly && hoverStyles};
-// }
-
 const Abstract = styled.div`
   word-wrap: break-word;
 `
 const ReviewAccord = styled.div``
 
+const ReviewsItem = styled.div`
+  margin-left: 1em;
+`
+
 const ReviewAccordion = ({ reviewers }) => (
   <ReviewAccord>
     {reviewers.length > 0 &&
@@ -60,6 +52,7 @@ const ReviewAccordion = ({ reviewers }) => (
             key={review.id}
             ordinal={index + 1}
             title="review"
+            withDots="true"
           />
         )
       })}
@@ -144,19 +137,22 @@ const SubmittedVersion = ({
       </SubmissionVersion>
       <Review>
         <Accordion
-          Component={version.decision.note.content}
+          Component={<ReviewsItem>{version.decision.note.content}</ReviewsItem>}
           key="decision"
-          title="decision"
+          status="revise"
+          title="Decision"
         />
-        {version.reviewers && (
-          <Section id="accordion.review">
-            <Accordion
-              Component={<ReviewAccordion reviewers={version.reviewers} />}
-              key="review"
-              title="decision"
-            />
-          </Section>
-        )}
+        <ReviewsItem>
+          {version.reviewers && (
+            <Section id="accordion.review">
+              <Accordion
+                Component={<ReviewAccordion reviewers={version.reviewers} />}
+                key="review"
+                title="Reviews"
+              />
+            </Section>
+          )}
+        </ReviewsItem>
       </Review>
     </Columns>
   </Wrapper>

packages/components/xpub-submit/src/components/molecules/Accordion.js

@@ -2,12 +2,14 @@ import React from 'react'
 import styled from 'styled-components'
 import { compose, withState, withHandlers } from 'recompose'
 import { withJournal } from 'xpub-journal'
-import { Button } from '@pubsweet/ui'
+import { Button, th } from '@pubsweet/ui'
 
 const Root = styled.div``
 
-const AccordionBody = styled.div`
-  margin-left: 1em;
+const AccordionBody = styled.div``
+const Title = styled.span`
+  font-size: ${th('fontSizeHeading5')};
+  font-family: ${th('fontHeading')};
 `
 
 const ToggleReview = ({ open, toggle }) => (
@@ -43,29 +45,51 @@ const AccordionHeading = ({
   recommendation,
   toggleOpen,
   component,
+  withDots,
 }) => {
   const Root = styled.div`
     display: flex;
     align-items: baseline;
-    border-bottom: 1px solid #000;
-    margin-bottom: 20px;
+    margin-bottom: ${th('gridUnit')};
   `
-  const Ordinal = styled.span``
-  const Name = styled.span``
-  const Controls = styled.span`
-    flex-grow: 1;
-    text-align: right;
+
+  const Ordinal = styled(Title)``
+  const Controls = styled.span``
+
+  const Head = styled.div`
+    ${() => !withDots && 'border-bottom: 1px solid #000;'};
+    align-items: baseline;
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+  `
+
+  const Dots = styled.span`
+    background-image: linear-gradient(to right, #666 50%, white 0%);
+    background-position: 0 90%;
+    background-repeat: repeat-x;
+    background-size: 6px 1px;
+    position: relative;
+    height: 1px;
+    flex: 1;
+    margin-left: 10px;
+    margin-right: 10px;
   `
 
   return (
     <Root>
-      <Bullet journal={journal} recommendation={recommendation} />
-      <Ordinal>Review {ordinal}</Ordinal>
-      &nbsp;
-      <Name>{name || 'Anonymous'}</Name>
-      <Controls>
-        <ToggleReview open={open} toggle={toggleOpen} />
-      </Controls>
+      {recommendation && (
+        <Bullet journal={journal} recommendation={recommendation} />
+      )}
+      <Head>
+        <Ordinal>
+          {name} {ordinal}
+        </Ordinal>
+        {withDots && <Dots />}
+        <Controls>
+          <ToggleReview open={open} toggle={toggleOpen} />
+        </Controls>
+      </Head>
       {component}
     </Root>
   )
@@ -77,7 +101,9 @@ const Accordion = ({
   ordinal,
   toggleOpen,
   title,
+  status,
   Component,
+  withDots,
 }) => (
   <Root>
     <AccordionHeading
@@ -85,7 +111,9 @@ const Accordion = ({
       name={title}
       open={open}
       ordinal={ordinal}
+      recommendation={status}
       toggleOpen={toggleOpen}
+      withDots={withDots || false}
     />
     {open && <AccordionBody>{Component}</AccordionBody>}
   </Root>