feat: created Grading page (#557)

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;