From 42fb2a17ab86a5ded6befb9436cd8c1d3abb6196 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Mon, 15 Jun 2020 14:07:43 -0700
Subject: [PATCH] feat: Add a PageTitle component and update the reference
 templates to use them

---
 src/components/PageTitle.js                 | 13 +++++++++++++
 src/components/PageTitle.module.scss        |  4 ++++
 src/templates/ApiReferenceTemplate.js       |  3 ++-
 src/templates/ComponentReferenceTemplate.js |  3 ++-
 4 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 src/components/PageTitle.js
 create mode 100644 src/components/PageTitle.module.scss

diff --git a/src/components/PageTitle.js b/src/components/PageTitle.js
new file mode 100644
index 000000000..7603031b2
--- /dev/null
+++ b/src/components/PageTitle.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './PageTitle.module.scss';
+
+const PageTitle = ({ children }) => (
+  <h1 className={styles.pageTitle}>{children}</h1>
+);
+
+PageTitle.propTypes = {
+  children: PropTypes.node,
+};
+
+export default PageTitle;
diff --git a/src/components/PageTitle.module.scss b/src/components/PageTitle.module.scss
new file mode 100644
index 000000000..644d72ea1
--- /dev/null
+++ b/src/components/PageTitle.module.scss
@@ -0,0 +1,4 @@
+.pageTitle {
+  font-size: 2.5rem;
+  margin-top: 0;
+}
diff --git a/src/templates/ApiReferenceTemplate.js b/src/templates/ApiReferenceTemplate.js
index f20e74fb4..d5060b42f 100644
--- a/src/templates/ApiReferenceTemplate.js
+++ b/src/templates/ApiReferenceTemplate.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import InlineCodeSnippet from '../components/InlineCodeSnippet';
 import ReactMarkdown from 'react-markdown';
 import Layout from '../components/Layout';
+import PageTitle from '../components/PageTitle';
 import MethodReference from '../components/MethodReference';
 import TypeDefReference from '../components/TypeDefReference';
 import ConstantReference from '../components/ConstantReference';
@@ -28,7 +29,7 @@ const ApiReferenceTemplate = ({ data }) => {
   return (
     <Layout>
       <SEO title={title} description={description} />
-      <h1>{api}</h1>
+      <PageTitle>{api}</PageTitle>
 
       <section
         className={cx(templateStyles.section, templateStyles.description)}
diff --git a/src/templates/ComponentReferenceTemplate.js b/src/templates/ComponentReferenceTemplate.js
index a5ef245f4..63e26d911 100644
--- a/src/templates/ComponentReferenceTemplate.js
+++ b/src/templates/ComponentReferenceTemplate.js
@@ -6,6 +6,7 @@ import InlineCodeSnippet from '../components/InlineCodeSnippet';
 import ReactMarkdown from 'react-markdown';
 import ReferenceExample from '../components/ReferenceExample';
 import Layout from '../components/Layout';
+import PageTitle from '../components/PageTitle';
 import MethodReference from '../components/MethodReference';
 import SEO from '../components/Seo';
 import PropList from '../components/PropList';
@@ -38,7 +39,7 @@ const ComponentReferenceTemplate = ({ data }) => {
   return (
     <Layout>
       <SEO title={title} description={description} />
-      <h1>{component}</h1>
+      <PageTitle>{component}</PageTitle>
       <section
         className={cx(
           templateStyles.section,