From 71932156e65ba89ebcfe2170dca9d3980b915aaa Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Mon, 15 Jun 2020 20:25:58 -0700
Subject: [PATCH] feat: Use Markdown component for reference templates

---
 src/templates/ApiReferenceTemplate.js       |  4 ++--
 src/templates/ComponentReferenceTemplate.js | 13 +++----------
 src/templates/ReferenceTemplate.module.scss | 10 ----------
 3 files changed, 5 insertions(+), 22 deletions(-)

diff --git a/src/templates/ApiReferenceTemplate.js b/src/templates/ApiReferenceTemplate.js
index b6258c32d..242aeabbb 100644
--- a/src/templates/ApiReferenceTemplate.js
+++ b/src/templates/ApiReferenceTemplate.js
@@ -3,9 +3,9 @@ import cx from 'classnames';
 import { graphql } from 'gatsby';
 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 Markdown from '../components/Markdown';
 import MethodReference from '../components/MethodReference';
 import TypeDefReference from '../components/TypeDefReference';
 import ConstantReference from '../components/ConstantReference';
@@ -39,7 +39,7 @@ const ApiReferenceTemplate = ({ data }) => {
             'intro-text'
           )}
         >
-          <ReactMarkdown source={apiDescription} />
+          <Markdown source={apiDescription} />
         </section>
       )}
 
diff --git a/src/templates/ComponentReferenceTemplate.js b/src/templates/ComponentReferenceTemplate.js
index 2b401671f..5031806a0 100644
--- a/src/templates/ComponentReferenceTemplate.js
+++ b/src/templates/ComponentReferenceTemplate.js
@@ -3,10 +3,10 @@ import cx from 'classnames';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 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 Markdown from '../components/Markdown';
 import MethodReference from '../components/MethodReference';
 import SEO from '../components/Seo';
 import PropList from '../components/PropList';
@@ -23,7 +23,6 @@ const previewStyles = {
 };
 
 const ComponentReferenceTemplate = ({ data }) => {
-  // const [isOpen, setIsOpen] = useState(false);
   const { mdx } = data;
   const { frontmatter } = mdx;
   const { title, description, component } = frontmatter;
@@ -40,14 +39,8 @@ const ComponentReferenceTemplate = ({ data }) => {
     <Layout>
       <SEO title={title} description={description} />
       <PageTitle>{component}</PageTitle>
-      <section
-        className={cx(
-          templateStyles.section,
-          templateStyles.description,
-          'intro-text'
-        )}
-      >
-        <ReactMarkdown source={componentDescription} />
+      <section className={cx(templateStyles.section, 'intro-text')}>
+        <Markdown source={componentDescription} />
       </section>
 
       <section className={templateStyles.section}>
diff --git a/src/templates/ReferenceTemplate.module.scss b/src/templates/ReferenceTemplate.module.scss
index 32003863d..f2cc250d0 100644
--- a/src/templates/ReferenceTemplate.module.scss
+++ b/src/templates/ReferenceTemplate.module.scss
@@ -1,13 +1,3 @@
-.description {
-  ul {
-    padding-top: 0.5rem;
-  }
-
-  li {
-    margin: 0;
-  }
-}
-
 .section:not(:last-child) {
   margin-bottom: 2rem;
 }