@wavelengthusaf/components 2.9.2 → 2.9.3

package/dist/cjs/index.d.cts

@@ -294,14 +294,19 @@ interface WavelengthAlertProps {
     id?: string;
     height?: string;
     width?: string;
+    variant?: "caveman" | "basic" | "civilized";
     backgroundColor?: string;
-    alertHeader?: string;
+    alertType?: string;
     alertDescription?: string;
     datatestid?: string;
     viewed?: boolean;
+    timeStamp?: string;
+    appName?: string;
+    url?: string;
+    initiator?: string;
     onClose?: () => void;
 }
-declare function WavelengthAlert({ viewed, width, height, backgroundColor, alertHeader, alertDescription, datatestid, id, onClose, }: WavelengthAlertProps): react_jsx_runtime.JSX.Element;
+declare function WavelengthAlert({ viewed, width, height, backgroundColor, appName, alertType, alertDescription, datatestid, variant, timeStamp, url, initiator, id, onClose, }: WavelengthAlertProps): react_jsx_runtime.JSX.Element;
 
 interface WavelengthFooterProps {
     text?: string;

package/dist/esm/index.d.ts

@@ -294,14 +294,19 @@ interface WavelengthAlertProps {
     id?: string;
     height?: string;
     width?: string;
+    variant?: "caveman" | "basic" | "civilized";
     backgroundColor?: string;
-    alertHeader?: string;
+    alertType?: string;
     alertDescription?: string;
     datatestid?: string;
     viewed?: boolean;
+    timeStamp?: string;
+    appName?: string;
+    url?: string;
+    initiator?: string;
     onClose?: () => void;
 }
-declare function WavelengthAlert({ viewed, width, height, backgroundColor, alertHeader, alertDescription, datatestid, id, onClose, }: WavelengthAlertProps): react_jsx_runtime.JSX.Element;
+declare function WavelengthAlert({ viewed, width, height, backgroundColor, appName, alertType, alertDescription, datatestid, variant, timeStamp, url, initiator, id, onClose, }: WavelengthAlertProps): react_jsx_runtime.JSX.Element;
 
 interface WavelengthFooterProps {
     text?: string;

package/dist/esm/index.js

@@ -5407,93 +5407,123 @@ function WavelengthAccessAlert({
 
 // src/components/PageComponents/WavelengthAlert.tsx
 import Close from "@mui/icons-material/Close";
-import { IconButton as IconButton3 } from "@mui/material";
+import { IconButton as IconButton3, SvgIcon } from "@mui/material";
 import NotificationsIcon from "@mui/icons-material/Notifications";
 import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 function WavelengthAlert({
   viewed,
   width: width2 = "320px",
-  height: height2 = "96px",
-  backgroundColor: backgroundColor2 = "rgba(229, 246, 253, 1)",
-  alertHeader = "Access Requested",
+  height: height2,
+  backgroundColor: backgroundColor2 = "#FBFBFB",
+  appName,
+  alertType = "Access Requested",
   alertDescription = "Keenan Ray has requested to be added as a User to your App",
   datatestid,
+  variant,
+  timeStamp,
+  url,
+  initiator,
   id,
   onClose
 }) {
-  if (!viewed) {
-    return /* @__PURE__ */ jsxs15(
-      "div",
-      {
-        role: "alert",
-        id,
-        "data-testid": datatestid,
-        style: {
-          width: width2,
-          height: height2,
-          backgroundColor: backgroundColor2,
-          fontFamily: "Roboto, sans-serif",
-          border: "1px solid rgba(2, 136, 209, 1)",
-          borderRadius: "4px",
-          display: "flex",
-          flexDirection: "row",
-          boxSizing: "border-box",
-          alignItems: "flex-start",
-          padding: "12px 16px 10px 16px"
-        },
-        children: [
-          " ",
-          /* @__PURE__ */ jsx20(NotificationsIcon, { sx: { width: "24px", padding: "0px", color: "rgba(2, 136, 209, 1)" } }),
-          /* @__PURE__ */ jsxs15("div", { style: { display: "flex", flexDirection: "column", gap: "4px", width: "250px", marginLeft: "12px" }, children: [
-            /* @__PURE__ */ jsx20("label", { htmlFor: "", style: { fontSize: "1rem", lineHeight: "150%", letterSpacing: "0.15px", fontWeight: 500 }, children: alertHeader }),
-            /* @__PURE__ */ jsx20(
-              "div",
-              {
-                style: { fontSize: ".875rem", fontWeight: 400, lineHeight: "143%", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", textOverflow: "ellipsis" },
-                children: alertDescription
-              }
-            )
-          ] }),
-          onClose && /* @__PURE__ */ jsx20(IconButton3, { sx: { padding: "0px", width: "20px" }, onClick: onClose, children: /* @__PURE__ */ jsx20(Close, {}) })
-        ]
-      }
-    );
+  const viewedStyles = viewed ? {
+    backgroundColor: "#DFDCDC",
+    border: "1px solid #A0A2A3",
+    iconColor: "#A0A2A3"
+  } : {
+    backgroundColor: backgroundColor2,
+    border: "1px solid rgba(2, 136, 209, 1)",
+    iconColor: "rgba(2, 136, 209, 1)"
+  };
+  const baseContainerStyle = {
+    width: width2,
+    height: height2 || "fit-content",
+    backgroundColor: viewedStyles.backgroundColor,
+    fontFamily: "Roboto, sans-serif",
+    border: viewedStyles.border,
+    borderRadius: "4px",
+    display: "flex",
+    flexDirection: "row",
+    boxSizing: "border-box",
+    alignItems: "flex-start",
+    padding: "12px 16px 10px 16px",
+    color: "#1E4620",
+    position: variant === "civilized" ? "relative" : void 0
+  };
+  const iconStyle = {
+    width: "24px",
+    padding: "0px",
+    color: viewedStyles.iconColor
+  };
+  if (variant === "caveman") {
+    return /* @__PURE__ */ jsxs15("div", { role: "alert", id, "data-testid": datatestid, style: baseContainerStyle, children: [
+      /* @__PURE__ */ jsx20(NotificationsIcon, { sx: iconStyle }),
+      /* @__PURE__ */ jsxs15("a", { href: url, style: { display: "flex", flexDirection: "column", gap: "4px", width: "250px", marginLeft: "12px", textDecoration: "none", color: baseContainerStyle.color }, children: [
+        /* @__PURE__ */ jsx20("label", { style: { fontSize: "1rem", lineHeight: "150%", letterSpacing: "0.15px", fontWeight: 550 }, children: timeStamp }),
+        /* @__PURE__ */ jsx20(
+          "div",
+          {
+            style: {
+              fontSize: ".875rem",
+              fontWeight: 400,
+              lineHeight: "143%",
+              display: "-webkit-box",
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: "vertical",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            },
+            children: alertType
+          }
+        )
+      ] }),
+      onClose && /* @__PURE__ */ jsx20(IconButton3, { sx: { padding: "0px", width: "20px" }, onClick: onClose, children: /* @__PURE__ */ jsx20(Close, {}) })
+    ] });
+  } else if (variant === "basic") {
+    return /* @__PURE__ */ jsxs15("div", { role: "alert", id, "data-testid": datatestid, style: baseContainerStyle, children: [
+      /* @__PURE__ */ jsx20(NotificationsIcon, { sx: iconStyle }),
+      /* @__PURE__ */ jsxs15("a", { href: url, style: { display: "flex", flexDirection: "column", gap: "4px", width: "250px", marginLeft: "12px", textDecoration: "none", color: baseContainerStyle.color }, children: [
+        /* @__PURE__ */ jsx20("label", { style: { fontSize: "14px", lineHeight: "150%", letterSpacing: "0.15px", fontWeight: 500 }, children: timeStamp }),
+        /* @__PURE__ */ jsx20("div", { style: { fontSize: "16px", fontWeight: 550, lineHeight: "24px" }, children: alertType }),
+        /* @__PURE__ */ jsxs15("div", { style: { fontSize: "14px", lineHeight: "20px", fontWeight: 400 }, children: [
+          "App: ",
+          appName
+        ] })
+      ] }),
+      onClose && /* @__PURE__ */ jsx20(IconButton3, { sx: { padding: "0px", width: "20px" }, onClick: onClose, children: /* @__PURE__ */ jsx20(Close, {}) })
+    ] });
   } else {
-    return /* @__PURE__ */ jsxs15(
-      "div",
-      {
-        role: "alert",
-        id,
-        "data-testid": datatestid,
-        style: {
-          width: width2,
-          height: height2,
-          backgroundColor: backgroundColor2 = "#DFDCDC",
-          fontFamily: "Roboto, sans-serif",
-          border: "1px solid #A0A2A3",
-          borderRadius: "4px",
-          display: "flex",
-          flexDirection: "row",
-          boxSizing: "border-box",
-          alignItems: "flex-start",
-          padding: "12px 16px 10px 16px"
-        },
-        children: [
-          /* @__PURE__ */ jsx20(NotificationsIcon, { sx: { width: "24px", padding: "0px", color: "#A0A2A3" } }),
-          /* @__PURE__ */ jsxs15("div", { style: { display: "flex", flexDirection: "column", gap: "4px", width: "250px", marginLeft: "12px" }, children: [
-            /* @__PURE__ */ jsx20("label", { htmlFor: "", style: { fontSize: "1rem", lineHeight: "150%", letterSpacing: "0.15px", fontWeight: 500 }, children: alertHeader }),
-            /* @__PURE__ */ jsx20(
-              "div",
-              {
-                style: { fontSize: ".875rem", fontWeight: 400, lineHeight: "143%", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", textOverflow: "ellipsis" },
-                children: alertDescription
-              }
-            )
-          ] }),
-          onClose && /* @__PURE__ */ jsx20(IconButton3, { sx: { padding: "0px", width: "20px" }, onClick: onClose, children: /* @__PURE__ */ jsx20(Close, {}) })
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxs15("div", { role: "alert", id, "data-testid": datatestid, style: baseContainerStyle, children: [
+      /* @__PURE__ */ jsx20(NotificationsIcon, { sx: iconStyle }),
+      /* @__PURE__ */ jsxs15("a", { href: url, style: { display: "flex", flexDirection: "column", gap: "7px", width: "250px", marginLeft: "12px", textDecoration: "none", color: baseContainerStyle.color }, children: [
+        /* @__PURE__ */ jsx20("label", { style: { fontSize: "16px", lineHeight: "24px", letterSpacing: "0.15px", fontWeight: 550 }, children: alertType }),
+        /* @__PURE__ */ jsx20("div", { style: { fontSize: "14px", fontWeight: 400, lineHeight: "20px", letterSpacing: "0.25px", width: "200px" }, children: alertDescription }),
+        /* @__PURE__ */ jsxs15("div", { style: { fontSize: "14px", lineHeight: "20px", fontWeight: 400 }, children: [
+          /* @__PURE__ */ jsx20("span", { style: { fontWeight: 550 }, children: "Initiator: " }),
+          " ",
+          initiator
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs15(
+        "div",
+        {
+          style: {
+            textAlign: "center",
+            display: "flex",
+            flexDirection: "column",
+            position: "absolute",
+            right: "15px",
+            bottom: "12px"
+          },
+          className: "icon-btn-container",
+          children: [
+            /* @__PURE__ */ jsx20(IconButton3, { sx: { padding: "3px" }, onClick: onClose, children: /* @__PURE__ */ jsx20(SvgIcon, { children: /* @__PURE__ */ jsx20("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "#4E4E4F", children: /* @__PURE__ */ jsx20("path", { d: "M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" }) }) }) }),
+            /* @__PURE__ */ jsx20("div", { style: { fontSize: "11px" }, children: "Dismiss" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx20("div", { style: { top: "6px", right: "15px", position: "absolute", fontSize: "11px", color: "#797979" }, children: timeStamp })
+    ] });
   }
 }