Merge pull request #11464 from newrelic/liz/doc-banner

Create doc banner
newrelic · Feb 13, 2023 · 4290d9e · 4290d9e
2 parents 2371139 + adeec75
commit 4290d9e
Show file tree

Hide file tree

Showing 5 changed files with 229 additions and 2 deletions.
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -326,11 +326,17 @@ exports.createSchemaCustomization = ({ actions }) => {
     translationType: String
     dataSource: String
     isTutorial: Boolean
+    signupBanner: SignupBanner
     features: [String]
     bugs: [String]
     security: [String]
     ingest: [String]
   }
+  type SignupBanner {
+    cta: String
+    url: String
+    text: String
+  }
 
   `;
 
@@ -388,7 +394,21 @@ exports.createResolvers = ({ createResolvers }) => {
       ingest: {
         resolve: (source) =>
           hasOwnProperty(source, 'ingest') ? source.ingest : null,
-      }
+      },
+    },
+    SignupBanner: {
+      cta: {
+        resolve: (source) =>
+          hasOwnProperty(source, 'cta') ? source.cta : null,
+      },
+      url: {
+        resolve: (source) =>
+          hasOwnProperty(source, 'url') ? source.url : null,
+      },
+      text: {
+        resolve: (source) =>
+          hasOwnProperty(source, 'text') ? source.text : null,
+      },
     },
   });
 };

diff --git a/src/components/DocPageBanner.js b/src/components/DocPageBanner.js
@@ -0,0 +1,86 @@
+// VSU
+import React from 'react';
+import { css } from '@emotion/react';
+import { Button, Link, Icon } from '@newrelic/gatsby-theme-newrelic';
+import lines from './bannerLines.svg';
+
+const DocPageBanner = ({ text, cta, url, height, onClose }) => {
+  const ctaWithDefault = cta ?? 'Start now';
+  const urlWithDefault = url ?? 'https://newrelic.com/signup';
+  return (
+    <div
+      css={css`
+        height: ${height};
+        position: absolute;
+        top: 0;
+        /* grid causes a 1 pixel gap on either side of the main body */
+        left: -1px;
+        width: calc(100% + 1px);
+        background: radial-gradient(
+          60% 170% at 20% -10%,
+          rgba(28, 231, 131, 0.66) 0%,
+          rgba(29, 215, 176, 0.2856) 36.94%,
+          rgba(29, 202, 211, 0) 100%
+        );
+        background-color: #212c31;
+        @media screen and (max-width: 760px) {
+          display: none;
+        }
+      `}
+    >
+      <div
+        css={css`
+          height: 100%;
+          position: absolute;
+          top: 0;
+          /* grid causes a 1 pixel gap on either side of the main body */
+          left: -1px;
+          width: calc(100% + 1px);
+          padding: 1.5rem;
+          background-image: url(${lines});
+          background-position: right;
+          background-repeat: no-repeat;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          p {
+            color: white;
+            margin-bottom: 0;
+            font-size: 28px;
+            @media screen and (max-width: 1100px) {
+              font-size: 1.5rem;
+              line-height: 100%;
+            }
+          }
+        `}
+      >
+        <p>{text}</p>
+        <Button
+          css={css`
+            height: 40px;
+          `}
+          as={Link}
+          to={urlWithDefault}
+          variant={Button.VARIANT.PRIMARY}
+          instrumentation={{ component: 'docBannerCta' }}
+        >
+          {ctaWithDefault}
+        </Button>
+        {onClose && (
+          <Icon
+            name="fe-x"
+            css={css`
+              color: white;
+              position: absolute;
+              top: 3px;
+              right: 3px;
+            `}
+            onClick={onClose}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DocPageBanner;