From 7d619d4ca33f580d242c3054c3c486984aee465f Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Wed, 3 Jun 2020 11:08:02 -0700
Subject: [PATCH] feat: Add Toast example and handle ToastManager

---
 src/components/ComponentExample.js          | 26 ++++++++++++++++++---
 src/data/sidenav.json                       |  4 ++++
 src/markdown-pages/toast.mdx                |  7 ++++++
 src/templates/ReferenceTemplate.js          |  1 +
 src/templates/ReferenceTemplate.module.scss | 14 +++++++++++
 5 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 src/markdown-pages/toast.mdx

diff --git a/src/components/ComponentExample.js b/src/components/ComponentExample.js
index 20e427536..9729f38c9 100644
--- 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
index c7902e048..756c3659d 100644
--- 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
new file mode 100644
index 000000000..397f76384
--- /dev/null
+++ 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
index 61ae79695..918121cd9 100644
--- 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
index 9fae46347..1e21bd266 100644
--- 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;
+}