feat: use PageLayout for ComponentReferenceTemplate

newrelic · Jul 30, 2020 · 027a893 · 027a893
1 parent 9e0c007
commit 027a893
Showing 1 changed file with 58 additions and 54 deletions.
diff --git a/src/templates/ComponentReferenceTemplate.js b/src/templates/ComponentReferenceTemplate.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 
 import { CodeBlock } from '@newrelic/gatsby-theme-newrelic';
 import ReferenceExample from '../components/ReferenceExample';
-import PageTitle from '../components/PageTitle';
+import PageLayout from '../components/PageLayout';
 import Markdown from '../components/Markdown';
 import MethodReference from '../components/MethodReference';
 import SEO from '../components/Seo';
@@ -55,65 +55,69 @@ const ComponentReferenceTemplate = ({ data }) => {
   return (
     <>
       <SEO title={title} description={description} />
-      <PageTitle>{component}</PageTitle>
-      <section className={cx(templateStyles.section, 'intro-text')}>
-        <Markdown source={componentDescription} />
-      </section>
+      <PageLayout type={PageLayout.TYPE.SINGLE_COLUMN}>
+        <PageLayout.Header title={component} />
+        <PageLayout.Content>
+          <section className={cx(templateStyles.section, 'intro-text')}>
+            <Markdown source={componentDescription} />
+          </section>
 
-      <section className={templateStyles.section}>
-        <h2 className={templateStyles.sectionTitle}>Usage</h2>
-        <CodeBlock language="js">{usage}</CodeBlock>
-      </section>
+          <section className={templateStyles.section}>
+            <h2 className={templateStyles.sectionTitle}>Usage</h2>
+            <CodeBlock language="js">{usage}</CodeBlock>
+          </section>
 
-      {examples.length > 0 && (
-        <section className={templateStyles.section}>
-          <div>
-            <h2 className={templateStyles.sectionTitle}>Examples</h2>
-            {examples.map((example, i) => (
-              <ReferenceExample
-                key={i}
-                useToastManager={component === 'Toast'}
-                className={styles.componentExample}
-                example={example}
-                previewStyle={previewStyles[component]}
-              />
-            ))}
-          </div>
-        </section>
-      )}
+          {examples.length > 0 && (
+            <section className={templateStyles.section}>
+              <div>
+                <h2 className={templateStyles.sectionTitle}>Examples</h2>
+                {examples.map((example, i) => (
+                  <ReferenceExample
+                    key={i}
+                    useToastManager={component === 'Toast'}
+                    className={styles.componentExample}
+                    example={example}
+                    previewStyle={previewStyles[component]}
+                  />
+                ))}
+              </div>
+            </section>
+          )}
 
-      {component === 'Icon' && (
-        <section className={templateStyles.section}>
-          <IconGallery />
-        </section>
-      )}
+          {component === 'Icon' && (
+            <section className={templateStyles.section}>
+              <IconGallery />
+            </section>
+          )}
 
-      <section className={templateStyles.section}>
-        <h2 className={templateStyles.sectionTitle}>Props</h2>
-        <PropList propTypes={propTypes} />
-      </section>
+          <section className={templateStyles.section}>
+            <h2 className={templateStyles.sectionTitle}>Props</h2>
+            <PropList propTypes={propTypes} />
+          </section>
 
-      {methods.length > 0 && (
-        <section className={templateStyles.section}>
-          <h2 className={templateStyles.sectionTitle}>Methods</h2>
-          {methods.map((method, i) => (
-            <MethodReference
-              key={i}
-              method={method}
-              className={styles.section}
-            />
-          ))}
-        </section>
-      )}
+          {methods.length > 0 && (
+            <section className={templateStyles.section}>
+              <h2 className={templateStyles.sectionTitle}>Methods</h2>
+              {methods.map((method, i) => (
+                <MethodReference
+                  key={i}
+                  method={method}
+                  className={styles.section}
+                />
+              ))}
+            </section>
+          )}
 
-      {typeDefs.length > 0 && (
-        <section className={templateStyles.section}>
-          <h2 className={templateStyles.sectionTitle}>Type definitions</h2>
-          {typeDefs.map((typeDef, i) => (
-            <TypeDefReference key={i} typeDef={typeDef} />
-          ))}
-        </section>
-      )}
+          {typeDefs.length > 0 && (
+            <section className={templateStyles.section}>
+              <h2 className={templateStyles.sectionTitle}>Type definitions</h2>
+              {typeDefs.map((typeDef, i) => (
+                <TypeDefReference key={i} typeDef={typeDef} />
+              ))}
+            </section>
+          )}
+        </PageLayout.Content>
+      </PageLayout>
     </>
   );
 };