From 28c97df9d2f354cace3fe451393cc75bce33e9bf Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Thu, 18 Jun 2020 10:39:24 -0700
Subject: [PATCH 01/24] feat: Add a search icon

---
 src/components/FeatherIcon.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js
index dc31050d5..9a3bc5e04 100644
--- a/src/components/FeatherIcon.js
+++ b/src/components/FeatherIcon.js
@@ -42,6 +42,12 @@ const ICONS = {
   github: (
     <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
   ),
+  search: (
+    <>
+      <circle cx="11" cy="11" r="8" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </>
+  ),
 };
 
 FeatherIcon.propTypes = {

From ac158ad697a8d24298199731ac271ecebdd86288 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Thu, 18 Jun 2020 11:33:08 -0700
Subject: [PATCH 02/24] feat: Create a SearchInput component

---
 src/components/SearchInput.js          | 18 ++++++++++++++++++
 src/components/SearchInput.module.scss | 19 +++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 src/components/SearchInput.js
 create mode 100644 src/components/SearchInput.module.scss

diff --git a/src/components/SearchInput.js b/src/components/SearchInput.js
new file mode 100644
index 000000000..bc6dbb4d9
--- /dev/null
+++ b/src/components/SearchInput.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import FeatherIcon from './FeatherIcon';
+import styles from './SearchInput.module.scss';
+
+const SearchInput = ({ className, ...props }) => (
+  <div className={cx(styles.container, className)}>
+    <input {...props} className={styles.input} type="text" />
+    <FeatherIcon name="search" className={styles.icon} />
+  </div>
+);
+
+SearchInput.propTypes = {
+  className: PropTypes.string,
+};
+
+export default SearchInput;
diff --git a/src/components/SearchInput.module.scss b/src/components/SearchInput.module.scss
new file mode 100644
index 000000000..bf48fcaef
--- /dev/null
+++ b/src/components/SearchInput.module.scss
@@ -0,0 +1,19 @@
+.container {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  position: relative;
+}
+
+.icon {
+  position: absolute;
+  right: 0.5rem;
+  stroke: var(--color-neutrals-700);
+}
+
+.input {
+  width: 100%;
+  font-size: 0.875rem;
+  padding: 0.5rem;
+  padding-right: calc(1rem + 1em);
+}

From ff4faea6dfbb914d87bf9153805a379230e73094 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Thu, 18 Jun 2020 11:38:35 -0700
Subject: [PATCH 03/24] feat: Add the search input to the sidebar

---
 src/components/Sidebar.js          | 29 ++++++++++++++++++++---------
 src/components/Sidebar.module.scss |  4 ++++
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
index b7c5205dd..524b08a21 100644
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@@ -1,19 +1,30 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import cx from 'classnames';
 import Logo from './Logo';
 import Navigation from './Navigation';
+import SearchInput from './SearchInput';
 import styles from './Sidebar.module.scss';
 
-const Sidebar = ({ className }) => (
-  <aside className={cx(styles.sidebar, className)}>
-    <Link to="/">
-      <Logo className={styles.logo} />
-    </Link>
-    <Navigation className={styles.nav} />
-  </aside>
-);
+const Sidebar = ({ className }) => {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  return (
+    <aside className={cx(styles.sidebar, className)}>
+      <Link to="/">
+        <Logo className={styles.logo} />
+      </Link>
+      <SearchInput
+        className={styles.searchInput}
+        placeholder="Search developer docs"
+        onChange={(e) => setSearchTerm(e.target.value)}
+        value={searchTerm}
+      />
+      <Navigation className={styles.nav} searchTerm={searchTerm} />
+    </aside>
+  );
+};
 
 Sidebar.propTypes = {
   className: PropTypes.string,
diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
index f007215b5..c5a7a93e9 100644
--- a/src/components/Sidebar.module.scss
+++ b/src/components/Sidebar.module.scss
@@ -19,3 +19,7 @@
 .nav {
   margin-top: 1rem;
 }
+
+.searchInput {
+  margin: 1rem 0;
+}

From 17671e4751db01a0b976ce9dc495bde5a5300544 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Sun, 21 Jun 2020 21:27:05 -0400
Subject: [PATCH 04/24] chore: refactor

---
 src/components/Navigation.js          | 49 +++++++++++++++++++++++----
 src/components/Navigation.module.scss | 14 ++++++++
 src/utils/matchSearchString.js        |  5 +++
 3 files changed, 62 insertions(+), 6 deletions(-)
 create mode 100644 src/utils/matchSearchString.js

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index d74fe789a..cdd2a1395 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -5,11 +5,12 @@ import cx from 'classnames';
 import { BreadcrumbContext } from './BreadcrumbContext';
 import FeatherIcon from './FeatherIcon';
 import pages from '../data/sidenav.json';
+import matchSearchString from '../utils/matchSearchString';
 
 import styles from './Navigation.module.scss';
 
 // recursively create navigation
-const renderNav = (pages, depthLevel = 0) => {
+const renderNav = (pages, searches, depthLevel = 0) => {
   const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
 
   const groupedPages = pages.reduce((groups, page) => {
@@ -28,15 +29,29 @@ const renderNav = (pages, depthLevel = 0) => {
       )}
       {pages.map((page) => {
         const [isExpanded, setIsExpanded] = useState(
-          crumbs.length === depthLevel || crumbs.includes(page.displayName)
+          searches !== undefined ||
+            crumbs.includes(page.displayName) ||
+            crumbs.length === depthLevel
         );
+
         const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
 
         return (
           <li
             key={page.displayName}
             data-depth={depthLevel}
-            className={cx({ [styles.isCurrentPage]: isCurrentPage })}
+            className={cx(
+              { [styles.isCurrentPage]: isCurrentPage },
+              {
+                [styles.isNotSearch]:
+                  searches && !searches.includes(page.displayName),
+              },
+              {
+                [styles.isSearch]:
+                  searches && searches.includes(page.displayName),
+              },
+              { [styles.isBeingSearched]: searches }
+            )}
           >
             {page.url ? (
               <Link className={styles.navLink} to={page.url}>
@@ -65,7 +80,7 @@ const renderNav = (pages, depthLevel = 0) => {
                   [styles.isExpanded]: isExpanded,
                 })}
               >
-                {renderNav(page.children, depthLevel + 1)}
+                {renderNav(page.children, searches, depthLevel + 1)}
               </ul>
             )}
           </li>
@@ -75,20 +90,42 @@ const renderNav = (pages, depthLevel = 0) => {
   ));
 };
 
-const Navigation = ({ className }) => {
+const searchPages = (pages, searchTerm, parent = []) => {
+  return [
+    ...new Set(
+      pages.flatMap((page) => {
+        if (page.children) {
+          return searchPages(page.children, searchTerm, [
+            ...parent,
+            page.displayName,
+          ]);
+        } else if (matchSearchString(page.displayName, searchTerm)) {
+          return [...parent, page.displayName];
+        } else if (parent.some((el) => matchSearchString(el, searchTerm))) {
+          return [...parent];
+        }
+      })
+    ),
+  ];
+};
+
+const Navigation = ({ className, searchTerm }) => {
+  const searches =
+    searchTerm !== '' ? searchPages(pages, searchTerm) : undefined;
   return (
     <nav
       className={cx(styles.container, className)}
       role="navigation"
       aria-label="Navigation"
     >
-      <ul className={styles.listNav}>{renderNav(pages)}</ul>
+      <ul className={styles.listNav}>{renderNav(pages, searches)}</ul>
     </nav>
   );
 };
 
 Navigation.propTypes = {
   className: PropTypes.string,
+  searchTerm: PropTypes.string,
 };
 
 export default Navigation;
diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss
index 9bb71c303..f747b3129 100644
--- a/src/components/Navigation.module.scss
+++ b/src/components/Navigation.module.scss
@@ -64,3 +64,17 @@ button.navLink {
 .isCurrentPage {
   font-weight: bold;
 }
+
+.isNotSearch {
+  display: none;
+}
+
+.isSearch {
+  display: block;
+}
+
+.isBeingSearched {
+  ul {
+    display: block;
+  }
+}
diff --git a/src/utils/matchSearchString.js b/src/utils/matchSearchString.js
new file mode 100644
index 000000000..0b434680c
--- /dev/null
+++ b/src/utils/matchSearchString.js
@@ -0,0 +1,5 @@
+const matchSearchString = (str, searchTerm) => {
+  return str.toLowerCase().includes(searchTerm.toLowerCase());
+};
+
+export default matchSearchString;

From 3a31d3005923da5480eb31b63f7ab6e49f95ed5a Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Sun, 21 Jun 2020 21:33:41 -0400
Subject: [PATCH 05/24] feat: working search box

---
 .eslintrc.js                                  |  1 +
 package-lock.json                             | 16 +++-
 package.json                                  |  2 +
 src/components/GuideTile.module.scss          |  5 +-
 src/components/IconGallery.js                 |  3 +-
 src/components/Layout.js                      |  1 +
 src/components/Layout.module.scss             |  1 -
 src/components/Navigation.js                  | 25 +++++-
 src/components/Navigation.module.scss         | 14 ++++
 src/components/Step.module.scss               |  2 +-
 src/components/Video.module.scss              |  1 -
 src/components/styles.scss                    | 46 +++-------
 src/data/sidenav.json                         | 27 +++---
 src/hooks/useApiDoc.js                        |  2 +-
 src/hooks/useComponentDoc.js                  |  2 +-
 .../workflow-automation.mdx                   | 84 +++++++++++++++++++
 src/markdown-pages/query-and-store-data.mdx   | 26 ++----
 src/markdown-pages/query-data-nrql.mdx        | 20 ++---
 .../get-started-nerdgraph-api-explorer.mdx    | 14 ++--
 src/markdown-pages/reference/intro-to-sdk.mdx | 78 ++++++++---------
 .../reference/nerdpack-file-structure.mdx     | 76 ++++++++---------
 src/pages/explore-data.js                     | 42 ++++++----
 src/pages/index.js                            | 38 +++++++--
 src/pages/index.module.scss                   |  5 +-
 src/templates/GuideTemplate.module.scss       |  8 ++
 25 files changed, 336 insertions(+), 203 deletions(-)
 create mode 100644 src/markdown-pages/automate-workflows/workflow-automation.mdx

diff --git a/.eslintrc.js b/.eslintrc.js
index 849758db1..d8c2b04e1 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,6 +4,7 @@ module.exports = {
     'plugin:@newrelic/eslint-plugin-newrelic/react',
     'plugin:@newrelic/eslint-plugin-newrelic/prettier',
     'plugin:jsx-a11y/recommended',
+    'plugin:react-hooks/recommended',
   ],
   // https://github.com/yannickcr/eslint-plugin-react#configuration
   plugins: ['react', 'jsx-a11y'],
diff --git a/package-lock.json b/package-lock.json
index e88315cb4..2bab40225 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8854,9 +8854,9 @@
       }
     },
     "eslint-plugin-react-hooks": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz",
-      "integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA=="
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.4.tgz",
+      "integrity": "sha512-equAdEIsUETLFNCmmCkiCGq6rkSK5MoJhXFPFYeUebcjKgBmWWcgVOqZyQC8Bv1BwVCnTq9tBxgJFgAJTWoJtA=="
     },
     "eslint-scope": {
       "version": "5.0.0",
@@ -10750,6 +10750,11 @@
             }
           }
         },
+        "eslint-plugin-react-hooks": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz",
+          "integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA=="
+        },
         "gatsby-cli": {
           "version": "2.11.11",
           "resolved": "https://registry.npmjs.org/gatsby-cli/-/gatsby-cli-2.11.11.tgz",
@@ -19475,6 +19480,11 @@
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
       "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg=="
     },
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
     "npm-conf": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",
diff --git a/package.json b/package.json
index 968c3c9f8..2ce707688 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@mdx-js/react": "^1.6.4",
     "classnames": "^2.2.6",
     "date-fns": "^2.14.0",
+    "eslint-plugin-react-hooks": "^4.0.4",
     "gatsby": "^2.20.25",
     "gatsby-image": "^2.3.4",
     "gatsby-plugin-google-tagmanager": "^2.3.3",
@@ -23,6 +24,7 @@
     "gatsby-transformer-remark": "^2.7.3",
     "gatsby-transformer-sharp": "^2.4.6",
     "node-sass": "^4.13.1",
+    "normalize.css": "^8.0.1",
     "prism-react-renderer": "^1.1.1",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
diff --git a/src/components/GuideTile.module.scss b/src/components/GuideTile.module.scss
index 5a6b8b2b4..7fb015f33 100644
--- a/src/components/GuideTile.module.scss
+++ b/src/components/GuideTile.module.scss
@@ -5,7 +5,7 @@
     'main main main';
   background-color: white;
   box-shadow: var(--boxshadow);
-  padding: 1.5rem;
+  padding: 0.5rem;
 
   button:hover {
     transform: translateY(-1px);
@@ -40,5 +40,6 @@
   font-size: 0.9rem;
   margin-bottom: 1.5rem;
   max-width: calc(100% - 4rem);
-  color: var(--color-neutrals-500);
+  color: var(--color-neutrals-600);
+  flex: 1;
 }
diff --git a/src/components/IconGallery.js b/src/components/IconGallery.js
index 82615b552..0f4197ea7 100644
--- a/src/components/IconGallery.js
+++ b/src/components/IconGallery.js
@@ -5,12 +5,13 @@ import IconReference from './IconReference';
 const IconGallery = () => {
   if (typeof window === 'undefined') global.window = {};
 
+  const [search, setSearch] = useState('');
+
   // Get the Icon component when available
   const { Icon } = window.__NR1_SDK__?.default ?? {};
   if (!Icon) return null;
 
   // Basic search / filtering
-  const [search, setSearch] = useState('');
   const types = Object.keys(Icon.TYPE);
   const filterByString = (input) => (str) =>
     str.toLowerCase().includes(input.toLowerCase());
diff --git a/src/components/Layout.js b/src/components/Layout.js
index 7cfb1fcbe..baa03e316 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -7,6 +7,7 @@ import GlobalHeader from './GlobalHeader';
 import MobileHeader from './MobileHeader';
 import Sidebar from './Sidebar';
 import styles from './Layout.module.scss';
+import 'normalize.css';
 import './styles.scss';
 
 const Layout = ({ children }) => {
diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
index c4fe3aabe..cb72efcdc 100644
--- a/src/components/Layout.module.scss
+++ b/src/components/Layout.module.scss
@@ -5,7 +5,6 @@
 }
 
 .main {
-  min-height: 100%;
   display: grid;
   grid-template-columns: 300px minmax(0, 1fr);
   width: 100%;
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index cdd2a1395..69f466fcd 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -9,9 +9,13 @@ import matchSearchString from '../utils/matchSearchString';
 
 import styles from './Navigation.module.scss';
 
+// TODO: Add this implementation
+const filterPages = (pages, _searchTerm) => pages;
+
 // recursively create navigation
 const renderNav = (pages, searches, depthLevel = 0) => {
   const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
+  const isHomePage = crumbs.length === 0 && depthLevel === 0;
 
   const groupedPages = pages.reduce((groups, page) => {
     const { group = '' } = page;
@@ -29,9 +33,7 @@ const renderNav = (pages, searches, depthLevel = 0) => {
       )}
       {pages.map((page) => {
         const [isExpanded, setIsExpanded] = useState(
-          searches !== undefined ||
-            crumbs.includes(page.displayName) ||
-            crumbs.length === depthLevel
+          isHomePage || crumbs.includes(page.displayName)
         );
 
         const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
@@ -54,7 +56,13 @@ const renderNav = (pages, searches, depthLevel = 0) => {
             )}
           >
             {page.url ? (
-              <Link className={styles.navLink} to={page.url}>
+              <Link
+                className={cx(
+                  { [styles.isCurrentPage]: isCurrentPage },
+                  styles.navLink
+                )}
+                to={page.url}
+              >
                 {page.displayName}
                 {isCurrentPage && (
                   <FeatherIcon
@@ -71,6 +79,15 @@ const renderNav = (pages, searches, depthLevel = 0) => {
                 onKeyPress={() => setIsExpanded(!isExpanded)}
                 tabIndex={0}
               >
+                {depthLevel > 0 && (
+                  <FeatherIcon
+                    className={cx(
+                      { [styles.isExpanded]: isExpanded },
+                      styles.nestedChevron
+                    )}
+                    name="chevron-right"
+                  />
+                )}
                 {page.displayName}
               </button>
             )}
diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss
index f747b3129..6a3b3cbf6 100644
--- a/src/components/Navigation.module.scss
+++ b/src/components/Navigation.module.scss
@@ -27,6 +27,11 @@
   align-items: center;
   justify-content: space-between;
   text-decoration: none;
+  transition: 0.1s;
+
+  &:not(.isCurrentPage):hover {
+    color: var(--color-neutrals-600);
+  }
 
   [data-depth='0'] > & {
     font-weight: bold;
@@ -50,6 +55,15 @@ button.navLink {
   stroke-width: 4;
 }
 
+.nestedChevron {
+  margin-right: 0.5rem;
+  stroke-width: 4;
+  transition: 0.2s;
+  &.isExpanded {
+    transform: rotate(90deg);
+  }
+}
+
 .groupName {
   color: var(--color-neutrals-600);
   font-weight: bold;
diff --git a/src/components/Step.module.scss b/src/components/Step.module.scss
index 1591bc1d6..4c6d999f8 100644
--- a/src/components/Step.module.scss
+++ b/src/components/Step.module.scss
@@ -19,7 +19,7 @@
   h6:first-child {
     color: var(--color-neutrals-900);
     font-weight: bold;
-    margin-top: 0.5rem;
+    margin-top: 0;
     margin-bottom: 1rem;
     font-size: 1rem;
   }
diff --git a/src/components/Video.module.scss b/src/components/Video.module.scss
index c522733b8..e6cd9b9f4 100644
--- a/src/components/Video.module.scss
+++ b/src/components/Video.module.scss
@@ -1,6 +1,5 @@
 .video {
   max-width: 560px;
-  margin: 1rem 0;
 
   iframe {
     width: 100%;
diff --git a/src/components/styles.scss b/src/components/styles.scss
index 1907c099b..7a07ed788 100644
--- a/src/components/styles.scss
+++ b/src/components/styles.scss
@@ -57,12 +57,12 @@
   --color-teal-800: #003539;
   --color-teal-900: #002123;
 
-  --boxshadow: 0px 2.76726px 2.21381px rgba(0, 85, 90, 0.0168687),
-    0px 6.6501px 5.32008px rgba(0, 85, 90, 0.0242336),
-    0px 12.5216px 10.0172px rgba(0, 85, 90, 0.03),
-    0px 22.3363px 17.869px rgba(0, 85, 90, 0.0357664),
-    0px 41.7776px 33.4221px rgba(0, 85, 90, 0.0431313),
-    0px 100px 80px rgba(0, 85, 90, 0.06);
+  --boxshadow: 0 0.24905px 0.55345px rgba(0, 0, 0, 0.00562291),
+    0 0.59851px 1.33002px rgba(0, 0, 0, 0.00807786),
+    0 1.12694px 2.50431px rgba(0, 0, 0, 0.01),
+    0 2.01027px 4.46726px rgba(0, 0, 0, 0.0119221),
+    0 3.75998px 8.35552px rgba(0, 0, 0, 0.0143771),
+    0 9px 20px rgba(0, 0, 0, 0.02);
 
   --color-tile-background: rgb(215, 210, 233);
   --primary-font-family: 'open sans', sans-serif;
@@ -74,19 +74,11 @@
   --height-mobile-nav-bar: 60px;
 }
 
-/*-- Reset --*/
-// https://github.com/necolas/normalize.css
-html {
-  line-height: 1.15;
-  -webkit-text-size-adjust: 100%;
-}
-
 * {
   box-sizing: border-box;
 }
 
 body {
-  margin: 0;
   font-size: 16px;
   font-family: var(--primary-font-family);
   color: var(--color-neutrals-700);
@@ -94,20 +86,12 @@ body {
   line-height: 1.5;
 }
 
-main {
-  display: block;
-}
-
 a {
   cursor: pointer;
   text-decoration: none;
   color: var(--color-brand-800);
 }
 
-img {
-  border-style: none;
-}
-
 p {
   margin-top: 0;
   margin-bottom: 1em;
@@ -126,17 +110,6 @@ h6 {
   font-family: var(--primary-font-family);
 }
 
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-}
-
 input,
 select {
   border: 1px solid var(--color-neutrals-400);
@@ -149,7 +122,6 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
-  -webkit-appearance: button;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -177,6 +149,10 @@ code {
   font-family: var(--code-font);
 }
 
+pre {
+  margin: 0;
+}
+
 :global {
   .intro-text {
     color: var(--color-neutrals-600);
@@ -186,6 +162,6 @@ code {
 
   .site-container {
     max-width: 1460px;
-    margin: auto;
+    margin: 0 auto;
   }
 }
diff --git a/src/data/sidenav.json b/src/data/sidenav.json
index 1e5ff10d3..388831b20 100644
--- a/src/data/sidenav.json
+++ b/src/data/sidenav.json
@@ -8,15 +8,15 @@
         "url": "/"
       },
       {
-        "displayName": "OpenTelemetry Exporter",
+        "displayName": "OpenTelemetry exporter",
         "url": "/"
       },
       {
-        "displayName": "Extend New Relic Agents",
+        "displayName": "Extend New Relic agents",
         "url": "/"
       },
       {
-        "displayName": "Create Flex Integration",
+        "displayName": "Create a Flex integration",
         "url": "/"
       }
     ]
@@ -26,41 +26,40 @@
     "url": "/explore-data",
     "children": [
       {
-        "displayName": "Write NRQL Queries",
+        "displayName": "Write NRQL queries",
         "url": "/"
       },
       {
-        "displayName": "Build a NerdGraph Query",
+        "displayName": "Build a NerdGraph query",
         "url": "/"
       }
     ]
   },
   {
     "displayName": "Build apps",
-    "url": "/build-apps",
     "children": [
       {
-        "displayName": "Map Pageviews by Region",
+        "displayName": "Map pageviews by region",
         "url": "/build-apps/map-pageviews-by-region"
       },
       {
-        "displayName": "Optimize Cloud Usage",
+        "displayName": "Optimize cloud usage",
         "url": "/build-apps/optimize-cloud-usage"
       },
       {
-        "displayName": "Add a Time Picker",
+        "displayName": "Add a time picker",
         "url": "/build-apps/add-time-picker-guide"
       },
       {
-        "displayName": "Use NerdGraph in an App",
+        "displayName": "Use NerdGraph in an app",
         "url": "/build-apps/use-nerdgraph-in-app"
       },
       {
-        "displayName": "Build a Table",
+        "displayName": "Build a table",
         "url": "/build-apps/build-a-table"
       },
       {
-        "displayName": "Persistent Storage for Apps",
+        "displayName": "Persistent storage for apps",
         "url": "/build-apps/persistent-storage-for-apps"
       }
     ]
@@ -70,11 +69,11 @@
     "url": "/automate-workflows",
     "children": [
       {
-        "displayName": "Monitor, Alert, and Analyze",
+        "displayName": "Monitor, alert, and analyze",
         "url": "/automate-workflows/"
       },
       {
-        "displayName": "OpenTelemetry Exporter",
+        "displayName": "OpenTelemetry exporter",
         "url": "/automate-workflows/"
       }
     ]
diff --git a/src/hooks/useApiDoc.js b/src/hooks/useApiDoc.js
index 74f9b8ef1..634e3a24b 100644
--- a/src/hooks/useApiDoc.js
+++ b/src/hooks/useApiDoc.js
@@ -86,7 +86,7 @@ const useApiDoc = (name) => {
           };
         }),
     };
-  }, [name, window.__NR1_SDK__]);
+  }, [name]);
 };
 
 export default useApiDoc;
diff --git a/src/hooks/useComponentDoc.js b/src/hooks/useComponentDoc.js
index 926d964bf..5f53a6aa9 100644
--- a/src/hooks/useComponentDoc.js
+++ b/src/hooks/useComponentDoc.js
@@ -80,7 +80,7 @@ const useComponentDoc = (componentName) => {
         tagsFromComponentProperties.concat(tagsFromPropTypes)
       ),
     };
-  }, [componentName, window?.__NR1_SDK__]);
+  }, [componentName]);
 };
 
 export default useComponentDoc;
diff --git a/src/markdown-pages/automate-workflows/workflow-automation.mdx b/src/markdown-pages/automate-workflows/workflow-automation.mdx
new file mode 100644
index 000000000..6dfbf619a
--- /dev/null
+++ b/src/markdown-pages/automate-workflows/workflow-automation.mdx
@@ -0,0 +1,84 @@
+---
+path: '/automate-workflows/workflow-automation'
+title: 'Orchestrate observability workflows'
+description: 'Tools to automate your observability ecosystem'
+template: 'GuideTemplate'
+---
+
+## Define and automate observability
+
+As the maintainer of an increasingly complex software stack, you need to
+pinpoint problems without filtering through all the noise. You need to automate
+observability the way you automate infrastructure management, by embedding your
+New Relic configuration in code. The [Terraform
+Provider](https://www.terraform.io/docs/providers/newrelic/index.html) enables
+observability as code -- the ability to monitor, alert, and analyze your
+ecosystem in one place, in real time. Built on the New Relic Client, the
+Terraform Provider provides a full implementation of APIs that enable you to
+create alert policies and conditions, Synthetic monitors and Synthetics alert
+conditions, notification policies and more.
+
+The [Terraform Provider getting started
+guide](https://www.terraform.io/docs/providers/newrelic/guides/getting_started.html)
+steps you through some fundamental configuration. The [New Relic APM Terraform
+module](https://registry.terraform.io/modules/newrelic/apm/newrelic/0.0.4)
+provides a monitoring strategy for application resources reporting into New
+Relic.
+
+<Video type='youtube' id='UwJ-7BLylJo' />
+
+## Build event-based workflows
+
+When you’re constantly releasing features, you need to easily track changes in
+your environment and monitor your systems. The [New Relic
+CLI](https://github.com/newrelic/newrelic-cli) enables the integration of New
+Relic into your existing workflows, from fetching data from your laptop while
+troubleshooting an issue, to adding New Relic into your CI/CD pipeline. The CLI
+is a supported library that consolidates New Relic tools, enabling you to
+perform these tasks (and more):
+
+* Search for entities across all your New Relic accounts
+* Manage tags across all of your entities
+* Record APM application deployments within New Relic
+
+See the [New Relic CLI getting started
+guide](https://github.com/newrelic/newrelic-cli/blob/master/docs/GETTING_STARTED.md)
+for steps to get set up, tag an application, tag all applications, or create a
+deployment marker.
+
+<Video type='youtube' id='g00AeKlECZA'/>
+
+## Harness multiple APIs with a single client
+
+The [New Relic Client](https://github.com/newrelic/newrelic-client-go) provides
+the building blocks for many tools in the toolkit, enabling quick access to a
+handful of New Relic APIs. The Client means you don’t have to toil over things
+like serialization and authentication. Use it to record your application
+deployments without having to learn how the API works. Or to automate changing
+tags within New Relic when service ownership changes. And you can
+programmatically manage your assets via APIs and auto-instrumentation within
+your own custom applications.
+
+The client provides full support for these New Relic API endpoints:
+
+* [NerdGraph API](https://docs.newrelic.com/docs/apis/nerdgraph/get-started/introduction-new-relic-nerdgraph), New Relic’s GraphQL API
+* [REST v2 API](https://docs.newrelic.com/docs/apis/rest-api-v2/getting-started/introduction-new-relic-rest-api-v2)
+* [Infrastructure API](https://docs.newrelic.com/docs/infrastructure/new-relic-infrastructure/infrastructure-alert-conditions/rest-api-calls-new-relic-infrastructure-alerts)
+* [Synthetics API](https://docs.newrelic.com/docs/apis/synthetics-rest-api/monitor-examples/manage-synthetics-monitors-rest-api)
+
+## Provision New Relic resources with AWS CloudFormation
+
+If you’re a developer using AWS CloudFormation, the [New Relic CloudFormation
+integration](https://github.com/newrelic/cloudformation-partner-integration)
+enables you to provision a subset of New Relic resources. You can build on the
+New Relic Client, and configure basic NRQL alerts.
+
+For more information, see our [AWS CloudFormation
+integration](https://docs.newrelic.com/docs/integrations/amazon-integrations/aws-integrations-list/aws-cloudformation-integration)
+documentation.
+
+## For more help
+
+* [Developer Toolkit on GitHub](https://newrelic.github.io/developer-toolkit/)
+* [Discuss on the Explorer’s Hub](https://discuss.newrelic.com/c/build-on-new-relic/developer-toolkit)
+* [Toolkit roadmap](https://newrelic.github.io/developer-toolkit/roadmap/)
diff --git a/src/markdown-pages/query-and-store-data.mdx b/src/markdown-pages/query-and-store-data.mdx
index 1133c6edc..a482138ab 100644
--- a/src/markdown-pages/query-and-store-data.mdx
+++ b/src/markdown-pages/query-and-store-data.mdx
@@ -1,22 +1,22 @@
 ---
-path: '/references/query-and-store-data.mdx'
+path: '/references/query-and-store-data'
 duration: '10 min'
 title: 'New Relic One apps: Data querying and mutations'
 template: 'GuideTemplate'
-description: 'Reference guide for SDK query components via NerdGraph '
+description: 'Reference guide for SDK query components via NerdGraph'
 ---
 
 <Intro>
 
-To help you build a [New Relic One application](), we provide you with the [New Relic One SDK](). On this page, you’ll learn how to use SDK query components, which allow you to make queries and mutations via [NerdGraph](https://docs.newrelic.com/docs/apis/nerdgraph/get-started/introduction-new-relic-nerdgraph) (our GraphQL endpoint). 
+To help you build a [New Relic One application](), we provide you with the [New Relic One SDK](). On this page, you’ll learn how to use SDK query components, which allow you to make queries and mutations via [NerdGraph](https://docs.newrelic.com/docs/apis/nerdgraph/get-started/introduction-new-relic-nerdgraph) (our GraphQL endpoint).
 
 Query-related React components can be identified by the `Query` suffix. Mutation-related components can be identified by the `Mutation` prefix.
 
 </Intro>
 
-## Structure 
+## Structure
 
-Our data components are based on [React Apollo](https://www.apollographql.com/docs/react/). The most basic component is `NerdGraphQuery`, which accepts any GraphQL (or GraphQL AST generated by [the `grapqhl-tag` library](https://github.com/apollographql/graphql-tag) as the query parameter, and a set of query variables passed as `variables`.
+Our data components are based on [React Apollo](https://www.apollographql.com/docs/react/). The most basic component is `NerdGraphQuery`, which accepts any GraphQL (or GraphQL AST generated by the [`graphql-tag` library](https://github.com/apollographql/graphql-tag) as the query parameter, and a set of query variables passed as `variables`.
 
 Over this query, we have created an additional set of queries, which can be divided into four groups:
 
@@ -24,9 +24,7 @@ Over this query, we have created an additional set of queries, which can be divi
 - Entities queries: Because [New Relic One is entity-centric](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts), we use queries to make access to your entities easier. You can count, search, list, query, and favorite them. Components in this category: `EntityCountQuery`, `EntitySearchQuery`, `EntitiesByDomainTypeQuery`, `EntitiesByGuidsQuery`, `EntityByGuidQuery`, `EntityByNameQuery`.
 - Storage queries: New Relic One provides a simple storage mechanism that we call [NerdStorage](). This can be used by Nerdpack creators to store application configuration setting data, user-specific data, and other small pieces of data. Components in this category: `UserStorageQuery`, `AccountStorageQuery`, `EntityStorageQuery`, `UserStorageMutation`, `AccountStorageMutation`, and `EntityStorageMutation`. For details, see [NerdStorage]().
 
-NRQL query: To be able to query your New Relic data via [NRQL](https://docs.newrelic.com/docs/query-data/nrql-new-relic-query-language/getting-started/introduction-nrql) (New Relic query language), we provide a `NrqlQuery` component. This component can return data in different formats, so that you can use it for charting and not only for querying.
-
-<br/>
+NRQL query: To be able to query your New Relic data via [NRQL](https://docs.newrelic.com/docs/query-data/nrql-new-relic-query-language/getting-started/introduction-nrql) (New Relic Query Language), we provide a `NrqlQuery` component. This component can return data in different formats, so that you can use it for charting and not only for querying.
 
 ### Query Components
 
@@ -37,17 +35,13 @@ All query components accept as a children prop a function where the different st
 - `error`: Contains an `Error` instance when the query fails. Set to `undefined` when data is loading or the fetch was successful.
 - `fetchMore`: Callback function that can be called when the query is being loaded in chunks. The function will only be present when it’s feasible to do so, more data is available, and no `fetchMore` has already been triggered. Data is loaded in batches of 200 by default. Other components provided by the platform (like the `Dropdown` or the `List`) are capable of accepting `fetchMore`, meaning you can combine them easily.
 
-<br/>
-
 ### Mutation Components
 
  Mutation components also accept, like the query ones, a children as a function. The mutation can be pre-configured at the component level, and a function will be passed back that you can use in your component.
- 
- This is the standard React Apollo approach for performing mutations, but you might find it easier to use our static `mutation` method added to the component. More on this topic below.
 
- <br/>
+ This is the standard React Apollo approach for performing mutations, but you might find it easier to use our static `mutation` method added to the component. More on this topic below.
 
-### Static Methods 
+### Static Methods
 
 All of the described components also expose a static method so that they can be used imperatively rather than declaratively. All `Query` components have a static `Query` method, and all `Mutation` components have a `mutation` method. These static methods accept the same props as their query component, but passed as an object. For example:
 
@@ -90,8 +84,6 @@ async function getAccountList() {
 
 Similarly, a mutation can happen either way; either declaratively or imperatively.
 
-<br/>
-
 ## NrqlQuery
 
 `NrqlQuery` deserves additional explanation, because there are multiple formats in which you can return data from it. To provide maximum functionality, all three are exposed through a `formatType` property. You can find its different values under `NrqlQuery.formatType`:
@@ -100,4 +92,4 @@ Similarly, a mutation can happen either way; either declaratively or imperativel
 - `RAW`: The format exposed by default in Insights and dashboards when being plotted as JSON. This format is useful if you have a pre-existing script in this format that you're willing to migrate to or incorporate with.
 - `CHART`: The format used by the charting engine that we also expose. You can find a more detailed explanation of how to manipulate this format in the [guide to chart components](), and some examples.
 
-If you are willing to push data, we currently do not expose `NrqlMutation`. To do that, see the [Event API]() for how to add custom events.
\ No newline at end of file
+If you are willing to push data, we currently do not expose `NrqlMutation`. To do that, see the [Event API]() for how to add custom events.
diff --git a/src/markdown-pages/query-data-nrql.mdx b/src/markdown-pages/query-data-nrql.mdx
index 1b8a77d6b..2822e7f71 100644
--- a/src/markdown-pages/query-data-nrql.mdx
+++ b/src/markdown-pages/query-data-nrql.mdx
@@ -1,7 +1,7 @@
 ---
 path: '/query-data/nrql'
 duration: '10 min'
-title: 'Query Data With NRQL'
+title: 'Query data with NRQL'
 template: 'GuideTemplate'
 description: 'Query default event data as well as custom events and attributes with our powerful, SQL-like query language. Start querying now.'
 ---
@@ -21,7 +21,7 @@ NRQL syntax is comparable to ANSI SQL.
 [Learn mroe about NRQL syntax](https://docs.newrelic.com/docs/insights/nrql-new-relic-query-language/using-nrql/introduction-nrql)
 
 ```sql copy=false
-SELECT function(attribute) [AS 'label'][, ...] 
+SELECT function(attribute) [AS 'label'][, ...]
   FROM event
   [WHERE attribute [comparison] [AND|OR ...]][AS 'label'][, ...]
   [FACET attribute | function(attribute)]
@@ -56,12 +56,12 @@ NRQL queries can also do extremely powerful calculations before the data is pres
 
 ```sql
 -- See how many users visit, signup, browse and purchase from your site as a funnel
-SELECT funnel(session, 
+SELECT funnel(session,
   WHERE pageUrl='http://www.demotron.com/' AS 'Visited Homepage',
-  WHERE pageUrl='http://www.demotron.com/signup' AS 'Signed Up', 
-  WHERE pageUrl='http://www.demotron.com/browse' AS 'Browsed Items', 
-  WHERE pageUrl='http://www.demotron.com/checkout' AS 'Made Purchase') 
-  FROM PageView 
+  WHERE pageUrl='http://www.demotron.com/signup' AS 'Signed Up',
+  WHERE pageUrl='http://www.demotron.com/browse' AS 'Browsed Items',
+  WHERE pageUrl='http://www.demotron.com/checkout' AS 'Made Purchase')
+  FROM PageView
   SINCE 12 hours ago
 ```
 
@@ -69,7 +69,7 @@ SELECT funnel(session,
 
 <Step>
 
-Using NRQL, you can customize your New Relic experience by crafting diverse dashboards in New Relic Insights that show your data from multiple angles. These dashboards can be shared with technical and non-technical stakeholders alike.
+Using NRQL, you can customize your New Relic experience by crafting diverse dashboards in New Relic One that show your data from multiple angles. These dashboards can be shared with technical and non-technical stakeholders alike.
 
 ![Dashboard created with NRQL](../images/nr1-dashboard.png)
 
@@ -83,7 +83,7 @@ Using NRQL, you can customize your New Relic experience by crafting diverse dash
 
 ## Learn more and start building
 
-### Documenation
+### Documentation
 
 For an overview of NRQL syntax, see [Introduction to NRQL](https://docs.newrelic.com/docs/insights/nrql-new-relic-query-language/using-nrql/introduction-nrql). For a detailed description of all available functions, see [NRQL syntax, components, and functions](https://docs.newrelic.com/docs/insights/nrql-new-relic-query-language/nrql-resources/nrql-syntax-components-functions).
 
@@ -93,7 +93,7 @@ To learn how to query and narrow a large data store by a specific parameter, wat
 
 ### Community Forum
 
-Connect with other developers in the [New Relic Explorers Hub](http://discuss.newrelic.com/tags/developer). 
+Connect with other developers in the [New Relic Explorers Hub](http://discuss.newrelic.com/tags/developer).
 
 ### GitHub
 
diff --git a/src/markdown-pages/query-data/get-started-nerdgraph-api-explorer.mdx b/src/markdown-pages/query-data/get-started-nerdgraph-api-explorer.mdx
index 8dc1a9c96..216d22443 100644
--- a/src/markdown-pages/query-data/get-started-nerdgraph-api-explorer.mdx
+++ b/src/markdown-pages/query-data/get-started-nerdgraph-api-explorer.mdx
@@ -8,7 +8,7 @@ description: 'Learn to explore NerdGraph, our GraphQL API, and build the queries
 
 ## What is the NerdGraph API Explorer
 
-NerdGraph is New Relic's [GraphQL](https://graphql.org/) API. With NerdGraph, you can get all the information you need in a single request. No matter how much data you pull into New Relic, our GraphQL API can help you navigate that complexity and gain more insight. 
+NerdGraph is New Relic's [GraphQL](https://graphql.org/) API. With NerdGraph, you can get all the information you need in a single request. No matter how much data you pull into New Relic, our GraphQL API can help you navigate that complexity and gain more insight.
 
 NerdGraph is different from REST APIs in that you don't need to chain together several calls to obtain the required data. Instead, you use the Graph query language to retrieve JSON objects from our graph, which is spread across our many microservices.
 
@@ -20,7 +20,7 @@ This guide shows you how to use NerdGraph to compose queries, and how to turn th
 
 Go to [api.newrelic.com/graphiql](https://api.newrelic.com/graphiql) and log in using your New Relic user ID and password: the NerdGraph API Explorer load up. Before you begin, make sure you have a valid New Relic API key. You can create one directly from the NerdGraph API Explorer.
 
-![Create a NerdGraph API key](../images/graphql-guide/create-account.png)
+![Create a NerdGraph API key](../../images/graphql-guide/create-account.png)
 
 The Query Builder is in the left sidebar and lets you search, browse, and select graph fields. The center is the GraphQL query editor, which comes with syntax highlighting and autocompletion. Clicking the play button runs the query; the results appear as JSON on the right sidebar.
 
@@ -60,7 +60,7 @@ With this query, you're telling NerdGraph to retrieve your name. You're asking f
 
 The result has almost the same shape as the request; all the fields in the Query Builder make up what's called the GraphQL schema, which describes all the available data types and their attributes. To learn more about each field, click the **Docs** button, or hover over a field in the editor.
 
-![NerdGraph documentation and tooltips](../images/graphql-guide/graphql-documentation.png)
+![NerdGraph documentation and tooltips](../../images/graphql-guide/graphql-documentation.png)
 
 Now you can try adding more fields to your query. The simplest way is clicking the fields in the Query Builder: The NerdGraph API Explorer knows where the attributes should go in the query. In the example below, you add the account `id` and `email` fields.
 
@@ -88,20 +88,20 @@ Ready for your first mutation?
 2. Scroll down the Query Builder and expand `mutation`.
 3. Select the fields in the following screenshot:
 
-![Mutation example](../images/graphql-guide/mutation-example.png)
+![Mutation example](../../images/graphql-guide/mutation-example.png)
 
 In this case, you're trying to add a custom tag to an entity. Notice that the editor complains if you don't select `errors`: mutations must have a way of telling you how the operation performed in the backend (failed requests result in null responses).
 
-> Unlike REST, GraphQL APIs like NerdGraph can return partial responses. For example, if you try adding tags to multiple entities, some mutations can fail and others succeed; all is logged in the GraphQL response you get. 
+> Unlike REST, GraphQL APIs like NerdGraph can return partial responses. For example, if you try adding tags to multiple entities, some mutations can fail and others succeed; all is logged in the GraphQL response you get.
 
 ## Try your NerdGraph query in the terminal
 
 Let's say that you've built a NerdGraph query you're happy with and you want to test it elsewhere. To capture code-ready queries and mutations:
 
-1. Select the **Tools** menu. 
+1. Select the **Tools** menu.
 2. Copy the query as a cURL call or as a [New Relic CLI](...) command.
 
-![Tools menu](../images/graphql-guide/tools-menu.png)
+![Tools menu](../../images/graphql-guide/tools-menu.png)
 
 Here's what the first query you created in this guide would look like as cURL:
 
diff --git a/src/markdown-pages/reference/intro-to-sdk.mdx b/src/markdown-pages/reference/intro-to-sdk.mdx
index c26fd8847..4fee0aefd 100644
--- a/src/markdown-pages/reference/intro-to-sdk.mdx
+++ b/src/markdown-pages/reference/intro-to-sdk.mdx
@@ -7,10 +7,10 @@ description: 'Intro to New Relic One API components'
 
 <Intro>
 
-To help you build a New Relic One application we provide you with the New Relic One SDK
-This page will give you an introduction to the types of API calls and components in the SDK. 
-The SDK provides everything you need to build your Nerdlets, create visualizations, and fetch 
-data (New Relic or third-party). These components are located in the Node module package named `nr1`, 
+To help you build a New Relic One application we provide you with the New Relic One SDK.
+This page will give you an introduction to the types of API calls and components in the SDK.
+The SDK provides everything you need to build your Nerdlets, create visualizations, and fetch
+data (New Relic or third-party). These components are located in the Node module package named `nr1`,
 which you get when you install [the NR1 CLI](TODOneedURL).
 
 </Intro>
@@ -28,60 +28,60 @@ The `nr1` components can be divided into several categories:
 
 The **UI components** category of the SDK contains React UI components, including:
 
--   Text components: These components provide basic font and heading elements. 
-These include [`HeadingText`](../components/heading-text) 
+-   Text components: These components provide basic font and heading elements.
+These include [`HeadingText`](../components/heading-text)
 and [`BlockText`](../components/block-text).
 
 -   Layout components: These components give you control over the layout, and help you build complex layout designs without having to deal with the CSS. Layout components include:
 
-    -   [`Grid`](../components/grid) 
-    and [`GridItem`:](../components/grid-item) 
+    -   [`Grid`](../components/grid)
+    and [`GridItem`:](../components/grid-item)
     for organizing more complex, larger scale page content in rows and columns.
 
-    -   [`Stack`](../components/stack) 
-    and [`StackItem`](../components/stack-item): 
+    -   [`Stack`](../components/stack)
+    and [`StackItem`](../components/stack-item):
     for organizing simpler, smaller scale page content (in column or row).
 
-    -   [`Tabs`](../components/tabs) 
-    and [`TabsItem`](../components/tabs-item): 
+    -   [`Tabs`](../components/tabs)
+    and [`TabsItem`](../components/tabs-item):
     group various related pieces of content into separate hideable sections.
 
-    -   [`List`](../components/list) 
-    and [`ListItem`](../components/list-item): 
+    -   [`List`](../components/list)
+    and [`ListItem`](../components/list-item):
     for providing a basic skeleton of virtualized lists.
 
-    -   [`Card`](../components/card), 
+    -   [`Card`](../components/card),
     [`CardHeader`](../components/card-header) and [`CardBody`](../components/card-body)
     : used to group similar concepts and tasks together.
 
--   Form components: These components provide the basic building blocks to interact with the UI. 
-These include [`Button`](../components/button), 
-[`TextField`](../components/text-field), 
-[`Dropdown`](../components/dropdown) 
+-   Form components: These components provide the basic building blocks to interact with the UI.
+These include [`Button`](../components/button),
+[`TextField`](../components/text-field),
+[`Dropdown`](../components/dropdown)
 and [`DropdownItem`](../components/dropdown-item),
  [`Checkbox`](../components/checkbox),
-  [`RadioGroup`](../components/radio-group), 
-  [`Radio`](../components/radio), 
+  [`RadioGroup`](../components/radio-group),
+  [`Radio`](../components/radio),
   and [`Checkbox`](../components/checkbox).
 
--   Feedback components: These components are used to provide feedback to users about actions they've taken. 
-These include: [`Spinner`](../components/spinner) 
+-   Feedback components: These components are used to provide feedback to users about actions they've taken.
+These include: [`Spinner`](../components/spinner)
 and [`Toast`](../components/toast).
 
--   Overlaid components: These components are used to display contextual information and 
-options in the form of an additional child view that appears above other content on screen 
-when an action or event is triggered. They can either require user interaction (like modals), 
-or be augmenting (like a tooltip). These include: [`Modal`](../components/modal) 
+-   Overlaid components: These components are used to display contextual information and
+options in the form of an additional child view that appears above other content on screen
+when an action or event is triggered. They can either require user interaction (like modals),
+or be augmenting (like a tooltip). These include: [`Modal`](../components/modal)
 and [`Tooltip`](../components/tooltip).
 
-Note: components suffixed with `Item` can only operate as direct children of that 
-name without the suffix. For example: [`GridItem`](../components/grid-item) 
+Note: components suffixed with `Item` can only operate as direct children of that
+name without the suffix. For example: [`GridItem`](../components/grid-item)
 should only be found as a child of [`Grid`](../components/grid).
 
 ## Chart components
 
 The **Charts** category of New Relic One SDK
-contains components representing different types of charts. The [`ChartGroup`](../components/chart-group) 
+contains components representing different types of charts. The [`ChartGroup`](../components/chart-group)
 component helps a group of related charts share data and be aligned.
 
 Some chart components can perform NRQL queries on their own; some accept a customized set of data.
@@ -90,30 +90,30 @@ Some chart components can perform NRQL queries on their own; some accept a custo
 
 The **Query components** category of the New Relic One SDK contains components for fetching and storing New Relic data.
 
-The main way to fetch New Relic data is with NerdGraph, our GraphQL endpoint. 
-This can be queried using [`NerdGraphQuery`](../components/nerd-graph-query). 
-To simplify use of NerdGraph queries, we provide some components with pre-defined queries. For more on using NerdGraph, see 
+The main way to fetch New Relic data is with NerdGraph, our GraphQL endpoint.
+This can be queried using [`NerdGraphQuery`](../components/nerd-graph-query).
+To simplify use of NerdGraph queries, we provide some components with pre-defined queries. For more on using NerdGraph, see
 [Queries and mutations](TODOneedURL).
 
-We also provide some storage for storing small data sets, such as configuration settings data, or user-specific data. 
+We also provide some storage for storing small data sets, such as configuration settings data, or user-specific data.
 For more on this, see [NerdStorage](TODOneedURL).
 
 ## Platform APIs
 
 The Platform API components of the New Relic One SDK
-enable your application to interact with different parts of the New Relic One platform, 
+enable your application to interact with different parts of the New Relic One platform,
 by reading and writing state from and to the URL, setting the configuration, etc. They can be divided into these categories:
 
--   [`PlatformStateContext`](../components/platform-state-context): provides read access to the platform URL state variables. 
+-   [`PlatformStateContext`](../components/platform-state-context): provides read access to the platform URL state variables.
 Example: `timeRange` in the time picker.
 
--   [`navigation`](../api/navigation): an object that allows programmatic manipulation of the navigation 
+-   [`navigation`](../api/navigation): an object that allows programmatic manipulation of the navigation
 in New Relic One. Example: opening a new Nerdlet.
 
--   [`NerdletStateContext`](..components/nerdlet-state-context): provides read access to the Nerdlet URL state variables. 
+-   [`NerdletStateContext`](..components/nerdlet-state-context): provides read access to the Nerdlet URL state variables.
 Example: an `entityGuid` in the [entity explorer](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts).
 
--   [`nerdlet`](../api/navigation): an object that provides write access to the Nerdlet URL state.)
+-   [`nerdlet`](../api/navigation): an object that provides write access to the Nerdlet URL state.
 
 ## Related info
 
diff --git a/src/markdown-pages/reference/nerdpack-file-structure.mdx b/src/markdown-pages/reference/nerdpack-file-structure.mdx
index ac5da6e89..46e93e453 100644
--- a/src/markdown-pages/reference/nerdpack-file-structure.mdx
+++ b/src/markdown-pages/reference/nerdpack-file-structure.mdx
@@ -7,17 +7,17 @@ description: 'An overview of the Nerdpack File Structure'
 
 <Intro>
 
-A [New Relic One application](https://developer.newrelic.com/use-cases/build-new-relic-one-applications 
-"Link opens in a new window.") is represented by a **Nerdpack** folder, which can include one or more **Nerdlet** files, 
+A [New Relic One application](https://developer.newrelic.com/use-cases/build-new-relic-one-applications
+"Link opens in a new window.") is represented by a **Nerdpack** folder, which can include one or more **Nerdlet** files,
 and (optionally) one or more **launcher** files. This document explains:
 
--   The file structure for a [Nerdpack](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#file-structure), 
-a [Nerdlet](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#nerdlet-files) 
+- The file structure for a [Nerdpack](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#file-structure),
+a [Nerdlet](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#nerdlet-files)
 and a [launcher](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#launcher-file)
--   How to [link a launcher file to a Nerdlet](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#launcher-json)
--   How to [link your application with a monitored entity](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#nerdlet-json)
+- How to [link a launcher file to a Nerdlet](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#launcher-json)
+- How to [link your application with a monitored entity](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#nerdlet-json)
 
-For basic component definitions, see our [developer site](https://developer.newrelic.com/use-cases/build-new-relic-one-applications#Introtocomponentsandtools 
+For basic component definitions, see our [developer site](https://developer.newrelic.com/use-cases/build-new-relic-one-applications#Introtocomponentsandtools
 "Link opens in a new window.").
 
 </Intro>
@@ -26,8 +26,8 @@ For basic component definitions, see our [developer site](https://developer.newr
 
 There are two ways to generate a Nerdpack template:
 
--   Generate Nerdpack. Use the [CLI](https://developer.newrelic.com/build-tools/new-relic-one-applications/cli "Link opens in a new window.") command `nr1 create` and select `Nerdpack` to create a Nerdpack template that includes a Nerdlet and a launcher.
--   Generate Nerdlet or launcher individually. You can use the [CLI](https://developer.newrelic.com/build-tools/new-relic-one-applications/cli "Link opens in a new window.") command `nr1 create` and choose to select either a Nerdlet or launcher. This may be useful when adding Nerdlets to an existing Nerdpack.
+- Generate Nerdpack. Use the [CLI](https://developer.newrelic.com/build-tools/new-relic-one-applications/cli "Link opens in a new window.") command `nr1 create` and select `Nerdpack` to create a Nerdpack template that includes a Nerdlet and a launcher.
+- Generate Nerdlet or launcher individually. You can use the [CLI](https://developer.newrelic.com/build-tools/new-relic-one-applications/cli "Link opens in a new window.") command `nr1 create` and choose to select either a Nerdlet or launcher. This may be useful when adding Nerdlets to an existing Nerdpack.
 
 For a lesson on generating and connecting Nerdpack components, see [the workshop](https://github.com/newrelic/nr1-workshop/blob/master/lab0/INSTRUCTIONS.md "Link opens in a new window.") .
 
@@ -38,73 +38,69 @@ When you generate a Nerdpack template using the CLI `nr1 create` command, it has
 ![New Relic One application - Nerdpack file structure](https://docs.newrelic.com/sites/default/files/thumbnails/image/nerdpack-file-structure.png "nerdpack-file-structure.png")
 
 
-## Nerdlet file structure 
+## Nerdlet file structure
 
 A Nerdpack can contain one or more Nerdlets. A Nerdlet folder starts out with three default files:
 
-[**Show All**  ](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#all-links)
-
-### index.js
+### `index.js`
 
 Here is what the default file looks like when a Nerdlet is generated with the CLI `nr1 create`:
- 
+
  ```jsx
 import React from 'react';
 
 export default class MyAwesomeNerdpack extends React.Component {
-    render() {
-        return 
-	<h1>Hello, my-awesome-nerdpack Nerdlet!</h1>
-     }
+  render() {
+    return <h1>Hello, my-awesome-nerdpack Nerdlet!</h1>
+  }
 }
  ```
 
-### nr1.json
+### `nr1.json`
 
 Here is the default file generated by the CLI `nr1 create` command:
 
 ```json
 {
-    "schemaType": "NERDLET",
-    "id": "my-awesome-nerdpack-nerdlet",
-    "description": "Describe me",
-    "displayName": "MyAwesomeNerdpack"
+  "schemaType": "NERDLET",
+  "id": "my-awesome-nerdpack-nerdlet",
+  "description": "Describe me",
+  "displayName": "MyAwesomeNerdpack"
 }
 ```
 
-Besides using the [launcher](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#launcher-file) 
+Besides using the [launcher](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-application-nerdpack-file-structure#launcher-file)
 as the access point for your application, you can also associate the application with
-a monitored entity to get it to appear in the New Relic One [entity explorer](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts). 
-To do this, add two additional fields to the config file of the first-launched Nerdlet: `entities` and `actionCategory`. 
-In the following example, the Nerdlet has been associated with all New Relic Browser-monitored 
+a monitored entity to get it to appear in the New Relic One [entity explorer](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts).
+To do this, add two additional fields to the config file of the first-launched Nerdlet: `entities` and `actionCategory`.
+In the following example, the Nerdlet has been associated with all New Relic Browser-monitored
 applications and will appear under the **Monitor** UI category :
 
 ```json
 {
-    "schemaType": "NERDLET",
-    "id": "my-nerdlet",
-    "description": "Describe me",
-    "displayName": "Custom Data",
-    "entities": [{"domain": "BROWSER", "type": "APPLICATION"}],
-    "actionCategory": "monitor"
+  "schemaType": "NERDLET",
+  "id": "my-nerdlet",
+  "description": "Describe me",
+  "displayName": "Custom Data",
+  "entities": [{"domain": "BROWSER", "type": "APPLICATION"}],
+  "actionCategory": "monitor"
 }
 ```
-To see this application in the UI, you would go to the New Relic One 
+To see this application in the UI, you would go to the New Relic One
 [entity explorer](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/ui-data/new-relic-one-entity-explorer-view-performance-across-apps-services-hosts),
  select Browser applications, and select a monitored application.
 
-### styles.scss
+### `styles.scss`
 
 The file is provided for CSS styles (Sass SCSS syntax).
 
 ```css
-
-  /* this is an empty file you can use customize to style your nerdlet. */
+/* this is an empty file you can use customize to style your nerdlet. */
 ```
 
-### icon.png
-![icon.png](../images/nerdpack-file-structure/icon.png)
-The launcher icon that appears on the [one.newrelic.com](http://one.newrelic.com/) 
+### `icon.png`
+![icon.png](../../images/nerdpack-file-structure/icon.png)
+The launcher icon that appears on the [one.newrelic.com](http://one.newrelic.com/)
 home page when an application is deployed.
 
 ### Related info
diff --git a/src/pages/explore-data.js b/src/pages/explore-data.js
index 7591888de..135276376 100644
--- a/src/pages/explore-data.js
+++ b/src/pages/explore-data.js
@@ -1,9 +1,12 @@
+import { BreadcrumbContext } from '../components/BreadcrumbContext';
+import createBreadcrumbs from '../utils/create-breadcrumbs';
 import GuideListing from '../components/GuideListing/GuideListing';
 import GuideTile from '../components/GuideTile';
 import PageTitle from '../components/PageTitle';
 import Layout from '../components/Layout';
 import React from 'react';
 import SEO from '../components/Seo';
+import pages from '../data/sidenav.json';
 
 const title = 'Get data into New Relic';
 
@@ -30,23 +33,28 @@ const guides = [
   },
 ];
 
-const ExploreDataPage = () => (
-  <Layout>
-    <SEO title={title} />
-    <PageTitle>{title}</PageTitle>
-    <p className="intro-text">
-      Instrument your applications and infrastructure to start collecting
-      monitoring data
-    </p>
+const ExploreDataPage = () => {
+  const crumbs = createBreadcrumbs('/explore-data', pages);
+  return (
+    <BreadcrumbContext.Provider value={crumbs}>
+      <Layout>
+        <SEO title={title} />
+        <PageTitle>{title}</PageTitle>
+        <p className="intro-text">
+          Instrument your applications and infrastructure to start collecting
+          monitoring data
+        </p>
 
-    <GuideListing>
-      <GuideListing.List>
-        {guides.map((guide, index) => (
-          <GuideTile key={index} {...guide} />
-        ))}
-      </GuideListing.List>
-    </GuideListing>
-  </Layout>
-);
+        <GuideListing>
+          <GuideListing.List>
+            {guides.map((guide, index) => (
+              <GuideTile key={index} {...guide} />
+            ))}
+          </GuideListing.List>
+        </GuideListing>
+      </Layout>
+    </BreadcrumbContext.Provider>
+  );
+};
 
 export default ExploreDataPage;
diff --git a/src/pages/index.js b/src/pages/index.js
index d1bbeef2a..a4d64e686 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,8 +2,6 @@ import React from 'react';
 
 import Layout from '../components/Layout';
 import SEO from '../components/Seo';
-import Jumbotron from '../components/Jumbotron';
-import Section from '../components/Section';
 import GuideListing from '../components/GuideListing/GuideListing';
 import GuideTile from '../components/GuideTile';
 import PageTitle from '../components/PageTitle';
@@ -11,6 +9,27 @@ import Video from '../components/Video';
 import ExternalLink from '../components/ExternalLink';
 import styles from './index.module.scss';
 
+const getStartedGuides = [
+  {
+    minutes: 5,
+    title: 'Collect data from any source',
+    description: `Learn how to ingest data from various sources. Whether you want to ingest data “out of the box,” or bring custom data into New Relic that isn't collected by default.`,
+    path: '',
+  },
+  {
+    minutes: 5,
+    title: 'Instrument your data',
+    description: `Use custom instrumentation to automatically produce complete information, without needing to modify your application code. Manage your environment through Observability as Code.`,
+    path: '',
+  },
+  {
+    minutes: 5,
+    title: 'Customize your data',
+    description: `Build and customize on the programmable platform by learning how to customize existing apps, enhance open source projects, or build your own application to solve your specific problem.`,
+    path: '',
+  },
+];
+
 const guides = [
   {
     minutes: 5,
@@ -70,10 +89,17 @@ const IndexPage = () => (
       />
     </section>
 
-    <Section backgroundBanner className={styles.backgroundBanner}>
-      <Jumbotron />
-    </Section>
-    <div className={styles.line} />
+    <GuideListing className={styles.guideListing}>
+      <GuideListing.Heading className={styles.guideListingHeading}>
+        Get started
+      </GuideListing.Heading>
+      <GuideListing.List>
+        {getStartedGuides.map((guide, index) => (
+          <GuideTile className={styles.guideTile} key={index} {...guide} />
+        ))}
+      </GuideListing.List>
+    </GuideListing>
+    <hr className={styles.line} />
 
     <GuideListing className={styles.guideListing}>
       <GuideListing.Heading className={styles.guideListingHeading}>
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 1b15d37ef..9589757c6 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -1,13 +1,13 @@
 .line {
   border-bottom: 4px solid var(--color-brand-800);
   width: 50px;
-  margin: auto;
+  margin: 3rem auto 0;
 }
 
 .intro {
   display: flex;
   justify-content: space-between;
-  margin: 2rem auto 7rem;
+  margin: 2rem auto;
 
   @media (max-width: 760px) {
     flex-direction: column;
@@ -43,7 +43,6 @@
 }
 
 .guideTile {
-  box-shadow: none;
   border: 1px solid var(--color-neutrals-300);
   border-radius: 0.25rem;
 }
diff --git a/src/templates/GuideTemplate.module.scss b/src/templates/GuideTemplate.module.scss
index 7c8d923e6..8f3864a3d 100644
--- a/src/templates/GuideTemplate.module.scss
+++ b/src/templates/GuideTemplate.module.scss
@@ -14,6 +14,8 @@
   }
   h1,
   h2 {
+    font-weight: bold;
+
     &:not(:first-child) {
       margin-top: 2rem;
     }
@@ -22,6 +24,7 @@
   h3,
   h4 {
     margin-top: 1rem;
+    font-weight: bold;
   }
 
   li {
@@ -32,6 +35,11 @@
     margin-top: 1rem;
     line-height: 1;
   }
+
+  hr {
+    border: 0;
+    border-bottom: 1px solid var(--color-neutrals-100);
+  }
 }
 
 .header {

From 4977cca35f322d5bda6e7529a5faf6144118b872 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Mon, 22 Jun 2020 10:34:49 -0400
Subject: [PATCH 06/24] chore: refactored as component

---
 src/components/Navigation.js | 39 +++++++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 20b49b651..51a75f178 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -9,13 +9,7 @@ import matchSearchString from '../utils/matchSearchString';
 
 import styles from './Navigation.module.scss';
 
-// TODO: Add this implementation
-const filterPages = (pages, _searchTerm) => pages;
-
-// recursively create navigation
-const renderNav = (pages, depthLevel = 0) => {
-  // TODO: Refactor this function into a component
-  // eslint-disable-next-line react-hooks/rules-of-hooks
+const NavigationItems = ({ pages, searches, depthLevel = 0 }) => {
   const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
   const isHomePage = crumbs.length === 0 && depthLevel === 0;
   const iconLibrary = {
@@ -116,7 +110,13 @@ const renderNav = (pages, depthLevel = 0) => {
                   [styles.isExpanded]: isExpanded,
                 })}
               >
-                {renderNav(page.children, searches, depthLevel + 1)}
+                {
+                  <NavigationItems
+                    pages={page.children}
+                    searches={searches}
+                    depthLevel={depthLevel + 1}
+                  />
+                }
               </ul>
             )}
           </li>
@@ -126,6 +126,23 @@ const renderNav = (pages, depthLevel = 0) => {
   ));
 };
 
+// const filterPages = (pages, _searchTerm, parent = {}) => {
+//   const filteredPage = parent;
+//   return pages.map((page) => {
+//     if (page.children) {
+//       return filterPages(page.children, _searchTerm, page);
+//     } else if (matchSearchString(page.displayName, _searchTerm)) {
+//       filteredPage.children = filteredPage.children.filter((el) =>
+//         matchSearchString(el.displayName, _searchTerm)
+//       );
+//       return filteredPage;
+//     } else if (matchSearchString(parent.displayName, _searchTerm)) {
+//       delete filteredPage.children;
+//       return filteredPage;
+//     }
+//   });
+// };
+
 const searchPages = (pages, searchTerm, parent = []) => {
   return [
     ...new Set(
@@ -148,13 +165,17 @@ const searchPages = (pages, searchTerm, parent = []) => {
 const Navigation = ({ className, searchTerm }) => {
   const searches =
     searchTerm !== '' ? searchPages(pages, searchTerm) : undefined;
+
+  // const filters = filterPages(pages, searchTerm);
   return (
     <nav
       className={cx(styles.container, className)}
       role="navigation"
       aria-label="Navigation"
     >
-      <ul className={styles.listNav}>{renderNav(pages, searches)}</ul>
+      <ul className={styles.listNav}>
+        <NavigationItems pages={pages} searches={searches} />
+      </ul>
     </nav>
   );
 };

From 16d3b6e8d378e5045f53a2cff4a411e73e5b436f Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Mon, 22 Jun 2020 10:36:14 -0400
Subject: [PATCH 07/24] chore: removed unnecessary curly

---
 src/components/Navigation.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 51a75f178..b1ba07a63 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -110,13 +110,11 @@ const NavigationItems = ({ pages, searches, depthLevel = 0 }) => {
                   [styles.isExpanded]: isExpanded,
                 })}
               >
-                {
-                  <NavigationItems
-                    pages={page.children}
-                    searches={searches}
-                    depthLevel={depthLevel + 1}
-                  />
-                }
+                <NavigationItems
+                  pages={page.children}
+                  searches={searches}
+                  depthLevel={depthLevel + 1}
+                />
               </ul>
             )}
           </li>

From aa8404e944b01bd397d9c74f893f16a3b3a42a46 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Mon, 22 Jun 2020 11:31:22 -0400
Subject: [PATCH 08/24] chore: renamed constants and funcs

---
 src/components/Navigation.js          | 42 ++++++++++++++-------------
 src/components/Navigation.module.scss |  6 ++--
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index b1ba07a63..4dd998a4a 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -9,16 +9,17 @@ import matchSearchString from '../utils/matchSearchString';
 
 import styles from './Navigation.module.scss';
 
-const NavigationItems = ({ pages, searches, depthLevel = 0 }) => {
+const iconLibrary = {
+  'Collect data': 'upload-cloud',
+  'Explore data': 'bar-chart',
+  'Build apps': 'box',
+  'Automate workflows': 'cpu',
+  'Explore docs': 'book-open',
+};
+
+const NavigationItems = ({ pages, filteredPageNames, depthLevel = 0 }) => {
   const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
   const isHomePage = crumbs.length === 0 && depthLevel === 0;
-  const iconLibrary = {
-    'Collect data': 'upload-cloud',
-    'Explore data': 'bar-chart',
-    'Build apps': 'box',
-    'Automate workflows': 'cpu',
-    'Explore docs': 'book-open',
-  };
 
   const groupedPages = pages.reduce((groups, page) => {
     const { group = '' } = page;
@@ -54,14 +55,16 @@ const NavigationItems = ({ pages, searches, depthLevel = 0 }) => {
             className={cx(
               { [styles.isCurrentPage]: isCurrentPage },
               {
-                [styles.isNotSearch]:
-                  searches && !searches.includes(page.displayName),
+                [styles.notMatchesFilter]:
+                  filteredPageNames &&
+                  !filteredPageNames.includes(page.displayName),
               },
               {
-                [styles.isSearch]:
-                  searches && searches.includes(page.displayName),
+                [styles.matchesFilter]:
+                  filteredPageNames &&
+                  filteredPageNames.includes(page.displayName),
               },
-              { [styles.isBeingSearched]: searches }
+              { [styles.filterOn]: filteredPageNames }
             )}
           >
             {page.url ? (
@@ -112,7 +115,7 @@ const NavigationItems = ({ pages, searches, depthLevel = 0 }) => {
               >
                 <NavigationItems
                   pages={page.children}
-                  searches={searches}
+                  filteredPageNames={filteredPageNames}
                   depthLevel={depthLevel + 1}
                 />
               </ul>
@@ -141,12 +144,12 @@ const NavigationItems = ({ pages, searches, depthLevel = 0 }) => {
 //   });
 // };
 
-const searchPages = (pages, searchTerm, parent = []) => {
+const filterPageNames = (pages, searchTerm, parent = []) => {
   return [
     ...new Set(
       pages.flatMap((page) => {
         if (page.children) {
-          return searchPages(page.children, searchTerm, [
+          return filterPageNames(page.children, searchTerm, [
             ...parent,
             page.displayName,
           ]);
@@ -161,10 +164,9 @@ const searchPages = (pages, searchTerm, parent = []) => {
 };
 
 const Navigation = ({ className, searchTerm }) => {
-  const searches =
-    searchTerm !== '' ? searchPages(pages, searchTerm) : undefined;
+  const filteredPageNames =
+    searchTerm !== '' ? filterPageNames(pages, searchTerm) : undefined;
 
-  // const filters = filterPages(pages, searchTerm);
   return (
     <nav
       className={cx(styles.container, className)}
@@ -172,7 +174,7 @@ const Navigation = ({ className, searchTerm }) => {
       aria-label="Navigation"
     >
       <ul className={styles.listNav}>
-        <NavigationItems pages={pages} searches={searches} />
+        <NavigationItems pages={pages} filteredPageNames={filteredPageNames} />
       </ul>
     </nav>
   );
diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss
index 4613a3968..25a6be44b 100644
--- a/src/components/Navigation.module.scss
+++ b/src/components/Navigation.module.scss
@@ -87,15 +87,15 @@ button.navLink {
   font-weight: bold;
 }
 
-.isNotSearch {
+.notMatchesFilter {
   display: none;
 }
 
-.isSearch {
+.matchesFilter {
   display: block;
 }
 
-.isBeingSearched {
+.filterOn {
   ul {
     display: block;
   }

From 67d3e86f183f1e7a4865f25b0fd7b95ad0cf4180 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Mon, 22 Jun 2020 11:44:48 -0400
Subject: [PATCH 09/24] chore: use regex

---
 src/utils/matchSearchString.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/matchSearchString.js b/src/utils/matchSearchString.js
index 0b434680c..18dad70a8 100644
--- a/src/utils/matchSearchString.js
+++ b/src/utils/matchSearchString.js
@@ -1,5 +1,5 @@
 const matchSearchString = (str, searchTerm) => {
-  return str.toLowerCase().includes(searchTerm.toLowerCase());
+  return new RegExp(searchTerm, 'i').test(str);
 };
 
 export default matchSearchString;

From b5413a6ce3ebad8ee6ab86712cc780c03ae962e9 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Mon, 22 Jun 2020 13:52:29 -0400
Subject: [PATCH 10/24] feat: highlights text

---
 src/components/Navigation.js          | 58 ++++++++++++++++-----------
 src/components/Navigation.module.scss |  3 ++
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 4dd998a4a..1f33c28c3 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -17,7 +17,23 @@ const iconLibrary = {
   'Explore docs': 'book-open',
 };
 
-const NavigationItems = ({ pages, filteredPageNames, depthLevel = 0 }) => {
+const getHighlightedText = (text, highlight) => {
+  const parts = text.split(new RegExp(`(${highlight})`, 'gi'));
+  return (
+    <span>
+      {parts.map((part) =>
+        part.toLowerCase() === highlight.toLowerCase() ? <b>{part}</b> : part
+      )}
+    </span>
+  );
+};
+
+const NavigationItems = ({
+  pages,
+  filteredPageNames,
+  searchTerm,
+  depthLevel = 0,
+}) => {
   const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
   const isHomePage = crumbs.length === 0 && depthLevel === 0;
 
@@ -32,9 +48,12 @@ const NavigationItems = ({ pages, filteredPageNames, depthLevel = 0 }) => {
 
   return Object.entries(groupedPages).map(([group, pages]) => (
     <Fragment key={group}>
-      {group && (
-        <li className={cx(styles.navLink, styles.groupName)}>{group}</li>
-      )}
+      {(group && !filteredPageNames) ||
+        (group &&
+          filteredPageNames &&
+          pages.some((el) => filteredPageNames.includes(el.displayName)) && (
+            <li className={cx(styles.navLink, styles.groupName)}>{group}</li>
+          ))}
       {pages.map((page) => {
         const [isExpanded, setIsExpanded] = useState(
           isHomePage || crumbs.includes(page.displayName)
@@ -47,6 +66,9 @@ const NavigationItems = ({ pages, filteredPageNames, depthLevel = 0 }) => {
             name={iconLibrary[page.displayName]}
           />
         );
+        const display = filteredPageNames
+          ? getHighlightedText(page.displayName, searchTerm)
+          : page.displayName;
 
         return (
           <li
@@ -77,7 +99,7 @@ const NavigationItems = ({ pages, filteredPageNames, depthLevel = 0 }) => {
               >
                 <span>
                   {headerIcon}
-                  {page.displayName}
+                  {display}
                 </span>
                 {isCurrentPage && (
                   <FeatherIcon
@@ -104,7 +126,7 @@ const NavigationItems = ({ pages, filteredPageNames, depthLevel = 0 }) => {
                   />
                 )}
                 {headerIcon}
-                {page.displayName}
+                {display}
               </button>
             )}
             {page.children && (
@@ -117,6 +139,7 @@ const NavigationItems = ({ pages, filteredPageNames, depthLevel = 0 }) => {
                   pages={page.children}
                   filteredPageNames={filteredPageNames}
                   depthLevel={depthLevel + 1}
+                  searchTerm={searchTerm}
                 />
               </ul>
             )}
@@ -127,23 +150,6 @@ const NavigationItems = ({ pages, filteredPageNames, depthLevel = 0 }) => {
   ));
 };
 
-// const filterPages = (pages, _searchTerm, parent = {}) => {
-//   const filteredPage = parent;
-//   return pages.map((page) => {
-//     if (page.children) {
-//       return filterPages(page.children, _searchTerm, page);
-//     } else if (matchSearchString(page.displayName, _searchTerm)) {
-//       filteredPage.children = filteredPage.children.filter((el) =>
-//         matchSearchString(el.displayName, _searchTerm)
-//       );
-//       return filteredPage;
-//     } else if (matchSearchString(parent.displayName, _searchTerm)) {
-//       delete filteredPage.children;
-//       return filteredPage;
-//     }
-//   });
-// };
-
 const filterPageNames = (pages, searchTerm, parent = []) => {
   return [
     ...new Set(
@@ -174,7 +180,11 @@ const Navigation = ({ className, searchTerm }) => {
       aria-label="Navigation"
     >
       <ul className={styles.listNav}>
-        <NavigationItems pages={pages} filteredPageNames={filteredPageNames} />
+        <NavigationItems
+          searchTerm={searchTerm}
+          pages={pages}
+          filteredPageNames={filteredPageNames}
+        />
       </ul>
     </nav>
   );
diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss
index 25a6be44b..09d79ab13 100644
--- a/src/components/Navigation.module.scss
+++ b/src/components/Navigation.module.scss
@@ -99,4 +99,7 @@ button.navLink {
   ul {
     display: block;
   }
+  .nestedChevron {
+    transform: rotate(90deg);
+  }
 }

From 1cba79f24c9a82e4d4852b0ff2acc06fe1997c77 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Mon, 22 Jun 2020 15:21:41 -0400
Subject: [PATCH 11/24] fix: weird top margin with groups

---
 src/components/Navigation.module.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss
index 09d79ab13..031b2e43a 100644
--- a/src/components/Navigation.module.scss
+++ b/src/components/Navigation.module.scss
@@ -102,4 +102,7 @@ button.navLink {
   .nestedChevron {
     transform: rotate(90deg);
   }
+  .groupName {
+    margin-top: 0.5rem;
+  }
 }

From a0f8a06164b781848956d1e34c601c668ad75536 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Mon, 22 Jun 2020 16:21:29 -0400
Subject: [PATCH 12/24] fix: render problem with group titles

---
 src/components/Navigation.js | 200 ++++++++++++++++++-----------------
 1 file changed, 103 insertions(+), 97 deletions(-)

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 1f33c28c3..94c82d585 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -46,108 +46,114 @@ const NavigationItems = ({
     };
   }, {});
 
-  return Object.entries(groupedPages).map(([group, pages]) => (
-    <Fragment key={group}>
-      {(group && !filteredPageNames) ||
-        (group &&
-          filteredPageNames &&
-          pages.some((el) => filteredPageNames.includes(el.displayName)) && (
-            <li className={cx(styles.navLink, styles.groupName)}>{group}</li>
-          ))}
-      {pages.map((page) => {
-        const [isExpanded, setIsExpanded] = useState(
-          isHomePage || crumbs.includes(page.displayName)
-        );
+  console.log(Boolean(filteredPageNames));
 
-        const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
-        const headerIcon = depthLevel === 0 && (
-          <FeatherIcon
-            className={styles.headerIcon}
-            name={iconLibrary[page.displayName]}
-          />
-        );
-        const display = filteredPageNames
-          ? getHighlightedText(page.displayName, searchTerm)
-          : page.displayName;
+  return Object.entries(groupedPages).map(([group, pages]) => {
+    const showGroup =
+      (group && !Boolean(filteredPageNames)) ||
+      (group &&
+        filteredPageNames &&
+        pages.some((el) => filteredPageNames.includes(el.displayName)));
+    return (
+      <Fragment key={group}>
+        {showGroup && (
+          <li className={cx(styles.navLink, styles.groupName)}>{group}</li>
+        )}
+        {pages.map((page) => {
+          const [isExpanded, setIsExpanded] = useState(
+            isHomePage || crumbs.includes(page.displayName)
+          );
 
-        return (
-          <li
-            key={page.displayName}
-            data-depth={depthLevel}
-            className={cx(
-              { [styles.isCurrentPage]: isCurrentPage },
-              {
-                [styles.notMatchesFilter]:
-                  filteredPageNames &&
-                  !filteredPageNames.includes(page.displayName),
-              },
-              {
-                [styles.matchesFilter]:
-                  filteredPageNames &&
-                  filteredPageNames.includes(page.displayName),
-              },
-              { [styles.filterOn]: filteredPageNames }
-            )}
-          >
-            {page.url ? (
-              <Link
-                className={cx(
-                  { [styles.isCurrentPage]: isCurrentPage },
-                  styles.navLink
-                )}
-                to={page.url}
-              >
-                <span>
+          const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
+          const headerIcon = depthLevel === 0 && (
+            <FeatherIcon
+              className={styles.headerIcon}
+              name={iconLibrary[page.displayName]}
+            />
+          );
+          const display = filteredPageNames
+            ? getHighlightedText(page.displayName, searchTerm)
+            : page.displayName;
+
+          return (
+            <li
+              key={page.displayName}
+              data-depth={depthLevel}
+              className={cx(
+                { [styles.isCurrentPage]: isCurrentPage },
+                {
+                  [styles.notMatchesFilter]:
+                    filteredPageNames &&
+                    !filteredPageNames.includes(page.displayName),
+                },
+                {
+                  [styles.matchesFilter]:
+                    filteredPageNames &&
+                    filteredPageNames.includes(page.displayName),
+                },
+                { [styles.filterOn]: filteredPageNames }
+              )}
+            >
+              {page.url ? (
+                <Link
+                  className={cx(
+                    { [styles.isCurrentPage]: isCurrentPage },
+                    styles.navLink
+                  )}
+                  to={page.url}
+                >
+                  <span>
+                    {headerIcon}
+                    {display}
+                  </span>
+                  {isCurrentPage && (
+                    <FeatherIcon
+                      className={styles.currentPageIndicator}
+                      name="chevron-right"
+                    />
+                  )}
+                </Link>
+              ) : (
+                <button
+                  type="button"
+                  className={styles.navLink}
+                  onClick={() => setIsExpanded(!isExpanded)}
+                  onKeyPress={() => setIsExpanded(!isExpanded)}
+                  tabIndex={0}
+                >
+                  {depthLevel > 0 && (
+                    <FeatherIcon
+                      className={cx(
+                        { [styles.isExpanded]: isExpanded },
+                        styles.nestedChevron
+                      )}
+                      name="chevron-right"
+                    />
+                  )}
                   {headerIcon}
                   {display}
-                </span>
-                {isCurrentPage && (
-                  <FeatherIcon
-                    className={styles.currentPageIndicator}
-                    name="chevron-right"
-                  />
-                )}
-              </Link>
-            ) : (
-              <button
-                type="button"
-                className={styles.navLink}
-                onClick={() => setIsExpanded(!isExpanded)}
-                onKeyPress={() => setIsExpanded(!isExpanded)}
-                tabIndex={0}
-              >
-                {depthLevel > 0 && (
-                  <FeatherIcon
-                    className={cx(
-                      { [styles.isExpanded]: isExpanded },
-                      styles.nestedChevron
-                    )}
-                    name="chevron-right"
+                </button>
+              )}
+              {page.children && (
+                <ul
+                  className={cx(styles.nestedNav, {
+                    [styles.isExpanded]: isExpanded,
+                  })}
+                >
+                  <NavigationItems
+                    pages={page.children}
+                    filteredPageNames={filteredPageNames}
+                    depthLevel={depthLevel + 1}
+                    searchTerm={searchTerm}
                   />
-                )}
-                {headerIcon}
-                {display}
-              </button>
-            )}
-            {page.children && (
-              <ul
-                className={cx(styles.nestedNav, {
-                  [styles.isExpanded]: isExpanded,
-                })}
-              >
-                <NavigationItems
-                  pages={page.children}
-                  filteredPageNames={filteredPageNames}
-                  depthLevel={depthLevel + 1}
-                  searchTerm={searchTerm}
-                />
-              </ul>
-            )}
-          </li>
-        );
-      })}
-    </Fragment>
-  ));
+                </ul>
+              )}
+            </li>
+          );
+        })}
+      </Fragment>
+    );
+  });
 };
 
 const filterPageNames = (pages, searchTerm, parent = []) => {

From 99142a20817451d8198e50d2f5d34d7d651d2d76 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Mon, 22 Jun 2020 16:22:58 -0400
Subject: [PATCH 13/24] fix: remove console statement

---
 src/components/Navigation.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 94c82d585..3d23d815f 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -46,11 +46,9 @@ const NavigationItems = ({
     };
   }, {});
 
-  console.log(Boolean(filteredPageNames));
-
   return Object.entries(groupedPages).map(([group, pages]) => {
     const showGroup =
-      (group && !Boolean(filteredPageNames)) ||
+      (group && !filteredPageNames) ||
       (group &&
         filteredPageNames &&
         pages.some((el) => filteredPageNames.includes(el.displayName)));

From 0162ddd456442091dedb9a06849886ee76f4251f Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Mon, 22 Jun 2020 16:50:10 -0400
Subject: [PATCH 14/24] fix: incorrect pathname

---
 src/components/GuideTile.js    | 2 +-
 src/components/Navigation.js   | 8 --------
 src/components/NewRelicIcon.js | 6 ++----
 3 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/src/components/GuideTile.js b/src/components/GuideTile.js
index ac058bfe9..9037b18fa 100644
--- a/src/components/GuideTile.js
+++ b/src/components/GuideTile.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import FeatherIcon from './FeatherIcon';
-import NewRelicIcon from '../components/NewRelicIcon';
+import NewRelicIcon from './NewRelicIcon';
 import cx from 'classnames';
 import { navigate } from 'gatsby';
 import styles from './GuideTile.module.scss';
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index ad9ef1e65..5ef6f294d 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -10,14 +10,6 @@ import matchSearchString from '../utils/matchSearchString';
 
 import styles from './Navigation.module.scss';
 
-const iconLibrary = {
-  'Collect data': 'upload-cloud',
-  'Explore data': 'bar-chart',
-  'Build apps': 'box',
-  'Automate workflows': 'cpu',
-  'Explore docs': 'book-open',
-};
-
 const getHighlightedText = (text, highlight) => {
   const parts = text.split(new RegExp(`(${highlight})`, 'gi'));
   return (
diff --git a/src/components/NewRelicIcon.js b/src/components/NewRelicIcon.js
index bc7cb1a25..fb2f1219f 100644
--- a/src/components/NewRelicIcon.js
+++ b/src/components/NewRelicIcon.js
@@ -23,21 +23,19 @@ const NEWRELIC_ICONS = {
     <>
       <g>
         <path
-          class="st0"
           d="M14.6,14.3l1.4-0.8l-1.9-3.3l-1.4,0.8c-0.7-0.6-1.5-1.1-2.4-1.4V7.9H6.4v1.6C5.5,9.8,4.7,10.3,4,10.9l-1.4-0.8
 		l-1.9,3.3L2,14.3c-0.2,1-0.2,1.8,0,2.8l-1.4,0.8l1.9,3.3L4,20.4c0.7,0.6,1.5,1.1,2.4,1.4v1.6h3.9v-1.6c0.9-0.3,1.7-0.8,2.4-1.4
 		l1.4,0.8l1.9-3.3l-1.4-0.8C14.8,16.1,14.8,15.2,14.6,14.3z"
         />
-        <circle class="st0" cx="8.3" cy="15.7" r="2.6" />
+        <circle cx="8.3" cy="15.7" r="2.6" />
       </g>
       <g>
         <path
-          class="st2"
           d="M22.7,4.2l0.8-0.5l-1.2-2l-0.8,0.5c-0.4-0.4-0.9-0.7-1.5-0.8v-1h-2.3v1c-0.5,0.2-1,0.5-1.5,0.8l-0.8-0.5
 		l-1.2,2l0.8,0.5c-0.1,0.6-0.1,1.1,0,1.7l-0.8,0.5l1.2,2l0.8-0.5c0.4,0.4,0.9,0.7,1.5,0.8v1h2.3v-1c0.5-0.2,1-0.5,1.5-0.8l0.8,0.5
 		l1.2-2l-0.8-0.5C22.9,5.3,22.9,4.8,22.7,4.2z"
         />
-        <circle class="st2" cx="18.9" cy="5.1" r="1.6" />
+        <circle cx="18.9" cy="5.1" r="1.6" />
       </g>
     </>
   ),

From 313a4d1125c6475882b33c5d04b6a4e7eccdcf88 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Mon, 22 Jun 2020 16:53:02 -0400
Subject: [PATCH 15/24] fix: closing tags

---
 src/components/NewRelicIcon.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/NewRelicIcon.js b/src/components/NewRelicIcon.js
index fb2f1219f..65c822507 100644
--- a/src/components/NewRelicIcon.js
+++ b/src/components/NewRelicIcon.js
@@ -41,23 +41,23 @@ const NEWRELIC_ICONS = {
   ),
   buildApps: (
     <>
-      <polygon points="11.5,7.5 .5,4.5 12,1.5 23.5,4.5"></polygon>
-      <polyline points="23.5,4.463 23.5,18.5 11.5,22.5 .5,18.5 .5,4.463"></polyline>
-      <line x1="11.5" x2="11.5" y1="7.5" y2="22.5"></line>
+      <polygon points="11.5,7.5 .5,4.5 12,1.5 23.5,4.5" />
+      <polyline points="23.5,4.463 23.5,18.5 11.5,22.5 .5,18.5 .5,4.463" />
+      <line x1="11.5" x2="11.5" y1="7.5" y2="22.5" />
     </>
   ),
   collectData: (
     <>
-      <path d="M15.799 16.5h2.396c0 0 4.305-.561 4.305-4.783 0-2.675-2.209-4.874-4.955-4.773 -1.073-2.266-3.373-3.835-6.045-3.835 -3.563 0-6.468 2.784-6.676 6.294 -2.232-.467-4.324 1.232-4.324 3.509 0 3.645 3.826 3.588 3.826 3.588h2.863"></path>
-      <line x1="11.5" x2="11.5" y1="11" y2="22"></line>
-      <polyline points="14.5,14 11.5,11 8.5,14"></polyline>
+      <path d="M15.799 16.5h2.396c0 0 4.305-.561 4.305-4.783 0-2.675-2.209-4.874-4.955-4.773 -1.073-2.266-3.373-3.835-6.045-3.835 -3.563 0-6.468 2.784-6.676 6.294 -2.232-.467-4.324 1.232-4.324 3.509 0 3.645 3.826 3.588 3.826 3.588h2.863" />
+      <line x1="11.5" x2="11.5" y1="11" y2="22" />
+      <polyline points="14.5,14 11.5,11 8.5,14" />
     </>
   ),
   developerDocs: (
     <>
-      <path d="M16.5 2.5c0 0-1.893 0-2 0 -2 0-3 1.5-3 3.5 0-2-1-3.5-3-3.5 -.5 0-8 0-8 0v16c0 0 6.5 0 8 0 2 0 3 1 3 3 0-2 1-3 3-3 1.5 0 8 0 8 0v-16h-2"></path>
-      <line x1="11.5" x2="11.5" y1="6" y2="21"></line>
-      <polygon points="20.5,10 18.5,8 16.5,10 16.5,1.5 20.5,1.5"></polygon>
+      <path d="M16.5 2.5c0 0-1.893 0-2 0 -2 0-3 1.5-3 3.5 0-2-1-3.5-3-3.5 -.5 0-8 0-8 0v16c0 0 6.5 0 8 0 2 0 3 1 3 3 0-2 1-3 3-3 1.5 0 8 0 8 0v-16h-2" />
+      <line x1="11.5" x2="11.5" y1="6" y2="21" />
+      <polygon points="20.5,10 18.5,8 16.5,10 16.5,1.5 20.5,1.5" />
     </>
   ),
 };

From af8362c6c40c11bb49ec0b9033449353cff4c1f6 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Tue, 23 Jun 2020 14:43:13 -0400
Subject: [PATCH 16/24] chore: refactored into new component

---
 src/components/Navigation.js               | 151 +-------------------
 src/components/Navigation.module.scss      | 102 +-------------
 src/components/NavigationItems.js          | 153 +++++++++++++++++++++
 src/components/NavigationItems.module.scss | 100 ++++++++++++++
 4 files changed, 256 insertions(+), 250 deletions(-)
 create mode 100644 src/components/NavigationItems.js
 create mode 100644 src/components/NavigationItems.module.scss

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 5ef6f294d..bf5f31a12 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -1,158 +1,11 @@
-import React, { Fragment, useState, useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'gatsby';
 import cx from 'classnames';
-import { BreadcrumbContext } from './BreadcrumbContext';
-import FeatherIcon from './FeatherIcon';
-import NewRelicIcon from './NewRelicIcon';
+import NavigationItems from './NavigationItems';
 import pages from '../data/sidenav.json';
 import matchSearchString from '../utils/matchSearchString';
-
 import styles from './Navigation.module.scss';
 
-const getHighlightedText = (text, highlight) => {
-  const parts = text.split(new RegExp(`(${highlight})`, 'gi'));
-  return (
-    <span>
-      {parts.map((part) =>
-        part.toLowerCase() === highlight.toLowerCase() ? <b>{part}</b> : part
-      )}
-    </span>
-  );
-};
-
-const NavigationItems = ({
-  pages,
-  filteredPageNames,
-  searchTerm,
-  depthLevel = 0,
-}) => {
-  const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
-  const isHomePage = crumbs.length === 0 && depthLevel === 0;
-  const iconLibrary = {
-    'Collect data': 'collectData',
-    'Build apps': 'buildApps',
-    'Automate workflows': 'automation',
-    'Explore docs': 'developerDocs',
-  };
-
-  const groupedPages = pages.reduce((groups, page) => {
-    const { group = '' } = page;
-
-    return {
-      ...groups,
-      [group]: [...(groups[group] || []), page],
-    };
-  }, {});
-
-  return Object.entries(groupedPages).map(([group, pages]) => {
-    const showGroup =
-      (group && !filteredPageNames) ||
-      (group &&
-        filteredPageNames &&
-        pages.some((el) => filteredPageNames.includes(el.displayName)));
-    return (
-      <Fragment key={group}>
-        {showGroup && (
-          <li className={cx(styles.navLink, styles.groupName)}>{group}</li>
-        )}
-        {pages.map((page) => {
-          const [isExpanded, setIsExpanded] = useState(
-            isHomePage || crumbs.includes(page.displayName)
-          );
-
-          const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
-          const headerIcon = depthLevel === 0 && (
-            <NewRelicIcon
-              className={styles.headerIcon}
-              name={iconLibrary[page.displayName]}
-            />
-          );
-          const display = filteredPageNames
-            ? getHighlightedText(page.displayName, searchTerm)
-            : page.displayName;
-
-          return (
-            <li
-              key={page.displayName}
-              data-depth={depthLevel}
-              className={cx(
-                { [styles.isCurrentPage]: isCurrentPage },
-                {
-                  [styles.notMatchesFilter]:
-                    filteredPageNames &&
-                    !filteredPageNames.includes(page.displayName),
-                },
-                {
-                  [styles.matchesFilter]:
-                    filteredPageNames &&
-                    filteredPageNames.includes(page.displayName),
-                },
-                { [styles.filterOn]: filteredPageNames }
-              )}
-            >
-              {page.url ? (
-                <Link
-                  className={cx(
-                    { [styles.isCurrentPage]: isCurrentPage },
-                    styles.navLink
-                  )}
-                  to={page.url}
-                >
-                  <span>
-                    {headerIcon}
-                    {display}
-                  </span>
-                  {isCurrentPage && (
-                    <FeatherIcon
-                      className={styles.currentPageIndicator}
-                      name="chevron-right"
-                    />
-                  )}
-                </Link>
-              ) : (
-                <button
-                  type="button"
-                  className={styles.navLink}
-                  onClick={() => setIsExpanded(!isExpanded)}
-                  onKeyPress={() => setIsExpanded(!isExpanded)}
-                  tabIndex={0}
-                >
-                  {depthLevel > 0 && (
-                    <FeatherIcon
-                      className={cx(
-                        { [styles.isExpanded]: isExpanded },
-                        styles.nestedChevron
-                      )}
-                      name="chevron-right"
-                    />
-                  )}
-                  {headerIcon}
-                  {display}
-                </button>
-              )}
-              {page.children && (
-                <ul
-                  className={cx(styles.nestedNav, {
-                    [styles.isExpanded]: isExpanded,
-                  })}
-                >
-                  <NavigationItems
-                    pages={page.children}
-                    filteredPageNames={filteredPageNames}
-                    depthLevel={depthLevel + 1}
-                    searchTerm={searchTerm}
-                  />
-                </ul>
-              )}
-            </li>
-          );
-        })}
-      </Fragment>
-    );
-  });
-};
-
 const filterPageNames = (pages, searchTerm, parent = []) => {
   return [
     ...new Set(
diff --git a/src/components/Navigation.module.scss b/src/components/Navigation.module.scss
index 031b2e43a..57428ada2 100644
--- a/src/components/Navigation.module.scss
+++ b/src/components/Navigation.module.scss
@@ -2,107 +2,7 @@
   font-size: 0.875rem;
 }
 
-.listNav,
-.nestedNav {
-  list-style: none;
-}
-
-.nestedNav {
-  padding-left: 1rem;
-  display: none;
-
-  &.isExpanded {
-    display: block;
-  }
-
-  [data-depth] > & {
-    padding-left: calc(0.5rem + 1em);
-  }
-}
-
 .listNav {
+  list-style: none;
   padding-left: 0;
 }
-
-.navLink {
-  color: var(--color-neutrals-900);
-  margin-bottom: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  text-decoration: none;
-  transition: 0.1s;
-
-  &:not(.isCurrentPage):hover {
-    color: var(--color-neutrals-600);
-  }
-
-  [data-depth='0'] > & {
-    font-weight: bold;
-  }
-}
-
-.headerIcon {
-  margin-right: 0.5rem;
-}
-
-button.navLink {
-  color: var(--color-neutrals-900);
-  background: inherit;
-  border: none;
-  padding: 0;
-  font-size: inherit;
-  font-weight: inherit;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.currentPageIndicator {
-  stroke-width: 4;
-}
-
-.nestedChevron {
-  margin-right: 0.5rem;
-  stroke-width: 4;
-  transition: 0.2s;
-  &.isExpanded {
-    transform: rotate(90deg);
-  }
-}
-
-.groupName {
-  color: var(--color-neutrals-600);
-  font-weight: bold;
-  font-size: 0.75rem;
-  text-transform: uppercase;
-
-  &:not(:first-child) {
-    margin-top: 2rem;
-  }
-}
-
-.isCurrentPage {
-  font-weight: bold;
-}
-
-.notMatchesFilter {
-  display: none;
-}
-
-.matchesFilter {
-  display: block;
-}
-
-.filterOn {
-  ul {
-    display: block;
-  }
-  .nestedChevron {
-    transform: rotate(90deg);
-  }
-  .groupName {
-    margin-top: 0.5rem;
-  }
-}
diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
new file mode 100644
index 000000000..3f2c4982b
--- /dev/null
+++ b/src/components/NavigationItems.js
@@ -0,0 +1,153 @@
+import React, { Fragment, useState, useContext } from 'react';
+import FeatherIcon from './FeatherIcon';
+import NewRelicIcon from './NewRelicIcon';
+import { Link } from 'gatsby';
+import cx from 'classnames';
+import { BreadcrumbContext } from './BreadcrumbContext';
+import styles from './NavigationItems.module.scss';
+
+const getHighlightedText = (text, highlight) => {
+  const parts = text.split(new RegExp(`(${highlight})`, 'gi'));
+  return (
+    <span>
+      {parts.map((part) =>
+        part.toLowerCase() === highlight.toLowerCase() ? <b>{part}</b> : part
+      )}
+    </span>
+  );
+};
+
+const NavigationItems = ({
+  pages,
+  filteredPageNames,
+  searchTerm,
+  depthLevel = 0,
+}) => {
+  const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
+  const isHomePage = crumbs.length === 0 && depthLevel === 0;
+  const iconLibrary = {
+    'Collect data': 'collectData',
+    'Build apps': 'buildApps',
+    'Automate workflows': 'automation',
+    'Explore docs': 'developerDocs',
+  };
+
+  const groupedPages = pages.reduce((groups, page) => {
+    const { group = '' } = page;
+
+    return {
+      ...groups,
+      [group]: [...(groups[group] || []), page],
+    };
+  }, {});
+
+  return Object.entries(groupedPages).map(([group, pages]) => {
+    const showGroup =
+      (group && !filteredPageNames) ||
+      (group &&
+        filteredPageNames &&
+        pages.some((el) => filteredPageNames.includes(el.displayName)));
+    return (
+      <Fragment key={group}>
+        {showGroup && (
+          <li className={cx(styles.navLink, styles.groupName)}>{group}</li>
+        )}
+        {pages.map((page) => {
+          const [isExpanded, setIsExpanded] = useState(
+            isHomePage || crumbs.includes(page.displayName)
+          );
+
+          const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
+          const headerIcon = depthLevel === 0 && (
+            <NewRelicIcon
+              className={styles.headerIcon}
+              name={iconLibrary[page.displayName]}
+            />
+          );
+          const display = filteredPageNames
+            ? getHighlightedText(page.displayName, searchTerm)
+            : page.displayName;
+
+          const navItemClasses = cx(
+            { [styles.isCurrentPage]: isCurrentPage },
+            {
+              [styles.notMatchesFilter]:
+                filteredPageNames &&
+                !filteredPageNames.includes(page.displayName),
+            },
+            {
+              [styles.matchesFilter]:
+                filteredPageNames &&
+                filteredPageNames.includes(page.displayName),
+            },
+            { [styles.filterOn]: filteredPageNames }
+          );
+          return (
+            <li
+              key={page.displayName}
+              data-depth={depthLevel}
+              className={navItemClasses}
+            >
+              {page.url ? (
+                <Link
+                  className={cx(
+                    { [styles.isCurrentPage]: isCurrentPage },
+                    styles.navLink
+                  )}
+                  to={page.url}
+                >
+                  <span>
+                    {headerIcon}
+                    {display}
+                  </span>
+                  {isCurrentPage && (
+                    <FeatherIcon
+                      className={styles.currentPageIndicator}
+                      name="chevron-right"
+                    />
+                  )}
+                </Link>
+              ) : (
+                <button
+                  type="button"
+                  className={styles.navLink}
+                  onClick={() => setIsExpanded(!isExpanded)}
+                  onKeyPress={() => setIsExpanded(!isExpanded)}
+                  tabIndex={0}
+                >
+                  {depthLevel > 0 && (
+                    <FeatherIcon
+                      className={cx(
+                        { [styles.isExpanded]: isExpanded },
+                        styles.nestedChevron
+                      )}
+                      name="chevron-right"
+                    />
+                  )}
+                  {headerIcon}
+                  {display}
+                </button>
+              )}
+              {page.children && (
+                <ul
+                  className={cx(styles.nestedNav, {
+                    [styles.isExpanded]: isExpanded,
+                  })}
+                >
+                  <NavigationItems
+                    pages={page.children}
+                    filteredPageNames={filteredPageNames}
+                    depthLevel={depthLevel + 1}
+                    searchTerm={searchTerm}
+                  />
+                </ul>
+              )}
+            </li>
+          );
+        })}
+      </Fragment>
+    );
+  });
+};
+
+export default NavigationItems;
diff --git a/src/components/NavigationItems.module.scss b/src/components/NavigationItems.module.scss
new file mode 100644
index 000000000..59a7c120b
--- /dev/null
+++ b/src/components/NavigationItems.module.scss
@@ -0,0 +1,100 @@
+.nestedNav {
+  list-style: none;
+}
+
+.nestedNav {
+  padding-left: 1rem;
+  display: none;
+
+  &.isExpanded {
+    display: block;
+  }
+
+  [data-depth] > & {
+    padding-left: calc(0.5rem + 1em);
+  }
+}
+
+.navLink {
+  color: var(--color-neutrals-900);
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-decoration: none;
+  transition: 0.1s;
+
+  &:not(.isCurrentPage):hover {
+    color: var(--color-neutrals-600);
+  }
+
+  [data-depth='0'] > & {
+    font-weight: 600;
+    padding: 1em 0;
+  }
+}
+
+.headerIcon {
+  margin-right: 0.5rem;
+}
+
+button.navLink {
+  color: var(--color-neutrals-900);
+  background: inherit;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+  font-weight: inherit;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.currentPageIndicator {
+  stroke-width: 4;
+}
+
+.nestedChevron {
+  margin-right: 0.5rem;
+  stroke-width: 4;
+  transition: 0.2s;
+  &.isExpanded {
+    transform: rotate(90deg);
+  }
+}
+
+.groupName {
+  color: var(--color-neutrals-600);
+  font-weight: bold;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+
+  &:not(:first-child) {
+    margin-top: 2rem;
+  }
+}
+
+.isCurrentPage {
+  font-weight: bold;
+}
+
+.notMatchesFilter {
+  display: none;
+}
+
+.matchesFilter {
+  display: block;
+}
+
+.filterOn {
+  ul {
+    display: block;
+  }
+  .nestedChevron {
+    transform: rotate(90deg);
+  }
+  .groupName {
+    margin-top: 0.5rem;
+  }
+}

From 33e59ecc43aa6f2aa57110f497f9b8c0504d67c1 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Tue, 23 Jun 2020 14:59:14 -0400
Subject: [PATCH 17/24] fix: make linter happy

---
 src/components/NavigationItems.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
index 3f2c4982b..9e44dce9f 100644
--- a/src/components/NavigationItems.js
+++ b/src/components/NavigationItems.js
@@ -53,6 +53,7 @@ const NavigationItems = ({
           <li className={cx(styles.navLink, styles.groupName)}>{group}</li>
         )}
         {pages.map((page) => {
+          // eslint-disable-next-line react-hooks/rules-of-hooks
           const [isExpanded, setIsExpanded] = useState(
             isHomePage || crumbs.includes(page.displayName)
           );

From 59f175122ee057186a6adc257bddbc259afe872a Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Tue, 23 Jun 2020 15:25:48 -0400
Subject: [PATCH 18/24] chore: refactored navitem into component and fixes

---
 src/components/NavigationItems.js          | 204 ++++++++++-----------
 src/components/NavigationItems.module.scss |   8 -
 2 files changed, 102 insertions(+), 110 deletions(-)

diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
index 9e44dce9f..4003b9edb 100644
--- a/src/components/NavigationItems.js
+++ b/src/components/NavigationItems.js
@@ -23,15 +23,6 @@ const NavigationItems = ({
   searchTerm,
   depthLevel = 0,
 }) => {
-  const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
-  const isHomePage = crumbs.length === 0 && depthLevel === 0;
-  const iconLibrary = {
-    'Collect data': 'collectData',
-    'Build apps': 'buildApps',
-    'Automate workflows': 'automation',
-    'Explore docs': 'developerDocs',
-  };
-
   const groupedPages = pages.reduce((groups, page) => {
     const { group = '' } = page;
 
@@ -52,103 +43,112 @@ const NavigationItems = ({
         {showGroup && (
           <li className={cx(styles.navLink, styles.groupName)}>{group}</li>
         )}
-        {pages.map((page) => {
-          // eslint-disable-next-line react-hooks/rules-of-hooks
-          const [isExpanded, setIsExpanded] = useState(
-            isHomePage || crumbs.includes(page.displayName)
-          );
+        {pages.map((page) => (
+          <NavItem
+            page={page}
+            depthLevel={depthLevel}
+            searchTerm={searchTerm}
+            filteredPageNames={filteredPageNames}
+          />
+        ))}
+      </Fragment>
+    );
+  });
+};
 
-          const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
-          const headerIcon = depthLevel === 0 && (
-            <NewRelicIcon
-              className={styles.headerIcon}
-              name={iconLibrary[page.displayName]}
-            />
-          );
-          const display = filteredPageNames
-            ? getHighlightedText(page.displayName, searchTerm)
-            : page.displayName;
+const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
+  const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
+  const isHomePage = crumbs.length === 0 && depthLevel === 0;
+
+  const [isExpanded, setIsExpanded] = useState(
+    isHomePage || crumbs.includes(page.displayName)
+  );
+
+  const iconLibrary = {
+    'Collect data': 'collectData',
+    'Build apps': 'buildApps',
+    'Automate workflows': 'automation',
+    'Explore docs': 'developerDocs',
+  };
+  const isCurrentPage = crumbs[crumbs.length - 1] === page.displayName;
+  const headerIcon = depthLevel === 0 && (
+    <NewRelicIcon
+      className={styles.headerIcon}
+      name={iconLibrary[page.displayName]}
+    />
+  );
+  const display = filteredPageNames
+    ? getHighlightedText(page.displayName, searchTerm)
+    : page.displayName;
+
+  if (filteredPageNames && !filteredPageNames.includes(page.displayName))
+    return null;
 
-          const navItemClasses = cx(
+  return (
+    <li
+      key={page.displayName}
+      data-depth={depthLevel}
+      className={cx(
+        { [styles.isCurrentPage]: isCurrentPage },
+        { [styles.filterOn]: filteredPageNames }
+      )}
+    >
+      {page.url ? (
+        <Link
+          className={cx(
             { [styles.isCurrentPage]: isCurrentPage },
-            {
-              [styles.notMatchesFilter]:
-                filteredPageNames &&
-                !filteredPageNames.includes(page.displayName),
-            },
-            {
-              [styles.matchesFilter]:
-                filteredPageNames &&
-                filteredPageNames.includes(page.displayName),
-            },
-            { [styles.filterOn]: filteredPageNames }
-          );
-          return (
-            <li
-              key={page.displayName}
-              data-depth={depthLevel}
-              className={navItemClasses}
-            >
-              {page.url ? (
-                <Link
-                  className={cx(
-                    { [styles.isCurrentPage]: isCurrentPage },
-                    styles.navLink
-                  )}
-                  to={page.url}
-                >
-                  <span>
-                    {headerIcon}
-                    {display}
-                  </span>
-                  {isCurrentPage && (
-                    <FeatherIcon
-                      className={styles.currentPageIndicator}
-                      name="chevron-right"
-                    />
-                  )}
-                </Link>
-              ) : (
-                <button
-                  type="button"
-                  className={styles.navLink}
-                  onClick={() => setIsExpanded(!isExpanded)}
-                  onKeyPress={() => setIsExpanded(!isExpanded)}
-                  tabIndex={0}
-                >
-                  {depthLevel > 0 && (
-                    <FeatherIcon
-                      className={cx(
-                        { [styles.isExpanded]: isExpanded },
-                        styles.nestedChevron
-                      )}
-                      name="chevron-right"
-                    />
-                  )}
-                  {headerIcon}
-                  {display}
-                </button>
-              )}
-              {page.children && (
-                <ul
-                  className={cx(styles.nestedNav, {
-                    [styles.isExpanded]: isExpanded,
-                  })}
-                >
-                  <NavigationItems
-                    pages={page.children}
-                    filteredPageNames={filteredPageNames}
-                    depthLevel={depthLevel + 1}
-                    searchTerm={searchTerm}
-                  />
-                </ul>
+            styles.navLink
+          )}
+          to={page.url}
+        >
+          <span>
+            {headerIcon}
+            {display}
+          </span>
+          {isCurrentPage && (
+            <FeatherIcon
+              className={styles.currentPageIndicator}
+              name="chevron-right"
+            />
+          )}
+        </Link>
+      ) : (
+        <button
+          type="button"
+          className={styles.navLink}
+          onClick={() => setIsExpanded(!isExpanded)}
+          onKeyPress={() => setIsExpanded(!isExpanded)}
+          tabIndex={0}
+        >
+          {depthLevel > 0 && (
+            <FeatherIcon
+              className={cx(
+                { [styles.isExpanded]: isExpanded },
+                styles.nestedChevron
               )}
-            </li>
-          );
-        })}
-      </Fragment>
-    );
-  });
+              name="chevron-right"
+            />
+          )}
+          {headerIcon}
+          {display}
+        </button>
+      )}
+      {page.children && (
+        <ul
+          className={cx(styles.nestedNav, {
+            [styles.isExpanded]: isExpanded,
+          })}
+        >
+          <NavigationItems
+            pages={page.children}
+            filteredPageNames={filteredPageNames}
+            depthLevel={depthLevel + 1}
+            searchTerm={searchTerm}
+          />
+        </ul>
+      )}
+    </li>
+  );
 };
 
 export default NavigationItems;
diff --git a/src/components/NavigationItems.module.scss b/src/components/NavigationItems.module.scss
index 59a7c120b..516dfb096 100644
--- a/src/components/NavigationItems.module.scss
+++ b/src/components/NavigationItems.module.scss
@@ -79,14 +79,6 @@ button.navLink {
   font-weight: bold;
 }
 
-.notMatchesFilter {
-  display: none;
-}
-
-.matchesFilter {
-  display: block;
-}
-
 .filterOn {
   ul {
     display: block;

From e0c94b857ff833264aeeab813df9c8b1fd19f32e Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Tue, 23 Jun 2020 15:34:53 -0400
Subject: [PATCH 19/24] fix: added propTypes

---
 src/components/NavigationItems.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
index 4003b9edb..32134b7bc 100644
--- a/src/components/NavigationItems.js
+++ b/src/components/NavigationItems.js
@@ -1,4 +1,5 @@
 import React, { Fragment, useState, useContext } from 'react';
+import PropTypes from 'prop-types';
 import FeatherIcon from './FeatherIcon';
 import NewRelicIcon from './NewRelicIcon';
 import { Link } from 'gatsby';
@@ -151,4 +152,19 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
   );
 };
 
+NavigationItems.propTypes = {
+  pages: PropTypes.array,
+  filteredPageNames: PropTypes.array,
+  searchTerm: PropTypes.string,
+  depthLevel: PropTypes.number,
+};
+
+NavItem.propTypes = {
+  page: PropTypes.shape({
+    displayName: PropTypes.string,
+    url: PropTypes.string,
+    children: PropTypes.array,
+  }),
+};
+
 export default NavigationItems;

From 84ea9006d2c85ef9e1663216b43509cd1c4be708 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Tue, 23 Jun 2020 15:37:00 -0400
Subject: [PATCH 20/24] fix: added key for nav item

---
 src/components/NavigationItems.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
index 32134b7bc..2200a5cd5 100644
--- a/src/components/NavigationItems.js
+++ b/src/components/NavigationItems.js
@@ -44,12 +44,13 @@ const NavigationItems = ({
         {showGroup && (
           <li className={cx(styles.navLink, styles.groupName)}>{group}</li>
         )}
-        {pages.map((page) => (
+        {pages.map((page, index) => (
           <NavItem
             page={page}
             depthLevel={depthLevel}
             searchTerm={searchTerm}
             filteredPageNames={filteredPageNames}
+            key={index}
           />
         ))}
       </Fragment>
@@ -165,6 +166,9 @@ NavItem.propTypes = {
     url: PropTypes.string,
     children: PropTypes.array,
   }),
+  filteredPageNames: PropTypes.array,
+  searchTerm: PropTypes.string,
+  depthLevel: PropTypes.number,
 };
 
 export default NavigationItems;

From 64fce5204951a093e37ed3829b13d26a53a0a1d1 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Tue, 23 Jun 2020 16:11:52 -0400
Subject: [PATCH 21/24] chore: imported link from src/types

---
 src/components/NavigationItems.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
index 2200a5cd5..44b52a2f3 100644
--- a/src/components/NavigationItems.js
+++ b/src/components/NavigationItems.js
@@ -6,6 +6,7 @@ import { Link } from 'gatsby';
 import cx from 'classnames';
 import { BreadcrumbContext } from './BreadcrumbContext';
 import styles from './NavigationItems.module.scss';
+import { link } from '../types';
 
 const getHighlightedText = (text, highlight) => {
   const parts = text.split(new RegExp(`(${highlight})`, 'gi'));
@@ -161,11 +162,7 @@ NavigationItems.propTypes = {
 };
 
 NavItem.propTypes = {
-  page: PropTypes.shape({
-    displayName: PropTypes.string,
-    url: PropTypes.string,
-    children: PropTypes.array,
-  }),
+  page: link,
   filteredPageNames: PropTypes.array,
   searchTerm: PropTypes.string,
   depthLevel: PropTypes.number,

From f456b4750d86aac1db40615c07bb5732e9d0548b Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Tue, 23 Jun 2020 18:18:20 -0400
Subject: [PATCH 22/24] fix: add required proptype

---
 src/components/NavigationItems.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
index 44b52a2f3..80f39fbac 100644
--- a/src/components/NavigationItems.js
+++ b/src/components/NavigationItems.js
@@ -162,7 +162,7 @@ NavigationItems.propTypes = {
 };
 
 NavItem.propTypes = {
-  page: link,
+  page: link.isRequired,
   filteredPageNames: PropTypes.array,
   searchTerm: PropTypes.string,
   depthLevel: PropTypes.number,

From b8f24030fc72ecc101fb3f03ca4e78bd7318fdc0 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Tue, 23 Jun 2020 18:19:42 -0400
Subject: [PATCH 23/24] fix: add required to correct page

---
 src/components/NavigationItems.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
index 80f39fbac..b48533224 100644
--- a/src/components/NavigationItems.js
+++ b/src/components/NavigationItems.js
@@ -155,14 +155,14 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
 };
 
 NavigationItems.propTypes = {
-  pages: PropTypes.array,
+  pages: PropTypes.array.isRequired,
   filteredPageNames: PropTypes.array,
   searchTerm: PropTypes.string,
   depthLevel: PropTypes.number,
 };
 
 NavItem.propTypes = {
-  page: link.isRequired,
+  page: link,
   filteredPageNames: PropTypes.array,
   searchTerm: PropTypes.string,
   depthLevel: PropTypes.number,

From d42b4c1ec44de9a86c5c6908c9b18048fdf72055 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Wed, 24 Jun 2020 11:17:34 -0400
Subject: [PATCH 24/24] fix: required prop

---
 src/components/NavigationItems.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
index b48533224..ae5cb1323 100644
--- a/src/components/NavigationItems.js
+++ b/src/components/NavigationItems.js
@@ -165,7 +165,7 @@ NavItem.propTypes = {
   page: link,
   filteredPageNames: PropTypes.array,
   searchTerm: PropTypes.string,
-  depthLevel: PropTypes.number,
+  depthLevel: PropTypes.number.isRequired,
 };
 
 export default NavigationItems;