Candidate test run page

client/.storybook/main.js

@@ -1,3 +1,4 @@
 module.exports = {
-    addons: ['@storybook/addon-actions/register']
+    stories: ['../stories/*.stories.jsx'],
+    addons: ['@storybook/addon-a11y', '@storybook/addon-controls']
 };

client/.storybook/preview.js

@@ -0,0 +1,4 @@
+import '../../node_modules/bootstrap/dist/css/bootstrap.css';
+import '../../node_modules/@fortawesome/fontawesome-svg-core/styles.css';
+import '!style-loader!css-loader!sass-loader!../scss/custom.scss'; // using inline webpack loaders for scss
+import '../static/index.css';

client/components/App/App.jsx

@@ -20,7 +20,7 @@ const App = () => {
     const [isNavbarExpanded, setIsNavbarExpanded] = useState(false);
 
     const auth = evaluateAuth(data && data.me ? data.me : {});
-    const { username, isSignedIn, /*isAdmin,*/ isVendor } = auth;
+    const { username, isSignedIn, isAdmin, isVendor } = auth;
 
     const signOut = async () => {
         await fetch('/api/auth/signout', { method: 'POST' });
@@ -80,20 +80,20 @@ const App = () => {
                                     Test Queue
                                 </Nav.Link>
                             </li>
-                            {/*{isSignedIn && (isAdmin || isVendor) && (*/}
-                            {/*    <li>*/}
-                            {/*        <Nav.Link*/}
-                            {/*            as={Link}*/}
-                            {/*            to="/candidate-tests"*/}
-                            {/*            aria-current={*/}
-                            {/*                location.pathname ===*/}
-                            {/*                '/candidate-tests'*/}
-                            {/*            }*/}
-                            {/*        >*/}
-                            {/*            Candidate Tests*/}
-                            {/*        </Nav.Link>*/}
-                            {/*    </li>*/}
-                            {/*)}*/}
+                            {isSignedIn && (isAdmin || isVendor) && (
+                                <li>
+                                    <Nav.Link
+                                        as={Link}
+                                        to="/candidate-tests"
+                                        aria-current={
+                                            location.pathname ===
+                                            '/candidate-tests'
+                                        }
+                                    >
+                                        Candidate Tests
+                                    </Nav.Link>
+                                </li>
+                            )}
                             {isSignedIn && (
                                 <>
                                     {!isVendor && (

client/components/CandidateTestPlanRun/CandidateTestPlanRun.css

@@ -0,0 +1,154 @@
+.card-body {
+    padding: 0;
+}
+
+.card-body > div {
+    border: none;
+}
+
+.current-test-title {
+    border: none;
+}
+
+.current-test-options .options-wrapper {
+    text-align: center;
+}
+
+.current-test-options .options-wrapper li {
+    margin-bottom: 0.5em;
+}
+
+.current-test-options .options-wrapper li:last-child {
+    margin-bottom: 0;
+}
+
+.feedback-accordion {
+    width: 100%;
+}
+
+.feedback-accordion-header {
+    display: grid;
+    grid-template-columns: 50% 50%;
+}
+
+.feedback-accordion-header span {
+    text-align: right;
+}
+
+.feedback-from-text {
+    font-weight: 400;
+}
+
+.feedback-list-item {
+    padding: 1em 0 1em 0.5em;
+    position: relative;
+    margin: 1em 0 1em 0em;
+    list-style: none;
+    font-size: 14px;
+    border: solid 1px #e5e5e5;
+    width: 100%;
+}
+
+.feedback-indicator {
+    position: absolute;
+    left: -2em;
+    top: 1.3em;
+    width: 16px;
+    height: 16px;
+    border-radius: 50px;
+    border: 2px solid #9a9a9a;
+}
+
+.feedback-list-item:before {
+    content: '';
+    position: absolute;
+    height: 2.3em;
+    width: 2px;
+    top: -1.1em;
+    left: -1.5em;
+    background: #d2d5d9;
+}
+
+.feedback-list-item:after {
+    content: '';
+    position: absolute;
+    height: calc(100% - 1.3em);
+    width: 2px;
+    bottom: -1.2em;
+    left: -1.5em;
+    background: #d2d5d9;
+}
+
+.feedback-list-item .feedback-indicator {
+    background: white;
+}
+
+.issues-container {
+    max-width: 800px;
+}
+
+.issues-container > h2 {
+    margin: 0 0 0.5em;
+    font-size: 18px;
+    padding-bottom: 5px;
+    border-bottom: solid 1px #e5e5e5;
+}
+
+.task-label {
+    font-size: 18px !important;
+}
+
+.test-results-header,
+.test-instructions-header {
+    border-bottom: none;
+}
+
+.review-status,
+.target-date,
+.apg-example-name {
+    width: 32% !important;
+}
+
+.results-container {
+    padding: 0px;
+}
+
+.results-container-col {
+    padding: 0;
+}
+
+.results-container-row {
+    border: solid 1px #e5e5e5;
+    padding: 1em;
+}
+
+.options-feedback {
+    top: 35px;
+}
+
+.test-results-header {
+    border-bottom: none;
+    margin: 0;
+    padding: 20px;
+    font-size: 20px;
+    background-color: #f5f8fa;
+    border: #e5efe8 1px solid;
+}
+
+.test-results-table {
+    margin-bottom: 0;
+    border-left: none;
+}
+
+.using {
+    font-weight: 300;
+}
+
+.viewed-badge {
+    background-color: #e5e5e5;
+    color: black;
+    font-size: 15px;
+    font-weight: 400;
+    position: relative;
+    top: -5px;
+}