initial component setup and edit actionsgroup

Author: summer-cook

src/assets/fontawesome.js

@@ -3,6 +3,7 @@ import {
   faArrowDown,
   faArrowUp,
   faEnvelope,
+  faFileLines,
   faListCheck,
   faPaperclip,
   faSquareCheck,
@@ -18,6 +19,7 @@ library.add(
   faArrowDown,
   faArrowUp,
   faEnvelope,
+  faFileLines,
   faListCheck,
   faMinusSquare,
   faPlusSquare,

src/components/FilesTable/FilesTable.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Table } from 'react-bootstrap'
+
+const FilesTable = (addClass, files) => {
+  let headers = ['']
+  return (
+    <Table striped bordered hover size='sm' className={`${addClass}`}>
+      <thead>
+        <tr>
+          {headers.map((header) => {
+            return (
+              <th>
+
+              </th>
+            )
+          })}
+        </tr>
+      </thead>
+      <tbody>
+        {/* {files.map((file) => {
+          return (
+            <tr>
+
+            </tr>
+          )
+        })} */}
+      </tbody>
+    </Table>
+  )
+}
+
+FilesTable.propTypes = {
+  addClass: PropTypes.string,
+}
+
+FilesTable.defaultProps = {
+  addClass: '',
+}
+
+export default FilesTable

src/components/FilesTable/FilesTable.stories.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import FilesTable from './FilesTable'
+
+export default {
+  title: 'Components/FilesTable',
+  component: FilesTable,
+}
+
+const Template = (args) => <FilesTable {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  headers: [''],
+}

src/compounds/ActionsGroup/ActionsGroup.jsx

@@ -3,9 +3,11 @@ import PropTypes from 'prop-types'
 import { ListGroup } from 'react-bootstrap'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import SendMessage from './actions/SendMessage'
+import ViewFiles from './actions/ViewFiles'
 import './actions-group.scss'
 
-const ActionsGroup = ({ handleSendingMessages }) => {
+const ActionsGroup = ({ files, handleSendingMessages }) => {
+  console.log(files)
   const [show, setShow] = useState(false)
   const [action, setAction] = useState(null)
 
@@ -22,24 +24,42 @@ const ActionsGroup = ({ handleSendingMessages }) => {
   return (
     <>
       <ListGroup className='actions-group'>
-        <ListGroup.Item action variant='primary' onClick={() => handleShow('SendMessage')}>
+        {/* TODO(@summercook): return the below once the direction of
+          https://github.com/scientist-softserv/webstore/issues/156 has been decided */}
+        {/* <ListGroup.Item action variant='primary' onClick={() => handleShow('SendMessage')}>
           <FontAwesomeIcon icon='fa-envelope' />
           Send Message
+        </ListGroup.Item> */}
+        <ListGroup.Item action variant='primary' onClick={() => handleShow('ViewFiles')} role='presentation'>
+          <FontAwesomeIcon icon='fa-file-lines' />
+          View Files
         </ListGroup.Item>
       </ListGroup>
-      {(action === 'SendMessage' && show)
+      {/* TODO(@summercook): return the below once the direction of
+          https://github.com/scientist-softserv/webstore/issues/156 has been decided */}
+      {/* {(action === 'SendMessage' && show)
         && (
           <SendMessage
             handleClose={handleClose}
             onSubmit={handleSendingMessages}
           />
+        )} */}
+      {(action === 'ViewFiles' && show)
+        && (
+          <ViewFiles
+            show={show}
+            handleClose={handleClose}
+            files={files}
+          />
         )}
     </>
   )
 }
 
-ActionsGroup.propTypes = {
-  handleSendingMessages: PropTypes.func.isRequired,
-}
+// ActionsGroup.propTypes = {
+  // TODO(@summercook): return the below once the direction of
+  // https://github.com/scientist-softserv/webstore/issues/156 has been decided
+  //handleSendingMessages: PropTypes.func.isRequired,
+// }
 
 export default ActionsGroup

src/compounds/ActionsGroup/actions/ViewFiles.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import { Offcanvas, Tab, Tabs } from 'react-bootstrap'
+import FilesTable from '../../../components/FilesTable/FilesTable'
+
+const ViewFiles = ({ files, handleClose, show }) => {
+  return (
+      <Offcanvas show={show} onHide={handleClose} placement='end' scroll='true'>
+        <Offcanvas.Header className='d-flex border-bottom px-3 py-2 bg-light' closeButton>
+          <Offcanvas.Title>Documents</Offcanvas.Title>
+        </Offcanvas.Header>
+        <Offcanvas.Body className='border rounded p-2 m-3'>
+            <Tabs
+              defaultActiveKey="files"
+              id="document-tabs"
+            >
+              <Tab eventKey="files" title="Attachments" className='p-2'>
+                <FilesTable files={files} />
+              </Tab>
+              <Tab eventKey="status-updates" title="Status Updates" className='p-2'>
+                goodbye
+              </Tab>
+              <Tab eventKey="payment-status-files" title="Payment Status Files" className='p-2'>
+                goodbye
+              </Tab>
+            </Tabs>
+        </Offcanvas.Body>
+      </Offcanvas>
+  )
+}
+
+ViewFiles.propTypes = {
+  addClass: PropTypes.string,
+}
+
+ViewFiles.defaultProps = {
+  addClass: '',
+}
+
+export default ViewFiles