feat: Add Spinner component. Allow example to take preview style

newrelic · Jun 3, 2020 · 10df676 · 10df676
1 parent b6a2824
commit 10df676
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>