feat(molecules): adds section title components

Adds the section title component

closes #136

.vscode/settings.json

@@ -8,5 +8,6 @@
     "statusBarItem.remoteBackground": "#14562c",
     "statusBarItem.remoteForeground": "#e7e7e7"
   },
-  "peacock.color": "#14562c"
+  "peacock.color": "#14562c",
+  "editor.formatOnSave": true
 }

src/components/molecules/SectionTitle/SectionTitle.jsx

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+import { rem } from 'polished';
+import { spacing } from '@styles/utils';
+import Divider from '@components/atoms/Divider';
+
+export function SectionTitle({ children, className }) {
+  return (
+    <header
+      className={className}
+      css={css`
+        display: flex;
+        flex-direction: row;
+        align-content: center;
+        align-items: center;
+        justify-content: flex-start;
+        margin-bottom: ${spacing(2)};
+      `}
+      data-testid="section-title"
+    >
+      <h2
+        css={css`
+          display: inline-block;
+          flex: 0 0 auto;
+          margin-right: ${spacing(1)};
+          margin-bottom: 0;
+          font-weight: normal;
+          font-size: ${rem('14px')};
+          font-style: italic;
+        `}
+      >
+        {children}
+      </h2>
+      <Divider
+        css={css`
+          flex: 1 1 100%;
+          max-width: ${rem('280px')};
+        `}
+      />
+    </header>
+  );
+}
+
+SectionTitle.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};
+
+SectionTitle.defaultProps = {
+  children: null,
+  className: null,
+};
+
+export default SectionTitle;

src/components/molecules/SectionTitle/SectionTitle.stories.jsx

@@ -0,0 +1,13 @@
+import { SectionTitle } from './SectionTitle';
+
+export default {
+  component: SectionTitle,
+  title: 'Components/Molecules/SectionTitle',
+};
+
+const Template = (args) => <SectionTitle {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Section Title',
+};

src/components/molecules/SectionTitle/SectionTitle.test.jsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@emotion/react';
+import { theme } from '@styles/theme';
+import { SectionTitle } from './SectionTitle';
+
+describe('<SectionTitle />', () => {
+  it('renders the section title', () => {
+    expect.assertions(2);
+
+    render(
+      <ThemeProvider theme={theme}>
+        <SectionTitle className="test-class">Hello World</SectionTitle>
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByRole('heading', { name: 'Hello World' })).toBeInTheDocument();
+    expect(screen.getByTestId('section-title')).toHaveClass('test-class');
+  });
+});

src/components/molecules/SectionTitle/index.js

@@ -0,0 +1,5 @@
+import { SectionTitle } from './SectionTitle';
+
+export * from './SectionTitle';
+
+export default SectionTitle;