From 47cc5a49c268a84da1b4e8f9b3700acd09ed2ec4 Mon Sep 17 00:00:00 2001
From: Andie Swift <andie.swift5@gmail.com>
Date: Fri, 13 Sep 2024 14:27:35 -0500
Subject: [PATCH] started base UI componets for banner & card, not tested,
 still need to style

---
 services/ui-src/src/components/MACCard.tsx    | 31 ++++++++++-
 .../src/components/NotificationBanner.tsx     | 51 +++++++++++++++++++
 2 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 services/ui-src/src/components/NotificationBanner.tsx

diff --git a/services/ui-src/src/components/MACCard.tsx b/services/ui-src/src/components/MACCard.tsx
index 951e035a8..bfd33b10d 100644
--- a/services/ui-src/src/components/MACCard.tsx
+++ b/services/ui-src/src/components/MACCard.tsx
@@ -1,5 +1,6 @@
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, ReactChildren } from "react";
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { Button } from "@cmsgov/design-system";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link } from "react-router-dom";
 import closingX from "../images/ClosingX.svg";
@@ -34,6 +35,15 @@ export type MACCardListProps = PropsWithChildren<{
   legend: string;
   additionalContainerClassName?: string;
 }>;
+export type MACNotificationCardProps = PropsWithChildren<{
+  header: string;
+  body: ReactChildren;
+  date: string;
+  button?: {
+    text: string;
+    link: string;
+  };
+}>;
 
 /** Styled wrapper for use in MACCards, consolidates the use of 'mac-card'
  * css class. */
@@ -185,3 +195,22 @@ export const MACRemovableCard = ({
     </MACCardWrapper>
   );
 };
+
+/** A MACCard for use for notification banners on home screen */
+export const MACNotificationCard = ({
+  header,
+  body,
+  date,
+  button,
+}: MACNotificationCardProps) => {
+  return (
+    <MACCardWrapper>
+      <div>
+        {header && <MACCardTitle title={header} />}
+        {body}
+        {button && <Button href={button.link}>{button.text}</Button>}
+        {date}
+      </div>
+    </MACCardWrapper>
+  );
+};
diff --git a/services/ui-src/src/components/NotificationBanner.tsx b/services/ui-src/src/components/NotificationBanner.tsx
new file mode 100644
index 000000000..8c96d1d50
--- /dev/null
+++ b/services/ui-src/src/components/NotificationBanner.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { Alert, Button } from "@cmsgov/design-system";
+import closingX from "../images/AlertClosingX.svg";
+
+const CLOSING_X_IMAGE = <img alt="" className="closing-x" src={closingX} />;
+
+interface NotificationBannerProps {
+  header: string;
+  body: string;
+  button?: {
+    text: string;
+    link: string;
+  };
+}
+
+const NotificationBanner: React.FC<NotificationBannerProps> = (
+  props: NotificationBannerProps
+) => {
+  // notification state should be grabbed from context
+  const [showNotification, setShowNotification] = useState<boolean>(true);
+
+  // closing banner invokes API call
+  const close = () => {
+    // TODO: make an API call to
+    setShowNotification(false);
+  };
+
+  if (!showNotification) return <></>;
+  return (
+    <div className="alert-bar" id="alert-bar">
+      {/* should use cms Alert - informational */}
+      <Alert>
+        {/* TODO: put in flex, make button black */}
+        <h2 className="s-c-alert__heading">{props.header}</h2>
+        <p className="ds-c-alert__text">{props.body}</p>
+        {props.button && (
+          <Button href={props.button.link}>{props.button.text}</Button>
+        )}
+        <button
+          aria-label={"Dismiss alert"}
+          className="close-button"
+          onClick={close}
+        >
+          {CLOSING_X_IMAGE}
+        </button>
+      </Alert>
+    </div>
+  );
+};
+
+export default NotificationBanner;