feat: replace theme header

newrelic · Feb 2, 2022 · f56e37a · f56e37a
1 parent 245c0d7
commit f56e37a
Show file tree

Hide file tree

Showing 3 changed files with 272 additions and 21 deletions.
diff --git a/src/@newrelic/gatsby-theme-newrelic/components/GlobalFooter.js b/src/@newrelic/gatsby-theme-newrelic/components/GlobalFooter.js
@@ -0,0 +1,213 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '@newrelic/gatsby-theme-newrelic/src/components/Button';
+import Logo from '@newrelic/gatsby-theme-newrelic/src/components/Logo';
+import ExternalLink from '@newrelic/gatsby-theme-newrelic/src/components/ExternalLink';
+import { graphql, useStaticQuery } from 'gatsby';
+import { css } from '@emotion/react';
+import CreateIssueButton from '@newrelic/gatsby-theme-newrelic/src/components/CreateIssueButton';
+import EditPageButton from '@newrelic/gatsby-theme-newrelic/src/components/EditPageButton';
+import useThemeTranslation from '@newrelic/gatsby-theme-newrelic/src//hooks/useThemeTranslation';
+import Trans from '@newrelic/gatsby-theme-newrelic/src/components/Trans';
+import Link from '@newrelic/gatsby-theme-newrelic/src/components/Link';
+import useLocale from '@newrelic/gatsby-theme-newrelic/src//hooks/useLocale';
+
+// We need to use this as a JS value otherwise the HTML entity gets saved in the
+// string and escaped by React, therefore rendering the literal &copy; text in
+// the footer
+const copyrightSymbol = String.fromCharCode(169);
+const year = new Date().getFullYear();
+
+const GlobalFooter = ({
+  fileRelativePath,
+  className,
+  pageTitle,
+  issueLabels,
+}) => {
+  const { t } = useThemeTranslation();
+  const { site, sitePage } = useStaticQuery(graphql`
+    query FooterQueryIO {
+      site {
+        siteMetadata {
+          siteUrl
+          repository
+        }
+      }
+      sitePage(path: { eq: "/terms" }) {
+        id
+      }
+    }
+  `);
+  const { locale } = useLocale();
+
+  const { siteMetadata } = site;
+  const { repository } = siteMetadata;
+
+  return (
+    <footer
+      data-swiftype-index={false}
+      className={className}
+      css={css`
+        width: 100%;
+        color: var(--secondary-text-color);
+        background-color: var(--color-neutrals-050);
+        z-index: 1;
+
+        .dark-mode & {
+          background-color: var(--color-dark-050);
+        }
+
+        a {
+          color: currentColor;
+        }
+      `}
+    >
+      <div
+        id="random-div"
+        css={css`
+          font-size: 0.75rem;
+          align-items: center;
+          justify-content: space-between;
+          display: flex;
+          padding: 1rem var(--site-content-padding);
+          max-width: var(--site-max-width);
+          margin: 0 auto;
+
+          @media screen and (max-width: 550px) {
+            flex-direction: column;
+            justify-content: center;
+          }
+        `}
+      >
+        <Link to="/">
+          <Logo
+            width="150px"
+            css={css`
+              display: block;
+
+              @media screen and (max-width: 550px) {
+                margin-bottom: 1rem;
+              }
+            `}
+          />
+        </Link>
+        <div>
+          {repository && (
+            <CreateIssueButton
+              pageTitle={pageTitle}
+              variant={Button.VARIANT.OUTLINE}
+              size={Button.SIZE.SMALL}
+              labels={issueLabels}
+              instrumentation={{ component: 'GlobalFooter' }}
+              css={css`
+                margin-right: 0.5rem;
+              `}
+            />
+          )}
+
+          {repository && fileRelativePath && locale === 'en' && (
+            <EditPageButton
+              fileRelativePath={fileRelativePath}
+              variant={Button.VARIANT.OUTLINE}
+              size={Button.SIZE.SMALL}
+              instrumentation={{ component: 'GlobalFooter' }}
+            />
+          )}
+        </div>
+      </div>
+
+      <div
+        css={css`
+          background-color: rgba(0, 0, 0, 0.05);
+
+          .dark-mode & {
+            background-color: rgba(0, 0, 0, 0.2);
+          }
+        `}
+      >
+        <div
+          css={css`
+            font-size: 0.75rem;
+            align-items: center;
+            justify-content: space-between;
+            display: grid;
+            grid-template-columns: auto auto;
+            grid-template-areas: 'copyright legal';
+            padding: 0.5rem var(--site-content-padding);
+            max-width: var(--site-max-width);
+            margin: 0 auto;
+
+            @media screen and (max-width: 760px) {
+              justify-content: center;
+              text-align: center;
+              grid-template-columns: auto;
+              grid-gap: 0.5rem;
+              grid-template-areas:
+                'legal'
+                'copyright';
+            }
+          `}
+        >
+          <Trans
+            i18nKey="footer.copyright"
+            parent="div"
+            css={css`
+              grid-area: copyright;
+              text-transform: uppercase;
+              font-size: 0.5rem;
+              letter-spacing: 0.1rem;
+            `}
+          >
+            Copyright {{ copyrightSymbol }} {{ year }} New Relic Inc.
+          </Trans>
+          <div
+            css={css`
+              display: flex;
+              flex-wrap: wrap;
+              justify-content: center;
+              grid-area: legal;
+
+              a {
+                margin-left: 0.75rem;
+                white-space: nowrap;
+              }
+            `}
+          >
+            <ExternalLink href="https://newrelic.com/about/careers">
+              {t('footer.careers', 'Careers')}
+            </ExternalLink>
+            {sitePage ? (
+              <Link to="/terms">{t('footer.terms', 'Terms of Service')}</Link>
+            ) : (
+              <ExternalLink href="https://newrelic.com/termsandconditions/terms">
+                {t('footer.terms', 'Terms of Service')}
+              </ExternalLink>
+            )}
+
+            <ExternalLink href="https://newrelic.com/termsandconditions/dmca">
+              {t('footer.dcmaPolicy', 'DCMA Policy')}
+            </ExternalLink>
+            <ExternalLink href="https://newrelic.com/termsandconditions/services-notices">
+              {t('footer.privacyNotice', 'Privacy Notice')}
+            </ExternalLink>
+            <ExternalLink href="https://newrelic.com/termsandconditions/cookie-policy">
+              {t('footer.cookiePolicy', 'Cookie Policy')}
+            </ExternalLink>
+            <ExternalLink href="https://newrelic.com/termsandconditions/uk-slavery-act">
+              {t('footer.ukSlaveryAct', 'UK Slavery Act')}
+            </ExternalLink>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+GlobalFooter.propTypes = {
+  fileRelativePath: PropTypes.string,
+  className: PropTypes.string,
+  pageTitle: PropTypes.string,
+  issueLabels: CreateIssueButton.propTypes.labels,
+};
+
+export default GlobalFooter;
diff --git a/src/@newrelic/gatsby-theme-newrelic/components/Layout/Layout.js b/src/@newrelic/gatsby-theme-newrelic/components/Layout/Layout.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+import Content from '@newrelic/gatsby-theme-newrelic/src/components/Layout/Content';
+import Footer from '@newrelic/gatsby-theme-newrelic/src/components/Layout/Footer';
+import Main from '@newrelic/gatsby-theme-newrelic/src/components/Layout/Main';
+import PageTools from '@newrelic/gatsby-theme-newrelic/src/components/Layout/PageTools';
+import Sidebar from '@newrelic/gatsby-theme-newrelic/src/components/Layout/Sidebar';
+
+const Layout = ({ className, children }) => {
+  return (
+    <div
+      className={className}
+      css={css`
+        --sidebar-width: 300px;
+
+        display: grid;
+        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+        grid-template-areas:
+          'sidebar main'
+        grid-template-rows: 1fr auto;
+        min-height: calc(100vh - var(--global-header-height));
+        margin: 0 auto;
+        max-width: var(--site-max-width);
+
+        @media screen and (max-width: 760px) {
+          grid-template-columns: minmax(0, 1fr);
+          grid-template-areas:
+            'main'
+          grid-template-rows: unset;
+        }
+      `}
+    >
+      {children}
+    </div>
+  );
+};
+
+Layout.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+Layout.Content = Content;
+Layout.Main = Main;
+Layout.PageTools = PageTools;
+Layout.Footer = Footer;
+Layout.Sidebar = Sidebar;
+
+export default Layout;
diff --git a/src/layouts/QuickStartLayout.js b/src/layouts/QuickStartLayout.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import {
   Layout,
   GlobalHeader,
+  GlobalFooter,
   NR_SITES,
 } from '@newrelic/gatsby-theme-newrelic';
 import PropTypes from 'prop-types';
@@ -10,14 +11,6 @@ import '../components/styles.scss';
 import { QUICKSTARTS_COLLAPSE_BREAKPOINT } from '../data/constants';
 
 const QuickStartLayout = ({ children }) => {
-  const [sidebarWidth, setSidebarWidth] = useState(0);
-
-  useEffect(() => {
-    if (window.location.pathname === '/instant-observability/') {
-      setSidebarWidth(300);
-    } else setSidebarWidth(0);
-  }, [children]);
-
   return (
     <>
       <GlobalHeader activeSite={NR_SITES.IO} />
@@ -38,20 +31,15 @@ const QuickStartLayout = ({ children }) => {
         >
           {children}
         </Layout.Main>
-        <Layout.Footer
-          css={css`
-            --sidebar-offset: ${sidebarWidth}px;
-
-            max-width: calc(var(--site-max-width) - var(--sidebar-offset));
-
-            margin-left: calc(var(--sidebar-offset));
-
-            @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
-              margin-left: 0;
-            }
-          `}
-        />
       </Layout>
+      <GlobalFooter
+        css={css`
+          max-width: 100% @media screen and
+            (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
+            margin-left: 0;
+          }
+        `}
+      />
     </>
   );
 };