From 4397c34a909d837647ba850a44921f225cdabf0e Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Wed, 3 Jun 2020 18:06:39 -0700
Subject: [PATCH] refactor: Move usage into useComponentDoc

---
 src/hooks/useComponentDoc.js       | 1 +
 src/templates/ReferenceTemplate.js | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useComponentDoc.js b/src/hooks/useComponentDoc.js
index 3e39bdfc7..83a688473 100644
--- a/src/hooks/useComponentDoc.js
+++ b/src/hooks/useComponentDoc.js
@@ -25,6 +25,7 @@ const useComponentDoc = (componentName) => {
     return {
       description: componentDocs?.text,
       examples: componentDocs?.tags.examples ?? [],
+      usage: `import { ${componentName} } from 'nr1'`,
       methods: Object.getOwnPropertyNames(component)
         .filter(
           (member) =>
diff --git a/src/templates/ReferenceTemplate.js b/src/templates/ReferenceTemplate.js
index d7f0a2db3..d26327446 100644
--- a/src/templates/ReferenceTemplate.js
+++ b/src/templates/ReferenceTemplate.js
@@ -29,6 +29,7 @@ const ReferenceTemplate = ({ data }) => {
     examples,
     description: componentDescription,
     methods,
+    usage,
   } = useComponentDoc(component);
 
   return (
@@ -48,7 +49,7 @@ const ReferenceTemplate = ({ data }) => {
           </section>
           <section className={styles.section}>
             <h2>Usage</h2>
-            <InlineCodeSnippet language="js">{`import { ${component} } from 'nr1'`}</InlineCodeSnippet>
+            <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
           </section>
           {examples.length > 0 && (
             <section className={styles.section}>