feat: New Header Banner (#6)

* feat: New Header Banner

* fix: notification versions

src/features/notifications/components/CloseIcon.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+
+type Props = {
+  style?: React.CSSProperties
+}
+
+export const CloseIcon = ({ style }: Props) => (
+  <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={style}>
+    <circle cx="12.1406" cy="12" r="12" transform="rotate(180 12.1406 12)" fill="white" />
+    <path d="M16.1406 8L8.14062 16" stroke="#1A2B6B" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M8.14062 8L16.1406 16" stroke="#1A2B6B" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)

src/features/notifications/components/HeaderBanner.tsx

@@ -1,5 +1,8 @@
-import React from "react"
+import React, { useState, useEffect } from "react"
 import headerbanner from "@chainlink/design-system/headerbanner.module.css"
+import headerbannerCustom from "./headerBanner.module.css"
+import { clsx } from "~/lib"
+import { CloseIcon } from "./CloseIcon"
 
 type BannerType = "info" | "success" | "warning" | "danger"
 export type BannerContent = {
@@ -9,33 +12,35 @@ export type BannerContent = {
   linkUrl?: string
 }
 
-const bannerTypes: Record<BannerType, { primaryColour: string; alertColour: string; alertText: string }> = {
+const bannerTypes: Record<BannerType, { primaryColour: string }> = {
   info: {
     primaryColour: "var(--blue-800)",
-    alertColour: "var(--blue-600)",
-    alertText: "NEW",
   },
   success: {
     primaryColour: "var(--green-600)",
-    alertColour: "var(--green-400)",
-    alertText: "NEW",
   },
   warning: {
     primaryColour: "var(--yellow-400)",
-    alertColour: "var(--yellow-300)",
-    alertText: "ALERT",
   },
   danger: {
     primaryColour: "var(--red-600)",
-    alertColour: "var(--red-400)",
-    alertText: "ALERT",
   },
 }
 
 export const HeaderBanner: React.FC<{ bannerContent?: BannerContent }> = ({ bannerContent }) => {
-  if (!bannerContent) return null
+  const [isDismissed, setIsDismissed] = useState(true) // Change to false to show banner later to prevent flasing on page load for users who have already dismissed it
+  useEffect(() => {
+    const isDismissedLocalStorage = localStorage.getItem("headerBannerDismissed")
+    if (!isDismissedLocalStorage || isDismissedLocalStorage !== bannerContent?.description) {
+      setIsDismissed(false)
+    }
+  }, [isDismissed])
+  if (!bannerContent || isDismissed) return null
   return (
-    <div className={headerbanner.container} style={{ backgroundColor: bannerTypes[bannerContent.type].primaryColour }}>
+    <div
+      className={clsx(headerbanner.container, headerbannerCustom.container)}
+      style={{ backgroundColor: bannerTypes[bannerContent.type].primaryColour }}
+    >
       <p>
         {bannerContent.description}{" "}
         {bannerContent.linkUrl && (
@@ -44,6 +49,15 @@ export const HeaderBanner: React.FC<{ bannerContent?: BannerContent }> = ({ bann
           </a>
         )}
       </p>
+      <button
+        className={headerbannerCustom.dismiss}
+        onClick={() => {
+          localStorage.setItem("headerBannerDismissed", bannerContent.description)
+          setIsDismissed(true)
+        }}
+      >
+        <CloseIcon />
+      </button>
     </div>
   ) as React.ReactElement // Explicitly assigning to ReactElement cause TS is confused otherwise
 }

src/features/notifications/components/NotificationBanner.astro

@@ -3,4 +3,4 @@ import { NotificationData } from "../data"
 import { HeaderBanner } from "./HeaderBanner"
 ---
 
-<HeaderBanner bannerContent={NotificationData} />
+<HeaderBanner bannerContent={NotificationData} client:only="react" />

src/features/notifications/components/headerBanner.module.css

@@ -0,0 +1,31 @@
+.container {
+  position: relative;
+}
+
+.dismiss {
+  position: absolute;
+  right: var(--space-24x);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--space-4x);
+  cursor: pointer;
+  background: white;
+  border-radius: 50%;
+  color: var(--color-primary);
+}
+
+@media (max-width: 768px) {
+  .container {
+    justify-content: start;
+  }
+
+  .container p {
+    padding-right: var(--space-6x);
+  }
+  .dismiss {
+    right: var(--space-6x);
+  }
+}