Merge pull request #381 from gravitational/ValtteriSavonen/add-new-ev…

…ent-banner-system

Add new event banner system

.env

@@ -11,3 +11,8 @@ NEXT_PUBLIC_INKEEP_INTEGRATION_ID=""
 NEXT_PUBLIC_POSTHOG_API_KEY="goteleport_com"
 NEXT_PUBLIC_POSTHOG_API_URL=""
 NEXT_PUBLIC_POSTHOG_ENABLED=false
+
+# Sanity
+NEXT_PUBLIC_SANITY_PROJECT_ID=y1ellg96
+NEXT_PUBLIC_SANITY_DATASET=production
+SANITY_READ_TOKEN=""

components/EventBanner/EventBanner.module.css

@@ -0,0 +1,112 @@
+.banner {
+  box-sizing: border-box;
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  z-index: 1999;
+  top: 0;
+  background: #009984;
+  color: #ffffff;
+  height: 37px;
+  gap: 24px;
+  text-decoration: none;
+  padding: 0;
+  width: 100%;
+  max-width: 100vw;
+  @media (--sm-scr) {
+    position: sticky;
+    padding: 0 16px 0 16px;
+    height: 48px;
+    gap: 16px;
+  }
+}
+
+.mainText {
+  font-size: 14px;
+  max-width: 600px;
+  font-weight: 700;
+  font-family: Lato, sans-serif;
+  line-height: 21px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2 /* Number of lines to show before truncating */;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  @media (--sm-scr) {
+    font-size: 12px;
+  }
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 12px;
+  white-space: nowrap;
+  @media (--sm-scr) {
+    flex-direction: column;
+    gap: 4px;
+  }
+}
+
+.styledBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.styledText {
+  font-size: 14px;
+  min-width: fit-content;
+  font-weight: 400;
+  font-family: Lato, sans-serif;
+  line-height: 21px;
+  @media (--sm-scr) {
+    font-size: 12px;
+    line-height: 12px;
+  }
+}
+
+.linkButton {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 700;
+  padding: 0;
+  min-width: 0;
+  text-transform: none;
+  vertical-align: inherit;
+  color: #ffffff;
+  text-decoration: none;
+  @media (--sm-scr) {
+    gap: 16px;
+    font-size: 12px;
+  }
+}
+
+.linkButton:hover {
+  text-decoration: underline;
+}
+
+.icon {
+  display: flex;
+}
+
+.icon svg {
+  height: 16px;
+  max-height: 16px;
+  width: 16px;
+  max-width: 16px;
+  @media (--sm-scr) {
+    height: 12px;
+    max-height: 12px;
+    width: 12px;
+    max-width: 12px;
+  }
+}

components/EventBanner/EventBanner.tsx

@@ -0,0 +1,95 @@
+import { getParsedDate } from "utils/date";
+import CalendarTrans from "./assets/calendar-trans.svg?react";
+import ArrowRight from "./assets/arrow-right.svg?react";
+import MapPin from "./assets/map-pin.svg?react";
+import VirtualIcon from "./assets/video-meeting.svg?react";
+import Link from "next/link";
+import styles from "./EventBanner.module.css";
+import { useEffect, useState } from "react";
+
+export interface EventProps {
+  end?: string | null;
+  link?: string;
+  location?: string | null;
+  start?: string | null;
+  title?: string | null;
+  cta?: string;
+  isVirtual?: boolean;
+  bannerType?: "custom" | "event" | string;
+}
+
+export interface Events {
+  events: EventProps[];
+}
+
+export interface Event {
+  event: EventProps;
+}
+
+export const getComingEvent = (event: EventProps) => {
+  if (!event || !event?.title) return null;
+  const currentDate = new Date().setHours(0, 0, 0, 0);
+  const endDate = event.end ? new Date(event.end).setHours(0, 0, 0, 0) : null;
+
+  if (endDate && currentDate > endDate) {
+    //Event end date has gone
+    return null;
+  }
+  return event; //No end date set or end date is in the future
+};
+
+export const EventBanner: React.FC<{
+  initialEvent: EventProps;
+}> = ({ initialEvent }) => {
+  const [event, setEvent] = useState<EventProps>(initialEvent);
+  useEffect(() => {
+    const fetchEvent = async () => {
+      const tempEvent = await fetch("/api/getfeaturedevent/").then(
+        (res) => res.status === 200 && res.json()
+      );
+      tempEvent && setEvent(tempEvent.data as EventProps);
+    };
+    fetchEvent();
+  }, []);
+  return event ? (
+    <Link className={styles.banner} href={event.link}>
+      <div className={styles.mainText}>{event.title}</div>
+      <div className={styles.container}>
+        {event.start && (
+          <div className={styles.styledBox}>
+            <div className={styles.icon}>
+              <CalendarTrans />
+            </div>
+            <div className={styles.styledText}>
+              {getParsedDate(new Date(event.start), "MMM d")}
+              {event.end != null &&
+                "-" + getParsedDate(new Date(event.end), "d")}
+            </div>
+          </div>
+        )}
+
+        {event.bannerType === "custom" &&
+          (event.location || event.isVirtual) && (
+            <div className={styles.styledBox}>
+              <div className={styles.icon}>
+                {event.location === "virtual" || event.isVirtual ? (
+                  <VirtualIcon viewBox="0 0 16 16" />
+                ) : (
+                  <MapPin />
+                )}
+              </div>
+              <div className={styles.styledText}>
+                {event.location || (event.isVirtual && "Virtual")}
+              </div>
+            </div>
+          )}
+      </div>
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <div className={styles.linkButton}>{event.cta || "Register"}</div>
+        <div className={styles.icon}>
+          <ArrowRight />
+        </div>
+      </div>
+    </Link>
+  ) : null;
+};

