Merge pull request #243 from newrelic/jerel/dev-champ-banner

Developer champion banner
newrelic · Jun 25, 2020 · ad2541a · ad2541a
2 parents ede835b + c5a2f2f
commit ad2541a
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 18 deletions.
diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js
@@ -97,6 +97,12 @@ const ICONS = {
       <polyline points="16 16 12 12 8 16" />
     </>
   ),
+  award: (
+    <>
+      <circle cx="12" cy="8" r="7" />
+      <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" />
+    </>
+  ),
 };
 
 FeatherIcon.propTypes = {

diff --git a/src/components/NavigationItems.js b/src/components/NavigationItems.js
@@ -8,6 +8,17 @@ import { BreadcrumbContext } from './BreadcrumbContext';
 import styles from './NavigationItems.module.scss';
 import { link } from '../types';
 
+const iconLibrary = {
+  'Collect data': 'collectData',
+  'Build apps': 'buildApps',
+  'Automate workflows': 'automation',
+  'Explore docs': 'developerDocs',
+};
+
+const featherIconLibrary = {
+  'Developer champions': 'award',
+};
+
 const getHighlightedText = (text, highlight) => {
   const parts = text.split(new RegExp(`(${highlight})`, 'gi'));
   return (
@@ -59,6 +70,28 @@ const NavigationItems = ({
   });
 };
 
+const NavIcon = ({ page }) => {
+  if (featherIconLibrary[page.displayName]) {
+    return (
+      <FeatherIcon
+        className={styles.headerIcon}
+        name={featherIconLibrary[page.displayName]}
+      />
+    );
+  }
+
+  if (iconLibrary[page.displayName]) {
+    return (
+      <NewRelicIcon
+        className={styles.headerIcon}
+        name={iconLibrary[page.displayName]}
+      />
+    );
+  }
+
+  return null;
+};
+
 const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
   const crumbs = useContext(BreadcrumbContext).flatMap((x) => x.displayName);
   const isHomePage = crumbs.length === 0 && depthLevel === 0;
@@ -67,19 +100,8 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
     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 headerIcon = depthLevel === 0 && <NavIcon page={page} />;
   const display = filteredPageNames
     ? getHighlightedText(page.displayName, searchTerm)
     : page.displayName;
@@ -104,7 +126,7 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
           )}
           to={page.url}
         >
-          <span>
+          <span className={styles.navLinkText}>
             {headerIcon}
             {display}
           </span>
@@ -154,6 +176,12 @@ const NavItem = ({ page, depthLevel, searchTerm, filteredPageNames }) => {
   );
 };
 
+NavIcon.propTypes = {
+  page: PropTypes.shape({
+    displayName: PropTypes.string.isRequired,
+  }),
+};
+
 NavigationItems.propTypes = {
   pages: PropTypes.array.isRequired,
   filteredPageNames: PropTypes.array,

diff --git a/src/components/NavigationItems.module.scss b/src/components/NavigationItems.module.scss
@@ -51,6 +51,11 @@ button.navLink {
   }
 }
 
+.navLinkText {
+  display: flex;
+  align-items: center;
+}
+
 .currentPageIndicator {
   stroke-width: 4;
 }

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -8,7 +8,6 @@ import SEO from '../components/Seo';
 import GuideListing from '../components/GuideListing/GuideListing';
 import GuideTile from '../components/GuideTile';
 import PageTitle from '../components/PageTitle';
-import Section from '../components/Section';
 import Video from '../components/Video';
 import FeatherIcon from '../components/FeatherIcon';
 import ExternalLink from '../components/ExternalLink';
@@ -95,7 +94,7 @@ const IndexPage = ({ data, pageContext }) => {
           />
         </section>
 
-        <Section backgroundBanner>
+        <section className={cx(styles.section, styles.stripedSection)}>
           <GuideListing className={styles.guideListing}>
             <header className={styles.guideListingHeader}>
               <GuideListing.Heading className={cx(styles.guideListingHeading)}>
@@ -111,9 +110,9 @@ const IndexPage = ({ data, pageContext }) => {
               ))}
             </GuideListing.List>
           </GuideListing>
-        </Section>
+        </section>
 
-        <GuideListing className={styles.guideListing}>
+        <GuideListing className={styles.section}>
           <GuideListing.Heading className={styles.guideListingHeading}>
             Get inspired
           </GuideListing.Heading>
@@ -146,6 +145,24 @@ const IndexPage = ({ data, pageContext }) => {
           </ExternalLink>{' '}
           built by the New Relic community.
         </p>
+
+        <section className={cx(styles.section, styles.stripedSection)}>
+          <h1>New Relic developer champions</h1>
+          <p>
+            New Relic Champions are solving big problems using New Relic as
+            their linchpin and are recognized as experts and leaders in the New
+            Relic technical community.
+          </p>
+          <ExternalLink href="https://forms.gle/Zkdub5e1x4MNqSKW9">
+            <button type="button">
+              Nominate a Developer Champion
+              <FeatherIcon
+                className={styles.externalLinkIcon}
+                name="external-link"
+              />
+            </button>
+          </ExternalLink>
+        </section>
       </Layout>
     </PageContext.Provider>
   );

diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
@@ -31,7 +31,7 @@
 }
 
 .guideListing {
-  margin-top: 6rem;
+  margin-top: 0;
 }
 
 .guideListingHeader {
@@ -69,3 +69,12 @@
 .externalLinkIcon {
   margin-left: 0.25rem;
 }
+
+.section {
+  margin-top: 4rem;
+}
+
+.stripedSection {
+  padding: 2rem;
+  background: var(--color-neutrals-100);
+}