From 8f43af3c4847926b10f9256146f91ecd4fa20400 Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Tue, 12 Aug 2025 11:51:17 +0100
Subject: [PATCH] feat(ui): add transparent option for Alert component

---
 pkgs/clan-app/ui/src/components/Alert/Alert.css         | 4 ++++
 pkgs/clan-app/ui/src/components/Alert/Alert.stories.tsx | 8 +++++++-
 pkgs/clan-app/ui/src/components/Alert/Alert.tsx         | 8 ++++----
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/pkgs/clan-app/ui/src/components/Alert/Alert.css b/pkgs/clan-app/ui/src/components/Alert/Alert.css
index b95f39586..5a294d23e 100644
--- a/pkgs/clan-app/ui/src/components/Alert/Alert.css
+++ b/pkgs/clan-app/ui/src/components/Alert/Alert.css
@@ -36,4 +36,8 @@ div.alert {
   &.success {
     @apply bg-semantic-success-1 border border-semantic-success-3 fg-semantic-success-3;
   }
+
+  &.transparent {
+    @apply bg-transparent border-none p-0;
+  }
 }
diff --git a/pkgs/clan-app/ui/src/components/Alert/Alert.stories.tsx b/pkgs/clan-app/ui/src/components/Alert/Alert.stories.tsx
index 52d3b62bc..8111ef54d 100644
--- a/pkgs/clan-app/ui/src/components/Alert/Alert.stories.tsx
+++ b/pkgs/clan-app/ui/src/components/Alert/Alert.stories.tsx
@@ -4,13 +4,19 @@ import { expect, fn } from "storybook/test";
 import { StoryContext } from "@kachurun/storybook-solid-vite";
 
 const AlertExamples = (props: AlertProps) => (
-  <div class="flex flex-row gap-4">
+  <div class="grid w-fit grid-cols-2 gap-8">
     <div class="w-72">
       <Alert {...props} />
     </div>
     <div class="w-72">
       <Alert {...props} size="s" />
     </div>
+    <div class="w-72">
+      <Alert {...props} transparent />
+    </div>
+    <div class="w-72">
+      <Alert {...props} size="s" transparent />
+    </div>
   </div>
 );
 
diff --git a/pkgs/clan-app/ui/src/components/Alert/Alert.tsx b/pkgs/clan-app/ui/src/components/Alert/Alert.tsx
index 2ec6c794e..3f652a049 100644
--- a/pkgs/clan-app/ui/src/components/Alert/Alert.tsx
+++ b/pkgs/clan-app/ui/src/components/Alert/Alert.tsx
@@ -7,17 +7,16 @@ import { Alert as KAlert } from "@kobalte/core/alert";
 import { Show } from "solid-js";
 
 export interface AlertProps {
+  icon?: IconVariant;
   type: "success" | "error" | "warning" | "info";
   size?: "default" | "s";
   title: string;
-  description?: string;
-  icon?: IconVariant;
   onDismiss?: () => void;
+  transparent?: boolean;
+  description?: string;
 }
 
 export const Alert = (props: AlertProps) => {
-  console.log("on dismiss", !!props.onDismiss);
-
   const size = () => props.size || "default";
   const titleSize = () => (size() == "default" ? "default" : "xs");
   const bodySize = () => (size() == "default" ? "xs" : "xxs");
@@ -28,6 +27,7 @@ export const Alert = (props: AlertProps) => {
       class={cx("alert", props.type, {
         "has-icon": props.icon,
         "has-dismiss": props.onDismiss,
+        transparent: props.transparent,
       })}
     >
       {props.icon && (