From aa91b8b29318f447c6c1d6416afdd49a9cdd9186 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Thu, 7 May 2020 15:37:49 -0700
Subject: [PATCH] feat: desktop footer styles

---
 src/components/Footer.js              | 42 ++++++++++++++++++++---
 src/components/Footer.scss            | 48 ++++++++++++++++++++++++++-
 src/images/developers-logo-footer.svg |  5 +++
 3 files changed, 90 insertions(+), 5 deletions(-)
 create mode 100644 src/images/developers-logo-footer.svg

diff --git a/src/components/Footer.js b/src/components/Footer.js
index e1e30c59d..2b652b82e 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,12 +1,46 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'gatsby';
 import Container from './Container';
+import { link } from '../types';
 
 import './Footer.scss';
 
-const Footer = () => (
-  <div className="Footer">
-    <Container>Footer goes here, wow!</Container>
-  </div>
+const Footer = ({ pages }) => (
+  <footer className="Footer">
+    <Container>
+      <div className="Footer-left">
+        <Link to="/" className="logo Footer-logo" />
+        <div className="Footer-copyright">
+          Copyright &copy; 2020 New Relic Inc.
+        </div>
+      </div>
+
+      <nav role="navigation" aria-label="Footer" className="Footer-nav">
+        <ul>
+          {pages.map((page, i) => (
+            <li key={i}>
+              <Link to={page.url}>{page.displayName}</Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </Container>
+  </footer>
 );
 
+Footer.propTypes = {
+  pages: PropTypes.arrayOf(link),
+};
+
+Footer.defaultProps = {
+  pages: [
+    { displayName: 'Collect Data', url: '' },
+    { displayName: 'Explore Data', url: 'explore-data' },
+    { displayName: 'Build Apps', url: '' },
+    { displayName: 'Automate Workflows', url: '' },
+    { displayName: 'Developer Docs', url: '' },
+  ],
+};
+
 export default Footer;
diff --git a/src/components/Footer.scss b/src/components/Footer.scss
index fbf68b76d..f748c2232 100644
--- a/src/components/Footer.scss
+++ b/src/components/Footer.scss
@@ -1,3 +1,49 @@
 .Footer {
-  background-color: red;
+  --footer-text-color: #7da5a8;
+
+  background-color: var(--color-neutrals-800);
+  color: var(--footer-text-color);
+  padding: 1.5rem 0;
+
+  .u-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .Footer-left {
+    display: flex;
+    align-items: center;
+  }
+
+  .Footer-logo {
+    width: 195px;
+    height: 45px;
+    background-image: url('../images/developers-logo-footer.svg');
+  }
+
+  .Footer-copyright {
+    font-size: 0.75rem;
+    margin-left: 1rem;
+    padding: 0.75rem 0.5rem;
+    border-left: 1px dotted var(--color-neutrals-700);
+  }
+
+  .Footer-nav ul {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    a {
+      color: var(--footer-text-color);
+      text-decoration: none;
+      font-size: 0.9rem;
+      padding: 0.5rem 0 0.5rem 1rem;
+    }
+
+    a:hover {
+      color: var(--color-white);
+    }
+  }
 }
diff --git a/src/images/developers-logo-footer.svg b/src/images/developers-logo-footer.svg
new file mode 100644
index 000000000..576ba02f3
--- /dev/null
+++ b/src/images/developers-logo-footer.svg
@@ -0,0 +1,5 @@
+<svg width="195" height="45" viewBox="0 0 195 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 33.75L41.25 22.5L30 11.25" stroke="#7DA5A8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 11.25L3.75 22.5L15 33.75" stroke="#7DA5A8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M59.9505 14.05C61.7838 14.05 63.3922 14.4083 64.7755 15.125C66.1755 15.8417 67.2505 16.8667 68.0005 18.2C68.7672 19.5167 69.1505 21.05 69.1505 22.8C69.1505 24.55 68.7672 26.0833 68.0005 27.4C67.2505 28.7 66.1755 29.7083 64.7755 30.425C63.3922 31.1417 61.7838 31.5 59.9505 31.5H53.8505V14.05H59.9505ZM59.8255 28.525C61.6588 28.525 63.0755 28.025 64.0755 27.025C65.0755 26.025 65.5755 24.6167 65.5755 22.8C65.5755 20.9833 65.0755 19.5667 64.0755 18.55C63.0755 17.5167 61.6588 17 59.8255 17H57.3505V28.525H59.8255ZM84.6454 24.275C84.6454 24.775 84.6121 25.225 84.5454 25.625H74.4204C74.5037 26.625 74.8537 27.4083 75.4704 27.975C76.0871 28.5417 76.8454 28.825 77.7454 28.825C79.0454 28.825 79.9704 28.2667 80.5204 27.15H84.2954C83.8954 28.4833 83.1287 29.5833 81.9954 30.45C80.8621 31.3 79.4704 31.725 77.8204 31.725C76.4871 31.725 75.2871 31.4333 74.2204 30.85C73.1704 30.25 72.3454 29.4083 71.7454 28.325C71.1621 27.2417 70.8704 25.9917 70.8704 24.575C70.8704 23.1417 71.1621 21.8833 71.7454 20.8C72.3287 19.7167 73.1454 18.8833 74.1954 18.3C75.2454 17.7167 76.4537 17.425 77.8204 17.425C79.1371 17.425 80.3121 17.7083 81.3454 18.275C82.3954 18.8417 83.2037 19.65 83.7704 20.7C84.3537 21.7333 84.6454 22.925 84.6454 24.275ZM81.0204 23.275C81.0037 22.375 80.6787 21.6583 80.0454 21.125C79.4121 20.575 78.6371 20.3 77.7204 20.3C76.8537 20.3 76.1204 20.5667 75.5204 21.1C74.9371 21.6167 74.5787 22.3417 74.4454 23.275H81.0204ZM92.9751 28.275L96.4751 17.65H100.2L95.0751 31.5H90.8251L85.7251 17.65H89.4751L92.9751 28.275ZM115.041 24.275C115.041 24.775 115.008 25.225 114.941 25.625H104.816C104.899 26.625 105.249 27.4083 105.866 27.975C106.483 28.5417 107.241 28.825 108.141 28.825C109.441 28.825 110.366 28.2667 110.916 27.15H114.691C114.291 28.4833 113.524 29.5833 112.391 30.45C111.258 31.3 109.866 31.725 108.216 31.725C106.883 31.725 105.683 31.4333 104.616 30.85C103.566 30.25 102.741 29.4083 102.141 28.325C101.558 27.2417 101.266 25.9917 101.266 24.575C101.266 23.1417 101.558 21.8833 102.141 20.8C102.724 19.7167 103.541 18.8833 104.591 18.3C105.641 17.7167 106.849 17.425 108.216 17.425C109.533 17.425 110.708 17.7083 111.741 18.275C112.791 18.8417 113.599 19.65 114.166 20.7C114.749 21.7333 115.041 22.925 115.041 24.275ZM111.416 23.275C111.399 22.375 111.074 21.6583 110.441 21.125C109.808 20.575 109.033 20.3 108.116 20.3C107.249 20.3 106.516 20.5667 105.916 21.1C105.333 21.6167 104.974 22.3417 104.841 23.275H111.416ZM121.096 13V31.5H117.596V13H121.096ZM130.704 31.725C129.37 31.725 128.17 31.4333 127.104 30.85C126.037 30.25 125.195 29.4083 124.579 28.325C123.979 27.2417 123.679 25.9917 123.679 24.575C123.679 23.1583 123.987 21.9083 124.604 20.825C125.237 19.7417 126.095 18.9083 127.179 18.325C128.262 17.725 129.47 17.425 130.804 17.425C132.137 17.425 133.345 17.725 134.429 18.325C135.512 18.9083 136.362 19.7417 136.979 20.825C137.612 21.9083 137.929 23.1583 137.929 24.575C137.929 25.9917 137.604 27.2417 136.954 28.325C136.32 29.4083 135.454 30.25 134.354 30.85C133.27 31.4333 132.054 31.725 130.704 31.725ZM130.704 28.675C131.337 28.675 131.929 28.525 132.479 28.225C133.045 27.9083 133.495 27.4417 133.829 26.825C134.162 26.2083 134.329 25.4583 134.329 24.575C134.329 23.2583 133.979 22.25 133.279 21.55C132.595 20.8333 131.754 20.475 130.754 20.475C129.754 20.475 128.912 20.8333 128.229 21.55C127.562 22.25 127.229 23.2583 127.229 24.575C127.229 25.8917 127.554 26.9083 128.204 27.625C128.87 28.325 129.704 28.675 130.704 28.675ZM143.996 19.65C144.446 19.0167 145.063 18.4917 145.846 18.075C146.646 17.6417 147.554 17.425 148.571 17.425C149.754 17.425 150.821 17.7167 151.771 18.3C152.738 18.8833 153.496 19.7167 154.046 20.8C154.613 21.8667 154.896 23.1083 154.896 24.525C154.896 25.9417 154.613 27.2 154.046 28.3C153.496 29.3833 152.738 30.225 151.771 30.825C150.821 31.425 149.754 31.725 148.571 31.725C147.554 31.725 146.654 31.5167 145.871 31.1C145.104 30.6833 144.479 30.1583 143.996 29.525V38.1H140.496V17.65H143.996V19.65ZM151.321 24.525C151.321 23.6917 151.146 22.975 150.796 22.375C150.463 21.7583 150.013 21.2917 149.446 20.975C148.896 20.6583 148.296 20.5 147.646 20.5C147.013 20.5 146.413 20.6667 145.846 21C145.296 21.3167 144.846 21.7833 144.496 22.4C144.163 23.0167 143.996 23.7417 143.996 24.575C143.996 25.4083 144.163 26.1333 144.496 26.75C144.846 27.3667 145.296 27.8417 145.846 28.175C146.413 28.4917 147.013 28.65 147.646 28.65C148.296 28.65 148.896 28.4833 149.446 28.15C150.013 27.8167 150.463 27.3417 150.796 26.725C151.146 26.1083 151.321 25.375 151.321 24.525ZM170.314 24.275C170.314 24.775 170.281 25.225 170.214 25.625H160.089C160.173 26.625 160.523 27.4083 161.139 27.975C161.756 28.5417 162.514 28.825 163.414 28.825C164.714 28.825 165.639 28.2667 166.189 27.15H169.964C169.564 28.4833 168.798 29.5833 167.664 30.45C166.531 31.3 165.139 31.725 163.489 31.725C162.156 31.725 160.956 31.4333 159.889 30.85C158.839 30.25 158.014 29.4083 157.414 28.325C156.831 27.2417 156.539 25.9917 156.539 24.575C156.539 23.1417 156.831 21.8833 157.414 20.8C157.998 19.7167 158.814 18.8833 159.864 18.3C160.914 17.7167 162.123 17.425 163.489 17.425C164.806 17.425 165.981 17.7083 167.014 18.275C168.064 18.8417 168.873 19.65 169.439 20.7C170.023 21.7333 170.314 22.925 170.314 24.275ZM166.689 23.275C166.673 22.375 166.348 21.6583 165.714 21.125C165.081 20.575 164.306 20.3 163.389 20.3C162.523 20.3 161.789 20.5667 161.189 21.1C160.606 21.6167 160.248 22.3417 160.114 23.275H166.689ZM176.369 19.8C176.819 19.0667 177.402 18.4917 178.119 18.075C178.852 17.6583 179.686 17.45 180.619 17.45V21.125H179.694C178.594 21.125 177.761 21.3833 177.194 21.9C176.644 22.4167 176.369 23.3167 176.369 24.6V31.5H172.869V17.65H176.369V19.8ZM188.276 31.725C187.143 31.725 186.126 31.525 185.226 31.125C184.326 30.7083 183.61 30.15 183.076 29.45C182.56 28.75 182.276 27.975 182.226 27.125H185.751C185.818 27.6583 186.076 28.1 186.526 28.45C186.993 28.8 187.568 28.975 188.251 28.975C188.918 28.975 189.435 28.8417 189.801 28.575C190.185 28.3083 190.376 27.9667 190.376 27.55C190.376 27.1 190.143 26.7667 189.676 26.55C189.226 26.3167 188.501 26.0667 187.501 25.8C186.468 25.55 185.618 25.2917 184.951 25.025C184.301 24.7583 183.735 24.35 183.251 23.8C182.785 23.25 182.551 22.5083 182.551 21.575C182.551 20.8083 182.768 20.1083 183.201 19.475C183.651 18.8417 184.285 18.3417 185.101 17.975C185.935 17.6083 186.91 17.425 188.026 17.425C189.676 17.425 190.993 17.8417 191.976 18.675C192.96 19.4917 193.501 20.6 193.601 22H190.251C190.201 21.45 189.968 21.0167 189.551 20.7C189.151 20.3667 188.61 20.2 187.926 20.2C187.293 20.2 186.801 20.3167 186.451 20.55C186.118 20.7833 185.951 21.1083 185.951 21.525C185.951 21.9917 186.185 22.35 186.651 22.6C187.118 22.8333 187.843 23.075 188.826 23.325C189.826 23.575 190.651 23.8333 191.301 24.1C191.951 24.3667 192.51 24.7833 192.976 25.35C193.46 25.9 193.71 26.6333 193.726 27.55C193.726 28.35 193.501 29.0667 193.051 29.7C192.618 30.3333 191.985 30.8333 191.151 31.2C190.335 31.55 189.376 31.725 188.276 31.725Z" fill="#7DA5A8"/>
+</svg>