From f35e5b5622377a7b7635121fa532337a079b38e9 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@newrelic.com>
Date: Mon, 23 Aug 2021 17:19:45 -0700
Subject: [PATCH] feat: adding the alert types

---
 .../quickstarts/QuickstartAlerts.js           | 38 +++++++++----------
 src/templates/QuickstartDetails.js            |  1 +
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/components/quickstarts/QuickstartAlerts.js b/src/components/quickstarts/QuickstartAlerts.js
index 46e80c808..b4657bb16 100644
--- a/src/components/quickstarts/QuickstartAlerts.js
+++ b/src/components/quickstarts/QuickstartAlerts.js
@@ -18,25 +18,25 @@ const QuickstartAlerts = ({ quickstart }) => (
       you know when something needs your attention.
     </Intro>
 
-    <dl>
-      {quickstart.alerts.map((alert, index) => (
-        <div
-          key={index}
-          css={css`
-            margin-bottom: 1rem;
-          `}
-        >
-          <dt
-            css={css`
-              font-weight: bold;
-            `}
-          >
-            {alert.name}
-          </dt>
-          {alert.details && <dd>{alert.details}</dd>}
-        </div>
-      ))}
-    </dl>
+    {quickstart.alerts.map((alert, index) => (
+      <div
+        key={index}
+        css={css`
+          margin-bottom: 1rem;
+          padding-bottom: 1rem;
+          border-bottom: 1px solid var(--divider-color);
+        `}
+      >
+        <h3>{alert.name}</h3>
+        {alert.type && (
+          <>
+            <h4>Alert Type</h4>
+            <p>{alert.type}</p>
+          </>
+        )}
+        {alert.details && <p>{alert.details}</p>}
+      </div>
+    ))}
   </>
 );
 
diff --git a/src/templates/QuickstartDetails.js b/src/templates/QuickstartDetails.js
index b57c8cf86..78ae577e4 100644
--- a/src/templates/QuickstartDetails.js
+++ b/src/templates/QuickstartDetails.js
@@ -252,6 +252,7 @@ export const pageQuery = graphql`
         details
         name
         url
+        type
       }
       authors
     }