feature (ui): Add an MMDL Notification Banner on Mako Homepage

react-app/src/components/Banner/MMDLSpaBanner.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { InfoCircledIcon } from "@radix-ui/react-icons";
+const MMDLAlertBanner = () => {
+  const [isVisible, setIsVisible] = useState(true);
+  const handleDismiss = () => {
+    setIsVisible(false);
+  };
+  if (!isVisible) return null;
+  return (
+    <div className="bg-[#E1F3F8] grid md:grid-cols-[min-content_auto_min-content] md:grid-rows-[auto_auto] grid-cols-[auto_auto] gap-4 md:gap-x-4 border-l-[8px] border-[#00A6D2] p-3">
+      <InfoCircledIcon className="w-10 h-10" aria-hidden="true" />
+      <div className="flex gap-x-4 flex-grow">
+        <div className="flex flex-col flex-grow">
+          <h3 className="font-bold text-black text-lg break-words">
+            MMDL SPA forms available in OneMAC
+          </h3>
+          <p className="text-black leading-normal break-words">
+            Medicaid Alternative Benefit Plan, Premium and Cost Sharing, and CHIP Eligibility SPA
+            templates and implementation guides are now available in OneMAC. New submissions for
+            these SPA types are submitted through the OneMAC system effective [add date].
+          </p>
+        </div>
+      </div>
+      <div className="flex space-x-4 col-start-2 md:col-start-auto">
+        <a
+          href="/faq#mmdl-section"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="border-2 border-black rounded h-[38px] px-4 text font-bold text-center whitespace-nowrap"
+        >
+          Go to FAQs
+        </a>
+        <button onClick={handleDismiss} aria-label="Dismiss" className="rounded-full w-6 h-6">
+          <Cross2Icon className="w-full h-full" aria-hidden="true" />
+        </button>
+      </div>
+    </div>
+  );
+};
+export default MMDLAlertBanner;

react-app/src/components/Layout/index.tsx

@@ -12,6 +12,7 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import config from "@/config";
 import { ScrollToTop, SimplePageContainer, UserPrompt, Banner } from "@/components";
 import { isFaqPage, isProd } from "@/utils";
+import MMDLAlertBanner from "@/components/Banner/MMDLSpaBanner";
 
 /**
  * Custom hook that generates a list of navigation links based on the user's status and whether the current page is the FAQ page.
@@ -153,6 +154,7 @@ export const Layout = () => {
     <div className="min-h-full flex flex-col">
       <ScrollToTop />
       <UserPrompt />
+      {user?.user && <MMDLAlertBanner />}
       <UsaBanner isUserMissingRole={user?.user && customUserRoles === undefined} />
       <nav data-testid="nav-banner-d" className="bg-primary">
         <div className="max-w-screen-xl mx-auto px-4 lg:px-8">