FWF-5339[feature] - v8-global-alert

forms-flow-components/src/components/CustomComponents/Alert.tsx

@@ -0,0 +1,54 @@
+import React, { FC } from "react";
+
+interface AlertProps {
+  message: string;
+  variant?: "passive" | "focus" | "error" | "warning";
+  dataTestId?: string; // Main test id for the container
+  rightContent?: React.ReactNode;
+  isShowing?: boolean;
+}
+
+export const Alert: FC<AlertProps> = ({
+  message,
+  variant = "focus",
+  dataTestId = "app-alert",
+  rightContent,
+  isShowing = false,
+}) => {
+
+  // If alert is not showing, render nothing
+  if (!isShowing) return null;
+
+  return (
+    <div
+      // Main alert container
+      className={`custom-alert custom-alert-${variant} ${
+        isShowing ? "entering" : "leaving"
+      }`}
+      role="alert"
+      aria-live="assertive"
+      aria-atomic="true"
+      data-testid={dataTestId}
+    >
+      {/* Left section: message area */}
+      <div
+        className="custom-alert-left"
+        data-testid={`${dataTestId}-left`}
+        aria-label="alert-message"
+      >
+        <span className="custom-alert-text">{message}</span>
+      </div>
+
+      {/* Right section: actions or extra content */}
+      {rightContent && (
+        <div
+          className="custom-alert-right"
+          data-testid={`${dataTestId}-right`}
+          aria-label="alert-action"
+        >
+          {rightContent}
+        </div>
+      )}
+    </div>
+  );
+};

forms-flow-components/src/components/index.ts

@@ -46,4 +46,6 @@ export * from "./CustomComponents/CustomDropdownButton";
 export * from "./CustomComponents/PromptModal";      
 export * from "./CustomComponents/CustomTextInput";
 export * from "./CustomComponents/CustomTextArea";
-export * from "./CustomComponents/FileUploadArea";
+export * from "./CustomComponents/FileUploadArea";   
+export * from "./CustomComponents/Alert"  
+

forms-flow-theme/scss/index.scss

@@ -50,5 +50,6 @@
 @import "./v8-scss/textInput";
 @import "./v8-scss/textArea";
 @import "./v8-scss/radio";
+@import "./v8-scss/alert";
 @import "./v8-scss/formCreateLayout";
 @import "./v8-scss/dropdownMultiselect";

forms-flow-theme/scss/v8-scss/_alert.scss

@@ -0,0 +1,61 @@
+@import "_mixins";
+
+// ✅ Color Variables
+$alert-bg: var(--white-200);
+$alert-text-color: var(--secondary-dark);
+
+$alert-passive: var(--gray-medium-dark);
+$alert-focus: var(--primary-dark);
+$alert-error: var(--orange-100);
+$alert-warning: var(--red-100);
+
+// ✅ Animation Variables
+$alert-drop-duration: 0.3s;
+$alert-height: 3.5rem;
+
+$font-size-15: var(--font-size-15);
+$font-weight-medium: var(--font-weight-medium);
+
+.custom-alert {
+    width: 100%;
+    max-height: $alert-height;
+    padding: 1.063rem 1.375rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: $alert-bg;
+    border: 0.063rem solid $alert-passive;
+    border-radius: 0.313rem;
+
+    &-left {
+        flex: 1;
+    }
+
+    &-right {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+    }
+
+    &-text {
+        @include font-style($font-size-15, $font-weight-medium, $alert-text-color);
+    }
+
+    // ✅ Variants (Border Colors)
+    &-passive {
+        border-color: $alert-passive;
+    }
+
+    &-focus {
+        border-color: $alert-focus;
+    }
+
+    &-error {
+        border-color: $alert-error;
+    }
+
+    &-warning {
+        border-color: $alert-warning;
+    }
+}