From f0df674e07fe55f49e59e7dd658f58d04aac0805 Mon Sep 17 00:00:00 2001
From: Jeff Escalante <jescalan@users.noreply.github.com>
Date: Tue, 28 Apr 2020 13:53:30 -0400
Subject: [PATCH] add alert banner to website

---
 website/data/alert-banner.js |  8 ++++++++
 website/package-lock.json    | 22 ++++++++++++++++++++++
 website/package.json         |  1 +
 website/pages/_app.js        |  7 ++++++-
 website/pages/style.css      |  1 +
 5 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 website/data/alert-banner.js

diff --git a/website/data/alert-banner.js b/website/data/alert-banner.js
new file mode 100644
index 0000000000..6e774a88dc
--- /dev/null
+++ b/website/data/alert-banner.js
@@ -0,0 +1,8 @@
+export const ALERT_BANNER_ACTIVE = true
+
+// https://github.com/hashicorp/web-components/tree/master/packages/alert-banner
+export default {
+  tag: 'Announcing',
+  url: 'https://www.hashicorp.com/products/consul/service-on-azure',
+  text: 'HashiCorp Consul Service on Azure Public Beta Available Now',
+}
diff --git a/website/package-lock.json b/website/package-lock.json
index b51c5d0a4d..9acbbec21a 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -1179,6 +1179,28 @@
       "resolved": "https://registry.npmjs.org/@hashicorp/react-alert/-/react-alert-2.0.0.tgz",
       "integrity": "sha512-9CvkSJ2Onvy+1sXg0n0E3V4X0tl4u9wmp10ISQ4Wh55tstVeBBj/WhqBg8+MZlm9Ib9K903J2A3aDSWBo6k44w=="
     },
+    "@hashicorp/react-alert-banner": {
+      "version": "3.0.13",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-alert-banner/-/react-alert-banner-3.0.13.tgz",
+      "integrity": "sha512-/xybDm/YKtisg+NS6aneWqCe/fn9UA/S16vnV2L9zeRWc0cluMSWajmbM7NyCSowkfJzEduuMNGOAjO23rY7yA==",
+      "requires": {
+        "@hashicorp/react-global-styles": "^4.2.0",
+        "js-cookie": "2.2.0",
+        "slugify": "1.3.4"
+      },
+      "dependencies": {
+        "js-cookie": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.0.tgz",
+          "integrity": "sha1-Gywnmm7s44ChIWi5JIUmWzWx7/s="
+        },
+        "slugify": {
+          "version": "1.3.4",
+          "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.3.4.tgz",
+          "integrity": "sha512-KP0ZYk5hJNBS8/eIjGkFDCzGQIoZ1mnfQRYS5WM3273z+fxGWXeN0fkwf2ebEweydv9tioZIHGZKoF21U07/nw=="
+        }
+      }
+    },
     "@hashicorp/react-button": {
       "version": "2.1.9",
       "resolved": "https://registry.npmjs.org/@hashicorp/react-button/-/react-button-2.1.9.tgz",
diff --git a/website/package.json b/website/package.json
index 0fd70664cb..96436b9e3c 100644
--- a/website/package.json
+++ b/website/package.json
@@ -9,6 +9,7 @@
     "@hashicorp/mktg-assets": "^1.0.0-alpha.7",
     "@hashicorp/nextjs-scripts": "^6.1.0",
     "@hashicorp/react-alert": "^2.0.0",
+    "@hashicorp/react-alert-banner": "^3.0.13",
     "@hashicorp/react-button": "^2.1.9",
     "@hashicorp/react-call-to-action": "^0.1.6",
     "@hashicorp/react-case-study-slider": "^2.0.13",
diff --git a/website/pages/_app.js b/website/pages/_app.js
index dc01cd80d3..37ccf5e042 100644
--- a/website/pages/_app.js
+++ b/website/pages/_app.js
@@ -5,13 +5,15 @@ import Router from 'next/router'
 import ProductSubnav from '../components/subnav'
 import MegaNav from '@hashicorp/react-mega-nav'
 import Footer from '../components/footer'
+import AlertBanner from '@hashicorp/react-alert-banner'
 import { ConsentManager, open } from '@hashicorp/react-consent-manager'
 import consentManagerConfig from '../lib/consent-manager-config'
 import bugsnagClient from '../lib/bugsnag'
+import anchorLinkAnalytics from '../lib/anchor-link-analytics'
+import alertBannerData, { ALERT_BANNER_ACTIVE } from '../data/alert-banner'
 import Error from './_error'
 import Head from 'next/head'
 import HashiHead from '@hashicorp/react-head'
-import anchorLinkAnalytics from '../lib/anchor-link-analytics'
 
 Router.events.on('routeChangeStart', NProgress.start)
 Router.events.on('routeChangeError', NProgress.done)
@@ -80,6 +82,9 @@ class NextApp extends App {
             { href: '/fonts/dejavu/mono.woff2', as: 'font' },
           ]}
         />
+        {ALERT_BANNER_ACTIVE && (
+          <AlertBanner {...alertBannerData} theme="consul" />
+        )}
         <MegaNav product="Consul" />
         <ProductSubnav />
         <div className="content">
diff --git a/website/pages/style.css b/website/pages/style.css
index 1087f939dd..1cd9528adc 100644
--- a/website/pages/style.css
+++ b/website/pages/style.css
@@ -35,6 +35,7 @@
 @import '~@hashicorp/react-call-to-action/dist/style.css';
 @import '~@hashicorp/react-case-study-slider/dist/style.css';
 @import '~@hashicorp/react-code-block/dist/style.css';
+@import '~@hashicorp/react-alert-banner/dist/style.css';
 
 /* Local Components */
 @import '../components/footer/style.css';