refacto styles for storybook

my-workspace/projects/sae-lib/alert-box/alert-box.html

@@ -8,8 +8,8 @@
   @if (alertKind == "error"){
     <i class="ri-triangle-line"></i>
   }
-  <slot name="main">
-    {{message}}
+  <slot name="main" [innerHTML]="message ">
+
   </slot>
   <ng-content></ng-content>
 </div>

my-workspace/projects/sae-lib/alert-box/alert-box.stories.ts

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { AlertBox } from './alert-box';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+
+const meta: Meta<AlertBox> = {
+  title: 'Components/AlertBox',
+  component: AlertBox,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule],
+      providers: []
+    })
+  ],
+  argTypes: {
+    message: {
+      control: 'text',
+      description: 'Message à afficher dans l\'alerte'
+    },
+    _alertKind: {
+      control: 'select',
+      options: ['info', 'success', 'primary', 'secondary', 'warning', 'danger', 'error'],
+      description: 'Type d\'alerte'
+    }
+  },
+};
+
+export default meta;
+type Story = StoryObj<AlertBox>;
+
+export const Warning: Story = {
+  args: {
+    message: 'Ceci est un message d\'avertissement',
+    _alertKind: 'warning'
+  },
+};
+
+export const Success: Story = {
+  args: {
+    message: 'Opération réussie !',
+    _alertKind: 'success'
+  },
+};
+
+export const Info: Story = {
+  args: {
+    message: 'Information importante',
+    _alertKind: 'info'
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    message: 'Message principal',
+    _alertKind: 'primary'
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    message: 'Message secondaire',
+    _alertKind: 'secondary'
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    message: 'Attention danger !',
+    _alertKind: 'danger'
+  },
+};
+
+export const Error: Story = {
+  args: {
+    message: 'Une erreur est survenue',
+    _alertKind: 'error'
+  },
+};
+
+export const WithContent: Story = {
+  args: {
+    _alertKind: 'warning'
+  },
+  render: (args) => ({
+    props: args,
+    template: `<sae-alert-box [_alertKind]="'warning'">Contenu personnalisé via ng-content</sae-alert-box>`
+  })
+};

my-workspace/projects/sae-lib/alert-box/alert-box.ts

@@ -7,7 +7,7 @@ import {Component, Input} from '@angular/core';
   styleUrl: './alert-box.scss'
 })
 export class AlertBox {
-  @Input() public message = "";
+  @Input() public message  = "";
 
   @Input() public _alertKind = "warning";
 

my-workspace/projects/sae-lib/src/styles/_conversations.scss

@@ -19,15 +19,6 @@
   left: -16px;
   top: -32px;
 
-  .time-ago {
-    color: #1E1F22;
-
-    font-size: 10px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 8px;
-    padding-left: 3px;
-  }
 
   .user-name {
     color: #1E1F22;

my-workspace/projects/sae-lib/src/styles/_layout_demo.scss

@@ -161,6 +161,7 @@
   }
 
   .new-button {
+    cursor: pointer;
     background: linear-gradient(70deg, #07397C -37.98%, #1767AD 17.98%, #255B8E 53.85%);
     @extend .nav-button !optional;
     @extend .is-clickable !optional;
@@ -171,6 +172,10 @@
     align-items: center;
     flex-shrink: 0;
 
+    &:hover{
+      background: blue;
+      color: white;
+    }
 
     i {
       width: 20px;