Add persistence to ad banner (#710)

* feature: add persistence to the ad banner with localStorage

* fix: smooth transition

* fix: remove class not required

* update copy for best of devday

* remove
 not used properties

* delete GH test action

* move GH test action

* fix: fixed height logo hero banner

* fix: fixed height logo Auth0 by Okta

* fix: render the ttb banner smoothly when loading

Author: byron-okta

.github/workflows/test.yml .github/inactive/test.yml

@@ -1,12 +1,103 @@
+const MESSAGE_BAR_STATE = {
+  CLOSED: "CLOSED",
+  OPEN: "OPEN",
+};
+
+const MESSAGE_BAR_STATUS = {
+  ACTIVE: "ACTIVE",
+  INACTIVE: "INACTIVE",
+};
+
+const messageBar = {
+  status: MESSAGE_BAR_STATUS.ACTIVE,
+  id: {
+    key: "messageBar_id",
+    value: "BEST_OF_DEVDAY_2024",
+  },
+  state: {
+    key: "messageBar_state",
+  },
+};
+
+const closeMessageBar = () => {
+  const isMessageBarActive = messageBar.status === MESSAGE_BAR_STATUS.ACTIVE;
+
+  if (!isMessageBarActive) {
+    return;
+  }
+
+  window.localStorage.setItem(messageBar.state.key, MESSAGE_BAR_STATE.CLOSED);
+
+  document.querySelector(".top-banner-bg").classList.add("closed");
+  document.querySelector(".top-banner").classList.add("closed");
+  document.querySelector(".content").classList.remove("top-banner-open");
+  document.querySelector(".top-mobile").classList.remove("top-banner-open");
+  document.querySelector(".navbar").classList.remove("top-banner-open");
+};
+
+const renderTopBanner = () => {
+  document.querySelector(".top-banner-bg").classList.remove("closed");
+  document.querySelector(".top-banner").classList.remove("closed");
+  document.querySelector(".content").classList.add("top-banner-open");
+  document.querySelector(".top-mobile").classList.add("top-banner-open");
+  document.querySelector(".navbar").classList.add("top-banner-open");
+};
+
+const loadBannerStateFromLocalStorage = () => {
+  let messageBarId = window.localStorage.getItem(messageBar.id.key);
+  let messageBarState = window.localStorage.getItem(messageBar.state.key);
+
+  if (!messageBarId) {
+    window.localStorage.setItem(messageBar.id.key, messageBar.id.value);
+    messageBarId = window.localStorage.getItem(messageBar.id.key);
+  }
+
+  if (!messageBarState) {
+    window.localStorage.setItem(messageBar.state.key, MESSAGE_BAR_STATE.OPEN);
+    messageBarState = window.localStorage.getItem(messageBar.state.key);
+  }
+
+  switch (messageBar.status) {
+    case MESSAGE_BAR_STATUS.ACTIVE: {
+      const isExistingCta = messageBarId === messageBar.id.value;
+
+      if (!isExistingCta) {
+        window.localStorage.setItem(messageBar.id.key, messageBar.id.value);
+        window.localStorage.setItem(
+          messageBar.state.key,
+          MESSAGE_BAR_STATE.OPEN
+        );
+
+        renderTopBanner();
+
+        return;
+      }
+
+      switch (messageBarState) {
+        case MESSAGE_BAR_STATE.OPEN: {
+          renderTopBanner();
+
+          return;
+        }
+        default: {
+          return;
+        }
+      }
+    }
+    default: {
+      return;
+    }
+  }
+};
+
 export function TopBanner() {
   document.addEventListener("DOMContentLoaded", function () {
+    loadBannerStateFromLocalStorage();
+
     document
       .querySelector(".close-top-banner")
       .addEventListener("click", () => {
-        document.querySelector(".top-banner-bg").classList.add("closed");
-        document.querySelector(".top-banner").classList.add("closed");
-        document.querySelector(".top-banner-spacer").classList.add("hide");
-        document.querySelector(".navbar").classList.remove("top-banner-open");
+        closeMessageBar();
       });
   });
 }

src/website/top-banner.js

@@ -126,7 +126,7 @@ body {
 
   &.top-banner-open {
     margin-top: 5px;
-    transition: all 0.2s linear;
+    transition: margin-top 0.4s linear;
 
     +breakpoint('tablet') {
       margin-top: 48px;
@@ -141,11 +141,21 @@ body {
     border-bottom: 1px solid rgba(#4A4A4A, 0.6);
     clearfix();
     margin: 0 -15px;
+    padding-top: 0;
+    transition: padding-top 0.4s linear;
 
     +breakpoint('tablet') {
       border: none;
       margin: 0;
     }
+
+    &.top-banner-open {
+      padding-top: 50px;
+
+      +breakpoint('tablet') {
+        padding-top: 0;
+      }
+    }
   }
 
   .menu-trigger {
@@ -299,6 +309,7 @@ body {
       position: absolute;
       right: 15px;
       top: 28px;
+      height: 32px;
     }
 
     +breakpoint('desktop') {
@@ -442,6 +453,19 @@ body {
   }
 }
 
+.content {
+  +breakpoint('tablet') {
+    padding-top: 0;
+    transition: padding-top 0.4s linear;
+  }
+
+  &.top-banner-open {
+    +breakpoint('tablet') {
+      padding-top: 50px;
+    }
+  }
+}
+
 // banner-jwt
 .banner-jwt {
   background: black;
@@ -503,10 +527,12 @@ body {
 
     img {
       width: 70px;
+      height: 70px;
       display: block;
 
       +breakpoint('desktop') {
         width: 80px;
+        height: 80px;
       }
     }
   }
@@ -1848,13 +1874,14 @@ footer {
   width: 100%;
   height: 48px;
   z-index: 100;
+  transition: height 0.4s linear;
 
   &.closed {
     visibility: hidden;
     height: 0;
     opacity: 0;
     padding: 0;
-    transition: all 0.1s linear;
+    transition: height 0.4s linear;
   }
 }
 
@@ -1875,13 +1902,14 @@ footer {
   left: 0;
   right: 0;
   overflow: hidden;
+  transition: all 0.4s linear;
 
   &.closed {
     visibility: hidden;
     height: 0;
     opacity: 0;
     padding: 0;
-    transition: all 0.2s linear;
+    transition: all 0.4s linear;
   }
 
   .top-banner-container {
@@ -1947,6 +1975,6 @@ footer {
 
   &.hide {
     height: 0;
-    transition: all 0.2s linear;
+    transition: all 0.4s linear;
   }
 }

stylus/website/index.styl

@@ -45,7 +45,8 @@ html(lang='en')
 
     include ./navigation.pug
 
-    block content
+    .content
+      block content
 
     footer
       .container

views/website/layout.pug

@@ -1,13 +1,11 @@
-.top-banner-bg
-.top-banner
+.top-banner-bg.closed
+.top-banner.closed
   .top-banner-container
-    a(href="https://a0.to/jwt-io-feedback" target="_blank") Learn about the upcoming changes to jwt.io and share your feedback
+    a(href="https://pages.okta.com/2024-11-WBN-Best-of-Dev-Day_LP/" target="_blank") Missed DevDay24? Register for the Best of DevDay
       span(aria-hiden="true") →
     button.close-top-banner +
 
-.top-banner-spacer
-
-nav.navbar.closed.top-banner-open
+nav.navbar
     .container
       .top-mobile
         .menu-trigger