ResponseToReviewer.js

import React from 'react'
import { FilePicker } from '@pubsweet/ui'
import { th } from '@pubsweet/ui-toolkit'
import {
  Row,
  Item,
  Textarea,
  ActionLink,
} from 'pubsweet-component-faraday-ui/src'
import styled from 'styled-components'
import { ContextualBox, Label } from '../'

const ResponseToReviewer = ({ allowedFileExtensions, onUpload }) => (
  <ContextualBox label="Response to Reviewer Comments" transparent>
    <Root>
      <Row alignItems="center" justify="space-between">
        <Item>
          <Label required>Your Reply</Label>
          <FilePicker
            allowedFileExtensions={allowedFileExtensions}
            onUpload={onUpload}
          >
            <ActionLink icon="plus">UPLOAD FILE</ActionLink>
          </FilePicker>
        </Item>
      </Row>
      <Row>
        <Textarea />
      </Row>
    </Root>
  </ContextualBox>
)

const Root = styled.div`
  border-left: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
  padding-left: calc(${th('gridUnit')} * 1);
`

export default ResponseToReviewer