components/EventBanner/index.ts

@@ -0,0 +1 @@
+export * from "./EventBanner";

components/Feedback/Feedback.module.css

@@ -1,8 +1,8 @@
 rect.btn {
-  stroke:#fff;
-  fill:#fff;
-  fill-opacity:0;
-  stroke-opacity:0;
+  stroke: #fff;
+  fill: #fff;
+  fill-opacity: 0;
+  stroke-opacity: 0;
 }
 
 .svgContainer img {
@@ -47,11 +47,8 @@ rect.btn {
   font-weight: var(--fw-bold);
   color: var(--color-darkest);
   text-align: center;
-
-
 }
 
-
 .buttonContainer {
   display: block;
   justify-content: center;

components/Header/Header.module.css

@@ -4,18 +4,23 @@
   align-items: center;
   flex-basis: auto;
   height: 80px;
-  left: 0;
-  position: absolute;
   right: 0;
-  top: 0;
+  position: relative;
   z-index: 2000;
-
+  width: 100%;
+  max-width: 100vw;
   @media (--sm-scr) {
-    position: fixed;
+    position: sticky;
+    top:0;
     height: 48px;
     background: var(--color-white);
     box-shadow: 0 1px 4px rgba(0 0 0 / 24%);
   }
+  &.margin {
+    @media (--sm-scr) {
+      top:48px;
+    }
+  }
 }
 
 .logo-link {
@@ -84,7 +89,6 @@
   @media (--sm-scr) {
     position: fixed;
     z-index: 2000;
-    top: 48px;
     right: 0;
     bottom: 0;
     left: 0;

components/Header/Header.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
 import Icon from "components/Icon";
 import Logo from "components/Logo";
 import Menu from "components/Menu";
@@ -9,37 +9,54 @@ import HeaderCTA from "./HeaderCTA";
 import styles from "./Header.module.css";
 import Magnifier from "./assets/magnify.svg?react";
 import Link from "components/Link";
+import {
+  EventBanner,
+  EventProps,
+  getComingEvent,
+} from "components/EventBanner";
+// @ts-ignore
+import eventData from "../../public/data/events.json";
 
 const Header = () => {
+  const selectedEvent = eventData
+    ? getComingEvent(eventData as EventProps)
+    : null;
   const [isNavigationVisible, setIsNavigationVisible] =
     useState<boolean>(false);
   const toggleNavigaton = useCallback(() => {
     setIsNavigationVisible((value) => !value);
     blockBodyScroll(isNavigationVisible);
   }, [isNavigationVisible]);
-
   return (
-    <header className={styles.wrapper}>
-      <a href="/" className={styles["logo-link"]}>
-        <Logo />
-      </a>
-      <HeadlessButton
-        onClick={toggleNavigaton}
-        className={styles.hamburger}
-        data-testid="hamburger"
-        aria-details="Toggle Main navigation"
-      >
-        <Icon name={isNavigationVisible ? "close" : "hamburger"} size="md" />
-      </HeadlessButton>
-      <div
-        className={cn(styles.content, {
-          [styles.visible]: isNavigationVisible,
-        })}
+    <>
+      {selectedEvent && (
+        <EventBanner initialEvent={selectedEvent as EventProps} />
+      )}
+      <header
+        className={`${styles.wrapper} ${selectedEvent ? styles.margin : " "}`}
       >
-        <Menu />
-        <HeaderCTA />
-      </div>
-    </header>
+        <a href="/" className={styles["logo-link"]}>
+          <Logo />
+        </a>
+        <HeadlessButton
+          onClick={toggleNavigaton}
+          className={styles.hamburger}
+          data-testid="hamburger"
+          aria-details="Toggle Main navigation"
+        >
+          <Icon name={isNavigationVisible ? "close" : "hamburger"} size="md" />
+        </HeadlessButton>
+        <div
+          className={cn(styles.content, {
+            [styles.visible]: isNavigationVisible,
+          })}
+          style={{ top: selectedEvent ? "96px" : "48px" }}
+        >
+          <Menu />
+          <HeaderCTA />
+        </div>
+      </header>
+    </>
   );
 };
 

layouts/DocsPage/DocsPage.module.css

@@ -5,11 +5,6 @@
 
   @media (--sm-scr) {
     flex-direction: column;
-    padding-top: var(--m-6);
-  }
-
-  @media (--md-scr) {
-    padding-top: var(--m-10);
   }
 }