feat: created Grading page (#557)

src/generic/alert-message/index.jsx

@@ -5,13 +5,13 @@ import PropTypes from 'prop-types';
 const AlertMessage = ({ title, description, ...props }) => (
   <Alert {...props}>
     <Alert.Heading>{title}</Alert.Heading>
-    <p>{description}</p>
+    <span>{description}</span>
   </Alert>
 );
 
 AlertMessage.propTypes = {
-  title: PropTypes.string,
-  description: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
 
 AlertMessage.defaultProps = {

src/generic/section-sub-header/SectionSubHeader.scss

@@ -0,0 +1,12 @@
+.section-sub-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: .75rem;
+  border-bottom: $border-width solid $light-400;
+
+  h2 {
+    color: $black;
+    margin-bottom: .75rem;
+  }
+}

src/generic/section-sub-header/SectionSubHeader.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import SectionSubHeader from '.';
+
+const props = {
+  title: 'foo-title',
+  description: 'bar-description',
+};
+
+describe('<SectionSubHeader />', () => {
+  it('renders successfully', () => {
+    const { getByText } = render(<SectionSubHeader {...props} />);
+    expect(getByText(props.title)).toBeInTheDocument();
+    expect(getByText(props.description)).toBeInTheDocument();
+  });
+});

src/generic/section-sub-header/index.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SectionSubHeader = ({ title, description }) => (
+  <header className="section-sub-header">
+    <h2 className="lead">{title}</h2>
+    <span className="small text-gray-700">{description}</span>
+  </header>
+);
+
+SectionSubHeader.defaultProps = {
+  description: '',
+};
+
+SectionSubHeader.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+};
+
+export default SectionSubHeader;

src/generic/styles.scss

@@ -1,3 +1,4 @@
 @import "./help-sidebar/HelpSidebar";
 @import "./course-upload-image/CourseUploadImage";
 @import "./sub-header/SubHeader";
+@import "./section-sub-header/SectionSubHeader";