feat: add Base Assessment View

Author: muselesscreator

src/components/BaseAssessmentView/BaseAssessmentView.scss

@@ -0,0 +1,26 @@
+@import "@edx/paragon/scss/core/core";
+
+.assessment-content-layout {
+  & > div.content-body {
+    height: 100%;
+    .row {
+      height: 100%;
+    }
+  }
+  width: fit-content;
+  margin: auto;
+  height: 100%;
+
+  .content-wrapper {
+    min-width: min-content;
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .assessment-content-layout {
+    .content-wrapper {
+      width: 100%;
+    }
+  }
+}
+

src/components/BaseAssessmentView/index.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  ActionRow,
+  Col,
+  Row,
+} from '@edx/paragon';
+
+import AssessmentContextProvider from 'components/AssessmentContext';
+import ProgressBar from 'components/ProgressBar';
+import Assessment from 'components/Assessment';
+
+import './BaseAssessmentView.scss';
+
+const BaseAssessmentView = ({
+  children,
+  submitAssessment,
+  actions,
+}) => (
+  <AssessmentContextProvider>
+    <ProgressBar />
+    <div className="assessment-content-layout mr-auto ml-auto">
+      <div className="content-wrapper">
+        <Row className="flex-nowrap m-0">
+          <Col className="p-0">
+            {children}
+          </Col>
+          <Assessment submitAssessment={submitAssessment} />
+        </Row>
+      </div>
+    </div>
+    <ActionRow className="border mt-3">
+      {actions}
+    </ActionRow>
+  </AssessmentContextProvider>
+);
+BaseAssessmentView.propTypes = {
+  children: PropTypes.node.isRequired,
+  actions: PropTypes.arrayOf(PropTypes.node).isRequired,
+  submitAssessment: PropTypes.func.isRequired,
+};
+
+export default BaseAssessmentView;