feat: Add Toast example and handle ToastManager

newrelic · Jun 3, 2020 · 7d619d4 · 7d619d4
1 parent 797d958
commit 7d619d4
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 3 deletions.
diff --git a/src/components/ComponentExample.js b/src/components/ComponentExample.js
@@ -10,7 +10,7 @@ import { CSS_BUNDLE } from '../utils/sdk';
 const TRAILING_SEMI = /;\s*$/;
 
 const EXAMPLE_CSS = `
-.nr1-Component-Example {
+.nr1-ComponentExample {
   line-height: 1.36;
   font-weight: 400;
   background-color: #fff;
@@ -19,6 +19,20 @@ const EXAMPLE_CSS = `
   font-family: Open Sans,Segoe UI,Tahoma,sans-serif;
 }
 
+.nr1-ComponentExample-ToastManager > div {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  padding-top: 16px;
+  padding-right: 16px;
+  pointer-events: none;
+  z-index: 200;
+  min-height: 9999px;
+}
+
 .nr1-Docs-prettify > * {
   margin-right: 0.5rem;
 }
@@ -42,8 +56,9 @@ const EXAMPLE_CSS = `
 }
 `;
 
-const ComponentExample = ({ className, example }) => {
+const ComponentExample = ({ className, example, useToastManager }) => {
   const [stylesLoaded, setStylesLoaded] = useState(false);
+  const ToastManager = window.__NR1_SDK__.ToastManager;
   let formattedCode;
 
   try {
@@ -75,8 +90,13 @@ const ComponentExample = ({ className, example }) => {
               onLoad={() => setStylesLoaded(true)}
             />
             <style type="text/css">{EXAMPLE_CSS}</style>
+            {useToastManager && (
+              <div className="nr1-ComponentExample-ToastManager">
+                <ToastManager />
+              </div>
+            )}
             {stylesLoaded ? (
-              <LivePreview className="nr1-Component-Example" />
+              <LivePreview className="nr1-ComponentExample" />
             ) : (
               'Loading...'
             )}

diff --git a/src/data/sidenav.json b/src/data/sidenav.json
@@ -69,6 +69,10 @@
           {
             "displayName": "Icon",
             "url": "/components/icon"
+          },
+          {
+            "displayName": "Toast",
+            "url": "/components/toast"
           }
         ]
       }

diff --git a/src/markdown-pages/toast.mdx b/src/markdown-pages/toast.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/toast'
+title: 'Toast'
+description: 'A Toast component!'
+component: 'Toast'
+template: 'ReferenceTemplate'
+---
diff --git a/src/templates/ReferenceTemplate.js b/src/templates/ReferenceTemplate.js
@@ -48,6 +48,7 @@ const ReferenceTemplate = ({ data }) => {
                     {examples.map((example, i) => (
                       <ComponentExample
                         key={i}
+                        useToastManager={component === 'Toast'}
                         className={styles.componentExample}
                         example={example}
                       />

diff --git a/src/templates/ReferenceTemplate.module.scss b/src/templates/ReferenceTemplate.module.scss
@@ -39,3 +39,17 @@
 .section:not(:last-child) {
   margin-bottom: 2rem;
 }
+
+.toastManager > div {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  padding-top: 16px;
+  padding-right: 16px;
+  pointer-events: none;
+  z-index: 200;
+  min-height: 9999px;
+}