feat: extract StatusBadge

app/components/component-manuscripts/src/Manuscript.jsx

@@ -15,6 +15,7 @@ import {
   ErrorStatus,
   NormalStatus,
   UserAction as Action,
+  StatusBadge,
 } from './style'
 
 import { convertTimestampToDate } from '../../../shared/time-formatting'
@@ -25,14 +26,6 @@ const DELETE_MANUSCRIPT = gql`
   }
 `
 
-const Status = ({ status }) => {
-  if (status === 'accepted') {
-    return <SuccessStatus>{status}</SuccessStatus>
-  } else if (status === 'rejected') {
-    return <ErrorStatus>{status}</ErrorStatus>
-  }
-  return <NormalStatus>{status}</NormalStatus>
-}
 
 const User = ({ manuscript }) => {
   const [deleteManuscript] = useMutation(DELETE_MANUSCRIPT)
@@ -41,17 +34,10 @@ const User = ({ manuscript }) => {
     <Row>
       <Cell>
         {manuscript.meta && manuscript.meta.title}
-        {/* <UserCombo>
-          <UserAvatar manuscript={manuscript} />
-          <UserInfo>
-            <Primary>{manuscript.username}</Primary>
-            <Secondary>{manuscript.email || '(via ORCID)'}</Secondary>
-          </UserInfo>
-        </UserCombo> */}
       </Cell>
       <Cell>{convertTimestampToDate(manuscript.created)}</Cell>
       <Cell>
-        <Status status={manuscript.status} />
+        <StatusBadge status={manuscript.status} />
       </Cell>
       <Cell>
         {manuscript.submitter && (

app/components/component-manuscripts/src/style.js

@@ -20,29 +20,15 @@ export {
   CaretDown,
   Spinner,
   Pagination,
+  SuccessStatus,
+  ErrorStatus,
+  NormalStatus,
+  StatusBadge,
 } from '../../shared'
 
 // TODO: Extract common above
 // Specific
 
-const Status = styled.span`
-  border-radius: 8px;
-  font-variant: all-small-caps;
-  padding: ${grid(0.5)} ${grid(1)};
-`
-export const SuccessStatus = styled(Status)`
-  background-color: ${th('colorSuccess')};
-`
-
-export const ErrorStatus = styled(Status)`
-  background-color: ${th('colorError')};
-`
-
-export const NormalStatus = styled(Status)`
-  background-color: ${th('colorWarning')};
-  // color: ${th('colorTextReverse')};
-`
-
 export const UserAction = styled(Action)`
   font-size: inherit;
 `

app/components/shared/Badge.js

+import React from 'react'
+import styled, { css } from 'styled-components'
+import { grid, th } from '@pubsweet/ui-toolkit'
+
+const Status = styled.span`
+  border-radius: 8px;
+  font-variant: all-small-caps;
+  font-size: ${th('fontSizeBaseSmall')};
+  ${props =>
+    !props.minimal &&
+    css`
+      padding: ${grid(0.5)} ${grid(1)};
+    `}
+`
+
+export const SuccessStatus = styled(Status)`
+  ${props =>
+    props.minimal
+      ? css`
+          color: ${th('colorSuccess')};
+        `
+      : css`
+          background-color: ${th('colorSuccess')};
+          color: ${th('colorTextReverse')};
+        `}
+`
+
+export const ErrorStatus = styled(Status)`
+  ${props =>
+    props.minimal
+      ? css`
+          color: ${th('colorError')};
+        `
+      : css`
+          background-color: ${th('colorError')};
+          color: ${th('colorTextReverse')};
+        `}
+`
+
+export const NormalStatus = styled(Status)`
+  // background-color: ${th('colorWarning')};
+  // color: ${th('colorTextReverse')};
+  ${props =>
+    props.minimal
+      ? css`
+          color: ${th('colorPrimary')};
+        `
+      : css`
+          background-color: ${th('colorWarning')};
+        `}
+`
+
+const label = status => {
+  const labels = {
+    accepted: 'Accepted',
+    assignedToEditor: 'Assigned to editor',
+    assigningReviewers: 'Assigning reviewers',
+    new: 'Unsubmitted',
+    rejected: 'Rejected',
+    submitted: 'Submitted',
+    revise: 'Revising',
+  }
+  return labels[status] || `Unknown (${status})`
+}
+
+export const StatusBadge = ({ status, minimal }) => {
+  if (status === 'accepted') {
+    return <SuccessStatus minimal={minimal}>{label(status)}</SuccessStatus>
+  } else if (status === 'rejected') {
+    return <ErrorStatus minimal={minimal}>{label(status)}</ErrorStatus>
+  }
+  return <NormalStatus minimal={minimal}>{label(status)}</NormalStatus>
+}