From 10df6763e18ea609ed032e59a540dd8f78855ab2 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Wed, 3 Jun 2020 11:42:28 -0700
Subject: [PATCH] feat: Add Spinner component. Allow example to take preview
 style

---
 src/components/ComponentExample.js        | 14 ++++++++++++--
 src/data/sidenav.json                     |  4 ++++
 src/markdown-pages/components/spinner.mdx |  7 +++++++
 src/templates/ReferenceTemplate.js        |  7 +++++++
 4 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 src/markdown-pages/components/spinner.mdx

diff --git a/src/components/ComponentExample.js b/src/components/ComponentExample.js
index 9729f38c9..5c1ab3d70 100644
--- a/src/components/ComponentExample.js
+++ b/src/components/ComponentExample.js
@@ -56,7 +56,12 @@ const EXAMPLE_CSS = `
 }
 `;
 
-const ComponentExample = ({ className, example, useToastManager }) => {
+const ComponentExample = ({
+  className,
+  example,
+  useToastManager,
+  previewStyle,
+}) => {
   const [stylesLoaded, setStylesLoaded] = useState(false);
   const ToastManager = window.__NR1_SDK__.ToastManager;
   let formattedCode;
@@ -96,7 +101,10 @@ const ComponentExample = ({ className, example, useToastManager }) => {
               </div>
             )}
             {stylesLoaded ? (
-              <LivePreview className="nr1-ComponentExample" />
+              <LivePreview
+                className="nr1-ComponentExample"
+                style={previewStyle}
+              />
             ) : (
               'Loading...'
             )}
@@ -116,6 +124,8 @@ ComponentExample.propTypes = {
     sourceCode: PropTypes.string.isRequired,
     options: PropTypes.object.isRequired,
   }).isRequired,
+  useToastManager: PropTypes.bool,
+  previewStyle: PropTypes.object,
 };
 
 export default ComponentExample;
diff --git a/src/data/sidenav.json b/src/data/sidenav.json
index 197e539b7..e446a7656 100644
--- a/src/data/sidenav.json
+++ b/src/data/sidenav.json
@@ -70,6 +70,10 @@
             "displayName": "Icon",
             "url": "/components/icon"
           },
+          {
+            "displayName": "Spinner",
+            "url": "/components/spinner"
+          },
           {
             "displayName": "Toast",
             "url": "/components/toast"
diff --git a/src/markdown-pages/components/spinner.mdx b/src/markdown-pages/components/spinner.mdx
new file mode 100644
index 000000000..88c3877f0
--- /dev/null
+++ b/src/markdown-pages/components/spinner.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/spinner'
+title: 'Spinner'
+description: 'A Spinner component!'
+component: 'Spinner'
+template: 'ReferenceTemplate'
+---
diff --git a/src/templates/ReferenceTemplate.js b/src/templates/ReferenceTemplate.js
index 918121cd9..a7d723661 100644
--- a/src/templates/ReferenceTemplate.js
+++ b/src/templates/ReferenceTemplate.js
@@ -13,6 +13,12 @@ import pages from '../data/sidenav.json';
 
 import styles from './ReferenceTemplate.module.scss';
 
+const previewStyles = {
+  Spinner: {
+    height: '16px',
+  },
+};
+
 const ReferenceTemplate = ({ data }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { mdx } = data;
@@ -51,6 +57,7 @@ const ReferenceTemplate = ({ data }) => {
                         useToastManager={component === 'Toast'}
                         className={styles.componentExample}
                         example={example}
+                        previewStyle={previewStyles[component]}
                       />
                     ))}
                   </div>