CHG Autograde Test Item (#264)

Signed-off-by: John McCann Cunniff Jr <[email protected]>

web/src/Components/Public/Submission/SubmissionTest/SubmissionTest.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {useStyles} from './SubmissionTest.styles';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import clsx from 'clsx';
+import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
+
+
+export default function SubmissionTest({test}) {
+  const classes = useStyles();
+  return (
+    <Box
+      className={classes.root}
+    >
+      <Box
+        className={classes.title}
+      >
+        <Typography
+          className={classes.iconWrapper}
+        >
+          <FiberManualRecordIcon className={clsx(classes.circleIcon,
+            test.result.passed === true ? classes.success : classes.error)}/>
+        </Typography>
+
+        <Typography
+          className={classes.name}
+        >
+          {test.test.name}
+        </Typography>
+        <Typography
+          className={clsx(classes.testStatus, test.result.passed === true ? classes.success : classes.error)}
+        >
+          {test.result.passed === true ? 'Successful' : 'Failed'}
+        </Typography>
+      </Box>
+      <Typography className={classes.expand}>
+              Expand
+      </Typography>
+    </Box>
+  );
+}

web/src/Components/Public/Submission/SubmissionTest/SubmissionTest.styles.jsx

@@ -0,0 +1,44 @@
+import {makeStyles} from '@material-ui/core/styles';
+
+export const useStyles = makeStyles((theme) => ({
+  root: {
+    padding: theme.spacing(3),
+    borderRadius: '10px',
+    background: theme.palette.dark.blue['200'],
+    height: '79px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  title: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  circleIcon: {
+    width: '20px',
+    height: '20px',
+  },
+  iconWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '14px',
+  },
+  name: {
+    fontSize: '20px',
+    paddingLeft: '15px',
+  },
+  testStatus: {
+    alignSelf: 'flex-end',
+    paddingBottom: '1px',
+    paddingLeft: '10px',
+  },
+  success: {
+    color: theme.palette.color.green,
+  },
+  error: {
+    color: theme.palette.color.red,
+  },
+  expand: {
+  },
+}));