fix: alert component styles

frontend/src/components/v2/Alert/Alert.stories.tsx

@@ -1,8 +1,8 @@
-import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Alert, AlertDescription, AlertTitle } from "./Alert";
+import { Alert, AlertDescription } from "./Alert";
 
 const meta: Meta<typeof Alert> = {
   title: "Components/Alert",
@@ -14,12 +14,7 @@ export default meta;
 
 type Story = StoryObj<typeof Alert>;
 
-const ExampleComponent = () => (
-  <>
-    <AlertTitle>this is a title</AlertTitle>
-    <AlertDescription>this is a description</AlertDescription>
-  </>
-);
+const ExampleComponent = () => <AlertDescription>this is a description</AlertDescription>;
 
 export const Default: Story = {
   args: {
@@ -41,14 +36,26 @@ export const Destructive: Story = {
   }
 };
 
-export const WithIcon: Story = {
+export const WithCustomIcon: Story = {
   args: {
-    children: (
-      <>
-        <FontAwesomeIcon icon={faTriangleExclamation} />
-        <ExampleComponent />
-      </>
-    ),
-    variant: "warning"
+    children: <ExampleComponent />,
+    variant: "warning",
+    icon: <FontAwesomeIcon icon={faPlus} />
+  }
+};
+
+export const WithOutIcon: Story = {
+  args: {
+    children: <ExampleComponent />,
+    variant: "warning",
+    icon: null
+  }
+};
+
+export const WithOutTitle: Story = {
+  args: {
+    children: <ExampleComponent />,
+    variant: "warning",
+    hideTitle: true
   }
 };

frontend/src/components/v2/Alert/Alert.tsx

@@ -1,10 +1,16 @@
+/* eslint-disable react/prop-types */
 import * as React from "react";
+import {
+  faExclamationCircle,
+  faExclamationTriangle,
+  faInfoCircle
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { type VariantProps, cva } from "cva";
-
-import { cn } from "@app/helpers/classNames";
+import { twMerge } from "tailwind-merge";
 
 const alertVariants = cva(
-  "relative w-full bg-mineshaft-800 rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  "w-full bg-mineshaft-800 rounded-lg border px-4 py-3 text-sm flex items-center gap-x-4",
   {
     variants: {
       variant: {
@@ -19,33 +25,62 @@ const alertVariants = cva(
   }
 );
 
+type AlertProps = {
+  title?: string;
+  hideTitle?: boolean;
+  icon?: React.ReactNode;
+};
+
+const variantTitleMap = {
+  default: "Info",
+  destructive: "Danger",
+  warning: "Warning"
+};
+
+const variantIconMap = {
+  default: faInfoCircle,
+  destructive: faExclamationCircle,
+  warning: faExclamationTriangle
+};
+
 const Alert = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-));
-Alert.displayName = "Alert";
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, children, ...props }, ref) => (
-    <h5
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants> & AlertProps
+>(({ className, variant, title, icon, hideTitle = false, children, ...props }, ref) => {
+  const defaultTitle = title ?? variantTitleMap[variant ?? "default"];
+  return (
+    <div
       ref={ref}
-      className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+      role="alert"
+      className={twMerge(alertVariants({ variant }), className)}
       {...props}
     >
-      {children}
-    </h5>
-  )
-);
-AlertTitle.displayName = "AlertTitle";
+      <div>
+        {typeof icon !== "undefined" ? (
+          <>{icon} </>
+        ) : (
+          <FontAwesomeIcon className="text-lg" icon={variantIconMap[variant ?? "default"]} />
+        )}
+      </div>
+      <div className="flex flex-col gap-y-1">
+        {hideTitle ? null : (
+          <h5 className="font-medium leading-none tracking-tight" {...props}>
+            {defaultTitle}
+          </h5>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+});
+Alert.displayName = "Alert";
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+  <div ref={ref} className={twMerge("text-sm [&_p]:leading-relaxed", className)} {...props} />
 ));
 AlertDescription.displayName = "AlertDescription";
 
-export { Alert, AlertDescription, AlertTitle };
+export { Alert, AlertDescription };

frontend/src/components/v2/Alert/index.tsx

@@ -1 +1 @@
-export { Alert, AlertDescription, AlertTitle } from "./Alert";
+export { Alert, AlertDescription } from "./Alert";