feat(ui): add small variant for Alert component

pkgs/clan-app/ui/src/components/Alert/Alert.css

@@ -1,8 +1,8 @@
 div.alert {
-  @apply flex gap-2.5 px-6 py-4 size-full rounded-md items-start;
+  @apply flex flex-row gap-2.5 p-4 rounded-md items-start;
 
   &.has-icon {
-    @apply pl-4;
+    @apply pl-3;
 
     svg.icon {
       @apply relative top-0.5;
@@ -10,11 +10,15 @@ div.alert {
   }
 
   &.has-dismiss {
-    @apply pr-4;
+    @apply pr-3;
+  }
+
+  & > button.dismiss-trigger {
+    @apply relative top-0.5;
   }
 
   & > div.content {
-    @apply flex flex-col gap-2 size-full;
+    @apply flex flex-col size-full gap-1;
   }
 
   &.info {
@@ -32,8 +36,4 @@ div.alert {
   &.success {
     @apply bg-semantic-success-1 border border-semantic-success-3 fg-semantic-success-3;
   }
-
-  & > button.dismiss-trigger {
-    @apply relative top-0.5;
-  }
 }

pkgs/clan-app/ui/src/components/Alert/Alert.stories.tsx

@@ -3,16 +3,20 @@ import { Alert, AlertProps } from "@/src/components/Alert/Alert";
 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="w-72">
+      <Alert {...props} />
+    </div>
+    <div class="w-72">
+      <Alert {...props} size="s" />
+    </div>
+  </div>
+);
+
 const meta: Meta<AlertProps> = {
   title: "Components/Alert",
-  component: Alert,
-  decorators: [
-    (Story: StoryObj) => (
-      <div class="w-72">
-        <Story />
-      </div>
-    ),
-  ],
+  component: AlertExamples,
 };
 
 export default meta;
@@ -23,6 +27,7 @@ export const Info: Story = {
   args: {
     type: "info",
     title: "Headline",
+    onDismiss: undefined,
     description:
       "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
   },

pkgs/clan-app/ui/src/components/Alert/Alert.tsx

@@ -8,26 +8,48 @@ import { Show } from "solid-js";
 
 export interface AlertProps {
   type: "success" | "error" | "warning" | "info";
+  size?: "default" | "s";
   title: string;
   description?: string;
   icon?: IconVariant;
   onDismiss?: () => void;
 }
 
-export const Alert = (props: AlertProps) => (
+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");
+  const iconSize = () => (size() == "default" ? "1rem" : "0.75rem");
+
+  return (
     <KAlert
       class={cx("alert", props.type, {
         "has-icon": props.icon,
         "has-dismiss": props.onDismiss,
       })}
     >
-    {props.icon && <Icon icon={props.icon} color="inherit" size="1rem" />}
+      {props.icon && (
+        <Icon icon={props.icon} color="inherit" size={iconSize()} />
+      )}
       <div class="content">
-      <Typography hierarchy="body" size="default" weight="bold" color="inherit">
+        <Typography
+          hierarchy="body"
+          family="condensed"
+          size={titleSize()}
+          weight="bold"
+          color="inherit"
+        >
           {props.title}
         </Typography>
         <Show when={props.description}>
-        <Typography hierarchy="body" size="xs" color="inherit">
+          <Typography
+            hierarchy="body"
+            family="condensed"
+            size={bodySize()}
+            color="inherit"
+          >
             {props.description}
           </Typography>
         </Show>
@@ -44,3 +66,4 @@ export const Alert = (props: AlertProps) => (
       )}
     </KAlert>
   );
+};